body{
    opacity:0;
    transition:opacity .4s ease;
}

body.loaded{
    opacity:1;
}

body.light-theme{
  background:#e8d8e440;
}

*{
  box-sizing:border-box;
}

html,
body{
  overflow-x:hidden;
}

body,
.navbar,
.hero,
.about,
.featured,
.stats-section,
.social-stats,
.work,
.stack-three,
.footer,
.btn,
.card,
.stat,
.about-tags span,
.featured-card,
.hero-image img {
  transition:
    background-color 0.5s ease,
    color 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease,
    opacity 0.5s ease;
}


/* =========================
   HERO SECTION
========================= */

.hero{
  display: flex;
  align-items: center;
  justify-content: space-between;

  max-width: 1300px;
  min-height: 50vh;

  margin: 185px auto 120px;
  padding: 120px 80px;

  gap: 50px;

  position: relative;
  overflow: visible;

  z-index: 1;

  background:
    radial-gradient(
      circle at top right,
      rgba(236,72,153,.2),
      transparent
    ),
    url("../assets/images/bg.png")
    no-repeat center center / cover;
}

/* DARK OVERLAY */

.hero::before{
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    to right,
    rgba(0,0,0,.85) 35%,
    rgba(0,0,0,.5) 60%,
    rgba(0,0,0,.15) 75%,
    transparent
  );

  z-index: 2;
}

/* RIGHT GLOW */

.hero::after{
  content: "";

  position: absolute;

  top: 50%;
  right: 5%;

  width: 600px;
  height: 600px;

  background: radial-gradient(
    circle,
    rgba(91,140,255,.6),
    rgba(255,78,205,.5),
    transparent 70%
  );

  filter: blur(120px);

  transform: translateY(-50%);

  z-index: 1;
}

/* HERO TEXT */

.hero-text{
  position: absolute;
  left: 150px;

  max-width: 700px;

  z-index: 2;
}

.hero h1{
  font-size: 4rem;
  line-height: 1.1;

  margin-bottom: 15px;

  color: var(--text);
}

.hero p{
  margin-bottom: 12px;

  color: var(--text-secondary);
}

/* HERO IMAGE */

.hero-image{
  position: absolute;

  right: 0;
  bottom: 0;

  width: 45%;
  max-width: 600px;

  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  z-index: 2;
}

/* IMAGE GLOW */

.hero-image::before{
  content: "";

  position: absolute;

  width: 700px;
  height: 700px;

  background: radial-gradient(
    circle,
    rgba(91,140,255,.7),
    rgba(255,78,205,.6),
    transparent 70%
  );

  filter: blur(140px);

  top: 50%;
  left: 60%;

  transform: translate(-50%, -50%);

  z-index: -1;
}

.hero-image img{
  height: 58vh;

  object-fit: contain;

  transform: translateY(20px);

  padding-right: 80px;
  padding-bottom: 15px;
}

/* HERO BOTTOM FADE */

.hero-fade{
  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 150px;

  background: linear-gradient(
    to bottom,
    transparent,
    var(--bg)
  );

  z-index: 2;
}


/* =========================
   HERO STATS
========================= */

.stats{
  display: flex;
  align-items: center;

  gap: 25px;

  margin-top: 30px;
  padding-top: 0px;
}

/* ITEM */

.stat-item{
  display: flex;
  align-items: center;

  gap: 10px;

  transition: 0.3s ease;
}

.stat-item:hover{
  transform: translateY(-2px);
}

/* ICON */

.stat-item img{
  width: 22px;
  height: 22px;

  object-fit: contain;
}

/* TEXT */

.stat-text h3{
  font-size: 1.2rem;
  font-weight: 700;

  color: var(--text);
}

.stat-text p{
  font-size: 0.75rem;

  color: var(--text-secondary);
}

/* DIVIDER */

.divider{
  width: 1px;
  height: 35px;

  background: var(--border);
}

/* ==================================
   LIGHT THEME HERO REDESIGN
================================== */

body.light-theme .hero{
  background: transparent;

  max-width: 1200px;
  min-height: 50vh;

  margin: 120px auto;

  padding: 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 140px;

  overflow: visible;
}

/* remove dark effects */

body.light-theme .hero::before,
body.light-theme .hero::after,
body.light-theme .hero-fade{
  display:none;
}

/* =========================
   LEFT CONTENT
========================= */

body.light-theme .hero-text{
  position: relative;

  left: auto;

  max-width: 430px;
}



/* heading */

body.light-theme .hero h1{
  font-size:5rem;
  line-height:.95;
  font-weight:700;

  color:#111;

  margin-bottom:30px;
}

