body {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: var(--font);



}



html {

    scroll-behavior: smooth;

}



:root {





    /* **************font family initialization******************** */

    --font: "Raleway", sans-serif;

    font-family: "Raleway", sans-serif;









    /* **************font size initialization******************** */

    --radius: 5px;

    --para-size: 14px;

    --topbar-size: 14px;

    --heading-size: 18px;

    --heading2-size: 22px;

    --heading3-size: 26px;

    --title-size: 30px;

    --large-text: 40px;





    /* **********website color initilaization******************* */















    --primary-color: #e2c669;

    --secondary-color: #757474;

    --btn-colo2: #e2c669;

    --btn-color: #757474;

    --hover-color1: #e2c669;

    --hover-color2: #757474;



    --bg1-color: #ffffff;

    --bg2-color: #f4f4f4;

    --white: #1a1a1a;

    --topbar-color: #e0e0e0;



    --para-color: #555555;

    --heading-color: #1a1a1a;

    --hover-text: #000000;

    --dark-text: #e0e0e0;



    --border-light: #e0e0e0;

    --light-color: #ffffff;



    --footer-color: #1A1A1A;







    --dark-overlay-gradient: linear-gradient(rgba(30, 30, 30, 0.85), rgba(30, 30, 30, 0.95));

    --gradient1-color: linear-gradient(rgba(70, 90, 238, 0.48), rgba(30, 30, 30, 0.95));













    --overlay-color: rgba(236, 230, 255, 0.7);













}



@media (min-width: 1300px) {



    .container,

    .container-lg,

    .container-md,

    .container-sm,

    .container-xl,

    .container-xxl {

        max-width: 1230px;

    }

}



@media (min-width: 1440px) {

    .container-fluid {

        max-width: 1429px;

    }

}



/* img {

    max-width: 100%;

    width: auto;

    height: auto;

} */



.main-btn {

    padding: 12px 15px;

    color: var(--light-color);

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



    display: inline-flex;

    gap: 5px;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    font-weight: 500;

    font-family: var(--font2);



    white-space: nowrap;

    background: var(--btn-color);

    outline: none;

    transition: 0.2s ease-in-out;

    justify-content: center;

    text-decoration: none;

    border-radius: var(--radius);

    line-height: 1;



}



.main-btn:hover {

    background: var(--hover-color1);

    color: var(--white);

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

}



/* .main-btn svg {

    color: var(--primary-color) !important;

}

.main-btn :hover svg{

    color: var(--white);



} */



.main-btn2 {

    padding: 12px 15px;

    color: var(--white);

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



    display: inline-flex;

    gap: 5px;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    font-weight: 500;

    font-family: var(--font2);



    white-space: nowrap;

    background: var(--btn-color2);

    outline: none;

    transition: 0.2s ease-in-out;

    justify-content: center;

    border-radius: var(--radius);

    line-height: 1;

    text-decoration: none;

}



.main-btn2:hover {

    background: var(--btn-color);

    color: var(--light-color);

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

}



.main-btn3:hover {

    background: var(--white);



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

    color: var(--hover-color1);

}



.main-btn3 {

    padding: 12px 15px;

    color: var(--white);

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



    display: inline-flex;

    gap: 5px;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    font-weight: 500;

    font-family: var(--font2);



    white-space: nowrap;

    background: var(--topbar-color);

    outline: none;

    transition: 0.2s ease-in-out;

    justify-content: center;

    border-radius: var(--radius);

    line-height: 1;

    text-decoration: none;

}



.read-more-btnX {

    display: inline-block;

    color: var(--primary-color);

    text-decoration: none;

    font-weight: 500;

    transition: color 0.3s ease;

}



.read-more-btnX svg {

    margin-top: 5px;

    color: var(--secondary-color);

}



.read-more-btnX:hover {

    color: var(--hover-color1);

}



.g-recaptcha {

  transform: scale(0.95);

  transform-origin: 0 0;

  margin-top: 2px;

}



.social {

    display: flex;

    justify-content: center;

    list-style: none;

    gap: 30px;

    margin-bottom: 0;

    padding: 0;

    /* background-color: var(--secondary-color); */

}



.social li a {

    color: var(--white);

}



.social li a:hover {

    opacity: 1;

    color: var(--hover-color1);

}



header {

    position: relative;

}



.mid-bar.stricky-fixed {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 999;

    /* background-color: #FF5E15 !important; */

    background: var(--bg2-color);

    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);

    animation-name: fadeInDown;

    animation-duration: 0.6s;

    animation-fill-mode: both;

}



.mid-bar {

    border-bottom: 1px solid rgb(219, 214, 214, 1);

    padding: 14px 0;



}





.top-bar {

    background-color: var(--bg1-color);

    padding: 14px 0;

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

}



.top-bar p {

    font-size: var(--topbar-size);

    margin-bottom: 0;

    color: var(--white);



    font-weight: 500;

    margin-left: 2px;

}



.top-bar p svg {

    margin-top: -2px;

    color: var(--primary-color);

}



.top-bar p a {

    color: var(--white);



    text-decoration: none;

}



.top-bar p a:hover {

    color: var(--hover-color1);

}



.top-bar p:hover {

    color: var(--hover-color1);

}



.logo img {

    max-width: 250px;

    width: auto;

    max-height: 60px;

    height: auto;

}



.search-bx {

    display: flex;

    align-items: center;

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

    border-radius: 8px;

    overflow: hidden;

    padding: 5px;

    padding-left: 13px;

}



.search-bx input {

    width: 100%;

    max-width: 100%;

    outline: none;

    border: none;

    color: var(--text-color);

    font-weight: 400;

    height: 20px;

    font-size: 14px;

    min-width: 220px;

}



.search-bx button {

    outline: none;

    border: none;

    height: 30px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 8px;

    color: var(--para-color);

    background: transparent;

}



.menubar {

    position: relative;

    background-color: var(--bg1-color);

}



.menubar .logo {

    display: none;

}



.menubar.stricky-fixed {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 999;

    background: #fff;

    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);

    animation-name: fadeInDown;

    animation-duration: 1s;

    animation-fill-mode: both;

}



@keyframes fadeInDown {

    from {

        opacity: 0;

        transform: translate3d(0, -100%, 0)

    }



    to {

        opacity: 1;

        transform: none

    }

}



.navigation .nav-header {

    display: none;

    padding: 12px 20px

}



.navigation .navbar button {

    width: 40px;

    height: 40px;

    background: var(--bg2-color);

    border: 0;

    outline: 0;

    color: var(--white);

    font-size: 25px;

    border-radius: 0;

    display: inline-block;

    text-align: center;

    line-height: 40px;

    position: relative;

    z-index: 99;

    padding: 5px;

    position: relative;

    transform: rotate(0deg);

    transition: .5s ease-in-out;

    cursor: pointer;

}



