body {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: var(--font2);


}


:root {


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

    --font2: "Roboto", Helvetica, Arial, sans-serif;

    font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;


    --topbar-color: #ffffff;

    --text-color: #000000;

    --text2-color: #222;

    --radius: 1px;

    --primary-color: #ce1e2b;

    --secondary-color: #4971ba;

    --border-light: #aaa9b5;

    --heading-color: #000000;

    --para-color: #252323;

    --bg1-color: #ffffff;

    --bg2-color: #f8f8f8;

    --white: #fff;

    --btn-color: #222;

    --btn-color2: #4b4949;


}


@media (min-width: 1300px) {


    .container,

    .container-lg,

    .container-md,

    .container-sm,

    .container-xl,

    .container-xxl {

        max-width: 1230px;

    }

}


.main-btn {

    padding: 12px 15px;

    color: var(--white);

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


    display: inline-flex;

    gap: 5px;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    
    font-family: var(--font2);

    color: var(--white);

    white-space: nowrap;

    background: var(--primary-color);

    outline: none;

    transition: 0.2s ease-in-out;

    justify-content: center;

    border-radius: var(--radius);

    line-height: 1;
    text-decoration: none;

}


.main-btn:hover {

    background: var(--secondary-color);


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

}


.overview-btn {
    background:var(--btn-color);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 14px;
    border-radius: var(--radius);
    border: none;
    color: var(--white);
    border: 1px solid var(--btn-color);
    transition: background .3s;
    text-decoration: none;
}

.overview-btn:hover {
    background: var(--btn-color2);
    color: var(--white);

}


.main-btn2 {

    padding: 12px 15px;
    text-decoration: none;


    color: var(--white);

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


    display: inline-flex;

    gap: 5px;

    align-items: center;

    justify-content: center;

    font-size: 14px;


    font-family: var(--font2);


    white-space: nowrap;

    background: var(--secondary-color);

    outline: none;

    transition: 0.2s ease-in-out;

    justify-content: center;

    border-radius: var(--radius);

    line-height: 1;

}


.main-btn2:hover {

    background: var(--primary-color);


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

}


.social {

    display: flex;

    justify-content: center;

    list-style: none;

    gap: 22px;

    margin-bottom: 0;

    padding: 0;

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

}


.social li a {

    color: var(--primary-color);

    /* background-color: var(--button-color1) */

}


.social li a svg {

    width: 14px;

    height: 14px;

}


.social li a:hover {

    opacity: 1;

    color: var(--pri);

}


header {

    position: relative;

}

.mid-bar {
    border-bottom: 1px solid #f0e9e9;
}

.mid-bar.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: 0.6s;

    animation-fill-mode: both;

}


.top-bar {

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

    padding: 8px 0;

}


.top-bar p {

    font-size: 15px;

    margin-bottom: 0;

    color: var(--para-color);


    font-weight: 300;

}


.top-bar p svg {

    margin-top: -2px;

    color: var(--primary-color);

}


.top-bar p a {

    color: var(--para-color);


    text-decoration: none;

}


.top-bar p a:hover {

    color: var(--pri);

}


.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(--para-color);

    transition: all 0.3s ease;

    font-size: 15px;

    font-family: var(--font2);

    background: transparent;

    font-weight: 500;

    text-decoration: none;


}


.navigation .menu ul li.active a,

.navigation .menu ul li:hover a {

    color: var(--primary-color);

    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: #fff;

    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: white;

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

}


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

    color: var(--primary-color);

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

}


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

    background: #fff;

    color: #333

}


.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(--text-color);

    font-size: 14px;

    padding: 7px 16px;

    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(--text-color);

}


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

    width: 14px;
    color: var(--primary-color);
    height: 14px;

}
.navigation ul li.ls-submenu ul.ls-dropdown li.ls-submenu:hover svg{
    color: var(--primary-color);
}

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

    transform: rotateZ(180deg);

    color: var(--primary-color);

}


.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(--primary-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: 280px;

    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: 13px;

    
    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(--primary-color);

}


.cta-section .cta-heading01 {

    font-size: 24px;

    color: var(--white);

    line-height: 1.3;

}


.cta-section .cta-para01 {

    color: var(--white);

    font-size: 14px;

    max-width: 750px;

}


.site-footer {

    background: var(--heading-color);

    /* color: var(--text); */

}


.site-footer .container {

    padding-top: 64px;

    padding-bottom: 40px;

}

.footlogo img {

    max-width: 250px;

    width: auto;

    max-height: 60px;

    height: auto;

}


/* Column titles */

.ft-title {

    font-size: 22px;

    font-weight: 600;

    letter-spacing: .02em;

    color: var(--white);


    margin: 0 0 22px;

    position: relative;

}


.ft-title:after {

    content: "";

    display: block;

    width: 54px;

    height: 3px;

    background: var(--header-color2);

    margin-top: 10px;

}


/* Left card */

/* .brand-card {
    border-radius: 10px;

    padding: 2px 28px;

} */


.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

}


.brand-logo {

    width: 30px;

    height: 30px;

    flex: 0 0 30px;

    display: inline-grid;

    place-items: center;

    border-radius: 6px;

    background: rgba(243, 179, 22, .1);

    color: var(--accent);

}


.brand-name {

    font-size: 28px;

    font-weight: 700;

    line-height: 1

}


.brand-tag {

    display: block;

    color: #8a8a8a;

    font-size: 14px;

    margin-top: 2px

}


.brand-text {

    color: var(--white);

    line-height: 1.5;

    margin: 8px 0 18px;

    max-width: 420px

}


/* info rows */

.info-row {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin: 8px 0;

    color: var(--white)

}


.info-row a {

    color: var(--white);

    text-decoration: none

}


.info-row a:hover {

    color: var(--white)

}


/* social chips */

.socials-footer {

    display: flex;

    gap: 12px;

    margin-top: 14px;


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

}


.chip {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    display: inline-grid;

    place-items: center;

    background: var(--header-color2);

    transition: background .2s ease, transform .2s ease;

}


.chip:hover {

    background: var(--bg2-color);

    /* color: ; */

    transform: translateY(-2px)

}


.chip svg {

    width: 18px;

    height: 18px;

    fill: var(--white)

}


.chip svg:hover {

    fill: var(--primary-color)

}


/* link lists */

.ft-list {

    list-style: none;

    padding: 0;

    margin: 0

}


.ft-list li {

    margin: 14px 0

}


.ft-link {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--text);

    text-decoration: none

}


.ft-link span {

    color: var(--white)

}


.ft-link:hover span,

