@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
:root {
            --color1: #C1121F;
            --color2: #01953f;
            --bg-primary:#F7F7F7;
           

            --primary: #A4161A;
--primary-dark: #7F0F12;
  --primary-glow: rgba(255, 106, 26, 0.25);
  --dark-charcoal: #191919;
  --soft-black: #1f1f1f;
  --glass-white: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.6);
  --shadow-modern: 0 25px 45px -12px rgba(0, 0, 0, 0.15), 0 2px 10px 0 rgba(0, 0, 0, 0.02);
  --shadow-floating: 0 30px 50px -20px rgba(0, 0, 0, 0.2);
  --red1:#C1121F;
  --red2:#A4161A;
  --red3:#BA181B;
  --dark:#0b0f15;
  --light:#f6f7fb;
    --text:#6e7684;
     
            --font1:"Space Grotesk", sans-serif;
            --font2:"Space Grotesk", sans-serif;  
            
        }

body{
margin:0;
font-family: var(--font1); 
            color: rgb(38, 44, 44);
            font-size: 16px;
            text-align: left;

}

   @media(max-width:769px)
        {
          body{text-align: center;}
        }
a{text-decoration: none;}
        img { display: block; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font2); 
  font-weight:500;
 
  margin: 0;
}
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 80%; max-width: 100%; }
@media (max-width: 1401px) {
   .container {
        width: 80%;
    }
}
@media (max-width: 1204px) {
   .container {
        width: 95%;
    }
}

figcaption, figure{margin: 0; padding: 0;}

.cr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Fixed Class */
.top-div1.fixed-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff; /* change if needed */
    animation: slideDown 0.5s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    z-index: 2001;
}

/* Smooth Down Animation */
@keyframes slideDown{
    from{
        transform: translateY(-100%);
    }
    to{
        transform: translateY(0);
    }
}

/* Small Logo After Scroll */
.top-div1.fixed-header .header-logo img{
    max-height: 55px;
}

.top-div1.fixed-header .hr-btn{padding: 10px;}


.header-inner{display: flex;
  align-items: center;
 position: relative;
 z-index: 99;
 padding-inline-end: 45px;
 justify-content: space-between;


}

.header-inner1{display: flex;
  align-items: center;
 position: relative;
 z-index: 99;
 padding-inline-end: 45px;
 justify-content: center;
  background: #f7fffa;
}

.header-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 30px;
}

.header-logo-wrapper {

  background-color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.header-logo {
  position: relative;
  z-index: 1;
}

.header-menu {
  display: flex;
  align-items: center;
  /* margin-inline-end: auto; */
  /* padding-inline-start: 40px; */
}

/* WRAPPER */
.header-social{
  display:flex;
  align-items:center;
  gap:16px;
}

/* ICON STYLE */
.header-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:14px;
  color:#222;

  transition:all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* HOVER */
.header-social a:hover{
  color:var(--color1);
  transform:translateY(-2px);
}

  .main-menu {
  /* border-inline-start: 1px solid rgba(31, 31, 31, 0.07); */
  /* padding-inline-start: 30px;
  margin-inline-start: 50px; */
}


/* ===== NAV LINKS ===== */
.navbar-nav .nav-link{
  color:#222 !important;
  font-weight:400;
  padding:14px 25px !important;
  position:relative;
  transition:color 0.3s ease;
  font-size:17px
}

.navbar-nav .nav-link:hover, .navbar-nav .active .nav-link{
  color:var(--color2) !important;
}

/* REMOVE DEFAULT BOOTSTRAP ARROW */
.dropdown-toggle::after{
  display:none;
}

/* RIGHT ARROW */
.navbar-nav .dropdown > .nav-link{
  padding-right:30px;
}

.navbar-nav .dropdown > .nav-link::before{
  content:"\f107";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  transition:transform 0.3s ease;
}

.navbar-nav .dropdown:hover > .nav-link::before{
  transform:translateY(-50%) rotate(180deg);
}

/* ===== DROPDOWN (SAME EFFECT, SMOOTHED) ===== */
.dropdown-menu{
  background:#fff;
  border:none;
  border-radius:0;
  padding:10px 0;
  min-width:240px;

  box-shadow:0 6px 18px rgba(0,0,0,0.06);

  opacity:0;
  transform:scaleY(0.9) translateY(-6px);
  transform-origin: top;

  /* 🔥 smoothing improvements */
  will-change: transform, opacity;
  backface-visibility: hidden;

  transition:
    transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.28s ease;

  display:block;
  visibility:hidden;
}

/* SHOW */
.dropdown:hover .dropdown-menu{
  opacity:1;
  transform:scaleY(1) translateY(0);
  visibility:visible;
}

/* ===== DROPDOWN ITEMS ===== */
.dropdown-item{
  padding:10px 20px;
  font-weight:500;
border-bottom: 1px solid #ededed;
  transition:
    transform 0.25s ease,
    color 0.2s ease,
    padding 0.2s ease;
}

.dropdown-item:hover{
  color:var(--color1);
  padding-left:26px;
  /* transform:translateX(4px); */
}

/* ===== MOBILE ===== */
.navbar-toggler{
  border:none;
}

@media(max-width:991px){

  .navbar-nav .nav-link{
    padding:12px;
  }

  .dropdown-menu{
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    display:none;
  }

  .dropdown.show .dropdown-menu{
    display:block;
  }
}


.header-right {
  display: flex;
  gap: 30px;
  align-items: center;
}
/* ===== BUTTON BASE ===== */
.hr-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
border-radius: 10px;
  padding:20px 28px;
  font-weight:600;



  color:#fff;
  border:1px solid var(--red2);
  background:var(--color1);

  overflow:hidden;
  z-index:1;

  transition:color 0.35s ease;
}

/* ===== SMOOTH SLIDING BACKGROUND ===== */
.hr-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background-color: var(--red2);

  z-index:-1;

  /* 🔥 smoother easing */
  transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover */
.hr-btn:hover::before{
  left:0;
}

/* text */
.hr-btn:hover{
  color:#fff;
}

/* ===== ICON ===== */
.icon-box{
  position:relative;
  width:20px;
  height:20px;
  /* overflow:hidden; */
}

.icon-box svg{
  position:absolute;
  width:100%;
  height:100%;
  fill:#fff;

  transition:0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* FIRST ICON */
.icon-first{
  transform:translateX(0);
  opacity:1;
}

/* SECOND ICON */
.icon-second{
  transform:translateX(-120%);
  opacity:0;
}

/* ICON SWAP */
.hr-btn:hover .icon-first{
  transform:translateX(120%);
  opacity:0;
}

.hr-btn:hover .icon-second{
  transform:translateX(0);
  opacity:1;
}



/* HAMBURGER WRAPPER */
.header-hamburger{
  cursor:pointer;
}

/* ICON BASE */
.menu-svg{
  fill:#616161;
  transition:all 0.3s ease;
  transform-origin:center;
}

/* 🔥 HOVER EFFECT (Industrie style) */
.header-hamburger:hover .menu-svg{
  fill:var(--red1);
  transform:translateY(-2px) scale(1.08);
}

/* CLICK ACTIVE FEEL */
.header-hamburger.active .menu-svg{
  transform:scale(0.95);
}




/* ================= OFFCANVAS ================= */
.offcanvas-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  opacity:0;
  visibility:hidden;
  transition:0.4s;
  z-index:999;
}

.offcanvas-overlay.active{
  opacity:1;
  visibility:visible;
}

.offcanvas-area{
  position:fixed;
  top:0;
  right:0;
  width:400px;
  height:100vh;
  background:#fff;
  transform:translateX(100%);
  transition:0.6s cubic-bezier(0.22,1,0.36,1);
  z-index:3000;
  overflow-y:auto;
  box-shadow:-10px 0 40px rgba(0,0,0,0.12);
}


.offcanvas-area.active{
  transform:translateX(0);
}

body.offcanvas-active{
  overflow:hidden;
}

/* CLOSE */
.offcanvas-close{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid #eee;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:0.3s;
}

.offcanvas-close:hover{
  background:var(--red1);
  transform:rotate(90deg);
}

.offcanvas-close:hover i{
  color:#fff;
}

/* ================= MOBILE MENU ================= */
/* .mobile-menu{
  display:none;
}

@media(max-width:991px){
  .mobile-menu{
    display:block;
  }
} */
 .fancybox__container{z-index: 3000;}
.mobile-menu ul{
  list-style:none;
  padding:0;
  margin:0;
}

.mobile-menu li{
  border-bottom:1px solid #eee;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.mobile-menu li > a{
  flex:1;
  padding:12px 0;
  color:#111;
  text-decoration:none;
  transition: all .5s ease;
}

.mobile-menu li > a:hover, .mobile-menu li.active > a{
  color:var(--red1);
}

/* SUBMENU */
.mobile-menu .sub-menu{
  width:100%;
  display:none;
  padding-left:15px;
}

.mobile-menu li.open .sub-menu{
  display:block;
}

/* TOGGLE BUTTON */
.toggle{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* ICON */
.toggle i{
  font-size:11px;
  transition:all 0.3s ease;
}

/* INDUSTRIE HOVER */
.toggle:hover i{
  color:var(--red1);
  transform:translateY(-1px) scale(1.1);
}

/* OPEN STATE */
.mobile-menu li.open .toggle i{
  transform:rotate(45deg) scale(1.1);
  color:var(--red1);
}

.side-about{margin-top: 30px;}

/* ================= GALLERY ================= */
.gallery{margin-top:30px;}
.gallery img{
  border-radius:6px;
  transition:0.3s;
  margin-bottom: 5px;
}
.gallery img:hover{
  transform:scale(1.05);
}

.offcnvas-contact{margin-top: 30px; margin-bottom: 30px;}
.offcanvas-contact .title{ margin-bottom: 20px;
  font-size: 24px;}

  .offcanvas-contact ul li:not(:last-child) {
  margin-bottom: 20px;
}

.offcanvas-contact-icon {
	display: inline-block;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
	border-radius: 50%;
	background: transparent;
	color: #2b2b2b;
	border: 1px solid #afafaf;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}
.offcanvas-contact-icon svg path {
  fill: var(--color1);
}
.gap-15 {
  gap: 15px;
}
.offcanvas-contact-text a{color:#6a6a6a;   transition: all .5s ease;}
.offcanvas-contact-text a:hover{color:var(--color1)}

/* ================= SOCIAL ================= */
.offcanvas-social {
  margin-bottom: 40px;
  margin-top: 30px;
}
.offcanvas-title-meta {
  color: #252525;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
}

.offcanvas-social ul{
  display:flex;
  gap:12px;
  list-style:none;
  padding:0;
}

.offcanvas-social ul li:not(:last-child) {
  margin-right: 5px;
}

.offcanvas-social ul li {
  display: inline-block;
}

.offcanvas-social ul li a {
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	color: #2b2b2b;
	border: 1px solid #afafaf;
	font-size: 16px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
  transition: all .5s ease;
}

.offcanvas-social ul li a:hover {
  background: var(--color1);
  color: #fff;
  border-color: var(--color1);
}

.offcanvas-social a{
  color:#111;
}
.offcanvas-social a:hover{
  color:var(--red1);
}

/* =========================================================
LARGE LAPTOP
========================================================= */

@media(max-width:1650px){

 
.navbar-nav .nav-link{

    padding:12px 15px !important;
  }
   .navbar-nav .dropdown > .nav-link::before{
    right: 0;
  }
.dropdown-item{font-size: 13px;}
  .hr-btn{
    padding:12px 15px;

  }
}

@media(max-width:1450px){

  .header-logo img{
    max-width:245px;
  }

  .navbar-nav .nav-link{
    font-size:15px;
    padding:12px 15px !important;
  }
  .navbar-nav .dropdown > .nav-link::before{
    right: 0;
  }
.dropdown-item{font-size: 13px;}
  .hr-btn{
    padding:12px 15px;
    font-size:13px;
  }

}
@media(max-width:1399px){
   .header-logo img{
    max-width:195px;
  }
  .navbar-nav .nav-link{
    font-size:14px;
    padding:12px 17px !important;
  }
  .dropdown-item{font-size: 12px;}
}
@media(max-width:1250px){
 .navbar-nav .nav-link{
    font-size:12px;
    padding:12px 13px !important;
  }


}

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

  .header-inner{
    padding-inline:12px;
  }

  .header-logo img{
    max-width:130px;
  }

  .navbar-nav .nav-link{
    font-size:12px;
    padding:10px 13px !important;
  }

  .navbar-nav .dropdown > .nav-link::before{
    right:0;
    font-size:10px;
  }

  .hr-btn{
    padding:10px 12px;
    font-size:12px;
  }

  .header-right{
    gap:12px;
  }

  .menu-svg{
    width:18px;
    height:18px;
  }

}

@media(max-width:1099px){
.navbar-nav .nav-link {
    font-size: 12px;
    padding: 10px 8px !important;
  }
}

/* =========================================================
TABLET
========================================================= */
@media(max-width:993px){
.header-menu{display: none;}
  .header-inner{
    padding:12px 15px;
  }
    .header-logo-wrapper{background: none; padding: 0;}

  .header-logo img{
    max-width:80%;
  }

  /* MOBILE MENU */
  .navbar-collapse{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    z-index:999;
    padding:10px 0;
    box-shadow:0 10px 20px rgba(0,0,0,0.08);
  }

  .navbar-nav{
    flex-wrap:wrap !important;
    width:100%;
  }

  .navbar-nav .nav-item{
    width:100%;
  }

  .navbar-nav .nav-link{
    padding:14px 18px !important;
    font-size:14px;
  }

  .dropdown-menu{
    position:static !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    display:none;
    width:100%;
    box-shadow:none;
  }

  .dropdown.show .dropdown-menu{
    display:block;
  }





  /* .hr-btn{
    display:none;
  } */

}

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

  .header-logo img{
    max-width:170px;
  }
  .offcanvas-area{width: 100%;}
  .icon-box{display: none;}

}


/* .banner-slider{
  height:100vh;
} */

.carousel-item{
  /* height:100vh; */
  position:relative;
  overflow:hidden;
}

/* IMAGE (IMPORTANT FIX) */
.carousel-item img{
 width:100%;
    /*height:100%;
  object-fit:cover;
  position:absolute; */
  top:0;
  left:0;
  z-index:1;
}

/* DARK OVERLAY */
.carousel-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:2;
}