/* description */
/* label */

.hero-label{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--primary) !important;
  margin-bottom:22px;
}


/* hide stats */

body.light-theme .stats{
  display:none;
}

/* =========================
   BUTTONS
========================= */

body.light-theme .buttons{
  display:flex;
  align-items:center;

  gap:px;

  margin-top:35px;
}

body.light-theme .btn.primary{
  display:flex;
  align-items:center;
  justify-content:center;

  width:180px;
  height:56px;

  border-radius:999px;

  background:#111;
  color:#fff;

  font-weight:600;

  transition:.3s ease;
}

body.light-theme .btn.primary:hover{
  transform:translateY(-2px);
}

body.light-theme .btn.secondary{
  background:none;
  border:none;

  padding:auto;

  color:#666;

  font-weight:500;

  border: 1px solid var(--text-secondary);
}

body.light-theme .btn.secondary svg{
  display:none;
}

/* =========================
   HERO SOCIALS
========================= */

.hero-socials{
  display:none;
}

.hero-socials{
  display:flex;
  align-items:center;

  gap:22px;

  margin:30px 0;
}
.hero-socials a{
  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
}

.hero-socials img{
  width:25px;
  height:25px;

  opacity:.55;

  transition:.3s ease;
}

.hero-socials img:hover{
  opacity:1;

  transform:translateY(-2px);
}

body:not(.light-theme) .hero-socials img{
    filter: brightness(0) invert(1);
    opacity: .8;
}

body:not(.light-theme) .hero-socials img:hover{
    opacity: 1;
}

/* =========================
   LIGHT THEME STATS
========================= */

.hero-light-stats{
  display:none;
}

body.light-theme .hero-light-stats{
  display:flex;
  align-items:center;
  margin-top:10px;
  gap:30px;
}

body.light-theme .hero-light-stat{
  display:flex;
  flex-direction:column;
  align-items:start;
  justify-content:start;
  text-align:start;
}

body.light-theme .hero-light-stat h3{
  font-size:1.7rem;
  font-weight:700;
  color:#111;
  margin:0 0 6px;
}

body.light-theme .hero-light-stat p{
  font-size:.65rem;
  color:#777;
  text-transform:uppercase;
  letter-spacing:1px;
  margin:0;
  text-align:center;
}

body.light-theme .hero-light-divider{
  width:1px;
  height:45px;
  background:#ddd;
}

/* =========================
   IMAGE
========================= */

body.light-theme .hero-image{
  position: relative;

  right:auto;
  bottom:auto;

  width:420px;
  max-width:420px;
}

body.light-theme .hero-image img{
  width:100%;
  height:560px;

  object-fit:cover;

  padding:0;
  transform:none;

  border-radius:30px;

  box-shadow:
  0 15px 30px rgba(0,0,0,.2),
  0 35px 70px rgba(0,0,0,.12);
}

/* remove glow */

body.light-theme .hero-image::before{
  display:none;
}

body.light-theme .hero{
  animation:heroFade .8s ease;
}

@keyframes heroFade{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}



/* =========================
   ABOUT SECTION
========================= */

.about{
  max-height: 750px;

  padding: 50px 20px;

  background: var(--bg-secondary);

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.about-container{
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  align-items: center;

  gap: 60px;
}

/* =========================
   TYPEWRITER CURSOR
========================= */

#rotating-headline{
  display:inline-block;
  color: var(--primary);
}

#rotating-headline::after{
  content:"|";

  display:inline-block;

  margin-left:2px;

  animation:cursorBlink .8s infinite;
}

@keyframes cursorBlink{

  0%{
    opacity:1;
  }

  50%{
    opacity:0;
  }

  100%{
    opacity:1;
  }

}

/* IMAGE */

.about-image{
  position: relative;
  flex: 1;
}

.about-image img{
  width: 80%;

  margin-left: 60px;

  border-radius: 20px;

  object-fit: cover;
}

/* BADGE */

.about-badge{
  position: absolute;

  bottom: 20px;
  left: 70px;

  padding: 15px 20px;

  background: rgba(0,0,0,.6);

  border-radius: 12px;
}

.about-badge h3{
  font-size: 1.5rem;
  font-weight: 700;

  color: var(--primary);
}

.about-badge p{
  font-size: 0.8rem;

  color: var(--text-secondary);
}

/* CONTENT */

.about-content{
  flex: 1;
}

.about-label{
  font-size: 0.8rem;

  color: var(--text);

  letter-spacing: 2px;

  margin-bottom: 10px;
}

.about-content h2{
  font-size: 2.5rem;

  margin-bottom: 20px;

  color: var(--text);
}