.ft-link:hover {

    color: var(--primary-color)

}


.ft-arrow {

    width: 18px;

    height: 18px;

    display: inline-grid;

    place-items: center;

    color: var(--para-color)

}


.ft-link.active span {

    color: var(--white)

}


/* latest news */

.news-item {

    display: flex;

    gap: 16px;

    padding: 10px 0;

    border-bottom: 1px solid var(--line)

}


.news-item:last-child {

    border-bottom: none

}


.news-thumb {

    width: 82px;

    height: 62px;

    border-radius: 6px;

    overflow: hidden;

    flex: 0 0 82px

}


.news-thumb img {

    aspect-ratio: 1/1;

    width: 100%;

    height: auto;


    object-fit: cover;

    display: block

}


.news-meta {

    flex: 1

}


.news-title {

    color: var(--white);

    line-height: 1.2;
    font-size: 14px;
    margin: 0;


}


.news-title a {

    color: inherit;

    text-decoration: none

}


.news-title a:hover {

    color: var(--primary-color);

    text-decoration: none;

}


/* bottom bar */

.ft-bottom {

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

    margin-top: 40px;

    color: var(--white);

    font-size: 14px;

    padding: 16px 0 26px;

}


.ft-bottom a {

    color: var(--white);

    text-decoration: none

}


.ft-bottom a:hover {

    color: #fff;

    text-decoration: underline

}


.ft-sep {

    color: var(--white);

    margin: 0 12px

}


/* spacing adjustments for grid */

@media (min-width:992px) {

    .col-lg-4.brand-col {

        padding-right: 40px

    }


    .col-lg-3.col-6.sol-col {

        padding-left: 20px

    }

}


@media (max-width:991.98px) {

    .brand-card {

        margin-bottom: 28px

    }

}


/* Popular Searches */


.foot08-head{

    color: var(--white);

}


.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{

    color:var(--bg2-color);

}

.foot08-popular-list li::after {

  /* content: "|"; */

  margin-left: 12px;


  color: var(--white);

}


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

  content: "";

}


.foot08-popular-list a {

  color: var(--white);


  text-decoration: none;


  transition: color 0.2s;

}


.foot08-popular-list a:hover {

  color: var(--primary-color);

}


.foot08-muted {

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

}


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


main,

main img {


    overflow: hidden;

    display: block;

    width: 100%;

}


.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(--pri);

    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: var(--liner);

    background-color: var(--pri);

    border-color: var(--pri);

}


.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;

}


/* *****************tagline css******************* */

.section-title {

    font-weight: 600;

    font-size: clamp(26px, 3.6vw, 30px);

    line-height: 1;

    color: var(--heading-color);

    text-align: center;

    letter-spacing: .2px;


    margin: 4px 0 30px;

}


.colorfull{
    color: var(--primary-color);
}


.head-sec .tt {


    color: var(--heading-color);

    font-weight: 600;

    font-size: 30px;

    line-height: 1.3;

    margin-bottom: 7px;

    position: relative;

    padding: 30px 0px 0px 0px;

    text-transform: capitalize;

}


.head-sec {

    text-align: center;

    max-width: 950px;

    margin: 0 auto 35px;

}


.eyebrow-section {

    background: var(--primary-color);


    color: var(--white);


    padding: 8px 15px;

    align-content: center;

    font-size: 14px;


    display: inline-block;

    line-height: 1;

    margin-bottom: 15px;

    /* border: 2px solid var(--btn-color); */

    text-transform: uppercase;

}


.abt-content p {

    font-size: 16px;

    line-height: 1.6;

    margin-bottom: 25px;

}


/* *****************************************about page section css code************************************** */


.overview-section {

    padding: 56px 0;

    position: relative;

}


.overview-images {

    position: relative;


}


.overview-images img {

    aspect-ratio: 4/3;

    border-radius: 4px;

    object-fit: cover;

}


.overview-images .img-front {

    position: absolute;

    top: 40px;

    left: 60px;

    width: 80%;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}


.about-right h2, .about-right h3, .about-right h4{

    font-weight: 600;

    font-size: 18px;


    line-height: 1.2;

    color: var(--para-color);

}
.about-right p, .about-right li, .about-right ul{
  font-size: 14px;

    color: var(--para-color);

  
    line-height: 1.6;
}


.about-right .content {

    font-size: 14px;

    color: var(--para-color);

    margin-bottom: 10px;

    line-height: 1.5;

}


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


/* Section */

.cat-section {

    padding: 56px 0;

    background: var(--bg2-color);

}


/* Card */

.cat-card {

    position: relative;

    border: 0;

    border-radius: var(--radius);

    background: #fff;

    box-shadow: var(--card-shadow);

    overflow: hidden;

}


.cat-inner {

    display: flex;

    flex-wrap: nowrap;

}

.cat-link-wrap {

  display: flex;

  flex-direction: column;

  text-decoration: none;

  color: inherit;

  flex: 0 0 42%; /* match .cat-media width */

  max-width: 42%;

}


.cat-link-wrap .cat-heading {

  padding: 10px 0 0;

}


.cat-media {

    flex: 0 0 42%;

    max-width: 42%;

}


.cat-body {

    flex: 1 1 auto;

    padding: 26px 33px;

}


/* 1:1 image requirement */

.cat-img {

    width: 100%;

    height: auto;

    aspect-ratio: 1/1;

    object-fit: cover;

    display: block;

    transition: 0.3s all;

}


.cat-img:hover {

    transform: scale(1.05);


}


/* Badge overlaps the split (centered over the image/content divide) */

.cat-badge {

    position: absolute;

    top: 50%;

    left: 42%;

    transform: translate(-50%, -50%);

    width: 64px;

    height: 64px;

    border-radius: 50%;

    background: var(--bg2-color);

    box-shadow: var(--badge-shadow);

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #eef0f3;

}


.cat-badge img {

    width: 30px;

    height: 30px;

      filter: invert(8%) sepia(93%) saturate(7494%) hue-rotate(1deg) brightness(97%) contrast(108%);


    color: var(--primary-color);

}


.cat-heading {

  font-weight: 500;

  color: var(--heading-color);

  font-size: clamp(16px, 1.35vw, 20px);

  margin: 0 0 8px;

  display: block;

  text-decoration: none;

}


.cat-heading:hover {

  color: var(--primary-color); /* optional hover effect */

}


.cat-text {

    color: var(--para-color);

    font-size: 14px;

    line-height: 1.7;

    margin: 0 0 14px;

    display: -webkit-box;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


/* Link */

.cat-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-weight: 700;

    font-size: 15px;

    text-transform: uppercase;

    color: var(--btn-color);

    text-decoration: none;

    letter-spacing: .25px;

}


