:root{
 --brand:#00B08E;        /* Logo Emerald */
 --brand-dark:#009972;   /* Button Hover */
 --navy:#0c7ab8;         /* Header + Hero Dark */
 --teal:#397D86;         /* Secondary Accent */
 --light:#F5FAF9;        /* Light Section BG */
 --text:#222;
 --muted:#64748b;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
	padding-top:110px; 
 font-family:'Plus Jakarta Sans',sans-serif;
 background:var(--light);
 color:var(--text);
 scroll-behavior:smooth;
}
img{max-width:100%;display:block;}
.container{max-width:1200px;margin:auto;padding:0 5%;}
section{padding:90px 0;}
h1,h2,h3,h4{font-weight:800;}
a{text-decoration:none;color:inherit;}

/* ===== TOPBAR ===== */
.topbar{
 position:fixed;
 top:0;
 width:100%;
 z-index:1100;
 background:#0c7ab8;
 color:white;
 font-size:13px;
 padding:6px 0;
}


.topbar-container{
 width:100%;
 max-width:100%;
 margin:0;
 padding:0 5%;
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:15px;
}

.topbar-left{
 display:flex;
 gap:18px;
 flex-wrap:wrap;
}

.topbar-left span{
 display:flex;
 align-items:center;
 gap:6px;
 opacity:0.95;
}

.topbar-left i{
 color:#fff;
 font-size:13px;
}

.topbar-right{
 display:flex;
 gap:10px;
}

.topbar-right a{
 width:26px;
 height:26px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:50%;
 background:rgba(255,255,255,0.15);
 color:white;
 transition:0.3s;
 font-size:13px;
}

.topbar-right a:hover{
 background:white;
 color:var(--brand-dark);
 transform:translateY(-2px);
}

/* Push header down because topbar is above */
.header{
 top:32px;
}

/* Mobile Responsive */
@media(max-width:768px){
 .topbar-container{
   flex-direction:column;
   text-align:center;
   gap:5px;
 }
 .topbar-left{
   justify-content:center;
   gap:10px;
 }
}


/* ===== HEADER ===== */

.header{
 position:fixed;
 top:36px; /* height of topbar */
 width:100%;
 z-index:1000;
 background:#063d5a;
 backdrop-filter:blur(18px);
 box-shadow:0 8px 30px rgba(0,0,0,0.35);
 border-bottom:1px solid rgba(255,255,255,0.08);
}


.header-container{
 max-width:1200px;
 margin:auto;
 padding:14px 5%;
 display:flex;
 justify-content:space-between;
 align-items:center;
}

/* Logo */
.logo img{
 height:64px;
 width:auto;
 object-fit:contain;
 transition:0.3s;
}
.logo img:hover{
 filter:drop-shadow(0 0 12px rgba(0,176,142,0.7));
}


/* Navigation */
.nav-menu{
 display:flex;
 align-items:center;
 gap:12px;
}

.nav-menu a.active{
 color: var(--brand);
 background: linear-gradient(145deg, rgba(0,176,142,0.18), rgba(0,176,142,0.05));
 border-color: rgba(0,176,142,0.6);
 box-shadow:0 0 12px rgba(0,176,142,0.35);
}


/* Menu Buttons */
.nav-btn{
 color:white;
 font-weight:600;
 padding:10px 18px;
 border-radius:10px;
 background:linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
 border:1px solid rgba(255,255,255,0.12);
 transition:0.3s;
 font-size:14px;
}
.nav-btn:hover{
 color:var(--brand);
 background:linear-gradient(145deg, rgba(0,176,142,0.18), rgba(0,176,142,0.05));
 border-color:rgba(0,176,142,0.6);
 box-shadow:0 0 15px rgba(0,176,142,0.35);
 transform:translateY(-2px);
}

/* Apply Now Button */
.nav-btn-apply{
 color:white;
 font-weight:700;
 padding:11px 22px;
 border-radius:30px;
 background:linear-gradient(135deg,var(--brand),var(--brand-dark));
 box-shadow:0 6px 18px rgba(0,176,142,0.45);
 transition:0.3s;
 font-size:14px;
}
.nav-btn-apply:hover{
 transform:translateY(-3px);
 box-shadow:0 10px 25px rgba(0,176,142,0.65);
}

/* Mobile */
@media(max-width:900px){
 .nav-menu{display:none;}
}

/* ===== HERO ===== */

.hero{
 background:var(--navy);
 color:white;
 min-height:100vh;
 padding-top:95px;
 display:flex;
 align-items:center;
}

.hero-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:60px;
 align-items:center;
}

