/* ================= ROOT VARIABLES ================= */
:root{
  --primary:#2A7DE1;
  --secondary:#7A3CE1;
  --gradient:linear-gradient(90deg,#2A7DE1,#7A3CE1);
}

/* ================= GLOBAL ================= */
*{margin:0;padding:0;box-sizing:border-box}


body{
font-family:'Open Sans',sans-serif;
color:#333;
scroll-behavior:smooth;
overflow-x:hidden;
padding-top:100px;
}



h1,h2,h3{font-family:'Poppins',sans-serif;}
section{padding:90px 10%;position:relative;}
a{text-decoration:none;}
.btn{background:var(--gradient);color:#fff;padding:14px 30px;border-radius:30px;text-transform:uppercase;letter-spacing:1px;font-weight:600;display:inline-block;transition:0.4s ease;border:none;cursor:pointer;}
.btn:hover{transform:scale(1.07);}

/* ================= NAVBAR ================= */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:12px 10%;position:fixed;width:100%;top:0;background:rgba(255, 255, 255, 0.95);z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
/* Logo Image */
.logo img{
  height:65px;     /* Change size here if needed */
  width:auto;
  display:block;
}
.nav-links{list-style:none;display:flex;gap:30px;}
.nav-links li a{color:#000000;font-weight:600;transition:0.3s;}
.nav-links li a:hover{color:var(--primary);}


/* ================= HERO ================= */
.hero{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background: linear-gradient(120deg, #4f7dd1 0%, #5893da 35%, #7b63da 65%, #8d65ce 100%);
    color:white;
    position:relative;
    overflow:hidden;
}

.hero-content{
    max-width:900px;
    position:relative;
    z-index:1;
}

.hero-bg-logo{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:650px;
    opacity: 0.9;;
    filter:brightness(1.3);
    z-index:0;
}


.hero .brand{
    font-size:clamp(2.2rem,6vw,5rem);
    font-weight:900;
    margin-bottom:15px;
    text-shadow:2px 2px 15px rgba(0,0,0,0.5);
}

.hero-title{
    font-size:3rem;
    font-weight:800;
    margin-bottom:15px;
    background:linear-gradient(90deg,#ffffff,#2A7DE1);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:2px 2px 10px rgba(0,0,0,0.4);
}

.hero p{
    font-size:1.5rem;
    margin-bottom:20px;
    max-width:800px;
    text-shadow:1px 1px 8px rgba(0,0,0,0.4);
}


/* ================= ABOUT ================= */
.about{padding:90px 10%;background:#f9f9f9;}
.about-title{font-size:3rem;font-weight:800;margin-bottom:30px;color:var(--primary);}
.about-video{width:100%;border-radius:15px;margin-bottom:30px;box-shadow:0 10px 25px rgba(0,0,0,0.15);}
.about-text-container{display:flex;flex-direction:column;gap:15px;}
.about-text{font-size:1.4rem;font-weight:600;line-height:1.8;color:#333;}

/* ================= SERVICES ================= */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin-top:40px;}
.card{background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.08);transition:0.4s;}
.card:hover{transform:translateY(-10px);}

/* ================= FORMS ================= */
form{max-width:600px;margin:auto;display:flex;flex-direction:column;gap:15px;margin-top:30px;}
input,select,textarea{padding:12px;border-radius:8px;border:1px solid #ccc;width:100%;}

/* ================= FOOTER ================= */
footer{background:var(--gradient);color:white;text-align:center;padding:40px 10%;}
footer a{color:white;font-weight:bold;text-decoration:none;}

/* ================= GALLERY ================= */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:40px;}
.gallery img{width:100%;border-radius:15px;box-shadow:0 10px 25px rgba(0,0,0,0.15);transition:0.4s;}
.gallery img:hover{transform:scale(1.05);}

/* ================= REVEAL ================= */
.reveal{opacity:0;transform:translateY(40px);transition:1s ease;}
.reveal.active{opacity:1;transform:translateY(0);}





/* ================= HERO COUNTDOWN - BIG VERSION ================= */

.opening-text{
  font-size:3rem;           /* bigger "OPENING SOON" text */
  font-weight:900;
  text-transform:uppercase;
  color:white;
  text-shadow:2px 2px 25px rgba(0,0,0,0.6);
  margin-bottom:30px;
}

.countdown{
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  margin-bottom:40px;
}

#timer .time-box{
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  border-radius:20px;
  padding:35px 40px;       /* bigger box */
  min-width:130px;
  text-align:center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform 0.3s ease;
}

#timer .time-box:hover{
  transform: scale(1.08);
}

#timer .time-box span{
  display:block;
  font-size:4.5rem;        /* MUCH bigger numbers */
  font-weight:900;
  font-family:'Poppins',sans-serif;
  color:white;
}

#timer .time-box p{
  font-size:1.1rem;        /* bigger labels */
  letter-spacing:2px;
  margin-top:10px;
  text-transform:uppercase;
  opacity:0.9;
  color:white;
}





.instagram-logo {
  width: 300px;           /* adjust size as needed */
  height: auto;
  margin-top: 10px;
  transition: transform 0.3s ease;
}

.instagram-logo:hover {
  transform: scale(1.1);  /* subtle hover effect */
}







/* ================= MOBILE RESPONSIVE ================= */

/* Tablets: max-width 768px */
@media (max-width: 768px) {

  /* Navbar */
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 5%;
  }
  .nav-links {
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
  }

  /* Hero Section */
  .hero {
    height: auto;
    padding: 80px 5%;
  }
  .hero .brand {
    font-size: 3rem;
  }
  .opening-text {
    font-size: 2rem;
  }
  #timer .time-box {
    padding: 25px 30px;
    min-width: 100px;
  }
  #timer .time-box span {
    font-size: 3rem;
  }
  #timer .time-box p {
    font-size: 0.9rem;
  }
  .countdown {
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
  }
  .hero-bg-logo {
    width: 400px;
  }

  /* About / Services / Gallery sections */
  section {
    padding: 60px 5%;
  }
  .about-title,
  .hero-title {
    font-size: 2rem;
  }

  /* Cards */
  .card {
    padding: 20px;
  }

  /* Buttons */
  .btn {
    padding: 12px 25px;
    font-size: 0.9rem;
  }

  /* Footer */
  footer {
    padding: 30px 5%;
  }

  /* Contact Section */
  .contact-page {
    padding: 40px 5%;
  }
  .contact-page p, .contact-page a {
    font-size: 1rem;
  }
  .instagram-logo {
    width: 40px;
  }

  /* Forms */
  form {
    gap: 12px;
  }
  input, select, textarea {
    padding: 10px;
  }

  /* Gallery Images */
  .gallery img {
    border-radius: 10px;
  }
}

