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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", serif;
}

:root {
    --blue: #134A83;
    --yellow: #FDBE25;
}
/* fixed-icon start */
.phone-fixed{
    position: fixed;
    bottom: 200px;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
  }
  .phone-fixed .phone{
   text-decoration: none;
   padding: 12px 10px;
   font-size: 26px;
   background-color: var(--blue);
   color: #fff;
  }
  .phone-fixed .whatsapp{
    text-decoration: none;
   padding: 12px 10px;
   font-size: 26px;
   background-color: #25D366;
   color: #fff;
  }


  .scroll-top-btn{
    position: fixed;
    bottom: 50px;
    right: 20px;
    padding: 10px 20px;
    border: 1px solid #fff;
    border-radius: 50%;
    z-index: 9999;
    background-color: var(--yellow);
  }

  @media(max-width: 768px){
    .scroll-top-btn{
    padding: 15px 18px;
  }
  }
  .scroll-top-btn button{
    color: var(--blue);
    font-size: 22px;
    font-weight: 700;
    border: none !important;
    background: none;
  }
  .scroll-top-btn button:focus{
    border: none;
  }
  .scroll-top-btn:hover{
    background: none;
    border: 1px solid #000;
  }
  .scroll-top-btn:hover button{
    color:#000;
  }
/* fixed-icon end */




