#header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     z-index: 1000;
     transition: all 0.3s ease;
     background: #0B0F11;
     backdrop-filter: blur(10px);
 }

 header.scrolled {
     background: #0B0F11 !important;
     backdrop-filter: blur(20px) !important;
     box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3) !important;
 }

 /* ========= NAVIGATION ========= */
 nav {
     max-width: 1400px;
     margin: 0 auto;
     padding: 25px 60px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .nav-links li.has-submenu {
     position: relative;
 }

 .dropdown-icon {
     margin-left: 5px;
     font-size: 1em;
     transition: transform 0.3s ease;
 }

 /* Rotate the icon when submenu is open (desktop hover) */
 .nav-links li.has-submenu:hover .dropdown-icon {
     transform: rotate(180deg);
 }

 /* Submenu styling */
 .submenu {
     list-style: none;
     position: absolute;
     top: 100%;
     left: -110px;
     background: rgba(0, 0, 0, 0.85);
     padding: 10px 0;
     display: none;
     border-radius: 6px;
     min-width: 250px;
     z-index: 2;
 }

 .nav-links li.has-submenu:hover>.submenu {
     display: block;
 }

 .submenu li a {
     padding: 15px 16px;
     display: block;
     color: #fff;
     text-decoration: none;
 }

 .submenu li a:hover {
     background: rgba(255, 255, 255, 0.1);
 }


 .logo {
     font-size: 17px;
     font-weight: 700;
     color: white;
     text-decoration: none;
     letter-spacing: -1px;
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .logo-img {
     height: 60px;
     width: auto;
     filter: brightness(0) invert(1);
     transition: all 0.3s ease;
 }

 .logo:hover .logo-img {
     filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
 }

 .nav-links {
     display: flex;
     gap: 45px;
     list-style: none;
     align-items: center;
 }

 .nav-links a {
     /* color: rgba(255, 255, 255, 0.85); */
     color: #fff; /*Syedain*/
     text-decoration: none;
     font-size: 15px;
     font-family: 'Arial', sans-serif;
     transition: all 0.3s ease;
     position: relative;
     letter-spacing: 0.5px;
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     /* background: linear-gradient(90deg, #b89d66 0%, #d4af37 100%); */
     background: #F5F5DC; /*Syedain*/
     transition: width 0.3s ease;
 }

 .nav-links a:hover {
     /* color: white; */
     color: #F5F5DC; /*Syedain*/
 }

 .nav-links a:hover::after {
     width: 100%;
 }

 .nav-cta {
     padding: 12px 28px;
     /* background: linear-gradient(135deg, #b89d66 0%, #d4af37 100%); */
     background: linear-gradient(60deg, #808080 0%, #D3D3D3 100%); /*Syedain*/
     border-radius: 50px;
     color: white !important;
     font-weight: 600;
     transition: all 0.3s ease;
 }

 .nav-cta::after {
     display: none;
 }

 .nav-cta:hover {
     transform: translateY(-2px);
     /* box-shadow: 0 10px 25px rgba(184, 157, 102, 0.4); */
     box-shadow: 0 10px 25px rgba(169, 169, 169, 0.4); /*Syedain*/
 }

 /* ========= MOBILE MENU ========= */
 .mobile-menu {
     display: none;
     flex-direction: column;
     gap: 6px;
     cursor: pointer;
 }

 .mobile-menu span {
     width: 25px;
     height: 2px;
     background: white;
     transition: all 0.3s ease;
 }


 /* Large Screens */
 @media (min-width: 1600px) {
     nav {
         max-width: 1600px;
     }

     .hero {
         background-size: cover;
     }
 }

 /* Ultra Wide */
 @media (min-width: 2000px) {
     nav {
         max-width: 1800px;
     }
 }

 @media (max-width: 1024px) {
     nav {
         padding: 20px 30px;
     }

     .nav-links {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 280px;
         background: #0B0F11;
         backdrop-filter: blur(20px);
         flex-direction: column;
         justify-content: center;
         gap: 30px;
         transition: right 0.4s ease;
         box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
     }

     .nav-links.active {
         right: 0;
     }

     .mobile-menu {
         display: flex;
         z-index: 10;
     }

     body.menu-open {
         overflow: hidden;
     }

     /* Hide book floating section */
     .books-bg,
     .book-float,
     .realistic-book .book-3d:nth-child(2) .book-3d:nth-child(1) {
         display: none !important;
     }

     .container {
         grid-template-columns: 1fr;
         gap: 50px;
         padding: 0 35px;
         text-align: center;
     }


 }

 /* Mobile */
 @media (max-width: 768px) {
    .trust-badges {
    justify-content: center;
}
    .footer-column h3::after{
        left: 180px !important;
    }
    .main-section{
        margin: 0 !important;
    }
     nav {
         padding: 18px 20px;
     }

     .nav-links {
         width: 250px;
     }

     /* Hide floating elements */
     .books-bg,
     .book-float,
     .realistic-book {
         display: none !important;
     }

     .hero {
         padding: 100px 10px 60px;
     }

     .container {
         grid-template-columns: 1fr;
         gap: 40px;
         padding: 0 20px;
         text-align: center;
         padding-top: 80px;
     }

     .container>* {
         max-width: 100%;
     }

     html,
     body {
         overflow-x: hidden;
     }

     .cta-group {
         flex-direction: column;
         /* stack buttons vertically */
         align-items: flex-start;
         /* align to the left */
         gap: 12px;
         /* smaller space between buttons */
     }

     .cta-group .btn-primary,
     .cta-group .btn-secondary {
         width: 100%;
         /* make buttons full width for touch comfort */
         text-align: center;
         /* center text inside buttons */
     }
 }

 /* Small Mobile */
 @media (max-width: 480px) {
     .logo-img {
         height: 50px;
     }

     .nav-links {
         width: 230px;
     }

     /* Hide floating elements */
     .books-bg,
     .book-float,
     .realistic-book {
         display: none !important;
     }

     .container {
         grid-template-columns: 1fr;
         gap: 30px;
         padding: 0 15px;
         text-align: center;
         padding-top: 70px;
     }

     .container>* {
         width: 100%;
         max-width: 100%;
     }

     html,
     body {
         overflow-x: hidden;
     }
 }

 /* Landscape Mode */
 @media (max-height: 600px) and (orientation: landscape) {
     .hero {
         min-height: auto;
         padding: 80px 0 40px;
     }
 }

 /* Large Screens */
 @media (min-width: 1600px) {
     nav {
         max-width: 1600px;
     }

     .hero {
         background-size: cover;
     }
 }

 /* Ultra Wide */
 @media (min-width: 2000px) {
     nav {
         max-width: 1800px;
     }
 }

 /* Scale the 3D book on medium screens */
 @media (max-width: 1024px) {
     .realistic-book {
         transform: scale(0.75);
     }
 }

 @media (max-width: 768px) {
     .realistic-book {
         transform: scale(0.6);
     }
 }

 @media (max-width: 480px) {
     .realistic-book {
         transform: scale(0.5);
     }
 }

 .footer {
     background: #0B0F11;
     color: #fff;
     position: relative;
     overflow: hidden;
 }

 .footer-logo img {
     max-width: 160px;
     /* adjust size as needed */
     height: auto;
     display: block;
     filter: brightness(0) invert(1);
 }

 .footer::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
 }

 /* Main Footer Content */
 .footer-main {
     padding: 80px 20px 40px;
     max-width: 1400px;
     margin: 0 auto;
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
     gap: 60px;
     margin-bottom: 60px;
 }

 /* Company Info Column */
 .footer-company {
     max-width: 350px;
 }

 .footer-logo {
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 20px;
     background: #fff;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .footer-description {
     color: rgba(255, 255, 255, 0.7);
     line-height: 1.7;
     margin-bottom: 25px;
     font-size: 0.95rem;
 }

 .social-links {
     display: flex;
     gap: 15px;
 }

 .social-link {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     text-decoration: none;
     font-size: 1.2rem;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .social-link:hover {
     /* background: #D0AD3D; */
     background: #F5F5DC; /*Syedain*/
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
     color: #000; /*Syedain (add)*/
 }

 /* Footer Columns */
 .footer-column h3 {
     font-size: 1.2rem;
     margin-bottom: 25px;
     font-weight: 600;
     position: relative;
     padding-bottom: 10px;
 }

 .footer-column h3::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 40px;
     height: 2px;
     /* background: #D0AD3D; */
     background: #F5F5DC; /*Syedain*/
 }

 .footer-links {
     list-style: none;
     padding-left: 0;
 }

 .footer-links li {
     margin-bottom: 12px;
 }

 .footer-links a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     font-size: 0.95rem;
     transition: all 0.3s ease;
     display: inline-block;
 }

 .footer-links a:hover {
     color: #F5F5DC;
     transform: translateX(5px);
 }

 /* Newsletter Column */
 .footer-newsletter h3 {
     font-size: 1.2rem;
     margin-bottom: 15px;
 }

 .newsletter-text {
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.9rem;
     margin-bottom: 20px;
     line-height: 1.6;
 }

 .newsletter-form {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .newsletter-input {
     padding: 14px 18px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.1);
     color: #fff;
     font-size: 0.95rem;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
 }

 .newsletter-input::placeholder {
     color: rgba(255, 255, 255, 0.5);
 }

 .newsletter-input:focus {
     outline: none;
     border-color: #D0AD3D;
     background: rgba(255, 255, 255, 0.15);
 }

 .newsletter-btn {
     padding: 14px 28px;
     background: #D0AD3D;
     color: #fff;
     border: none;
     border-radius: 8px;
     font-size: 0.95rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .newsletter-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s ease;
 }

 .newsletter-btn:hover::before {
     left: 100%;
 }

 .newsletter-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
 }

 /* Contact Info */
 .contact-info {
     list-style: none;
     padding-left: 0;
 }

 .contact-item {
     /* display: flex; */
     align-items: flex-start;
     gap: 12px;
     /* margin-bottom: 18px; */
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.95rem;
     line-height: 1.6;
 }

 .contact-icon {
     font-size: 1.2rem;
     margin-top: 2px;
     color: #667eea;
 }

 /* Footer Bottom */
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding: 30px 20px;
     max-width: 1400px;
     margin: 0 auto;
 }

 .footer-bottom-content {
     /* display: flex; */
     text-align: center;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
 }

 .copyright {
     color: rgba(255, 255, 255, 0.6);
     font-size: 0.9rem;
 }

 .footer-bottom-links {
     display: flex;
     gap: 30px;
     list-style: none;
 }

 .footer-bottom-links a {
     color: rgba(255, 255, 255, 0.6);
     text-decoration: none;
     font-size: 0.9rem;
     transition: color 0.3s ease;
 }

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

 /* Trust Badges */
 .trust-badges {
     display: flex;
     gap: 25px;
     align-items: center;
     margin-top: 30px;
 }

 .trust-badge {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 20px;
     font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.7);
     border: 1px solid rgba(255, 255, 255, 0.1);

 }

 .trust-icon {
     color: #10b981;
     font-size: 1rem;
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .footer-grid {
         grid-template-columns: 1fr 1fr 1fr;
         gap: 40px;
     }

     .footer-company {
         grid-column: 1 / -1;
         max-width: 100%;
     }


 }

 @media (max-width: 768px) {
     .footer-grid {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .footer-main {
         padding: 60px 20px 30px;
     }

     .footer-bottom-content {
         flex-direction: column;
         text-align: center;
     }

     .footer-bottom-links {
         flex-direction: column;
         gap: 15px;
     }


     .social-links {
         justify-content: center;
     }


     .trust-badge {
         flex-direction: column;
     }

 }

 /* Scroll to top button */
 .scroll-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: #fff;
     border: none;
     border-radius: 50%;
     font-size: 1.5rem;
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
     z-index: 1000;
 }

 .scroll-top.visible {
     opacity: 1;
     visibility: visible;
 }

 .scroll-top:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
 }


  .intl-tel-input .selected-flag {
    padding: 0 6px 0px 8px !important;
}