.navigation .navbar button span {

    display: block;

    position: absolute;

    height: 3px;

    width: 70%;

    background: var(--primary-color);

    border-radius: 9px;

    opacity: 1;

    left: 15%;

    transform: rotate(0deg);

    transition: .25s ease-in-out;

}



.navigation .navbar button span:nth-child(1) {

    top: 8px;

}



.navigation .navbar button span:nth-child(2),

.navigation .navbar button span:nth-child(3) {

    top: 18px;

}



.navigation .navbar button span:nth-child(4) {

    top: 28px;

}



.navigation .navbar button.open span:nth-child(1) {

    top: 18px;

    width: 0%;

    left: 50%;

}



.navigation .navbar button.open span:nth-child(2) {

    transform: rotate(45deg);

}



.navigation .navbar button.open span:nth-child(3) {

    transform: rotate(-45deg);

}



.navigation .navbar button.open span:nth-child(4) {

    top: 18px;

    width: 0%;

    left: 50%;

}



.navigation .menu {

    display: block;



}



.navigation .menu ul {

    width: 100%;

    margin: 0;

    padding: 0;

    text-align: center;

    display: block;





}



.navigation .menu ul li {

    display: inline-block;

    position: relative;



}



.navigation .menu ul li a {

    padding: 23px 11px;

    display: block;

    color: var(--heading-color);

    transition: all 0.3s ease;

    font-size: var(--topbar-size);

    background: transparent;

    font-weight: 600;

    text-transform: uppercase;

    text-decoration: none;



}



.navigation .menu ul li.active a,

.navigation .menu ul li:hover a {

    color: var(--hover-color1);

    background: transparent;

    text-decoration: none;

}



.navigation .menu ul li ul.ls-dropdown {

    top: 100%;

    left: 0;

    text-align: left

}



.navigation .menu ul li ul.ls-dropdown li:last-child {

    border: 0

}



.navigation .menu ul li ul.ls-dropdown li ul.ls-dropdown {

    left: 100%;

    margin-top: -36px

}



.navigation .menu ul li ul.ls-dropdown li ul.ls-dropdown li ul.ls-dropdown {

    left: -100%;

    margin-top: -31px

}



.navigation .menu ul li ul.ls-dropdown {

    position: absolute;

    width: 285px;

    display: none;

    z-index: 99;

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

    background: var(--bg1-color);

    margin: 0;

    padding: 0;

    transition: all .3s ease

}



.navigation .menu ul li:hover ul.ls-dropdown {

    display: block

}



.navigation .menu ul li:hover ul.ls-dropdown li ul.ls-dropdown {

    display: none;

    transition: all .3s ease;

    width: 250px;

}



.navigation .menu ul li ul.ls-dropdown li:hover ul.ls-dropdown {

    display: block

}



.navigation .menu ul li ul.ls-dropdown li {

    display: block;

    padding: 0;

    width: 100%

}



.navigation .menu ul li ul.ls-dropdown li:last-child a:after {

    display: none

}



.navigation .menu ul li ul.ls-dropdown li a:hover {

    color: var(--hover-color1);

    background-color: var(--bg2-color);

}



.navigation .menu ul li ul.ls-dropdown li:hover a {

    color: var(--hover-color1);

    background-color: var(--bg1-color);

}



.navigation .menu ul li ul.ls-dropdown li:hover ul.ls-dropdown li a {

    background: var(--bg2-color);

    color: var(--heading-color);

    padding: 5px 10px;

    font-size: 13px;



}



.navigation .menu ul li ul.ls-dropdown li:hover ul.ls-dropdown li a:hover {

    color: var(--white);

    background: var(--secondary-color)

}



.navigation .menu ul li ul.ls-dropdown li a {

    color: var(--heading-color);

    font-size: var(--para-size);

    padding: 6px 12px;

    position: relative;

    display: block;

    text-transform: capitalize;

    transition: all 0.2s;

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    font-weight: 400;



}



.navigation ul li.ls-submenu a button {

    border: 0;

    background: transparent;

    outline: 0;

    padding: 0;

    margin: 0 0 0 3px;

    color: var(--primary-color);

}



.navigation ul li.ls-submenu a button svg {

    width: 14px;

    height: 14px;

    color: var(--heading-color);

}



.navigation ul li.ls-submenu:hover svg {

    transform: rotateZ(180deg);

    color: var(--hover-color2);

}



.navigation ul li.ls-submenu:hover ul.ls-dropdown li.ls-submenu svg {

    color: #242424

}



.navigation ul li.ls-submenu ul.ls-dropdown li a button {

    float: right;

    color: #333;

}



.navigation ul li.ls-submenu ul.ls-dropdown li a button svg {

    transform: rotateZ(-90deg);

}



.navigation ul li.ls-submenu ul.ls-dropdown li.ls-submenu:hover svg {

    color: var(--secondary-color);

}



.navigation .navbar {

    display: none;

    padding: 8px 0;

    margin: 0

}



.navigation .menu ul>li:hover>ul.ls-dropdown {

    visibility: visible;

    opacity: 1;

}



.navigation .menu ul>li>ul.ls-dropdown>li>ul.ls-dropdown {

    left: 100%;

    margin-top: -36px;

}



.navigation .menu ul>li>ul.ls-dropdown>li>ul.ls-dropdown>li>ul.ls-dropdown {

    left: -100%;

    margin-top: -31px;

}



.navigation .menu ul>li>ul.ls-dropdown>li:hover>ul.ls-dropdown {

    visibility: visible;

    opacity: 1;

}



.navigation .menu ul>li ul.ls-dropdown {

    position: absolute;

    min-width: 190px;

    width: max-content;

    max-width: 300px;

    opacity: 0;

    visibility: hidden;

    z-index: 99;

    transition: all .3s ease;

    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);

    background: #fff;

    color: var(--para-color);

    margin: 0;

    padding: 0;

    text-align: left;

}



.navigation .menu ul>li ul.ls-dropdown li {

    display: block;

    padding: 0;

    width: 100%;

}





.call-now {

    display: flex;

    align-items: center;

    justify-content: end;

    gap: 10px;



    /* border-right: 1px dashed var(--border-color); */



}