.cat-link svg {

    width: 14px;

    height: 14px;

    color: var(--primary-color);

}


.cat-link:hover {

    text-decoration: underline;

    color: var(--primary-color);

}


/* View More button */

.cat-more {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 48px;

    padding: 10px 20px;

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

    color: var(--header-color2);

    /* background: #fff; */

    border-radius: var(--radius);

    font-weight: 600;

    transition: 0.2s ease-in-out;

    text-decoration: none;

}


.cat-more:hover {

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

    background: var(--primary-color);


    color: var(--white);

}


/* Responsive tweaks */

@media (max-width:991.98px) {

    .cat-media {

        flex-basis: 44%;

        max-width: 44%;

    }


    .cat-badge {

        left: 44%;

    }

}


@media (max-width:767.98px) {

    .cat-inner {

        flex-wrap: wrap;

    }


    .cat-media,

    .cat-body {

        flex-basis: 100%;

        max-width: 100%;

    }


    .cat-badge {

        left: 50%;

        top: auto;

        bottom: calc(100% - 34px);

    }


    /* sits near the split on small screens */

    .cat-body {

        padding: 20px 18px 22px;

    }

}


/* **********************Section container for the stats *********************/

/* Section container for the stats */

.stats-section {

    padding: 56px 0px;

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


}


/* The main white card holding the stats */

.stats-card {

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

    /* box-shadow: 0 7px 30px rgba(0, 0, 0, 0.07); */

    border-radius: 8px;

    /* padding: 40px 20px; */

}


/* Individual stat item styling */

.stat-item {

    padding: 10px 15px;

    background: var(--bg2-color)

}


/* Title styling (e.g., "Rental Orders") */

.stat-title {

    font-size: 21px;

    color: var(--heading-color);

    /* A medium gray color */

    margin-bottom: 8px;

}


/* Large number styling */

.stat-number {

    font-size: 70px;
    font-weight: 500;
    color: var(--para-color);

    /* Dark text color */

    line-height: 1.1;

}


/* Subtitle styling */

.stat-subtitle {

    font-size: 14px;

    color: var(--para-color);

    /* Lighter gray for subtitle */

    margin-top: 8px;

}


/* Custom border color to match the screenshot */

.border-custom-gold {

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


}


/* Responsive adjustments for borders */

@media (max-width: 991.98px) {

    .stat-item:nth-child(2) {

        border-right: none !important;

    }


    .stat-item:nth-child(1),

    .stat-item:nth-child(2) {

        border-bottom: 1px solid #dee2e6;

        padding-bottom: 30px;

        margin-bottom: 30px;

    }

}


@media (max-width: 767.98px) {

    .stat-item {

        border-right: none !important;

        border-bottom: 1px solid #dee2e6;

        padding-bottom: 30px;

        margin-bottom: 30px;

    }


    .stat-item:last-child {

        border-bottom: none;

        margin-bottom: 0;

        padding-bottom: 0;

    }

}


/* **************post our requiremt section code****************************** */


.enquiry-section {

    position: relative;

    padding: 56px 0;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

}


.enquiry-form-card {

    background-color: #ffffff;

    border-radius: var(--radius);

    padding: 40px;

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

    max-width: 700px;

    margin: auto;

}


@media (max-width: 576px) {

    .enquiry-form-card {

        padding: 25px;

    }

}


.form-title {

    color: var(--heading-color);

    font-weight: 700;

    font-size: 28px;

    margin-bottom: 10px;

}


.form-subtitle {

    color: var(--para-color);

    font-size: 14px;


}


/* FIX: Increased font-size to 16px to prevent mobile zoom */

.form-control {

    border: 1px solid #ced4da;

    padding: 8px 12px;

    font-size: 14px;

    /* Prevents auto-zoom on iOS */

    border-radius: var(--radius);

    width: 100%;

}
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
    height: 40px;
}

label {
    color: var(--primary-color);
}


.form-control:focus {

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

    box-shadow: 0 0 0 0.25rem rgba(203, 204, 205, 0.25);

}


/* Ensure intl-tel-input takes full width */

.iti {

    width: 100%;

}


.btn-submit-enquiry {

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

    color: var(--white);

    font-weight: 600;

    padding: 12px;

    border-radius: var(--radius);

    transition: background-color 0.3s ease;

    width: 100%;

    font-size: 14px;

}


.btn-submit-enquiry:hover {

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

    color: var(--white);


}


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

.blog-section {

    padding: 56px 0;

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

}


.blog-card {

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


    border-radius: var(--radius);

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

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

    width: 100%;

    height: 100%;

    /* Ensure cards in a row are the same height */

    display: flex;

    flex-direction: column;

}


.blog-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

}


.card-img-wrapper {

    position: relative;

}


.card-img-wrapper .card-img-top {

    width: 100%;

    height: auto;


    aspect-ratio: 1/1;

    object-fit: cover;

}


.date-badge {

    position: absolute;

    top: 15px;

    right: 15px;

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

    color: var(--white);

    border-radius: var(--radius);

    padding: 8px 10px;

    text-align: center;

    font-weight: 600;

    font-size: 14px;

    line-height: 1.1;

}


.date-badge span {

    font-size: 18px;

    display: block;

}


.blog-card-body {

    padding: 25px;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}


.card-title-wrapper {

    margin-bottom: 0.75rem;

}


.card-title-wrapper .card-title {

    font-size: 18px;

    font-weight: 600;

    color: var(--heading-color);

    line-height: 1.3;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    /* Limit text to 3 lines */

    -webkit-box-orient: vertical;

    text-decoration: none;

}


.card-text-wrapper {

    flex-grow: 1;

    margin-bottom: 1rem;

}


.card-text-wrapper .card-text {

    color: var(--para-color);

    font-size: 1rpx;

    line-height: 1.4;


    /* WebKit line clamp to truncate text */

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    /* Limit text to 3 lines */

    -webkit-box-orient: vertical;

}


.btn-read-more {

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

    color: var(--white);

    padding: 8px 16px;

    font-weight: 600;

    font-size: 14px;

    border-radius: var(--radius);

    text-decoration: none;

    transition: background-color 0.3s ease;

    display: inline-flex;

    align-items: center;

}


.btn-read-more:hover {

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

    color: var(--white);

}


.btn-read-more span {

    margin-left: 5px;

    transition: transform 0.2s ease;

}


.btn-read-more:hover span {

    transform: translateX(3px);

}


