/* html, body {
   overflow-x: hidden; 
} */


/* TOP HEADER */
.top-header {
    padding: 10px 0;
    background-color: var(--theme-color);
}

.top-header .left-block {
    padding: 0;
    margin: 0;
}

.top-header .left-block ul {
    padding: 0;
    margin: 0;
}

.top-header .left-block ul li i {
    font-size: 16px;
    color: #fff;
    margin-right: 10px;
}

.top-header .left-block ul li a {
    font-size: 13px;
    font-family: var(--regular-font);
    color: #fff;
    font-weight: 500;
}

.top-header .right-block p {
    font-family: var(--regular-font);
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    padding: 0;
    margin-bottom: 0;
}

.top-header .right-block i {
    font-size: 18px;
    color: #fff;
}

/* HEADER AND BANNER SECTION  */
.header-and-banner-section {
    padding: 0;
    margin: 0;
    position: relative;
}

.header-and-banner-section header {
    padding: 10px 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 30%);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: +999;

}

.header-and-banner-section header .logo-block {
    width: 100px;
    padding: 0;
    margin: 0;
}

.classynav ul li a {
    font-family: 'Playfair';
    color: #FFFFFF;
    font-weight: 500;
    font-size: 22px;
    text-transform: capitalize;
    line-height: 29px;
    padding: 0 15px;
    margin: 0;
}

.header-and-banner-section .banner {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

@keyframes slideFromLeft {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideFromRight {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.header-and-banner-section .main-banner {
    width: 100%;
    padding: 0;
    margin: 0;
}

.header-and-banner-section .main-banner .left-bg {
    width: 100%;
    height: 640px;
    background-color: #E4E4E4;
    padding: 0;
    margin: 0;
}

.header-and-banner-section .main-banner .img-block {
    animation: slideFromRight 1.2s ease-out forwards;
    opacity: 0;
    padding: 0;
    height: 640px;
    margin: 0;
    width: 100%;
    overflow: hidden;
}

header .call-icon{
    width: 70px;
    height: 60px;
    background-color: var(--theme-color);
    display: grid;
    place-items: center;
    border-radius: 10px;
    transition: 0.3s;
}

header .call-icon:hover{
    background-color: #19ce01;
}

header .call-icon i{
    color: #fff;
    font-size: clamp(1.25rem, 1.1346rem + 0.6154vw, 1.75rem);
}

.header-and-banner-section .main-banner .img-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.header-and-banner-section .main-banner .left-bg {
    width: 100%;
    height: 100%;
    background-color: #E4E4E4;
    padding: 0;
    margin: 0;
}


.header-and-banner-section .main-banner .col-xxl-6 {
    padding: 0;
}

.header-and-banner-section .main-banner .hero-text {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 27%;
    transform: translateY(-50%);
    animation: slideFromLeft 1.2s ease-out forwards;
    opacity: 0;
}

.header-and-banner-section .main-banner .hero-text h1 {
    color: #000000;
    font-family: var(--title-font);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.2222rem + 1.4815vw, 3rem);
    line-height: 58px;
    max-width: 38%;
    padding: 0;
    margin-bottom: 20px;
}

.header-and-banner-section .main-banner .hero-text p {
    font-family: var(--regular-font);
    color: #000000;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    padding: 0;
    margin-bottom: 30px;
    max-width: 35%;
}

.header-and-banner-section .banner .banner-slide {
    height: 640px;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    border-bottom: 2px solid #A3A1A1;
}

.header-and-banner-section .banner .banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    padding: 0;
    margin: 0;
}

.header-and-banner-section .banner .banner-slide .dark-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 1;
    top: 0;
    background-repeat: no-repeat;
    background: linear-gradient(90deg,
            rgba(22, 22, 22, 0.95) 40%,
            /* Dark stays longer (50%) */
            rgba(22, 22, 22, 0.7) 55%,
            /* Smooth fade */
            rgba(22, 22, 22, 0.3) 75%,
            /* Softer transition */
            rgba(22, 22, 22, 0) 95%
            /* Fully transparent */
        );

}

.header-and-banner-section .banner .banner-slide .hero-text {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    z-index: 999;
}

