/* =============================================
   RESET
============================================= */
*,*::before,*::after {margin: 0;padding: 0;box-sizing: border-box;}
button {padding: 0;background: none;border: none;font-family: inherit;}

ul{list-style: none; padding: 0; margin: 0;}
img {max-width: 100%;display: block;}

/* =============================================
   CSS VARIABLES
============================================= */

:root {

  /* ========= COLORS ========= */
  --primary-color: #0F4C81;
  /* --secondary-color: #1C75BC; */
  --secondary-color: #039ac1;
  --accent-color: #DC3545;

  --dark-color: #0F172A;
  --light-color: #F1F5F9;
  --white: #ffffff;

  --text-primary: #0B1F3B;
  --text-secondary: #64748B;
  --bg-primary: #F8FAFC;

  /* ========= TYPOGRAPHY ========= */
  --font-primary: 'Inter', sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --fs-h1: clamp(2rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 4vw, 2.5rem);
  --fs-h3: clamp(1.5rem, 3vw, 2rem);
  --fs-h4: clamp(1.25rem, 2.5vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* ========= SPACING ========= */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 5rem;

  /* ========= RADIUS ========= */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* ========= SHADOWS ========= */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 15px 35px rgba(0,0,0,0.12);

  /* ========= TRANSITION ========= */
  --transition: all 0.3s ease;
}

/* =============================================
   BASE STYLES
============================================= */

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection {
  background-color: var(--accent-color);
  color: var(--white);
}

/* =============================================
   TYPOGRAPHY
============================================= */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  color: var(--primary-color);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {margin-bottom: var(--spacing-sm);color: var(--text-secondary);}
a {text-decoration: none; color: inherit; transition: var(--transition);}
.text-clr{color: var(--text-secondary);}
.text-justify{text-align: justify;}
/* =============================================
   UTILITY CLASSES
============================================= */

.section {margin: var(--spacing-xl) 0;}

.section-sm {padding: var(--spacing-lg) 0;}

/* Backgrounds */
.bg-primary { background: var(--primary-color); }
.bg-light { background: var(--light-color); }
.bg-dark { background: var(--dark-color); }
.bg-white { background: var(--white); }
.bg-accent { background: var(--accent-color); }
.bg-secondary-color{background: var(--secondary-color);}
.bg-light-color{background: #EFF1FB;}
/* Text */
.text-primary-color { color: var(--primary-color); }
.text-white { color: var(--white); }
.text-muted { color: var(--text-secondary); }
.text-secondary{color: var(--secondary-color) !important;}
/* =============================================
   BUTTONS 
============================================= */




.btn-custom {
  padding: 0.8rem 2rem;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Solid Button */
.btn-primary {background: var(--accent-color); color: var(--white); box-shadow: var(--shadow-sm); border-color:transparent; }

.btn-primary:hover {transform: translateY(-3px); box-shadow: var(--shadow-lg);}

/* Outline Button */
.btn-outline {border: 2px solid var(--accent-color); color: var(--accent-color); background: transparent; transition: all 0.6s ease;}

.btn-outline:hover {background: var(--accent-color); color: var(--white); border-color: var(--accent-color);}

/* =============================================
   CARDS (Cleaner Modern)
============================================= */

.card-custom {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  height: 100%;
  max-width: 100%;
}
.card-custom img {border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); transition: var(--transition);filter: blur(1px); filter: grayscale(1); transition: all .3s ease-in-out;} 
.card-custom:hover {transform: translateY(-6px); box-shadow: var(--shadow-lg);}
.card-custom:hover img {filter: blur(0px); transition: all .3s ease-in-out;}
.card-float--icon{position: absolute; bottom: 0; right: 0; translate: -50% -50%; padding: .3rem; background-color: var(--accent-color); border-top-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); color: var(--white); display: flex; align-items: center; justify-content: center; transform: translate(50%, 50%); transition: var(--transition);}

.card {
    --bs-card-spacer-y: 0rem; 
  }


/* Card 5: Image Overlay */
  .card-5 { position: relative; height: 300px; border-radius: 20px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;background: linear-gradient(to top, rgba(0,0,0,.6))}
  .card-5 img{opacity: .7;}
  .card-5-content { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,1), transparent); padding: 30px; color: white;color: var(--bg-primary); }
        
.card-5:hover{background: linear-gradient(to top, rgba(0,0,0,1))}
.card-5 a{font-size: .7rem;}