.leadsureheading {
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    color: var(--heading-color);
    letter-spacing: .2px;
    margin: 10px 2px;
}

.leadsure{
    padding: 56px 0;
}
.fqcatsec{
    background: var(--bg2-color);
}

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


.faq-section62 {
            background-color: var(--bg2-color);
            padding: 6px 0px 56px 0px;
        }

        .faqhead62{
            font-size: 28px;
            color:var(--heading-color);
            font-weight: 600;
        }
        
        /* --- 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(--secondary-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.active {
            color: var(--white);
            background-color: var(--primary-color);
        }
        
        /* --- Custom Accordion Styles --- */
        .custom-accordion-item {
            background-color: var(--bg2-color);
            
            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; /* Adjust if needed */
            padding-top: 0.75rem;
            font-size: 14px;

        }
        
        /* Plus/Minus Icon */
        .icon-toggle {
           width: 1.75rem;
    height: 1.75rem;
    background-color:var(--primary-color);   /* red background */
    color: var(--white);            /* icon color */
    font-weight: bold;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);  /* optional rounded corners */
    cursor: pointer;
        }
        .custom-accordion-item.active .icon-toggle {
              background-color: var(--secondary-color); /* keep red background */
    background-image: none; /* remove the - icon */
              }

              .custom-accordion-item.active .icon-toggle::after {
    content: "−";  /* minus sign */
}

/* Default state: show plus */
.icon-toggle::after {
    content: "+";  /* plus sign */
}


/* ************************************img + scrollable content*************************************** */

.heroTwo {

    background: url("../images/banner-back3.webp") no-repeat center center/cover;

    position: relative;

}


.heroTwo::before {

    content: "";

    position: absolute;

    inset: 0;

   
    /* dark overlay */

}


.heroSection {

    padding: 56px 0;

    display: flex;

    height: 100%;

    max-height: 550px;

    min-height: 350px;

    position: relative;

    z-index: 2;

}


/* LEFT COLUMN (Scrollable Content Box) */

.leftCol {

    flex: 1;

    color: var(--white);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    margin: 20px auto;

    max-width: 1230px;

    
    border-radius: 8px;

}


.scrollContent {

    flex: 1 1 auto;

    overflow-y: auto;

    
    padding: 16px;

    scrollbar-width: none;
    background-color: var(--btn-color);

}


.scrollArea h2 {

    font-size: 22px;


    color: var(--primary-color);

}


.scrollArea h3 {

    font-size: 18px;

    color: var(--primary-color);

    margin-top: 15px;

}


.scrollArea p,

.scrollArea li {

    font-size: 16px;

    line-height: 1.6;

    color: var(--white);

    text-align: left;

}


.cmTitle {

    font-size: 20px;

    font-weight: bold;

    margin: 20px 0 10px;

    color: var(--text-color);

}


/* ***************************support section code************************* */

.cousterHelp {


    padding: 56px 0;

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

}


.service-card {

    border-radius: var(--radius);

    padding: 40px;

    margin: 20px 0;

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

    transition: all 0.3s ease;

    min-height: 400px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.service-card:hover {

    transform: translateY(-5px);

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

}


.rental-card {

    background: var(--primary-color);

    color: white;

}


.purchase-card {

    background: var(--btn-color);

    color: var(--white);

    border: 1px solid #dee2e6;

}


.service-icon {

    font-size: 3rem;

    margin-bottom: 20px;

    opacity: 0.9;

}


.rental-card .service-icon {

    color: var(--white);

}


.purchase-card .service-icon {

    color: var(--white);

}


.service-title {

    font-size: 18px;

    color: var(--white);

    margin-bottom: 10px;


}


.service-subtitle {

    font-size: 28px;

    font-weight: 700;

    color: var(--white);


    line-height: 1.2;

}


.service-btn {

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

    background: transparent;

    padding: 12px 30px;

    border-radius: var(--radius);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all 0.3s ease;

    text-decoration: none;

    display: inline-block;

    margin: 20px 0;

}


.rental-card .service-btn {

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

    color: var(--white);

}


.rental-card .service-btn:hover {


    color: var(--bg2-color);

}


.purchase-card .service-btn {

    border-color: var(--white);

    color: var(--white);

}


.purchase-card .service-btn:hover {


    color: var(--secondary-color);

}


.progress-section {

    margin-top: 30px;

}


.progress-item {

    margin-bottom: 20px;

}


.progress-label {

    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

    font-weight: 500;

    font-size: 14px;

    color: var(--white);

}


.progress {

    height: 8px;

    border-radius: 10px;

    background-color: rgba(255, 255, 255, 0.2);

}


.purchase-card .progress {

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

}


.progress-bar {

    border-radius: 10px;

    width: 0%;

    transition: width 1.5s ease-in-out;

}


.rental-card .progress-bar {

    background: linear-gradient(90deg, #fff 0%, #e24848 100%);

}


.purchase-card .progress-bar {

    background: linear-gradient(90deg, #f9f8f7 0%, #595bec 100%);

}


@media (max-width: 768px) {

    .service-card {

        padding: 30px 20px;

        margin: 15px 0;

    }


    .service-subtitle {

        font-size: 1.5rem;

    }


    .service-icon {

        font-size: 2.5rem;

    }


    .service-btn {

        padding: 10px 25px;

        font-size: 0.9rem;

    }

}


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


         .faq-container {

            padding: 56px 0;

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

        }


        .left-section {

            
            padding: 10px;

           
           min-height: 1px !important;

           
            transition: min-height 0.3s ease;

        }


        .faq-title {

            font-size: 28px;

            font-weight: 600;

            color: var(--heading-color);

            margin-bottom: 10px;

            line-height: 1.2;

        }


        .faq-description {

            color: var(--para-color);

            font-size: 14px;

            line-height: 1.5;

            margin-bottom: 10px;

        }


        .contact-btn {

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

            color: var(--white);

            padding: 12px 24px;

            border: none;

            border-radius: var(--radius);

            font-weight: 600;

            font-size: 14px;

            cursor: pointer;

            transition: background-color 0.3s ease;

            width: fit-content;

            text-decoration: none;

            display: inline-block;

            text-align: center;

            margin-top: auto;

        }


        .contact-btn:hover {

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

            color: var(--white);

            text-decoration: none;

        }


        .contact-btn i {

            margin-left: 8px;

        }


        .right-section {

            flex: 1;

            padding: 40px;

        }


        .faq-item {

            
            position: relative;

            margin-bottom: 10px;

            border-left: 8px 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(--bg2-color);

            /* background-color: transparent; */

            border: none;

            padding: 18px 40px 18px 10px;

            font-size: 18px;

            font-weight: 600;

            color: var(--para-color);

            cursor: pointer;

            width: 100%;

            text-align: left;

            position: relative;

            transition: all 0.3s ease;

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


        }


        .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: #6c757d;

            font-size: 14px;

            line-height: 1.6;

        }


        /* Active states */

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

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

        }


        .faq-item.active .faq-answer {

            max-height: 200px;

            padding: 5px 5px 24px 10px;

        }


        @media (max-width: 768px) {

            .faq-wrapper {

                flex-direction: column;

            }

            
            .left-section {

                flex: none;

                padding: 30px 20px;

            }

            
            .right-section {

                padding: 30px 20px;

            }

            
            .faq-title {

                font-size: 28px;

            }

        }


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

.brands-section01 {

    position: relative;

    text-align: center;

    padding: 56px 20px;

    color: var(--heading-color);

    overflow: hidden;

    background: var(--bg2-color);

}


.brands-section01 img.bg-image01 {

    aspect-ratio: 16/9;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: auto;

    object-fit: cover;

    z-index: -2;

}


.brands-section01::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.7);

    /* dark overlay for text readability */

    z-index: -1;

}