.call-now .icon-bx {

    min-width: 37px;

    width: 37px;

    height: 37px;

    color: white;

    background: var(--pri);

    border-radius: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.call-now .con-bx {

    text-align: left;

}



/* *******************************footer section code*************************************** */

.cta-section {

    background-color: var(--secondary-color);

}



/* Ensure content is on top of the icon */

.cta-section .container {

    position: relative;

    z-index: 1;

}







.site-footer {

    background-color: var(--footer-color);

    color: var(--para-color);

    font-size: var(--para-size);

}



.footer-logo {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    filter: brightness(0) invert(1);

}



.logo-icon {

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Social Icons */

.social-icons .social-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 0.01rem solid var(--light-color);



    color: var(--bg1-color);



    text-decoration: none;

    margin-right: 10px;

    transition: all 0.2s ease;

}



.social-icons .social-link:hover {

    background-color: var(--bg1-color);

    color: var(--hover-text);

}



.widget-links .link-item {

    margin-bottom: 12px;

}



.widget-links .link-item a {

    color: var(--border-light);

    text-decoration: none;

    transition: all 0.2s ease;

}



.widget-links .link-item a:hover {

    color: var(--hover-color1);

    font-weight: 500;

}



.footer-bottom {



    border-top: 1px solid var(--secondary-color);

    padding: 25px 0;

}



.footer-bottom-links .bottom-link-item {



    margin-left: 25px;

}



.footer-bottom-links .bottom-link {



    text-decoration: none;

    font-size: var(--para-size);

    transition: all 0.2s ease;

    color: var(--border-light);

}



.footer-bottom-links .bottom-link:hover {

    color: var(--hover-color1);

}





/* Popular Searches */



.foot08-head {

    color: var(--dark-text);

    font-size: var(--heading2-size);

    font-weight: 600;

    margin-bottom: 10px;

}



.foot08-popular {

    margin-top: 20px;

}



.foot08-popular-list {

    list-style: none;



    padding: 0;



    margin: 0;



    display: flex;



    flex-wrap: wrap;



    gap: 6px 6px;



    font-size: 14px;

}



.foot08-popular-list li::after {

    /* content: "|"; */



    margin-left: 12px;



    color: var(--border-light);

}



.foot08-popular-list li:last-child::after {

    content: "";

}



.foot08-popular-list a {

    color: var(--dark-text);



    text-decoration: none;



    transition: color 0.2s;

}



.foot08-popular-list a:hover {

    color: var(--hover-color1);

}



.foot08-muted {

    color: var(--dark-text) !important;

}





/* ************************************************hero section code section ***************************************/

/* Button styling */

#scrollTopBtn {

    position: fixed;

    bottom: 30px;

    left: 30px;

    z-index: 99;

    /* background-color: #0d6efd; */

    color: transparent;

    border: none;

    outline: none;

    cursor: pointer;



    /* background-color: var(--secondary-color); */

    display: none;

    /* Hidden by default */

    transition: all 0.3s ease;

}



#scrollTopBtn img {

    width: 100%;

    height: 60px;

    background: transparent;

}



#scrollTopBtn:hover {

    transform: translateY(-3px);

}





.eyebrow-section {





    color: var(--secondary-color);

    align-content: center;

    font-size: var(--para-size);

    display: inline-block;

    line-height: 1;

    margin-bottom: 15px;

    text-transform: uppercase;

    font-weight: 600;

    letter-spacing: 0.5px;

}



.heading-text {

    font-size: var(--title-size);

    font-weight: 600;

    color: var(--heading-color);

}



.heading-underline {

    height: 4px;

    width: 80px;

    border-radius: 2px;

    background: var(--secondary-color);

}



.leadsure {

    padding: 56px 0;

}



.leadsureheading {

    font-weight: 600;

    font-size: var(--title-size);

    color: var(--heading-color);

    margin-bottom: 10px;



}



.leadsurepara {

    font-size: var(--para-size);

    color: var(--para-color);

    line-height: 1.6;

}



.leadseo p,

.leadseo ul,

.leadseo li {

    font-size: var(--para-size);

    color: var(--para-color);

    line-height: 1.8;

}



.leadsuresubheading {

    font-weight: 600;

    font-size: var(--heading-size);

    color: var(--heading-color);

}



.leadseo h1,

.leadseo h2,

.leadseo h3,

.leadseo h4,

.leadseo h5 {

    font-weight: 600;

    font-size: var(--heading-size);

    color: var(--heading-color);

}





.zis3 {

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    font-size: var(--para-size);

    color: var(--para-color);

    line-height: 1.6;

}



.zis2 {

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    font-size: var(--para-size);

    color: var(--para-color);

    line-height: 1.6;

}



.zis1 {

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

    overflow: hidden;

    font-size: var(--heading-size);

    color: var(--heading-color);

    font-weight: 600;



}





.section-title {

    color: var(--heading-color);

    font-weight: 700;

    text-transform: uppercase;

    font-size: var(--title-size);



    margin-bottom: 50px;

}



.colordhead {

    color: var(--primary-color);

}



.heading-text {

    font-size: var(--title-size);

    font-weight: 600;

    color: var(--heading-color);

}







main,

main img {

    overflow: hidden;

    display: block;

    width: 100%;

}



/*#carouselExampleAutoplaying img {*/

/*    aspect-ratio: 1920 / 700;*/



/*}*/



.carousel-control-next,

.carousel-control-prev {

    line-height: 0;

    position: absolute;

    top: 50%;

    display: block;

    width: 38px;

    height: 38px;

    padding: 0;

    transform: translate(0, -50%);

    cursor: pointer;

    color: #fff;

    border: 0;

    outline: 0;

    background-color: rgba(0, 0, 0, 0.1);

    backdrop-filter: blur(2px);

    border-radius: 100%;

    z-index: 9;

    opacity: 1;



}



.carousel-control-next-icon,

.carousel-control-prev-icon {

    height: 16px;

    width: 16px;

}



.carousel-control-next:hover,

.carousel-control-prev:hover {

    background-color: var(--primary-color);

    opacity: 1;

}



.carousel-control-prev {

    left: 30px;

}



.carousel-control-next {

    right: 30px;

}



@media (max-width:980px) {



    .carousel-control-next,

    .carousel-control-prev {

        width: 20px;

        height: 35px;

    }



    .carousel-control-next-icon,

    .carousel-control-prev-icon {

        height: 13px;

        width: 13px;

    }



    .carousel-control-prev {

        left: 0px;

        border-radius: 0 3px 3px 0;

    }



    .carousel-control-next {

        right: 0px;

        border-radius: 3px 0px 0px 3px;

    }

}





.swiper-next,

.swiper-prev {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.swiper-button-next,

.swiper-button-prev,

.swiper-next,

.swiper-prev {

    border: 1px solid #eee;

    background-color: white;

    color: var(--text-light);

    width: 35px;

    height: 35px;

    z-index: 2;

    border-radius: 100%;

    text-align: center;

}



.swiper-next svg,

.swiper-prev svg {

    width: 18px;

    height: 18px;

}



.swiper-button-next:hover,

.swiper-button-prev:hover,

.swiper-next:hover,

.swiper-prev:hover {

    color: white;

    background-color: var(--primary-color);

    border-color: var(--primary-color);

}



.swiper-button-next,

.swiper-next {

    right: 25px;

    left: auto;

}



.swiper-button-prev,

.swiper-prev {

    left: 25px;

    right: auto;

}



.swiper-button-next:after,

.swiper-button-prev:after {

    font-size: 13px;

    font-weight: 600;

}



.swiper_wrap {

    /* height: 100%;  */

    width: 100%;

    position: relative;

    display: block;

    text-align: left;

}



.swiper-button-next.swiper-button-disabled,

.swiper-button-prev.swiper-button-disabled {

    display: none;

}



.swiper-wrapper {

    display: flex;

    align-items: stretch;

}



.swiper-slide {

    height: auto;

}



.swiper-prev {

    left: -22px;

    right: auto;

}



.swiper-next {

    right: -22px;

    left: auto;

}





/******************* about us section code************* */





.aboutsection {

    background-color: var(--bg1-color);

    position: relative;

    overflow: hidden;

}







/* Full-size background image + gradient overlay + bounce */

.aboutsection::before {

    aspect-ratio: 2/1;

    content: "";

    position: absolute;

    inset: 0;

    /* full cover */

    background-image: url("../images/icon2.webp");

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    animation: bounceY 4s ease-in-out infinite;

    z-index: 0;

    top: 10%;

    left: 65%;

    opacity: 0.1;

}





@keyframes bounceY {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-25px);

        /* move upward */

    }

}