/* Card 27: Article Card */
        .card-27 { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); display: flex; flex-direction: column; height: 100%; max-width: 350px;}
        .card-27-image { width: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
         .card-27-image img{width: 100%; height: 250px;}
        .card-27-content { padding: 25px; flex: 1; display: flex; flex-direction: column; }
        .card-27-meta { display: flex; gap: 15px; color: #6b7280; font-size: 14px; margin-bottom: 10px; }
        .card-27-title { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; line-height: 1.3; }
        .card-27-excerpt { color: #6b7280; line-height: 1.6; flex: 1; }
        .card-27-read { color: #6366f1; font-weight: 600; margin-top: 15px; display: inline-flex; align-items: center; gap: 5px; }
        



/* =============================================
   SCROLL TOP BUTTON
============================================= */

.scroll-top {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: var(--transition);
  z-index: 10;
   animation: moveUpDown 2s ease-in-out infinite; 
}


@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(0); /* Shuruati position */
  }
  50% {
    transform: translateY(-10px); /* 10px upar move karega */
  }
}




.scroll-top.show {opacity: 1; transform: translateY(0); pointer-events: auto;}
.position-fixed{z-index: 9;}

/* call to action */
.call-to-action{position: fixed; right: 0; top: 50%; translate: 65% -50%; z-index: 9;}
.call-to-action a { color: white; text-shadow: -.5px 0 black, 0 .5px black, .5px 0 black, 0 -.5px black;}
.call-to-action div:hover{translate: -70% 0; transition: all .3s ease-in-out;}
.call-to-action div:hover span{background-color: var(--accent-color);}
/* Header starts from here */


/* header style goes here */
.site-header{box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;  background-color: var(--secondary-color)}
.inner-header{background-color: var(--bg-primary); border-bottom-right-radius: 30px; border-top-left-radius: 30px;}
.site-header .img-logo{width: 70px; height: auto; padding-block: 8px; padding-left: 5px;}
.hamburger{display: none; flex-direction: column; gap:5px; align-items: center; justify-content: center; background: transparent; border: none;}
.hamburger span{ width: 30px; height: 3px; background-color: gray; display: block; transition: all .2s linear;}
.nav-list{display: flex; gap: 1.4rem;}
.nav-list a{color: var(--secondary-color); font-weight: 600; font-size: 1rem; position: relative; transition: all .1s ease-in-out; padding: .4rem .4rem;}
.nav-list li:nth-child(3){position: relative;}
.services-drop{display: flex; flex-direction: column;  padding:.4rem; position: absolute; left: 0%; width: 200%; top: 40px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;  visibility: hidden; z-index: 5;}
.service-list:hover .services-drop{visibility: visible; background-color:var(--light-color); }
.service-list:hover .fa-caret-down{rotate: 180deg;}
.services-drop a{padding: .4rem 1.5rem; font-size: .9rem; display: block;}
.services-drop a:hover{background-color:var(--accent-color) ;color: var(--white) !important; border-bottom-right-radius: 10px; border-top-left-radius: 10px; }

.nav-list > li > a::before {
    content: "";
    width: 0%;
    height: 2px;
    background-color: var(--secondary-color);
    position: absolute;
    bottom: -2px;
}
@keyframes move {
    0%{width: 0%;}
    100%{width: 100%;}
}
.nav-list  a:hover::before{ animation: move .2s linear forwards; } 
.nav-list  a:hover{color: var(--secondary-color);}
.btn-contact a{ color: var(--text-secondary); font-weight: 600; font-size: 1.2rem;}
.btn-contact:hover a{color: var(--black);}
.btn-contact span{background-color: var(--accent-color); display:grid; place-items: center; width: 2em; aspect-ratio: 1/1; color: var(--light-color); z-index: 9;}
/* Header ends from here */




/* Hero section starts here */
.carousel-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5rem; z-index: 1;}
/* Hero section ends here */




/* FAQs */
.faqs-img{width: 90%; height: auto;}

/* What our client says */
.client-feadback img{width: 70px !important; height: auto; margin-bottom: .5rem;}
.client-feadback span{color: var(--accent-color); font-size: 1rem;}

.w-1{width: 130px !important; } 


/* latest news section */
.latest-news{gap: 1rem; background-color: var(--secondary-color); padding: 1rem 2rem; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.latest-news > span{background-color: var(--accent-color); color: var(--white); font-size: 1rem; width:40px; height:40px; display: grid; place-items: center; border-radius: 50%; font-weight: 600;}
.latest-news span span{position: absolute; bottom: -10px; right: -10px; font-size: .4rem; color: var(--white); font-weight: 800; background-color: var(--dark-color); width: 4em; height: 4em; display: grid; place-items: center; border-radius: 50%; padding: 5px;} 



/* footer */
.footer{margin-top: 10rem;}
.footer-logo{width: 150px; height: auto; margin-bottom: .5rem;}
.social span{display: inline-block; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background-color: var(--secondary-color); color: var(--white); transition: all .2s ease-in-out; cursor: pointer;}
.social span:hover{transform: scale(1.1);  color: var(--white); background-color: var(--accent-color);}
.quick-link > a:hover{color: var(--primary-color); transform: translateX(5px);}
.contact-banner {

  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
              url(../image/contact-banner.webp);
  
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: center; 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-md); 
  /* padding: 2rem;  */
  color: var(--white); 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  gap: .5rem;
  left: 0;
  right: 0;
  top: -20%;
  padding: 2rem 0;
}

.footer-contact span{display: grid; place-items: center; background-color: var(--accent-color); color: var(--white); font-size: 1rem; width:40px; height:40px; border-bottom-right-radius: 50%; font-weight: 600; border-top-left-radius: 50%;}  




/* About page */
.about-section{background: linear-gradient(rgba(0, 0, 0, 0.389), rgba(0, 0, 0, 0.318)), 
              url(../image/about-banner.webp);
  
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: center; 
  /* border-radius: var(--radius-lg);  */
  box-shadow: var(--shadow-md); 
  color: var(--white); 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  margin-top: 4rem;

}

.breadcrumb-item+.breadcrumb-item::before{color: var(--bg-primary);}
.breadcrumb-item.active{color: var(--secondary-color);}
 
.about-img img{border: 1px solid;; border-radius: 50%;} 




/*=============================================
=            Gallery page            =
=============================================*/
.nav-link{color: var(--secondary-color) !important; font-weight: 500;  font-size: small;}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bg-primary) !important;
    background-color: var(--accent-color) !important;
    border-radius: 10px 10px 0px 0px !important;
    box-shadow: 0 4px 1px var(--secondary-color);
    padding: 5px 10px !important;
}