.brands-section01 .partner-head {

    font-weight: 700;

    font-size: 28px;

    color: var(--heading-color);

}


.brand-box01 {


    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 20px;

}


.brand-box01 img {

    aspect-ratio: 2 / 1;

    width: 100%;

    height: auto;

    border-radius: 20px;

    object-fit: cover;

}


.brands-carousel .carousel-control-next,

.brands-carousel .carousel-control-prev {

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


    border-radius: 50%;

}


.brands-carousel .carousel-control-next:hover,

.brands-carousel .carousel-control-prev:hover {

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

    /* yellow background on hover */

    border-radius: 50%;

}


/************************** about us page /*********************************** */

.section-11 {

    padding: 56px 0;

    background: var(--bg1-color);

}


/* Image styles */

.section-11 .image-box {

    /* width: 100%; */

    height: 100%;

    /* display: block; */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);


}


.section-11 .image-box img {

    aspect-ratio: 1/1;

    width: 100%;

    height: auto;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);


}


/* Content text */

.section-11 .content-box {

    color: var(--boxtext-color);

    font-size: 1rem;

    line-height: 1.6;

}


.section-11 .content-box .abthead01 {

    color: var(--heading-color);

    font-size: 24px;

    font-weight: 600;

    margin-bottom: 15px;

}


.abtpara01 {

    font-size: 14px;

    color: var(--para-color);

    line-height: 1.6;

}


/* Accent button */

.btn-accent {

    background: var(--header-color);

    color: var(--navtext-color);

    border: 0;

    border-radius: .35rem;

    padding: .6rem 1rem;

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

}


.btn-accent:hover {

    background: var(--hover-bg);

    color: var(--hover-text);

}


/********************************* mission and vision section code************************** */


.features-section {

    padding: 96px 0;

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


}


.feature-card {

    /* Using position relative to be the anchor for the absolute positioned icon */

    position: relative;

    /* Ensures cards in the same row have the same height */

    width: 100%;

    height: 100%;

}


.feature-card-content {


    padding: 45px 30px 30px 30px;

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

    border-radius: var(--radius);

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

    text-align: center;

    height: 100%;

}


.feature-card-icon {


    width: 85px;

    height: 85px;

    border-radius: 50%;

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


    display: flex;

    align-items: center;

    justify-content: center;


    /*

            Key for the overlapping effect:

            1. Position is absolute relative to .feature-card

            2. 'top' is negative half of the icon's height, pulling it up

            3. 'left' and 'transform' center it horizontally

            */

    position: absolute;

    top: -45px;

    /* Half of height (70px) */

    left: 15%;

    transform: translateX(-50%);

}


.feature-card-icon svg {

    width: 45px;

    height: 45px;

    color: var(--primary-color);

}


.feature-card-title {

    font-size: 24px;

    font-weight: 600;

    color: var(--heading-color);

    margin-bottom: 0.75rem;

}


.feature-card-text {

    color: var(--para-color);

    font-size: 14px;

    line-height: 1.6;

    display: -webkit-box;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


/************************ about from director section code********************** */

.aboutdirector {

    padding: 56px 0;

    background: var(--bg2-color);

}


.content-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;


}


.abttext-content {
    margin-right: 20px;
    max-width: 55%;
}


.abttext-content .directorhead {

    font-size: 24px;

    color: var(--heading-color);

    font-weight: 600;

}


.abttext-content .directorpara {

    font-size: 14px;

    color: var(--para-color);

    line-height: 1.6;

    display: -webkit-box;

    -webkit-line-clamp: 5;

    -webkit-box-orient: vertical;

    overflow: hidden;


}
.abttext-content h2{
    font-size: 18px;
    font-weight: 600;
}


.image-wrapper {

    width: 100%;

    height: 100%;


}


.image-wrapper img {

    aspect-ratio: 4/3;

    width: 100%;

    height: auto;

    border-radius: var(--radius);

}


@media (max-width: 991px) {

    .content-wrapper {

        flex-direction: column;

        text-align: center;

    }


    .text-content {

        max-width: 100%;

    }

}


/* ********************************seo content section ****************************** */


/* Section Highlight */

.section-highlight {

    padding: 56px 0;

    background: var(--bg1-color);

}


.section-13 h2 {

    font-size: 24px;

    font-weight: 600;

    color: var(--heading-color);

}


/* Left yellow card */

.scrollcard {

    width: 100%;

    height: 100%;

    color: var(--white-color);

    display: flex;

    align-items: center;

}


.scrollcard img {

    aspect-ratio: 1/1;

    width: 100%;

    height: auto;

}


.feature-copy .cmTitle {

    color: var(--para-color);

}


/* Right long copy */

.feature-copy {

    color: var(--para-color);

    font-size: 14px;

    line-height: 1.6;

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

    max-height: 390px;

    /* Desktop default */

    overflow-y: auto;

    background: var(--background2-color);

    padding: 20px 10px;

}


.feature-copy h2,.feature-copy h3,.feature-copy h4 {

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

}


/* Optional scrollbar styling */

.feature-copy::-webkit-scrollbar {

    width: 6px;

}


.feature-copy::-webkit-scrollbar-thumb {

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

    border-radius: 3px;

}
.feature-copy p{
    color: var(--para-color);
    font-size: 14px;
    line-height: 1.6;

}


/* Responsive tweaks */