.hero h1{font-size:60px;line-height:1.1;}
.hero h1 span{color:var(--brand);}

.hero p{
 color:#b4bcc8;
 margin:20px 0 35px;
 max-width:450px;
}

.hero-buttons{display:flex;gap:15px;}

.btn-primary{
 background:linear-gradient(135deg,var(--brand),var(--brand-dark));
 color:white;
 padding:15px 30px;
 border-radius:15px;
 font-weight:700;
 border:none;
 cursor:pointer;
 transition:.3s;
}
.btn-primary:hover{
 transform:scale(1.05);
 box-shadow:0 10px 25px rgba(0,176,142,0.5);
}

.btn-outline{
 border:1px solid #2c3e50;
 color:white;
 padding:15px 30px;
 border-radius:15px;
 background:transparent;
 cursor:pointer;
 transition:.3s;
}
.btn-outline:hover{
 background:#0f1b2b;
}

.hero-img{position:relative;}
.hero-img img{
 height:480px;
 object-fit:cover;
 border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;
 border:4px solid rgba(255,255,255,.08);
 box-shadow:0 20px 50px rgba(0,0,0,.6);
}
.hero-glow{
 position:absolute;
 inset:0;
 background:rgba(0,176,142,.22);
 filter:blur(120px);
 border-radius:50%;
}

/* ===== LOGO SLIDER ===== */
.logos{
 padding:50px 0;
 border-bottom:1px solid #e6eceb;
 overflow:hidden;
 background:white;
}
.logo-track{
 display:flex;
 gap:80px;
 animation:scroll 20s linear infinite;
}
.logo-track img{
 height:55px;
 opacity:.5;
 filter:grayscale(1);
}
@keyframes scroll{
 0%{transform:translateX(0);}
 100%{transform:translateX(-50%);}
}

/* ===== WHY US ===== */
.why-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:25px;
 margin-top:60px;
}
.why-card{
 background:white;
 padding:40px;
 border-radius:35px;
 text-align:center;
 border:1px solid #eef2f1;
 transition:.4s;
}
.why-card:hover{
 transform:translateY(-10px);
 box-shadow:0 20px 40px rgba(0,176,142,.12);
 border-color:var(--brand);
}
.why-icon{
 width:80px;height:80px;border-radius:50%;
 margin:auto;margin-bottom:25px;
 display:flex;align-items:center;justify-content:center;
 font-size:32px;
 background:#eafff9;
 color:var(--brand);
}

/* ===== DESTINATIONS ===== */
.destinations{
 background:#f7fbfa;
}
.destinations h2{
 text-align:center;
 font-size:40px;
 margin-bottom:60px;
}
.destinations h2 span{color:var(--brand);}

.destinations-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:25px;
}

.destination-card{
 background:white;
 padding:32px;
 border-radius:25px;
 border:1px solid #eef2f1;
 transition:.3s;
}
.destination-card:hover{
 box-shadow:0 20px 40px rgba(0,0,0,0.06);
 transform:translateY(-5px);
}

.destination-card h3{font-size:22px;margin-bottom:6px;}
.destination-card p{font-size:14px;color:var(--muted);margin-bottom:18px;}

.destination-card .divider{
 border-top:1px solid #e2e8f0;
 padding-top:15px;
}

.destination-card .label{
 font-size:11px;
 font-weight:800;
 text-transform:uppercase;
 color:#94a3b8;
 margin-bottom:10px;
}

.course-tags{
 display:flex;flex-wrap:wrap;
}
.course-tags span{
 background:#f1f5f9;
 padding:4px 10px;
 border-radius:6px;
 font-size:11px;
 margin:3px;
 color:#334155;
}

/* Gradient Card */
.destination-card.gradient{
 background:linear-gradient(135deg,var(--navy),var(--brand));
 color:white;
 border:none;
}
.destination-card.gradient p{color:rgba(255,255,255,0.7);}
.destination-card.gradient .divider{border-top:1px solid rgba(255,255,255,0.2);}
.destination-card.gradient .label{color:rgba(255,255,255,0.6);}
.destination-card.gradient .course-tags span{
 background:rgba(255,255,255,0.12);
 color:white;
}

/* ===== PROCESS ===== */
.process-title{text-align:center;margin-bottom:70px;}
.process-title h2{font-size:40px;}
.process-title h2 span{color:var(--brand);}
.process-title p{color:var(--muted);}

.process-wrapper{position:relative;max-width:1100px;margin:auto;}
.process-line{
 position:absolute;top:45px;left:0;right:0;height:2px;
 background:linear-gradient(to right,transparent,var(--brand),transparent);
 opacity:.1;
}
.process-grid{
 display:grid;
 grid-template-columns:repeat(6,1fr);
 gap:20px;
}