/* sub-page-banner-style-start */
.sub-page-banner{
    padding: 100px 10px;
    background-color: var(--blue);
  }
  .sub-heading{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .sub-page-banner .sub-heading h1{
    color: #fff;
  }
  .sub-page-banner .sub-heading p{
    color: #fff;
  }
  .sub-page-banner .sub-heading p a{
text-decoration: none;
color: var(--yellow);
  }
/* sub-page-banner-style-end */




/* heading style start */
.heading h1 {
    font-size: 24px;
}

.heading h2 {
    font-size: 24px;
}
.pro-sub-head h3 span{
    color: var(--blue);
   }
   .pro-sub-head h3{
       font-weight: 700;
     color: var(--blue);
   }
.heading .line {
    height: 3px;
    width: 50px;
    background-color: var(--yellow);
    display: inline-block;
    margin-bottom: 5px;
}

.heading p {
    font-size: 30px;
    font-weight: 300;
}
@media(max-width:768px){
    .heading p {
        font-size: 16px;
        font-weight: 300;
    }
}
/* heading style end */

/* button style start */
.btn1 {
    text-decoration: none;
    padding: 10px 20px;
    background-color: var(--blue);
    color: var(--yellow) !important;
}

/* bitton style end */



/* topbar style start */
.topbar-section {
    background-color: var(--blue);
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0px;
}

.topbar .contact {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.topbar .contact a {
    text-decoration: none;
    font-size: 16px;
    color: var(--yellow) !important;
}
.topbar .social a{
text-decoration: none;
color: var(--yellow);
font-size: 20px;
margin-bottom: 0;
margin: 0px 5px;
}
@media(max-width:768px){
    .topbar {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 5px 0px;
        gap: 8px;
    }  
    .topbar .contact .phone {
        display: none;
    }
    .topbar .contact a{
        font-size: 14px;
    }
    .topbar .social a{
        font-size: 14px;
    }
}

/* topbar style end */

/* navbar style start */
.logo {
    width: 280px;
}
.logo1 {
    width: 100px;
}
@media(max-width:768px){
    .logo {
        width: 220px;
    } 
}
@media(max-width:330px){
    .logo {
        width: 180px;
    } 
}
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.company-logo {
    height: 80px;
    width: 100%;
}

.menu-item {
    position: relative;
    padding: 10px 20px;
    cursor: pointer;
    color: black;
}

.menu-item:hover {
    background-color: #f8f9fa;
}

.submenu,
.sub-submenu {
    position: absolute;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 0;
    padding: 0;
    display: none;
    z-index: 1000;
}

.menu-item:hover .line {
    background-color: var(--blue);
    width: 100%;
    transition: 0.6s all ease-in-out;

}

.line {
    width: 10%;
    height: 3px;
    background-color: #fff;
}

.submenu {
    top: 100%;
    left: 0;
    border-radius: 5px;
    min-width: 180px;
}



.submenu-item,
.sub-submenu-item {
    padding: 10px 15px;
    white-space: nowrap;
    cursor: pointer;
}

.submenu-item:hover,
.sub-submenu-item:hover {
    background-color: var(--yellow);
    color: #000;
}

.menu-item:hover>.submenu,
.submenu-item:hover>.sub-submenu {
    display: block;
}

/* Responsive styles */
@media (max-width: 768px) {
    .menu {
        flex-direction: column;
        width: 100%;
    }

    .menu-item {
        padding: 10px 15px;
    }

    .submenu,
    .sub-submenu {
        position: static;
        border: none;
    }

}

/* navbar css end */

/* about us style start */
.about-us {
    background: linear-gradient(#ffffffed, #ffffffed), url(../images/about-image/about-image.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.about-us .counter-div {
    padding: 10px;

}

.counter {
    display: flex;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}

.about-us .counter-div h2 {
    color: var(--blue);
    font-size: 50px;
}

.about-us .counter-div p {
    color: var(--blue);
    font-weight: 500;
}

.about-us .about-para p {
    text-align: justify;
    font-size: 18px;
}

.about-us .about-para-more{
    font-size: 18px;
    text-align: justify;
}
@media(max-width:768px){
    .counter {
        display: flex;
        gap: 10px;
        justify-content: center;
        height: 100%;
        flex-direction: row;
    }
    .about-us .counter-div p {
        color: var(--yellow);
        font-weight: 500;
        text-align: center;
    }
    .about-us .counter-div h2 {
        color: var(--blue);
        font-size: 35px;
        text-align: center;
    }
    .about-us .about-para p {
        text-align: justify;
        font-size: 16px;
    }
    .about-us .about-para-more{
        font-size: 16px;
        text-align: justify;
    }
    
}
@media(max-width:350px){
    .about-us .counter-div p {
        color: var(--yellow);
        font-weight: 500;
        text-align: center;
        font-size: 14px;
    }
    .about-us .counter-div h2 {
        color: var(--blue);
        font-size: 25px;
        text-align: center;
    }
    .about-us .about-para p {
        text-align: justify;
        font-size: 14px;
    }
    .about-us .about-para-more{
       display: none;
    }
}
/* about us style end */



/* our mission vision start */
.bg-image-div1 {
    background: url(../images/about-image/mission-image.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bg-image-div2 {
    background: url(../images/about-image/our-vision.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.parent-div {
    position: relative;
    height: 100%;
    width: 100%;

}

.our-mission {
    position: relative;
    height: 700px;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-direction: column;

    padding: 0px 0px 0px 20px;
}

.our-mission .par-m-text {
    transition: 0.5s ease-in-out;
}

.our-mission .par-m-text-h2 {
    transition: 0.5s ease-in-out;
    color: #fff;
}

.our-mission:hover .par-m-text {
    opacity: 0;
}

.our-mission:hover .par-m-text-h2 {
    opacity: 0;
}

.our-mission:hover .our-mission-overlay {
    height: 100%;
    width: 100%;
    opacity: 1;

}

.our-mission-overlay {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    height: 0%;
    z-index: 1;
    width: 100%;
    color: #fff;
    transition: 0.5s ease-in-out;
    background-color: #134983cc;
    display: flex;
    justify-content: center;
    padding: 0px 0px 0px 20px;
    /* align-items: center; */
    flex-direction: column;
}

/* our mission vision end */


/* feature card style start */
.feature-card {
    padding: 20px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* border: 1px solid #fff; */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.feature-card h2 {
    font-size: 22px;
    text-align: center;
    color: var(--yellow);
}

.feature-card h3 {
    font-size: 40px;
    padding: 10px 13px;
    border: 1px solid var(--yellow);
    color: var(--yellow);
    border-radius: 50%;
}

.feature-card p {
    text-align: center;
    color: #fff;
}

.why-us {
    background-color: var(--blue);
}

.why-us .why-us-para p {
    text-align: justify;
    font-size: 18px;
    color: #fff;
}

@media(max-width:768px){
    .why-us .why-us-para p {
        text-align: justify;
        font-size: 16px;
        color: #fff;
    }
}
@media(max-width:350px){
    .why-us .why-us-para p {
        text-align: justify;
        font-size: 14px;
        color: #fff;
    }
}





/* feature card style end */
/* :root {
    --blue: #134A83;
    --yellow: #FDBE25;
} */
/* our products start */
.product-card {
    padding: 20px 10px;
    background-color: #134A83;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.product-card:hover .overlay {
    height: 100%;
    opacity: 1;
    cursor: pointer;
}

.pro-img {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.pro-img .overlay {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0%;
    width: 100%;
    opacity: 0;
    background-color: #13498398;
    transition: 0.3s ease-in-out;
}

.pro-name {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.pro-name a {
    text-decoration: none;
    font-size: 20px;
    color: var(--yellow) !important;
}

/* our products end */


/* blog start */
.blog-item {
    padding: 10px;
}

.blog-item .blog-heading {
    padding: 0px 10px 30px 0px;

}

.blog-item .blog-heading h2 {
    font-size: 20px;
}

.blog-item .blog-heading p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* blog-end */


/* contact us start */

.contactt-section {
    background: linear-gradient(#000000b4, #000000c7), url(../images/about-image/about-image.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 100px 0px 250px 0px;
    position: relative;
}


.contact-content {
    margin-top: -240px;
    position: relative;
    z-index: 1;
}

.contact-content #map {
    border-radius: 10px;
    margin-bottom: 60px;
}
.contact-content #map iframe{
    width: 100%;
    height: 400px;
    border:0; 
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
}

.contact-content .item {
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    padding: 35px 30px;
    background-color: #fff;
}


.contact-content .item img {
    float: left;
    margin-right: 25px;
    vertical-align: middle;
}

.contact-content .item h6 {
    font-size: 16px;
    font-weight: 600;
    vertical-align: middle;
}

.contact-content .item h6 span {
    font-size: 15px;
    color: #2d2a2a;
    font-weight: 400;
}

.contact-content #contact-form {
    margin-left: 30px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    padding: 35px 30px;
    background-color: #fff;
}

.contact-content #contact-form label {
    font-size: 15px;
    color: #3a3a3a;
    margin-bottom: 5px;
}

.contact-content #contact-form input {
    width: 100%;
    height: 44px;
    border-radius: 22px;
    background-color: #f6f6f6;
    border: none;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0px 15px;
}
.contact-content #contact-form input::placeholder{
    color: #000 !important;
}
.contact-content #contact-form textarea::placeholder{
    color: #000 !important;
}
.contact-content #contact-form textarea {
    width: 100%;
    height: 70px;
    max-height: 180px;
    border-radius: 22px;
    background-color: #f6f6f6;
    border: none;
    margin-bottom: 20px;
    font-size: 14px;
    padding: 15px 15px;
}
.captchasep1 {
    display: flex;
  }
  
  .captchasep1 input {
    width: 100% !important;
    margin-top: 0 !important;
    height: 63px;
  }
  
  .captchasep1 .captcha-codes-sec {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    border-radius: 5px;
    border-top: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    background: url(../images/logo/captcha.jpg);
    font-weight: bolder !important;
  }
  
  .captchasep1 .captcha-codes-sec p {
    margin-bottom: 0;
    letter-spacing: 9px;
    font-style: italic;
    font-size: 24px;
    padding: 10px;
    /* height: 100%; */
    color: #000;
    font-weight: bolder !important;
  }

  @media (max-width: 992px) {
    .captchasep1 .captcha-codes-sec p {
      font-size: 18px;
    }
  }
  @media (max-width: 768px) {
    .captchasep1 .captcha-codes-sec p {
      font-size: 24px !important;
    }
  }
  .captchasep1 .captcha-codes-sec {
    margin-bottom: 10px;
  }
  .captchasep1 .captcha-codes-sec button {
    font-style: italic;
    font-size: 22px;
    outline: none;
    background: transparent;
    height: 100%;
    border: none;
    font-weight: bolder;
  }
  
  .captchasep1 .captcha-codes-sec button i {
    background: #000;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
  }
  
  @media screen and (max-width: 600px) {
    .captchasep1 {
      display: flex;
      flex-direction: column !important;
    }
  
    .captchasep1 .captcha-codes-sec {
      border-left: 1px solid #ced4da;
      border-right: 1px solid #ced4da;
      border-bottom: 1px solid #ced4da;
      margin-top: 3px;
    }
  }
@media(max-width:768px){
    .contact-content #contact-form {
        margin-left: 0px;
 
    }
}
@media(max-width:350px){
    .contact-content .item h6 {
        font-size: 12px;
        font-weight: 600;
        vertical-align: middle;
    }
}
/* contact us end */

/* services card style start */
.service-card{
    position: relative;
  }
  .service-card:hover .service-image img{
    transform: scale(1.06);
  }
  .service-image{
    position: relative;
    overflow: hidden;
  }
  .service-image img{
    transition: 0.5s ease-in-out;
  }
  .overlay-service-text{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    /* background-color: rgba(19, 73, 131, 0.87); */
    background-color: #000000a8;
  }
  .overlay-service-text a{
    text-decoration: none;
    display:flex;

    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
  }
  .overlay-service-text a h3{
    color: var(--yellow);
    text-align: center;
    font-size: 24px;
  }
  .overlay-service-text a p{
    color: #fff;
    text-align: center;
    font-size: 14px;
  }
/* services card style end */





/*** Footer Start ***/
.footer {
    background: var(--blue);
}

.footer .footer-item a {
    text-decoration: none;
    line-height: 35px;
    color: #fff !important;
    transition: 0.5s;
}

.footer .footer-item p {
    line-height: 25px;
    color: #fff;
    font-size: 14px;
    text-align: justify;
}

.footer .footer-item a:hover {
    /*letter-spacing: 1px;*/
    color: var(--blue);
}

.footer-item a i {
    color: var(--yellow);
}

.footer-item a i.fab {
    font-size:22px;
}


.footer .footer-item-post a {
    transition: 0.5s;
    text-decoration: none;
    /* color: #fff !important; */
    color: #fff;
}

.footer .footer-item-post a:hover {
    color: var(--yellow) !important;
}

.footer .footer-item-post .footer-btn a {
    transition: 0.5s;
}

.footer .footer-item-post .footer-btn a:hover {
    color: var(--yellow);
}

.footer .img-fit-blog-div {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 2px solid #00be49;
}

.footer .img-fit-blog-div img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/*** Footer End ***/

/*** copyright Start ***/
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--yellow) !important;
}