.header-and-banner-section .banner .banner-slide .hero-text h1 {
    color: #ffffff;
    font-family: var(--title-font);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.2222rem + 1.4815vw, 3rem);
    line-height: 1.1;
    max-width: 50%;
    padding: 0;
    margin-bottom: 20px;
}

.header-and-banner-section .banner .banner-slide .hero-text p {
    font-family: var(--regular-font);
    color: #ffffff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    padding: 0;
    margin-bottom: 30px;
    max-width: 35%;
}

/* ABOUT */
.about {
    background-image: url("../images/about-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 50px 0;
    margin: 0;
}

.about {
    padding: 50px 0;
    margin: 0;
}

.about p {
    color: #000000;
    font-family: var(--regular-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
}


.about .img-block {
    height: 266px;
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.about .img-block img {
    width: 100%;
    height: 100%;
}

.about .video-block {
    height: 331px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    object-fit: cover;
}

.about .read-more{
    display: block;

}

.about .read-more{
    font-family: var(--regular-font);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.1;
    font-size: clamp(0.75rem, 0.6797rem + 0.375vw, 1.125rem);
    font-weight: 500;
    text-transform: capitalize;
    border-radius: 50px;
    width: fit-content;
    background-color: var(--theme-color);
    padding: 14px 40px;
    margin: 15px 0 25px 0;
        cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.about .read-more:hover {
    color: #fff;
    background-color: #2e2e2e;
    transform: perspective(400px) rotateX(10deg) rotateY(-10deg) scale(1.05);
    box-shadow: 0 10px 20px rgba(236, 67, 70, 0.4),
                0 6px 6px rgba(236, 67, 70, 0.2);
}


.about .video-block video {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


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

.about .primery-btn i {
    font-size: 40px;
}

.about .primery-btn {
    display: flex;
    align-items: center;
    gap: 13px;
    position: relative;
    margin: -7% 0 0 53%;
}

/* OUR SERVICES */
.our-services {
    background-color: #F0F0F0;
    padding: 50px 0;
    margin: 0;
}

.our-services .img-card {
    position: relative;
    object-fit: cover;
    overflow: hidden;
    cursor: pointer;
}

.our-services .img-card img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.our-services .img-card:hover img {
    transform: scale(1.1);
}

.our-services .overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
    color: #fff;
    display: flex;
    align-items: flex-end;
    transition: bottom 0.5s ease;
    padding: 20px;
}

.our-services .img-card:hover .overlay {
    bottom: 0;
}

.our-services .img-card .overlay .text-content {
    padding: 0;
    margin: 0;
}

.our-services .img-card .overlay .text-content h4 {
    color: #FFFFFF;
    font-family: var(--regular-font);
    font-weight: 700;
    font-size: clamp(1.125rem, 0.9861rem + 0.7407vw, 1.875rem);
    line-height: 27px;
    padding: 0;
    margin-bottom: 15px;
}

.our-services .img-card .overlay .text-content p {
    color: #e6e6e6;
    font-family: var(--title-font);
    font-weight: 400;
    font-size: clamp(0.9375rem, 0.9259rem + 0.0617vw, 1rem);
    line-height: 20px;
    padding: 0;
    margin-bottom: 20px;
}

.our-services .img-card .overlay .text-content a {
    font-family: var(--regular-font);
    font-size: 16px;
    color: #fff;
    background-color: var(--theme-color);
    width: fit-content;
    padding: 12px 25px;
    margin: 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.our-services .img-card .overlay .text-content a:hover {
    background-color: #2e2e2e;
    transform: perspective(400px) rotateX(10deg) rotateY(-10deg) scale(1.05);
    box-shadow: 0 10px 20px rgba(236, 67, 70, 0.4),
        0 6px 6px rgba(236, 67, 70, 0.2);
}

/*  COMPANY STATUS */
.company-status {
    padding: 30px 0;
    background: linear-gradient(rgba(228, 59, 59, 0.6), rgba(255, 23, 23, 0.8)),
        url('../images/comany-status-bg.png') center/cover no-repeat;
    background-attachment: fixed;
}

.company-status .count-status {
    padding: 0;
    margin: 0;
}

.company-status .count-status p {
    font-family: var(--regular-font);
    color: #FFFFFF;
    font-weight: 600;
    font-size: clamp(0.875rem, 0.8519rem + 0.1235vw, 1rem);
    line-height: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.company-status .count-status h4 {
    color: #FFFFFF;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: clamp(2.125rem, 1.662rem + 2.4691vw, 4.625rem);
    line-height: 1.1;
    text-transform: uppercase;
}

/* OUR PRODUCTS */
.our-products {
    padding: 50px 0;
    margin: 0;
}

.our-products .card {
    padding: 0;
    margin-top: 20px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.our-products .card .img-block {
    overflow: hidden;
    height: 523px;
    padding: 0;
    margin: 0;
}


.our-products .card .img-block img {
    width: 100%;
    height: 100%;
}

.our-products .card .text-content {
    background-color: #222222;
    height: 207px;
    align-items: center;
    padding: 30px;
    margin: 0;
}

.our-products .card .text-content h5 {
    color: #FFFFFF;
    font-family: var(--regular-font);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.3611rem + 0.7407vw, 2.25rem);
    line-height: 1.1;
    padding: 0;
}

.our-products .card .text-content p {
    color: #FFFFFF;
    font-family: var(--title-font);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(0.875rem, 0.8519rem + 0.1235vw, 1rem);
    line-height: 1.2;
    padding: 0;
    margin-top: 20px;
}


.our-products .card .text-content a {
    font-family: var(--regular-font);
    color: var(--theme-color);
    font-weight: 700;
    font-size: clamp(1rem, 0.9537rem + 0.2469vw, 1.25rem);
    border-radius: 50px;
    text-transform: capitalize;
    padding: 12px 30px;
    border: 2px solid var(--theme-color);
    width: fit-content;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.our-products .card .text-content a:hover {
    color: #fff;
    background-color: var(--theme-color);
    transform: perspective(400px) rotateX(10deg) rotateY(-10deg) scale(1.05);
    box-shadow: 0 10px 20px rgba(131, 120, 120, 0.4),
        0 6px 6px rgba(61, 56, 56, 0.2);
}


.our-products .primery-btn {
    display: block;
    margin: 0 auto;
}


/* WHY-CHOOSE US */
.why-choose-us {
    padding: 50px 0 0 0;
    margin: 0;
    overflow-x: hidden;
}

.why-choose-us .img-block {
    background: linear-gradient(rgba(32, 32, 32, 0.4),
            /* top dark shade */
            rgba(32, 32, 32, 0.4)
            /* bottom dark shade */
        ),
        url("../images/why-choose-us-img.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
}

.why-choose-us .img-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures image covers full area */
    display: block;
}

.why-choose-us .text-content {
    padding: 40px;
    margin: 0;
    background-color: #262626;
}


.why-choose-us .text-content .section-semi-title {
    color: #fff;
}

.why-choose-us .text-content p {
    color: #BCBCBC;
    font-family: var(--regular-font);
    font-weight: 400;
    font-size: clamp(0.875rem, 0.8519rem + 0.1235vw, 1rem);
    line-height: 1.1;
    max-width: 80%;
    margin-bottom: 20px;
    padding: 0;
}

.why-choose-us .text-content h6 {
    color: #ffffff;
    font-family: var(--regular-font);
    font-weight: 400;
    font-size: clamp(1rem, 0.9769rem + 0.1235vw, 1.125rem);
    line-height: 1.1;
    margin-bottom: 10px;
    padding: 0;
}

.why-choose-us .col-xxl-6 {
    padding: 0;
}


.why-choose-us .text-content h6 i {
    font-size: clamp(1.375rem, 1.2824rem + 0.4938vw, 1.875rem);
    color: var(--theme-color);
}

.why-choose-us .text-content .primery-btn {
    font-size: 40px;
    border-radius: 0;
    padding: 12px 20px;
    border: none;
}

.why-choose-us .text-content .primery-btn i {
    font-size: clamp(1.875rem, 1.7593rem + 0.6173vw, 2.5rem);
}

.why-choose-us .text-content h2 {
    font-family: var(--regular-font);
    font-weight: 700;
    font-size: clamp(1.125rem, 1.0556rem + 0.3704vw, 1.5rem);
    line-height: 30px;
    color: #FFFFFF;
}

/*  CONTACT US  */
.contact-us {
    padding: 40px 0;
    margin: 0;
    background-color: #201f1b;
    background-image: url("../images/contact-us-bg.png");
    background-repeat: no-repeat;
    background-position: center;
}

.contact-us .contact-bar {
    background: rgba(131, 131, 131, 0.5);
    border-radius: 5px;
    padding: 30px;
    margin: 0;
}

.contact-us .contact-bar .form-block {
    padding: 0;
    margin: 0;
}

.contact-us .contact-bar .form-block input {
    background-color: #313131;
    border: 2px solid #EC4346;
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
}

.contact-us .contact-bar .form-block input::placeholder {
    color: #DBDBDB;
    font-family: var(--regular-font);
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    line-height: 18px;
    padding: 0;
    margin: 0;
}

.contact-us .contact-bar .form-block input#email,#name,#mobile,#message {
    font-family: var(--regular-font);
    font-size: 14px;
    font-weight: 400;
    color: #dfdddd;
}

.contact-us .contact-bar .form-block textarea {
    height: 180px;
    background: #313131;
    border: 2px solid #EC4346;
    border-radius: 5px;

}

.contact-us .contact-bar .form-block textarea::placeholder {
    color: #DBDBDB;
    font-family: var(--regular-font);
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    line-height: 18px;
    padding: 0;
    margin: 0;
}

.contact-us .contact-bar .primery-btn {
    width: 100%;
    border-radius: 0;
    text-align: center;
}

.contact-us .contact-bar .contact-details {
    background-color: #373030;
    padding: 40px;
    margin: 0;
    border-radius: 5px;
    border-top: 6px solid var(--theme-color);
    position: relative;
}

.contact-us .contact-bar .contact-details h4 {
    font-family: var(--title-font);
    font-weight: 600;
    font-size: 40px;
    line-height: 42px;
    color: #FFFFFF;
    padding: 0;
    margin-bottom: 20px;
}

.contact-us .contact-bar .contact-details p {
    font-family: var(--regular-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #CFCFCF;
    padding: 0;
    margin-bottom: 30px;
}

.contact-us .submit-button {
    font-family: var(--regular-font);
    color: var(--theme-color);
    font-size: 1.1;
    font-size: clamp(1.125rem, 1.0324rem + 0.4938vw, 1.625rem);
    font-weight: 500;
    text-transform: capitalize;
    width: 100%;
    text-align: center;
    background-color: var(--theme-color);
    border: 2px solid var(--theme-color);
    padding: 14px 40px;
    margin: 0;
    position: relative;
    display: inline-block;
    padding: 12px 30px;
    background: transparent;
    background-color: #353535;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease;
}

.contact-us .submit-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--theme-color);
    z-index: -1;
    transition: left 0.5s ease;
}

.contact-us .submit-button:hover {
    color: #fff;
    /* text color when hover */
}

.contact-us .submit-button:hover::before {
    left: 0 !important;
}

.contact-us .contact-bar .contact-details .icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #EC4346;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: grid;
    place-items: center;
    line-height: 0;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}


.contact-us .contact-bar .contact-details .icon:hover {
    transform: scale(1.1) rotate(10deg);
    background: #353535;
    border: 1px solid var(--theme-color);
    box-shadow: 0 0 15px rgba(236, 67, 70, 0.5);
}


.contact-us .contact-bar .contact-details .icon i {
    font-size: 16px;
    line-height: 0;
    color: #FFF;
}

.contact-us .contact-bar .contact-details a {
    color: #FFFFFF;
    font-family: var(--regular-font);
    font-weight: 400;
    font-size: clamp(0.75rem, 0.6923rem + 0.3077vw, 1rem);
    line-height: 18px;
    padding: 0;
    margin: 0;
}

.contact-us .contact-bar .contact-details .location {
    max-width: 86%;
}

.contact-us .contact-bar .contact-details .cercle-img {
    position: absolute;
    top: 18%;
    right: 6%;
    animation: rotation 40s infinite;
}

@keyframes rotation {
    100% {
        rotate: 720deg;
    }
}


/* MAP */
.map {
    height: 300px;
    object-fit: cover;
    overflow: hidden;
    object-position: center;
}


/* FOOTER */
footer {
    padding: 50px 0;
    margin: 0;
    background-image: url("../images/footer-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

footer .text-content {
    padding: 0;
    margin: 0;
}

footer .text-content .logo-block {
    margin-bottom: 20px;
    padding: 0;
}

footer .text-content h4 {
    color: #EC4346;
    font-family: var(--theme-color);
    font-style: normal;
    font-weight: 700;
    text-transform: capitalize;
    font-size: clamp(0.875rem, 0.8462rem + 0.1538vw, 1rem);
    line-height: 1.1;
    padding: 0;
    margin-bottom: 30px;
}


footer .text-content p {
    color: #FFFFFF;
    font-family: var(--regular-font);
    font-weight: 400;
    font-size: clamp(0.75rem, 0.6923rem + 0.3077vw, 1rem);
    line-height: 1.1;
    padding: 0;
    margin-bottom: 20px;
    max-width: 90%;
}

footer .text-content a {
    color: #FFFFFF;
    font-family: var(--regular-font);
    font-weight: 400;
    font-size: clamp(0.75rem, 0.6923rem + 0.3077vw, 1rem);
    padding: 0;
    margin-bottom: 5px;
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer;
}


footer .text-content a:hover {
    transform: scale(1.1);
    color: var(--theme-color);
}
footer .text-content ul { 
    list-style: none;     /* removes the bullet */
    padding-left: 0;      /* removes default left spacing */
    margin: 0;  
}

footer .text-content .icon {

    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #EC4346;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: grid;
    place-items: center;
    line-height: 1;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}


footer .text-content .icon:hover {
    transform: scale(1.1) rotate(10deg);
    background: #353535;
    border: 1px solid var(--theme-color);
    box-shadow: 0 0 15px rgba(236, 67, 70, 0.5);
}


footer .text-content .icon i {
    font-size: 16px;
    line-height: 0;
    color: #FFF;
}



/* DOWN FOOTER */
.down-footer {
    background-color: var(--theme-color);
}

.down-footer a {
    font-family: var(--regular-font);
    font-weight: 700;
    font-size: clamp(1rem, 0.9423rem + 0.3077vw, 1.25rem);
    color: #FFFFFF;
    padding: 20px 0;
    margin: 0;
}

/* fixed icons  */

.fixed-icons {
    position: fixed;
    bottom: 5%;
    right: 1%;
    z-index: 9999;
}

.wp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    margin-bottom: 20px;
}

.wp-icon a {
    width: 50px;
    height: 50px;
    background-color: rgb(74, 201, 90);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: grid;
    border-radius: 50%;
    place-items: center;
    padding: 0;
    margin: 0;
    animation: bounceIcon 0.6s infinite;
}


.wp-icon a i {
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    line-height: 0;
}


.email-icon a {
    width: 50px;
    height: 50px;
    background-color: rgb(222, 86, 74);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: grid;
    border-radius: 50%;
    place-items: center;
    padding: 0;
    margin: 0;
    animation: bounceIcon 0.6s infinite;
}

.email-icon a i {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    line-height: 0;
}

@keyframes bounceIcon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* rotaed */
.rotaed-img {
    position: absolute;
    width: 400px;
    top: 250px;
    right: -100px;
}


/* header fixed */
body.scroll-down header{
    position: fixed;
    backdrop-filter: blur(20px);
}

body.scroll-up header{
    position: fixed;
    backdrop-filter: blur(20px);
}



/* inner pages */

/* inner banner */
.inner-banner {
  position: relative;
  width: 100%;
  height: 350px; /* adjust as needed */
  overflow: hidden;
  background-attachment: fixed;
}

.inner-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures full coverage */
}

.inner-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* light black shade */
}

.inner-banner .hero-text{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100;
}
.inner-banner h2{
    font-family: var(--title-font);
    color: #fff;
    font-size: clamp(1.125rem, 0.963rem + 0.8642vw, 2rem);
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}

/* product deyails */

.product-details {
    padding: 50px 0;
    margin: 0;
}

.product-details  .inner-card{
    margin: 30px 0;
}

.product-details  .inner-card .img-block {
    width: 100%;  
    display: flex;
    justify-content: center;
    object-fit: cover;
    overflow: hidden;
    padding-bottom: 30px;
}


.product-details .inner-card .img-block img {
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
}

.product-details .inner-card  .sticky {
    position: sticky;
    top: 100px;
}

 .sticky {
    position: sticky;
    top: 110px;
}

.product-details .inner-card .text-content{
    padding: 0;
    margin: 0;
}

.product-details .inner-card .text-content h4{
    font-family: var(--title-font);
    font-size: clamp(1.5rem, 1.3269rem + 0.9231vw, 2.25rem);
    font-weight: 500;
    color: #1d1d1d;
    text-transform: capitalize;
    padding: 0;
    margin-bottom: 30px;
}

.product-details .inner-card .text-content p{
    font-family: var(--regular-font);
    font-size: clamp(0.75rem, 0.6923rem + 0.3077vw, 1rem);
    font-weight: 400;
    color: #1d1d1d;
    text-transform: capitalize;
    padding: 0;
    margin-bottom: 20px; 
}

.product-details .specifications {
  margin: 20px 0;
}

.product-details .specifications h3 {
    font-family: var(--regular-font);
    color: #000000;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

.product-details .spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 15px;
}

.product-details .spec-table td {
    font-family: var(--regular-font);
    font-size: 16px;
    color: #2c2b2b;
  border: 1px solid #eee;
  padding: 10px 12px;
  vertical-align: top;
}

.product-details .spec-table td strong{
    font-family: var(--regular-font);
    font-size: 18px;
    color: #4b4b4b;
}
.product-details .spec-table td:first-child {
  width: 30%;
  font-weight: bold;
  background: #fafafa;
}


/* inner categorys */
.our-categories{
    padding: 50px 0;
    margin: 0;
}

.our-categories .inner-card{
    margin: 30px 0;
    padding-bottom: 10px;
    border-bottom: 3px solid #ccc;
}

.our-categories h4{
    font-family: var(--title-font);
    font-size: clamp(1.125rem, 0.8654rem + 1.3846vw, 2.25rem);
    color: #000000;
    line-height: 1.1;
    font-weight: 700;
    padding: 0;
    margin-bottom: 20px;
}

.our-categories p{
    font-family: var(--title-font);
    font-size: clamp(0.875rem, 0.8462rem + 0.1538vw, 1rem);
    color: #413f3f;
    line-height: 1.4;
    font-weight: 400;
    padding: 0;
    margin-bottom: 20px;
}
.our-categories .inner-card .img-block {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    object-fit: cover;
    overflow: hidden;
    padding: 0;
    margin: 0;
}


ol.breadcrumb.breadcrumb-center {
    position: absolute;
    z-index: 9999;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
}

ol.breadcrumb.breadcrumb-center li a{
    font-family: var(--regular-font);
    font-size: clamp(0.9375rem, 0.8654rem + 0.3846vw, 1.25rem);
    color: #ffff;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: 0.3s;    
}

ol.breadcrumb.breadcrumb-center li a:hover{
    color: var(--theme-color);
}

ol.breadcrumb.breadcrumb-center li {
    font-family: var(--regular-font);
    font-size: clamp(0.9375rem, 0.8654rem + 0.3846vw, 1.25rem);
    color: #ffff;
    white-space: nowrap;
    font-weight: 500;
    text-decoration: none;
    margin-left: -5px;
    
}

.about .about-content{
    font-family: var(--regular-font);
    font-size: clamp(0.75rem, 0.6346rem + 0.6154vw, 1.25rem);
    color: #000000;
    font-weight: 400;
    line-height: 1.2;
    padding: 0;
    margin-bottom: 30px;
}

.about .about-details{
    font-family: var(--regular-font);
    font-size: clamp(0.75rem, 0.6635rem + 0.4615vw, 1.125rem);
    color: #000000;
    font-weight: 600;
    line-height: 1.2;
    padding: 0;

}

.about .about-details i{
    font-size: 20px;
    color: var(--theme-color);
}