/* CONTENT */
.banner-content{
  position:absolute;
  top:50%;
  left:8%;
  transform:translateY(-50%);
  color:#fff;
  max-width:40%;
  z-index:3;
}

/* TEXT ANIMATION */
.banner-caption,
.banner-content p,
.banner-content .br-btn{
  opacity:0;
  transform:translateY(40px);
  animation:fadeUp 1s forwards;
}

.banner-caption{ animation-delay:0.3s; }
.banner-content p{ animation-delay:0.6s; }
.banner-content .br-btn{ animation-delay:0.9s; }



.br-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
border-radius: 10px;
  padding:20px 28px;
  font-weight:600;



  color:#fff;
  border:1px solid var(--red2);
  background:var(--color1);

  overflow:hidden;
  z-index:1;

  transition:color 0.35s ease;
}

/* ===== SMOOTH SLIDING BACKGROUND ===== */
.br-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background-color: var(--red2);

  z-index:-1;

  /* 🔥 smoother easing */
  transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover */
.br-btn:hover::before{
  left:0;
}

/* text */
.br-btn:hover{
  color:#fff;
}

/* ICON SWAP */
.br-btn:hover .icon-first{
  transform:translateX(120%);
  opacity:0;
}

.br-btn:hover .icon-second{
  transform:translateX(0);
  opacity:1;
}





.kn-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
border-radius: 10px;
  padding:20px 28px;
  font-weight:600;



  color:#fff;
  border:1px solid var(--red2);
  background:var(--color1);

  overflow:hidden;
  z-index:1;

  transition:color 0.35s ease;
}

/* ===== SMOOTH SLIDING BACKGROUND ===== */
.kn-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background-color: var(--red2);

  z-index:-1;

  /* 🔥 smoother easing */
  transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover */
.kn-btn:hover::before{
  left:0;
}

/* text */
.kn-btn:hover{
  color:#fff;
}

/* ICON SWAP */
.kn-btn:hover .icon-first{
  transform:translateX(120%);
  opacity:0;
}

.kn-btn:hover .icon-second{
  transform:translateX(0);
  opacity:1;
}



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

/* TITLE */
.banner-caption{
  font-size:45px;
  font-weight:700;
  text-align: left;
}

/* BUTTON */
.banner-content .btn{
  background:var(--red1);
  border:none;
  padding:12px 28px;
  transition:0.3s;
}

.banner-content .btn:hover{
  background:#fff;
  color:#000;
  transform:translateY(-2px);
}

/* ZOOM EFFECT */
.carousel-item.active img{
  animation:zoom 6s ease-in-out;
}

@keyframes zoom{
  from{ transform:scale(1); }
  to{ transform:scale(1.1); }
}

/* ================= INDUSTRIE ARROWS ================= */
.carousel-control-prev,
.carousel-control-next{
  width:auto;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
  display:none;
}

/* CUSTOM BUTTON */
.carousel-btn{
  width:55px;
  height:55px;
  border:2px solid rgba(255,255,255,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.3s;
}

/* ARROW SHAPE */
.carousel-btn span{
  font-size:20px;
  color:#fff;
  transition:0.3s;
}

/* HOVER */
.carousel-btn:hover{
  background:var(--red1);
  border-color:var(--red1);
  transform:translateY(-2px);
}

.carousel-btn:hover span{
  color:#fff;
}

/* POSITION */
.carousel-control-prev{
  left:20px;
}
.carousel-control-next{
  right:20px;
}




.home-about-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.home-about-section .know-btn, .services-section .know-btn, .creative-portfolio .know-btn{margin-top: 30px;}
.home-about-shape-two {
  position: absolute;
  right: 0px;
  bottom: -0%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  /* filter: blur(2px); */
  transition: transform 0.4s ease;
}

/* creative animated background elements */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,106,26,0.2) 0%, rgba(255,200,140,0) 80%);
  top: -150px;
  right: -100px;
}

.orb-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,190,100,0.15) 0%, rgba(255,245,200,0) 80%);
  bottom: -200px;
  left: -150px;
}

.dotted-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc7a0 1.2px, transparent 1.2px);
  background-size: 32px 32px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* left column modern style */
.home-about-left {
  position: relative;
  padding-left: 30px;
  z-index: 2;
}

/* creative shape blob + parallax */
.home-about-shape {
  position: absolute;
  top: 0px;
  left: -20px;
  width: 160px;
  opacity: 0.7;
  z-index: 0;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.05));
  transition: filter 0.3s ease;
  pointer-events: none;
}

/* modern image styling */
.home-about-image {
  max-width: 100%;
  width: 100%;
  position: relative;
  z-index: 3;
  border-radius: 48px 24px 64px 24px;
  /* box-shadow: var(--shadow-floating); */
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1), filter 0.3s;
  filter: saturate(1.02) contrast(1.02);
}

.home-about-image:hover {
  transform: scale(1.01) rotate(0.5deg);
  filter: saturate(1.08) contrast(1.05);
}

/* decorative organic ring behind image */
.image-ring {
  position: absolute;
  top: 30px;
  left: -15px;
  width: 92%;
  height: 88%;
  border-radius: 48px 24px 64px 24px;
  border: 2px dashed rgba(255, 106, 26, 0.4);
  z-index: 1;
  pointer-events: none;
}

/* GLASS COUNTER CARD — MODERN & CREATIVE */
.counter-card {
  position: absolute;
  bottom: 10px;
  right: 0px;
  background: var(--color2);
  backdrop-filter: blur(12px);
  border-radius: 40px;
  padding: 1.4rem 1.8rem;
  width: 260px;
  /* box-shadow: 0 25px 40px -15px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255,255,240,0.7); */
  z-index: 10;
  transition: all 0.3s ease;
  /* border: 1px solid rgba(255,255,245,0.8); */
  color:#fff;
}

.counter-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 32px 48px -18px rgba(0, 0, 0, 0.25);
  background: var(--color1);
}

.counter-icon {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, rgba(2, 88, 38, 0.12), rgba(0, 65, 27, 0.08));
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: 0.2s;

}

.counter-icon i {
  font-size: 28px;
  color:#fff;
  background: linear-gradient(135deg, #fff, #fff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.counter-number {
  font-size: 44px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Space Grotesk', monospace;
  letter-spacing: -1px;
}

.counter-number span:first-child {
  background: linear-gradient(135deg, #fff, #fff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.counter-number span:last-child {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}

.counter-text {
  font-size: 15px;
  font-weight: 700;
    color:#fff;
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin-top: 8px;
}

.counter-text span {
  font-weight: 800;
  color: #fff;
}

/* RIGHT SIDE MODERN STYLES */
.subtitle {
  -webkit-text-stroke-color: rgba(1, 149, 63, 0.65);
  stroke: rgba(1, 149, 63, 0.65);
  letter-spacing: 4.6px;
  color: rgba(2, 1, 1, 0);
  -webkit-text-stroke-width: 1px;
  stroke-width: 1px;
  text-transform: uppercase;
}

.title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  margin: 20px 0 20px;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #151515 60%, #3a3a3a);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: left;
}

.highlight {
  background: linear-gradient(120deg, var(--red1), var(--red2));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
}

.highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 8px;
  background: rgba(193, 18, 31,0.25);
  border-radius: 8px;
  /* z-index: -1; */
}

.text-muted {
  color: #4a4a4a !important;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
}

.ab-list{display: flex;
  gap: 20px 60px;
  flex-wrap: wrap; margin-top: 40px;}
  .ab-list li{list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;}

.ab-list li i {
  border: 2px solid var(--color1);
  color: var(--color1);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* TABS — MODERN BORDERLESS + CREATIVE ANIMATION */

/* WRAPPER */
.industrial-tabs{
  display: flex;
  gap: 40px;
  border-bottom: 1px solid #e5e5e5;

}

/* BUTTON */
.industrial-tabs .nav-link{
  background: none;
  border: none;
  color: #888;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 0;
  position: relative;
  transition: 0.25s ease;
}

/* ACTIVE */
.industrial-tabs .nav-link.active{
  color: #111;
}

/* LINE */
.industrial-tabs .nav-link::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 3px;
  background: var(--primary);
  transition: 0.3s ease;
}

/* ACTIVE LINE */
.industrial-tabs .nav-link.active::after{
  width: 100%;
}

/* HOVER */
.industrial-tabs .nav-link:hover{
  color: #111;
}

/* ADD SEPARATION */
.industrial-tabs .nav-item{
  position: relative;
  padding-right: 25px;
  margin-right: 25px;
}

/* DIVIDER LINE */
.industrial-tabs .nav-item:not(:last-child)::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:18px;
  background:#ddd;
}

.industrial-tabs .nav-link{
  padding:10px 12px;
  border-radius:4px;
}

.industrial-tabs .nav-link:hover{
  background:#f5f5f5;
}



.tab-content {
  margin-top: 32px;
  background: rgba(255, 255, 255, 0.5);
  padding: 14px 0 10px 0;
  border-radius: 28px;
  transition: 0.2s;
}

.tab-pane {
  animation: fadeSlideUp 0.5s ease-out;
  font-size: 18px;
  color: #2c2c2c;
  line-height: 1.55;
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-pane p {
  margin-bottom: 0;
  font-weight: 450;
}

/* decorative floating accent lines */
.floating-accent {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,26,0.03), transparent);
  z-index: 0;
  pointer-events: none;
}

/* btn / optional modern micro-interaction */
@media (max-width: 991px) {
  .home-about-section {
    padding: 70px 0;
  }
  .title {
    font-size: 38px;
  }
  .counter-card {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 280px;
  }
  .home-about-left {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .image-ring {
    display: none;
  }
  .home-about-image {
    max-width: 90%;
  }
  .nav-pills .nav-link {
    margin-right: 1rem;
  }
}

@media (max-width: 576px) {
  .title {
    font-size: 32px;
  }
  .counter-card {
    padding: 1.2rem 1.5rem;
    width: 100%;
  }
  .nav-pills {
    gap: 0.75rem;
  }
  .nav-pills .nav-link {
    font-size: 0.9rem;
    margin-right: 0.5rem;
  }
}

/* For extra spark: smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* modern ripple on tab click (optional) */
.nav-link {
  transition: all 0.2s;
}

/* extra mouse parallax refinement */
.home-about-shape {
  transition: transform 0.05s linear;
  will-change: transform;
}

/* glow effects for modern taste */
.counter-card:hover .counter-icon i {
  filter: drop-shadow(0 2px 5px rgba(255,106,26,0.4));
}

/* creative additional shape (floating dot) */
.float-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ff6a1a;
  border-radius: 50%;
  opacity: 0.4;
  animation: pulseDot 2.2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.8); opacity: 0.2; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ================= SECTION ================= */