.gallery-layout{display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;}
.gallery-layout img{width: 200px; height: 200px; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: all .3s ease-in-out;}
.gallery-layout img:hover{transform: scale(1.05); box-shadow: var(--shadow-lg);}
.gallery-nav{width: 80%;}
.gallery-nav ul{display: flex; flex-direction: column; gap: 1rem; justify-content: center; margin-bottom: 2rem;}
.gallery-nav li{box-shadow: var(--shadow-md); padding: 5px 10px; font-weight: 500; color: var(--secondary-color);}
.gallery-nav li:hover{box-shadow: var(--shadow-lg); background-color: var(--accent-color); color: var(--bg-primary); border-radius: 5px; translate: 5px 0; transition: translate .3s ease-in-out;}
.form-control:focus {color: var(--bs-body-color); background-color: var(--bs-body-bg); outline: none; border-color: transparent; box-shadow: none; }
.contact-bg{background: linear-gradient(rgba(0, 0, 0, 0.748), rgba(0, 0, 0, 0.5)), 
              url(../image/contact-bg.webp);
  
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: center; 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-md); 
  padding: 2rem; 
  color: var(--white); 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  gap: .5rem;
}
/*=====  End of Gallery page  ======*/



/*=============================================
=            blogs            =
=============================================*/
.post-img{width: 60px; height: 60px; object-fit: cover;}
.gallery-thumb{width: 80px; height: auto;}

/*=====  End of blogs  ======*/



/*=============================================
=            contact page            =
=============================================*/

.iframe{width: 100%; height: 400px; border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-md); transition: all .3s ease-in-out; border-right: 8px solid var(--secondary-color);}
.iframe:hover{transform: scale(1.02); box-shadow: var(--shadow-lg);}

.contact-form{width: 100%; max-width: 500px; background-color: var(--light-color); padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);}
label, input, textarea{color: var(--text-secondary); font-size: .9rem; width: 100%; background-color: transparent !important; border: none !important;}
input, textarea{border-bottom:2px solid var(--secondary-color) !important}