.about-content h2 span{
  color: var(--text-secondary);
}

.about-desc{
  margin-bottom: 15px;

  line-height: 1.6;
  font-weight: 500;

  color: var(--text-secondary);
}

/* TAGS */

.about-tags{
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin: 20px 0;
}

.about-tags span{
  padding: 8px 14px;

  border-radius: 20px;

  background: var(--bg-card);

  color: var(--text);

  font-size: 0.8rem;
}

/* BUTTON */

.about-content .btn{
  display: inline-block;

  margin-top: 20px;
}

/* MOBILE */

@media (max-width:768px){

  .about-container{
    flex-direction: column;
  }

}

/* =========================
   FEATURED VIDEOS SECTION
========================= */

/* SCROLL CONTAINER */

.video-scroll{
  display:flex;
  gap:30px;

  overflow-x:auto;

  padding-top:60px;
  padding-bottom:10px;

  cursor:grab;

  scroll-behavior:auto;

  -ms-overflow-style:none;
  scrollbar-width:none;
}

.video-scroll::-webkit-scrollbar{
  display:none;
}

/* HEADER */

.featured-header{
  max-width:1200px;

  margin:30px auto 40px;
  padding:0 20px;

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

.featured-header h2{
  font-size:3.5rem;
  line-height:1.2;
  font-weight:700;
}

.featured-header span{
  font-weight:800;
}

.featured-title{
  font-size:3.5rem;
  line-height:1.1;

  color:var(--text);
}

.featured-title span{
  display:inline-block;

  font-family:"Georgia", serif;
  font-weight:700;
}

/* HIGHLIGHT UNDERLINE */

.highlight{
  position:relative;
}

.highlight::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-8px;

  width:100%;
  height:6px;

  background:#e6b85c;
  border-radius:50%;
}

/* ARROWS */

.featured-arrows{
  display:flex;
  gap:10px;
}

.arrow{
  width:45px;
  height:45px;

  border:none;
  border-radius:50%;

  background:var(--bg-card);
  color:var(--text);

  cursor:pointer;

  transition:.3s ease;
}

.arrow:hover{
  transform:scale(1.1);
}

/* =========================
   AUDIENCE STATS SECTION
========================= */

.stats-section{
  padding:80px 80px 130px 0px;
  text-align:center;
}

.stats-section h2{
  font-size:2.5rem;
  color:var(--text);
}

.stats-section p{
  margin-top:10px;
  color:var(--text-secondary);
}

/* =========================
   FEATURED VIDEO CARDS
========================= */

.featured-card{
  min-width:380px;
  height:400px;

  display:flex;
  flex-direction:column;

  flex-shrink:0;
  scroll-snap-align:start;

  overflow:hidden;
  border-radius:12px;

  background:var(--bg-card);

  box-shadow:var(--shadow);

  transition:.3s ease;
  will-change:transform;
}

.featured-card:hover{
  transform:translateY(-8px);
  background:var(--bg-card-hover);
}

.featured-card img{
  width:100%;
  height:230px;

  object-fit:cover;
}

.featured-card-content{
  flex:1;

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  padding:20px;

  text-align:left;
}

.featured-card-content h3{
  font-size:1.1rem;
  margin:0 0 10px;

  color:var(--text);

  text-align:left;
}

.featured-desc{
  font-size:.9rem;
  margin:0 0 15px;

  color:var(--text-secondary);

  text-align:left;
}

.featured-card-content .date{

  font-size:.8rem;
  margin-bottom:10px;

  color:var(--text-muted);

  text-align:left;
}

.featured-card-content a{
  color:var(--primary);
  font-weight:bold;
  text-decoration:none;

  align-self:flex-start;
}

.featured-card p{
  font-size:.9rem;
}

.swipe-txt{
  display:flex;
  justify-content:center;

  padding-top:20px;

  font-size:15px;

  color:var(--text-secondary);
}


/* =========================
   SOCIAL STATS SECTION
========================= */

.social-stats{
  width:100%;
  max-width:1100px;

  margin:20px auto;
  margin-top:-100px;

  padding:0 20px;

  display:grid;

  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));

  gap:30px;

  box-sizing:border-box;
}

/* STAT CARD */

.stat{
  position:relative;

  width:100%;
  min-width:0;

  padding:30px 25px 20px;

  border-radius:30px;

  background:var(--bg-card);

  border:1px solid var(--border);

  backdrop-filter:blur(10px);

  transition:.3s ease;
}

.stat:hover{
  transform:translateY(-5px);
}

/* FLOATING ICON */