.services-section{
  background:#f7f7f7;
  padding:100px 0;
}

/* ================= CARD ================= */
.service-item{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  transition:0.4s;
  border:1px solid #eee;
  position:relative;
}

/* IMAGE */
.service-thumb{
  position:relative;
  overflow:hidden;
}

.service-thumb img{
  width:100%;
  height:240px;
  object-fit:cover;
  transition:0.6s;
}

/* OVERLAY */
.service-thumb::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:0;
  background:linear-gradient(transparent, rgba(255,122,0,0.3));
  transition:0.4s;
}

/* NUMBER */
.service-number{
  position:absolute;
  top:15px;
  left:15px;
  z-index:5;
  background:var(--red1);
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:6px 12px;
  border-radius:30px;
  box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

/* ================= NEW CONTENT DESIGN ================= */
.service-content{
  padding:28px;
  position:relative;
  background:#fff;
  overflow:hidden;
}

/* LEFT ACCENT LINE */
.service-content::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:0%;
  background:var(--red1);
  transition:0.4s;
}

/* ICON */
.service-icon{
  width:45px;
  height:45px;
  background:#fff3ea;
  color:var(--red1);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:18px;
  margin-bottom:15px;
  transition:0.3s;
}

/* TITLE */
.service-content h5{
  font-weight:700;
  font-size:18px;
  margin-bottom:6px;
}

/* TEXT */
.service-content p{
  font-size:16px;
  color:#666;
}

/* BUTTON */
.service-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color:#111;
  transition:0.3s;
  opacity:0;
  transform:translateY(10px);
}

/* ================= HOVER ================= */
.service-item:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.service-item:hover img{
  transform:scale(1.08);
}

.service-item:hover .service-thumb::after{
  height:100%;
}

.service-item:hover .service-content::before{
  height:100%;
}

.service-item:hover .service-icon{
  background:var(--red1);
  color:#fff;
}

.service-item:hover .service-btn{
  opacity:1;
  transform:translateY(0);
}

.service-btn:hover{
  color:var(--red1);
}

/* DOTS */
.owl-dots{
  text-align:center;
  margin-top:30px;
}

.owl-dot span{
  width:10px;
  height:10px;
  background:#ccc;
  display:block;
  border-radius:50%;
  margin:5px;
}

.owl-dot.active span{
  background:var(--red1);
}





/* ================= SECTION ================= */
.why-section{
  position:relative;
  overflow:hidden;
  padding:120px 0;
  background:url(../images/why-choose-bg.jpg) repeat;
}

/* GLOW SHAPES */
.why-section::before{
  content:'';
  position:absolute;
  width:500px;
  height:500px;
  background:var(--red1);
  border-radius:50%;
  top:-150px;
  left:-150px;
  opacity:0.15;
  filter:blur(120px);
}

.why-section::after{
  content:'';
  position:absolute;
  width:400px;
  height:400px;
  background:#3b82f6;
  border-radius:50%;
  bottom:-120px;
  right:-120px;
  opacity:0.12;
  filter:blur(120px);
}
.why-section .subtitle{-webkit-text-stroke-color: rgba(255, 255, 255, 1);
  stroke: rgba(255, 255, 255, 1);
  letter-spacing: 4.6px;
  color: rgba(223, 223, 223, 0);}


.why-section .title{color:#fff}


/* GLASS CARD */
.why-item{
  display:flex;
  gap:20px;
  padding:20px;
  margin-bottom:25px;
  border-radius:15px;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  transition:0.4s;
}

.why-item:hover{
  transform:translateX(10px) scale(1.02);
  background:rgba(255,122,0,0.1);
}

/* ICON */
.why-icon{
  width:60px;
  height:60px;
  background:linear-gradient(135deg,var(--red1),#fa6670);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,0.3);
}

/* TEXT */
.why-text h6{
  color:#fff;
  font-weight:700;
}

.why-text p{
  color:#fff;
  font-size:16px;
  margin:0;
}

/* VIDEO BOX */
.video-box{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}

/* IMAGE */
.video-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.7);
}

/* PLAY BUTTON */
.play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:90px;
  height:90px;
  background:var(--red1);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:26px;
  cursor:pointer;
}

/* PULSE */
.play-btn::before{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--red1);
  animation:pulse 1.5s infinite;
  z-index:-1;
}

@keyframes pulse{
  0%{transform:scale(1); opacity:0.6;}
  100%{transform:scale(1.6); opacity:0;}
}

/* MODAL VIDEO */
.modal iframe{
  width:100%;
  height:400px;
}

/* RESPONSIVE */
@media(max-width:991px){
  .video-box{
    margin-top:40px;
  }
}


/* ========== SECTION ========== */
.creative-portfolio {
  padding: 110px 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #eef2f6 100%);
  position: relative;
  isolation: isolate;
}

/* animated floating shapes */
.shape-robot {
  position: absolute;
  left: -20px;
  top: 12%;
  width: 140px;
  opacity: 0.3;
  pointer-events: none;
  animation: floatX 8s ease-in-out infinite;
}
.shape-gear1 {
  position: absolute;
  right: 3%;
  bottom: 8%;
  width: 100px;
  opacity: 0.25;
  pointer-events: none;
  animation: rotateSlow 25s linear infinite;
}
.shape-gear2 {
  position: absolute;
  left: 5%;
  bottom: 20%;
  width: 80px;
  opacity: 0.2;
  pointer-events: none;
  animation: rotateReverse 20s linear infinite;
}
@keyframes floatX {
  0% { transform: translateY(0px) translateX(0); }
  50% { transform: translateY(25px) translateX(10px); }
  100% { transform: translateY(0px) translateX(0); }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes rotateReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* title styling */
.section-badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red1);
  background: rgba(193, 18, 31,0.1);
  display: inline-block;
  padding: 6px 20px;
  border-radius: 40px;
  margin-bottom: 20px;
  backdrop-filter: blur(2px);
}
.main-heading {
  font-size: 52px;
  font-weight: 800;
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.2;
  color: #0a1927;
}
.orange-glow {
  color: var(--color1);
  position: relative;
  display: inline-block;
}
.orange-glow::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  height: 10px;
  background: rgba(193, 18, 31,0.2);
  border-radius: 10px;
  z-index: -1;
}

/* ========== CREATIVE CARD (neo-glass) ========== */
.portfolio-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 36px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  box-shadow: 0 20px 35px -12px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.6);
  margin: 12px 0;
  transform: translateY(0);
}
.portfolio-card:hover {
  transform: translateY(-12px);
  background: #ffffff;
  border-color: rgba(193, 18, 31,0.3);
  box-shadow: 0 35px 45px -18px rgba(0,0,0,0.15);
}

.card-media {
  overflow: hidden;
  position: relative;
}
.card-media img {
  width: 100%;
  transition: transform 0.7s ease, filter 0.4s;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.portfolio-card:hover .card-media img {
  transform: scale(1.08);
  filter: brightness(1.02);
}
/* creative overlay gradient */
.card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255,106,26,0), rgba(0,0,0,0.1));
  pointer-events: none;
  opacity: 0;
  transition: 0.3s;
}
.portfolio-card:hover .card-media::after {
  opacity: 0.5;
}

.card-content {
  padding: 26px 24px 30px;
  position: relative;
}
.card-tag  {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--red1);
  background: rgba(193, 18, 31,0.1);
  padding: 5px 14px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  transition: 0.2s;
}
.card-tag:hover {
  background: var(--red1);
  color: white;
}
.card-title {
  font-size: 18px;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  margin-top: 18px;
  margin-bottom: 0;
  width: 80%;
}
.card-title{
  color: #111827;
  text-decoration: none;
  transition: 0.2s;
}
.card-titlehover {
  color: var(--red2);
}
/* floating arrow icon */
.card-arrow {
  position: absolute;
  bottom: 26px;
  right: 24px;
  font-size: 26px;
  color: #d1d5db;
  transition: all 0.25s;
}
.portfolio-card:hover .card-arrow {
  color: var(--red2);
  transform: translateX(8px) translateY(-4px);
}

/* ========== OWL CAROUSEL CUSTOM ========== */
.owl-carousel .owl-item {
  padding: 8px 6px;
}

/* Dots - modern minimal */
/* .owl-dots {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.owl-dot {
  width: 40px;
  height: 5px;
  background: #cbd5e1;
  border-radius: 12px;
  transition: all 0.3s ease;
}
.owl-dot.active {
  background: linear-gradient(90deg, #ff6a1a, #ffb359);
  width: 65px;
}
.owl-dot span {
  display: none;
} */

/* Navigation arrows - creative */
.owl-nav {
  position: absolute;
  top: 45%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 12;
}
.owl-nav button {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(6px);
  width: 52px;
  height: 52px;
  border-radius: 60px !important;
  font-size: 24px !important;
  color: var(--color1) !important;
  border: 1px solid rgba(255,106,26,0.2) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.05);
  pointer-events: auto;
  transition: 0.25s;
}
.owl-nav button:hover {
  background: var(--color1) !important;
  color: white !important;
  transform: scale(1.08);
  border-color: var(--red2) !important;
}
.owl-prev {
  margin-left: -20px;
}
.owl-next {
  margin-right: -20px;
}

/* responsive tweaks */
@media (max-width: 992px) {
  .creative-portfolio {
    padding: 80px 0;
  }
  .main-heading {
    font-size: 40px;
  }
  .owl-nav {
    top: auto;
    bottom: -10px;
    transform: none;
    justify-content: center;
    gap: 24px;
    position: relative;
    margin-top: 30px;
  }
  .owl-prev, .owl-next {
    margin: 0;
  }
  .owl-nav button {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
}
@media (max-width: 576px) {
  .main-heading {
    font-size: 32px;
  }
  .card-title {
    font-size: 20px;
  }
  .card-content {
    padding: 20px 18px 24px;
  }
}

.client-section{
  padding:120px 0;
  overflow:hidden;
}

/* ================= CLIENT BOX ================= */

.client-box{
  position:relative;
  height:180px;
  border-radius:30px;
  background:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.5s ease;
  border:1px solid rgba(0,0,0,0.05);
  margin-top: 20px;
}

/* top glow */

.client-box::before{
  content:'';
  position:absolute;
  top:-100%;
  left:-20%;
  width:140%;
  height:220%;

  background:linear-gradient(
  120deg,
  transparent,
  rgba(255,255,255,0.9),
  transparent);

  transform:rotate(25deg);
  transition:.8s ease;
}

/* bottom gradient */

.client-box::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:0;

  background:linear-gradient(
  135deg,
  var(--color1),
  var(--color2));

  transition:.45s ease;
  z-index:1;
  opacity:.08;
}

/* logo */

.client-logo{
  position:relative;
  z-index:5;
}

.client-logo img{
  max-width:100%;
  max-height:100px;
  object-fit:contain;

  filter:grayscale(100%);
  opacity:.6;

  transition:.5s ease;
}

/* hover */

.client-box:hover{
  transform:translateY(-12px);
  /* box-shadow:
  0 25px 60px rgba(0,0,0,0.12); */
}

.client-box:hover::before{
  top:-40%;
  left:100%;
}

.client-box:hover::after{
  height:100%;
}

.client-box:hover img{
  filter:none;
  opacity:1;
  transform:scale(1.1);
}

/* ================= NAV ================= */

.client-section .owl-nav{
 bottom:-30% !important;
 transform: translateY(30%);
 top:auto;
  display:flex;
  justify-content:center;
  gap:16px;
  position: absolute;
}

.client-section .owl-nav button{
  width:58px;
  height:58px;
  border-radius:20px !important;
  border:none !important;
  background:#efefef !important;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:.4s;
}

.client-section .owl-nav button:hover{
  background:linear-gradient(
  135deg,
  var(--color1),
  var(--color2)) !important;

  transform:translateY(-5px);
}

.client-section .owl-nav button span{
  font-size:30px;
  color:#111;
}

.client-section .owl-nav button:hover span{
  color:#fff;
}

/* dots */

.client-section .owl-dots{
  margin-top:25px;
}