/* Medium screens (tablet) */

@media (max-width: 991.98px) {

    .scrollcard {

        padding: 36px 40px;

    }


    .feature-copy {

        max-height: 400px;

        /* scrollable height reduced */

    }

}


/* Small screens (mobile) */

@media (max-width: 575.98px) {

    .scrollcard {

        padding: 28px 24px;

    }


    .feature-copy {

        font-size: 1rem;

        line-height: 1.8;

        max-height: 300px;

        /* mobile-friendly scroll height */

    }

}


/* categroy section code ***************************************************************** */


.section-131 {

  /* padding: 56px 20px; */


  background: var(--bg1-color);

}


/* Left content */


.catcontent-131 p {

    font-size: 14px;

  color: var(--para-color);

}


.catcontent-131 .strong-131 {

  font-weight: 700;

}


.catcontent-131 h1 {

  font-size: 24px;

  color: var(--heading-color);

}

.catcontent-131 h2, .catcontent-131 h3 {

  font-size: 18px;

  font-weight: 600;

  color: var(--heading-color);

}


/* Right card with image */


.cardwrap-131 {

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


  width: 100%;


  height: 100%;

}


.ratioimg-131 {

  aspect-ratio: 1/1;


  width: 100%;


  height: auto;


  object-fit: cover;

}


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


   .certifications-section {

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

            padding: 56px 0;

        }


        .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;

        }

        .certificate-card img{

              width: 100%;

            height: auto;

            aspect-ratio: 95/134;
            	

        }


        .certificate-card:hover {

            transform: translateY(-5px);

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

        }


/* ****************************blog page code**************************** */


.blog-section05 {

    padding-top: 5rem;

    padding-bottom: 5rem;

}


/* 1. Section Header Styling */

.section-header05 .section-title05 {

    font-size: 2.5rem;

    font-weight: 700;

    /* A deep, professional blue for the main title */

    color: #1A2B48;

    margin-bottom: 0.5rem;

}


.section-header .section-subtitle {

    font-size: 1.1rem;

    color: #6c757d;

    /* Muted text color for the subtitle */

}


/* 2. Blog Card Styling */

.blog-card05 {

    border: none;

    border-radius: var(--radius);

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

    overflow: hidden;

    /* Ensures the image corners are rounded */

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

    height: 100%;

    /* Makes cards in the same row equal height */

}


.blog-card05:hover {

    transform: translateY(-5px);

    /* Subtle lift effect on hover */

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

}


.blog-card05 .card-img-container05 {

    position: relative;

    /* Anchor for the date badge */

}