.copyright a {
    text-decoration: none;
    color: var(--blue);
}

/*** copyright end ***/

/* enquiry page style start */
.table-head {
    background: var(--blue);
    color: #fff;
}

.lefty-img-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.lefty-img-section img {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;


}

.details-related-section p {
    font-size: 18px;
    text-align: justify;
    color: #636262;
    font-weight: 400;
}



.enquiry-form-section {
    background: linear-gradient(to right, #0000009f, #2d2e2eb3),
        url(../images/enq-image/background-generator-img.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


form input::placeholder {
    color: #fff !important;
}

form textarea::placeholder {
    color: #fff !important;
}

.enquiry-call-option {
    display: flex;
    gap: 5px;
}

.enquiry-email-call {
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
    border: 1px solid #fff;
    padding: 20px;
    border-radius: 5px;
}

.enquiry-email-call li {
    list-style: none;
    font-size: 25px;
    color: #fff;
}

.enquiry-email-call p {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 0px;
    color: #fff;
}

.enquiry-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    padding: 10px;
    gap: 20px;
}

.enquiry-icon a {
    font-size: 30px;
    color: #fff !important;
}

.text-dark {
    color: #fff !important;
}

.form-head-dark {
    font-weight: 600;
}

.form-head-dark input {
    padding: 10px;
    border-radius: 0;
    border: 1px solid #b2b2b2;
    background: none;
}

.form-head-dark input:hover {
    background: none;
}

.form-head-dark textarea {
    padding: 20px;
    border-radius: 0;
    border: 1px solid #b2b2b2;
    background: none;
}

.form-head-dark textarea:hover {
    background: none;
}



/* captcha start */
.captchasep1 {
    display: flex;
}

.captchasep1 input {
    width: 100% !important;
    margin-top: 0 !important;
    height: 63px;
}
.captchasep1 input ::placeholder{
    color: #000 !important;
}
.captchasep1 .captcha-codes-sec {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 63px;
    border-radius: 5px;
    border-top: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    background: url(../images/logo/captcha.webp);
    font-weight: bolder !important;
}

.captchasep1 .captcha-codes-sec p {
    margin-bottom: 0;
    letter-spacing: 9px;
    font-style: italic;
    font-size: 24px;
    padding: 10px;
    height: 100%;
    color: #000;
    font-weight: bolder !important;
}

@media (max-width: 768px) {
    .captchasep1 .captcha-codes-sec p {
        font-size: 24px;
    }

    .captchasep1 {
        margin-bottom: 10px;
    }
}

@media (max-width: 992px) {
    .captchasep1 .captcha-codes-sec p {
        font-size: 18px;
    }
}

.captchasep1 .captcha-codes-sec {
    margin-bottom: 10px;
}

.captchasep1 .captcha-codes-sec button {
    font-style: italic;
    font-size: 22px;
    outline: none;
    background: transparent;
    height: 100%;
    border: none;
    font-weight: bolder;
}

.captchasep1 .captcha-codes-sec button i {
    background: #000;
    color: #fff !important;
    padding: 10px;
    border-radius: 6px;
}

@media screen and (max-width: 600px) {
    .captchasep1 {
        display: flex;
        flex-direction: column !important;
    }

    .captchasep1 .captcha-codes-sec {
        border-left: 1px solid #ced4da;
        border-right: 1px solid #ced4da;
        border-bottom: 1px solid #ced4da;
        margin-top: 3px;
    }
}

/* card */
.card-box-section {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    overflow: hidden;
    position: relative;
    margin: 10px;
}

.card-box-section img {
    transition: 0.4s ease-in-out;
}

.card-box-section:hover img {
    transform: scale(1.06);
    cursor: pointer;
}

.card-box-heading h2 {
    color: var(--yellow);
    font-size: 20px;
    padding: 5px 20px;
    margin-bottom: 0;
    text-align: center;
}

.card-box-heading {
    position: absolute;
    bottom: 0px;
    z-index: 999;
    background-color:rgba(19, 73, 131, 0.877) ;
    width: 100%;
    /* height: 100%; */
    
}


/* enquiry page style end */

/* blog-details-start */
.blog-image{
    position: relative;
  }
  .blog-image img{
    position: relative;
  }
  .blog-image .blog-data{
    position: absolute;
    bottom: 0;
    padding: 10px 10px;
    background-color: rgba(0, 0, 0, 0.582);
    width: 100%;
  }
  .blog-image .blog-data p{
    margin-bottom: 0;
    color: #fff;
  }
  .blog-content p{
    text-align: justify;
    font-size: 18px;
  }
.recent-links {
text-decoration: none;
}
.recent-blog{
    display: flex;
    align-items: center;
    justify-content: center;
    border: dotted rgb(159, 157, 157);
}
.recent-content h3{
    font-size: 18px;
    color: var(--blue);
}
.recent-content p{
    color: var(--blue);
    font-size: 16px;
}
/* blog-detaile-end */

/* gallery-section-start */
.gallery .gallery-item {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 10px;
  }

  .gallery .gallery-item img {
    transition: 0.5s;
  }

  .gallery .gallery-item:hover img {
    transform: scale(1.2);
  }

  .gallery .gallery-item::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    transition: 0.5s;
    z-index: 1;
  }

  .gallery .gallery-item:hover::after {
    width: 100%;
    height: 100%;
  }

  .gallery .gallery-item .search-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    z-index: 5;
    opacity: 0;
  }
  .gallery .gallery-item .search-icon a{
    padding: 10px;
    border-radius: 50%;
  }
  .gallery .gallery-item:hover .search-icon {
    opacity: 1;
  }