.client-section .owl-dot span{
  width:10px !important;
  height:10px !important;
  background:#ccc !important;
  transition:.4s;
}

.client-section .owl-dot.active span{
  width:32px !important;
  border-radius:30px;
  background:linear-gradient(
  90deg,
  var(--color1),
  var(--color2)) !important;
}

/* responsive */

@media(max-width:991px){

.main-title{
  font-size:32px;
}

.client-box{
  height:150px;
}

.client-logo img{
  max-width:110px;
}

}


/* ================= CTA (UNCHANGED) ================= */

.cta-section{
  position:relative;
  padding:60px 0 0;
  margin-top: 30px;
  z-index: 3;
}
.cta-section::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--red1),var(--red2),var(--red3));
}

.cta-box{
  position:relative;
  background:linear-gradient(135deg,var(--red1),var(--red2),var(--red3));
  border-radius:42px;
  overflow:hidden;
  padding:90px 80px;
  box-shadow:0 30px 80px rgba(234,85,1,.18);
}

.cta-box::before{
  content:'';
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  top:-260px;
  right:-180px;
  filter:blur(40px);
}

.cta-box::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to right,rgba(0,0,0,.16),rgba(0,0,0,.05));
}

.cta-content{
  position:relative;
  z-index:5;
}

.cta-subtitle{
  display:inline-block;
  padding:10px 20px;
  border-radius:30px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:25px;
}

.cta-title{
  font-size:62px;
  font-weight:800;
  line-height:1.12;
  color:#fff;
  margin-bottom:25px;
  text-align: left;
}

.cta-title span{
  color:#ffe0cc;
}

.cta-text{
  max-width:720px;
  color:rgba(255,255,255,.85);
  font-size:16px;
  line-height:1.8;
  margin-bottom:45px;
}

.cta-btn-wrap{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:18px 34px;
  border-radius:18px;
  text-decoration:none;
  font-weight:700;
  transition:.3s ease;
}

.cta-btn-primary{
  background:#fff;
  color:#111;
}

.cta-btn-primary:hover{
  transform:translateY(-4px);
}

.cta-circle{
  position:absolute;
  right:70px;
  bottom:60px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  display:flex;
  align-items:center;
  justify-content:center;
}

.cta-circle i{
  font-size:48px;
  color:#fff;
}










/* =========================================================
   BANNER RESPONSIVE
========================================================= */

@media(max-width:1600px){

.banner-content{
  max-width:48%;
}

.banner-caption{
  font-size:52px;
}

}

@media(max-width:1400px){

.banner-content{
  max-width:55%;
}

.banner-caption{
  font-size:46px;
}

}

@media(max-width:1199px){

.carousel-item{
  height:850px;
}

.banner-content{
  left:6%;
  max-width:65%;
}

.banner-caption{
  font-size:42px;
  line-height:1.2;
}

.banner-content p{
  font-size:16px;
}

}

@media(max-width:993px){

.carousel-item{
  height:720px;
}

.banner-content{
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  max-width:88%;
  width:100%;
  text-align:center;
}

.banner-caption{
  font-size:38px;
  text-align:center;
}

.banner-content p{
  font-size:15px;
}

.banner-btn{
  justify-content:center;
}

.carousel-btn{
  width:48px;
  height:48px;
}

}

@media(max-width:767px){

.carousel-item{
  height:650px;
}

.banner-content{
  max-width:82%;
}

.banner-caption{
  font-size:30px;
}

.banner-content p{
  font-size:14px;
  line-height:1.7;
}

.br-btn{
  padding:15px 22px;
  font-size:14px;
}

.carousel-control-prev{
  left:10px;
}

.carousel-control-next{
  right:10px;
}

.carousel-btn{
  width:42px;
  height:42px;
}

.carousel-btn span{
  font-size:16px;
}

}

@media(max-width:575px){

.carousel-item{
  height:580px;
}

.banner-caption{
  font-size:24px;
  line-height:1.3;
}

.banner-content p{
  font-size:13px;
}

.br-btn{
  padding:13px 18px;
  font-size:13px;
  border-radius:8px;
}

}

/* =========================================================
   COMMON TITLES
========================================================= */

@media(max-width:1199px){

.title,
.main-heading,
.cta-title{
  font-size:42px;
  text-align: center;
}

}

@media(max-width:991px){

.title,
.main-heading,
.cta-title{
  font-size:36px;
}

.subtitle{
  letter-spacing:3px;
  font-size:14px;
}

}

@media(max-width:767px){

.title,
.main-heading,
.cta-title{
  font-size:30px;
  line-height:1.3;
}

.subtitle{
  font-size:13px;
  letter-spacing:2px;
}

}

@media(max-width:575px){

.title,
.main-heading,
.cta-title{
  font-size:24px;
}

}

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

@media(max-width:1199px){

.home-about-section{
  padding:90px 0;
}

.counter-card{
  width:230px;
  padding:20px;
}

.counter-number{
  font-size:38px;
}

}

@media(max-width:991px){

.home-about-section{
  padding:70px 0;
}

.home-about-left{
  margin-bottom:50px;
}

.home-about-image{
  max-width:100%;
}

.counter-card{
  position:relative;
  width:100%;
  max-width:320px;
  right:auto;
  bottom:auto;
  margin:25px auto 0;
}

.industrial-tabs{
  gap:15px;
  flex-wrap:wrap;
}

.industrial-tabs .nav-item{
  margin-right:0;
  padding-right:0;
}

.industrial-tabs .nav-item::after{
  display:none;
}

.ab-list{
  gap:15px;
}

}

@media(max-width:767px){

.home-about-section{
  padding:60px 0;
}

.home-about-left{
  padding-left:0;
}

.home-about-shape{
  width:100px;
}

.counter-number{
  font-size:32px;
}

.counter-text{
  font-size:14px;
}

.industrial-tabs{
  gap:10px;
  justify-content: center;
}

.industrial-tabs .nav-link{
  font-size:14px;
  padding:8px 10px;
}

.text-muted,
.tab-pane{
  font-size:14px;
}
.ab-list{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:0;
  margin:0 auto;
  list-style:none;
  font-size: 13px;
  margin-top: 10px;
}
 .counter-icon{margin-left: auto; margin-right: auto;}
 .counter-number{justify-content: center;}
  .why-item{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .why-icon{
    margin: 0 auto;
  }

  .why-text{
    width: 100%;
  }

  .why-item:hover{
    transform: scale(1.02);
  }

}

@media(max-width:575px){

.home-about-section{
  padding:50px 0;
}

.counter-card{
  border-radius:24px;
  padding:18px;
}

.counter-icon{
  width:48px;
  height:48px;
}

.counter-icon i{
  font-size:20px;
}

.counter-number{
  font-size:28px;
}

.ab-list{
  flex-direction:column;
  gap:12px;
  padding-left:0;
}

}

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

@media(max-width:767px){

.kn-btn,
.br-btn{
  gap:8px;
}

.kn-btn svg,
.br-btn svg{
  width:16px;
  height:16px;
}

}

@media(max-width:575px){

.kn-btn{
  padding:13px 18px;
  font-size:13px;
}

}

/* =========================================================
   SERVICES SECTION
========================================================= */

@media(max-width:1199px){

.services-section{
  padding:90px 0;
}

}

@media(max-width:991px){

.services-section{
  padding:70px 0;
}

.service-thumb img{
  height:220px;
}

}

@media(max-width:767px){

.services-section{
  padding:60px 0;
}

.service-content{
  padding:22px;
}

.service-content h5{
  font-size:17px;
}

.service-content p{
  font-size:13px;
}

.service-btn{
  opacity:1;
  transform:none;
}

}

@media(max-width:575px){

.service-thumb img{
  height:200px;
}

.service-number{
  font-size:12px;
  padding:5px 10px;
}

}

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

@media(max-width:1199px){

.why-section{
  padding:90px 0;
}

}

@media(max-width:991px){

.why-section{
  padding:70px 0;
}

.video-box{
  margin-top:40px;
}

}

@media(max-width:767px){

.why-section{
  padding:60px 0;
}

.why-item{
  gap:15px;
  padding:16px;
}

.why-icon{
  width:50px;
  height:50px;
  font-size:18px;
  flex-shrink:0;
}

.why-text h6{
  font-size:15px;
}

.why-text p{
  font-size:13px;
}

.modal iframe{
  height:250px;
}

}

@media(max-width:575px){

.why-item{
  flex-direction:column;
  text-align:center;
}

.why-icon{
  margin:auto;
}

}

/* =========================================================
   PORTFOLIO SECTION
========================================================= */

@media(max-width:1199px){

.creative-portfolio{
  padding:90px 0;
}

.main-heading{
  font-size:44px;
}

}

@media(max-width:991px){

.creative-portfolio{
  padding:70px 0;
}

.main-heading{
  font-size:36px;
}

.shape-robot,
.shape-gear1,
.shape-gear2{
  display:none;
}

.owl-nav{
  position:relative;
  top:auto;
  transform:none;
  justify-content:center;
  gap:15px;
  margin-top:30px;
}

.owl-prev,
.owl-next{
  margin:0;
}

}

@media(max-width:767px){

.creative-portfolio{
  padding:60px 0;
}

.main-heading{
  font-size:30px;
}

.portfolio-card{
  border-radius:24px;
}

.card-content{
  padding:20px;
}

.card-title{
  width:100%;
  font-size:18px;
}

.card-arrow{
  position:relative;
  right:auto;
  bottom:auto;
  margin-top:15px;
}

.owl-nav button{
  width:42px;
  height:42px;
  font-size:18px !important;
}

}

@media(max-width:575px){

.main-heading{
  font-size:24px;
}

.section-badge{
  font-size:11px;
  letter-spacing:2px;
}

.card-tag{
  font-size:10px;
}

.card-title{
  font-size:16px;
}

}

/* =========================================================
   CLIENT SECTION
========================================================= */

@media(max-width:1199px){

.client-section{
  padding:90px 0;
}

}

@media(max-width:991px){

.client-section{
  padding:70px 0;
}

.client-box{
  height:150px;
}

.client-logo img{
  max-width:110px;
}

}

@media(max-width:767px){

.client-section{
  padding:60px 0;
}

.client-box{
  height:130px;
  border-radius:20px;
}

.client-logo img{
  max-width:90px;
  max-height:50px;
}

.client-section .owl-nav{
  position:relative;
  bottom:auto !important;
  transform:none;
  margin-top:25px;
}

.client-section .owl-nav button{
  width:46px;
  height:46px;
}

.client-section .owl-nav button span{
  font-size:22px;
}

}

/* =========================================================
   CTA SECTION
========================================================= */

@media(max-width:1199px){

.cta-box{
  padding:70px 60px;
}

.cta-title{
  font-size:50px;
}

}

@media(max-width:991px){

.cta-box{
  padding:60px 40px;
  border-radius:30px;
}

.cta-circle{
  width:100px;
  height:100px;
  right:30px;
  bottom:30px;
}

.cta-circle i{
  font-size:36px;
}

.cta-title{
  font-size:40px;
}

}

@media(max-width:767px){

.cta-section{
  padding-top:40px;
}

.cta-box{
  padding:50px 25px;
  border-radius:24px;
}

.cta-title{
  font-size:32px;
}

.cta-text{
  font-size:14px;
}

.cta-btn{
  width:100%;
  justify-content:center;
  padding:15px 22px;
}

.cta-circle{
  display:none;
}

}

@media(max-width:575px){

.cta-title{
  font-size:26px;
}

.cta-subtitle{
  font-size:11px;
  letter-spacing:1px;
}

}

/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media(max-width:380px){

.banner-caption{
  font-size:20px;
}

.title,
.main-heading,
.cta-title{
  font-size:22px;
}

.br-btn,
.kn-btn{
  width:100%;
  justify-content:center;
}

.service-content{
  padding:18px;
}

}






/* ================= FOOTER ================= */

.footer{
  background:var(--dark);
 
  padding:100px 0 0;
  position: relative;
  z-index: 2;
}

.home-footer{ margin-top:-70px;   padding:180px 0 0;}



.footer-logo{
  color:#fff;
  font-size:36px;
  font-weight:800;
  margin-bottom:25px;
}

.footer-logo span{
  color:var(--red1);
}

.footer-text{
  color:#9c9c9c;
  line-height:1.9;
  margin-bottom:30px;
}

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

.social-links a{
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(255,255,255,.06);
  text-decoration:none;
  transition:.3s;
}

.social-links a:hover{
  background:linear-gradient(135deg,var(--red1),var(--red2));
  transform:translateY(-4px);
}

/* titles */

.footer-title{
  color:#fff;
  font-size:22px;
  font-weight:700;
  margin-bottom:35px;
}

.footer-title::after{
  content:'';
  display:block;
  width:55px;
  height:3px;
  margin-top:12px;
  background:linear-gradient(90deg,var(--red1),var(--red2));
}

/* links */

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

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

.footer-links a{
  display:flex;
  align-items:center;
  gap:10px;
  color:#9c9c9c;
  text-decoration:none;
  transition:.3s ease;
}

.footer-links a i{
  font-size:13px;
  color:var(--red1);
  transition:.3s;
}

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

.footer-links a:hover i{
  color:#fff;
  transform:rotate(90deg);
}

/* ================= CONTACT HOVER (NEW) ================= */

.contact-item{
  display:flex;
  gap:18px;
  margin-bottom:25px;
}

.contact-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transition:.3s;
}