/* Phones: max-width 480px */
@media (max-width: 480px) {

  /* Navbar */
  .nav-links {
    width: 100%;
    text-align: center;
  }

  /* Hero Section */
  .hero .brand {
    font-size: 2.2rem;
  }
  .opening-text {
    font-size: 1.6rem;
  }
  #timer .time-box {
    padding: 20px 25px;
    min-width: 90px;
  }
  #timer .time-box span {
    font-size: 2.2rem;
  }
  #timer .time-box p {
    font-size: 0.8rem;
  }
  .countdown{
  flex-wrap:wrap;
  gap:15px;
  justify-content:center;
}
  .hero-bg-logo {
    width: 250px;
  }

  /* Buttons */
  .btn {
    padding: 10px 20px;
    font-size: 0.85rem;
  }

  /* About / Hero Titles */
  .about-title,
  .hero-title {
    font-size: 1.6rem;
  }

  /* Footer */
  footer {
    padding: 20px 5%;
    font-size: 0.9rem;
  }

  /* Contact Section */
  .contact-page {
    padding: 30px 5%;
  }
  .contact-page p, .contact-page a {
    font-size: 0.9rem;
  }
  .instagram-logo {
    width: 80px;
  }

  /* Forms */
  form {
    gap: 10px;
  }
  input, select, textarea {
    padding: 8px;
  }

  /* Gallery Images */
  .gallery img {
    border-radius: 8px;
  }
}





@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 5%;
  }

  .nav-links {
    flex-direction: column;
    gap: 15px;
    width: 100%;
    display: none; /* hide by default on mobile */
    margin-top: 10px;
  }

  .navbar .menu-toggle {
    display: block;
    cursor: pointer;
    font-size: 1.5rem;
    color: #000;
    margin-left: auto;
  }
}





/* MOBILE MENU FIX */

.menu-toggle{
  display:none;
}

@media (max-width:768px){

  .menu-toggle{
    display:block;
    font-size:28px;
    cursor:pointer;
  }

  .nav-links{
    display:none;
    flex-direction:column;
    width:100%;
    background:white;
    padding:20px 0;
  }

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

  .nav-links li{
    text-align:center;
  }

}






@media (max-width:768px){
.hero-bg-logo{
  width:300px;
}
}

@media (max-width:480px){
.hero-bg-logo{
  width:200px;
}
}




.about-video{
width:100%;
height:auto;
}



@media (max-width:768px){

.logo img{
height:50px;
}

.navbar{
padding:1px 5%;
}

.menu-toggle{
font-size:10px;
}

}