.stat-icon{
  position:absolute;

  top:-20px;
  left:50%;

  transform:translateX(-50%);

  padding:10px;

  border-radius:50%;

  background:#ffffff;

  border:1px solid var(--border);

  box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.stat-icon img{
  width:37px;
  height:35px;
}

/* TOP ROW */

.stat-top{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:10px;

  color:var(--text);

  font-size:1rem;
}

/* BAR */

.bar{
  width:100%;
  height:8px;

  background:var(--border);

  border-radius:999px;
  overflow:hidden;
}

.fill{
  width:0;
  height:100%;

  background:linear-gradient(
    90deg,
    var(--primary),
    var(--accent)
  );

  border-radius:999px;

  transition:width 1.5s ease;

  box-shadow:0 0 10px rgba(236,72,153,.5);
}

/* COUNT */

.count{
  font-size:1rem;
  font-weight:600;

  color:var(--text);
}

.count::after{

    content:"+";

}

/* MOBILE */

@media (max-width:768px){

  .social-stats{
    flex-direction:column;
    align-items:center;
  }

}


/* =========================
   WORK SECTION
========================= */

.work{
  background:var(--bg-secondary);
  padding:120px 20px;
  min-height:80vh;
}

.work-container{
  max-width:1100px;
  margin:0 auto;

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

  gap:60px;
}

/* TEXT */

.work-text h2{
  font-size:2.8rem;
  color:var(--text);
  margin-bottom:15px;
}

.subtitle{
  color:var(--text-secondary);
  margin-bottom:25px;
}

.services{
  list-style:none;
  padding:0;
  margin-bottom:30px;
}

.services li{
  margin-bottom:10px;
  color:var(--text);
  font-weight:500;
}

/* BUTTON */

.work .btn.primary{
  background:linear-gradient(
    90deg,
    var(--accent),
    var(--primary)
  );

  color:#fff;

  padding:12px 25px;

  border-radius:8px;

  text-decoration:none;

  font-weight:600;
}

/* CARD */

.work-card{
  background:var(--bg-card);

  padding:30px;

  border-radius:15px;

  min-width:280px;

  border:1px solid var(--border);

  box-shadow:var(--shadow);
}

.work-card h3{
  margin-bottom:20px;
  color:var(--text);
}

.card-stats p{
  margin-bottom:10px;
  color:var(--text-secondary);
}

.card-stats strong{
  color:var(--text);
}

/* BRANDS */

.brands{
  max-width:1100px;

  margin:80px auto 0;

  text-align:center;
}

.brands h4{
  margin-bottom:30px;
  color:var(--text-secondary);
}

.brand-logos{
  min-height: 100px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;

  gap:60px;
}

.brand-logos img{
  max-width:60px;
  height:60px;

  object-fit:contain;

  opacity:.7;

  transition:.3s ease;
}

.brand-logos img:hover{
  opacity:1;
}

/* CONTACT FORM */

.contact-form{
  margin-top:20px;

  display:flex;
  flex-direction:column;

  gap:10px;
}

.contact-form input,
.contact-form textarea{

  padding:10px;

  border-radius:6px;

  border:1px solid var(--border);

  background:var(--bg-card);

  color:var(--text);

  font-family:inherit;
}

.contact-form textarea{
  min-height:80px;
}

.contact-form button{

  background:linear-gradient(
    90deg,
    var(--accent),
    var(--primary)
  );

  color:#fff;

  padding:10px;

  border:none;

  border-radius:6px;

  cursor:pointer;

  transition:.3s ease;
}

.contact-form button:hover{
  transform:translateY(-2px);
}


/* =========================
   BLOG SECTION
========================= */

/* ======================================
   BLOG SECTION
====================================== */

.featured-section{
    padding:60px 20px;
    border-top: 2px rgba(0, 0, 0, 0.064) solid;
}

.featured-header{
    max-width:1200px;
    margin:0 auto 35px;

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

.featured-header span{
    display:block;

    font-size:.85rem;
    font-weight:700;

    letter-spacing:2px;
    text-transform:uppercase;

    color:var(--primary);
}

.featured-header h2{
    font-size:3rem;
    color:var(--text);
}

/* ======================================
   FEATURED ARTICLE
====================================== */

.featured-wrapper{

    max-width:1200px;
    margin:0 auto 90px;

    display:grid;
    grid-template-columns:1.6fr 1fr;

    overflow:hidden;

    border-radius:30px;

    background:var(--bg-card);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.featured-image{
    overflow:hidden;
}

.featured-image img{

    width:100%;
    height:500px;

    object-fit:cover;

    transition:.6s ease;

}

.featured-wrapper:hover .featured-image img{

    transform:scale(1.05);

}

/* RIGHT SIDE */

.featured-content{

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:45px;

    background:rgba(212,212,212,.18);

}

.featured-category{

    font-size:.8rem;
    font-weight:700;

    letter-spacing:2px;
    text-transform:uppercase;

    color:var(--primary);

    margin-bottom:18px;

}

.featured-content h2{

    font-size:2.5rem;
    line-height:1.08;

    color:var(--text);

    margin-bottom:20px;

}

.featured-content p{

    font-size:1rem;
    line-height:1.7;

    color:var(--text-secondary);

    margin-bottom:30px;

}

.featured-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:fit-content;

    padding:15px 30px;

    border-radius:999px;

    text-decoration:none;

    background:#fff;
    color:#111;

    font-weight:700;

    transition:.3s ease;

}

.featured-btn:hover{

    transform:translateY(-4px);

}

/* ======================================
   LATEST ARTICLES
====================================== */

.latest-header{

    max-width:1200px;
    margin:0 auto 40px;

}

.latest-header span{

    display:block;

    font-size:.9rem;
    font-weight:700;

    letter-spacing:2px;
    text-transform:uppercase;

    color:var(--primary);

}

.latest-list{

    max-width:1200px;
    margin:auto;

    display:flex;
    flex-direction:column;

    gap:30px;

}

.latest-item{

    display:grid;
    grid-template-columns:1fr 240px;

    gap:30px;

    align-items:center;

    padding:22px 0;

    text-decoration:none;

    border-bottom:1px solid var(--border);

    transition:.3s ease;

}

.latest-item:last-child{

    border-bottom:none;

}

.latest-item:hover{

    transform:translateX(10px);

}

.latest-category{

    display:block;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--primary);

    margin-bottom:12px;

}

.latest-text h3{

    font-size:1.6rem;

    line-height:1.25;

    color:var(--text);

    margin-bottom:16px;

    max-width:720px;

}

.latest-meta{

    display:flex;
    flex-direction:column;

    gap:4px;

    font-size:.9rem;

    color:var(--text-muted);

}

.latest-meta strong{

    color:var(--text);

}

.latest-image{

    display:flex;
    justify-content:flex-end;

}

.latest-image img{

    width:240px;
    height:160px;

    border-radius:18px;

    object-fit:cover;

    transition:.35s ease;

}

.latest-item:hover .latest-image img{

    transform:scale(1.04);

}


/* =========================
   SHOP SECTION
========================= */

.shop-section{

  padding:100px 20px;

  background:var(--bg-secondary);

  border-top: 2px rgba(0, 0, 0, 0.064) solid;

}

.shop-preview{

  width:100%;
  max-width:1100px;

  margin:0 auto;

  text-align:center;

}

.shop-badge{

  display:inline-block;

  padding:5px 12px;

  border-radius:20px;

  background:rgba(59,130,246,.1);

  color:var(--accent);

  font-size:.75rem;

  margin-bottom:15px;

}

.shop-section h2{

  font-size:2.5rem;

  margin-bottom:10px;

  color:var(--text);

}

.shop-header p{

  color:var(--text-secondary);

  margin-bottom:40px;

}

/* FEATURED PRODUCT */

.featured-product{

  position:relative;

  padding:40px;

  margin-bottom:30px;

  text-align:left;

  border-radius:20px;

  background:var(--bg-card);

  border:1px solid var(--border);

  box-shadow:var(--shadow);

  transition:.3s ease;

}

.featured-product:hover{

  transform:translateY(-5px);

}

.featured-tag{

  position:absolute;

  top:20px;
  left:20px;

  padding:5px 12px;

  border-radius:20px;

  background:var(--accent);

  color:#fff;

  font-size:.7rem;

}

.featured-product h3{

  font-size:1.6rem;

  margin-bottom:10px;

  color:var(--text);

}

.featured-product p{

  color:var(--text-secondary);

  margin-bottom:15px;

}

.shop-link{

  color:var(--accent);

  text-decoration:none;

  font-weight:bold;

}

/* PRODUCTS */

.product-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:20px;

}

