@media (min-width: 768px) {
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  background: #f9fafb;
  color: #111;
}

header {
  padding: 2rem;
}

.nav-buttons {
  display: flex;
  gap: 1rem;
}

.nav-buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: 12px;
  background: #f3f6fb;
  color: #444462;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}

.nav-buttons .btn .btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}

.nav-buttons .btn .btn-icon path {
  stroke: currentColor;
}

.nav-buttons .btn:hover {
  background: #eef6fc;
  color: #0ba5ec;
  border-color: #e4ecfb;
}

.nav-buttons .btn.active {
  background: #eef6fc;
  color: #0ba5ec;
  border: 1px solid #e4ecfb;
}

.nav-buttons .btn:hover .btn-icon,
.nav-buttons .btn.active .btn-icon {
  color: #0ba5ec;
  fill: currentColor;
  stroke: currentColor;
}

.beamer-frame {
  position: relative;
  width: 100%;
  height: 1000px;
  overflow: hidden;
}

.beamer-iframe {
  position: absolute;
  top: -150px;                
  left: -14px;                 
  width: calc(100% + 14px + 30px); 
  height: calc(100% + 300px);  
  transform: translateX(14px);
}


.page-hero {
background: linear-gradient(to right, #4CAEDC, #1B7DAB);
padding-top: 20px;
}

.page-title {
  color: white;
  margin: 0 0 8px 90px;
  font-size: 2.5rem;
  margin-left: 90px;
}

.page-subtitle {
  color: white;
  margin: 0 0 12px 90px;
}

.nav-buttons {
  margin: 0 0 12px 58px;
}
}

@media (max-width: 768px) {
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  background: #f9fafb;
  color: #111;
}

header {
  padding: 2rem;
}

.nav-buttons {
  display: flex;
  gap: 1rem;
}

.nav-buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: 12px;
  background: #f3f6fb;
  color: #444462;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}

.nav-buttons .btn .btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}

.nav-buttons .btn .btn-icon path {
  stroke: currentColor;
}

.nav-buttons .btn:hover {
  background: #eef6fc;
  color: #0ba5ec;
  border-color: #e4ecfb;
}

.nav-buttons .btn.active {
  background: #eef6fc;
  color: #0ba5ec;
  border: 1px solid #e4ecfb;
}

.nav-buttons .btn:hover .btn-icon,
.nav-buttons .btn.active .btn-icon {
  color: #0ba5ec;
  fill: currentColor;
  stroke: currentColor;
}

.beamer-frame {
  position: relative;
  width: 100%;
  height: 1000px;
  overflow: hidden;
}

.beamer-iframe {
  position: absolute;
  top: -150px;    
  left: -14px;      
  right: -30px;     
  bottom: 0;
  border: 0;
}


.page-hero {
background: linear-gradient(to right, #4CAEDC, #1B7DAB);
padding-top: 20px;
}

.page-title {
  color: white;
  margin: 0 0 8px 40px;
  font-size: 2.5rem;
}

.page-subtitle {
  color: white;
  margin: 0 0 12px 40px;
}
}

.page-header {
  display: none;
}