.contact-text h6{
  color:#fff;
  margin-bottom:6px;
}

.contact-text p{
  margin:0;
  color:#727375;
}

.contact-text a{
  color:#9c9c9c;
  text-decoration:none;
  position:relative;
  display:inline-block;
  transition:0.3s ease;
}

/* underline */
.contact-text a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:linear-gradient(90deg,var(--red1),var(--red2));
  transition:0.3s ease;
  border-radius:10px;
}

/* hover */
.contact-text a:hover{
  color:#fff;
  transform:translateX(4px);
}

.contact-text a:hover::after{
  width:100%;
}

/* icon glow on hover */
.contact-item:hover .contact-icon{
  background:linear-gradient(135deg,var(--red1),var(--red2));
  box-shadow:0 10px 25px rgba(234,85,1,.25);
}

/* footer bottom */

.footer-bottom{
  margin-top:70px;
  border-top:1px solid rgba(255,255,255,.08);
  padding:28px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.footer-copy,
.footer-powered{
  color:#888;
  font-size:15px;
}
.footer-copy a{color:#888;   text-decoration:none;
  transition:0.3s ease;}

.footer-powered a{
  color:#fff;
  text-decoration:none;
  transition:0.3s ease;
}

.footer-copy a:hover, .footer-powered a:hover{
  color:var(--color2);
}

/* ================= LARGE TABLET ================= */

@media(max-width:1001px){
.footer{font-size: 14px;}
.contact-icon{display: none;}
}

@media(max-width:993px){

.footer{text-align: center;}
.footer-title{margin-bottom: 10px;}
.footer-title::after{margin-left: auto; margin-right: auto;}
.footer-logo img{margin-left: auto; margin-right: auto;}
.footer-text{text-align: center;}
.social-links{justify-content: center; margin-bottom: 15px;}
.footer-links{display: flex; flex-wrap: wrap; justify-content: center; column-gap: 10px;}
.footer-links a{gap: 5px;}
 /* .contact-item{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    max-width:320px;
    margin:0 auto 25px;
    text-align:left;
  } */
   .contact-item{justify-content: center;}

  .contact-icon{
    /* flex-shrink:0; */
    display: flex;
  }

  

  .home-footer{
    margin-top:60px;
    padding:100px 0 0;
  }

  .footer{
    padding:80px 0 0;
  }

  .footer-title{
    margin-bottom:25px;
  }
  .footer-bottom{flex-direction: column; margin-top: 0;}
.icon-box svg{right: 0;}
}

/* ================= TABLET ================= */

@media(max-width:767px){

  .footer{
    padding:70px 0 0;
  }

  .home-footer{
    padding:70px 0 0;
  }

  .footer-logo{
    text-align:center;
  }

  .footer-logo img{
    max-width:190px;
  }

  .footer-text{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }

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

  .footer-title{
    font-size:20px;
    margin-bottom:22px;
  }

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

  .contact-item{
    gap:15px;
  }

  .contact-icon{
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:14px;
  }

  .footer-bottom{
    flex-direction:column;
    text-align:center;
    padding:22px 0;
 
  }

  .footer-copy,
  .footer-powered{
    width:100%;
  }

}

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

@media(max-width:575px){

  .footer{
    padding:60px 0 0;
  }

  .footer-title{
    font-size:19px;
  }

  .footer-text{
    font-size:15px;
    line-height:1.8;
  }

  .footer-links a{
    font-size:15px;
  }

  .contact-text h6{
    font-size:15px;
  }

  .contact-text p,
  .contact-text a{
    font-size:14px;
    word-break:break-word;
  }

  .social-links a{
    width:44px;
    height:44px;
    border-radius:14px;
  }

  .footer-copy,
  .footer-powered{
    font-size:13px;
    line-height:1.7;
  }

}





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

.hero-section{
    padding-top:130px;
    background:
    linear-gradient(to right,#fff 58%, #111315 42%);
}

.hero-left{
    padding-right:60px;
}

.hero-badge{
    display:inline-block;
    padding:12px 24px;
    border-radius:50px;
    background:#fddadd;
    color:var(--color1);
    font-weight:700;
    margin-bottom:35px;
}

.hero-title span{
    color:var(--color1);
}

.hero-info{
    margin-top:45px;
}

.hero-info-box{
    border-left:4px solid var(--color1);
    padding-left:20px;
    margin-bottom:25px;
}

.hero-info-box h5{
    font-size:18px;
    font-weight:800;
}

.hero-right{
    position:relative;
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
}

.hero-main-img{
    width:80%;
    border-radius:40px;
    overflow:hidden;
    position:relative;
}

.hero-main-img img{
    width:100%;
    height:auto;
    display:block;
}

.hero-small-img{
    position:absolute;
    width:260px;
    left:0;
    bottom:40px;
    border-radius:30px;
    overflow:hidden;
    border:12px solid #fff;
}
.hero-small-img img{width: 100%;}

.hero-floating{
    position:absolute;
    bottom:30px;
    right:20px;
    background:#fff;
    border-radius:25px;
    padding:25px;
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.hero-floating h2{
    font-size:58px;
    font-weight:900;
    color:var(--color1);
    margin:0;
}

/* =========================
ABOUT
========================= */
.sub-title{
    color:var(--color1);
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:18px;
}

.main-title{
    font-size:72px;
    line-height:1;
    font-weight:900;
    margin-bottom:25px;
}
.text-custom{
    color:var(--text);
    line-height:2;
    font-size:16px;
}


.custom-section{
    padding:60px 0;
    position:relative;
}
.about-section{
    background:#fff;
}

.about-image{
    border-radius:40px;
    overflow:hidden;
}

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

.about-right{
    padding-left:50px;
}

/* =========================
CAPABILITIES
========================= */

.capability-section{
    background:var(--light);
}

.capability-card{
    background:#fff;
    border-radius:35px;
    overflow:hidden;
    height:100%;
    transition:0.4s;
}

.capability-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.capability-top{
    padding:40px 40px 20px;
}

.capability-number{
    font-size:60px;
    line-height:1;
    font-weight:900;
    color:#eceff4;
    margin-bottom:20px;
}

.capability-card h4{
    font-size:32px;
    font-weight:900;
    margin-bottom:20px;
}

.capability-image{
    /* height:240px; */
}

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

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

.stats-section{
    background:#111315;
    color:#fff;
}

.stats-title{
    color:#fff;
}

.stats-card{
    border:1px solid rgba(255,255,255,0.08);
    border-radius:35px;
    padding:45px;
    height:100%;
}

.stats-number{
    font-size:80px;
    line-height:1;
    font-weight:900;
    color:var(--color1);
    margin-bottom:18px;
}

.stats-card p{
    color:#d2d2d2;
    line-height:1.9;
}

/* =========================
VENDOR
========================= */

.vendor-section{
    background:#fff;
}

.vendor-box{
    background:#fff;
    border:1px solid #ececec;
    border-radius:24px;
    padding:35px 20px;
    text-align:center;
    font-weight:800;
    transition:0.4s;
}

.vendor-box:hover{
    background:var(--color1);
    color:#fff;
    transform:translateY(-8px);
}

/* =========================
VISION
========================= */

.vision-section{
    background:var(--light);
}

.vm-card{
    background:#fff;
    border-radius:40px;
    overflow:hidden;
    height:100%;
}

.vm-image{
    height:320px;
}

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

.vm-content{
    padding:45px;
}

.vm-content h3{
    font-size:42px;
    font-weight:900;
    margin-bottom:22px;
}

/* =========================
QEHS
========================= */

.qehs-section{
    background:#fff;
}

.qehs-top{
    max-width:900px;
    margin:auto;
    margin-bottom:70px;
}

.qehs-main-title{
    margin-bottom:25px;
}

.qehs-top-text{
    color:var(--text);
    line-height:2;
    font-size:17px;
}

/* ISO */

.iso-wrapper{
    background:#111315;
    border-radius:45px;
    overflow:hidden;
    margin-bottom:60px;
}

.iso-left{
    background:linear-gradient(135deg,var(--color1),#fe4e5a);
    height:100%;
    min-height:420px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    padding:40px;
}

.iso-circle{
    width:130px;
    height:130px;
    border:3px solid rgba(255,255,255,0.3);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    font-weight:900;
    margin-bottom:25px;
}

.iso-left h3{
    font-size:58px;
    font-weight:900;
    margin-bottom:10px;
}

.iso-left span{
    font-size:18px;
    opacity:0.9;
}

.iso-right{
    padding:70px;
    color:#fff;
}

.iso-right h4{
    font-size:42px;
    font-weight:900;
    margin-bottom:25px;
}

.iso-right p{
    color:#d5d5d5;
    line-height:2;
    margin-bottom:35px;
}

.iso-info-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.iso-info-box{
    background:#1b1f24;
    padding:25px;
    border-radius:24px;
    min-width:200px;
}

.iso-info-box label{
    display:block;
    color:#9ca3af;
    margin-bottom:10px;
    font-size:14px;
}

.iso-info-box h5{
    margin:0;
    font-size:24px;
    font-weight:800;
}

/* POLICY */

.policy-section{
    background:#f6f7fb;
    border-radius:45px;
    padding:70px;
}

.policy-head{
    margin-bottom:50px;
}

.policy-head h3{
    font-size:52px;
    font-weight:900;
    margin-bottom:15px;
}

.policy-head p{
    color:var(--color1);
    font-size:20px;
    font-weight:700;
}

.policy-box{
    background:#fff;
    border-radius:30px;
    padding:35px;
    display:flex;
    gap:25px;
    height:100%;
    transition:0.4s;
}

.policy-box:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,0.06);
}

.policy-number{
    font-size:70px;
    line-height:1;
    font-weight:900;
    color:#eceff4;
    flex-shrink:0;
}

.policy-box h5{
    font-size:28px;
    font-weight:900;
    margin-bottom:15px;
}

.policy-box p{
    color:var(--text);
    line-height:1.9;
    margin:0;
}

.large-box{
    align-items:center;
}

/* RESPONSIVE */

@media(max-width:991px){

.qehs-main-title{
    font-size:44px;
}

.iso-right{
    padding:35px;
}

.policy-section{
    padding:35px;
}

.policy-head h3{
    font-size:30px;
}

.policy-box{
    flex-direction:column;
}

.iso-info-box{
    width:100%;
}

}

/* ========================= */




.fabrication-hero{
    position:relative;
    padding:150px 0;
    overflow:hidden;
    background:
    linear-gradient(rgba(255,255,255,0.92),rgba(255,255,255,0.92)),
    url('../images/modern-metal-works-llc-fabrication-bg.jpg');
    background-size:cover;
    background-position:center;
}
.steel-hero{background:
    linear-gradient(rgba(255,255,255,0.92),rgba(255,255,255,0.92)),
    url('../images/modern-metal-works-llc-steel-fabrication-bg.jpg');}

    .installation-hero{background:
    linear-gradient(rgba(255,255,255,0.92),rgba(255,255,255,0.92)),
    url('../images/modern-metal-works-llc-installation-bg.jpg');}
    .maintenance-hero{background:
    linear-gradient(rgba(255,255,255,0.92),rgba(255,255,255,0.92)),
    url('../images/modern-metal-works-llc-maintenance-bg.jpg');}

       .quality-hero{background:
    linear-gradient(rgba(255,255,255,0.92),rgba(255,255,255,0.92)),
    url('../images/modern-metal-works-llc-quality-assurance-bg.jpg');}

.fabrication-hero::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:420px;
    height:420px;
    background:rgba(234,85,1,0.08);
    border-radius:50%;
}

.fabrication-hero::after{
    content:"";
    position:absolute;
    bottom:-140px;
    left:-140px;
    width:420px;
    height:420px;
    background:rgba(1,149,63,0.08);
    border-radius:50%;
}

.fabrication-hero-content{
    position:relative;
    z-index:2;
}

.fabrication-tag{
    display:inline-block;
    padding:12px 24px;
    border-radius:50px;
    background:#fff;
    border:1px solid #ececec;
    font-size:14px;
    font-weight:700;
    color:var(--color1);
    margin-bottom:30px;
}

.fabrication-title{
    font-size:88px;
    line-height:0.95;
    font-weight:900;
    margin-bottom:35px;
}

.fabrication-title span{
    color:var(--color1);
}

.fabrication-desc{
    max-width:760px;
    font-size:18px;
    line-height:2;
    color:#5f6672;
}

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

.fabrication-about{
    background:#fff;
}

.about-image-wrap{
    position:relative;
    padding-right:0;
}

.about-main-img{
    border-radius:40px;
    overflow:hidden;
    position:relative;
}

.about-main-img img{
    /* height:620px; */
    object-fit:cover;
}

.about-small-img{
    position:absolute;
    width:50%;
    right:-30px;
    bottom:35px;
    border-radius:28px;
    overflow:hidden;
    border:8px solid #fff;
    box-shadow:0 20px 45px rgba(0,0,0,0.12);
}

.about-small-img img{
    height:220px;
    object-fit:cover;
}

.fabrication-about-content{
    padding-left:40px;
}

.fabrication-list{
    margin-top:40px;
}

.fabrication-list-item{
    display:flex;
    gap:18px;
    margin-bottom:28px;
}

.fabrication-icon{
    min-width:60px;
    height:60px;
    border-radius:20px;
    background:#fff5ef;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color1);
    font-size:26px;
    font-weight:900;
}

.fabrication-list-item h4{
    font-size:24px;
    font-weight:800;
    margin-bottom:10px;
}

/* =========================
PROCESS
========================= */

.process-section{
    background:var(--light);
}

.process-card{
    background:#fff;
    border-radius:35px;
    padding:55px 40px;
    height:100%;
    transition:0.4s;
    border:1px solid #ececec;
    position:relative;
    overflow:hidden;
}

.process-card::before{
    content:"";
    position:absolute;
    top:-70px;
    right:-70px;
    width:180px;
    height:180px;
    background:rgba(234,85,1,0.06);
    border-radius:50%;
}

.process-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

.process-number{
    font-size:90px;
    line-height:1;
    font-weight:900;
    color:#eef1f4;
    margin-bottom:20px;
}

.process-card h3{
    font-size:30px;
    font-weight:900;
    margin-bottom:20px;
}

/* =========================
CTA
========================= */

.services-cta-section{
    background:#fff;
}

.fabrication-cta{
    position:relative;
    padding:85px 70px;
    border-radius:45px;
    overflow:hidden;
    background:linear-gradient(135deg,#fff8f4 0%, #ffffff 100%);
    border:1px solid #f3e5db;
}

.fabrication-cta::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:260px;
    height:260px;
    background:rgba(234,85,1,0.08);
    border-radius:50%;
}

.fabrication-cta-content{
    position:relative;
    z-index:2;
}

.fabrication-cta h2{
    font-size:58px;
    font-weight:900;
    margin-bottom:25px;
}

.fabrication-cta p{
    max-width:760px;
    font-size:17px;
    line-height:2;
    color:#5f6672;
    margin-bottom:35px;
}

.fabrication-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 34px;
    border-radius:60px;
    background:var(--color1);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    transition:0.4s;
}