.product-card{

  padding:25px;

  text-align:left;

  border-radius:15px;

  background:var(--bg-card);

  border:1px solid var(--border);

  transition:.3s ease;

}

.product-card:hover{

  transform:translateY(-5px);

  background:var(--bg-card-hover);

}

.product-card span{

  display:inline-block;

  margin-bottom:10px;

  font-size:.7rem;

  font-weight:bold;

}

.product-card.free span{
  color:#22c55e;
}

.product-card.paid span{
  color:var(--accent);
}

.product-card h4{

  margin-bottom:8px;

  color:var(--text);

}

.product-card p{

  font-size:.85rem;

  color:var(--text-secondary);

}

/* BUTTON */

.shop-btn{

  display:inline-block;

  margin-top:40px;

}

.third{

  padding:12px 25px;

  margin-left:20px;

  border-radius:8px;

  border:1px solid var(--border);

  background:transparent;

  color:var(--primary);

}


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

@media (max-width:768px){

  .work-container{
    flex-direction:column;
    text-align:center;
  }

  .work-card{
    width:100%;
  }

  .brand-logos{
    gap:30px;
  }

  .blog-grid{
    grid-template-columns:1fr;
  }

  .product-grid{
    grid-template-columns:1fr;
  }

}


/* ===================================
   MOBILE RESPONSIVENESS - HERO
=================================== */

