@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,500&family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --font-body:"Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-head:"Playfair Display", Georgia, "Times New Roman", serif;
}

h1, h2, h3, h4{ font-family:var(--font-head); font-weight:700; }

/* Whole Page Style*/



*{
  margin:0; padding:0; box-sizing:border-box; font-family:var(--font-body);
}

html{ scroll-behavior:smooth; }

body{background:#0d1b2a; color:#f0f4f8; padding-top:80px; /* for fixed navbar */}

p{font-size: 18px; line-height: 1.75;}




/*    Header / Footer / Navbar */

/* 1) Navbar / Header */



.navbar{position:fixed; top:0; left:0; width:100%; height:80px; display:flex; justify-content:space-between; align-items:center; padding:0 8%; background:#0d1b2a; box-shadow:0 4px 12px rgba(0,0,0,0.25); z-index:9999; }
.logo-container{display:flex; align-items:center; gap:15px;}

.logo-container img{
  height:56px;
  width:auto;
  border-radius:0;
  object-fit:contain;
}

.logo-container p{ color:white; font-family:var(--font-head); font-size:22px; font-weight:600; letter-spacing:.3px; }
.logo-container h2{
  color:white;
  font-size:28px;
}

nav ul{
  list-style:none;
  display:flex;
  gap:30px;
}

nav a{
  color:white;
  text-decoration:none;
  transition:.3s;
  font-weight:500;
}

nav a:hover{
  color:#0b1829;
}

.nav-btn{
  background:#0b1829;
  padding:12px 22px;
  border-radius:8px;
  color:white;
}

.nav-btn:hover{
  background:#0b1829;
}



/* Navbar responsive */



@media(max-width:900px){
  .navbar{
    flex-direction:column;
    height:auto;
    padding:20px;
  }

  nav ul{
    flex-direction:column;
    text-align:center;
    gap:15px;
    margin-top:15px;
  }
}



/* 2) Footer */



.footer{
  background:#081321;
  color:white;
  text-align:center;
  padding:30px 20px;
  margin-top:auto;
}

.footer h3{
  margin-bottom:10px;
  color:white;
}

.footer p{
  margin:8px 0;
  color:#ddd;
}

.footer-links{
  margin:20px 0;
}

.footer-links a{
  color:white;
  text-decoration:none;
  margin:0 15px;
}

.footer-links a:hover{
  color:#ff0055;
}

.footer-content{
  max-width:900px;
  margin:auto;
}

.copyright{
  color:#999;
  margin-top:20px;
}



/* Hero Section */




.hero{
  min-height:90vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:80px 20px;

  background:
    linear-gradient(rgba(13,27,42,.84), rgba(13,27,42,.84)),
    url("images/hero-v2.jpg");
  background-size:cover;
  background-position:center;
}

.hero-content{
  max-width:800px;
}


.hero h1{
  font-size:60px;
  margin-bottom:20px;
}

.hero p{
  color:white;
  margin-bottom:40px;
}



/*  Buttons  */



.primary-btn{
  display:inline-block;
  background:#ff0055;
  color:white;
  text-decoration:none;
  padding:15px 35px;
  border-radius:8px;
  transition:.3s;
  font-weight:600;
}

.primary-btn:hover{
  background:#ff2f70;
  transform:translateY(-3px);
}



/*  Sections + H2 */



section{
  padding:80px 8%;
}

section h2{
  text-align:center;
  font-size:40px;
  margin-bottom:50px;
}



/* Cards */




.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}

.card{
  background:#162b43;
  padding:35px;
  border-radius:15px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:.3s;
}

.card:hover{
  transform:translateY(-8px);
}

.card h3{
  color:#ff0055;
  margin-bottom:15px;
}

.card p{
  color:#d7dce1;
  line-height:1.8;
}




/* Question Section (FAQ) */




.faq{
  max-width:900px;
  margin:auto;
  padding:80px 20px;
}

.faq h2{
  text-align:center;
  margin-bottom:40px;
  font-size:42px;
}

.faq-item{
  margin-bottom:20px;
  border-radius:12px;
  overflow:hidden;
  border:2px solid #00b7e8;
  background:white;
}

.faq-question{
  width:100%;
  background:#1f3b5c;
  color:white;
  border:none;
  padding:22px;
  font-size:22px;
  font-weight:600;
  cursor:pointer;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.faq-question span{
  font-size:30px;
  transition:0.3s;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
  background:white;
}

.faq-answer p{
  padding:20px;
  color:#333;
  line-height:1.8;
}




/*  Testimonials  */



.testimonials{
  padding:80px 8%;
  overflow-x:hidden;
}

.testimonials h2{
  text-align:center;
  margin-bottom:40px;
  font-size:42px;
}


.testimonial-slider{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;
  max-width:1200px;
  margin:0 auto;
}



.testimonial-card{
  background:#162b43;
  border-radius:15px;
  padding:30px;

  box-shadow:0 10px 25px rgba(0,0,0,.25);
  min-width:0;
}

.testimonial-card h3{
  color:#FFD700;
  margin-bottom:20px;
}

.testimonial-card p{
  color:#f0f4f8;
  line-height:1.8;
}

.testimonial-card h4{
  margin-top:25px;
  color:#ff6b9d;
}



/* Landing Page (home/landing) */




.landing{
  padding:140px 20px 80px;
}

.landing h3{
  margin-top:40px;
  color:#ff3377;
  font-size:28px;
  text-align:center;
}





/* eyebrow / title / subtitle */




.content{
  max-width:900px;
  margin:auto;
  text-align:center;
}

.eyebrow{
  color:#00b7e8;
  font-size:18px;
  font-weight:bold;
  margin-bottom:15px;
  text-transform:uppercase;
  letter-spacing:2px;
}

.content h1{
  font-size:48px;
  margin-bottom:25px;
  line-height:1.3;
}

.subheadline{
  font-size:22px;
  color:#d6dce2;
  margin-bottom:35px;
}



/* landing list */



.landing ul{
  list-style:none;
  max-width:750px;
  margin:0 auto 50px auto;
  text-align:left;
}

.landing ul li{
  background:#162b43;
  margin-bottom:20px;
  padding:20px;
  border-left:5px solid #ff0055;
  border-radius:10px;
  font-size:20px;
  color:white;
  transition:.3s;
}

.landing ul li:hover{
  transform:translateX(8px);
  background:#1c3552;
}



/* content list */



.content ul{
  text-align:left;
  max-width:700px;
  margin:0 auto 50px;
}

.content ul li{
  list-style:none;
  margin-bottom:15px;
  font-size:20px;
}



/*    Form (landing)   */



.form-box{
  background:white;
  color:#222;
  border-radius:15px;
  padding:80px;
  max-width:650px;
  margin:40px auto;
  box-shadow:0 15px 35px rgba(0,0,0,.25);
}

.form-box h2{
  text-align:center;
  margin-bottom:30px;
  font-size:32px;
  color:#0d1b2a;
}

.form-box form{
  display:flex;
  flex-direction:column;
}

.form-box input:not([type="checkbox"]),
.form-box textarea{
  width:100%;
  padding:16px;
  margin-bottom:20px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:17px;
  transition:.3s;
  font-family:var(--font-body);
}

.form-box input:focus,
.form-box textarea:focus{
  outline:none;
  border-color:#ff0055;
  box-shadow:0 0 8px rgba(255,85,0,.25);
}

.form-box textarea{
  resize:vertical;
}




/* Landing checkbox (global checkbox base) */




.checkbox{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:20px 0 30px;
}

.checkbox input[type="checkbox"]{
  width:18px;
  height:18px;
  min-width:18px;
  margin-top:3px;
  cursor:pointer;
}

.checkbox label{
  color:#555;
  font-size:15px;
  line-height:1.6;
  text-align:left;
}

.form-box button{
  width:100%;
  padding:18px;
  background:#ff0055;
  color:white;
  border:none;
  border-radius:8px;
  font-size:22px;
  font-weight:bold;
  cursor:pointer;
  transition:.3s;
  font-family:var(--font-body);
}

.form-box button:hover{
  background:#ff3377;
  transform:translateY(-2px);
}



/* Contact Page */



main{ flex:1; }

.contact-page{
  width:90%;
  max-width:850px;
  margin:120px auto 60px;
  background:white;
  padding:45px;
  border-radius:15px;
  box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.contact-page h1{
  text-align:center;
  color:#081321;
  font-size:42px;
  margin-bottom:15px;
}

.contact-subtitle{
  text-align:center;
  color:#666;
  margin-bottom:35px;
  line-height:1.7;
}

.contact-page form{
  display:flex;
  flex-direction:column;
}

.contact-page input:not([type="checkbox"]),
.contact-page select,
.contact-page textarea{
  width:100%;
  padding:15px;
  margin-bottom:18px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:16px;
  box-sizing:border-box;
  font-family:var(--font-body);
}

.contact-page textarea{ resize:vertical; }

.contact-page input:focus,
.contact-page textarea:focus,
.contact-page select:focus{
  outline:none;
  border-color:#ff0055;
}




/* Contact page checkbox */



.contact-page .checkbox{
  margin:15px 0 25px;
}

.contact-page .checkbox label{
  color:#444;
  line-height:1.5;
  font-size:15px;
}

/* Contact submit button */
.contact-page button{
  background:#ff0055;
  color:white;
  padding:18px;
  border:none;
  border-radius:8px;
  font-size:20px;
  cursor:pointer;
  transition:.3s;
  font-family:var(--font-body);
}

.contact-page button:hover{
  background:#ff3377;
}



/* Mobile Contact tweaks */



@media(max-width:768px){
  header{ padding:0 20px; }

  .logo h2{
    font-size:20px;
  }

  .contact-page{
    padding:25px;
    margin:100px 20px 40px;
  }

  .contact-page h1{
    font-size:30px;
  }
}


/* ============ Homepage hero (readable type) ============ */

.hero{ padding:90px 20px 70px; }

.hero-content{ max-width:900px; margin:0 auto; }

.hero .hero-eyebrow{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:#c9efff;
  margin-bottom:20px;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}

.hero h1{
  font-size:clamp(40px, 6.5vw, 68px);
  line-height:1.15;
  letter-spacing:.5px;
  margin-bottom:16px;
  color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,.55);
}

.hero .hero-tagline{
  font-family:var(--font-head);
  font-style:italic;
  font-weight:500;
  font-size:clamp(22px, 3vw, 31px);
  color:#fff;
  margin-bottom:28px;
  text-shadow:0 2px 14px rgba(0,0,0,.65);
}

.hero .hero-text{
  max-width:720px;
  margin:0 auto 52px;
  font-size:clamp(18px, 2vw, 20px);
  font-weight:400;
  line-height:1.8;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

/* Video thumbnail (original image, play button kept clear of the title) */

.video-preview{ padding:0; }

.video-card{
  position:relative;
  display:block;
  max-width:820px;
  margin:0 auto;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.5);
  text-decoration:none;
  line-height:0;
}

.video-card img{
  display:block;
  width:100%;
  height:auto;
}

.video-card .play-button{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:68px; height:68px;
  border-radius:50%;
  background:rgba(255,0,85,.92);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:.3s;
}

.video-card .play-button svg{ margin-left:3px; }

.video-card:hover .play-button{
  background:#ff0055;
  transform:translate(-50%,-50%) scale(1.1);
}

@media(max-width:600px){
  .hero{ padding:70px 18px 50px; }
  .video-card .play-button{ width:48px; height:48px; }
  .video-card .play-button svg{ width:18px; height:18px; }
}