/* galleryt-section-end */

/* gallery-responsive start */
.gallery-responsive{
    display: none;
}
.gallery-responsive .gallery-item {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 10px;
  }

  .gallery-responsive .gallery-item img {
    transition: 0.5s;
  }

  .gallery-responsive .gallery-item:hover img {
    transform: scale(1.2);
  }

  .gallery-responsive .gallery-item::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    transition: 0.5s;
    z-index: 1;
  }

  .gallery-responsive .gallery-item:hover::after {
    width: 100%;
    height: 100%;
  }

  .gallery-responsive .gallery-item .search-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    z-index: 5;
    opacity: 0;
  }
  .gallery-responsive .gallery-item .search-icon a{
    padding: 10px;
    border-radius: 50%;
  }
  .gallery-responsive .gallery-item:hover .search-icon {
    opacity: 1;
  }

  @media(max-width:768px){
      .gallery-responsive{
       display: block;
      }
      .gallery{
          display: none;
      }
  }
/* gallery-responsiove end */


/* product-detail start here */
.product-detail-img {
    background-color: var(--blue);
    padding: 20px;
    color: #fff; 
    text-align: center;
 
}
.product-detail-info {
    background-color: var(--blue);
    padding: 20px;
    color: #fff; 
  
 
}
.product-detail-info a{
 text-decoration: none;
 color: var(--yellow) !important; 
 
}
/* .product-detal-img{
    background-image: linear-gradient(rgba(0, 0, 0, 0.337),rgba(0, 0, 0, 0.277)),url("../images/product-image/gas-generator-image.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    padding: 15px;
} */
/* product-detail end here */








/* subcateg section start here */
.sub-product-card {
    /* width: 360px; */
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s, box-shadow 0.4s;
    position: relative;
    cursor: pointer;
  }

  .sub-product-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.2);
  }
  .subcat-card{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: var(--blue);
  }

  .card-header {
    padding: 15px 8px !important;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .card-header img {
    width: 90%;
    height: 90%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s;
  }

  .sub-product-card:hover .card-header img {
    transform: scale(1.1);
  }

  .card-body {
    /* padding: 25px; */
    text-align: center;
    background-color: #fff;
  }
  .card-body a{
    text-decoration: none;
  }
  .card-title {
    font-size: 22px;
    font-weight: bold;
    color: #000;
    margin-bottom: 0px;
  }

 


  .badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #ff4757;
    color: #fff;
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  @media (max-width: 768px) {
    .sub-product-card {
      width: 100%;
    }
  }
/* subcateg section end here */