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


/* ================= GLOBAL TYPOGRAPHY SYSTEM ================= */

body{
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  color: #cbd5e1;
    overflow-x: hidden;

}


/* HEADINGS */
h1,h2,h3,h4,h5,h6{
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

/* H1 */
h1{
  font-size: 42px;
  line-height: 1.2;
}

/* H2 */
h2{
  font-size: 32px;
}

/* H3 */
h3{
  font-size: 24px;
}

/* H4 */
h4{
  font-size: 18px;
}

/* H5 */
h5{
  font-size: 16px;
}

/* H6 */
h6{
  font-size: 14px;
}

/* PARAGRAPH */
p{
  font-size: 15px;
  color: #9fb3c8;
  margin-bottom: 12px;
}

/* SMALL TEXT */
.small-text{
  font-size: 13px;
  color: #94a3b8;
}
.com-siz{
	
	font-size:45px;
	color:white;
}
/* SUBTITLE / TAG */
.tag,
.px-tag,
.zx-tag,
.uxs-tag,
.blog-og-tag,
.review-tag,
.mv-tag{
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 600;
  color: #ff7a2f;
  text-transform: uppercase;
}

/* SUB HEADING */
.subtitle,
.zx-desc,
.uxs-desc{
  font-size: 13px;
  color: #9fb3c8;
}

/* BUTTON TEXT FIX */
button,
a{
  font-size: 14px;
}

/* CARD TEXT FIX */
.mini-card p,
.feature-card p,
.zx-info p,
.uxs-content p,
.blog-og-content p{
  font-size: 14px;
}

/* CONSISTENT LINE HEIGHT */
h1,h2,h3{
  line-height: 1.3;
}

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

  h1{
    font-size: 30px;
  }

  h2{
    font-size: 24px;
  }

  h3{
    font-size: 20px;
  }

  p{
    font-size: 14px;
  }

  section{
    padding: 50px 0;
  }
}

/* ================= CONTAINER ================= */
.container {
  width: 90%;
  max-width: 1300px;
  margin: auto;
}

/* ================= HEADER ================= */
.sxnav-header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  background: rgb(30 29 28);
  backdrop-filter: blur(12px);
}

.sxnav-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
}

/* LOGO */
.sxnav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sxnav-logo img {
   width: 280px;        /* adjust size */
  height: auto;
  object-fit: contain;
  display: block;
  
  border-radius: 8px;
}
.sxfoot-logo img:hover{
  transform:scale(1.05);
  box-shadow:
    0 8px 25px rgba(255,122,47,0.4);
}
.sxnav-logo h2 {
  font-size: 18px;
  font-weight: 600;
}

.sxnav-logo span {
  font-size: 11px;
  color: #aaa;
}

/* MENU */
.sxnav-menu {
  display: flex;
  list-style: none;
  gap: 25px;
  margin-top:13px;
}

.sxnav-menu li {
  color: #bbb;
  cursor: pointer;
  transition: 0.3s;
}

.sxnav-menu li:hover,
.sxnav-menu li.active {
  color: #ff6a2f;
}

/* BUTTON */
.sxnav-btn {
  padding: 10px 22px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.sxnav-btn.primary {
  background: #ff6a2f;
  color: #fff;
}

.sxnav-btn.primary:hover {
  background: #ff5722;
}

.sxnav-btn.outline {
  border: 1px solid #555;
  color: #fff;
}

/* ================= HERO ================= */
/* ================= HERO ================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0 120px;
  overflow: hidden;
  background: #000; /* fallback */
}

/* VIDEO BACKGROUND */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.6) contrast(1.1); /* 🔥 improves visibility */
}

/* OVERLAY */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
       rgba(0,0,0,0.75) 20%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.15) 80%,
    rgba(0,0,0,0.05) 100%
  );
}

/* CONTENT LAYER */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}

/* LEFT */
.left {
  max-width: 600px;
}

.badge {
  display: inline-block;
  background: rgba(255,106,47,0.2);
  color: #ff6a2f;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  margin-bottom: 15px;
}

.left h2 {
  font-size: 52px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}

.left h2 span {
  color: #ff6a2f;
}

.left p {
  margin: 20px 0;
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.6;
}

/* BUTTONS */
.px-buttons {
  display: flex;
  gap: 15px;
}

.px-btn {
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.px-btn.primary {
  background: #ff6a2f;
  color: #fff;
}

.px-btn.outline {
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
}

/* RIGHT */
.right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 450px;
}

/* FEATURE CARD */
.feature-card {
  display: flex;
  align-items: center;
  gap: 15px;

  background: rgba(255,255,255,0.08);
  padding: 20px;
  border-radius: 14px;

  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ICON */
.icon-circle {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  background: rgba(255,106,47,0.18);
  color: #ff6a2f;

  box-shadow:
    0 0 20px rgba(255,106,47,0.6),
    inset 0 0 12px rgba(255,106,47,0.3);
}

/* TEXT */
.feature-card h4 {
  color: #fff;
  font-size: 16px;
}

.feature-card p {
  color: #cbd5e1;
  font-size: 13px;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;

  min-width: 100%;
  min-height: 100%;

  width: auto;
  height: auto;

  transform: translate(-50%, -50%); /* 🔥 center perfectly */

  object-fit: cover;
  object-position: center; /* 🔥 key fix */

  z-index: 0;
}

/* ================= STATS BAR ================= */
.stats-bar {
  position: absolute;
  bottom: -80px;
 margin: -60px auto 0 auto; /* center + overlap */
  left: 50%;
  transform: translateX(-50%);

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

  display: flex;
  justify-content: space-between; /* ✅ evenly spread */
  align-items: center;
  left: 0;
  right: 0;
  gap: 30px;

  padding: 20px 30px;
  border-radius: 18px;

  background: rgba(10, 20, 30, 0.85);
  backdrop-filter: blur(18px);

  border: 1px solid rgba(255,255,255,0.08);

  z-index: 10;
}
.stats-bar.reveal {
  transform: translateY(40px); /* ONLY vertical */
}

/* STAT */
.stat {
   display: flex;
  align-items: center;
  gap: 10px;

  min-width: auto;
}

.stat h3 {
  color: #fff;
  font-size: 20px;
}

.stat p {
  color: #9fb3c8;
  font-size: 12px;
}

/* DIVIDER */
.divider {
  width: 1px;
    height: 35px;
  background: rgba(255,255,255,0.2);
}

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

/* ================= ABOUT SECTION ================= */
/* ================= SECTION ================= */
.about-section{
  padding:100px 0;
  background: radial-gradient(circle at top left, #0b1d2c, #04070b);
  position:relative;
}

/* FLEX HEIGHT FIX */
.row.align-items-stretch > [class*="col"]{
  display:flex;
}

/* ================= IMAGE ================= */
.about-image{
  height:100%;
  min-height:420px;
}

.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,0.6);
}

/* ================= RIGHT CARD ================= */
.about-content{
  padding:40px;
  border-radius:22px;
  background: linear-gradient(135deg,#0b2a45,#081f35);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
}

/* TAG */
.tag{
  display:inline-block;
  padding:6px 16px;
  border-radius:25px;
  border:1px solid rgba(255,106,47,0.5);
  color:#ff6a2f;
  font-size:12px;
  margin-bottom:15px;
}

/* TITLE */
.about-content h2{
  font-size:48px;
  color:#fff;
  font-weight:700;
}

.about-content span{
  color:#ff6a2f;
}

.about-content h2::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  background:#ff6a2f;
  margin-top:10px;
}

/* TEXT */
.subtitle{
  color:#9fb3c8;
}

.about-content p{
  color:#cbd5e1;
  font-size:14px;
}

.highlight{
  color:#ff6a2f;
}

/* ================= FEATURES ================= */
.feature{
  display:flex;
  gap:10px;
}

.feat-icon{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#ff6a2f;
  color:#fff;
  font-size:12px;
}

.feature h4{
  font-size:14px;
  color:#fff;
}

.feature p{
  font-size:12px;
  color:#9fb3c8;
}

/* ================= BUTTONS ================= */
.px-btn{
  padding:10px 20px;
  border-radius:30px;
  border:none;
}

.px-btn.primary{
  background:#ff6a2f;
  color:#fff;
}

.px-btn.outline{
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  background:transparent;
}

/* ================= MINI CARDS ================= */
.mini-card{
  background: linear-gradient(145deg,#0f2a40,#081824);
  padding:16px;
  border-radius:14px;
  transition:0.3s;
}

.mini-card span{
  font-size:18px;
  color:#ff6a2f;
}

.mini-card h5{
  font-size:14px;
  color:#fff;
  margin:6px 0 4px;
}

.mini-card p{
  font-size:12px;
  color:#9fb3c8;
}

.mini-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 20px rgba(0,0,0,0.5);
}

/* FIX FEATURE ALIGNMENT */
.features-row{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
}

/* EACH ITEM */
.feature-item{
  display:flex;
  align-items:flex-start;
  gap:12px;

  width: auto;           /* 🔥 IMPORTANT */
  max-width: 220px;      /* control width */
}

/* ICON */
.feat-icon{
  width:32px;
  height:32px;

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

  border-radius:50%;

  background:#ff6a2f;
  color:#fff;

  font-size:13px;
  flex-shrink:0;

  box-shadow:0 0 12px rgba(255,106,47,0.4);
}

/* TEXT */
.feature-item h4{
  font-size:14px;
  color:#fff;
  margin:0;
}

.feature-item p{
  font-size:12px;
  color:#9fb3c8;
  margin-top:3px;
  line-height:1.4;
}
/* ===== BROCHURE BUTTON ===== */
.about-brochure-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 15px;

  padding: 12px 22px;
  border-radius: 30px;

  background: linear-gradient(90deg, #ff7a2f, #ff5722);
  color: #fff;
  font-weight: 500;
  text-decoration: none;

  box-shadow: 0 10px 25px rgba(255,106,47,0.3);
  transition: 0.3s ease;
}

.about-brochure-btn i{
  font-size: 14px;
}

.about-brochure-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(255,106,47,0.5);
}
  /* ================= ABOUT SECTION END================= */


  /* ================= HOT PRODUCT SECTION ================= */
.px-products{ 
display:flex;
 gap:60px;
 padding:100px 60px;
 align-items:center;
 background:#071a2b;
 } /* LEFT */ 