@media (max-width:768px){

  .hero{

    display:flex;
    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:25px;

    min-height:auto;

    margin-top:70px;
    margin-bottom:80px;

    max-width:400px;

    margin-left:auto;
    margin-right:auto;

    padding:20px;
  }

  .hero-image{

    position:relative;

    order:1;

    right:auto;
    bottom:auto;

    width:220px;
    max-width:220px;

    margin-top:25px;

    margin-bottom:20px;
  }

  .hero-image img{

    width:100%;
    height:300px;

    object-fit:cover;

    padding:0;

    transform:none;

    border-radius:24px;
  }

  .hero-text{

    position:relative;

    order:2;

    left:auto;

    max-width:100%;

    display:flex;
    flex-direction:column;

    align-items:center;
  }

  .hero-text::before{

    margin-top:10px;

    margin-bottom:18px;

    text-align:center;
  }

  .hero h1{

    font-size:36px;

    line-height:.95;

    max-width:280px;

    margin:0 auto 18px;
  }

  .hero p{

    max-width:340px;

    text-align:center;

    margin-left:auto;
    margin-right:auto;
  }

  .buttons{

    flex-direction:column;

    width:100%;

    max-width:340px;

    gap:16px;
  }

  .btn.primary,

  .btn.secondary{

    width:100%;
  }

  .btn.primary{

    max-width:340px;
  }

  .hero-socials{

    display:flex !important;

    justify-content:center;

    gap:14px;

    margin-top:28px;

    margin-bottom:10px;
  }

  .hero-socials img{

    width:16px;

    height:16px;
  }

  .hero-light-stats{

    display:flex !important;

    justify-content:center;

    width:100%;

    gap:24px;

    margin-top:20px;
  }

  .hero-light-divider{

    width:1px;

    height:50px;
  }

  .stats{

    display:none !important;
  }

  .hero-light-stat{

    flex:1;

    min-width:80px;
  }

  .hero-light-stat h3{

    font-size:1.8rem;
  }

  .hero-light-stat p{

    font-size:.85rem;

    line-height:1.25;
  }

}


/* =========================
   LIGHT MODE MOBILE
========================= */

@media (max-width: 768px){

  body.light-theme{

    background:#f5f3f3;

  }

  body.light-theme .hero{

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    gap:20px;

    min-height:auto;

    max-width:400px;

    margin:70px auto 80px;

    padding:20px;

  }

  body.light-theme .hero-image{

    width:220px;
    max-width:220px;

    margin-top:25px;
    margin-bottom:10px;

  }

  body.light-theme .hero-image img{

    width:100%;
    height:300px;

    object-fit:cover;

    border-radius:24px;

  }

  body.light-theme .hero-text{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:0;

    margin:0;
    padding:0;

    max-width:100%;

  }

  body.light-theme .hero-text::before{

    display:none;

  }

  body.light-theme .hero h1{

    font-size:36px;
    line-height:.95;

    max-width:280px;

    margin:10px 0 18px 0px !important;

    color:#111;

  }

  body.light-theme .hero-role{

    color:#666;

    margin:0 0 10px !important;

    font-size:16px !important;

    line-height:1.4 !important;

  }

  body.light-theme .hero-description{

    color:#666;

    max-width:340px;

    margin:0 0 12px 0px !important;

    text-align:center;

    font-size:16px !important;

    line-height:1.5 !important;

  }

body.light-theme .buttons{

  display:flex;
  flex-direction:row;

  justify-content:center;
  align-items:center;

  gap:0px;

  margin:10px 0 18px 0 !important;

}

body.light-theme .btn.primary,
body.light-theme .btn.secondary{

  width:150px !important;
  height:45px !important;

  font-size:14px !important;
  font-weight:700;

  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  border: 1px solid var(--text-secondary);

}

  body.light-theme .hero-socials{

    display:flex;

    justify-content:center;

    gap:14px;

    margin:0 0 18px;

  }

  body.light-theme .hero-socials a{

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,0,0,.05);

  }

  body.light-theme .hero-socials img{

    width:16px;

    height:16px;

    opacity:.8;

  }

  body.light-theme .hero-light-stats{

    display:flex;

    justify-content:center;

    gap:24px;

    width:100%;

    margin: 10px 0 0 0;

  }

  body.light-theme .hero-light-divider{

    width:1px;

    height:50px;

    background:rgba(0,0,0,.12);

  }

  body.light-theme .hero-light-stat h3{

    color:#111;

    font-size:1.8rem;

  }

  body.light-theme .hero-light-stat p{

    color:#666;

    font-size:.85rem;

    line-height:1.25;

  }

}


  /* =========================
     DARK MODE
  ========================= */