.process-card{
 background:#f8fafc;
 border:1px solid #e2e8f0;
 border-radius:18px;
 padding:25px 18px;
 text-align:center;
 transition:.3s;
}
.process-card:hover{
 transform:translateY(-6px);
 box-shadow:0 15px 30px rgba(0,176,142,0.12);
 border-color:var(--brand);
 background:white;
}

.process-step{
 width:45px;height:45px;
 margin:-45px auto 15px;
 background:var(--brand);
 color:white;font-weight:800;
 border-radius:12px;
 display:flex;align-items:center;justify-content:center;
 font-size:18px;
 box-shadow:0 8px 20px rgba(0,176,142,0.5);
}

.process-card h4{font-size:15px;margin-bottom:8px;}
.process-card p{font-size:14px;font-weight:700;color:var(--muted);line-height:1.6;}

/* ===== ONLINE COURSES ===== */
/* ===== ONLINE COURSES SECTION ===== */
.courses-section {
  background: white;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.course-category-card {
  background: #f8fafc;
  border-radius: 24px;
  padding: 30px;
  border: 1px solid #e2e8f0;
  transition: 0.4s;
}

.course-category-card:hover {
  background: white;
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 176, 142, 0.1);
  border-color: var(--brand);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #eef2f6;
}

.category-header i {
  font-size: 24px;
  color: var(--brand);
}

.category-header h3 {
  font-size: 20px;
  color: var(--navy);
}

.course-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 12px;
  border: 1px solid transparent;
  transition: 0.3s;
}

.course-category-card:hover .course-item {
  border-color: #f1f5f9;
}

.course-info h5 {
  font-size: 15px;
  margin-bottom: 4px;
  color: #1e293b;
}

.course-info p {
  font-size: 12px;
  color: var(--muted);
}

.course-tag-type {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 176, 142, 0.1);
  color: var(--brand);
}

.course-tag-type.pro {
  background: rgba(9, 91, 133, 0.1);
  color: var(--navy);
}

.course-tag-type.short {
  background: rgba(57, 125, 134, 0.1);
  color: var(--teal);
}

/* Responsive Courses */
@media(max-width: 992px) {
  .courses-grid {
    grid-template-columns: 1fr;
  }
}




/* ===== CONTACT - BOUNCY PREMIUM ===== */

.contact-section{
 background:#f7fbfa;
 padding:90px 0;
 position:relative;
 overflow:hidden;
}

/* Soft floating background bubbles */
.contact-section::before,
.contact-section::after{
 content:"";
 position:absolute;
 border-radius:50%;
 background:rgba(0,176,142,0.08);
 filter:blur(80px);
 animation:floatBlob 12s infinite ease-in-out;
 z-index:0;
}
.contact-section::before{
 width:220px;height:220px;
 top:-60px;left:-60px;
}
.contact-section::after{
 width:300px;height:300px;
 bottom:-80px;right:-80px;
 animation-delay:3s;
}

@keyframes floatBlob{
 0%,100%{transform:translateY(0);}
 50%{transform:translateY(-30px);}
}

/* Layout */
.contact-wrapper{
 display:grid;
 grid-template-columns:1fr 1.2fr;
 gap:50px;
 position:relative;
 z-index:2;
}

/* LEFT BOX */
.contact-info-box{
 background:linear-gradient(135deg,var(--navy),var(--brand));
 color:white;
 padding:45px;
 border-radius:22px;
 box-shadow:0 20px 45px rgba(0,0,0,0.18);
 transition:0.4s;
 animation:bounceIn 0.8s ease;
}

.contact-info-box:hover{
 transform:translateY(-8px);
 box-shadow:0 25px 55px rgba(0,176,142,0.35);
}

/* RIGHT FORM */
.contact-form-box{
 background:white;
 padding:45px;
 border-radius:22px;
 border:1px solid #e2e8f0;
 box-shadow:0 15px 35px rgba(0,0,0,0.06);
 transition:0.4s;
 animation:bounceIn 1s ease;
}

.contact-form-box:hover{
 transform:translateY(-6px);
 box-shadow:0 22px 45px rgba(0,176,142,0.15);
 border-color:var(--brand);
}

/* Bounce Entrance */
@keyframes bounceIn{
 0%{transform:translateY(40px);opacity:0;}
 60%{transform:translateY(-8px);opacity:1;}
 100%{transform:translateY(0);}
}

/* Form Fields */
.form-group input,
.form-group textarea{
 width:100%;
 padding:15px 16px;
 border-radius:12px;
 border:1px solid #e2e8f0;
 font-size:14px;
 transition:0.3s;
 font-family:inherit;
}