/*=====  End of contact page  ======*/



/*=============================================
=            Electronics services page            =
=============================================*/
.elec-para{font-size: .8rem;}
.service-card{max-width: 540px;}

/*=====  End of Electronics services page  ======*/

/* =============================================
   Electronics cards responsive tweaks
============================================= */
.service-cards { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.service-cards .service-card { display: flex; flex-direction: column; }
.service-cards .card-img-top { height: 200px; object-fit: cover; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }

/* Ensure reasonable default max-width for cards inside the flex container */
.service-cards .service-card { max-width: 320px; flex: 1 1 280px; }

/* On tablets and below make cards more spacious */
@media (max-width: 768px) {
  .service-cards .card-img-top { height: 220px; }
}

/* On mobile take full width and stack vertically */
@media (max-width: 576px) {
  .service-cards .service-card { flex: 1 1 100% !important; max-width: 100% !important; }
  .service-cards { gap: 0.75rem; }
  .service-cards .card-img-top { height: 180px; }
}






/*=============================================
=            Swiper Slider Styles            =
=============================================*/

/* Ensure swiper containers handle overflow properly */
.swiper {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: transparent;
}

/* Swiper wrapper for slides */
.swiper-wrapper {
  display: flex;
  width: 100%;
  height: auto;
  box-sizing: content-box;
}

/* Swiper slide base styles */
.swiper-slide {
  flex-shrink: 0;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Testimonials slider specific styles */
.testimonials-swiper {
  padding: 20px 0;
  width: 100%;
  overflow: hidden;
}

.testimonials-swiper .swiper-wrapper {
  display: flex;
  width: 100%;
}

.testimonials-swiper .swiper-slide {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonials-swiper .card-custom {
  max-width: 700px;
  width: 90%;
}

/* Clients logo slider specific styles */
.clients-swiper {
  padding: 20px 0;
}

.clients-swiper .swiper-slide {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/*=====  End of Swiper Slider Styles  ======*/



/* Accreditations */
.accreditations img{width: 500px; height: auto;}


/* media querry for mobile */

@media (max-width:992px) {
    .hamburger{border: none; background-color: transparent; display: flex; flex-direction: column; gap:5px ;}
    .hamburger span{ width: 30px; height: 3px; background-color: gray; transition: all .2s linear;}

    .hamburger.active span:nth-child(1) {transform: translateY(8px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0;}
    .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg);}
    /* .site-nav{position: relative;} */
    .nav-list{display: flex; flex-direction: column; justify-content: start; align-items: start; background-color:var(--light-color); position: fixed; left: 0; top: 0; bottom: 0; width: 80%; padding: 1rem; color: var(--text-primary); z-index: 10;}
    .nav-list a{color: var(--text-primary); font-size: 1rem; padding:.2rem;} 
    .nav-list{gap: .5rem;}
    .nav-hidden{display: none;}
    .about-para-head{font-size: 1rem;}
    .iba-approved img{width: 50px; height: auto;}
    .iba-approved button{padding: 0; font-size: var(--fs-small);}
    .section{padding: 2rem 0;}
    .about-para p{font-size: .6rem;}
    .services-drop{top: 30px; padding: 5px}

    /* hero section starts here */

      .carousel-overlay{gap: .2rem; }
      .carousel-overlay h1{font-size: 1.3rem; font-weight: 600;}
      .carousel-overlay p{font-size: .8rem;}
      .carousel-overlay a{padding: .4rem 1rem; font-size: .8rem;}
      .carousel-container{margin-top: 4rem;}
    /* hero section ends here */

    
    .latest-news{padding: 1rem .4rem;}
    .contact-banner{top: -8%;}

    .gallery-layout img{width: 100%; height: auto;}
    .service-card{max-width: 300px;}
} 

/* =============================================
   Sticky Sidebar for Gallery Page
============================================= */
@media (min-width: 992px) {
  
  /* Override overflow-hidden on parent rows to allow sticky positioning */
  .row.gallery-row,
  .row.overflow-hidden {
    overflow: visible;
  }

  .sidebar-sticky,
  .gallery-sidebar {
    position: sticky;
    top: 84px; /* Adjust based on fixed header height */
    height: fit-content;
    /* max-height: calc(100vh - 84px); */
    /* overflow-y: auto; */
  }
}