.blog-card05 .card-img-top05 {

    aspect-ratio: 16 / 10;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* 3. Date Badge Overlay */

.date-badge05 {

    position: absolute;

    top: 1rem;

    /* 16px from top */

    right: 1rem;

    /* 16px from right */

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

    color: var(--white);

    border-radius: var(--radius);

    padding: 0.5rem 0.75rem;

    text-align: center;

    line-height: 1.1;

    font-weight: 600;

}


.date-badge05 .day05 {

    display: block;

    font-size: 18px

}


.date-badge05 .month05 {

    display: block;

    font-size: 14px;

    text-transform: uppercase;

}


/* 4. Card Body Content Styling */

.blog-card05 .card-title05 {

    font-size: 1.2rem;

    font-weight: 700;

    margin-bottom: 0.75rem;


}


.blog-card05 .card-title05 a {

    text-decoration: none;

    color: var(--header-color);

    font-size: 18px;

    font-weight: 600;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-decoration: none;


    transition: color 0.3s ease;

}


.blog-card05 .card-title05 a:hover {

    color: var(--primary-color)

}

.card-title:hover {

  color: var(--primary-color); /* hover effect */

}


.blog-card05 .card-text05 {

    color: var(--para-color);

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 10px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;


}


/* ******************details blog page section******************* */

.blogdeatilpage {

    padding: 56px 0;

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

}

     .sidebar { 

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

            padding: 1.5rem; 

            border-radius: var(--radius); 

        }


        .sidebar-widget { 

            margin-bottom: 1.5rem; 

        }


        .sidebar-widget:last-child { 

            margin-bottom: 0; 

        }


        .widget-title { 

            font-size: 18px;

            font-weight: 600; 

            color: var(--white); 

            
            padding-bottom: 0.5rem; 

            border-bottom: 2px solid var(--border-light); 

        }


        .recent-posts-list .post-item { 

           
            display: flex; 

            align-items: flex-start; 

            margin-bottom: 1rem; 

        }


        .recent-posts-list .post-item:last-child { 

            margin-bottom: 0; 

        }


        .recent-posts-list .post-item img { 

            aspect-ratio: 1/1;

             width: 150px;

            height: 100%;

            object-fit: cover; 

            border-radius: var(--radius); 

            margin-right: 1rem; 

        }


        .recent-posts-list .post-item .post-title { 

            font-weight: 500; 

            line-height: 1.4; 

            color: var(--white); 

            text-decoration: none; 

            transition: color 0.3s ease; 

             display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

        }


        .recent-posts-list .post-item .post-title:hover { 

            color: var(--primary-color)

        }


        .recent-posts-list .post-item .post-date { 

            font-size: 14px; 

            color: var(--border-light); 

        }


        .categories-list .list-group-item { 

            background-color: transparent; 

            border-color: var(--white); 

            padding: 0.75rem 0; 

        }


        .categories-list .list-group-item:first-child { 

            border-top: none; 

        }


        .categories-list .list-group-item a { 

            color: var(--white); 

            text-decoration: none; 

            font-weight: 500; 

            transition: color 0.3s ease; 

        }


        .categories-list .list-group-item a:hover { 

            color: var(--primary-color); 

        }


        .blog-post-content .post-meta {

            padding: 10px;

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

            max-width: 200px;

            font-size: 0.9rem; 

            color: var(--white); 

            font-weight: 500; 

        }

        .blogheadingpara03 h2{

            font-size: 24px;

            font-weight: 600;

            color: var(--heading-color);

        }

        .blogheadingpara03 h3{

            font-size: 18px;

            font-weight: 600;

            color: var(--heading-color);

        }

        .blogheadingpara03 p ,ul, li{

            font-size: 14px;

            line-height: 1.6;

            color: var(--para-color);

        }

        .blog-post-content .post-body { 

            /* font-size: 24px;  */

            line-height: 1.6; 

            color: var(--heading-color); 

        }


        .blog-post-content .feature-image { 

            height: 100%;

            width: 100%;

        }

        .blog-post-content .feature-image img{

            aspect-ratio: 4/3;

            width: 100%;

            height: auto;

        }


        /* Adds space above the sidebar when it stacks on mobile */

        @media (max-width: 991.98px) {

            .sidebar-wrapper {

                margin-top: 3rem;

            }

        }


/* **********************contact us page************************** */

.contactpage{

    padding: 56px 0 0 0;

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


}

  .contact-section-51 {

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

            border: 1px solid #e0e0e0;

            margin-bottom: 56px;

        }

        
      .section-title-51 {
            font-weight: 600;
            font-size: 24px;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .section-para-51 {
            color: var(--para-color);
            font-size: 14px;
            line-height: 1.6;
        }

        /* --- NEW STYLES FOR REDESIGNED CONTACT ITEMS --- */

        .contact-item {
            gap: 0.75rem; /* Space between icon and details box */
        }

        .contact-icon-box {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--primary-color);
            /* border: 1px solid #dee2e6; */
            border-radius: var(--radius);
            color: var(--primary-color);
            font-size: 1.75rem;
            flex-shrink: 0;
            
            /* For desktop */
            width: 70px;
            height: 70px;
        }
        .contact-icon-box svg{
            color: var(--white);
        }

        .contact-details-box {
            background-color: var(--bg2-color);
            /* border: 1px solid ; */
            border-radius: var(--radius);
            padding: 0.8rem 1.25rem;
            flex-grow: 1; /* Allows the details box to fill the remaining space */
        }
        
        .contact-details-box .detail-label {
            font-weight: 600;
            color: var(--heading-color);
            font-size: 1rem;
            display: block;
        }

        .contact-details-box .detail-value,
        .contact-details-box .detail-value a {
            color: var(--para-color);
            font-size: 0.9rem;
            text-decoration: none;
        }
        .contact-details-box .detail-value a:hover {
            color: var(--primary-color);
        }

        /* Responsive stacking for mobile */
        @media (max-width: 767.98px) {
            .contact-icon-box {
                width: 100%; 
                height: 60px;
            }
        }
        
        /* Your existing social icon styles */
        .social-icon-link-51 {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background-color: var(--btn-color);
            color: var(--white);
            border-radius: 50%;
            text-decoration: none;
            transition: opacity 0.2s ease;
        }
        .social-icon-link-51:hover {
            opacity: 0.85;
            background-color: var(--primary-color);
            color: var(--white);
        }


        /* .form-control-51 {

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

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

            border-radius: var(--radius);

            padding: 0.75rem 1rem;

        }

        .form-control-51:focus {

            background-color: var(--white);

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

            box-shadow: 0 0 0 0.25rem rgba(73, 113, 186, 0.25);

        } */
.contactrightlead{
    background-color: var(--bg2-color);
}


        .btn-submit-51 {

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

            color: var(--white);

            font-weight: 600;
            margin-top: 10px;
            padding: 0.8rem 1.5rem;

            border-radius: var(--radius);

            border: none;

            width: 100%;

        }

        .btn-submit-51:hover {

            background-color: var(--secondary-color); /* Darker shade of secondary */

            color: var(--white);

        }

        
        .map-container-51 {

            position: relative;

            overflow: hidden;

            width: 100%;

            padding-top: 25%;

        }

        .map-container-51 iframe {

            position: absolute;

            top: 0;

            left: 0;

            bottom: 0;

            right: 0;

            width: 100%;

            height: 100%;

            border: none;

        }


    /* ************************************category page ********************** */

/* Product Section Styles */
.product-section11 {
    padding: 56px 0;
    background-color: var(--bg1-color);
    /* border-radius: 0.5rem; */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.product-image-container11 {
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
    width: 100%;
    overflow: hidden;
}
/* .heading-underline2{
        height: 2px;
    width: 200px;
    border-radius: 2px;
    background: var(--primary-color);
} */

.product-image-container11 img {
    aspect-ratio: 1/1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.product-title11 {
    font-weight: 600;
    font-size: 24px;
    color: var(--heading-color);
}

/* .price11 {
    font-size: 18px;
    font-weight: 600;
    color: var(--para-color);
}

.get-price-link11 {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.get-price-link11:hover {
    color: var(--secondary-color);
    text-decoration: underline;
} */
 /* .pr-li {
    border: 1px solid var(--off-white);
    transition: 0.2s;
    
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
} */

.spec-para {
    color: var(--para-color);
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Button Styles */


/* Table Container with Scroll */
.tx-bx {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Custom scrollbar for table container */
.tx-bx::-webkit-scrollbar {
    width: 4px;
    height: 8px;
}

.tx-bx::-webkit-scrollbar-track {
    background: var(--bg2-color);
    border-radius: 10px;
}

.tx-bx::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 10px;
}

.tx-bx::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Custom table styling */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0;
}

/* Header row - Sticky on scroll */
.custom-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.custom-table th {
    background-color: var(--secondary-color);
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
    padding: 5px 10px;
    text-align: left;
    white-space: nowrap;
}

/* Body cells */
.custom-table td {
    padding: 5px 10px;
    background-color: var(--bg1-color);
    font-size: 13px;
    color: var(--para-color);
    border-bottom: 1px solid var(--border-color);
}

/* First column (Specification names) - Make bold */
.custom-table td:first-child {
    font-weight: 600;
    color: var(--heading-color);
}

/* Alternate row shading */
.custom-table tr:nth-child(even) td {
    background-color: var(--bg2-color);
    font-size: 14px;
    color: var(--para-color);
}

/* Hover effect */
.custom-table tr:hover td {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Keep first column white on hover */
.custom-table tr:hover td:first-child {
    color: var(--white);
}

/* Responsive Design */
@media (max-width: 991px) {
    .product-section11 {
        padding: 40px 0;
    }
    
    .product-title11 {
        font-size: 20px;
    }
    
    .tx-bx {
        max-height: 270px;
    }
}

@media (max-width: 767px) {
    .product-section11 {
        padding: 30px 0;
    }
    
    .product-title11 {
        font-size: 18px;
    }
    
    .btn-main {
        padding: 0.6rem 1rem;
        font-size: 14px;
    }
    
    .custom-table th,
    .custom-table td {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .tx-bx {
        max-height: 240px;
    }
}

@media (max-width: 575px) {
    .btn-main {
        width: 100%;
        justify-content: center;
    }
}

/* ******************************realted category section code****************************************** */


.section-14 {

  padding: 56px 0;


  background: var(--bg2-color);

}


.card-14 {

  border: 1px solid #eee;


  height: 100%;

  border-radius: var(--radius);


}


/* Aspect ratio wrapper */


.card-img-wrapper12 {

  height: 100%;

  width: auto;


  overflow: hidden;

}


.card-img-wrapper12 img {

    aspect-ratio: 1 / 1;

  width: 100%;


  height: 100%;


  object-fit: cover;


  background: var(--background2-color);


  transition: all 0.5s ease;

  border-radius: var(--radius);

}


.heading-text {

  font-size: 28px;


  font-weight: 600;


  /* fw-bold */


  color: var(--heading-color);

}


.heading-underline {

  height: 4px;


  width: 60px;


  border-radius: 2px;


  background: var(--primary-color);

}


.catogery_link {

  color: var(--header-color);

}


.card-img-wrapper12 img:hover {

  transform: scale(1.05);

}


/* Typography */


.catrogery-heaading {

  color: var(--heading-color);

  font-size: 20px;

  font-weight: 600;

   display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


.desc-14 {

  color: var(--para-color);


  font-size: 14px;


  line-height: 1.6;


 display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


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


/* privcy policy page code */


.privacy-container {

 
  padding: 56px 0;

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

}


.heading-1 {

  font-family: var(--font);


  font-size: 24px;


  color: var(--heading-color);


  margin-bottom: 20px;


  font-weight: 600;

}

.privacy-container h1, .privacy-container h2, .privacy-container h3, .privacy-container h4{

    font-size: 24px;

    font-weight: 600;

    color: var(--heading-color);

}

.privacy-container p{

    font-size: 14px;

    
    color: var(--para-color);

}

.privacy-container a{

    font-size: 14px;

    
    color: var(--primary-color);

}


.heading-2 {

  font-family: var(--font);


  font-size: 22px;


  color: var(--heading-color);


  font-weight: 600;

}


.heading-3 {

  font-family: var(--font);


  font-size: 18px;


  margin-top: 20px;


  margin-bottom: 8px;


  color: var(--heading-color);


  font-weight: 600;

}


/* Responsive */


@media (max-width: 768px) {

  .privacy-container {

    padding: 20px 15px;

  }


  .heading-1 {

    font-size: 24px;

  }


  .heading-2 {

    font-size: 20px;

  }

}


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


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

   Sitemap Section Styling

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

.sitemap-section {

    padding: 40px 15px;

    background: var(--bg2-color);


}


.sitemap-section .sitempheading {

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 20px;

    border-bottom: 2px solid var(--header-color);

    display: inline-block;

    padding-bottom: 5px;

    color: var(--header-color);

}


/* Root UL */

.sitemapcon {

    list-style: none;

    padding-left: 0;

    margin: 0;

    font-size: 14px;

}


/* Parent LI */

.sitemapcon>li {

    position: relative;

    margin: 5px 0;

    padding-left: 20px;

}


/* Add vertical line before items */

.sitemapcon>li::before {

    content: "";

    position: absolute;

    top: 0;

    left: 8px;

    bottom: 0;

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

}


/* Horizontal line for each item */

.sitemapcon>li::after {

    content: "";

    position: absolute;

    top: 12px;

    left: 8px;

    width: 10px;

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

}


/* Links */

.sitemapcon a {

    text-decoration: none;

    color: var(--para-color);

    font-weight: 500;

    transition: color 0.2s;

}


.sitemapcon a:hover {

    color: var(--primary-color);

}


/* Subcategories */

.sitemapsubcat {

    list-style: none;

    margin: 5px 0 5px 20px;

    padding-left: 15px;

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

}


.sitemapsubcat li {

    position: relative;

    margin: 5px 0;

    padding-left: 15px;

}


.sitemapsubcat li::before {

    content: "";

    position: absolute;

    top: 12px;

    left: -15px;

    width: 15px;

    border-top: 1px solid #ccc;

}


/* Responsive adjustments */

@media (max-width: 767px) {

    .sitemap-section {

        padding: 20px 10px;

    }


    .sitemap-section .you_may {

        font-size: 16px;

    }


    .sitemapcon {

        font-size: 13px;

    }

}


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


/* Section Wrapper */

.market-area {

    padding: 60px 0;

    background: var(--bg2-color)

}


/* Heading */

.Marektheading {

    text-align: center;

    margin-bottom: 30px;

}


.Marektheading .market {

    font-size: 32px;

    font-weight: 700;

    color: var(--heading-color);

}


.Marektheading .market span {

    color: var(--para-color)

}


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

.market-area h2 {

    font-size: 22px;

    font-weight: 600;

    margin: 30px 0 15px;

    color: var(--para-color);

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

    padding-left: 10px;

}


/* Market Cards */

.marketcard {

    display: block;

    text-align: center;

    padding: 12px 10px;

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

    border-radius: 6px;

    background: var(--bg1-color);

    font-size: 16px;

    font-weight: 500;

    color: var(--text1-color);

    text-decoration: none;

    transition: all 0.3s ease;

}


/* Hover effect */

.marketcard:hover {

    background: var(--border-light);

    color: var(--primary-color);


    transform: translateY(-3px);

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

}


.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(--white);

    font-weight: 400;

    font-size: 16px;

    margin-bottom: 10px;

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

    border-radius: var(--radius);

    padding: 6px 9px;

    display: inline-block;

}


.img-breadcum .tt {

    font-weight: 500;

    font-size: 25px;

    line-height: 1.3;

    letter-spacing: normal;

    margin-bottom: 0px;

    color: var(--white);

    max-width: 650px;

    margin: 0 auto;

    text-transform: capitalize;

    /* text-shadow: 1px 1px 4px rgb(0 0 0); */

}


.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(--primary-color);

}


.breadcum-sec ul li a::before {

    content: "/";

    position: absolute;

    top: 1px;

    right: -11px;

    font-size: 14px;

    color: var(--heading-color);

}

/* .breadcum-sec ul li li{

    color: var(--primary-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);

}


/* sticky icon section code */


/* ===== 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;

}


/* Brand styles */

.fab-whatsapp {

    background: #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;

    /* below Bootstrap backdrop (1050), above page content */

    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;

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

    color: var(--white);

    text-decoration: none;

    border: 0;


}


/* Colors to match your reference image */

.contact-call {

    background: var(--primary-color);

    color: var(--white);

}


/* peach/tan */

.contact-wa {

    background: #25D366;

    color: var(--white);

}


/* WhatsApp green */

.contact-enq {

    background: var(--secondary-color);

    color: var(--white);

}


/* dark slate */


.ci-icon {

    display: inline-flex;

}


.ci-label {

    line-height: 1;

}