.fabrication-btn:hover{
    background:var(--color2);
    color:#fff;
    transform:translateY(-4px);
}



/* HERO */
.tech-hero{
    background:linear-gradient(135deg,#fff,#fff7f3);
    padding:60px 0;
}

.sub-title{
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--color1);
    margin-bottom:20px;
    text-transform:uppercase;
}

.main-title{
    font-size:58px;
    font-weight:900;
    margin-bottom:20px;
}

.text-custom{
    font-size:16px;
    line-height:2;
    color:var(--text);
}

/* CARD */
.tech-card{
    border:1px solid #eee;
    border-radius:20px;
    padding:30px;
    height:100%;
    transition:0.3s;
    background:#fff;
}

.tech-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.tech-card h4{
    font-size:20px;
    font-weight:800;
    margin-bottom:10px;
}

.section-bg{
    background:var(--light);
}

/* ===== QUALITY NEW DESIGN ===== */

.quality-card{
    border:1px solid #eee;
    border-radius:22px;
    padding:28px;
    background:#fff;
    height:100%;
    transition:0.35s;
    position:relative;
    overflow:hidden;
}

.quality-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

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

.q-number{
    width:45px;
    height:45px;
    border-radius:14px;
    background:#fff3ec;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    color:var(--color1);
}

.q-number.green{
    background:#eaf9f0;
    color:var(--color2);
}

.quality-card h4{
    font-size:18px;
    font-weight:900;
    margin:0;
}

.quality-card p{
    margin:0;
    font-size:15px;
    line-height:1.9;
    color:var(--text);
}
















@media(max-width:993px){

.custom-section{
    padding:70px 0;
}

.hero-section{
    background:#fff;
}

.main-title{
    font-size:30px;
}

.hero-left{
    padding-right:0;
}

.hero-right{
    min-height:auto;
    margin-top:60px;
    display: block;
}


.hero-main-img,
.hero-small-img{
    position:relative;
    width:100%;
}

.hero-small-img{
    margin-top:25px;
    border-width:0;
    width: 50%;
    margin-top: -5%;
}
.hero-floating{position: relative; margin-left: auto; margin-right: auto; display: block; bottom: 0; right:0;}

/* .hero-floating{
    display:none;
} */

.about-right{
    padding-left:0;
    margin-top:40px;
}

.qehs-content{
    padding:35px;
}

.qehs-title{
    font-size:42px;
}

}



/* HEADER */
.header-section{
    background:linear-gradient(135deg,var(--color1),#fe4e5a);
    color:#fff;
    padding:90px 0;
    position:relative;
    overflow:hidden;
    border-bottom: 5px solid var(--color2);

    
}

.header-section::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(255,255,255,0.08);
    border-radius:50%;
    top:-80px;
    right:-80px;
}

.header-section::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:rgba(0,0,0,0.1);
    border-radius:50%;
    bottom:-100px;
    left:-100px;
}

.header-section h1{
    font-weight:900;
    letter-spacing:1px;
}

.header-section p{
    opacity:0.9;
}

/* SECTION */
.organization-section{
    padding:80px 0 ;
   
}
.capability-section{padding-top: 60px;}

/* ROW FIX (IMPORTANT) */
.equal-row{
    display:flex;
    flex-wrap:wrap;
}

/* COLUMN FIX */
.equal-col{
    display:flex;
}

/* CARD FIX */
.organization-card{
    flex:1;
    display:flex;
    flex-direction:column;

    background:#fff;
    border:none;
    border-radius:14px;
    padding:24px;

    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    transition:0.3s;
}

.organization-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 25px rgba(0,0,0,0.1);
}

/* NUMBER */
.category-number{
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--color2);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    margin-bottom:15px;
}

/* TITLE */
.organization-card-title{
    font-weight:800;
    color:var(--color1);
    padding-bottom:10px;
    border-bottom:2px solid #eee;
    margin-bottom:15px;
}

/* LIST */
.list-group-item{
    border:none;
    padding:8px 0;
    background:transparent;
}

.role-name{
    font-weight:600;
    color:var(--dark);
    display:block;
}

.role-desc{
    font-size:14px;
    color:var(--text);
}

.flex-grow{
    flex:1;
}

.badge-misfah{
    background:var(--color2);
}


.project-summary{
    padding:90px 0;
    position:relative;
    background: #f5f7fa;
}



.section-title{
    text-align:center;
    margin-bottom:70px;
    position:relative;
    z-index:2;
}

.section-title span{
    display:inline-block;
    padding:10px 24px;
    background:rgba(193, 18, 31,0.08);
    border:1px solid rgba(193, 18, 31,0.15);
    border-radius:50px;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:20px;
    color:var(--color1);
    font-weight:700;
    backdrop-filter:blur(10px);
}

.section-title h2{
    font-size:52px;
    font-weight:800;
    margin-bottom:18px;
    color:#111;
}

.section-title p{
    max-width:750px;
    margin:auto;
    color:#666;
    line-height:1.8;
    font-size:17px;
}

/*========================
PROJECT CARD
========================*/

.project-card{
    position:relative;
    background:rgba(255,255,255,0.88);
    border:1px solid rgba(0,0,0,0.06);
    border-radius:28px;
    padding:35px;
    height:100%;
    overflow:hidden;
    transition:0.4s ease;
    backdrop-filter:blur(12px);
    z-index:2;
    box-shadow:0 10px 35px rgba(0,0,0,0.06);
}

.project-card:hover{
    transform:translateY(-10px);
    border-color:rgba(234,85,1,0.20);
    box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

.project-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,var(--color1),var(--color2));
}

.project-number{
    position:absolute;
    top:20px;
    right:25px;
    font-size:60px;
    font-weight:900;
    color:rgba(0,0,0,0.04);
    line-height:1;
}

.project-card h4{
    font-size:24px;
    font-weight:700;
    margin-bottom:20px;
    line-height:1.4;
    color:#111;
    padding-right:40px;
}

.project-meta{
    margin-bottom:25px;
}

.project-meta div{
    margin-bottom:12px;
    color:#666;
    font-size:15px;
    line-height:1.7;
}

.project-meta strong{
    color:#111;
    min-width:95px;
    display:inline-block;
}

.project-value{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 24px;
    border-radius:50px;
    background:linear-gradient(45deg,var(--color1),var(--color2));
    font-size:18px;
    font-weight:700;
    color:#fff;
    margin-top:10px;
    box-shadow:0 10px 25px rgba(234,85,1,0.20);
}

/*========================
RESPONSIVE
========================*/

@media(max-width:991px){

.section-title h2{
    font-size:38px;
}

.project-card{
    padding:28px;
}

}

@media(max-width:576px){

.project-summary{
    padding:70px 0;
}

.section-title{
    margin-bottom:50px;
}

.section-title h2{
    font-size:30px;
}

.section-title p{
    font-size:15px;
}

.project-number{
    font-size:45px;
}

.project-card h4{
    font-size:21px;
}

}


.clients-section{
    padding:100px 0;
    position:relative;
    background: #f8f9fb;
}



/*========================
TITLE
========================*/



/*========================
CLIENT CARD
========================*/

.client-card{
    position:relative;
    background:#fff;
    border-radius:35px;
    overflow:hidden;
    height:100%;
    box-shadow:0 18px 45px rgba(0,0,0,0.05);
    border:1px solid rgba(0,0,0,0.05);
    transition:0.4s ease;
    z-index:2;
}

.client-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 65px rgba(0,0,0,0.10);
}

/*========================
TOP
========================*/

.client-top{
    position:relative;
    padding:40px;
    background:linear-gradient(135deg,var(--color1),var(--color2));
    color:#fff;
    overflow:hidden;
}

.client-top::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    top:-120px;
    right:-100px;
}

.client-no{
    position:absolute;
    top:20px;
    right:25px;
    font-size:70px;
    font-weight:900;
    color:rgba(255,255,255,0.12);
    line-height:1;
}

.client-top h3{
    font-size:32px;
    font-weight:800;
    margin-bottom:12px;
    position:relative;
    z-index:2;
}

.client-top span{
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    position:relative;
    z-index:2;
    opacity:0.9;
}

/*========================
BODY
========================*/

.client-body{
    position:relative;
    padding:32px 38px 38px;
    background:#fff;
}

/* LIST */

.client-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:30px;
}

/* ITEM */

.client-item{
    position:relative;
    padding-left:24px;
    color:#555;
    font-size:15px;
    line-height:1.8;
    font-weight:500;
}

.client-item::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:linear-gradient(45deg,var(--color1),var(--color2));
    box-shadow:0 0 0 5px rgba(234,85,1,0.08);
}