.hero-about-image {

    aspect-ratio: 1/1;



    width: 100%;

    overflow: hidden;

}



.hero-about-image img {

    width: 100%;

    height: auto;

    object-fit: cover;

}





/* **********************show product section code*************** */

.services-section {

    background: var(--bg2-color);

}



.service-card {

    background-color: var(--bg1-color);

    /* border-radius: var(--radius); */

    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    height: 100%;

    overflow: hidden;

    text-decoration: none;

    display: flex;

    flex-direction: column;

    color: inherit;

}



.service-card:hover {

    transform: translateY(-8px);

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

}



.image-wrapper {

    position: relative;

    overflow: hidden;



}



.card-image {

    aspect-ratio: 1/1;

    width: 100%;

    height: auto;

    /* Fixed height for consistent card appearance */

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;

}



.image-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: var(--secondary-color);

    opacity: 0.4;

    transform: translateY(-100%);

    /* Start off-screen above */

    transition: transform 0.5s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.service-card:hover .image-overlay {

    transform: translateY(0);

}



.card-body {

    padding: 1rem;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.card-body .leadsuresubheading:hover {

    cursor: pointer;

}



.product-item .product-title {

    color: #1A2953;

    font-size: 20px;

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 15px;

}





/* ********************video section code****************** */

.video-embed-section {

    background-color: var(--bg1-color);

}



.video-frame {

    box-shadow: 15px 15px 0px 0 var(--primary-color);



    background-color: var(--bg1-color);

    line-height: 0;

}



.video-frame .ratio iframe {

    display: block;

}





/* ******************our products section*************************** */

.projects-section {

    background-color: var(--bg2-color);

}







/*--------------------------------

        # Custom Bootstrap Nav Tabs

        --------------------------------*/

.project-tabs {

    border-bottom: none;

    margin-bottom: 30px;

}



.project-tabs .nav-item {

    margin: 0 5px;

}



.project-tabs .nav-link {

    border: none;

    color: var(--para-color);

    font-weight: 600;

    text-transform: uppercase;

    font-size: 14px;

    padding: 10px 15px;

    transition: all 0.3s ease;

}



.project-tabs .nav-link:hover {

    color: var(--hover-color1);

}



.project-tabs .nav-link.active {

    color: var(--heading-color);

    background-color: transparent;

    font-size: 16px;

    border: none;

}





/* ************************working process section code************************* */



.working-process-section {

    /* Using a dark, textured background image as requested */

    background-image: url('../images/home-background-one.webp');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

}









/* Individual Step Styling */

.process-step {

    position: relative;

    padding-top: 40px;

    /* For mobile stacking */

    margin-bottom: 30px;

}



.process-step .step-number {

    position: absolute;

    top: -37px;

    left: 39%;

    transform: translateX(-50%);

    font-size: 82px;

    font-weight: 700;



    color: rgba(255, 255, 255, 0.1);

    z-index: 1;

}



.process-step .step-icon-wrapper {

    width: 125px;

    height: 125px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px auto;

    /* Inactive state (default) */

    background-color: #000000;

    color: var(--light-color);

    border: 2px solid var(--white);

    /* Subtle border */

    font-size: 36px;

    position: relative;

    z-index: 2;

    transition: all 0.3s ease;

}



/* Active state styling */

.process-step.active .step-icon-wrapper {

    background-color: var(--bg1-color);

    color: var(--white);

    border-color: var(--bg1-color);

}



.process-step .step-title {

    color: var(--light-color);

    font-size: var(--heading-size);

    font-weight: 600;

    margin-bottom: 10px;

}



.process-step .step-icon-wrapper:hover {

    background-color: var(--bg1-color);

    color: var(--white);

}







/* Bottom Description */

.working-process-section .section-description {

    color: var(--dark-text);

    font-size: var(--para-size);

    line-height: 1.7;



    margin-top: 20px;

}





/* ***************advantges section code********************* */





.advantages-section {

    background-color: var(--bg2-color);


}


/* 
.advantages-section::before {

   content: '';
aspect-ratio: 2 / 1;
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../images/icon5.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: bounceY 4s 
ease-in-out infinite;
    z-index: 0;
    top: 10%;
    right: 65%;
    opacity: 0.4;

} */



/* .advantages-section::before {

    top: -80px;

    left: 50px;

    transform: rotate(-28deg);



} */




/* Ensure content stays above the backgrounds */

.advantages-section .container-fluid {

    position: relative;

    z-index: 2;

}





/* Central Image */

.advantage-image {

    border-radius: 50%;

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

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

}





/* ***************** image + text  content section code****************** */



.why-choose-us-section {



    background-color: var(--bg1-color);

    overflow: hidden;

}



/* Section Header */

.why-choose-us-section .section-subtitle {



    color: #e11d2a;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 10px;

}







/* Map Image Wrapper */

.map-image-wrapper {

    aspect-ratio: 1/1;

    width: 100%;

    height: auto;

}









/* ***************************SEO SECTION CODE****************** */

.section-highlight {

    background: var(--bg2-color);

}



.feature-copy {

    position: relative;

    color: var(--para-color);

    font-size: 14px;

    line-height: 1.6;

    background: var(--background2-color);

    padding: 18px 10px;

    overflow: hidden;

}



/* Collapse content initially */

.feature-copy .seo-content61 {

    max-height: 315px;

    /* collapsed */

    overflow: hidden;

    transition: max-height 0.5s ease;

}



.scrollcard {

    width: 100%;

}



.scrollcard img {

    aspect-ratio: 1/1;

    box-shadow: 15px 15px 0px 0 var(--primary-color);

    object-fit: cover;

}







/* Hidden checkbox */

.read-more-toggle {

    display: none;

}



/* Expand when checked */

.read-more-toggle:checked~.seo-content61 {

    overflow-y: auto;

    scrollbar-width: thin;

}



/* Read more button */

.read-more-btn {

    display: block;

    text-align: left;

    /* button floats right side */

    margin-top: 10px;

    color: var(--btn-color);

    font-size: var(--heading-size);

    cursor: pointer;

    transition: color 0.3s;

}





/* Toggle text dynamically */

.read-more-btn::after {

    content: "Show More...";

    color: var(--primary-color);

    font-size: var(--para-size);

}



.read-more-btn:hover::after {

    color: var(--secondary-color);

}



.read-more-btn:hover::before {

    color: var(--primary-color);

}



.read-more-toggle:checked~.read-more-btn::after {

    content: "Show Less...";

    color: var(--hover-color);

    font-size: var(--para-size);



}









/* faq section code******************************** */



.faq-container {



    background-image: url('https://templates.thememodern.com/theratio/images/bg/bg2-home3.jpg');

}







.left-section {



    padding: 10px;



    min-height: 1px !important;





    transition: min-height 0.3s ease;

}





.faq-title {

    font-size: var(--title-size);

    font-weight: 600;

    color: var(--heading-color);

    margin-bottom: 10px;

    line-height: 1.2;

}













.right-section {

    flex: 1;

    padding: 40px;

}



.faq-item {



    position: relative;

    margin-bottom: 10px;

    border-left: 3px solid var(--primary-color);

    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);



}