@media (max-width:768px){
  body:not(.light-theme){

    background:#07070d;
  }

  body:not(.light-theme) .hero h1,

  body:not(.light-theme) .hero-light-stat h3{

    color:#fff;
  }

  body:not(.light-theme) .hero-role,

  body:not(.light-theme) .hero-description,

  body:not(.light-theme) .hero-light-stat p{

    color:#c7c7c7;
  }

  body:not(.light-theme) .hero,

  body:not(.light-theme) .hero::before,

  body:not(.light-theme) .hero::after,

  body:not(.light-theme) .hero-fade{

    background:none !important;

    background-image:none !important;

    box-shadow:none !important;

    filter:none !important;
  }

  body:not(.light-theme) .hero-light-divider{

    background:rgba(255,255,255,.15);
  }

  body:not(.light-theme) .hero-socials a{

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.46);

    backdrop-filter:blur(4px);
  }

  body:not(.light-theme) .hero-socials img{

    opacity:.95;
  }

}

/* ===================================
   DARK HERO - TABLET / SMALL DESKTOP
=================================== */

@media (max-width: 1085px) and (min-width: 769px){

  body:not(.light-theme) .hero{

    min-height: 450px;

    padding: 80px 30px;

    margin-top: 120px;

    overflow: hidden;

  }

  body:not(.light-theme) .hero-text{

    max-width: 45%;

    z-index: 3;

  }

  body:not(.light-theme) .hero h1{

    font-size: 3rem;

  }

  body:not(.light-theme) .hero p{

    max-width: 320px;

    font-size: .9rem;

  }

  body:not(.light-theme) .hero-image{

    right: 30px;

    width: 42%;

    max-width: 430px;

  }

  body:not(.light-theme) .hero-image img{

    height: 520px;

    width: 100%;

    object-fit: contain;

    padding-right: 0;

    padding-top: 70px;

    transform: translateY(10px);

  }

}





/* ===================================
   MOBILE RESPONSIVENESS
=================================== */