/* TAGS */

.client-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    padding-top:24px;
    border-top:1px solid #eceff3;
}

.client-tags span{
    padding:10px 18px;
    border-radius:50px;
    background:#f5f7fa;
    border:1px solid #e8ebef;
    font-size:13px;
    font-weight:700;
    color:#444;
    transition:0.3s;
}

.client-tags span:hover{
    background:linear-gradient(45deg,var(--color1),var(--color2));
    color:#fff;
    border-color:transparent;
    transform:translateY(-2px);
}

/* FEATURE CARD */

.feature-card .client-top{
    min-height:220px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

/*========================
RESPONSIVE
========================*/

@media(max-width:991px){

.section-title h2{
    font-size:42px;
}

.client-top{
    padding:32px;
}

.client-body{
    padding:30px;
}

.client-top h3{
    font-size:26px;
}

}

@media(max-width:576px){

.clients-section{
    padding:70px 0;
}

.section-title{
    margin-bottom:55px;
}

.section-title h2{
    font-size:32px;
}

.section-title p{
    font-size:15px;
}

.client-top{
    padding:26px;
}

.client-body{
    padding:24px;
}

.client-top h3{
    font-size:23px;
}

.client-no{
    font-size:52px;
}

.client-item{
    font-size:14px;
}

}


.portfolio-gallery{
    position:relative;
    padding:80px 0;
    overflow:hidden;
}

.portfolio-gallery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,var(--color2),var(--color1));
}





/* =========================
PROJECT BLOCK
========================= */

.project-block{
    margin-bottom:80px;
    position:relative;
    z-index:2;
    padding-top:30px;
}

/* elegant divider */

.project-block::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(
        to right,
        transparent,
        rgba(0,0,0,0.08),
        transparent
    );
}

/* =========================
PROJECT HEADER
========================= */

.project-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    flex-wrap:wrap;
    margin-bottom:45px;
}

.project-title{
    flex:1;
    position:relative;
    padding-left:22px;
}

/* vertical accent */

.project-title::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:5px;
    height:72%;
    border-radius:30px;
    background:linear-gradient(
        to bottom,
        var(--color1),
        var(--color2)
    );
}

.project-title h3{
    font-size:40px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:-0.5px;
    margin-bottom:14px;
    color:#111;
}

.project-title h3 span{
    color:var(--color1);
    margin-right:6px;
    opacity:.9;
}

.project-title p{
    color:#5d5d5d;
    line-height:1.9;
    font-size:15px;
    max-width:950px;
}

/* =========================
BADGE
========================= */

.project-badge{
    padding:14px 24px;
    border-radius:20px;
    background:rgba(255,255,255,0.8);
    backdrop-filter:blur(10px);
    border:1px solid rgba(0,0,0,0.06);
    box-shadow:0 10px 35px rgba(0,0,0,0.05);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#111;
    display:none;
}

/* =========================
GRID
========================= */

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

/* =========================
CARD
========================= */

.gallery-card{
    position:relative;
    border-radius:30px;
    overflow:hidden;
    background:#fff;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.05),
        0 2px 10px rgba(0,0,0,0.03);
    transition:.5s ease;
}

/* staggered rhythm */

.gallery-card:nth-child(even){
    transform:translateY(12px);
}

.gallery-card:hover{
    transform:translateY(-12px);
    box-shadow:
        0 25px 70px rgba(0,0,0,0.12),
        0 5px 20px rgba(0,0,0,0.04);
}

.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:1s ease;
    filter:brightness(.95);
}

.gallery-card:hover img{
    transform:scale(1.08);
    filter:brightness(1.02);
}

/* varying card feel */

.gallery-card:nth-child(3n){
    border-radius:38px;
}

.gallery-card:nth-child(4n){
    filter:saturate(1.05);
}

/* =========================
OVERLAY
========================= */

.gallery-overlay{
    position:absolute;
    inset:0;
    padding:26px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.35) 55%,
        transparent 100%
    );
    transition:.4s ease;
}

/* smoother hover overlay */

.gallery-card:hover .gallery-overlay{
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.98) 0%,
        rgba(0,0,0,0.45) 60%,
        transparent 100%
    );
}

.gallery-overlay span{
    display:inline-block;
    width:max-content;
    padding:8px 15px;
    border-radius:50px;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(12px);
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:14px;
}

.gallery-overlay h5{
    color:#fff;
    font-size:19px;
    font-weight:800;
    line-height:1.5;
    margin:0;
    transform:translateY(8px);
    transition:.4s ease;
}

.gallery-card:hover .gallery-overlay h5{
    transform:translateY(0);
}

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

.gallery-btn{
    position:absolute;
    top:18px;
    right:18px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    transition:.4s ease;
}

.gallery-btn:hover{
    background:linear-gradient(
        45deg,
        var(--color1),
        var(--color2)
    );
    color:#fff;
    transform:rotate(90deg) scale(1.08);
}





/* =========================
RESPONSIVE
========================= */

@media(max-width:1199px){

.gallery-grid{
    grid-template-columns:repeat(3,1fr);
}

.section-title h2{
    font-size:46px;
}

}

/* ========================= */

@media(max-width:991px){

.portfolio-gallery{
    padding:90px 0;
}

.project-header{
    margin-bottom:35px;
}

.project-title h3{
    font-size:32px;
}

.section-title{
    margin-bottom:70px;
}

.section-title h2{
    font-size:38px;
}

.gallery-grid{
    grid-template-columns:repeat(2,1fr);
}

}

/* ========================= */

@media(max-width:576px){

.portfolio-gallery{
    padding:75px 0;
}

.project-block{
    margin-bottom:90px;
}

.project-title{
    padding-left:18px;
}

.project-title::before{
    width:4px;
}

.project-title h3{
    font-size:24px;
    line-height:1.4;
}

.project-title p{
    font-size:14px;
}

.section-title h2{
    font-size:30px;
}

.section-title p{
    font-size:14px;
}

.gallery-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.gallery-card{
    height:270px;
    border-radius:24px;
}

.gallery-card:nth-child(even){
    transform:none;
}

.gallery-overlay{
    padding:22px;
}

.gallery-overlay h5{
    font-size:17px;
}

.gallery-btn{
    width:44px;
    height:44px;
    font-size:16px;
}

}


.download-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    padding:80px 0;
}
/* background shapes */

.shape1{
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(234,85,1,0.08);
    border-radius:40px;
    top:-100px;
    left:-120px;
    transform:rotate(30deg);
}

.shape2{
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(1,149,63,0.08);
    border-radius:40px;
    bottom:-120px;
    right:-100px;
    transform:rotate(25deg);
}
/* subtle background effect */

.download-section:before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(234,85,1,0.05),
    transparent 70%);
    top:-320px;
    left:-220px;
}

.download-section:after{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(1,149,63,0.05),
    transparent 70%);
    bottom:-250px;
    right:-220px;
}

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

.download-content{
    position:relative;
    z-index:2;
}

.small-title{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:15px;
    font-weight:800;
    color:var(--color1);
    letter-spacing:1px;
    margin-bottom:30px;
    text-transform:uppercase;
}

.small-title span{
    width:55px;
    height:2px;
    background:linear-gradient(to right,var(--color1),var(--color2));
    display:block;
}

.download-content h1{
    font-size:55px;
    font-weight:900;
    line-height:1.05;
    color:#111;
    margin-bottom:30px;
}

.download-content h1 strong{
    background:linear-gradient(135deg,var(--color1),var(--color2));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.download-content p{
    max-width:720px;
    font-size:19px;
    line-height:2;
    color:#666;
    margin-bottom:50px;
}

/* =========================
DOWNLOAD BUTTON
========================= */

.download-btn{
    display:inline-flex;
    align-items:center;
    gap:20px;
    text-decoration:none;
    transition:0.4s;
}

.download-btn:hover{
    transform:translateX(8px);
}

.download-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--color1),var(--color2));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:34px;
    box-shadow:0 20px 40px rgba(0,0,0,0.10);
    transition:0.4s;
}

.download-btn:hover .download-icon{
    transform:rotate(-12deg) scale(1.05);
}

.download-text h4{
    margin:0;
    font-size:30px;
    font-weight:900;
    color:#111;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:991px){

    .download-content h1{
        font-size:60px;
    }

}

@media(max-width:767px){

    .download-section{
        padding:60px 0;
    }

    .download-content h1{
        font-size:42px;
    }

    .download-content p{
        font-size:15px;
        line-height:1.9;
    }

    .download-icon{
        width:75px;
        height:75px;
        font-size:28px;
    }

    .download-text h4{
        font-size:22px;
    }

}



/* =========================
CONTACT SECTION
========================= */

.contact-section-x{
    padding:110px 0;
    background:#fff;
    position:relative;
    overflow:hidden;
}

.contact-section-x::before{
    content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,var(--color2),var(--color1));
}

/* 
.contact-section-x::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: rgba(234,85,1,0.05);
  top: -180px;
  right: -120px;
}

.contact-section-x::after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: rgba(1,149,63,0.05);
  bottom: -150px;
  left: -120px;
} */

/* =========================
TOP TITLE
========================= */

.contact-top-x{
    margin-bottom:70px;
    position:relative;
    z-index:2;
    text-align: center;
}

.contact-label-x{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:12px 24px;
    background:#fff6f0;
    border-radius:60px;
    color:var(--color1);
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.contact-label-x i{
    font-size:16px;
}

/* COMPANY NAME */

.company-name-x{
    font-size:22px;
    font-weight:800;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#111;
    margin-bottom:22px;
    position:relative;
    display:inline-block;
    padding-bottom:18px;
}

.company-name-x:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:90px;
    height:4px;
    border-radius:20px;
    background:linear-gradient(to right,var(--color1),var(--color2));
}

.contact-heading-x{
    font-size:68px;
    font-weight:900;
    line-height:1.05;
    margin-bottom:28px;
    /* max-width:850px; */
}

.contact-description-x{
    max-width:720px;
    color:#666;
    line-height:1.9;
    font-size:18px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================
MAIN GRID
========================= */

.contact-grid-x{
    position:relative;
    z-index:2;
}

/* =========================
LEFT INFO PANEL
========================= */

.contact-panel-x{
    background:linear-gradient(135deg,var(--color1),var(--color2));
    border-radius:40px;
    padding:55px;
    height:100%;
    color:#fff;
    position:relative;
    overflow:hidden;
}

.contact-panel-x:before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    top:-120px;
    right:-100px;
}

.contact-panel-x:after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    bottom:-80px;
    left:-80px;
}

.contact-panel-title-x{
    font-size:40px;
    font-weight:900;
    margin-bottom:18px;
    position:relative;
    z-index:2;
}

.contact-panel-text-x{
    line-height:1.9;
    margin-bottom:45px;
    color:rgba(255,255,255,0.9);
    position:relative;
    z-index:2;
}

/* =========================
INFO ITEM
========================= */

.info-item-x{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-bottom:35px;
    position:relative;
    z-index:2;
}

.info-icon-x{
    width:68px;
    height:68px;
    min-width:68px;
    border-radius:20px;
    background:rgba(255,255,255,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    color:#fff;
    backdrop-filter:blur(10px);
}

.info-content-x h5{
    font-size:22px;
    font-weight:800;
    margin-bottom:10px;
}

.info-content-x p{
    margin:0;
    line-height:1.9;
}

.info-content-x a{
    color:#fff;
    text-decoration:none;
    transition:0.3s;
}

.info-content-x a:hover{
    opacity:0.8;
}

/* COMPANY NAME INSIDE ADDRESS */

.address-company-x{
    display:block;
    font-size:18px;
    font-weight:800;
    letter-spacing:1px;
    margin-bottom:10px;
    color:#fff;
}

/* =========================
FORM SIDE
========================= */

.contact-form-box-x{
    background:#fff;
    border-radius:40px;
    padding:60px;
    height:100%;
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
    border:1px solid #efefef;
}

.contact-form-box-x h3{
    font-size:42px;
    font-weight:900;
    margin-bottom:40px;
}

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

.form-group-x{
    margin-bottom:24px;
}

.form-control-x{
    width:100%;
    height:64px;
    border-radius:20px;
    border:1px solid #ececec;
    background:#fafafa;
    padding:18px 22px;
    outline:none;
    transition:0.3s;
    font-size:15px;
}

.form-control-x:focus{
    border-color:var(--color1);
    background:#fff;
}

.textarea-x{
    height:190px;
    resize:none;
    padding-top:20px;
}

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

.submit-btn-x{
    border:none;
    background:linear-gradient(135deg,var(--color1),var(--color2));
    color:#fff;
    padding:18px 48px;
    border-radius:18px;
    font-size:16px;
    font-weight:700;
    transition:0.4s;
}

.submit-btn-x:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 35px rgba(0,0,0,0.12);
}