.px-left{ width:35%; } 
.px-tag{ color:#ff6a2f;
 border:1px solid #ff6a2f; 
 display:inline-block; 
 padding:6px 14px;
 border-radius:20px; 
 font-size:12px; 
 margin-bottom:20px; 
 } 
 .px-left h1{ font-size:52px; 
 line-height:1.2; 
 color:#fff; } 
 .px-left span{ color:#ff6a2f; }
 .px-left p{ margin:20px 0; 
 color:#9fb3c8; 
 font-size:14px;
 line-height:1.6; } 
 /* BUTTONS */ 
 .px-buttons{ 
 display:flex; 
 gap:15px;
 margin-top:15px; } 
 .px-btn{ padding:12px 22px;
 border-radius:30px; 
 border:none; cursor:pointer; font-size:14px; transition:0.3s; } .px-btn.primary{ background:#ff6a2f; color:#fff; } .px-btn.primary:hover{ box-shadow:0 0 20px rgba(255,106,47,0.6); } .px-btn.outline{ background:transparent; border:1px solid #3b4a5a; color:#fff; } .px-btn.outline:hover{ border-color:#ff6a2f; color:#ff6a2f; } /* GRID */ .px-grid{ width:65%; display:grid; grid-template-columns:repeat(4,1fr); gap:25px; align-items:stretch; /* 🔥 FIX */ } /* CARD */ 
 .px-card{ 
 position: relative;
  background: linear-gradient(145deg,#0f2a40,#081824);
  padding: 25px 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 🔥 KEY FIX */
  border: 1px solid rgba(255,255,255,0.05);
  transition: 0.3s;
  height: 100%; /* 🔥 important */

 } /* CONTENT FLEX */ 
 .px-card-content{ 
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
 } /* HOVER EFFECT */ .px-card:hover{ transform:translateY(-6px); border:1px solid #ff6a2f; box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 25px rgba(255,106,47,0.35); } /* IMAGE */
 .px-card img{  
   width: 100px;   /* 🔥 increase */
  height: 100px;
  object-fit: contain;
  margin: 10px auto 15px;} /* TEXT */ .px-card h3{ font-size:18px; color:#fff; margin-bottom:8px; } 
  .px-card p{   font-size: 13px;
  color: #9fb3c8;
  margin-bottom: 15px;
  line-height: 1.4;     /* 🔥 reduce spacing (was 1.6) */
  letter-spacing: 0.1px;
 text-align: left;   
  flex-grow: 1;
  } /* BUTTON */
  .px-view{ 
 margin-top: 15px; /* 🔥 bottom align */
  padding:7px 14px; font-size:12px;
  border-radius:18px; 
  border:1px solid #2b7cff;
  background:transparent; 
    align-self: center;
  
  color:#2b7cff; cursor:pointer; transition:0.3s; width:fit-content; }
.px-grid {
  width: 65%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  align-items: stretch;
}

  .px-view:hover{ background:#ff6a2f; border-color:#ff6a2f; color:#fff; } /* BADGES */ .px-badge{ position:absolute; top:15px; left:15px; font-size:10px; padding:5px 10px; border-radius:12px; color:#fff; font-weight:500; } .px-badge.orange{ background:#ff6a2f; } .px-badge.blue{ background:#2b7cff; } .px-badge.green{ background:#00c896; } /* smoother scaling */ .px-card { min-height: 320px; } /* better image scaling */ .px-card img { max-width: 120px; margin: 15px auto; } /* RESPONSIVE */ @media(max-width:1200px){ .px-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .px-products{ flex-direction:column; } .px-left, .px-grid{ width:100%; } .px-grid{ grid-template-columns:1fr; } }

  /* ================= HOT PRODUCT SECTION END================= */
  


  /* ================= PRODUCT SECTION================= */
.zx-products{
 padding:80px 60px;

  background: linear-gradient(
    90deg,
    #061a2c 0%,
    #071f35 40%,
    #071a2b 100%
  );
}

/* LAYOUT */
.zx-container{

  justify-content:space-between;
  align-items:center;
  gap:60px;
}

/* LEFT */
.zx-left{
  max-width:520px;
}

.zx-tag{
  color:#ff7a2f;
  margin-bottom:10px;
}

.zx-left h1{
 font-size:48px;
  line-height:1.2;
  font-weight:700;

  color:#ffffff; 
}

.zx-left span{
  color:#ff7a2f;
}
.zx-left h1 span{
  color:#ff7a2f;
}

.zx-left p{
  color:#ff6a2f;        /* 🔥 brighter */
  font-size:15px;
}

.zx-desc{
  margin-top:20px;
  color:#9fb3c8;
  line-height:1.6;
}

/* VIEW BUTTON */
.zx-view-btn{
  display:inline-block;
  margin-top:25px;
  padding:12px 26px;
  border:2px solid #ff7a2f;
  border-radius:30px;
  color:#ff7a2f;
  text-decoration:none;
  transition:0.3s;
}

.zx-view-btn:hover{
  background:#ff7a2f;
  color:#fff;
}

/* CARD */
.zx-right{
   width:100%;
  max-width:560px;
  margin:auto;
  border-radius:20px;
  background:linear-gradient(145deg,#0b2a45,#071a2b);
  padding:40px 45px;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
    height: 320px;
}

/* CONTENT */
.zx-content{
 position: absolute;
  inset: 0;
  display: flex;              /* 🔥 ADD THIS */
  align-items: center;        /* 🔥 CENTER VERTICAL */
  opacity: 0;
  transform: translateY(20px);
  transition: 0.4s ease;
  
}

.zx-content.active{
  opacity: 1;
  transform: translateY(0);
  z-index: 2;
}

/* FLEX */
.zx-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
}
.zx-flex,
.zx-content > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* LEFT INFO (MAIN FIX) */
.zx-info{
  width:55%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:14px;
  margin-left:15px;
}

/* BADGE */
.zx-badge{
  background:#ff7a2f;
  padding:6px 14px;
    color:#fff; 
  border-radius:20px;
  font-size:12px;
}
.badge{
  display: inline-flex;          /* 🔥 key fix */
  align-items: center;

  width: fit-content;            /* 🔥 shrink to text */
  max-width: 100%;

  padding: 6px 16px;
  border-radius: 25px;

  background: linear-gradient(90deg, rgba(255,106,47,0.25), rgba(255,106,47,0.05));
  color: #ff6a2f;

  font-size: 12px;
  margin-bottom: 15px;

  white-space: nowrap;           /* prevent stretching */
}

/* TITLE */
.zx-info h2{
  font-size: 26px;   /* 🔥 reduced */
  font-weight: 600;
  color:#ffffff; 
}
.zx-info {
  width: 55%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* DESC */
.zx-info p{
  color:#cbd5e1;              /* already good */
   font-size: 14px;
  line-height: 1.5;
  min-height: 70px;
 max-width: 320px;
 /* 🔥 equal height text */
}

/* FEATURES */
.zx-features{
   display: flex;
  gap: 18px;
  flex-wrap: wrap;
  min-height: 40px; /* 🔥 keeps all equal */

}
.zx-side {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.zx-right {
  height: 320px;
  display: flex;
  align-items: center;
}
.zx-features span{
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
   color:#e5e7eb; 
}

.zx-features span::before{
  content:"";
  width:6px;
  height:6px;
  background:#ff7a2f;
  border-radius:50%;
}

/* BUTTON */
.zx-btn{
   margin-top: 20px;
  width: 100%;
  max-width: 160px;
  text-align: center;
  background:#ff7a2f;
  border:none;
  padding:10px 22px;
  border-radius:25px;
  color:#fff;
  cursor:pointer;
  transition:0.3s;
}

.zx-btn:hover{
  background:#ff5722;
}

/* IMAGE */
.zx-img{
  width:45%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.zx-img img{
  width:200px;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 10px 25px rgba(0,0,0,0.6));
  transition:0.4s;
}

.zx-img img:hover{
  transform:scale(1.1) rotate(-5deg);
}

/* THUMBNAILS */
.zx-thumbs{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:60px;
}

.zx-thumb{
 min-width:140px;
  padding:14px 18px;

  text-align:center;
  border-radius:14px;

  background: rgba(255,255,255,0.06);   /* glass look */
  color:#e2e8f0;                        /* 🔥 visible text */

  font-size:14px;
  font-weight:500;

  border:1px solid rgba(255,255,255,0.08);

  cursor:pointer;
  transition:all 0.3s ease;
}

.zx-thumb:hover{
  background:#ff7a2f;
  color:#fff;

  transform:translateY(-5px);

  box-shadow:0 10px 25px rgba(255,106,47,0.4);
}
.zx-thumb.t1{
  background:#ff7a2f;
  color:#fff;
}
/* HOVER SWITCH */
.zx-products:not(:has(.zx-thumb:hover)) .c1{
  opacity:1;
}

.zx-products:has(.zx-thumb:hover) .zx-content{
  opacity:0;
}

.zx-products:has(.t1:hover) .c1,
.zx-products:has(.t2:hover) .c2,
.zx-products:has(.t3:hover) .c3,
.zx-products:has(.t4:hover) .c4,
.zx-products:has(.t5:hover) .c5{
  opacity:1;
}
.zx-img img {
    width: 160px;
  height: auto;
}

  /* ================= PRODUCT SECTION END================= */




  /* ================= WHY CHOOSE SECTION ================= */
.uxs-section{
  padding:80px;
  background:#071b2e;
  color:#fff;
  overflow:hidden;
}

/* LAYOUT */
.uxs-container{
  align-items:center;
  justify-content:space-between;
  gap:60px;
}

/* LEFT SIDE */


.uxs-tag{
  color:#ff7a2f;
  font-size:14px;
  margin-bottom:10px;
}

.uxs-left h2{
  font-size:42px;
  line-height:1.2;
  font-weight:700;
}

.uxs-left span{
  color:#ff7a2f;
}

.uxs-desc{
  margin-top:20px;
  color:#9fb3c8;
  line-height:1.6;
  max-width:420px;
}


/* SLIDER */
.uxs-slider{
   width:100%;
  overflow:hidden;
  position:relative;
}
@media(max-width:992px){
  .uxs-slider{
    width:100%;
  }
}
/* TRACK */
.uxs-track{
  display:flex;
  gap:20px;
   width:max-content;

  animation: uxsScroll 20s linear infinite;
}

/* ANIMATION */
@keyframes uxsScroll{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}

/* CARD */
.uxs-card{
  min-width:320px;
  height:260px;
  border-radius:22px;
  padding:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
    transition:0.3s ease;
	  margin-top:10px; 
}

/* CARD COLORS */
.uxs-card.blue{
  background:linear-gradient(145deg,#0f2e50,#0a1f34);
  color:#fff;
}

.uxs-card.light{
  background:#f3f3f3;
  color:#111;
}

/* TEXT SIDE */
.uxs-content{
  max-width:270px;
  display:flex;
  flex-direction:column;
}

/* TITLE */
.uxs-content h3{
  font-size:18px;
  margin-bottom:6px;
}

/* LINE */
.uxs-line{
  width:35px;
  height:3px;
  background:#ff7a2f;
  margin-bottom:10px;
}

/* DESC */
.uxs-content p{
  font-size:13px;
  line-height:1.5;
  margin-bottom:12px;
  opacity:0.9;
}

/* IMAGE SIDE (FIXED ALIGNMENT) */
.uxs-card img{
  width:120px;
  max-width:100%;
  object-fit:contain;
  transform:rotate(-15deg);
  filter:drop-shadow(0 12px 25px rgba(0,0,0,0.5));
}

/* BOTTOM BAR */
.uxs-bottom{
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  display:flex;
  justify-content:space-between;
  font-size:11px;
  gap:8px;
}

.uxs-bottom.light{
  background:#ffe9dc;
}

/* TEXT INSIDE BOTTOM */
.uxs-bottom div{
  text-align:center;
  flex:1;
}

/* OPTIONAL HOVER */
.uxs-card:hover{
  transform:translateY(-6px);
  transition:0.3s;
}
.uxs-track.paused{
  animation-play-state: paused;
}
.uxs-slider.paused .uxs-card {
  opacity: 0.6;
}
.uxs-slider.paused .uxs-card:hover {
  opacity: 1;
  transform: translateY(-6px);
}

  /* ================= WHY CHOOSE SECTION END================= */


  /* ================= TRUST SECTION================= */
.nx-hero{

  min-height:100vh;
  display:flex;
  align-items:center;
  padding:80px;
  position:relative;

  background-image:url("../img/banners/built-banner.jpeg");

  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

}

/* OVERLAY */
.nx-hero::before{
   content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(
    90deg,
    rgba(4,20,33,0.9) 30%,   /* 🔥 dark only left */
    rgba(4,20,33,0.6) 45%,   /* smooth fade */
    rgba(4,20,33,0.2) 60%,   /* lighter */
    rgba(4,20,33,0.05) 75%,  /* almost clear */
    transparent 85%          /* 🔥 right fully visible */
  );
}

/* CONTAINER */
.nx-container{
  position:relative;
  z-index:2;
  width:1200px;
  max-width:90%;
}

/* LEFT */
.nx-left{
  max-width:650px;
  color:#fff;
  max-width:800px;
}

/* TAG */
.nx-tag{
  border:1px solid #ff7a2f;
  padding:6px 14px;
  border-radius:20px;
  color:#ff7a2f;
  font-size:12px;
}

/* TITLE */
.nx-left h1{
  font-size:60px;
  margin:15px 0;
  line-height:1.15;
  font-weight:700;
}

.nx-left span{
  color:#ff7a2f;
}

/* TEXT */
.nx-left p{
  color:#9fb3c8;
  margin-top:15px;
  line-height:1.6;
}

/* BUTTONS */
.nx-buttons{
  margin-top:25px;
  display:flex;
  gap:15px;
}

.nx-btn{
  padding:12px 26px;
  border-radius:30px;
  text-decoration:none;
  font-size:14px;
  transition:0.3s;
}

.nx-primary{
  background:#ff7a2f;
  color:#fff;
}

.nx-outline{
  border:1px solid #ffffff30;
  color:#fff;
}

.nx-btn:hover{
  transform:translateY(-3px);
}

/* 🔥 FEATURE BAR (FINAL FIX) */
.nx-feature-bar{
 margin-top:35px;
 transform:scaleX(1.15);
  transform-origin:left;
  width:100%;
  max-width:1200px;   /* 🔥 width increase */

  padding:14px 22px;  /* 🔥 height decrease (slim) */

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

  gap:20px;

  border-radius:18px;

  background:linear-gradient(135deg,#0f2e50,#081a2b);
  border:1px solid rgba(255,255,255,0.15);

  box-shadow:0 10px 30px rgba(0,0,0,0.4);

  /* 🔥 center + extend */
  margin-left:0;
}

/* ITEM */
.nx-item{
  display:flex;
    align-items:center;
  gap:10px;
  flex:1;
}

/* ICON */
.nx-icon{
  width:28px;
  height:28px;
}

.nx-icon svg{
  width:100%;
  height:100%;
  fill:#ff7a2f;
}

/* TEXT */
.nx-item h4{
    font-size:12px;
  margin-bottom:2px;
}

.nx-item p{

  color:#9fb3c8;
   font-size:11px;
  line-height:1.3;
}

/* DIVIDER */
.nx-divider{
 width:1px;
  height:28px;
  background:rgba(255,255,255,0.2);
}
  /* ================= TRUST SECTION END================= */



  /* ================= PACKAGE SECTION================= */
.px-packaging{
  padding:80px;
  background:linear-gradient(135deg,#061a2c,#0b2c4a);
  color:#fff;
}

/* LAYOUT */
.px-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
}

/* LEFT */
.px-left{
  width:45%;
  height:420px;
  position:relative;
  border-radius:20px;
  overflow:hidden;
}

/* IMAGE */
.px-img{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease-in-out;
}

.px-img.active{
  opacity:1;
}

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

/* RIGHT */
.px-right{
  width:55%;
}

/* TAG */
.px-tag{
  color:#ff7a2f;
  margin-bottom:10px;
}

/* TITLE */
.px-right h2{
  font-size:42px;
}

.px-right span{
  color:#ff7a2f;
}

/* DESC */
.px-desc{
  margin-top:15px;
  color:#cbd5e1;
}

/* FEATURES */
.px-features{
  margin-top:25px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.px-feature{
  display:flex;
  gap:10px;
}

.px-feature svg{
  width:20px;
  fill:#ff7a2f;
}

/* CTA */
.px-cta{
  margin-top:30px;
  padding:15px 20px;
  border-radius:15px;
  background:rgba(255,255,255,0.05);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.px-cta button{
  background:#ff7a2f;
  border:none;
  padding:10px 20px;
  border-radius:20px;
  color:#fff;
  cursor:pointer;
}
  /* ================= PACKAGE SECTION END================= */


  .index-card-section{
  padding:80px 6%;
  background:linear-gradient(135deg,#061a2c,#0b2c4a);
  overflow:hidden;
  color:#fff;
}

/* HEADER */

.index-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:45px;
}

.index-card-tag{
  color:#ff7a2f;
  font-size:13px;
  letter-spacing:1px;
}

.index-card-title{
  font-size:42px;
  margin:10px 0;
  color:#fff;
}

.index-card-sub{
  color:#9fb3c8;
  max-width:550px;
  line-height:1.7;
}

.index-card-view{
  padding:12px 22px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:40px;
  color:#fff;
  text-decoration:none;
  transition:0.3s ease;
}

.index-card-view:hover{
  background:#ff7a2f;
  border-color:#ff7a2f;
}

/* SLIDER */

.index-card-slider{
  overflow:hidden;
  width:100%;
  max-width:980px;
  margin:auto;
  position:relative;
  padding:25px 20px;
  box-sizing:border-box;
}

.index-card-track{
    display:flex;
  gap:20px;
  transition:0.5s ease;
  width:max-content;
}

/* CARD */

.index-card-box{
width:300px;
  min-width:300px;

  background:#fff;
  border-radius:22px;
  overflow:hidden;

  color:#0b2c4a;

  box-shadow:0 15px 35px rgba(0,0,0,0.25);

  transition:0.4s ease;

  cursor:pointer;

  position:relative;
  z-index:1;
}

/* HOVER */

.index-card-box:hover{
  transform:translateY(-6px);
}

/* IMAGE */

.index-card-image{
   position:relative;
  height:165px;
}

.index-card-image img{
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
}

/* DATE */

.index-card-date{
  position:absolute;
  top:14px;
  left:14px;

  background:#ff7a2f;
  color:#fff;

  padding:7px 14px;

  border-radius:14px;

  font-size:12px;
  font-weight:600;
}

/* CONTENT */

.index-card-content{
 padding:15px;
}

.index-card-label{
  display:inline-block;

  background:#e6f0ff;
  color:#0b2c4a;

  padding:6px 14px;

  border-radius:30px;

  font-size:11px;
  font-weight:600;
}

.index-card-label.orange{
  background:#ffe4d6;
}

.index-card-label.green{
  background:#d6f5e8;
}

.index-card-content h3{
    margin:12px 0 8px;
  font-size:18px;
  line-height:1.5;
}

.index-card-content p{
  color:#64748b;
  font-size:14px;
  line-height:1.8;
  min-height:72px;
}

/* BUTTON */

.index-card-btn{
  display:inline-flex;
  align-items:center;

  margin-top:18px;
  padding:12px 22px;

  background:#f1f5f9;
  color:#0b2c4a;

  border-radius:40px;

  text-decoration:none;
  font-weight:600;

  transition:0.3s ease;
}

.index-card-btn:hover{
  background:#ff7a2f;
  color:#fff;
  transform:translateY(-2px);
}

/* ACTIVE BLUR EFFECT */

.index-card-slider.blur .index-card-box{
  filter:blur(4px);
  opacity:0.25;
  transform:scale(0.92);
  pointer-events:none;
}

.index-card-slider.blur .index-card-box.active{
 filter:blur(0);
  opacity:1;
  transform:scale(1.04);
  pointer-events:auto;
  z-index:10;

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

/* MOBILE */

@media(max-width:768px){

  .index-card-section{
    padding:70px 20px;
  }

  .index-card-title{
    font-size:32px;
  }

  .index-card-box{
     width:280px;
  min-width:280px;
  }

  .index-card-image{
    height:200px;
  }

}
  /* ================= BLOG SECTION END================= */
  
  
  
/* ================= HERO OG BACKGROUND ================= */

.hero-og {
  position: relative;
   padding: 50px 60px; /* reduced height */
  color: #fff;

  /* 🔥 BACKGROUND IMAGE */
  background: url("../img/hero-og-banner.jpeg")  75% center / cover no-repeat;
}

/* 🔥 DARK OVERLAY */
.hero-og::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

/* CONTENT ABOVE OVERLAY */
.hero-og-container {
  position: relative;
  z-index: 2;

  max-width: 1200px;
  margin: auto;
}

/* LEFT CONTENT */
.hero-og-left {
  max-width: 650px;
}

/* BADGE */
.hero-og-badge {
  font-size: 12px;
  border: 1px solid #ff7a2f;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 20px;
  color: #ff7a2f;
}

/* HEADING */
.hero-og-left h1 {
  font-size: 46px;
  line-height: 1.2;
}

.hero-og-left h1 span {
  color: #ff7a2f;
}

/* DESCRIPTION */
.hero-og-desc {
  margin: 20px 0;
  color: #9fb3c8;
  max-width: 500px;
}

/* FEATURES */
.hero-og-features {
  display: flex;
  gap: 25px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.hero-og-item {
  text-align: center;
  width: 120px;
}

/* ICON */
.hero-og-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 122, 47, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.hero-og-icon svg {
  width: 18px;
  height: 18px;
  fill: #ff7a2f;
}

.hero-og-item h4 {
  font-size: 14px;
  margin-top: 10px;
}

.hero-og-item p {
  font-size: 12px;
  color: #9fb3c8;
}

/* BUTTONS */
.hero-og-btns {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.hero-og-primary {
  background: #ff7a2f;
  padding: 12px 25px;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
}

.hero-og-outline {
  border: 1px solid #ffffff40;
  padding: 12px 25px;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
}

/* ❌ REMOVE RIGHT IMAGE COMPLETELY */
.hero-og-right {
  display: none;
}


/* ================= SElF DRILLING SECTION END================= */

/* ================= INDUSTRIES SECTION================= */
/* SECTION */
.industry-og{
  padding:80px;
  background:linear-gradient(135deg,#061a2c,#0b2c4a);
  color:#fff;
  text-align:center;
}

/* HEADER */
.industry-og-tag{
  color:#ff7a2f;
  font-size:13px;
}

.industry-og-header h2{
  font-size:38px;
  margin:10px 0;
}

.industry-og-header span{
  color:#ff7a2f;
}

.industry-og-sub{
  color:#9fb3c8;
  margin-bottom:50px;
}

/* GRID */
.industry-og-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  justify-items:center;
}

/* CARD */
.ind-card{
  width:320px;
  height:340px;
  perspective:1000px;
  cursor:pointer;
}

/* INNER */
.ind-card-inner{
  width:100%;
  height:100%;
  position:relative;
  transition:transform 0.6s;
  transform-style:preserve-3d;
}

/* FLIP */
.ind-card.flip .ind-card-inner{
  transform:rotateY(180deg);
}

/* FRONT + BACK */
.ind-card-front,
.ind-card-back{
  position:absolute;
  width:100%;
  height:100%;
  border-radius:18px;
  overflow:hidden;
  backface-visibility:hidden;
}

/* FRONT */
.ind-card-front{
  background:#0b2c4a;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.ind-card-front img{
  width:100%;
  height:200px;
  object-fit:cover;
}

.ind-content{
  padding:15px;
  text-align:left;
}

.ind-content h3{
  margin:5px 0;
}

.ind-content p{
  font-size:13px;
  color:#9fb3c8;
}

/* BACK */
.ind-card-back{
  background:#0b2c4a;
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:20px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.ind-card-back h3{
  color:#ff7a2f;
  margin-bottom:10px;
}

.ind-card-back p{
  color:#9fb3c8;
}

/* HOVER EFFECT */
.ind-card:hover{
  transform:translateY(-5px);
}
/* ================= INDUSTRIES SECTION END================= */

/* ================= REVIEW AND CONACT SECTION ================= */
.review-og{
  padding:80px;
  background:linear-gradient(135deg,#061a2c,#0b2c4a);
  color:#fff;
}

.review-og-container{
  display:flex;
  gap:50px;
}

/* LEFT */
.review-left{ width:50%; }

.review-tag{ color:#ff7a2f; font-size:13px; }

.review-left h2{
  font-size:36px;
  margin:10px 0;
}

.review-sub{
  color:#9fb3c8;
  margin-bottom:30px;
}

/* ===== SLIDER ===== */
.review-slider{
   overflow:hidden;
  width:100%;
  position:relative;
  cursor:pointer;
}

.review-track{
  display:flex;
  gap:20px;
  width:calc(320px * 6 + 20px * 5);
  animation:scrollLoop 20s linear infinite;
}

@keyframes scrollLoop{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

.review-slider.paused .review-track{
  animation-play-state:paused;
}

/* CARD */
.review-card{
   min-width:320px;
  max-width:320px;
  flex-shrink:0;

  padding:25px;
  border-radius:18px;

  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
}
.review-slider::-webkit-scrollbar{
  height:6px;
   display:none;
}

.review-slider::-webkit-scrollbar-thumb{
  background:#ff7a2f;
  border-radius:10px;
}
.review-slider::after,
.review-slider::before{
  display:none;
}

.quote{
  font-size:20px;
  color:#ff7a2f;
}

.stars{
  margin:10px 0;
  color:#ff7a2f;
}

.stars span{
  background:#1e3a5f;
  padding:3px 8px;
  border-radius:10px;
  color:#fff;
  margin-left:10px;
}

.user{
  display:flex;
  gap:10px;
  margin-top:15px;
  align-items:center;
}

.avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#ccc;
}

/* ===== GLASS FORM ===== */
.review-right{
  width:50%;
  padding:35px;
  border-radius:25px;

  background:linear-gradient(
    135deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02)
  );

  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.1);

  box-shadow:
    0 0 40px rgba(0,0,0,0.4),
    inset 0 0 20px rgba(255,255,255,0.03);
}

.review-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.review-form input,
.review-form select,
.review-form textarea{
  padding:14px;
  border-radius:12px;
  border:none;

  background:rgba(255,255,255,0.05);
  color:#fff;

  border:1px solid rgba(255,255,255,0.08);
  transition:0.3s;
}

.review-form input:focus,
.review-form select:focus,
.review-form textarea:focus{
  border:1px solid #ff7a2f;
  box-shadow:0 0 10px rgba(255,122,47,0.4);
}

.review-form textarea{
  grid-column:span 2;
  height:110px;
}

.review-form button{
  grid-column:span 2;
  padding:16px;

  border:none;
  border-radius:30px;

  background:linear-gradient(135deg,#ff7a2f,#ff5a00);
  color:#fff;

  cursor:pointer;
  transition:0.3s;
}

.review-form button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(255,122,47,0.5);
}
/* SELECT FIELD */
.review-form select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;

  background:rgba(255,255,255,0.05);
  color:#fff;

  border:1px solid rgba(255,255,255,0.15);
  outline:none;
  cursor:pointer;
}

/* OPTION STYLE */
.review-form select option{
  background:#0b2c4a;
  color:#fff;
}

/* HOVER SELECT */
.review-form select:focus{
  border-color:#ff6a2f;
  box-shadow:0 0 0 2px rgba(255,106,47,0.2);
}
/* ================= REVIEW AND CONACT SECTION END================= */



/* =================FAQ SECTION ================= */
.faq{
  padding:80px 5%;
  background:linear-gradient(135deg,#061a2c,#0b2c4a);
  color:#fff;
}

/* HEADER */
.faq-header{text-align:center;margin-bottom:50px;}
.faq-header h2{font-size:42px;}
.faq-header span{color:#ff7a2f;}
.faq-header p{color:#9fb3c8;margin-top:10px;}

.faq-pill{
  padding:6px 14px;
  border-radius:20px;
  background:#0f2a44;
}

/* LAYOUT */
.faq-grid{
  display:flex;
  gap:20px;
}

.faq-col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* CARD */
.faq-item{
  background:rgba(255,255,255,0.05);
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  transition:.3s;
}

/* ACTIVE */
.faq-item.active{
  border:1px solid #ff7a2f;
  box-shadow:0 0 20px rgba(255,122,47,.4);
}

/* QUESTION */
.faq-question{
  width:100%;
  padding:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}

.faq-left{
  display:flex;
  align-items:center;
  gap:12px;
}

/* ICON */
.faq-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

/* COLORS */
.blue{background:#3b82f6;}
.orange{background:#ff7a2f;}
.green{background:#22c55e;}
.cyan{background:#06b6d4;}
.purple{background:#a855f7;}
.pink{background:#ec4899;}
.yellow{background:#facc15;}
.teal{background:#14b8a6;}

/* ARROW */
.faq-arrow{
  width:10px;height:10px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
  transition:.3s;
}
.faq-item.active .faq-arrow{
  transform:rotate(-135deg);
}

/* ANSWER */
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}
.faq-answer div{
  padding:0 18px 18px;
  color:#9fb3c8;
}

/* ================= FAQ SECTION END================= */

/* ================= FOOTER SECTION ================= */
/* FONT (IMPORTANT) */

.sxfoot-footer{
  font-family: 'Poppins', sans-serif;
  background:linear-gradient(135deg,#061a2c,#0b2c4a);
  color:#fff;
  padding-top:70px;
}

/* GRID */
.sxfoot-container{
  display:grid;
  grid-template-columns:1.2fr 1fr 1.3fr;
  gap:50px;
  padding:0 6%;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* COLUMN */
.sxfoot-col{
  position:relative;
  padding-bottom:40px;
}

/* DIVIDER */
.sxfoot-col:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-25px;
  top:0;
  height:100%;
  width:1px;
  background:rgba(255,255,255,0.08);
}

/* LOGO */
.sxfoot-logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.sxfoot-logo img{ width:62px;
  height:auto;
  object-fit:contain;

  border-radius:4px; /* 🔥 soft edges */
  
  background:#fff; /* logo clarity */
  padding:0px;

  box-shadow:
    0 5px 15px rgba(0,0,0,0.4);}
.sxfoot-logo h2{font-size:16px;
  font-weight:600;
  letter-spacing:0.5px;}
.sxfoot-logo span{color:#ff7a2f;font-size:16px;}

/* TEXT */
.sxfoot-tagline{
  color:#9fb3c8;
  margin:10px 0;
}
.sxfoot-desc{
  color:#9fb3c8;
  line-height:1.7;
  margin-bottom:20px;
}

/* SOCIAL */
.sxfoot-socials{
  display:flex;
  gap:14px;
}
.sxfoot-socials a{
  width:42px;height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.05);
  color:#fff;
  transition:.3s;
  text-decoration: none;
}
.sxfoot-socials a:hover{
  background:#ff7a2f;
  box-shadow:0 0 12px rgba(255,122,47,0.7);
  text-decoration: none;
}

/* HEADINGS */
.sxfoot-col h3{
  font-size:16px;
  margin-bottom:20px;
  position:relative;
}
.sxfoot-col h3::after{
  content:"";
  width:28px;
  height:3px;
  background:#ff7a2f;
  position:absolute;
  left:0;
  bottom:-8px;
}

/* LINKS */
.sxfoot-links li{
  margin:12px 0;
  color:#9fb3c8;
  cursor:pointer;
  transition:.3s;

}
.sxfoot-links a{
  text-decoration:none;
  color:#fff;
}

.sxfoot-links a:hover{
  text-decoration:none;
}
.sxfoot-links ul li a{
text-decoration: none;
}
.sxfoot-links li span{
  color:#ff7a2f;
  margin-right:8px;
}
.sxfoot-links li:hover{
  color:#fff;
  transform:translateX(6px);
}

/* CONTACT */
.sxfoot-contact-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:15px;
  color:#9fb3c8;
}
.sxfoot-contact-item i{
  color:#ff7a2f;
  margin-top:4px;
}

/* ADDRESS */
.sxfoot-address h4{
  margin-top:20px;
  color:#ff7a2f;
  display:flex;
  align-items:center;
  font-size:16px;
  gap:8px;
}
.sxfoot-address p{
  color:#9fb3c8;
  margin-top:8px;
  line-height:1.6;
}

/* BOTTOM */
.sxfoot-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 6%;
  font-size:14px;
  color:#9fb3c8;
}
.sxfoot-bottom span{
  color:#ff7a2f;
}
.sxfoot-bottom-links{
  display:flex;
  gap:20px;
}
.sxfoot-bottom-links a{
  color:#9fb3c8;
  text-decoration:none;
}
.sxfoot-bottom-links a:hover{
  color:#ff7a2f;
}
/* ================= FOOTER SECTION END================= */


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




/* ================= PERFECT HERO ================= */

.abouts-hero-perfect{
  position:relative;
min-height: 230px;
  width:100%;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;     /* 🔥 remove gap */
  display:block;

  /* 🔥 FULL IMAGE */
  background: url("img/banners/about-banner.jpeg") no-repeat bottom;
 background-color: #061a2c; 
  background-size:contain;

}


.screws-hero-perfect{
  position:relative;
min-height: 230px;
  width:100%;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;     /* 🔥 remove gap */
  display:block;

  /* 🔥 FULL IMAGE */
  background: url("img/banners/screws-banner.png") no-repeat bottom;
 background-color: #061a2c; 
  background-size:contain;

}

.drilling-hero-perfect{
  position:relative;
min-height: 230px;
  width:100%;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;     /* 🔥 remove gap */
  display:block;

  /* 🔥 FULL IMAGE */
  background: url("img/banners/drilling-banner.png") no-repeat bottom;
 background-color: #061a2c; 
  background-size:contain;

}
.about-hero-perfect{
  position:relative;
min-height: 230px;
  width:100%;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;     /* 🔥 remove gap */
  display:block;

  /* 🔥 FULL IMAGE */
  background: url("img/banners/blog-banner.png") no-repeat bottom;
 background-color: #061a2c; 
  background-size:contain;

}
.contact-hero-perfect{
  position:relative;
min-height: 230px;
  width:100%;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;     /* 🔥 remove gap */
  display:block;

  /* 🔥 FULL IMAGE */
  background: url("img/banners/contact-banner.png") no-repeat bottom;
 background-color: #061a2c; 
  background-size:contain;

}





/* LEFT SIDE EXACT POSITION */
.hero-left{
  position:absolute;
  left:80px;   /* 🔥 exact spacing */
  top:70%;
  transform:translateY(-50%);
  color:#fff;
}

.hero-left h1{
  font-size:42px;
  font-weight:700;
  margin-bottom:8px;
}

.breadcrumb{
   display: flex;
  align-items: center;
  gap: 8px;            /* 🔥 spacing fix */
  font-size: 14px;
  color: #cbd5e1;
  margin-top: 6px;
}
.breadcrumb a{
  text-decoration: none;
   color: #cbd5e1;
     font-size: 16px;
     
}

.breadcrumb .active{
  color:#ff7a2f;
}

/* RIGHT SIDE EXACT POSITION */
.hero-right{
  position:absolute;
  right:80px;   /* 🔥 exact spacing */
  top:70%;
  transform:translateY(-50%);
}

.hero-right-box{
  border-left:3px solid #ff7a2f;
  padding-left:18px;
  max-width:420px;
}

.hero-right-box h5{
  font-size:18px;
  font-weight:600;
  color:#fff;
  margin-bottom:6px;
}

.hero-right-box p{
  font-size:13px;
  color:#d1d5db;
  line-height:1.5;
}
/* ABOUT SECTION  */

.about-clean{
  background:linear-gradient(135deg,#061a2c,#0b2c4a); /* 🔥 your theme */
  margin-top:-1px;
   padding: clamp(60px, 8vw, 100px) 0;
}

/* LEFT IMAGE */
.left-img-wrap{
 position:relative;
  width:100%;
  max-width:520px;
  margin:auto;
}

/* RED SHADOW */
.red-bg{
  position:absolute;
  left:-15px;
  bottom:-15px;
 box-shadow:0 10px 30px rgba(255,122,47,0.4);
  width:85%;          /* 🔥 reduced width */
  height:85%;         /* 🔥 reduced height */

  background:#ff7a2f; /* 🔥 orange color */
  border-radius:14px;

  z-index:1;
}

/* IMAGE */
.main-img{
    position:relative;
  width:100%;
  display:block;       /* 🔥 FIX */
  border-radius:14px;
  z-index:2;
}

/* RIGHT CONTENT */
.right-content{
  max-width:520px;
  color:#fff;
  margin-top: 20px;
}

/* TAG */
.about-tag{
color:#ff7a2f;
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
}

/* TITLE */
.right-content h2{
 font-size:34px;   /* 🔥 reduced from 42px */
  font-weight:700;
  margin-bottom:12px;
  line-height:1.3;
    letter-spacing:0.3px;
}

/* TEXT */
.right-content p{
  color:#9fb3c8;   /* 🔥 softer bluish text */
  line-height:1.7;
  font-size:14px;

}

/* HIGHLIGHT */
.highlight{
  color:#ff7a2f;   /* 🔥 orange */
  font-weight:600;

}

/* BADGE */
.badge-box{
  margin-top:15px;
   background:rgba(255,255,255,0.08);
     color:#cbd5e1;   /* 🔥 softer text */
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
  backdrop-filter:blur(6px);
  display:inline-block;
}
/* SECTION BG */
.about-exact{
   background:linear-gradient(135deg,#061a2c,#0b2c4a);
}

/* IMAGE WRAPPER */
.about-img-box{
  position:relative;
  max-width:520px;
}

/* RED SHAPE */
.about-red-bg{
  position:absolute;
  left:-20px;
  bottom:-20px;
  width:100%;
  height:100%;
  background:#e11d2e;
  border-radius:14px;
  z-index:1;
}

/* IMAGE */
.about-img{
  position:relative;
  border-radius:14px;
  z-index:2;
  box-shadow:0 15px 40px rgba(0,0,0,0.2);
}

/* TEXT */
.about-tag{
color:#ff7a2f;
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  margin-bottom:8px;
}

.about-title{
  font-size:44px;
  font-weight:800;
  color:#ffffff;   /* ✅ FIX */
  line-height:1.2;
  margin-bottom:18px;
  text-shadow:0 0 20px rgba(255,255,255,0.05);
}

/* PARAGRAPH */
.about-text{
 font-size:15px;
  color:#9fb3c8;   /* ✅ FIX (bluish text) */
  line-height:1.7;
  margin-bottom:12px;
}

/* HIGHLIGHT */
.high{
  color:#ff7a2f;
  font-weight:600;
}

/* BADGE */
.about-badge{
   margin-top:20px;
  background:rgba(255,255,255,0.08);  /* ✅ FIX */
  backdrop-filter:blur(6px);
  padding:12px 18px;
  border-radius:10px;
  font-weight:500;
  color:#cbd5e1;   /* ✅ FIX */
  max-width:480px;
}

.flag{
  font-size:18px;
}
/* 🔥 FORCE ROW TO WORK */
.about-row{
  display:flex !important;
  align-items:center !important;
}

/* 🔥 FORCE COLUMNS SIDE BY SIDE */
.about-col{
  width:50% !important;
}

/* MOBILE FIX */
@media (max-width:768px){
  .about-row{
    flex-direction:column;
  }


  .about-col{
    width:100% !important;
  }
}


.icon-circle{

  width:60px;
  height:60px;

  border-radius:50%;

  background:rgba(255,122,47,0.12);

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

  color:#ff7a2f;

  flex-shrink:0;
}

.icon-circle svg{

  width:28px;
  height:28px;
}

/* ================= BLOGS================= */
/* ===== SECTION ===== */
.insights-section{
    background: linear-gradient(135deg,#061a2c,#0b2c4a);
  padding:60px 0;
}
.tit-cl{
	background-color:#ff6a2f;
}

/* ===== FEATURED CARD ===== */
.featured-card{
  background:#0f2f4f;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.featured-blog{
  background:#173a5e;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.featured-blog img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.featured-content{
  padding:30px;
  color:#fff;
}
.featured-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.featured-card h3{
  color:#fff;
}

.featured-card p{
  color:#cbd5e1;
}

/* ===== BLOG CARD ===== */
.blog-card{
  background:#0f2f4f;
  border-radius:14px;
  overflow:hidden;
  transition:.3s;
  box-shadow:0 5px 18px rgba(0,0,0,0.4);
  height:100%;
}

.blog-card img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

/* ===== TEXT ===== */
.blog-card h6{
   color:#fff;
  font-weight:600;

}

.blog-card p{
  color:#cbd5e1;
}
.read-more{
  color:#ff7a2f;
  font-weight:600;
  text-decoration:none;
}

.read-more:hover{
   color:#ffa366;
}
.read-more::after,
.read-full-btn::after{
  content:" →";
  transition:0.3s;
}

.read-more:hover::after,
.read-full-btn:hover::after{
  margin-left:5px;
}
.insight-tag,
.blog-tag,
.tag-comparison,
.tag-install,
.tag-screw {
  background:#ff7a2f !important;
  color:#fff !important;
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  display:inline-block;
}
/* ===== BADGES ===== */
.badge{
  font-size:11px;
  padding:5px 8px;
   background:#ff7a2f !important;
}


/* ===== READ MORE ===== */
.read-more{
  text-decoration:none;
  font-weight:500;
  color:#ff7a2f;
}

.read-more:hover{
  color:#fff;
}

/* ===== PAGINATION ===== */
.pagination .page-link{
  width: 48px;
  height: 48px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  border-radius: 50% !important; /* force circle */
  
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 !important; /* 🔥 remove bootstrap padding */
  margin: 0;

  background: #0b2c4a;
  color: #fff;
  border: none;

  font-weight: 600;
  font-size: 16px;

  line-height: 1; /* 🔥 avoid vertical shift */

  transition: 0.3s ease;
}
.pagination{
  gap: 10px; /* spacing between circles */
}

.pagination .page-item.active .page-link{
  background: #ff7a2f;
  color: #fff;
}
.pagination .page-link:hover{
  background: #1f3f73;
}
.blog-card h6{
  color:#ffffff !important;
}
.card,
.bg-light{
  background:#0b2c4a !important;
  color:#fff;
}
.date-col{
	
	color:white;
}

.blog-card p{
  color:#cbd5e1 !important;
}
.insight-tag{
 display:inline-block;
  background:#2563eb;
  color:#fff;
  padding:5px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
}
.read-full-btn{
    background:#ff7a2f;
  color:#fff;
  padding:10px 18px;
  border-radius:8px;
  text-decoration:none;
  display:inline-block;
  font-weight:500;
  transition:0.3s ease;
  border:none;
}
#blogContainer{
  transition: opacity 0.3s ease;
}

.read-full-btn:hover{
    background:#ffa366;
  color:#fff;
}
.blog-tag{
  background:#475569;
  color:#fff;
  padding:4px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  margin:10px 0px 10px 0px;
}
.card {
  background-color: #fff;
}
.blog-card .date{
  color:#94a3b8;
}

.blog-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px;

}

/* ===== ANIMATION ===== */
.blog-card{
  animation:fadeUp .4s ease;
    background:#0b2c4a;
  border-radius:16px;
  padding:15px;
  border:1px solid rgba(255,255,255,0.08);
  transition:0.3s;
}

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

/* ===== POPUP MODAL ===== */
.blog-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px); /* 🔥 background blur */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* ACTIVE STATE */
.blog-modal.active{
  display: flex;
}

/* MODAL BOX */
.blog-modal-content{
  width: 90%;
  max-width: 900px;
  max-height: 85vh;
  background: #0b2c4a;
  border-radius: 16px;
  overflow: hidden;
  animation: popupFade 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* SCROLL AREA */
.blog-modal-body{
  padding: 20px;
  overflow-y: auto; /* 🔥 scroll inside */
  color: #fff;
}

/* IMAGE */
.blog-modal img{
  width: 100%;
  height: 250px;
  object-fit: cover;
}

/* CLOSE BUTTON */
.blog-close{
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

/* ANIMATION */
@keyframes popupFade{
  from{transform: scale(0.9); opacity:0;}
  to{transform: scale(1); opacity:1;}
}
/* ===== FEATURED ===== */
.featured{
  background:#0b2c4a;
  border-radius:20px;
  padding:20px;
  margin-bottom:40px;
}
.featured img{
  width:100%;
  border-radius:15px;
}
.featured h2{color:#fff;}
.featured p{color:#cbd5e1;}

/* ===== BLOG CARD ===== */
.blog-card{
  background:#0b2c4a;
  border-radius:16px;
  padding:15px;
  color:#fff;
  height:100%;
  transition:0.3s;
}
.blog-card:hover{
  transform:translateY(-6px);
}
.blog-card img{
  width:100%;
  height:180px;
object-fit: fill;
  border-radius:12px;
}

/* TAG */
.blog-tag{
  background:#ff7a2f;
  padding:4px 10px;
  border-radius:6px;
  font-size:11px;
  display:inline-block;
  margin:10px 0;
}

/* TEXT */
.blog-card h6{color:#fff;}
.blog-card p{color:#cbd5e1;}

/* LINK */
.read-more{
  color:#ff7a2f;
  text-decoration:none;
}
.read-more:hover{
  color:#ffa366;
}

/* ===== MODAL ===== */
.blog-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.blog-modal.active{
  display:flex;
}

/* MODAL STRUCTURE */
.blog-modal-content{
  width:95%;
  max-width:900px;
  height:85vh;
  background:#0b2c4a;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* IMAGE */
.blog-modal img{
  width:100%;
  height:220px;
  object-fit:cover;
  flex-shrink:0;
}

/* SCROLL CONTENT */
.blog-modal-body{
  padding:20px;
  overflow-y:auto;
  color:#fff;
  flex:1;
}

/* CLOSE */
.blog-close{
  position:absolute;
  top:10px;
  right:15px;
  font-size:28px;
  color:#fff;
  cursor:pointer;
}

/* ===== PAGINATION (CIRCLE) ===== */
.pagination .page-link{
  width:45px;
  height:45px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:#0b2c4a;
  color:#fff;
  border:none;
  margin:0 6px;
}
.pagination .page-item.active .page-link{
  background:#ff7a2f;
}
.pagination .page-item{
  display: flex;
}
.pagination .page-link:hover{
  background:#1f3f73;
}

/* MOBILE FIX */
@media(max-width:768px){
  .blog-modal img{
    height:180px;
  }
}
/* ================= BLOGS ================= */


/* ================= WHY DIFFERENT ================= */
/* SECTION */
.wd-section{
 background:linear-gradient(135deg,#061a2c,#0b2c4a);
  padding-top:80px;
  padding-bottom:80px;
    padding:60px 0 50px; /* 🔥 reduced bottom gap */
}

/* TITLE */
.wd-title{
  font-size:30px;
  font-weight:700;
  color:#ffffff;
  letter-spacing:1px;
  text-align:center;
  margin-bottom:25px !important; /* 🔥 reduce gap */
  position:relative;
}

/* UNDERLINE */
.wd-underline{
  display:block;
  width:60px;
  height:3px;
  background:#ff7a2f;
  margin:10px auto 0;
  border-radius:10px;
}

/* CARD */
.wd-card{
    background:rgba(255,255,255,0.06); /* 🔥 glass look */
  backdrop-filter:blur(6px);
  border-radius:14px;
  padding:25px 15px;
  box-shadow:0 8px 25px rgba(0,0,0,0.25);
  transition:0.3s ease;
  height:100%;
  

  /* ✅ visible by default */
  opacity:1;
  transform:translateY(0);
}
.wd-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,0.4);
}
/* ICON */
.wd-icon{
  width:65px;
  height:65px;
  margin:0 auto 15px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  color:#fff;
}

/* COLORS */
.wd-blue{
 background:#2f4f7f;
}

.wd-red{
  background:#ff7a2f; /* 🔥 changed to orange */
}

/* TEXT */
.wd-card h5{
  font-size:16px;
  font-weight:600;
  margin-bottom:8px;
  color:#ffffff;
}

.wd-card p{
  font-size:13px;
   color:#cbd5e1;
  line-height:1.5;
}
/* 🔥 FORCE GRID BACK TO NORMAL */
.wd-row-fix{
  display:flex !important;
  flex-wrap:wrap !important;
}

/* 🔥 5 CARDS PERFECT */
.wd-col-fix{
  width:20% !important;
  padding:0 10px;
}
.wd-section .row{
  margin-top:10px; /* 🔥 reduce space between title & cards */
}
/* TABLET */
@media (max-width:992px){
  .wd-col-fix{
    width:33.33% !important;
  }
}

/* MOBILE */
@media (max-width:768px){
  .wd-col-fix{
    width:50% !important;
  }
}

/* SMALL MOBILE */
@media (max-width:480px){
  .wd-col-fix{
    width:100% !important;
  }
}

.mv-section{
  background:linear-gradient(135deg,#061a2c,#0b2c4a);
  padding:80px 0;
}
/* 🔥 TOP ICON ONLY (NO FULL BAR) */
.mv-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

/* SMALL ORANGE ICON */
.mv-top i{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#ff7a2f;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}

/* OPTIONAL: subtle line (premium look) */
.mv-line{
  flex:1;
  height:2px;
  background:linear-gradient(to right, #ff7a2f, transparent);
  opacity:0.4;
}
/* CARD STYLE */
.mv-card{
  background:rgba(255,255,255,0.04);   /* glass dark */
  backdrop-filter:blur(8px);
  border-radius:16px;
  padding:30px;
  height:100%;
  border:1px solid rgba(255,255,255,0.05);
  transition:0.3s ease;
}

.mv-card:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 40px rgba(0,0,0,0.4);
}

/* TEXT FIX */
.mv-title{
  color:#ffffff;
}

.mv-card p{
  color:#cbd5e1;
}

.mv-tag{
  color:#ff7a2f;
}






/* ===== SECTION ===== */
.cvx-section{
  background:linear-gradient(135deg,#061a2c,#0b2c4a);
  padding:80px 0;
}

/* TITLE */
.cvx-title{
  font-size:28px;
  font-weight:700;
  color:#fff;	
  letter-spacing:1px;
}

.cvx-underline{
  display:block;
  width:60px;
  height:3px;
  background:#ff7a2f;
  margin:10px auto 0;
  border-radius:10px;
}

/* CARD */
.cvx-card{
   background:rgba(255,255,255,0.06);
  backdrop-filter:blur(8px);
  border-radius:14px;
  padding:25px 15px;
  box-shadow:0 8px 25px rgba(0,0,0,0.3);
  transition:0.3s ease;
}

/* HOVER */
.cvx-card:hover{
  transform:translateY(-8px);
  box-shadow:0 12px 30px rgba(0,0,0,0.5);
}

/* ICON */
.cvx-icon{
  width:65px;
  height:65px;
  margin:0 auto 15px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  color:#fff;
}

/* COLORS */
.cvx-blue{
  background:#2f4f7f;
}

.cvx-orange{
  background:#2f4f7f;
}

.cvx-india{
  font-size:30px;
}

/* TEXT */
.cvx-card h6{
  font-size:15px;
  font-weight:600;
  color:#ffffff;
  margin-bottom:8px;
}

.cvx-card p{
  font-size:13px;
  color:#cbd5e1;
  line-height:1.5;
}

/* RESPONSIVE */
@media(max-width:768px){
  .cvx-title{
    font-size:24px;
	  color:#ffffff;
  }
}

.sxstats-section{
  background:linear-gradient(135deg,#0a2a47,#123d6b);
  position:relative;
  color:#fff;
  overflow:hidden;
  padding:40px 0;
}

/* subtle right image overlay (optional) */
.sxstats-section::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:40%;
  height:100%;
  background:url('https://images.unsplash.com/photo-1581093458791-9d8c8c57f54b?auto=format&fit=crop&w=900&q=80') no-repeat center;
  background-size:cover;
  opacity:0.08;
}

/* ITEMS */
.sxstats-item{
   padding:10px 5px;
  position:relative;
}

/* divider lines */
.sxstats-item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:25%;
  width:1px;
  height:50%;
  background:rgba(255,255,255,0.2);
}

/* MOBILE FIX */
@media(max-width:768px){
  .sxstats-item::after{
    display:none;
  }
}

/* COUNT NUMBER */
.sxstats-count{
  font-size:32px;
  font-weight:700;
  margin-bottom:5px;
}

/* TEXT */
.sxstats-item p{
  font-size:14px;
  color:#cbd5e1;
}

.sxstats-count::after{
  content:"+";
  margin-left:2px;
}

/* ================= ABOUT PAGE END================= */






/* ================= FLOSTING BUTTON================= */

/* FLOAT BUTTON WRAPPER */
.float-buttons{
  position:fixed;
  right:20px;
  bottom:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:999;
}

/* WHATSAPP */
.whatsapp-btn{
  width:55px;
  height:55px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  text-decoration:none;
  box-shadow:0 5px 20px rgba(0,0,0,0.3);
  transition:0.3s;
}

.whatsapp-btn:hover{
  transform:scale(1.1);
}

/* SCROLL TOP */
.scroll-top-btn{
  width:50px;
  height:50px;
  border:none;
  border-radius:50%;
  background:#ff7a2f;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  display:none;
  box-shadow:0 5px 20px rgba(0,0,0,0.3);
  transition:0.3s;
}

.scroll-top-btn:hover{
  transform:scale(1.1);
}

/* SHOW BUTTON */
.scroll-top-btn.show{
  display:flex;
  align-items:center;
  justify-content:center;
}


/* ================= FLOATING BUTTON================= */





/* ================= RESPONSIVE SECTION================= */
/* ================= HAMBURGER ================= */
/* ================= HAMBURGER ================= */
.sxnav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.sxnav-hamburger span {
  width: 25px;
  height: 3px;
  background: #fff;
  transition: 0.3s;
}

/* ACTIVE ANIMATION */
.sxnav-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.sxnav-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.sxnav-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* MOBILE */
@media (max-width: 900px) {

  .sxnav-menu {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(10px);

    flex-direction: column;
    align-items: center;
    gap: 20px;

    padding: 25px 0;

    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: 0.3s;
  }

  .sxnav-menu.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }

  .sxnav-menu li {
    font-size: 16px;
  }

  .sxnav-desktop-btn {
    display: none;
  }

  .sxnav-hamburger {
    display: flex;
  }

  .sxnav-menu::after {
    content: "Get a Quote →";
    display: block;
    margin-top: 10px;
    padding: 10px 20px;
    background: #ff6a2f;
    color: #fff;
    border-radius: 25px;
    font-size: 14px;
  }
}

/* ================= HAMBURGER END ================= */




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



/* ================= HERO END ================= */


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

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

/* ================= Screws Page ================= */
/* SECTION */
.sxp-section{
  background:#f4f6f9;
}

/* CARD */
.sxp-card{
  background:#fff;
  border-radius:16px;
  padding:20px;
  text-align:center;
  cursor:pointer;
  transition:0.3s;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.sxp-card img{
  height:160px;
  object-fit:contain;
  margin-bottom:10px;
}

.sxp-card h5{
  font-size:18px;
  color:#0b2c4a;
}

/* HOVER EFFECT */
.sxp-card:hover{
  transform:translateY(-8px);
}

/* ================= POPUP ================= */
.sxp-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:0.3s;
  z-index:9999;
}

.sxp-popup.active{
  opacity:1;
  visibility:visible;
}

/* BOX */
.sxp-popup-box{
  background:linear-gradient(135deg,#0b2c4a,#081f35);
  color:#fff;
  width:90%;
  max-width:500px;
  padding:30px;
  border-radius:20px;
  position:relative;
  animation:pop 0.3s ease;
}

@keyframes pop{
  from{transform:scale(0.8);opacity:0;}
  to{transform:scale(1);opacity:1;}
}

/* CLOSE */
.sxp-close{
  position:absolute;
  top:15px;
  right:20px;
  font-size:20px;
  cursor:pointer;
}

/* CONTENT */
.sxp-popup-box h3{
  margin-bottom:10px;
}

.sxp-popup-box p{
  color:#cbd5e1;
}

.sxp-popup-box ul{
  margin:15px 0;
  padding:0;
  list-style:none;
}

.sxp-popup-box li{
  margin-bottom:5px;
}

/* BUTTON */
.sxp-popup-box button{
  background:#ff6a2f;
  border:none;
  padding:10px 20px;
  border-radius:25px;
  color:#fff;
}

/* CARD */
.sxpp-card{
  background:#fff;
  padding:20px;
  border-radius:16px;
  text-align:center;
  cursor:pointer;
  transition:0.3s;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.sxpp-card img{
  height:160px;
  object-fit:contain;
}

.sxpp-card h5{
  margin-top:10px;
  color:#0b2c4a;
}

/* ================= POPUP ================= */
.sxpp-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:0.3s;
  z-index:9999;
}

.sxpp-popup.active{
  opacity:1;
  visibility:visible;
}

/* BOX */
.sxpp-box{
  width:90%;
  max-width:850px;
  background:linear-gradient(135deg,#0b2c4a,#081f35);
  border-radius:20px;
  padding:30px;
  color:#fff;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}

/* CLOSE */
.sxpp-close{
  position:absolute;
  right:20px;
  top:15px;
  font-size:20px;
  cursor:pointer;
}

/* IMAGE */
#sxppImg img{
  width:100%;
  border-radius:12px;
  object-fit:contain;
}

/* CONTENT */
#sxppContent h3{
  font-size:26px;
}

#sxppContent p{
  color:#cbd5e1;
}

#sxppContent ul{
  list-style:none;
  padding:0;
  margin-top:10px;
}

#sxppContent li{
  margin-bottom:8px;
  position:relative;
  padding-left:20px;
}

#sxppContent li::before{
  content:"✔";
  color:#22c55e;
  position:absolute;
  left:0;
}

/* BUTTONS */
.sxpp-actions{
  margin-top:20px;
  display:flex;
  gap:15px;
}

.sxpp-btn{
  padding:10px 20px;
  border-radius:25px;
  text-decoration:none;
  color:#fff;
  font-size:14px;
}

.sxpp-btn.whats{
  background:#25D366;
}

.sxpp-btn.call{
  background:#ff6a2f;
}

/* SCREW PAGE BROCHURE BUTTON */
.screw-brochure-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 24px;
  border-radius: 30px;

  background: linear-gradient(90deg,#ff7a2f,#ff5722);
  color: #fff;
  text-decoration: none;

  font-size: 14px;
  font-weight: 500;

  box-shadow: 0 8px 20px rgba(255,106,47,0.3);
  transition: 0.3s ease;
}

.screw-brochure-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(255,106,47,0.5);
}

/* WRAPPER */
.screw-head-wrap{
  position: relative;
  text-align: center;
}

/* KEEP TITLE PERFECT CENTER */
.screw-head-wrap .wd-title{
  margin: 0 auto;
}

/* BUTTON RIGHT SIDE */
.screw-head-wrap .screw-brochure-btn{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* BUTTON STYLE */
.screw-brochure-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 24px;
  border-radius: 30px;

  background: linear-gradient(90deg,#ff7a2f,#ff5722);
  color: #fff;
  text-decoration: none;

  font-size: 14px;
  font-weight: 500;

  box-shadow: 0 8px 20px rgba(255,106,47,0.3);
  transition: 0.3s ease;
}

.screw-brochure-btn:hover{
  transform: translateY(-50%) translateY(-3px);
  box-shadow: 0 15px 35px rgba(255,106,47,0.5);
}
.screw-brochure-btn i{
  transition: 0.3s;
}

.screw-brochure-btn:hover i{
  transform: translateY(3px);
}
/* ================= Screws Page================= */

/* =================Contact Page================= */

/* ================= SECTION ================= */
.contact-section{
  padding:80px 0;
  margin-top:30px;
}
/* ===== CUSTOM SELECT FIX ===== */
.custom-select-box{
  position:relative;
  z-index:20;
}

.select-selected{
  padding:12px;
  border-radius:12px;
  color:#fff;

  background: rgba(255,255,255,0.08);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 0 12px rgba(0,0,0,0.3);
}

/* DROPDOWN */
.select-options{
  position:absolute;
  top:110%;
  left:0;
  width:100%;

  background:#0b2c4a; /* 🔥 solid color */
  border-radius:12px;

  box-shadow:0 15px 40px rgba(0,0,0,0.6);

  display:none;
  overflow:hidden;
}

/* OPTION */
.select-options div{
  padding:12px;
  color:#fff;
  transition:0.3s;
}

.select-options div:hover{
  background:#ff7a2f;
  color:#fff;
}

/* SHOW */
.custom-select-box.active .select-options{
  display:block;
}
/* ================= GLASS CARD ================= */
.ultra-card{
  position:relative;
  border-radius:20px;
  padding:25px;

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);

  border:1px solid rgba(255,255,255,0.15);

  box-shadow:
    0 20px 60px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.15);

  transition:0.4s;
}

/* GLOW BORDER */
.ultra-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(120deg,#0d6efd,#ff7a2f);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;

  opacity:0;
  transition:0.4s;
}

.ultra-card:hover::before{
  opacity:1;
}

.ultra-card:hover{
  transform:translateY(-8px) scale(1.02);
}

/* ================= CARD HEADER ================= */
.ultra-header{
  display:flex;
  gap:15px;
  align-items:center;
  margin-bottom:20px;
}

.ultra-header h4{
  margin:0;
  font-weight:600;
}

.ultra-header p{
  margin:0;
  font-size:13px;
  color:#cbd5e1;
}

/* ================= ICON ================= */
.ultra-icon{
   width:72px;
  height:72px;

  min-width:72px;

  border-radius:18px;

  background:rgba(255,255,255,0.03);

  border:1px solid rgba(255,122,47,0.25);

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

  position:relative;

  overflow:hidden;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.25);

  transform:rotate(-8deg);
}

.ultra-icon::before{

  content:"";

  position:absolute;

  inset:8px;

  border-radius:12px;

  border:1px solid rgba(255,255,255,0.05);
}
.ultra-icon svg{

  width:34px;
  height:34px;

  stroke:#ff7a2f;

  stroke-width:1.8;

  transform:rotate(8deg);
}


.ultra-row svg{

  width:24px;
  height:24px;

  color:#ff7a2f;   /* OR white */

  stroke:currentColor;

  flex-shrink:0;
}

/* ================= INFO ROW ================= */
.ultra-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px dashed rgba(255,255,255,0.1);
  transition:0.3s;
}

.ultra-row:last-child{
  border-bottom:none;
}

.ultra-row:hover{
  transform:translateX(6px);
}

.ultra-row svg{
  width:18px;
  height:18px;
  stroke:#ff7a2f;
}

.ultra-row span{
  font-size:14px;
  color:#e2e8f0;
}

/* ================= MAP CARD ================= */
.contact-card{
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(15px);
  border-radius:16px;
  padding:20px;
  border:1px solid rgba(255,255,255,0.15);
}

.map-card{
   display:flex;
  flex-direction:column;
  gap:20px;
}

.map-top .btn-primary-custom{
  white-space:nowrap;
  text-decoration:none;
}
.map-frame iframe{
  width:100%;
  border-radius:12px;
}
.row.g-4{
  align-items: stretch; /* 🔥 important */
}
.trust-card{
  height:100%;
}
.map-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
}

.small-text{
  color:#cbd5e1;
}

/* ================= MAP BUTTON ================= */
.btn-primary-custom{
  background:linear-gradient(135deg,#0d6efd,#4f8cff);
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:25px;
  transition:0.3s;
}

.btn-primary-custom:hover{
  background:#ff7a2f;
  box-shadow:0 0 15px rgba(255,122,47,0.6);
}

/* ================= TRUST CARDS ================= */
.trust-card{
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(15px);
  border:1px solid rgba(255,255,255,0.15);
  padding:18px;
  border-radius:14px;
  text-align:center;
  transition:0.3s;
}

.trust-card:hover{
  transform:translateY(-6px);
  box-shadow:0 0 20px rgba(255,122,47,0.4);
}

.trust-card h6{
  margin:0;
  font-weight:600;
  color:#fff;
}

.trust-card p{
  margin:0;
  font-size:13px;
  color:#cbd5e1;
}

/* ================= FORM ================= */
.form-card{
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);

  border-radius:20px;
  border:1px solid rgba(255,122,47,0.2);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.1);
}

/* HEADER */
.form-header{
  background:linear-gradient(135deg,#ff7a2f,#ff9a3c);
  color:#fff;
  padding:20px;
  border-radius: 20px;
}

.form-header p{
  color:#fff;
}

/* BODY */
.form-body{
  padding:20px;
  color:#333;
}

/* INPUT */
.form-control{
  border-radius:12px;
  border:1px solid rgba(255,122,47,0.2) !important;

  padding:12px;
  font-size:14px;

  background:#fff !important;
  color:#333 !important;

  box-shadow:none;
  transition:0.3s;
}

.form-control::placeholder{
  color:#888;
}

.form-control:focus{
  border:1px solid #ff7a2f !important;

  box-shadow:
    0 0 8px rgba(255,122,47,0.4);

  background:#fff !important;
}

/* SELECT BOX */
.custom-select-box{
  position:relative;
}

.select-selected{
  background:#fff;
  border:1px solid rgba(255,122,47,0.2);
  padding:12px;
  border-radius:12px;
  cursor:pointer;
  color:#333;
}
/* DROPDOWN OPTIONS FIX */
.select-options{
  position:absolute;
  width:100%;
  background:#ffffff;
  border-radius:12px;
  margin-top:5px;
  border:1px solid rgba(255,122,47,0.2);
  display:none;
  z-index:999;
  overflow:hidden;
}

.select-options div{
  padding:12px;
  cursor:pointer;
  color:#333 !important;   /* 🔥 FIX: make text visible */
  background:#fff;         /* ensure white bg */
}

/* HOVER */
.select-options div:hover{
  background:#ff7a2f;      /* orange highlight */
  color:#fff !important;   /* white text on hover */
}

/* ================= BUTTON ================= */
.btn-submit{
  width:100%;
  background:linear-gradient(135deg,#0d6efd,#1f3f73);
  color:#fff;
  padding:12px;
  border-radius:30px;
  border:none;
  transition:0.3s;
}
/* SELECT FIELD */
select.form-control{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background: rgba(255,255,255,0.06);
  color:#fff;

  border:none;
  border-radius:12px;
  padding:12px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 0 10px rgba(0,0,0,0.2);

  cursor:pointer;

  background-image:url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
}

/* OPTION STYLE (limited support) */
select.form-control option{
  background:#0b2c4a;
  color:#fff;
}
.btn-submit:hover{
  background:#ff7a2f;
  box-shadow:0 0 20px rgba(255,122,47,0.6);
}

/* ================= EXTRA BUTTONS ================= */
.btn-whatsapp{
  background:#25D366;
  color:#fff;
  padding:10px;
  border-radius:25px;
  text-decoration:none;
  font-size:14px;
  text-align:center;
  transition:0.3s;
}

.btn-whatsapp:hover{
  background:#1ebe5d;
  box-shadow:0 0 15px rgba(37,211,102,0.6);
}

.btn-call{
  background:#0d6efd;
  color:#fff;
  padding:10px;
  border-radius:25px;
  text-decoration:none;
  font-size:14px;
  text-align:center;
  transition:0.3s;
}

.btn-call:hover{
  background:#ff7a2f;
  box-shadow:0 0 15px rgba(255,122,47,0.6);
}

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

  .contact-section{
    margin-top:60px;
  }

  .ultra-card{
    padding:20px;
  }
   .map-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .map-top .btn-primary-custom{
    width:100%;
    text-align:center;
	   
  }

}
/* =================Contact Page================= */



/* ================= HOT PRODUCT ================= */


/* ================= HOT PRODUCT END================= */




/* ================= OUR PRODUCTS ================= */

/* LARGE TABLET */
@media (max-width: 1200px) {

  .zx-products {
    padding: 70px 40px;
  }

  .zx-left h1 {
    font-size: 40px;
  }

  .zx-container {
    gap: 40px;
  }

  .zx-right {
    width: 100%;
  }
}

@media (max-width: 768px){
  .zx-left{
    text-align:center;
  }
}
/* TABLET */
@media (max-width: 992px) {

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

  .zx-left {
    max-width: 100%;
  }

  .zx-left h1 {
    font-size: 34px;
  }

  .zx-desc {
    margin: 15px auto;
    max-width: 500px;
  }

  /* CARD FULL WIDTH */
  .zx-right {
    width: 100%;
    padding: 30px;
  }

  /* STACK INSIDE CARD */
  .zx-flex {
    flex-direction: column;
    gap: 25px;
  }

  .zx-info,
  .zx-img {
    width: 100%;
    text-align: center;
    align-items: center;
  }

  .zx-info p {
    max-width: 100%;
  }

  .zx-features {
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }
}



@media (max-width: 768px){

  .zx-right{
    height: 420px;        /* 🔥 give more height */
    overflow: hidden;     /* keep hidden */
  }

  .zx-flex{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .zx-info{
    width: 100%;
    align-items: center;
    margin-left: 0;
  }

  .zx-img{
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: center;
  }

  .zx-img img{
    width: 140px;
    height: auto;
  }

}

/* MOBILE */
@media (max-width: 600px) {

  .zx-products {
    padding: 60px 20px;
  }

  .zx-left h1 {
    font-size: 26px;
  }

  .zx-desc {
    font-size: 13px;
  }

  .zx-view-btn {
    padding: 10px 20px;
    font-size: 13px;
  }

  .zx-right {
    padding: 20px;
    min-height: auto;
  }

  .zx-info h2 {
    font-size: 24px;
  }

  .zx-info p {
    font-size: 13px;
  }

  .zx-features span {
    font-size: 12px;
  }

  .zx-btn {
    width: 100%;
  }

  /* IMAGE */
  .zx-img img {
    width: 150px;
  }

  /* THUMBNAILS */
  .zx-thumbs {
      display:flex;
  justify-content:center;
  gap:20px;
  margin-top:50px;
  flex-wrap:wrap;
  }

  .zx-thumb {
    width: 100px;
    font-size: 12px;
    padding: 10px;
  }
}

/* ================= OUR PRODUCTS END ================= */


/* ================= WHY CHOOSE================= */
/* ================= RESPONSIVE ================= */

/* ===== LARGE LAPTOP ===== */
@media (max-width:1200px){

  .uxs-section{
    padding:60px 40px;
  }

  .uxs-container{
    gap:40px;
  }

  .uxs-left h2{
    font-size:36px;
  }

  .uxs-card{
    min-width:260px;
  }

}


/* ===== TABLET ===== */
@media (max-width:992px){

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

  .uxs-left{
    width:100%;
  }

  .uxs-left h2{
    font-size:32px;
  }

  .uxs-desc{
    margin:15px auto;
    max-width:500px;
  }

  .uxs-slider{
    width:100%;
  }

  .uxs-card{
    min-width:240px;
  }

}


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

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

  .uxs-left h2{
    font-size:26px;
  }

  .uxs-desc{
    font-size:13px;
  }

  /* CARD STACK FIX */
  .uxs-card{
   flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    gap: 15px;

    min-width: 85vw;
    height: auto;
  }

  .uxs-content{
    max-width:100%;
    align-items:center;
  }

  .uxs-card img{
    width: 90px;
    height: auto;

    margin-top: 10px;   /* space from text */
    margin-bottom: 5px; /* prevent going too down */

    transform: none; 
  }

  .uxs-bottom{
   flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

}


/* ===== SMALL MOBILE ===== */
@media (max-width:480px){

  .uxs-card{
    min-width:90vw;
    padding:18px;
  }

  .uxs-left h2{
    font-size:22px;
  }

  .uxs-desc{
    font-size:12px;
  }

  .uxs-bottom{
    font-size:10px;
  }

}

/* ================= WHY CHOOSE END ================= */



/* ================= BULIT TO LAST================= */
/* ================= RESPONSIVE ================= */

/* ===== LAPTOP ===== */
@media (max-width:1200px){

  .nx-left h1{
    font-size:48px;
  }

  .nx-feature-bar{
    flex-wrap:wrap;
    gap:15px;
  }

}


/* ===== TABLET ===== */
@media (max-width:992px){

  .nx-hero{
    padding:70px 40px;
  }

  .nx-left{
    max-width:100%;
  }

  .nx-left h1{
    font-size:40px;
  }

  .nx-left p{
    font-size:14px;
  }

  .nx-buttons{
    flex-wrap:wrap;
  }

  /* FEATURE BAR STACK */
  .nx-feature-bar{
    flex-wrap:wrap;
    justify-content:center;
    padding:16px;
  }

  .nx-item{
    flex:1 1 45%;
  }

  .nx-divider{
    display:none;
  }

}


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

  .nx-hero{
    padding:60px 20px;
    text-align:center;
  }

  .nx-left h1{
    font-size:30px;
    line-height:1.3;
  }

  .nx-left p{
    font-size:13px;
  }

  .nx-buttons{
    flex-direction:column;
    align-items:center;
  }

  .nx-btn{
    width:100%;
    text-align:center;
  }

  /* FEATURE BAR */
  .nx-feature-bar{
    flex-direction:column;
    gap:12px;
    padding:18px;
  }

  .nx-item{
    width:100%;
    justify-content:flex-start;
    text-align:left;
  }
  .res-hero{
	 margin-left: 25px;
        width: 100%;
  }

}


/* ===== SMALL MOBILE ===== */
@media (max-width:480px){

  .nx-left h1{
    font-size:24px;
  }

  .nx-tag{
    font-size:10px;
    padding:5px 10px;
  }

  .nx-item h4{
    font-size:11px;
  }

  .nx-item p{
    font-size:10px;
  }

}

@media (max-width:768px){
  .nx-hero{
    background-position:center right;
  }
}
/* ================= BULIT TO LAST END  ================= */


/* ================= PACKAGE================= */
/* ================= RESPONSIVE PACKAGING SECTION ================= */

/* ===== LARGE DEVICES (1200px ↓) ===== */
@media (max-width:1200px){

  .px-packaging{
    padding:60px 40px;
  }

  .px-container{
    gap:40px;
  }

  .px-right h2{
    font-size:36px;
  }

  .px-left{
    height:380px;
  }
}


/* ===== TABLET (992px ↓) ===== */
@media (max-width:992px){

  /* STACK LAYOUT */
  .px-container{
    flex-direction:column;
    text-align:center;
  }

  .px-left,
  .px-right{
    width:100%;
  }

  /* IMAGE */
  .px-left{
    height:320px;
    order:1;
  }

  /* TEXT */
  .px-right{
    order:2;
  }

  .px-right h2{
    font-size:32px;
  }

  .px-desc{
    max-width:500px;
    margin:15px auto;
  }

  /* FEATURES */
  .px-features{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    text-align:left;
  }

  .px-feature{
    justify-content:flex-start;
  }

  /* CTA */
  .px-cta{
    flex-direction:column;
    gap:12px;
    text-align:center;
  }

  .px-cta button{
    width:fit-content;
  }
}


/* ===== MOBILE (768px ↓) ===== */
@media (max-width:768px){

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

  /* IMAGE BLOCK */
  .px-left{
    width:100%;
    height:220px;

    margin-bottom:25px;   /* 🔥 space between image & text */
    order:1;

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

  /* IMAGE CENTER FIX */
  .px-img img{
    object-position:center;
  }

  /* TEXT BLOCK */
  .px-right{
    width:100%;
    order:2;

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

  /* TAG CENTER */
  .px-tag{
    margin-bottom:12px;
  }

  /* TITLE CENTER */
  .px-right h2{
    font-size:26px;
    line-height:1.3;
  }

  /* DESCRIPTION CENTER */
  .px-desc{
    max-width:90%;
    margin:15px auto;
    text-align:center;
  }

  /* FEATURES CENTER */
  .px-features{
    grid-template-columns:1fr;
    text-align:center;
  }

  .px-feature{
    justify-content:center;
  }

  /* CTA CENTER */
  .px-cta{
    width:100%;
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

  .px-cta button{
    width:100%;
  }
}
/* ===== SMALL MOBILE (480px ↓) ===== */
@media (max-width:480px){

  .px-packaging{
    padding:40px 15px;
  }

  .px-left{
    height:350px;
  }

  .px-right h2{
    font-size:22px;
  }

  .px-desc{
    font-size:12px;
  }

  .px-feature h4{
    font-size:14px;
  }

  .px-feature p{
    font-size:12px;
  }

  .px-cta{
    flex-direction:column;
    gap:10px;
  }
}
/* ================= PACKAGE END  ================= */


/* ================= BLOG SECTION  ================= */
/* ================= TABLET ================= */
@media (max-width:992px){

  .blog-og{
    padding:60px 30px;
  }

  .blog-og-card{
    flex:0 0 calc(50% - 12px);
  }

  .blog-og-header{
    flex-direction:column;
    text-align:center;
  }

}

/* ================= MOBILE (PERFECT SLIDER) ================= */
@media (max-width:600px){

 .blog-og{
    padding:40px 0;
  }
  h1{
    font-size:28px !important;
  }

  h2{
    font-size:22px !important;
  }

  /* HEADER */
  .blog-og-header{
    flex-direction:column;
    text-align:center;
    padding:0 15px;
  }

  .blog-og-header h2{
    font-size:22px;   /* 🔥 same like previous clean size */
    line-height:1.3;
  }

  /* ✅ SLIDER */
  .blog-og-slider{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;

    padding:0 12px;   /* small safe space */
  }

  .blog-og-slider::-webkit-scrollbar{
    display:none;
  }
   .blog-og-tag{
    font-size:12px;
  }

  /* TRACK */
  .blog-og-track{
    display:flex;
    gap:0;   /* ❌ no gap (avoid next card visible) */
  }

  /* ✅ CARD FULL WIDTH (NO CUT) */
  .blog-og-card{
    flex:0 0 100%;
    min-width:100%;
    max-width:100%;

    scroll-snap-align:start;
   /* 🔥 inner spacing only */
    box-sizing:border-box;
  }

  /* ✅ IMAGE HEIGHT REDUCED */
  .blog-og-img{
    height:150px;   /* 🔥 reduced height */
  }

  /* CONTENT */
  .blog-og-content{
    padding:14px;
  }

  .blog-og-content h3{
    font-size:15px;
    line-height:1.3;
  }

  .blog-og-content p{
    font-size:12px;
  }

  .blog-og-read{
    padding:8px 14px;
    font-size:13px;
  }

}

.blog-og{
  padding:80px;
  background:linear-gradient(135deg,#061a2c,#0b2c4a);
  color:#fff;
  overflow:hidden;
}

/* HEADER */
.blog-og-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
  gap:20px;
}

.blog-og-tag{ color:#ff7a2f; font-size:13px; }
.blog-og-header h2{ font-size:38px; }
.blog-og-sub{ color:#9fb3c8;font-size:13px; }

.blog-og-view{
  border:1px solid #ffffff40;
  padding:10px 20px;
  border-radius:25px;
  color:#fff;
  text-decoration:none;
}

/* ================= SLIDER ================= */

.blog-og-slider{
  overflow:hidden;
  width:100%;
  max-width:1100px;
  margin:auto;
  
}

.blog-og-track{
  display:flex;
  gap:25px;
}

/* CARD (DESKTOP 3) */
.blog-og-card{
  flex:0 0 calc(33.333% - 17px);
background:white;
  border-radius:18px;
  overflow:hidden;
  color:#0b2c4a;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  transition:0.3s;
}

/* IMAGE */
.blog-og-img{
  position:relative;
 height:140px;   /* you can adjust height */
  overflow:hidden;	
}

.blog-og-img img{
 width:100%;
  height:100%;
  object-fit:cover;   /* 🔥 important */
  display:block; 
}

.blog-og-date{
  position:absolute;
  top:12px;
  left:12px;
  background:#ff7a2f;
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
}

/* CONTENT */
.blog-og-content{ padding:18px; }

.blog-og-label{
  font-size:11px;
  background:#e6f0ff;
  padding:5px 10px;
  border-radius:10px;
}
.blog-og-label.orange{ background:#ffe4d6; }
.blog-og-label.green{ background:#d6f5e8; }

.blog-og-content h3{
  margin:10px 0;
  font-size:16px;
}

.blog-og-content p{
  font-size:13px;
  color:#64748b;
}

.blog-og-read{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  margin-top:12px;
  border-radius:30px;
  background:#f1f5f9;
  color:#0b2c4a;
  font-size:14px;
  text-decoration:none;
  transition:0.3s;
}

.blog-og-read:hover{
  background:#ff7a2f;
  color:#fff;
}
/* ================= No.1 Self================= */

/* ===== LAPTOP (1200px ↓) ===== */
@media (max-width:1200px){

  .hero-og{
    padding:70px 40px;
  }

  .hero-og-left h1{
    font-size:40px;
  }

  .hero-og-features{
    gap:20px;
  }
}


/* ===== TABLET (992px ↓) ===== */
@media (max-width:992px){

  /* STACK */
  .hero-og-container{
    flex-direction:column;
    text-align:center;
  }

  .hero-og-left,
  .hero-og-right{
    width:100%;
  }

  /* TEXT */
  .hero-og-left h1{
    font-size:34px;
  }

  .hero-og-desc{
    margin:15px auto;
    max-width:500px;
  }

  /* FEATURES → GRID */
  .hero-og-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    justify-items:center;
  }

  .hero-og-item{
    width:100%;
    max-width:160px;
  }

  /* IMAGE */
  .hero-og-right{
    margin-top:30px;
  }
}


/* ===== MOBILE (768px ↓) ===== */
@media (max-width:768px){

  .hero-og{
    padding:60px 20px;
  }

  .hero-og-left h1{
    font-size:26px;
    line-height:1.3;
  }

  .hero-og-desc{
    font-size:13px;
  }

  /* FEATURES → 1 COLUMN */
  .hero-og-features{
    grid-template-columns:1fr;
    gap:15px;
  }

  .hero-og-item{
    max-width:220px;
  }

  /* BUTTONS STACK */
  .hero-og-btns{
    flex-direction:column;
    gap:10px;
    align-items:center;
  }

  .hero-og-primary,
  .hero-og-outline{
    width:100%;
    max-width:250px;
    text-align:center;
  }

  /* IMAGE */
  .hero-og-right img{
    border-radius:15px;
  }
}


/* ===== SMALL MOBILE (480px ↓) ===== */
@media (max-width:480px){

  .hero-og-left h1{
    font-size:22px;
  }

  .hero-og-badge{
    font-size:11px;
  }

  .hero-og-item h4{
    font-size:13px;
  }

  .hero-og-item p{
    font-size:11px;
  }
}
/* ================= No.1 Self END  ================= */



/* ================= BUILT FOR EVERY INDUSTRY================= */
/* ================= RESPONSIVE INDUSTRY ================= */

/* ===== LARGE LAPTOP (1200px ↓) ===== */
@media (max-width:1200px){

  .industry-og{
    padding:70px 40px;
  }

  .industry-og-header h2{
    font-size:32px;
  }

  .industry-og-grid{
    grid-template-columns:repeat(2,1fr);
    gap:25px;
  }
}


/* ===== TABLET (992px ↓) ===== */
@media (max-width:992px){

  .industry-og{
    padding:60px 30px;
  }

  .industry-og-header h2{
    font-size:28px;
  }

  .industry-og-sub{
    max-width:500px;
    margin:0 auto 40px;
  }

  /* GRID → 2 COLUMN */
  .industry-og-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }

  /* CARD FIX */
  .ind-card{
    width:100%;
    max-width:320px;
    height:320px;
  }
}


/* ===== MOBILE (768px ↓) ===== */
@media (max-width:768px){

  .industry-og{
    padding:50px 20px;
  }

  .industry-og-header h2{
    font-size:24px;
    line-height:1.3;
  }

  .industry-og-sub{
    font-size:13px;
    margin-bottom:30px;
  }

  /* GRID → 1 COLUMN */
  .industry-og-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  /* CARD FULL WIDTH */
  .ind-card{
    width:100%;
    max-width:100%;
    height:300px;
  }

  /* IMAGE SMALL */
  .ind-card-front img{
    height:180px;
  }

  .ind-content{
    padding:12px;
  }

  .ind-content h3{
    font-size:16px;
  }

  .ind-content p{
    font-size:12px;
  }

  /* BACK TEXT */
  .ind-card-back h3{
    font-size:16px;
  }

  .ind-card-back p{
    font-size:12px;
  }
}


/* ===== SMALL MOBILE (480px ↓) ===== */
@media (max-width:480px){

  .industry-og-header h2{
    font-size:20px;
  }

  .industry-og-tag{
    font-size:11px;
  }

  .ind-card{
    height:280px;
  }

  .ind-card-front img{
    height:160px;
  }
}
/* ================= BUILT FOR EVERY INDUSTRY END  ================= */



/* ================= REVIEW & FORM================= */
/* ================= RESPONSIVE REVIEW SECTION ================= */

/* ===== LARGE TABLET (1200px ↓) ===== */
@media (max-width:1200px){

  .review-og{
    padding:70px 40px;
  }

  .review-left h2{
    font-size:32px;
  }

  .review-card{
    min-width:300px;
  }
}


/* ===== TABLET (992px ↓) ===== */
@media (max-width:992px){

  .review-og-container{
    flex-direction:column;
    gap:40px;
  }

  .review-left,
  .review-right{
    width:100%;
  }

  /* CENTER TEXT */
  .review-left{
    text-align:center;
  }

  .review-sub{
    max-width:500px;
    margin:0 auto 25px;
  }

  /* SLIDER CENTER FIX */
  .review-slider{
    width:100%;
  }

  /* FORM FIX */
  .review-right{
    padding:30px;
  }
}


/* ===== MOBILE (768px ↓) ===== */
@media (max-width:768px){

  .review-og{
    padding:60px 20px;
  }

  .review-left h2{
    font-size:26px;
  }

  .review-sub{
    font-size:13px;
  }

  /* 🔥 STOP AUTO SCROLL ON MOBILE */
  .review-track{
   animation:scrollLoop 20s linear infinite;
    width:auto;
  }

  /* 🔥 MAKE SCROLLABLE */
  .review-slider{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .review-track{
    gap:15px;
  }

  .review-card{
      min-width:85%;
    max-width:85%;
    scroll-snap-align:center;
  }

  /* FORM STACK */
  .review-form{
    grid-template-columns:1fr;
  }

  .review-form textarea,
  .review-form button{
    grid-column:span 1;
  }

  /* INPUT SIZE */
  .review-form input,
  .review-form select,
  .review-form textarea{
    font-size:13px;
    padding:12px;
  }
}


/* ===== SMALL MOBILE (480px ↓) ===== */
@media (max-width:480px){

  .review-left h2{
    font-size:22px;
  }

  .review-tag{
    font-size:11px;
  }

  .review-card{
    min-width:90%;
    padding:18px;
  }

  .quote{
    font-size:24px;
  }

  .stars{
    font-size:13px;
  }

  .avatar{
    width:35px;
    height:35px;
  }

  .review-right{
    padding:20px;
  }

  .review-form button{
    padding:14px;
    font-size:13px;
  }
}
/* ================= REVIEW & FORM END  ================= */



/* ================= FAQ================= */
/* ================= RESPONSIVE FAQ ================= */

/* ===== LARGE TABLET (1200px ↓) ===== */
@media (max-width:1200px){

  .faq{
    padding:70px 40px;
  }

  .faq-header h2{
    font-size:36px;
  }
}


/* ===== TABLET (992px ↓) ===== */
@media (max-width:992px){

  .faq{
    padding:60px 30px;
  }

  /* STACK INTO SINGLE COLUMN */
  .faq-grid{
    flex-direction:column;
    gap:20px;
  }

  .faq-col{
    width:100%;
  }

  /* CENTER HEADER */
  .faq-header h2{
    font-size:32px;
  }

  .faq-header p{
    max-width:500px;
    margin:10px auto 0;
  }
}


/* ===== MOBILE (768px ↓) ===== */
@media (max-width:768px){

  .faq{
    padding:50px 20px;
  }

  .faq-header h2{
    font-size:26px;
    line-height:1.3;
  }

  .faq-header p{
    font-size:13px;
  }

  /* QUESTION LAYOUT FIX */
  .faq-question{
    padding:14px;
    align-items:flex-start;
    gap:10px;
  }

  .faq-left{
    gap:10px;
    align-items:flex-start;
  }

  /* ICON SMALL */
  .faq-icon{
    width:32px;
    height:32px;
    font-size:14px;
  }

  /* TEXT SIZE */
  .faq-question{
    font-size:14px;
  }

  .faq-answer div{
    font-size:13px;
    padding:0 14px 14px;
  }

  /* ARROW ALIGN */
  .faq-arrow{
    margin-top:6px;
  }
}


/* ===== SMALL MOBILE (480px ↓) ===== */
@media (max-width:480px){

  .faq-header h2{
    font-size:22px;
  }

  .faq-pill{
    font-size:11px;
    padding:5px 10px;
  }

  .faq-question{
    font-size:13px;
  }

  .faq-answer div{
    font-size:12px;
  }

  .faq-icon{
    width:28px;
    height:28px;
    font-size:13px;
  }
}
/* ================= FAQ END  ================= */



/* ================= FOOTED================= */
/* ===== LARGE TABLET (1200px ↓) ===== */
@media (max-width:1200px){

  .sxfoot-container{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }

  .sxfoot-col:nth-child(2)::after{
    display:none;
  }
}

@media (max-width:992px){

  .sxfoot-footer{
    padding-top:60px;
  }

  .sxfoot-container{
    grid-template-columns:1fr;
    gap:35px;
    padding:0 5%;
  }

  .sxfoot-col::after{
    display:none;
  }

  .sxfoot-col{
    padding-bottom:20px;
  }

  .sxfoot-col:first-child{
    text-align:center;
  }

  .sxfoot-logo{
    justify-content:center;
  }

  .sxfoot-socials{
    justify-content:center;
  }

  .sxfoot-contact-item{
    flex-direction:column;
    align-items:center;
    gap:6px;
  }

  .sxfoot-links li{
    gap:6px;
  }
}

@media (max-width:768px){

  .sxfoot-container{
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
  }

  .sxfoot-col::after{
    display:none;
  }

  .sxfoot-col h3{
    text-align:center;
  }

  .sxfoot-col h3::after{
    left:50%;
    transform:translateX(-50%);
  }

  .sxfoot-logo{
    justify-content:center;
  }

  .sxfoot-socials{
    justify-content:center;
  }

  .sxfoot-links{
    padding:0;
    margin:0 auto;
    width:220px;
  }

  .sxfoot-links li{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    margin:10px 0;
  }

  .sxfoot-links li span{
    width:16px;
    text-align:right;
    display:inline-block;
  }

  .sxfoot-links li:hover{
    transform:none;
  }

  .sxfoot-contact-item{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start;
    justify-content:flex-start;
    gap:12px;
    max-width:280px;
    margin:12px auto;
    text-align:left !important;
  }

  .sxfoot-contact-item i{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:22px;
    min-width:22px;
    height:22px;
    margin-top:4px;
  }

  .sxfoot-contact-item span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .sxfoot-address{
    text-align:center;
  }

  .sxfoot-address h4{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
  }

  .sxfoot-address p{
    max-width:280px;
    margin:auto;
  }

  .sxfoot-bottom{
    flex-direction:column;
    gap:12px;
    text-align:center;
  }

  .sxfoot-bottom-links{
    justify-content:center;
  }
}

@media (max-width:480px){

  .sxfoot-footer{
    padding-top:40px;
  }

  .sxfoot-container{
    padding:0 20px;
  }

  .sxfoot-tagline{
    font-size:12px;
  }

  .sxfoot-desc{
    font-size:12px;
    line-height:1.5;
  }

  .sxfoot-links li{
    margin:10px 0;
  }

  .sxfoot-contact-item{
    gap:8px;
  }

  .sxfoot-bottom{
    font-size:12px;
  }

  .sxfoot-bottom-links a{
    font-size:12px;
  }
}
/* ================= FOOTER END  ================= */


/* ================= FLOATING  ================= */

@media(max-width:600px){
  .float-buttons{
    right:15px;
    bottom:15px;
  }

  .whatsapp-btn{
    width:50px;
    height:50px;
    font-size:22px;
  }

  .scroll-top-btn{
    width:45px;
    height:45px;
  }
}
/* ================= FLOATING  ================= */
/* =========================
   REVEAL ANIMATIONS
========================= */

/* DEFAULT */

/* =========================
   REVEAL ANIMATION
========================= */

/* =========================
   REVEAL ANIMATION
========================= */

.reveal,
.reveal-left,
.reveal-right,
.reveal-zoom{

  opacity:0;

  transition:all 0.9s ease;

  will-change:transform, opacity;
}

.reveal{
  transform:translateY(50px);
}

.reveal-left{
  transform:translateX(-60px);
}

.reveal-right{
  transform:translateX(60px);
}

.reveal-zoom{
  transform:scale(0.9);
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

.reveal-left.active{
  opacity:1;
  transform:translateX(0);
}

.reveal-right.active{
  opacity:1;
  transform:translateX(0);
}

.reveal-zoom.active{
  opacity:1;
  transform:scale(1);
}
.stats-bar,
.your-bar-class {
  transform: none !important;
}

/*blog-main-page*/

/* ===== WRAPPER ===== */
.pro-blog-wrap{

  padding:60px 0;
}

/* CONTAINER WIDTH FIX */
.pro-blog-wrap .container{
  max-width:1200px;
}

/* ===== LAYOUT ===== */
.pro-row{
  align-items:flex-start;
}

/* ===== LEFT CONTENT ===== */
.pro-blog-content{
  background:#102f4f;
  padding:40px;
  border-radius:8px;
}

/* TITLE */
.pro-title{
  font-size:34px;
  font-weight:800;
  margin-bottom:20px;
  line-height:1.3;
}

/* TEXT */
.pro-text{
  color:#d6e6ff;
  line-height:1.8;
  text-align:justify;
}
.pro-blog-content p{
  color:#cfe3ff;
}
/* LIST */
.pro-blog-content ul{
  padding-left:20px;
}

/* INFO BOX */
.pro-info-box{
  background:#173e66;
  padding:20px;
  border-left:4px solid #4da6ff;
  margin:25px 0;
}

/* WARNING */
.pro-warning{
  background:#ff6a2f;
  padding:15px;
  margin:25px 0;
  border-radius:5px;
}

/* SUCCESS */
.pro-success{
  background:#28a745;
  padding:15px;
  margin:25px 0;
  border-radius:5px;
}

/* SECTION */
.pro-section{
  margin-bottom:28px;
}

.pro-section h3{
  font-weight:700;
  margin-bottom:10px;
}

.pro-section h5{
  margin-top:15px;
  font-weight:600;
}

/* ===== SIDEBAR ===== */
.pro-sidebar{
  background:#102f4f;
  padding:20px;
  border-radius:8px;
  margin-bottom:15px;
}

.pro-sidebar ul{
  padding-left:18px;
}

/* ===== FAQ ===== */
.pro-faq{
  background:#102f4f;
  padding:20px;
  border-radius:8px;
}

.pro-faq-item{
  border-bottom:1px solid rgba(255,255,255,0.1);
}

.pro-q{
  padding:15px;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  font-weight:600;
}

.pro-a{
  max-height:0;
  overflow:hidden;
  transition:0.3s;
  padding:0 15px;
  color:#cfdfff;
}

.pro-faq-item.active .pro-a{
  max-height:120px;
  padding:0 15px 15px;
}
.pro-blog-wrap .container-fluid{
  max-width: 1500px;   /* increase width */
  margin: auto;
}
/* FIX TEXT VISIBILITY */
.pro-blog-content,
.pro-blog-content h1,
.pro-blog-content h2,
.pro-blog-content h3,
.pro-blog-content h4,
.pro-blog-content h5,
.pro-blog-content li{
  color:#ffffff;
}
.pro-sidebar,
.pro-sidebar h5,
.pro-sidebar li{
  color:#ffffff;
}
.pro-faq,
.pro-faq h5{
  color:#ffffff;
}
.pro-q{
  color:#ffffff;
}
.pro-a{
  color:#cfe3ff;
}
.pro-q span{
  color:#4da6ff;
}
/* BULLET STYLE */
.pro-sidebar li{
  margin-bottom:8px;
  list-style: none;
  position: relative;
  padding-left:18px;
}

.pro-sidebar li::before{
  content:"✔";
  position:absolute;
  left:0;
  color:#4da6ff;
}

/* FAQ HOVER */
.pro-q:hover{
  background:rgba(255,255,255,0.05);
}
/* ===== MOBILE ===== */
@media(max-width:992px){
  .pro-sidebar{
    margin-top:30px;
  }
}

@media(max-width:768px){
  .pro-title{
    font-size:24px;
  }

  .pro-blog-content{
    padding:25px;
  }
}

/* ===== LINK FIX ===== */
.pro-link{
  color:#ff6a2f;
  text-decoration:none;
}

/* ===== TABLE ===== */
.pro-table-wrap{
  margin:40px 0;
}

.pro-table-title{
  color:#ffffff;
  margin-bottom:20px;
  font-weight:700;
}

.pro-table{
  width:100%;
  border-collapse:collapse;
  background:#ffffff;
  border-radius:6px;
  overflow:hidden;
}

/* HEADER */
.pro-table thead{
  background:#f1f1f1;
}

.pro-table th{
  text-align:left;
  padding:15px;
  font-weight:600;
  border:1px solid #ddd;
}

/* BODY */
.pro-table td{
  padding:15px;
  border:1px solid #ddd;
  color:#333;
}

/* HOVER */
.pro-table tr:hover{
  background:#f9f9f9;
}

/* FAQ FIX */
.pro-faq h5,
.pro-q{
  color:#ffffff;
}

.pro-a{
  color:#cfe3ff;
}

/* MOBILE */
@media(max-width:768px){
  .pro-table th,
  .pro-table td{
    padding:10px;
    font-size:14px;
  }
}

/* =========================
   PREMIUM QUOTE POPUP
========================= */

/* =========================
   POPUP OVERLAY
========================= */

.quote-popup-overlay{

  position:fixed;
  top:-8px;
  left:0;

  width:100%;
 min-height:100vh;

  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(8px);

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

  padding:20px;

  z-index:999999;

  opacity:0;
  visibility:hidden;

  transition:0.3s ease;

  overflow:hidden;
}

/* ACTIVE */

.quote-popup-overlay.active{
  opacity:1;
  visibility:visible;
}

/* =========================
   POPUP BOX
========================= */

.quote-popup-box{

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

  background:#0b3d78;

  border-radius:20px;

  position:relative;

  overflow:hidden;

  box-shadow:0 20px 50px rgba(0,0,0,0.40);

  animation:popupFade 0.35s ease;
    margin:auto;
}

/* =========================
   HEADER
========================= */

.quote-popup-header{

  padding:18px 24px 12px;

  color:#fff;
}

.quote-popup-mini{

  display:inline-block;

  background:rgba(255,255,255,0.12);

  padding:7px 16px;

  border-radius:30px;

  font-size:11px;
  letter-spacing:1px;
  font-weight:600;

  margin-bottom:12px;
}

.quote-popup-header h2{

    font-size:24px;

  margin-bottom:6px;

  line-height:1.2;
}

.quote-popup-header p{



  color:#dbeafe;

 
  font-size:13px;

  line-height:1.5;
}

/* =========================
   CLOSE BUTTON
========================= */

.quote-popup-close{

  position:absolute;
padding: 4px 10px 10px 10px;
  top:18px;
  right:18px;

  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:#fff;

  color:#0b3d78;

  font-size:26px;
  font-weight:700;

  cursor:pointer;

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

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

.quote-popup-form{

  
  background:#fff;

  padding:18px 24px 20px;

  border-radius:20px 20px 0 0;
}

/* GRID */

.quote-popup-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:12px;
}

/* FIELD */

.quote-field{
  display:flex;
  flex-direction:column;
}

.quote-field label{

  font-weight:600;

 
  font-size:13px;

  margin-bottom:5px;

  color:#111827;
}

/* INPUTS */

.quote-field input,
.quote-field select,
.quote-field textarea{

  width:100%;

  padding:11px 14px;

  border:1px solid #dbe3ec;

  border-radius:10px;

  font-size:14px;

  outline:none;

  background:#fff;

  box-sizing:border-box;

  transition:0.3s ease;
}

/* TEXTAREA */

.quote-field textarea{

  min-height:70px;

  resize:none;
}

/* FOCUS */

.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus{

  border-color:#ff7a2f;

  box-shadow:0 0 0 4px rgba(255,122,47,0.12);
}

/* FULL WIDTH */

.full-width{
  grid-column:1 / -1;
  margin-top:10px;
}

/* BUTTON */

.quote-submit-btn{

  width:100%;

    margin-top:14px;

  border:none;

   padding:13px;

  border-radius:12px;

  background:linear-gradient(135deg,#ff7a2f,#ff934d);

  color:#fff;

  font-size:15px;
  font-weight:600;

  cursor:pointer;
}

/* =========================
   ANIMATION
========================= */

@keyframes popupFade{

  from{
    opacity:0;
    transform:translateY(20px) scale(0.96);
  }

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

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

@media(max-width:768px){

  .quote-popup-grid{
    grid-template-columns:1fr;
  }

  .quote-popup-box{
    max-height:95vh;
    overflow-y:auto;
  }

  .quote-popup-header h2{
    font-size:28px;
  }

  .quote-popup-form{
    padding:18px;
  }
}


/* ================= PREMIUM CERTIFICATE ================= */

.cert-premium-section{

  position:relative;
}

/* TITLE */

.cert-main-title{

  color:#fff;

  font-size:44px;

  font-weight:800;

  margin-bottom:14px;
}

.cert-main-subtitle{

  color:#c4d4e0;

  max-width:700px;

  margin:auto;

  line-height:1.7;
}

/* LEFT CARD */

.cert-preview-card{

  background:linear-gradient(
    135deg,
    rgba(19,44,71,0.97),
    rgba(8,24,40,0.97)
  );

  border-radius:30px;

  padding:35px;

  border:1px solid rgba(255,255,255,0.06);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.25);

  height:100%;
}

/* TOP */

.cert-preview-top{

  display:flex;

  align-items:center;

  gap:18px;

  margin-bottom:35px;
}

/* BADGE */

.cert-badge{

  width:85px;
  height:85px;

  border-radius:24px;

  background:linear-gradient(
    135deg,
    #ff7a2f,
    #ff9f5e
  );

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

  box-shadow:
    0 15px 35px rgba(255,122,47,0.35);
}

.cert-badge i{

  font-size:34px;

  color:#fff;
}

/* TOP TEXT */

.cert-preview-top h4{

  color:#fff;

  font-size:28px;

  margin-bottom:6px;

  font-weight:700;
}

.cert-preview-top span{

  color:#b7c7d3;
}

/* PDF */

.cert-pdf-preview{

  background:rgba(255,255,255,0.04);

  border:1px dashed rgba(255,255,255,0.12);

  border-radius:22px;

  padding:40px 20px;

  text-align:center;

  margin-bottom:30px;
}

.cert-pdf-preview i{

  font-size:70px;

  color:#ff5f57;

  margin-bottom:20px;
}

.cert-pdf-preview h5{

  color:#fff;

  margin-bottom:10px;
}

.cert-pdf-preview p{

  color:#ff9b59;

  font-weight:600;
}

/* BUTTONS */

.cert-btn-group{

  display:flex;

  gap:15px;

  flex-wrap:wrap;
}

/* BUTTON */

.cert-view-btn,
.cert-download-btn{

  flex:1;

  min-width:170px;

  text-align:center;

  padding:14px 22px;

  border-radius:14px;

  text-decoration:none;

  font-weight:600;

  transition:0.3s ease;
}

/* VIEW */

.cert-view-btn{

  background:#ff7a2f;

  color:#fff;
}

.cert-view-btn:hover{

  background:#ff934d;

  color:#fff;
}

/* DOWNLOAD */

.cert-download-btn{

  border:1px solid rgba(255,255,255,0.1);

  color:#fff;
}

.cert-download-btn:hover{

  background:rgba(255,255,255,0.06);

  color:#fff;
}

/* RIGHT */

.cert-info-box{

  padding-left:20px;
}

.cert-info-tag{

  display:inline-block;

  padding:10px 18px;

  border-radius:999px;

  background:rgba(255,122,47,0.1);

  color:#ff9b59;

  font-size:13px;

  letter-spacing:1px;

  margin-bottom:25px;

  border:1px solid rgba(255,122,47,0.2);
}

.cert-info-box h3{

  color:#fff;

  font-size:42px;

  line-height:1.3;

  margin-bottom:25px;

  font-weight:800;
}

.cert-info-box p{

  color:#c6d3de;

  line-height:1.9;

  font-size:16px;
}

/* FEATURES */

.cert-feature-grid{

  display:grid;

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

  gap:18px;

  margin-top:35px;
}

.cert-feature{

  display:flex;

  align-items:center;

  gap:12px;

  color:#fff;
}

.cert-feature i{

  color:#2ecc71;

  font-size:18px;
}

/* META */

.cert-meta-box{

  margin-top:40px;

  display:grid;

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

  gap:20px;
}

.cert-meta-item{

  background:rgba(255,255,255,0.04);

  border-radius:18px;

  padding:20px;

  border:1px solid rgba(255,255,255,0.05);
}

.cert-meta-item h6{

  color:#8fa8bb;

  margin-bottom:8px;

  font-size:14px;
}

.cert-meta-item p{

  color:#fff;

  margin:0;

  font-weight:600;
}

/* MOBILE */

@media(max-width:768px){

  .cert-main-title{
    font-size:32px;
  }

  .cert-info-box{
    padding-left:0;
  }

  .cert-info-box h3{
    font-size:30px;
  }

  .cert-feature-grid,
  .cert-meta-box{
    grid-template-columns:1fr;
  }

}