.faq-item:last-child {

    border-bottom: none;

}



.faq-question {

    background: var(--bg1-color);

    /* background-color: transparent; */

    border: none;

    padding: 10px 40px 18px 10px;

    font-size: var(--para-size);

    font-weight: 600;

    color: var(--heading-color);

    cursor: pointer;

    width: 100%;

    text-align: left;

    position: relative;

    transition: all 0.3s ease;



}







.faq-question::after {

    content: '\f107';

    font-family: 'Font Awesome 6 Free';

    font-weight: 900;

    position: absolute;

    right: 3%;

    top: 50%;

    transform: translateY(-50%) rotate(-90deg);

    transition: transform 0.3s ease;

    font-size: 16px;

    color: var(--btn-color);

}



.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: 0.3s ease;

    padding: 0;

    color: var(--para-color);

    font-size: var(--para-size);

    line-height: 1.6;

    box-shadow: 5px 5px 27px rgba(0, 0, 0, 0.3);

}





/* Active states */

.faq-item.active .faq-question::after {

    transform: translateY(-50%) rotate(0deg);

}



.faq-item.active .faq-answer {

    max-height: 200px;

    padding: 10px;



}







@media (max-width: 768px) {

    .faq-wrapper {

        flex-direction: column;

    }







    .right-section {

        padding: 10px;

    }





}





.iti--separate-dial-code .iti__selected-flag {



    height: 40px;

}



.lable {

    color: red;

}



/* --- Right Side: Enquiry Form --- */

.enquiry-form-wrapper {

    background-color: var(--bg1-color);

    color: var(--heading-color);

    padding: 25px;

    border-radius: var(--radius);

}



@media (max-width: 991.98px) {

    .enquiry-form-wrapper {

        margin-top: 3rem;

    }

}



.enquiry-form-wrapper .form-heading {

    font-size: var(--heading2-size);

    font-weight: 600;

    color: var(--primary-color);

}



.enquiry-form-wrapper .form-subheading {

    color: var(--para-color);

    margin-bottom: 1rem;

}



.form-control,

.input-group-text {

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

    padding: 0.85rem 1rem;

    transition: border-color 0.3s ease;

}



.form-control:focus {

    border-color: var(--secondary-color);

    box-shadow: 0 0 0 0.2rem rgba(229, 109, 72, 0.25);

}







/* *****************blog section code***************************** */



.latest-news-section {



    background-color: var(--bg1-color);



}







.latest-news-section .title-separator {

    /* Dotted line from screenshot */

    display: inline-block;

    width: 50px;

    height: 2px;

    border-top: 2px dotted #aaa;

    margin-bottom: 50px;

}





.blog-card {

    display: block;

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

    border-radius: 1px;

    transition: all 0.3s ease;

    height: 100%;

}



.blog-card:hover {

    transform: translateY(-5px);

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

}



/* Wrapper to position the category tag */

.blog-card .card-img-wrapper {

    position: relative;

}



.blog-card .card-img-top {

    border-radius: 0;

    aspect-ratio: 1 / 1;

    object-fit: cover;

}



.blog-card .card-category-tag {

    position: absolute;

    bottom: 15px;

    left: 15px;

    background-color: var(--white);

    color: var(--light-color);

    padding: 4px 10px;

    font-size: var(--para-size);

    font-weight: 500;

    text-transform: uppercase;

}



/* Card body styles */

.blog-card .card-body {

    padding: 25px;

}



.blog-card .card-meta {

    color: var(--secondary-color);

    font-size: var(--para-size);

    text-transform: uppercase;

    margin-bottom: 10px;

}







/* ***************************our partner section code****************************** */

.partners-section {

    background-color: var(--bg2-color);

}



.partner-heading {

    font-size: var(--title-size);

    color: var(--heading-color);

    font-weight: 600;

}



.partner-para {

    color: var(--para-color);

    font-size: var(--para-size);

}



/* 2. Swiper Container & Slide Styling */

.swiper {

    width: 100%;

    height: 100%;

}



.swiper-slide {

    text-align: center;

    font-size: 18px;

    background: transparent;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 1rem 0;

}





.swiper-slide img {

    display: block;

    width: 150px;

    height: auto;

    object-fit: contain;





    transition: filter 0.3s ease, opacity 0.3s ease;

}



.swiper-slide:hover img {

    filter: grayscale(0%);

    opacity: 1;

}



/* Optional: Style for the pagination dots */

.swiper-pagination-bullet-active {

    background-color: var(--secondary-color);

}



.swiper-horizontal>.swiper-pagination-bullets,

.swiper-pagination-bullets.swiper-pagination-horizontal {

    bottom: -6px;





}







/* **********************our history section code*********************** */



.history-section {

    overflow: hidden;

    background-color: var(--bg2-color);

}





/*--------------------------------

        # Swiper Timeline (Years)

        --------------------------------*/

.history-timeline-swiper {

    width: 100%;

    height: 100px;

    padding: 10px 0;

    position: relative;

}



.history-timeline-swiper .swiper-slide {



    color: var(--para-color);

    font-size: var(--heading-size);

    font-weight: 600;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0.5;

}



.history-timeline-swiper .swiper-slide-active {

    /* Styles for the active (centered) slide */

    color: var(--heading-color);

    font-size: var(--heading2-size);

    font-weight: 700;

    transform: scale(1.1);

}



/* Triangle connector */

.timeline-connector {

    width: 0;

    height: 0;

    border-left: 20px solid transparent;

    border-right: 20px solid transparent;

    /* Light grey border color */

    border-top: 20px solid var(--secondary-color);

    /* Positioned just below the slider */

    margin: 10px auto 10px auto;



    position: relative;

    z-index: 10;

}



/*--------------------------------

        # History Content Area

        --------------------------------*/

.history-content-wrapper {

    padding: 56px 1px;

    background-color: var(--bg1-color);

}



.history-content-item {

    /* Hide all content items by default */

    display: none;

    animation: fadeIn 0.5s ease;

}