/* =========================
MAP
========================= */

.map-wrapper-x{
    margin-top:60px;
    border-radius:40px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
}

.map-wrapper-x iframe{
    width:100%;
    height:520px;
    border:0;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:991px){

.contact-heading-x{
    font-size:48px;
}

.contact-panel-x{
    margin-bottom:30px;
}

.contact-panel-x,
.contact-form-box-x{
    padding:45px 35px;
}

}

@media(max-width:767px){

.contact-section-x{
    padding:75px 0;
}

.contact-heading-x{
    font-size:34px;
}

.contact-description-x{
    font-size:16px;
}

.contact-panel-title-x,
.contact-form-box-x h3{
    font-size:30px;
}

.contact-panel-x,
.contact-form-box-x{
    padding:35px 24px;
}

.info-icon-x{
    width:58px;
    height:58px;
    min-width:58px;
    font-size:22px;
}

.company-name-x{
    font-size:16px;
    letter-spacing:2px;
}

.address-company-x{
    font-size:16px;
}

}




/* =========================
PAGE TITLE
========================= */

.reference-banner{
    padding:90px 0 70px;
    background:linear-gradient(135deg,var(--color1),var(--red1));
    position:relative;
    overflow:hidden;
}

.reference-banner::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    background:rgba(255,255,255,0.08);
    border-radius:50%;
    top:-150px;
    right:-120px;
}

.reference-banner h1{
    font-size:55px;
    font-weight:900;
    color:#fff;
    margin-bottom:15px;
    letter-spacing:1px;
}

.reference-banner p{
    color:#fff;
    max-width:700px;
    font-size:18px;
    line-height:1.8;
    margin:0 auto;
}

/* =========================
PROJECT SECTION
========================= */

.reference-section{
    padding:90px 0 50px;
    background:#fff;
}

.reference-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    margin-bottom:60px;
    box-shadow:0 12px 40px rgba(0,0,0,0.08);
    transition:0.4s;
    border:1px solid #f0f0f0;
}

.reference-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 50px rgba(0,0,0,0.12);
}

.reference-image{
    position:relative;
    overflow:hidden;
    height:100%;
}

.reference-image img{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
    transition:0.6s;
}

.reference-card:hover .reference-image img{
    transform:scale(1.08);
}

.reference-content{
    padding:45px;
    position:relative;
}

.reference-number{
    position:absolute;
    top:25px;
    right:30px;
    font-size:70px;
    font-weight:900;
    color:rgba(0,0,0,0.05);
    line-height:1;
}

.reference-title{
    font-size:32px;
    font-weight:900;
    line-height:1.4;
    margin-bottom:25px;
    color:var(--dark);
    padding-right:70px;
}

.reference-content p{
    font-size:16px;
    line-height:1.9;
    color:#555;
    margin-bottom:18px;
}

.reference-tag{
    display:inline-block;
    background:rgba(193, 18, 31,0.1);
    color:var(--color1);
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-top:10px;
}

.reference-card.reverse .row{
    flex-direction:row-reverse;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:991px){

    .reference-banner h1{
        font-size:42px;
    }

    .reference-content{
        padding:35px;
    }

    .project-title{
        font-size:28px;
    }

    .reference-card.reverse .row{
        flex-direction:column;
    }
}

@media(max-width:767px){

    .reference-banner{
        padding:70px 0 55px;
    }

    .reference-banner h1{
        font-size:34px;
    }

    .reference-banner p{
        font-size:16px;
    }

    .reference-content{
        padding:28px;
    }

    .project-title{
        font-size:24px;
        padding-right:0;
    }

    .project-number{
        position:relative;
        top:auto;
        right:auto;
        margin-bottom:15px;
        font-size:48px;
    }
}




/* =========================
HERO (NO IMAGE)
========================= */

.customer-hero{
    padding:120px 0 80px;
    background:linear-gradient(to bottom,#ffffff,#f7f9fc);
    position:relative;
    overflow:hidden;
}

/* abstract shapes */
.customer-hero::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(234,85,1,0.08);
    border-radius:50%;
    top:-120px;
    right:-80px;
    filter:blur(40px);
}

.customer-hero::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:rgba(1,149,63,0.06);
    border-radius:50%;
    bottom:-100px;
    left:-80px;
    filter:blur(40px);
}

.customer-hero-content{
    position:relative;
    z-index:2;
    text-align:center;
}

.customer-hero-subtitle{
    color:var(--color1);
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:14px;
    margin-bottom:15px;
}

.customer-hero-title{
    font-size:52px;
    font-weight:800;
    color:#111;
    margin-bottom:20px;
}

.customer-hero-title span{
    color:var(--color1);
}

.customer-hero-text{
    color:#666;
    max-width:700px;
    margin:auto;
    line-height:1.8;
}

/* =========================
SECTION TITLE
========================= */

.customer-title{
    text-align:center;
    margin-bottom:70px;
}

.customer-title span{
    color:var(--color1);
    font-weight:700;
    font-size:14px;
    text-transform:uppercase;
}

.customer-title h2{
    font-size:42px;
    font-weight:800;
    margin-top:10px;
}

.customer-title p{
    max-width:650px;
    margin:auto;
    color:#666;
    margin-top:10px;
}

/* =========================
CLIENT CARDS
========================= */

.customers-section{
    padding:100px 0;
}

.customer-card{
    background:#fff;
    border-radius:18px;
    height:160px;
    display:flex;
    align-items:center;
    justify-content:center;
    /* padding:25px; */
    /* border:1px solid #eee; */
    transition:0.3s;
}

.customer-card:hover{
    transform:translateY(-8px);
    /* box-shadow:0 15px 35px rgba(0,0,0,0.08); */
    border-color:rgba(234,85,1,0.3);
}

.customer-card img{
    /* max-height:120px; */
    max-width:100%;
    object-fit:contain;
    /* filter:grayscale(100%); */
    opacity:0.8;
    transition:0.3s;
    
}

.customer-card:hover img{
    filter:grayscale(0);
    opacity:1;
    transform:scale(1.05);
}

/* =========================
CTA
========================= */

.customer-cta{
    margin-top:80px;
    background:linear-gradient(135deg,var(--color1),#ff7b2f);
    padding:60px;
    border-radius:25px;
}

.customer-cta h3{
    color:#fff;
    font-weight:800;
    font-size:36px;
}

.customer-cta p{
    color:#fff;
    opacity:0.9;
}

.customer-cta-btn{
    background:#fff;
    color:var(--color1);
    padding:14px 32px;
    border-radius:50px;
    font-weight:600;
    text-decoration:none;
    display:inline-block;
}

.customer-cta-btn:hover{
    background:#111;
    color:#fff;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.customer-hero-title{
    font-size:34px;
}

.customer-title h2{
    font-size:30px;
}

.customer-card{
    height:140px;
}

.customer-cta{
    text-align:center;
    padding:40px;
}

}


/* HERO */
.products-hero{
    padding:110px 0 70px;
    text-align:center;
    background:linear-gradient(to bottom,#ffffff,#f7f9fc);
}

.products-hero h1{
    font-size:48px;
    font-weight:800;
}

.products-hero span{
    color:var(--color1);
}

.products-hero p{
    color:#666;
    max-width:650px;
    margin:auto;
}

/* PRODUCTS */
.products-section{
    padding:90px 0;
}

/* CARD */
.product-card{
    position:relative;
    background:#fff;
    border-radius:14px;
    padding:22px 20px 22px 28px;
    border:1px solid #eee;
    transition:0.3s;
    height:100%;
    overflow:hidden;
}

/* LEFT ACCENT BAR */
.product-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:100%;
    background:var(--color1);
    transition:0.3s;
}

/* HOVER EFFECT */
.product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
    border-color:rgba(193, 18, 31,0.3);
}

.product-card:hover::before{
    width:6px;
}

/* TEXT */
.product-card h6{
    font-weight:600;
    font-size:15px;
    margin:0;
    color:#222;
    line-height:1.5;
}

/* CTA */
.products-cta{
    margin-top:70px;
    background:linear-gradient(135deg,var(--color1),#9d4248);
    padding:55px;
    border-radius:25px;
    text-align:center;
    margin-bottom: 60px;
}

.products-cta h3{
    color:#fff;
    font-weight:800;
}

.products-cta p{
    color:#fff;
    opacity:0.9;
}

.products-cta-btn{
    background:#fff;
    color:var(--color1);
    padding:14px 35px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    display:inline-block;
    margin-top:10px;
}

.products-cta-btn:hover{
    background:#111;
    color:#fff;
}

/* RESPONSIVE */
@media(max-width:768px){
    .products-hero h1{
        font-size:32px;
    }
}



/* HERO */
.services-hero{
    padding:110px 0 70px;
    text-align:center;
    background: linear-gradient(to bottom,#ffffff,#f7f9fc);
}

.services-hero h1{
    font-size:48px;
    font-weight:800;
}

.services-hero span{
    color:var(--color1);
}

.services-hero p{
    color:#666;
    max-width:650px;
    margin:auto;
}

/* SERVICES */
.services-section{
    padding:90px 0;
}

/* CARD */
.service-card{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    height:260px;
    cursor:pointer;
}

/* IMAGE */
.service-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.5s;
}

/* OVERLAY */
.service-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(0,0,0,0.8) 10%,
        rgba(0,0,0,0.4) 50%,
        transparent 100%);
    display:flex;
    align-items:flex-end;
    padding:25px;
    transition:0.3s;
}

.service-overlay h5{
    color:#fff;
    font-weight:700;
    margin:0;
}

/* HOVER */
.service-card:hover img{
    transform:scale(1.08);
}

.service-card:hover .service-overlay{
    background:linear-gradient(to top,
        rgba(193, 18, 31,0.9),
        rgba(0,0,0,0.4));
}

/* CTA */
.services-cta{
    margin-top:70px;
    background:linear-gradient(135deg,var(--color1),#9d4248);
    padding:55px;
    border-radius:25px;
    text-align:center;
}

.services-cta h3{
    color:#fff;
    font-weight:800;
}

.services-cta p{
    color:#fff;
    opacity:0.9;
}

.services-cta-btn{
    background:#fff;
    color:var(--color1);
    padding:14px 35px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    display:inline-block;
    margin-top:10px;
}

.services-cta-btn:hover{
    background:#111;
    color:#fff;
}

/* RESPONSIVE */
@media(max-width:768px){
    .services-hero h1{
        font-size:32px;
    }

    .service-card{
        height:220px;
    }
}

@media(max-width:993px)
{

  .about-section{padding: 0;}
  .hero-section {
  padding: 30px;
  position: relative;
  background: linear-gradient(to bottom,#fff 58%, #111315 42%);}
 .hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,var(--color2),var(--color1));
}

.hero-right{column-gap: 20px;}
.capability-section{margin-top: 60px; padding-top: 60px; padding-bottom: 60px;}
.stats-section{padding-top: 60px; padding-bottom: 60px;}
.vendor-section{padding-top: 60px; padding-bottom: 90px;}
.vision-section{padding-top: 60px;padding-bottom: 60px;}
.vm-content {
  padding: 20px;
  margin-top: 20px;
}
.qehs-section{padding-top: 60px;padding-bottom: 60px;}
.services-hero{background: linear-gradient(to bottom,#e0dfdf,#e5e6e8); padding: 60px 0;}
.services-section {
  padding: 50px 0;
}
.fabrication-title {
  font-size: 48px;}
  .about-small-img{right: 0;}
  .fabrication-about-content {
  padding-left: 0px;
}
.fabrication-cta{padding:40px 20px;}
.fabrication-cta h2 {
  font-size: 29px;}
  .products-hero {
  padding: 60px 0 70px;}
  .reference-title {
  font-size: 22px;}
  .reference-number{font-size: 40px;}
  .info-item-x{display: block;}
    .info-icon-x{margin-left: auto; margin-right: auto; margin-bottom: 10px;}
    .carousel-item img{height: 100%; object-fit: cover;}
}