.cta-section {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(11, 15, 17, 0.95) 60%,
    /* Deep dark base */ rgba(208, 173, 61, 0.25) 100% /* Golden tint */
  );
  padding: 120px 20px;
  overflow: hidden;
}

/* Animated Background Elements */
.cta-section::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  top: -200px;
  right: -100px;
  animation: float 20s infinite ease-in-out;
}

.cta-section::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  bottom: -150px;
  left: -100px;
  animation: float 15s infinite ease-in-out reverse;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-30px) scale(1.05);
  }
}

.cta-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-content {
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
}

.cta-badge {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: fadeInDown 0.8s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cta-title {
  font-size: 3.5rem;
  color: #fff;
  margin-bottom: 25px;
  font-weight: 700;
  line-height: 1.2;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cta-description {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 50px;
  line-height: 1.7;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.cta-btn {
  padding: 18px 45px;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-block;
}

.cta-btn-primary {
  /* background: #D0AD3D; */
  background: linear-gradient(60deg, #808080 0%, #d3d3d3 100%); /*Syedain*/
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cta-btn-primary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

/*Syedain
 .cta-btn-primary:hover::before {
     width: 300px;
     height: 300px;
 }
     */

.cta-btn-primary:hover {
  transform: translateY(-3px);
  /* box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); */
  box-shadow: 0 15px 40px rgba(169, 169, 169, 0.4); /*Syedain*/
}

.cta-btn-secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

.cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Popup styling */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0b0f11bd;
  padding: 40px 30px;
  border: 2px solid #f5f5dc;
  border-radius: 12px;
  z-index: 1000;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 0 20px rgba(169, 169, 169, 0.4);
  text-align: center;
}

.popup.active {
  display: block;
}

.popup h2 {
  margin-bottom: 20px;
  /* color: #D0AD3D; */
  color: #fff; /*Syedain*/
}

.popup form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.popup input,
.popup textarea {
  padding: 10px;
  border: 1px solid #f5f5dc;
  border-radius: 5px;
  background-color: #0b0f11;
  color: #fff;
  font-size: 14px;
  outline: none;
  width: 100%;
  transition: border 0.3s ease;
}

.popup input:focus,
.popup textarea:focus {
  border-color: #fff;
}

.popup textarea {
  resize: none;
  height: 80px;
}

.popup button.submit {
  background-color: #d0ad3d;
  color: #081629;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.popup button.submit:hover {
  background-color: #b8922f;
}

/* Close icon */
.popup .close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #f5f5dc;
  font-size: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.3s ease;
}

.popup .close-icon:hover {
  color: #fff;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(11, 15, 17, 0.7);
  z-index: 500;
}

.overlay.active {
  display: block;
}


.has-submenu .submenu {
    display: none;
}

.has-submenu.active .submenu {
    display: block;
}