.history-content-item.active {

    /* Show the active one */

    display: block;

}





.history-content-item .content-text {

    color: #777;

    font-size: 16px;

    line-height: 1.7;

    max-width: 700px;

    margin: 0 auto;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateX(10px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/* ***********************matrix section code************************** */

.stats-section {



    position: relative;

    background: url('https://templates.thememodern.com/theratio/images/bg/bg2-aboutus.jpg') no-repeat center center;



    background-size: cover;

    background-attachment: fixed;

    /* Creates a nice parallax effect */



}



.stat-item {

    text-align: center;

}



@media (max-width: 767.98px) {

    .stat-item {

        margin-bottom: 2.5rem;

    }

}



.stat-number {

    font-size: 2rem;

    font-weight: 600;

    color: var(--para-color);

    margin-bottom: 0.5rem;

}



.stat-label {

    font-size: var(--heading-size);

    color: var(--heading-color);

}





/* *********************product section code********************* */



/* ************************************AFT PRODUCTS SECTION CODE********************************* */

.speedproducts-section {

    background-color: var(--bg2-color);

}



.speedproducts-card {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-radius: var(--radius);

    background-color: var(--bg1-color);

}



.card-footer {

    background-color: var(--bg1-color);

}



.speedproducts-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;

}



.speedproducts-img-ratio {

    position: relative;

    width: 100%;

    padding-top: 100%;

    overflow: hidden;

}



.speedproducts-img-ratio img {

    aspect-ratio: 1 / 1;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: auto;

    object-fit: cover;

}



.speedproducts-img-container {

    overflow: hidden;

}



.speedproducts-img-top {

    transition: transform 0.4s ease;

}



.speedproducts-card:hover .speedproducts-img-top {

    transform: scale(1.05);

}



.speedproducts-link {

    color: var(--btn-color2);

    font-size: var(--para-size);

}



.speedproducts-link svg {

    color: var(--primary-color);

}



.speedproducts-link:hover {

    color: var(--hover-color2);

}



.speedproducts-title-link {

    text-decoration: none;

}



.speedproducts-title:hover {

    color: var(--hover-color2);

}







/* *********************category page section code************************** */

.lab-section {

    background-color: var(--bg2-color);

}



.content-section {

    width: 100%;

}



.left-content-wrapper {

    float: right;

    max-width: 400px;

    width: 100%;

    margin-left: 1.5rem;

    margin-bottom: 1rem;

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

}



.image-container {

    aspect-ratio: 1/1;

    position: relative;

    width: 100%;

    padding-bottom: 100%;

    overflow: hidden;

    border-radius: 0;

    margin-bottom: 20px;

}



.image-container img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.product-description p,

.product-description li,

.product-description ul {

    line-height: 1.6;

    text-align: justify;

    margin-bottom: 6px;

}

.button-container {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    justify-content: space-evenly;

    margin-bottom: 20px;

}





/* ********************meet our team section code************************ */

.team-section {



            background-color:var(--bg1-color);

        }





        .team-card {



            border: none;

            border-radius: 8px;

            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.09);

            height: 100%;

            transition: all 0.3s ease;

        }



        .team-card:hover {

            transform: translateY(-5px);

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

        }



        .team-card .card-body {

            text-align: center;

            padding: 10px;

        }



        .team-card .team-image {

            aspect-ratio: 1 / 1;

            width: 100%;

            height: auto;

            object-fit: cover;

            /* border: 4px solid #ffffff;

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */

            margin-bottom: 20px;

        }







        /* *******************contact us section code**************************** */

.contact-section-overlap {

            

            background-color: var(--bg2-color);

          

        }

        .get-in-touch-wrapper{

            background-color: var(--bg1-color);

            padding: 30px;

        }

    

        .contact-details-wrapper {

            background-color: var(--footer-color);

            padding: 20px 40px;

            margin-top: 0;

            margin-bottom: 0;

            position: relative;

            z-index: 10;

        }

        .info-block {

            margin-bottom: 25px;

        }

       

        .contact-box a{

            text-decoration: none;



        }

        .contact-box a:hover{

            text-decoration: underline;

            cursor: pointer;

        }





                /*************************** privacy policy content********************** */



.privacy-container {





    background-color: var(--bg2-color);

}



.heading-1 {

    



    font-size: var(--heading2-size);



    color: var(--heading-color);



    margin-bottom: 20px;



    font-weight: 600;

}



.privacy-container a {

    font-size: var(--para-size);



    color: var(--primary-color);

}

.privacy-box{

    padding: 20px;

    background: var(--bg1-color);

}



/* ****************market area section code ************** */



/* Section Wrapper */

.market-area {

    background: var(--bg2-color)

}



/* Heading */

.Marektheading {

    text-align: center;

    margin-bottom: 30px;

}



.Marektheading {

    font-size: var(--title-size);

    font-weight: 600;

    color: var(--heading-color);

}







/* Sub-headings (States & Cities titles) */

.market-area h2 {

    font-size: var(--heading2-size);

    font-weight: 600;

    margin: 30px 0 15px;

    color: var(--heading-color);

    border-left: 5px solid var(--primary-color);

    padding-left: 10px;

}



/* Market Cards */

.marketcard {

    display: block;

    text-align: center;

    padding: 12px 10px;

    

    border-radius: var(--radius);

    background: var(--bg1-color);

    box-shadow: 0 4px 10px rgba(59, 59, 59, 0.1);



    font-size: 16px;

    /* font-weight: 500; */

    color: var(--secondary-color);

    text-decoration: none;

    transition: all 0.3s ease;

}



/* Hover effect */

.marketcard:hover {

    /* background: var(--); */

    color: var(--hover-color1);



    transform: translateY(-3px);

    background-color: var(--secondary-color);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}

















        /* ************************BLOG DETIL PAGE SECTION************************************ */

.blog-section105{

    background-color: var(--bg2-color);

}