@media (max-width: 768px) {

  /* ===================================
     ABOUT
  =================================== */

  .about {
    max-height: none;
    padding: 40px 20px;
  }

  .about-container {
    flex-direction: column;
    gap: 25px;
  }

  .about-image {
    width: 100%;
  }

  .about-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center top;
    margin-left: 0;
    border-radius: 24px;
  }

  .about-badge {
    left: 15px;
    bottom: 15px;
    padding: 10px 14px;
  }

  .about-content {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .about-content h2 {
    font-size: 1.8rem;
    line-height: 1.15;
    min-height: 65px;
  }

  .about-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 100%;
  }

  .about-tags {
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }

  .about-content .btn,
  .about-content .btn.primary {
    margin-left: auto;
    margin-right: auto;
  }


  /* ===================================
     FEATURED
  =================================== */

  .featured {
    padding: 0 15px;
  }

  .featured-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
  }

  .featured-title {
    font-size: 2rem;
  }

  .featured-header h2 {
    font-size: 2rem;
  }

  .featured-arrows {
    display: none;
  }

  .video-scroll {
    gap: 18px;
    padding-top: 20px;
    overflow: hidden;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .video-scroll::-webkit-scrollbar {
    display: none;
  }

  .featured-card {
    min-width: 280px;
    flex: 0 0 280px;
    scroll-snap-align: none;
  }

  .featured-card img {
    height: 180px;
  }

  .featured-card-content {
    padding: 16px;
  }

  .featured-card-content h3 {
    font-size: 1rem;
  }

  .featured-desc {
    font-size: 0.85rem;
  }

  .swipe-txt {
    font-size: 13px;
    padding-top: 15px;
  }


  /* ===================================
     STATS
  =================================== */

  .stats-section {
    padding: 40px 20px 20px;
  }

  .stats-section h2 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .stats-section p {
    font-size: 0.95rem;
  }


/* ===================================
   SOCIAL STATS
=================================== */

.social-stats {
  margin-top: 0;
  padding: 20px;
  gap: clamp(14px, 2vw, 28px);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  width: 100%;
  box-sizing: border-box;
  height: auto;
}

.stat {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

.stat-top {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
}

.count {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
}




  /* ===================================
     WORK SECTION
  =================================== */

  .work {
    padding: 60px 20px;
    min-height: auto;
  }

  .work-container {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }

  .work-text {
    width: 100%;
  }

  .work-text h2 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .subtitle {
    font-size: 0.95rem;
  }

  .services {
    margin-top: 16px;
  }

  .services li {
    font-size: 0.95rem;
    margin-bottom: 8px;
  }

  .work-card {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    min-width: auto;
    padding: 22px;
  }

  .card-stats {
    margin-bottom: 18px;
  }


  /* ===================================
     CONTACT FORM
  =================================== */

  .contact-form {
    width: 100%;
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    font-size: 16px;
  }

  .contact-form button {
    width: 100%;
    padding: 14px;
  }


  /* ===================================
     BRANDS
  =================================== */

  .brands {
    margin-top: 60px;
    text-align: center;
  }

  .brand-logos {
    justify-content: center;
    gap: 20px;
  }

  .brand-logos img {
    width: 50px;
    height: 50px;
  }


  /* ===================================
     BLOG SECTION
  =================================== */

  .featured-section {
    padding: 60px 18px;
  }

  .blog-featured-header {
    display: block;
    margin-bottom: 22px;
  }

  .blog-featured-header h2 {
    display: none;
  }

  .blog-featured-header span {
    font-size: 0.78rem;
    letter-spacing: 2px;
  }


  /* ===========================
     FEATURED ARTICLE
  =========================== */

  .featured-wrapper {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 45px;
  }

  .featured-image {
    height: 240px;
  }

  .featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .featured-content {
    padding: 28px 22px;
  }

  .featured-category {
    font-size: 0.7rem;
    margin-bottom: 12px;
  }

  .featured-content h2 {
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 14px;
  }

  .featured-content p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 22px;
  }

  .featured-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }


  /* ===========================
     LATEST ARTICLES
  =========================== */

  .latest-header {
    margin-bottom: 20px;
  }

  .latest-header span {
    font-size: 0.85rem;
    letter-spacing: 2px;
  }

  .latest-list {
    gap: 0;
  }

  .latest-item {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 18px;
    align-items: center;
    padding: 22px 0;
  }

  .latest-image {
    justify-content: flex-end;
  }

  .latest-image img {
    width: 120px;
    height: 120px;
    border-radius: 18px;
  }

  .latest-category {
    font-size: 0.72rem;
    margin-bottom: 8px;
  }

  .latest-text h3 {
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 14px;
  }

  .latest-meta {
    gap: 3px;
    font-size: 0.82rem;
  }

  .latest-meta strong {
    font-weight: 700;
  }

  /* Remove hover movement on phones */

  .latest-item:hover {
    transform: none;
  }

  .latest-item:hover .latest-image img {
    transform: none;
  }


  /* ===================================
     SHOP SECTION
  =================================== */

  .shop-section {
    padding: 50px 20px;
  }

  .shop-section h2 {
    font-size: 1.8rem;
    line-height: 1.15;
    margin-bottom: 10px;
  }

  .shop-section .shop-header p {
    font-size: 0.9rem;
    max-width: 300px;
    margin: 0 auto 10px;
  }

  .shop-section .featured-product {
    padding: 20px;
    text-align: center;
    border-radius: 20px;
  }

  .shop-section .featured-tag {
    position: static;
    display: inline-block;
    margin-bottom: 12px;
  }

  .shop-section .featured-product h3 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 10px;
  }

  .shop-section .featured-product p {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .shop-section .product-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .shop-section .product-card {
    text-align: center;
    padding: 18px;
    border-radius: 18px;
  }

  .shop-section .product-card h4 {
    font-size: 1rem;
  }

  .shop-section .product-card p {
    font-size: 0.85rem;
  }

  .shop-btn {
    margin-top: 20px;
  }


  /* ===================================
     GLOBAL MOBILE SAFETY FIXES
  =================================== */

  img {
    max-width: 100%;
    height: auto;
  }

  section {
    overflow-x: hidden;
  }

  .featured,
  .about,
  .work,
  .blog-section,
  .shop-section {
    overflow-x: hidden;
  }

}