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

*{box-sizing:border-box;margin:0;padding:0}
  :root{
    --navy:#0d1a3a;--navy2:#1a2a5e;--blue:#2a5fa5;--sky:#4a8fd4;--smoke:#c8d8f0;
    --gold:#b8960c;--cream:#f5f0e8;--dark:#060e22;--white:#ffffff;
    --font-display:'Playfair Display',serif;--font-body:"Poppins", sans-serif;
    --danger:#fa3a3a;
  }
  html{scroll-behavior:smooth}
  body{background:#060e22;font-family:var(--font-body);color:var(--cream);overflow-x:hidden}

  /* NAV */
  /*nav{display:flex;align-items:center;justify-content:space-between;padding:18px 48px;border-bottom:1px solid rgba(74,143,212,0.18);position:sticky;top:0;z-index:100;background:#060e22;}*/
  
  nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 48px;
  border-bottom: 1px solid rgba(74,143,212,0.18);
  position: normal;
  top: 0;
  z-index: 100;
background: transparent;
  position: absolute;
  width: 100%;
}

  .nav-logo{display:flex;align-items:center;gap:12px}
  .nav-logo-text{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--white);letter-spacing:0.5px}
  .nav-logo-text span{color:var(--sky)}
  .nav-tag{font-size:10px;color:var(--sky);letter-spacing:2px;text-transform:uppercase;font-family:var(--font-body);font-weight:300;margin-top:2px}
  .nav-links{display:flex;gap:32px;align-items:center}
  .nav-links a{font-family:var(--font-body);font-size:16px;color:rgba(200,216,240,0.72);text-decoration:none;letter-spacing:0.4px;transition:color 0.2s;cursor:pointer;text-shadow: -1px 3px 2px rgba(0,0,11,0.2);}
  .nav-links a:hover{color:var(--sky)}
  .nav-cart{text-decoration: none;display:flex;align-items:center;gap:8px;background:rgba(74,143,212,0.12);border:1px solid rgba(74,143,212,0.35);border-radius:24px;padding:9px 20px;cursor:pointer;transition:all 0.2s;font-family:var(--font-body);font-size:16px;color:var(--smoke)}
  .nav-cart:hover{background:rgba(74,143,212,0.22)}
  .nav-cart i{font-size:16px;color:var(--sky)}

  /* HERO */
  .hero{display:grid;grid-template-columns:1fr;min-height:88vh;background:#060e22; }

  .cs-hero{ 
    min-height: 1000px;
    align-content: baseline;
    justify-content: center;
    align-items: center;
    background-size: cover !important;
    background-position: center !important;
  }

  /* .hero-left{display:flex;flex-direction:column;justify-content:center;padding:80px 64px;background:#060e22;} */
  .hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 64px;
  background: rgba(6,14,34,0.55);
}
  .hero-right{position:relative;overflow:hidden}
  .hero-right img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:brightness(0.75) saturate(0.9)}
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#060e22 0%,rgba(6,14,34,0.3) 50%,transparent 100%)}
  .hero-badge span{display:inline-flex;align-items:center;gap:8px;background:rgba(184,150,12,0.1);border:1px solid rgba(184,150,12,0.35);border-radius:20px;padding:5px 16px;margin-bottom:28px}
  .hero-badge span{font-size:11px;color:#d4a90f;letter-spacing:2px;text-transform:uppercase;font-weight:500}
  /* .hero-title{font-family:var(--font-display);font-size:60px;line-height:1.07;font-weight:700;color:var(--white);margin-bottom:24px; text-align: center;} */
  .hero-title {
    font-family: var(--font-display);
    font-size: 60px;
    line-height: 1.07;
    font-weight: 700;
    color: rgba(200,216,240,0.72);
    margin-bottom: 24px;
    text-align: center;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
  }
  .hero-title em{font-style:italic;color:var(--sky)}
  /* .hero-desc{
    font-size:19px;line-height:1.7;color:rgba(200,216,240,1);font-weight:300;margin-bottom:40px;max-width:460px
  } */

  .hero-desc {
      font-size: 19px;
      line-height: 1.7;
      color: rgba(200,216,240,1);
      font-weight: 300;
      max-width: 500px;
      width: 100%;
      text-align: center;
      margin: 0 auto;
    }
  .hero-actions{display:flex;gap:16px;align-items:center}
  .btn-primary{background:var(--blue);color:var(--white);border:none;padding:15px 32px;border-radius:4px;font-family:var(--font-display);font-size:15px;font-weight:600;cursor:pointer;letter-spacing:0.5px;transition:all 0.2s}
  .btn-primary:hover{background:var(--sky)}
  .btn-ghost{background:transparent;color:var(--smoke);border:1px solid rgba(200,216,240,0.28);padding:15px 32px;border-radius:4px;font-family:var(--font-display);font-size:16px;cursor:pointer;letter-spacing:0.4px;transition:all 0.2s}
  .btn-ghost:hover{border-color:var(--sky);color:var(--sky)}
  .hero-stats{display:flex;gap:40px;margin-top:52px;padding-top:40px;border-top:1px solid rgba(74,143,212,0.15)}
  .stat-num{font-family:var(--font-body);font-size:30px;font-weight:200;color:var(--white)}
  .stat-label{font-size:15px;color:rgba(200,216,240,0.45);letter-spacing:0.5px;margin-top:3px}

  /* SECTION */
  .section{padding:64px 48px;background:#060e22;}
  .section-inner{max-width:1280px;margin:0 auto}
  .section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px}
  .section-eyebrow{font-size:11px;color:var(--sky);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;font-weight:500}
  .section-title{font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--white)}
  .section-title span{color:var(--sky)}
  .section-link{font-size:14px;color:var(--sky);text-decoration:none;letter-spacing:0.5px;cursor:pointer;border-bottom:1px solid rgba(74,143,212,0.35);padding-bottom:1px}

  /* FILTERS */
  .filter-bar{display:flex;gap:10px;margin-bottom:32px;flex-wrap:wrap}
  .filter-btn{background:transparent;border:1px solid rgba(200,216,240,0.18);border-radius:20px;padding:8px 18px;font-family:var(--font-body);font-size:14px;color:rgba(200,216,240,0.55);cursor:pointer;transition:all 0.2s}
  .filter-btn.active,.filter-btn:hover{background:rgba(42,95,165,0.22);border-color:var(--sky);color:var(--sky)}

  /* PRODUCT GRID */
  .product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
  .product-card{background:#0d1a3a;border:1px solid rgba(74,143,212,0.15);border-radius:12px;overflow:hidden;transition:all 0.25s;cursor:pointer}
  .product-card:hover{border-color:rgba(74,143,212,0.5);transform:translateY(-4px)}
  .product-img-wrap{height:200px;overflow:hidden;position:relative}
  .product-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 0.4s}
  .product-card:hover .product-img-wrap img{transform:scale(1.05)}
  .prod-badge{position:absolute;top:12px;right:12px;background:rgba(184,150,12,0.22);border:1px solid rgba(184,150,12,0.5);border-radius:12px;padding:3px 10px;font-size:10px;color:#d4a90f;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;z-index:2}
  .prod-badge.new{background:rgba(74,143,212,0.18);border-color:rgba(74,143,212,0.5);color:var(--sky)}
  .img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,14,34,0.55) 0%,transparent 60%)}
  .product-info{padding:18px 20px}
  .prod-origin{font-size:11px;color:var(--sky);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px;font-weight:500}
  .prod-name{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--white);margin-bottom:5px;line-height:1.3}
  .prod-desc{font-size:13px;color:rgba(200,216,240,0.48);margin-bottom:16px;line-height:1.55}
  .prod-footer{display:flex;align-items:center;justify-content:space-between}
  .prod-price{font-family:var(--font-display);font-size:20px;color:var(--sky);font-weight:700}
  .prod-right{display:flex;align-items:center;gap:10px}
  .prod-rating{display:flex;align-items:center;gap:4px;font-size:12px;color:rgba(200,216,240,0.4)}
  .prod-add{width:34px;height:34px;border-radius:50%;background:rgba(42,95,165,0.22);border:1px solid rgba(74,143,212,0.38);color:var(--sky);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s}
  .prod-add:hover{background:var(--blue);border-color:var(--sky)}
  .prod-add i{font-size:17px}

  /* DIVIDER */
  .divider{height:1px;background:linear-gradient(90deg,transparent,rgba(74,143,212,0.22),transparent);margin:0}

  /* FEATURED SECTION */
  .featured-section{background:#060e22;padding:0}
  .featured-grid{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
  .featured-img{position:relative;overflow:hidden}
  .featured-img img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(0.7) saturate(0.85)}
  .featured-img-overlay{position:absolute;inset:0;background:linear-gradient(to right,transparent 40%,#060e22 100%)}
  .featured-content{display:flex;flex-direction:column;justify-content:center;padding:64px 56px;background:#060e22;}
  .featured-eyebrow{font-size:11px;color:#d4a90f;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;font-weight:500}
  .featured-title{font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--white);margin-bottom:16px;line-height:1.15}
  .featured-origin{font-size:14px;color:rgba(200,216,240,0.5);margin-bottom:12px}
  .featured-desc{font-size:17px;color:rgba(200,216,240,0.62);line-height:1.65;font-weight:300;margin-bottom:28px}
  .feat-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
  .tag{background:rgba(42,95,165,0.18);border:1px solid rgba(74,143,212,0.22);border-radius:20px;padding:5px 14px;font-size:15px;color:var(--smoke)}
  .feat-price-row{display:flex;align-items:center;gap:24px;margin-bottom:28px}
  .feat-price{font-family:var(--font-body);font-size:36px;color:var(--sky);font-weight:700}
  .feat-price sub{font-size:15px;color:rgba(200,216,240,0.45);font-weight:300;font-family:var(--font-body)}
  .feat-rating{display:flex;align-items:center;gap:5px;font-size:14px;color:rgba(200,216,240,0.5)}
  .btn-add{display:flex;align-items:center;gap:10px;background:var(--blue);border:none;border-radius:4px;color:var(--white);padding:14px 28px;font-family:var(--font-display);font-size:15px;cursor:pointer;transition:all 0.2s;font-weight:600}
  .btn-add:hover{background:var(--sky)}

  /* EDUCATION BANNER */
  .edu-section{background:#0a1530;padding:72px 48px}
  .edu-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .edu-img{position:relative;border-radius:12px;overflow:hidden;height:380px}
  .edu-img img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(0.7)}
  .edu-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(10,21,48,0.8) 100%)}
  .edu-title{font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--white);margin-bottom:16px;line-height:1.15}
  .edu-desc{font-size:17px;color:rgba(200,216,240,0.58);line-height:1.65;font-weight:300;margin-bottom:32px}
  .edu-courses{display:flex;flex-direction:column;gap:16px;margin-bottom:36px}
  .edu-course{display:flex;align-items:center;gap:14px;font-size:16px;color:var(--smoke);background:#060e22;border:1px solid rgba(74,143,212,0.15);border-radius:8px;padding:14px 18px}
  .edu-course i{color:var(--sky);font-size:20px;flex-shrink:0}

  /* BRANDS */
  .brands{padding:52px 48px;background:#060e22}
  .brands-inner{max-width:1280px;margin:0 auto}
  .brands-title{font-family:var(--font-display);font-size:14px;letter-spacing:3px;text-transform:uppercase;color:rgba(200,216,240,0.28);text-align:center;margin-bottom:28px}
  .brand-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .brand-pill{background:#0d1a3a;border:1px solid rgba(74,143,212,0.12);border-radius:24px;padding:9px 22px;font-family:var(--font-display);font-size:14px;color:rgba(200,216,240,0.4);letter-spacing:0.5px;transition:all 0.2s}
  .brand-pill:hover{border-color:rgba(74,143,212,0.32);color:rgba(200,216,240,0.68)}

  /* FOOTER */
  .footer-wrap{border-top:1px solid rgba(74,143,212,0.12);padding:56px 48px 36px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;background:#060e22;max-width:100%}
  .footer-brand{font-family:var(--font-display);font-size:22px;color: rgba(200,216,240,0.72);font-weight:700;margin-bottom:12px}
  .footer-brand span{color:var(--sky)}
  .footer-tagline{font-size:16px;color:rgba(200,216,240,0.38);line-height:1.7;font-weight:300;max-width:280px}
  .footer-col h4{font-family:var(--font-display);font-size:16px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(200,216,240,0.3);margin-bottom:18px;font-weight:400}
  .footer-col a{display:block;font-size:16px;color:rgba(200,216,240,0.46);text-decoration:none;margin-bottom:12px;cursor:pointer;transition:color 0.2s}
  .footer-col a:hover{color:var(--sky)}
  .footer-bottom{border-top:1px solid rgba(74,143,212,0.08);padding:22px 48px;display:flex;justify-content:space-between;align-items:center;background:#060e22;}
  /*.footer-copy{font-size:16px;color:rgba(200,216,240,0.22);letter-spacing:0.5px}*/
  .footer-copy {
	  font-size: 14px;
	  color: rgba(200,216,240,0.22);
	  letter-spacing: 0.5px;
	  text-align: center;
	  margin-bottom: 10px;
  }
  .footer-ag{font-family:var(--font-display);font-size:16px;color:rgba(74,143,212,0.38);letter-spacing:1px}

  @media(max-width:900px){
      .navbar-toggle {
display: flex !important;
}
    nav{padding:14px 20px}
    .cs-hero {
      min-height: 350px;
    }
    .hero.spl{
      grid-template-columns: 1fr;
      min-height: auto;
    }
    .hero-title{
      font-size: 30px !important;
    }
    .hero-desc {
      font-size: 17px !important;
    }
        .footer-brand,.footer-tagline{
      text-align: center;
    }
      .hero {
      grid-template-columns: 1fr !important;
    }
    .nav-links{
		display:none;
		position: absolute;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 20px;
		background: #000;
		left: 0;
		top: 130px;
		text-align: left;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 20px 30px;
    background: #060e22;
    border-top: 1px solid rgba(255,255,255,0.1);
	}
    .hero{grid-template-columns:1fr}
    .hero-right{height:320px}
    .hero-left{padding:48px 24px}
    .hero-title{font-size:38px}
    .section{padding:40px 20px}
    .featured-grid{grid-template-columns:1fr}
    .featured-img{height:280px}
    .featured-content{padding:40px 24px}
    .edu-section{padding:48px 20px}
    .edu-inner{grid-template-columns:1fr}
    .brands{padding:36px 20px}
    .footer-wrap{grid-template-columns:1fr 1fr;padding:40px 20px}
    .footer-bottom{padding:18px 20px;flex-direction:column;gap:8px}
  }
  
  .nav-cart-ls{
	  background: transparent;
	  color: var(--smoke);
	  padding: 5px 8px;
	  margin: 0px;
	  font-size: 25px;
	  border: 1px solid #1e3c62;
	  border-radius: 8px;
  }
  
  .nav-cart-ls{
	display:none;
  }
  
  @media (min-width:320px) and (max-width:767px){

    .footer-wrap.spl{
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding-bottom: 25px;
  }
  .hero-social-links{
    justify-content: center !important;
  }
	  .nav-logo-text img{
		width: 100px !important;
	  }
	  .nav-cart-ls{
		display:block;
	  }
	   .nav-links {
			display: none;
		}

		.nav-links.active {
			display: flex;
		}
    .nav-cart-bg{
      display: flex;
      gap: 15px;
    }
  
  }

  .cs-hero .hero-left{
    background: rgba(0,0,0,0);
  }

  .hero-cnt{
    display: flex;
    gap: 30px;
  }
  .hero-cnt .ls{
    width: 140px;
    img{
      width: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    }
    h2{
      text-align: center;
  font-size: 18px;
  font-weight: normal;
    }
  }

  .hero.spl{  
    grid-template-columns: 50% 1fr;
  }

/* Hamburger Menu Toggle Button */
.navbar-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  gap: 5px;
  padding: 8px;
}

.navbar-toggle span {
  width: 25px;
  height: 2.5px;
  background: #ede7d9;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.navbar-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translateY(16px);
}

.navbar-toggle.active span:nth-child(2) {
  opacity: 0;
}

.navbar-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-14px);
}
.cs-video-bg {
  position: relative;
  background: #0d0702;
  width: 100%;
  overflow: hidden;
  /* height: 1000px; */
}
.cs-video-bg video{
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
}

.contact-form {
background: rgba(0,0,17,0.5);
  padding: 20px 20px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  width: 500px;
}
.cs-cnt.alt .rgt .tt {
  color: #fff;
}
.sb-cnt-bg {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin: 15px 15px 30px 15px;
}
.sb-cnt-bg .sb-lft {
  width: 50%;
}
.sb-cnt-bg .sb-lft .form {
  width: 100%;
}
.sb-cnt-bg .form h4 {
  text-align: left;
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 10px;
}
.sb-cnt-bg .form .form-control, .sb-cnt-bg .form textarea {
  width: 100%;
  padding: 10px 15px;
  border-radius: 8px;
  line-height: 28px;
  background: #fff;
  border: 0px;
}
.sb-cnt-bg .sb-rgt {
  width: 50%;
}

.sb-cnt-bg .sb-lft.full {
  width: 100%;
}

.cs-hero.spl-bg{
  padding-top:8%; 
}
.cs-hero.spl-bg .hero-left{
  text-align: right;
  align-items: flex-end;
}
.contact-form{
.hero-title{
font-size: 32px;
    margin-top: 20px;
    margin-bottom: 30px;
    color: #f5f0e8;
}
}


.btn-danger {
  background: var(--danger);
  color: var(--white);
  border: none;
  padding: 15px 32px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}

.hero.abt-spl{
  padding-top: 22%;
}

.hero-social-links {
 display: flex;
  gap: 30px;
  justify-content: flex-end;
  align-items: anchor-center;
  width: 100%;}

.footer-wrap.spl{
  grid-template-columns: 1fr 1fr;
}


.help-block .list-unstyled li{
  list-style: none;
  color: #ec5c5c;
  text-align: left;
  font-size: 14px;
 margin-top: 2px;
}

.alert.alert-success{
    color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
   padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  
}

.alert.alert-danger{
color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
    padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  
}
.alert.alert-warning{
   color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
    padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
   
}
.alert .close{
    background: #fff;
  border: 1px solid;
  padding: 5px 10px;
  border-radius: 4px;
  line-height: 15px;
  margin-right: 10px;
}
.lang-btn{
  position: absolute;
  top: 10px;
  right: 40px;
  font-size: 13px;
}

.lang-btn .form-control{
  background: #060e22;
  color: var(--smoke);
  border: 1px solid rgba(74,143,212,0.35);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
}