.main-content105 {

            background-color: var(--bg1-color);

            padding: 2rem;

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

        }

        

        @media (max-width: 767.98px) {

            .main-content105 {

                padding: 1.5rem;

            }

        }



        .blog-title-wrapper105 {

            display: flex;

            align-items: flex-start;

            gap: 0.75rem;

            margin-bottom: 10px;

        }

        

        .blog-title-wrapper105 .title-icon105 {

            flex-shrink: 0;

            width: 24px;

            height: 24px;

            margin-top: 0.5rem;

        }



        .blog-title105 {

            font-size: 2.25rem;

            font-weight: 900;

            color: var(--heading-color);

            line-height: 1.3;

        }



        .blog-image105 {

            width: 100%;

            aspect-ratio: 16 / 9;

            object-fit: cover;

            border-radius:var(--radius) ;

            margin-bottom: 2rem;

        }

       .post-dateX {

    font-size: var(--para-size);

    color: var(--para-color);

    font-weight: 600;

}

            /* --- NEW/MODIFIED STYLE FOR THE DATE --- */

        .blog-meta105 {

            /* margin-top: 1rem;

            margin-bottom: 1rem; */

            color: var(--primary-color);

            font-size: var(--para-size);

            display: flex;

            font-weight: 700;

            align-items: center;

            gap: 0.5rem;

        }

        

        .blog-meta105 .meta-icon {

            width: 16px;

            height: 16px;

        }

        



      



        /* --- Sidebar --- */

        .sidebar105 .widget105 {

            background-color: var(--secondary-color);

            padding: 1.5rem;

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

        }

        

        .widget-title105 {

            font-size: var(--heading-size);

            font-weight: 600;

            color: var(--light-color);

            padding-bottom: 0.75rem;

           margin-bottom: 10px;

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

        }



        .related-blogs-list105 {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        

        .related-post-item105 {

            display: flex;

            gap: 1rem;

        }

        

        .related-post-item105:not(:last-child) {

            margin-bottom: 1rem;

        }



        .related-post-item105 img {

            aspect-ratio: 4 / 3;

    width: 100%;

    height: auto;

            border-radius: var(--radius)

        }



        .related-post-item105 .post-title105 {

            font-weight: 700;

            line-height: 1.6;

            font-size: var(--para-size);

            

        }



        .related-post-item105 .post-title105 a {

            text-decoration: none;

            color: var(--heading-color);

            transition: color 0.3s ease;

        }

        

        .related-post-item105 .post-title105 a:hover {

            color: var(--hover-color1);

        }









        /* **************************** NEW FAQ SECTION CODE************************************  */





.faq-section62{

            background-color: var(--bg1-color);

            padding: 6px 0px 56px 0px;

        }

        

        /* --- Bootstrap Nav Tabs Styling --- */

        .faq-nav-tabs {

            border-bottom: none;

            justify-content: center;

        }

        .nav-link{

            margin-bottom: 5px;

        }

        .faq-nav-tabs .nav-link {

            border: none;

            color: var(--white);

            background-color: var(--primary-color);

            border-radius: var(--radius);

            padding: 0.5rem 1.5rem;

            font-weight: 500;

            margin: 0.5rem;

            transition: all 0.2s ease-in-out;

        }

        .faq-nav-tabs .nav-link:hover{

            background: var(--hover-color1);

        }

        .faq-nav-tabs .nav-link.active {

            color: var(--white);

            background-color: var(--hover-color1);

        }

        

        

        .custom-accordion-item {

           

            

            border-radius: 0.75rem;

            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);

            margin-bottom: 1rem;

            padding: 1.25rem 1.5rem;

        }

        .custom-accordion-question {

            font-weight: 500;

            color: var(--heading-color);

            cursor: pointer;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        .custom-accordion-answer {

            max-height: 0;

            overflow: hidden;

            color: var(--para-color);

            transition: max-height 0.3s ease-in-out, padding-top 0.3s ease-in-out;

        }

        

        /* Active State (Toggled by JavaScript) */

        .custom-accordion-item.active .custom-accordion-question {

            font-weight: 600;

            color: var(--primary-color);

        }

        .custom-accordion-item.active .custom-accordion-answer {

            max-height: 200px;

            padding-top: 0.75rem;

            font-size: var(--para-size);



        }

        

        /* Plus/Minus Icon */

        .icon-toggle {

           width: 1.75rem;

    height: 1.75rem;

    background-color:var(--primary-color);  

    color: var(--white);           

    font-weight: bold;

    font-size: 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--radius); 

    cursor: pointer;

        }

        .custom-accordion-item.active .icon-toggle {

              background-color: var(--hover-color1); 

    background-image: none; 

              }



              .custom-accordion-item.active .icon-toggle::after {

    content: "−";  /* minus sign */

}



/* Default state: show plus */

.icon-toggle::after {

    content: "+";  /* plus sign */

}









/* ********************certifcation section code***************************** */



.certifications-section {

    background-color: var(--bg2-color);

}



.certificate-card {

    display: block;

    text-decoration: none;



    border-radius: var(--radius);

    padding: 0.2rem;

    background-color: var(--border-light);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

      transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

            position: relative; /* Required for the overlay */

            overflow: hidden; 

}



.certificate-card img {

    width: 100%;

    height: auto;

    /*aspect-ratio: 1/1;*/

    object-fit: cover;



}



.certificate-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

}



        .card-hover-title {

            position: absolute;

            bottom: 0;

            left: 0;

            width: 100%;

            background: linear-gradient(to top, rgba(10, 10, 10, 0.9), transparent);

            color: var(--light-color);

            padding: 2rem 1rem 1rem 1rem;

            text-align: center;

            opacity: 0;

            transform: translateY(100%);

            transition: opacity 0.3s ease, transform 0.3s ease;

        }



        .card-hover-title .galleryhead {

            margin: 0;

            font-size: var(--heading-size);

            color: var(--light-color);

            font-weight: 600;

        }

        

        /* Show the title on hover */

        .certificate-card:hover .card-hover-title {

            opacity: 1;

            transform: translateY(0);

        }

    



        /* *****************************siteMap Section code**************************** */

.sitemap-section {

    

    background: var(--bg2-color);



}

.sitemapbox{

    padding: 20px;

    background: var(--bg1-color);

}

.sitemap-section .sitempheading {

    font-size: var(--heading2-size);

    font-weight: 600;

    margin-bottom: 20px;

    border-bottom: 3px solid var(--secondary-color);

    display: inline-block;

    padding-bottom: 5px;

    color: var(--header-color);

}



/* Root UL */

.sitemapcon {

    list-style: none;

    padding-left: 0;

    margin: 0;

    font-size: var(--para-size);

}



/* Parent LI */

.sitemapcon>li {

    position: relative;

    margin: 10px 0;

    padding-left: 20px;

}



/* Add vertical line before items */

.sitemapcon>li::before {

    content: "";

    position: absolute;

    top: 0;

    left: 8px;

    bottom: 0;

    border-left: 2px solid var(--primary-color);

}



/* Horizontal line for each item */

.sitemapcon>li::after {

    content: "";

    position: absolute;

    top: 12px;

    left: 8px;

    width: 10px;

    border-top: 2px solid var(--primary-color);

}



/* Links */

.sitemapcon a {

    text-decoration: none;

    color: var(--para-color);

    font-size: var(--para-size);

    transition: color 0.2s;

}



.sitemapcon a:hover {

    color: var(--hover-color1);

    font-weight: 600;

}



/* Subcategories */

.sitemapsubcat {

    list-style: none;

    margin: 5px 0 5px 20px;

    padding-left: 15px;

    border-left: 2px solid var(--secondary-color);

}



.sitemapsubcat li {

    position: relative;

    margin: 10px 0;

    padding-left: 15px;

}



.sitemapsubcat li::before {

    content: "";

    position: absolute;

    top: 12px;

    left: -15px;

    width: 15px;

    border-top: 2px solid var(--secondary-color);

}