.form-group input:focus,
.form-group textarea:focus{
 border-color:var(--brand);
 box-shadow:0 0 0 4px rgba(0,176,142,0.18);
 outline:none;
}

/* Submit Button */
.contact-btn{
 background:linear-gradient(135deg,var(--brand),var(--brand-dark));
 color:white;
 border:none;
 padding:15px 34px;
 border-radius:14px;
 font-weight:800;
 cursor:pointer;
 font-size:15px;
 letter-spacing:0.3px;
 transition:0.3s;
 box-shadow:0 8px 20px rgba(0,176,142,0.45);
 position:relative;
 overflow:hidden;
}

.contact-btn::after{
 content:"";
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,0.35),transparent 60%);
 transform:rotate(25deg);
 transition:0.6s;
}

.contact-btn:hover{
 transform:translateY(-3px);
 box-shadow:0 14px 35px rgba(0,176,142,0.75);
}

.contact-btn:hover::after{
 left:100%;
}

.contact-item{
 display:flex;
 align-items:center;   /* <-- THIS fixes vertical alignment */
 gap:15px;
 margin-bottom:18px;
 font-size:15px;
 line-height:1.4;
}

.contact-item span{
 display:block;
 line-height:1.4;
}

/* Icon circle perfectly centered */
.contact-icon{
 width:42px;
 height:42px;
 min-width:42px;      /* prevents shrink */
 border-radius:50%;
 background:rgba(255,255,255,0.18);
 display:flex;
 align-items:center;  /* vertical center */
 justify-content:center; /* horizontal center */
 font-size:16px;
}

.contact-item:hover .contact-icon{
 background:rgba(255,255,255,0.35);
 transform:scale(1.1);
}

/* Responsive */
@media(max-width:900px){
 .contact-wrapper{
  grid-template-columns:1fr;
 }
}

/* ===== FOOTER ===== */
/* ===== SINGLE LINE FOOTER ===== */

.footer-new{
 background:var(--navy);
 padding:35px 0;
 color:#9aa4b2;
}

.footer-flex{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px;
 flex-wrap:wrap;
}

/* LEFT */
.footer-subscribe h4{
 color:white;
 font-size:16px;
 margin-bottom:8px;
}

.subscribe-form{
 display:flex;
 gap:8px;
}

.subscribe-form input{
 padding:10px 14px;
 border-radius:8px;
 border:none;
 outline:none;
 font-size:13px;
 min-width:220px;
}

.subscribe-form button{
 background:linear-gradient(135deg,var(--brand),var(--brand-dark));
 color:white;
 border:none;
 padding:10px 18px;
 border-radius:8px;
 font-weight:700;
 cursor:pointer;
 font-size:13px;
 transition:.3s;
}

.subscribe-form button:hover{
 box-shadow:0 6px 18px rgba(0,176,142,0.6);
 transform:translateY(-2px);
}

/* RIGHT */
.footer-right{
 text-align:right;
}

.footer-social{
 display:flex;
 gap:10px;
 justify-content:flex-end;
 margin-bottom:6px;
}

.footer-social a{
 width:32px;
 height:32px;
 border-radius:50%;
 background:#0f1b2b;
 color:white;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:14px;
 transition:.3s;
}

.footer-social a:hover{
 background:var(--brand);
 transform:translateY(-2px);
}

.footer-right p{
 font-size:12px;
 color:#7b8794;
}

/* Responsive */
@media(max-width:768px){
 .footer-flex{
  flex-direction:column;
  text-align:center;
 }
 .footer-right{
  text-align:center;
 }
 .footer-social{
  justify-content:center;
 }
}

/* ===== MOBILE MENU ===== */

.nav-toggle{
 display:none;
 color:white;
 font-size:24px;
 cursor:pointer;
}

@media(max-width:900px){
 .nav-toggle{display:block;}

 .nav-menu{
  position:absolute;
  top:70px;
  right:5%;
  background:#061222;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:15px;
  display:none;
  flex-direction:column;
  gap:10px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
 }

 .nav-menu.active{
  display:flex;
 }

 .nav-btn,
 .nav-btn-apply{
  width:160px;
  text-align:center;
 }
}

.header.shrink{
 padding:6px 0;
 background:rgba(6,18,34,0.98);
 box-shadow:0 4px 20px rgba(0,0,0,0.6);
}
.header.shrink .logo img{
 height:52px;
}

.reveal{
 opacity:0;
 transform:translateY(40px);
 transition:0.8s ease;
}

.reveal.active{
 opacity:1;
 transform:translateY(0);
}

