#header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     z-index: 1000;
     transition: all 0.3s ease;
     background: transparent;
     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: 0;
     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: 50px;
     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);
     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%);
     transition: width 0.3s ease;
 }

 .nav-links a:hover {
     color: white;
 }

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

 .nav-cta {
     padding: 12px 28px;
     background: linear-gradient(135deg, #b89d66 0%, #d4af37 100%);
     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);
 }

 /* ========= 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) {
     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: 35px;
     }

     .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;
 }

 .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;
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
 }

 /* 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;
 }

 .footer-links {
     list-style: none;
 }

 .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: #fff;
     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;
 }

 .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;
     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;
     }

     .visual-area {
         display: none;
     }

     .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;
}