/* Responsive adjustments */

@media (max-width: 767px) {

    .sitemap-section {

        padding: 20px 10px;

    }



    .sitemap-section .you_may {

        font-size: 16px;

    }



    .sitemapcon {

        font-size: 13px;

    }

}





      



/* **************breadcome section code********************* */



.img-breadcum {

    padding: 100px 0 90px;

    text-align: center;

    position: relative;

    z-index: 1;

}



.img-breadcum img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: -2;

}



.img-breadcum::before {

    background: linear-gradient(180deg, rgba(22, 29, 37, 0.5), rgb(22, 29, 37));

    content: "";

    height: 100%;

    left: 0;

    opacity: 0.9;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: -1;

    pointer-events: none;

}



.img-breadcum .sub-tt {

    color: var(--light-color);

    font-weight: 500;

    font-size: 16px;

    margin-bottom: 10px;

    background-color: var(--secondary-color);

    border-radius: var(--radius);

    padding: 6px 9px;

    display: inline-block;

}



.img-breadcum .tt {

    font-weight: 600;

    font-size: 25px;

    line-height: 1.3;

    letter-spacing: normal;

    margin-bottom: 0px;

    color: var(--light-color);

    max-width: 650px;

    margin: 0 auto;

    text-transform: capitalize;

}



.img-breadcum p {

    color: var(--white);

    margin-top: 12px;

    font-size: 17px;

    margin-bottom: 0;

}



.img-breadcum.img-breadcum2 {

    text-align: left;

    padding: 60px 0;

}

.breadcum-sec {

    background-color: var(--bg1-color);

    padding: 7px 0;

    border-bottom: 1px solid #e1e1e2;

}



.breadcum-sec ul {

    display: flex;

    gap: 0 18px;

    flex-wrap: wrap;

    list-style: none;

    margin: 0;

    padding: 0;

}



.breadcum-sec ul li {

    color: var(--heading-color);

    font-size: 14px;

    font-weight: 400;

    letter-spacing: normal;

    padding: 0;

    position: relative;

}





.breadcum-sec ul li a {

    color: var(--heading-color);

    text-decoration: none;

}



.breadcum-sec ul li a:hover {

    color: var(--hover-color1);

    font-weight: 500;

}



.breadcum-sec ul li a::before {

    content: "/";

    position: absolute;

    top: 1px;

    right: -11px;

    font-size: 14px;

    color: var(--heading-color);

}

.img-breadcum {

    padding: 70px 0 60px;

}

/* ***********************************popup code **************************** */



.enquiry-dialog {

    max-width: 350px;



}

.iti__country-list {

    max-width: 280px;

}

.enquiry-card {

    border: none;

    border-radius: 12px;

    padding: 12px 16px 20px;

    box-shadow: 0 8px 28px rgba(0, 0, 0, .15);

}



.modal.fade .modal-dialog {

    transform: translate(0, 0);

}



.modal-backdrop.show {

    opacity: .35;

}



.modal-title {

    color: var(--header-color);

}



.enquiry-input:focus {

    border-color: var(--text1-color);

    box-shadow: 0 0 0 0.2rem rgba(231, 237, 107, 0.08);

}



.enquiry-submit {

    background: var(--btn-color);

    color: var(--white);

    border-radius: var(--radius);

    padding: 4px 8px;

}



.enquiry-submit:hover,

.enquiry-submit:focus {

    background: var(--primary-color);

    border-color: var(--white);

}



textarea.enquiry-input {

    resize: vertical;

}





.enquiry-input:focus {

    border-color: #cfd6e3;

    box-shadow: 0 0 0 .2rem rgba(217, 253, 13, 0.08);

}



.enquiry-submit {

    background: var(--btn-color);

    color: var(--white);

    font-size: 1rem;





}



.enquiry-submit:hover,

.enquiry-submit:focus {

    background: var(--primary-color);

    color: var(--white);

}





/* Product image inside modal */

.modal-body .product-img {



    width: 100%;

    /* keep aspect ratio */

    height: 100%;

    /* keep aspect ratio */



    object-fit: cover;

    /* ensures image doesn’t stretch */

    aspect-ratio: 1/1;

}



.popupheading {

    font-size: 24px;

    font-weight: 600;

    color: var(--heading-color);

}



/* ===== Floating Action Buttons (FAB) ===== */

.fab-stack {

    --fab-size: 52px;

    --fab-gap: 12px;

    position: fixed;

    right: calc(35px + env(safe-area-inset-right, 0));

    bottom: calc(30px + env(safe-area-inset-bottom, 0));

    display: flex;

    flex-direction: column;

    gap: var(--fab-gap);

    z-index: 1040;

}



.fab-btn {

    width: var(--fab-size);

    height: var(--fab-size);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    color: var(--white);

    background-color: var(--header-color2);

    cursor: pointer;

    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);

    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;

    outline: none;

}



.business-enq {

    position: fixed;



    bottom: 35px;



    right: 20px;



    font-weight: 500;



    z-index: 9;



    border: 0;



    outline: 0;



    background-color: var(--primary-color);



    color: var(--white);



    font-size: 14px;



    padding: 5px;



    padding-right: 15px;



    border-radius: 24px;



    transition: 0.2s ease-in-out;



    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}



.business-enq:hover {

    transform: scale(1.03);

}



.business-enq .icon {

    height: 32px;



    width: 32px;



    border-radius: 100%;



    line-height: 32px;



    text-align: center;



    display: inline-block;



    background: var(--bg1-color);



    color: var(--text-color);

}



.business-enq .icon svg {

    height: 18px;

    color: var(--primary-color);

    width: 18px;

}



.form-control {



    padding: 8px 12px;

    font-size: 14px;

    border-radius: var(--radius);

    width: 100%;

}

.fab-whatsapp {

    background: #25D366;

    border: 1px solid #25D366;

}

@media (prefers-reduced-motion: reduce) {

    .fab-btn {

        transition: none;

    }

}

@media (min-width: 992px) {

    .fab-stack {

        right: calc(24px + env(safe-area-inset-right, 0));

        bottom: calc(84px + env(safe-area-inset-bottom, 0));

        --fab-size: 56px;

    }

}

/* ===== Mobile contact bar (shown only < LG) ===== */

.contact-bar-mobile {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    display: flex;

    z-index: 1040;

    height: 52px;

    padding-bottom: env(safe-area-inset-bottom, 0);

}



.contact-item {

    flex: 1 1 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-weight: 500;

    font-size: 14px;

    color: var(--white);

    text-decoration: none;

    border: 0;

}

.contact-call {

    background: var(--primary-color);

    color: var(--white);

}

.contact-wa {

    background: #25D366;

    color: var(--white);

}

.contact-enq {

    background: var(--secondary-color);

    color: var(--white);

}

.ci-icon {

    display: inline-flex;

}

.ci-label {

    line-height: 1;

}

.iti {

    width: 100%;

}
label{
    color: red;
    font-size: var(--para-size);
}