.back-top{
 position:fixed;
 bottom:90px;
 right:22px;
 width:45px;
 height:45px;
 border:none;
 border-radius:50%;
 background:linear-gradient(135deg,var(--brand),var(--brand-dark));
 color:white;
 font-size:18px;
 cursor:pointer;
 display:none;
 align-items:center;
 justify-content:center;
 box-shadow:0 6px 18px rgba(0,176,142,0.6);
 z-index:999;
 transition:.3s;
}

.back-top:hover{
 transform:translateY(-3px);
 box-shadow:0 10px 25px rgba(0,176,142,0.9);
}

.whatsapp-float{
 position:fixed;
 bottom:20px;
 right:20px;
 background:#25D366;
 color:white;
 width:55px;
 height:55px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:26px;
 box-shadow:0 8px 20px rgba(37,211,102,0.6);
 z-index:999;
 transition:.3s;
}

.whatsapp-float:hover{
 transform:scale(1.1);
 box-shadow:0 12px 28px rgba(37,211,102,0.9);
}

/* ===== RESPONSIVE GRID FIXES ===== */

@media(max-width:1024px){
 .hero-grid{
   grid-template-columns:1fr;
   text-align:center;
 }
 .hero p{margin-left:auto;margin-right:auto;}
 .hero-buttons{justify-content:center;}
 .hero-img img{height:380px;margin:auto;}
}

@media(max-width:900px){
 .why-grid,
 .destinations-grid,
 .process-grid{
   grid-template-columns:1fr 1fr;
 }
}

@media(max-width:600px){
 .why-grid,
 .destinations-grid,
 .process-grid{
   grid-template-columns:1fr;
 }

 section{padding:70px 0;}

 .hero h1{font-size:38px;}
 .process-line{display:none;}
}

/* ===== SCROLL SPY ACTIVE LINK ===== */
.nav-btn.active{
 color: var(--brand);
 background: linear-gradient(145deg, rgba(0,176,142,0.18), rgba(0,176,142,0.05));
 border-color: rgba(0,176,142,0.6);
 box-shadow: 0 0 12px rgba(0,176,142,0.35);
}
/* Hide Topbar on Mobile */
@media(max-width:768px){
  .topbar{
    display:none;
  }

  /* Adjust header position when topbar is hidden */
  .header{
    top:0;
  }

  body{
    padding-top:80px; /* reduce spacing since topbar gone */
  }
}

/* 1. Base Variables (ensure these match your brand) */
:root {
    --brand: #00B08E;
    --navy: #063d5a;
}

/* 2. Modal Overlay - The dark background */
.modal-overlay {
    display: none; /* Controlled by JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(6, 61, 90, 0.96); /* Darker for better focus */
    backdrop-filter: blur(8px);
    z-index: 99999;
    
    /* Centering Logic */
    display: none; 
    align-items: center; 
    justify-content: center;
    padding: 20px;
}

/* 3. Modal Content Box */
.modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 700px;
    border-radius: 24px;
    position: relative;
    max-height: 90vh; /* Prevents form from going off-screen */
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalPop 0.3s ease-out;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.95) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* 4. Scrollable Body Area */
.modal-body {
    padding: 0 30px 30px 30px;
    overflow-y: auto; /* This enables the scrollbar */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--brand) #f1f1f1;
}

/* Custom scrollbar for Chrome/Safari */
.modal-body::-webkit-scrollbar {
    width: 6px;
}
.modal-body::-webkit-scrollbar-thumb {
    background-color: var(--brand);
    border-radius: 10px;
}

/* 5. Header & Form Layout */
.modal-header { 
    padding: 30px 30px 15px; 
    text-align: center; 
}
.modal-header h2 span { color: var(--brand); }

.form-row { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-bottom: 15px;
}

.form-group { margin-bottom: 15px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--navy);
}

.modal-form input, 
.modal-form select, 
.modal-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    transition: 0.3s;
}

.modal-form input:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 176, 142, 0.1);
}

/* 6. Buttons & Close */
.submit-btn {
    background: var(--brand);
    color: white;
    border: none;
    padding: 16px;
    width: 100%;
    border-radius: 12px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.submit-btn:hover {
    background: #009972;
    transform: translateY(-2px);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 35px;
    cursor: pointer;
    color: #cbd5e1;
    line-height: 1;
    transition: 0.2s;
}
.close-modal:hover { color: #ef4444; }

/* 7. Responsive Mobile Tweaks */
@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
    .modal-content { 
        max-height: 95vh; 
        margin: 0;
    }
    .modal-body { padding: 0 20px 20px 20px; }
    .modal-overlay { padding: 10px; }
}