:root {
    --primary-font: "Poppins", sans-serif;
    --secondary-font: "Inter", sans-serif;
    --primary-color: #66c4f9;
    --primary-color-header: #353d42;
    --secondary-color: #353d42;
    --white-background-color: #fff;
    --footer-bg: #000000;
    --text-color: #000;
}

html,
body,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    margin: 0;
    padding: 0;
}
a {
    margin: 0;
    padding: 0;
    text-decoration: none !important;
    outline: none !important;
    font-family: "Inter", sans-serif !important;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
a:hover {
    color: #fff;
}
::selection {
    background: #fff;
    color: #010101;
}
::-moz-selection {
    background: #fff;
    color: #010101;
}
::-webkit-selection {
    background: #fff;
    color: #010101;
}
img {
    max-width: 100%;
    height: auto;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif !important;
}
p {
    padding: 0;
    margin: 0 0 15px 0;
    font-weight: normal;
    font-size: 15px;
    font-family: "Inter", sans-serif !important;
    color: #010101;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif !important;
}

.offcanvas {
    background: var(--primary-color) !important;
    .offcanvas-header .btn-close {
        opacity: 1;
        padding: 0;
        width: auto;
        height: auto;
        position: relative;
        right: 7px;
    }
    .offcanvas-header .btn-close i {
        color: #000;
        font-size: 25px;
    }
    .btn-close:focus {
        box-shadow: none;
    }
    .headerMainFlexMobile {
        ul {
            margin: 0;
            padding: 0;
            li {
                a {
                    font-weight: 400;
                    font-size: 20px;
                    color: #fff;
                    display: block;
                    padding-bottom: 18px;
                    &:hover {
                        color: var(--secondary-color);
                    }
                }
            }
        }

        button {
            border-radius: 8px;
            width: 160px;
            height: 43px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-weight: 600;
            font-size: 16px;
            background: #d55261;
            border: none;
            transition: 0.4s;
            margin-top: 20px;
            &:hover {
                background: #fff;
                color: #d55261;
            }
        }
    }
}

.mainContainer {
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 50px;
    position: relative;
    @media (max-width: 767px) {
        padding: 0 20px;
    }
}
.termsConditonBgSec {
    padding: 40px 0px 40px;

    @media (max-width: 1200px) {
        padding: 50px 0px 0px;
    }
    h3 {
        font-size: 30px;
        color: #844d9b;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 5px;

        position: relative;
        @media (max-width: 1200px) {
            font-size: 35px;
            margin-bottom: 16px;
        }
        @media (max-width: 570px) {
            font-size: 24px;
        }
    }
    span {
        font-size: 17px;
        font-weight: 400;
        line-height: 24px;
        color: #000;
        text-align: left;
        margin-bottom: 20px;
        display: block;
        @media (max-width: 570px) {
            font-size: 16px;
        }
    }

    ul {
        margin: 0;
        padding: 0 0 30px;
        li {
            color: #000;
            padding-bottom: 10px;
            font-weight: 300;
            font-size: 14px;
            position: relative;
            padding-left: 20px;
            &::before {
                position: absolute;
                left: 0;
                top: 6px;
                width: 6px;
                height: 6px;
                background: #333;
                content: "";
                border-radius: 50%;
            }
        }
    }

    h4 {
        font-size: 16px;
        color: #000;
        font-weight: 600;
        text-transform: capitalize;
        margin-bottom: 10px;
        position: relative;

        @media (max-width: 570px) {
            font-size: 19px;
        }
    }
    p {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #000;

        text-align: left;
        @media (max-width: 570px) {
            font-size: 14px;
        }
        &:last-child {
            margin-bottom: 0px;
        }
    }
}
.flexTermcontact {
    display: flex;
    gap: 23px;
    @media (max-width: 570px) {
        flex-direction: column;
        gap: 17px;
    }
}
.flexMainFooterPhn {
    display: flex;
    gap: 12px;
    align-items: center;
    span {
        margin-bottom: 0px;
    }
    a {
        color: #d55261;
    }
}

.termsConditionBanner {
    background: linear-gradient(180deg, #844d9b 46.15%, #ae5ca4 100%);

    height: 60vh;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    @media (max-width: 570px) {
        height: 243px;
    }

    h3 {
        font-size: 48px;

        color: #fff;
        font-weight: 900;
        text-transform: uppercase;

        position: relative;
        @media (max-width: 570px) {
            font-size: 30px;
        }
    }
}
.accordion-button:focus {
    box-shadow: none !important;
    border-color: none !important;
}
.headerAllfix {
    width: 100%;
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.bgVdomain {
    z-index: 1;
    padding: 80px 20px 42px;
    height: 100%;
    position: relative;
    .main-slider-one__bg {
        video {
            overflow: hidden;
            border-radius: 20px;
            height: 100%;
            width: 100vw;
            object-fit: cover;
            max-width: 100%;
            position: relative;
            margin-top: 17px;
            &::before {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                content: "";
                background: #000;
                z-index: 100;
            }
        }

        &:after {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: "";
            background: linear-gradient(
                180deg,
                var(--hyperfly-black, #030d17) 0%,
                rgba(var(--hyperfly-black-rgb, 3, 13, 23), 0) 100%
            );
        }
    }

    .flexButtonStore {
        display: flex;
        gap: 7px;
        button {
            border: none;
            background: transparent;
            img {
                @media (max-width: 1200px) {
                    width: 114px;
                }
            }
        }
    }
}
.mobileBtn {
    display: none;
    i {
        color: #000;
        font-size: 30px;
    }
    @media (max-width: 1200px) {
        display: block;
    }
}
.faqBannerSec {
    display: flex;

    justify-content: space-between;
    background: url(../img/page-header-banner.jpg) no-repeat;
    background-size: cover;
    height: 500px;
    position: relative;
    z-index: 1;
    align-items: center;
    text-align: center;
    padding-top: 152px;
    ul {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 0;
        margin-bottom: 0px;

        li {
            padding: 0px 6px 0;
            color: #fff;
            position: relative;
            &:first-child:after {
                display: none;
            }
            &::after {
                position: absolute;
                left: -7px;
                top: 11px;
                width: 5px;
                height: 5px;
                content: "";
                background: #d0ad5e;
                border-radius: 50%;
            }
            a {
                color: #d0ad5e;
            }
        }
    }

    @media (max-width: 570px) {
        height: 403px;
    }

    .maxWidthmainFaqBanner {
        max-width: 706px;
    }
    .overLayLayer {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: #010101c4;
        z-index: -1;
        content: "";
    }
    h3 {
        margin-bottom: 20px;
        font-size: 55px;
        color: #fff;
        font-weight: 600;

        @media (max-width: 1200px) {
            font-size: 45px;
        }
        @media (max-width: 570px) {
            font-size: 24px;
        }
    }
}

.faqsubBgSec {
    padding: 160px 0px 0px;
    background: #010101;
    @media (max-width: 1200px) {
        padding: 50px 0px 0px;
    }
    .accordionEverthing {
        .accordion-item {
            border-radius: 0px;
            margin-bottom: 12px;
            border: 1px solid #fefefe29;
            background: transparent;

            border-radius: 16px;
            &:last-child {
                margin-bottom: 0px;
            }
        }
        .accordion-button {
            background: transparent;
            padding: 24px 20px;
            color: #fff;
            font-size: 20px;
            font-weight: 600;
            box-shadow: none;
            @media (max-width: 1200px) {
                font-size: 18px;
            }
            &::after {
                background-image: url(../img/pluse-button.png);
                background-repeat: no-repeat;
            }
        }
        .accordion-button:not(.collapsed)::after {
            background-image: url(../img/minus.png);
            background-repeat: no-repeat;
        }
        .accordion-body {
            padding-top: 0px;

            p {
                font-size: 16px;
                font-weight: 400;
                color: #fff;

                line-height: 23px;
                text-align: left;
                margin-bottom: 0px;
            }
        }
    }
    h3 {
        font-size: 48px;
        font-family: "Prompt", sans-serif;
        color: rgb(255, 255, 255);
        font-weight: 900;
        text-transform: uppercase;
        margin-bottom: 30px;
        font-style: italic;
        position: relative;
        @media (max-width: 1200px) {
            font-size: 35px;
            margin-bottom: 20px;
        }
        @media (max-width: 570px) {
            font-size: 24px;
        }
    }
    .accordionSectionDiv {
        margin-bottom: 100px;
        @media (max-width: 1200px) {
            margin-bottom: 40px;
        }
    }
}
.maxWidthFaqBanner1 {
    max-width: 938px;
}

.needHelpBg {
    background: url(../img/need-help-bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 90px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    @media (max-width: 570px) {
        padding: 50px 0px;
    }
    h4 {
        font-size: 48px;
        font-family: "Prompt", sans-serif;
        color: rgb(255, 255, 255);
        font-weight: 900;
        text-transform: uppercase;
        margin-bottom: 5px;
        font-style: italic;
        position: relative;
        @media (max-width: 992px) {
            font-size: 24px;
        }
    }
    button {
        background: rgb(213, 82, 97);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        font-size: 16px;
        width: 186px;
        height: 52px;
        color: rgb(255, 255, 255);
        border-radius: 8px;
        border: medium;
        transition: 0.4s;
        margin: 0 auto;
        i {
            margin-left: 10px;
            margin-top: 4px;
        }
        &:hover {
            background: #fff;
            color: rgb(213, 82, 97);
        }
    }
    p {
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        line-height: 23px;
        text-align: left;
        margin-bottom: 30px;
        @media (max-width: 992px) {
            font-size: 15px;
            margin-bottom: 20px;
            text-align: center;
        }
    }
    &::before {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        content: "";
        background: #010101a8;
    }
}

.contactMainBgSec {
    padding: 100px 0px;
    background: #fff;
    @media (max-width: 1200px) {
        padding: 40px 0px;
    }
    .loacationTxtmain {
        .iconMain {
            font-size: 45px;
            color: var(--secondary-color);
            margin-bottom: 27px;
        }
        h6 {
            font-size: 25px;
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 20px;
        }

        p {
            color: #333;
            font-size: 16px;
            line-height: 29px;
            text-align: left;
            margin-bottom: 44px;
        }
    }
    h4 {
        font-size: 55px;
        line-height: 65px;
        margin: 0 0 70px;
        font-weight: 600;
        @media (max-width: 1199px) {
            font-size: 35px;
            margin-bottom: 30px;
            line-height: 45px;
        }

        @media (max-width: 767px) {
            font-size: 25px;
            line-height: 35px;
        }
    }
    .upcomingNewsDivCommon {
        border-radius: 32px;
        padding: 40px;
        margin-bottom: 24px;
        @media (max-width: 1200px) {
            padding: 20px;
            margin-bottom: 16px;
        }
        &:last-child {
            margin-bottom: 0px;
        }
        .flexMainNewWrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            @media (max-width: 1200px) {
                flex-direction: column;
                align-items: start;
                gap: 20px;
            }
            .contentmainall {
                h4 {
                    font-size: 32px;
                    font-family: "Prompt", sans-serif;
                    color: #fff;
                    font-weight: 900;
                    text-transform: uppercase;
                    font-style: italic;
                    text-align: left;
                    margin-bottom: 24px;
                    @media (max-width: 570px) {
                        font-size: 24px;
                        margin-bottom: 16px;
                    }
                }

                .datemainNav {
                    margin: 0;
                    padding: 0;
                    display: flex;
                    gap: 40px;
                    @media (max-width: 570px) {
                        flex-direction: column;
                        gap: 10px;
                    }
                    li {
                        display: flex;
                        gap: 8px;
                        p {
                            font-size: 16px;
                            font-weight: 400;
                            color: #fefefe;
                            margin-bottom: 0px;
                            @media (max-width: 570px) {
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
    .buttonSecitonmain {
        display: flex;
        gap: 16px;
        @media (max-width: 570px) {
            flex-direction: column;
            width: 100%;
        }
        .vieDetailsBtn {
            border: 1px solid #fefefe;
            &:hover {
                background: #d55261;
                border: 1px solid #d55261;
            }
        }
        .registerBtn {
            background: #d55261;
            &:hover {
                background: #fff;
                border: 1px solid #fff;
                color: #d55261;
            }
        }
        button {
            border: none;
            background: transparent;
            width: 164px;
            height: 52px;
            border-radius: 8px;
            color: #fff;
            font-weight: 600;
            font-size: 16px;
            transition: 0.4s;
            cursor: pointer;
            @media (max-width: 570px) {
                width: 100%;
            }
        }
    }
    .newSectionBg1 {
        border: 1px solid #fefefe14;
        background-image: linear-gradient(
            to right top,
            rgb(1, 1, 1),
            rgb(13, 7, 24),
            rgb(21, 13, 38),
            rgb(27, 17, 53),
            rgb(36, 17, 67)
        );
    }
    .newSectionBg2 {
        border: 1px solid #fefefe14;
        background-image: linear-gradient(
            to right top,
            #010101,
            #171c24,
            #193341,
            #0c4d59,
            #066867
        );
    }
    .newSectionBg3 {
        border: 1px solid #fefefe14;
        background-image: linear-gradient(
            to right top,
            #010101,
            #0f0a17,
            #1a1023,
            #27122f,
            #371138
        );
    }
    h3 {
        font-size: 27px;
        font-weight: 600;

        color: var(--primary-color);

        text-transform: capitalize;

        margin-bottom: 20px;
    }
    label {
        font-size: 17px;
        margin-bottom: 9px;
        color: var(--primary-color);
    }
    p {
        font-size: 16px;
        font-weight: 400;
        color: #fff;

        line-height: 23px;
        text-align: center;
        margin-bottom: 30px;
        @media (max-width: 1200px) {
            font-size: 14px;
            margin-bottom: 20px;
        }
        @media (max-width: 992px) {
            max-width: 100%;
        }
    }
    .flexMainTab {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        align-items: center;
        @media (max-width: 570px) {
            margin-bottom: 30px;
            flex-direction: column;
            gap: 30px;
        }
        .form-select:focus {
            box-shadow: none;
        }
        .formMainSelect {
            width: 167px;
            background: #010101
                url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
                no-repeat right 0.75rem center;
            border: 1px solid #fefefe3d;
            background-size: 14px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            text-align: center;
            height: 52px;
        }
        .tabMainallTab {
            display: flex;
            gap: 16px;
            align-items: center;

            .nav-link {
                color: #fff;
                font-size: 16px;
                font-weight: 600;
                padding: 14px 31px;
                border-radius: 8px;
                @media (max-width: 570px) {
                    padding: 9px 19px;
                }
            }
            .nav-link.active {
                background-color: #fff !important;
                color: #333 !important;
            }
        }
    }
}

.everthingYouNeed {
    padding: 160px 0px 0px;
    background: #010101;
    @media (max-width: 1200px) {
        padding: 50px 0px 0px;
    }
    .gridMainEverthing {
        display: grid;
        grid-template-columns: 1fr 1fr;
        @media (max-width: 992px) {
            display: block;
        }
        .accordionEverthing {
            .accordion-item {
                border-radius: 0px;
                margin-bottom: 12px;
                border: 1px solid #fefefe29;
                background: transparent;

                border-radius: 16px;
                &:last-child {
                    margin-bottom: 0px;
                }
            }
            .accordion-button {
                background: transparent;
                padding: 24px 20px;
                color: #fff;
                font-size: 20px;
                font-weight: 600;
                box-shadow: none;
                @media (max-width: 1200px) {
                    font-size: 18px;
                }
                &::after {
                    background-image: url(../img/pluse-button.png);
                    background-repeat: no-repeat;
                }
            }
            .accordion-button:not(.collapsed)::after {
                background-image: url(../img/minus.png);
                background-repeat: no-repeat;
            }
            .accordion-body {
                padding-top: 0px;

                p {
                    font-size: 16px;
                    font-weight: 400;
                    color: #fff;

                    line-height: 23px;
                    text-align: left;
                    margin-bottom: 0px;
                }
            }
        }
        .contentTxtmain {
            max-width: 373px;
            @media (max-width: 992px) {
                max-width: 100%;
                margin-bottom: 20px;
            }
            h3 {
                font-size: 48px;
                font-family: "Prompt", sans-serif;
                color: #fff;
                font-weight: 900;
                text-transform: uppercase;
                font-style: italic;
                max-width: 498px;
                margin-bottom: 16px;
                @media (max-width: 1200px) {
                    font-size: 35px;
                }
                @media (max-width: 570px) {
                    font-size: 24px;
                }
            }
            p {
                font-size: 16px;
                font-weight: 400;
                color: #fff;
                max-width: 350px;
                line-height: 23px;
                text-align: left;
                margin-bottom: 30px;
                @media (max-width: 1200px) {
                    font-size: 14px;
                    margin-bottom: 20px;
                }
                @media (max-width: 992px) {
                    max-width: 100%;
                }
            }
            button {
                background: #d55261;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 600;
                font-size: 16px;
                width: 186px;
                height: 52px;
                color: #fff;
                border-radius: 8px;
                border: none;
                transition: 0.4s;
                &:hover {
                    background: #fff;
                    color: #d55261;
                }
                svg {
                    margin-left: 5px;
                }
            }
        }
    }
}

.bannerInnovation {
    padding: 160px 0px 0px;
    background: #010101;
    @media (max-width: 1200px) {
        padding: 50px 0px 0px;
    }
    .bannermainallBottom {
        background-image: linear-gradient(
            to left top,
            #241141,
            #1d1136,
            #180f2c,
            #140b21,
            #0d0717,
            #0d0717,
            #0d0718,
            #0d0718,
            #140c23,
            #180f2d,
            #1d1138,
            #241143
        );
        border: 1px solid #241143;
        border-radius: 32px;
        padding: 40px 0px 0px 60px;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        margin-bottom: 0px;
        @media (max-width: 992px) {
            padding: 29px 20px 0px 29px;
            gap: 17px;
            margin-bottom: 0px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .bannerTopPadding {
            padding-top: 15px;
            @media (max-width: 992px) {
                padding-top: 0px;
                text-align: center;
            }
        }
        h3 {
            font-size: 48px;
            font-family: "Prompt", sans-serif;
            color: #fff;
            font-weight: 900;
            text-transform: uppercase;
            font-style: italic;
            max-width: 498px;
            margin-bottom: 16px;
            @media (max-width: 1200px) {
                font-size: 35px;
            }
            @media (max-width: 992px) {
                max-width: 100%;
            }
            @media (max-width: 570px) {
                font-size: 24px;
            }
        }
        p {
            font-size: 16px;
            font-weight: 400;
            color: #fff;
            max-width: 449px;
            line-height: 23px;
            margin-bottom: 30px;
            text-align: left;
            @media (max-width: 992px) {
                margin: 0 auto 20px;
                text-align: center;
            }
            @media (max-width: 570px) {
                font-size: 14px;
            }
        }
        button {
            background: #d55261;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            font-size: 16px;
            width: 186px;
            height: 52px;
            color: #fff;
            border-radius: 8px;
            border: none;
            transition: 0.4s;
            @media (max-width: 992px) {
                margin: 0 auto;
            }
            &:hover {
                background: #fff;
                color: #d55261;
            }
            svg {
                margin-left: 5px;
            }
        }
    }
}

.bannerTxtMain {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000000;
    width: 100%;
    background: #33333391;
    height: 100%;
    padding-top: 102px;
    @media (max-width: 767px) {
        top: auto;
        bottom: 20px;
        padding-top: 70px;
    }
    @media (max-width: 570px) {
        display: none;
    }
    .flexTxtmainall {
        backdrop-filter: blur(20px);
        border: 1px solid #fefefe1f;
        border-radius: 30px;
        display: inline-block;
        padding: 8px 15px;
        margin-bottom: 12px;
        @media (max-width: 767px) {
            display: none;
        }
        label {
            color: #fff;
            font-weight: 400;
            font-size: 16px;
            @media (max-width: 1200px) {
                font-size: 14px;
            }
        }
    }
    h1 {
        font-size: 72px;
        color: #fff;
        font-weight: 700;
        text-transform: uppercase;
        max-width: 557px;
        @media (max-width: 1200px) {
            font-size: 34px;
        }
        @media (max-width: 767px) {
            font-size: 24px;
        }
    }
    p {
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        max-width: 557px;
        line-height: 23px;
        margin-bottom: 30px;
        @media (max-width: 1200px) {
            font-size: 14px;
            margin-bottom: 20px;
        }
        @media (max-width: 767px) {
            display: none;
        }
    }
}

.commonBtnMain {
    background: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    border: none;
    outline: none !important;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    border-radius: 7px;
    padding: 12px 18px;
    transition: 0.4s;
    display: flex;
    gap: 7px;
    width: 190px;
    label {
        cursor: pointer;
    }
    &:hover {
        background: var(--primary-color);
        color: #fff;
    }
}

.mobileMenuFlex {
    display: flex;
    align-items: center;

    label {
        cursor: pointer;
    }
}

.mobileSpaceMain {
    @media (max-width: 1199px) {
        margin-bottom: 50px;
    }
    @media (max-width: 767px) {
        margin-bottom: 0px;
    }
}

.mobileSpaceMain2 {
    @media (max-width: 767px) {
        margin-bottom: 30px;
    }
}

.aboutSubPageMain {
    border-bottom: 1px #ddd solid;
    .contentFlexTabMain {
        display: flex;
        padding-bottom: 64px;
        justify-content: space-between;
        gap: 50px;
        @media (max-width: 1199px) {
            flex-direction: column;
            gap: 10px;
            padding-bottom: 30px;
        }
        h3 {
            font-size: 50px;
            line-height: 65px;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 0px;
            @media (max-width: 1199px) {
                font-size: 35px;
                line-height: 49px;
            }
        }
        p {
            max-width: 525px;
            font-size: 18px;
            line-height: 35px;
            font-weight: 500;
            color: #566879;
            margin-bottom: 0px;
            @media (max-width: 1199px) {
                max-width: 100%;
            }
        }
    }
    .gridTabDivAll {
        .classContentTab {
            h5 {
                font-size: 20px;
                line-height: 30px;
                font-weight: 600;
                letter-spacing: -3%;
                margin: 0 0 25px;
            }

            p {
                margin: 0 0 30px;
                font-weight: 400;
                font-size: 16px;
                line-height: 35px;
                color: #6e6e6e;
            }
            h3 {
                font-size: 20px;
                font-weight: 600;
                color: var(--primary-color);
                margin-bottom: 15px;
            }

            ul {
                margin: 0 0 45px;
                padding: 0;
                li {
                    position: relative;
                    display: flex;
                    gap: 10px;
                    align-items: center;
                    font-size: 16px;
                    font-weight: 500;
                    margin: 0 0 10px;
                }
            }
        }

        .classContentImgTab {
            img {
                width: 100%;
            }
        }
    }
    .nav-pills .nav-link.active {
        background: var(--secondary-color);
    }
    .nav-pills {
        margin: 0 0 40px;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 7px;
        border: 1px solid #ddd;
        @media (max-width: 1199px) {
            margin: 0 0 50px;
            overflow: auto;
            white-space: nowrap;
        }
        .nav-link {
            &:hover {
                background: var(--secondary-color);
                color: #fff;
            }
        }

        li {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            flex-direction: column;
            width: 100%;
            cursor: pointer;
            justify-content: center;
            border-right: 1px solid #ddd;
            padding: 10px 10px;
            font-size: 18px;
            text-transform: capitalize;
            font-weight: 600;
            color: #030d17;
            letter-spacing: -2%;
            transition: all 0.4s ease;
            text-align: center;
            @media (max-width: 1199px) {
                padding: 22px 32px;
            }
        }
    }
}

.socialMediaMainContact {
    display: flex;
    gap: 10px;
    margin: 0px 0 0;
    padding: 0;
    li {
        a {
            background: #253148;

            font-size: 18px;
            color: #fff;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            &:hover {
                background: var(--secondary-color);
            }
        }
    }
}

.carousel-company-logo {
    overflow: hidden;
    border-radius: 20px;
    .owl-dots {
        display: none !important;
    }
}

.testmonialBgSec {
    padding: 100px 0px;
    background: #dddddd4d;
    @media (max-width: 992px) {
        padding: 40px 0px;
    }

    .clientWrapperMain {
        padding: 39px 65px 35px;
        background: #fff;
        text-align: center;
        border-radius: 8px;
    }
}

.testmonialMainBgSec {
    padding: 100px 0px 50px;
    @media (max-width: 992px) {
        padding: 40px 0px;
    }

    .destination-details__content {
        position: relative;
        margin-top: 40px;
    }
    .destination-details__content__list {
        margin: 43px 0;
        padding: 0;
        list-style: none;
    }
    .destination-details__content__list li {
        color: #030d17;
        font-size: 18px;
        line-height: 30px;
        font-weight: 600;
        margin-top: 10px;
    }
    .destination-details__content__list li i {
        display: inline-block;
        margin-right: 12px;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .destination-details__image {
        overflow: hidden;
        border-radius: 10px;
        &:hover img {
            transform: scale(1.1);
        }
        img {
            width: 100%;
            transition: 0.4s;
        }
    }
}

.bookPopupMain {
    .modal-content {
        position: relative;
    }
    .modal-header {
        border-bottom: none !important;
    }
    .modal-body {
        padding: 7px;
        background: #f3f4f8;
        border-radius: 15px;
        overflow: hidden;
        .flexPopUpMain {
            display: flex;
            gap: 0px;
            .imgFlexWrapper {
                max-width: 322px;
                @media (max-width: 1199px) {
                    display: none;
                }
                img {
                    border-radius: 0px 0px 122px 0;
                    height: 100%;
                    width: 100%;
                }
            }
            .fieldWrapper {
                .contactUsBgSec {
                    max-width: 520px;
                    margin: 0 auto;
                    border-radius: 32px;
                    padding: 40px 25px;
                    @media (max-width: 1199px) {
                        padding-top: 0px;
                    }

                    h3 {
                        font-size: 25px;
                        margin: 0 0 20px;
                        font-weight: 600;
                        color: var(--primary-color);
                    }
                    label {
                        margin-bottom: 10px;
                    }
                    @media (max-width: 1199px) {
                        max-width: 100%;
                        margin-top: 30px;
                    }

                    @media (max-width: 570px) {
                        padding: 20px;
                    }
                    .commonBtnMain {
                        text-transform: uppercase;
                        &:hover {
                            background: var(--primary-color) !important;
                        }
                        label {
                            margin-bottom: 0px !important;
                            color: #fff !important;
                        }
                    }

                    input {
                        border: 1px solid rgba(254, 254, 254, 0.24);
                        border-radius: 8px;
                        background: #fff !important;
                        font-size: 16px;
                        font-weight: 600;
                        color: var(--primary-color);
                        padding: 0 20px;
                        height: 52px;
                        width: 100%;
                        background: transparent;
                        margin-bottom: 12px;
                        outline: none;
                        box-shadow: none;
                    }
                    textarea {
                        background: #fff !important;
                        border: 1px solid rgba(254, 254, 254, 0.24);
                        border-radius: 8px;
                        font-size: 16px;
                        font-weight: 600;
                        color: var(--primary-color);
                        padding: 10px 20px;
                        outline: none;
                        box-shadow: none;
                        width: 100%;
                        background: transparent;
                        margin-bottom: 12px;
                        resize: none;
                    }
                    button {
                        width: 100%;
                        &:hover {
                            background: #fff;
                        }
                    }
                }
            }
        }
    }
    .btn-close {
        position: absolute;
        right: 14px !important;
        top: 10px !important;
        z-index: 100000;
        opacity: 1;
    }
    .btn-close:focus {
        box-shadow: none;
    }
}

.loyalityBgSecMain {
    padding: 100px 0px;
    @media (max-width: 992px) {
        padding: 40px 0px;
    }

    .flexGridDiv1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 26px;
        @media (max-width: 992px) {
            grid-template-columns: 1fr;
        }
        .companyPalnDeatil {
            width: 100%;
            background: #ececec;
            border-radius: 50px 0px 0px 50px;
            padding: 40px;
            text-align: center;
            display: flex;
            flex-direction: column;
            &:nth-child(2) {
                border-radius: 0px 50px 50px 0px;
            }

            p {
                margin-bottom: 0px;
                font-weight: 700;
                font-size: 20px;
                text-transform: uppercase;
                color: var(--primary-color);
            }
            label {
                font-weight: 900;
                font-size: 70px;
                line-height: 65px;
            }
            a {
                color: var(--primary-color);
                &:hover {
                    color: var(--secondary-color);
                }
            }
        }
    }

    .flexGridDiv2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 26px;
        margin-top: 20px;

        @media (max-width: 992px) {
            flex-direction: column;
            display: block;
        }
        .companyPalnDeatil {
            width: 100%;
            background: #ececec;
            border-radius: 50px;
            padding: 40px;
            text-align: center;
            display: flex;
            flex-direction: column;
            .divgridGutterFlex {
                display: flex;
                justify-content: space-between;
                align-items: center;
                @media (max-width: 992px) {
                    flex-direction: column;
                    gap: 10px;
                }
                button {
                    background: var(--secondary-color);
                    border-radius: 21px;
                    height: 70px;
                    width: 284px;
                    font-size: 29px;
                    color: #fff;
                    border: 1px var(--secondary-color) solid;
                    transition: 0.4s;
                    &:hover {
                        background: var(--secondary-color);
                        border-radius: 21px;

                        font-size: 22px;
                        color: #fff;
                        border: 1px var(--secondary-color) solid;
                        transition: 0.4s;
                    }

                    &:hover {
                        background: var(--primary-color);
                    }
                }
            }

            p {
                margin-bottom: 0px;
                font-weight: 700;
                font-size: 20px;
                text-transform: uppercase;
                color: var(--primary-color);
            }
            label {
                font-weight: 900;
                font-size: 70px;
                line-height: 65px;
            }
            a {
                color: var(--primary-color);
                &:hover {
                    color: var(--secondary-color);
                }
            }
        }
    }
    .mainHeaderAll {
        font-size: 30px;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 20px;
        @media (max-width: 992px) {
            font-size: 25px;
        }
    }
    .memberShipCard {
        background: var(--primary-color);
        max-width: 900px;
        border-radius: 10px;
        position: relative;
        padding: 40px 0px;
        margin-bottom: 40px;
        span {
            background: var(--secondary-color);
            color: #fff;
            text-transform: uppercase;
            font-size: 20px;
            font-weight: 700;
            padding: 4px 21px;
            border-radius: 0px 20px 20px 0;
        }
        .totalspaceMain {
            padding: 30px 50px 0px;
            @media (max-width: 570px) {
                padding: 30px 22px 0px;
            }
            h5 {
                font-size: 30px;
                color: #fff;
                font-weight: 300;
                text-transform: uppercase;
                margin-bottom: 5px;
                @media (max-width: 570px) {
                    font-size: 20px;
                }
                strong {
                    font-weight: 700;
                }
            }

            p {
                color: #fff;
                font-size: 14px;
                font-weight: 300;
                margin-bottom: 0px;
                strong {
                    font-weight: 700;
                }
            }

            ul {
                margin: 0;
                padding: 9px 0 21px;
                display: flex;
                gap: 10px;
                @media (max-width: 570px) {
                    flex-direction: column;
                }

                li {
                    color: #fff;
                    position: relative;
                    border-right: 1px #ddd solid;
                    padding: 0 10px;
                    line-height: 13px;
                    @media (max-width: 570px) {
                        border: none;
                        padding: 0px;
                    }
                    &:first-child {
                        padding-left: 0px;
                    }
                    &:last-child {
                        border-right: none;
                    }
                }
            }

            .viewProfileBtn {
                background: var(--secondary-color);
                display: flex;
                justify-content: center;
                align-items: center;
                vertical-align: middle;
                border: none;
                outline: none !important;
                color: #fff;
                font-size: 13px;
                font-weight: 700;
                text-transform: uppercase;
                position: relative;
                overflow: hidden;
                border-radius: 30px;
                padding: 6px 7px;
                transition: 0.4s;
                display: flex;
                gap: 7px;
                width: 127px;
                &:hover {
                    background: #ba9753a1;
                }
            }
        }
    }
}

.loyalityBgSecMain1 {
    padding: 100px 0px;
    background: var(--primary-color);
    @media (max-width: 992px) {
        padding: 40px 0px;
    }
    .nav-tabs {
        background: #fff;
        max-width: 400px;
        padding: 6px 11px;
        border-radius: 30px;
    }
    .nav-link {
        color: var(--primary-color);
        border: none !important;
        padding: 10px 31px;
        border-radius: 30px !important;
        text-transform: uppercase;
        @media (max-width: 570px) {
            width: 100%;
        }
        &:hover {
            color: var(--primary-color);
        }
    }
    .nav-tabs .nav-link.active {
        background: var(--primary-color);
        color: var(--secondary-color);
        border: none;
        border-radius: 30px;
    }

    .tab-pane {
        p {
            margin: 30px 0 30px;
            color: #fff;
            font-size: 16px;
            line-height: 29px;
        }
        h3 {
            font-size: 20px;
            color: #fff;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .whiteBgSec {
            padding: 20px;
            background: #fff;
            border-radius: 20px;
            max-width: 1000px;
            a {
                color: var(--primary-color);
                font-size: 14px;
                display: block;
                text-align: center;
                &:hover {
                    color: var(--secondary-color);
                }
            }

            .galleryFlexWrapper {
                display: flex;
                gap: 18px;
                margin-bottom: 20px;

                @media (max-width: 1199px) {
                    flex-direction: column;
                }

                .flexGallerDivImg {
                    border-radius: 5px;
                    overflow: hidden;
                    img {
                        width: 100%;
                    }
                }
                .flexGallerDiv {
                    display: flex;
                    flex-direction: column;
                    gap: 18px;
                    .imgwrapper1 {
                        border-radius: 5px;
                        overflow: hidden;
                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}

.loyalityBgSecMain2 {
    padding: 100px 0px;

    background: #d9eaff;
    @media (max-width: 992px) {
        padding: 40px 0px;
    }
    .loyalityCard {
        img {
            width: 100%;
        }
    }

    .loyalityThirdFlex {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;
        @media (max-width: 1199px) {
            flex-direction: column;
        }
    }
    .loyalityThirdFlexContent {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
        h3 {
            font-size: 18px;
            color: var(--secondary-color);
            margin-bottom: 20px;
            font-weight: 700;
            @media (max-width: 1199px) {
                font-size: 17px;
            }
        }
        h5 {
            font-size: 50px;
            color: var(--primary-color);
            margin-bottom: 0px;
            font-weight: 400;

            @media (max-width: 1199px) {
                font-size: 30px;
            }
        }
    }
}

.clientSayBgSec {
    background: #ebebeb;
    padding: 32px 0px 40px;
    @media (max-width: 1199px) {
        padding: 40px 0px;
    }

    .carousel-ourpartner {
        padding: 0 10px;
        height: 99px;
        .owl-nav {
            display: none;
        }
        .owl-dots {
            display: none;
        }
    }
    .testMonialcontent {
        h3 {
            font-size: 30px;

            margin: 0 0 20px;
            font-weight: 300;
            color: #000;
            text-transform: uppercase;
            strong {
                font-weight: 700;
                color: var(--primary-color-header);
            }
            @media (max-width: 992px) {
                font-size: 35px;
                margin-bottom: 20px;
            }

            @media (max-width: 767px) {
                font-size: 25px;
                margin-bottom: 20px;
            }
        }
    }
    .clientWrapperMain {
        background: #fff;
        width: 100%;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        padding: 47px;

        img {
            width: 100%;
        }
    }
}

.footerBgSecMain {
    background: #eceeef;
    padding: 50px 0px 40px;
    position: relative;

    .subScribeDiv {
        h2 {
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 10px;
            font-size: 20px;
        }
        .subscribeLetterMain {
            display: flex;
            gap: 11px;
            padding-bottom: 40px;
            @media (max-width: 767px) {
                flex-direction: column;
            }
            input {
                width: 100%;

                border-radius: 10px;
                color: #5d5a5a;
                font-weight: 400;
                font-size: 14px;
                border: none;
                outline: none;
                padding: 13px 22px;
            }
            button {
                width: 215px;
                border: none;
                background: #65c3f8;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--text-color);
                font-weight: 600;
                font-size: 16px;
                padding: 13px 22px;
                transition: 0.4s;
                @media (max-width: 767px) {
                    width: 100%;
                }
                &:hover {
                    background: var(--text-color);
                    color: #fff;
                }
            }
        }
    }
    @media (max-width: 992px) {
        text-align: center;
        padding: 40px 0px 20px;
    }

    .mobileSpaceMain2 {
        @media (max-width: 992px) {
            margin-bottom: 20px;
        }
    }
    .logoFooter {
        @media (max-width: 992px) {
            margin: 0 auto;
        }
    }

    .footerMainSec2 {
        .socialMediaMain {
            display: flex;
            gap: 10px;
            padding: 0;
            @media (max-width: 992px) {
                justify-content: center;
            }
            li {
                a {
                    border: 0.5px solid #65c3f8;
                    background: #65c3f8;
                    font-size: 18px;
                    color: #000;
                    width: 41px;
                    height: 41px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                    &:hover {
                        background: #000;
                        color: #fff;
                        border: 0.5px solid #000;
                    }
                }
            }
        }
        .contactFooter {
            padding-left: 60px;
            @media (max-width: 992px) {
                padding-left: 15px;
            }
        }

        .footerContent {
            margin: 20px 0 20px;
            color: #000;
            font-size: 16px;
            line-height: 26px;
            font-weight: 400;
            max-width: 406px;

            @media (max-width: 992px) {
                margin: 20px auto 20px;
            }
            @media (max-width: 570px) {
                font-size: 15px;
            }
        }
        .downLoadBtn {
            width: 259px;
            height: 39px;
            border-radius: 10px;
            background: #844d9b;
            color: #fff;
            font-weight: 400;
            font-size: 16px;
            border: 1px #844d9b solid;
            transition: 0.4s;
            &:hover {
                background: transparent;
                color: #844d9b;
            }
        }

        .footerContent1 {
            color: #e3e3e3;
            font-size: 16px;
            line-height: 26px;
            font-weight: 400;
            margin-bottom: 30px;

            text-transform: capitalize;
            @media (max-width: 992px) {
                margin: 0px auto 20px;
                max-width: 465px;
            }
        }
        .commonFooterHeader {
            font-size: 25px;
            color: #000;
            font-weight: 600;
            margin-bottom: 20px;

            text-transform: capitalize;
        }
        .navLinkMain {
            display: flex;
            margin: 0 0 10px;
            padding: 0;
            gap: 10px;
            li {
                border-radius: 10px;
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
        }
    }

    .flexEndFooter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20px;
        border-top: 0.25px solid #2e2e2e3b;
        margin-top: 40px;
        @media (max-width: 992px) {
            margin-top: 0px;
            justify-content: center;
        }
        @media (max-width: 570px) {
            flex-direction: column;
            padding-top: 10px;
        }

        p {
            margin-bottom: 0px;
            color: #000;
            font-size: 16px;
            font-weight: 400;
            @media (max-width: 570px) {
                font-size: 14px;
            }
        }

        ul {
            margin: 0;
            padding: 0;
            display: flex;
            gap: 3px;
            align-items: center;
            li {
                a {
                    font-weight: 300;
                    font-size: 15px;
                    color: #fff;
                    padding: 0 10px;
                    &:hover {
                        color: var(--primary-color);
                    }
                    &:last-child {
                        padding-right: 0px;
                    }
                }
            }
        }
    }
}

.componyLogoSlider {
    background: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .patternBGsec {
        position: absolute;
        right: 0;
        top: -126px;
        width: 100%;
        @media (max-width: 1199px) {
            display: none;
        }
    }
    @media (max-width: 1199px) {
        padding-top: 89px;
        padding-bottom: 50px;
        height: 100%;
    }
    @media (max-width: 992px) {
        height: 100%;
    }

    .flexBannerMainDiv {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100vh;
        @media (max-width: 1199px) {
            flex-direction: column;
            height: 100%;
        }
        @media (max-width: 767px) {
            gap: 40px;
        }
        .bannerContent {
            width: 100%;
            @media (max-width: 992px) {
                text-align: center;
            }
            h3 {
                font-size: 50px;
                font-weight: 700;
                text-transform: capitalize;
                color: #fff;
                margin-bottom: 20px;
                color: var(--text-color);
                max-width: 704px;
                @media (max-width: 767px) {
                    font-size: 34px;
                    max-width: 380px;
                    margin: 0 auto 10px;
                }
                @media (max-width: 570px) {
                    font-size: 28px;
                }

                span {
                    display: block;
                    font-weight: 700;
                }
            }

            p {
                font-weight: 400;
                font-size: 21px;
                color: var(--text-color);
                line-height: 30px;
                margin-bottom: 30px;
                @media (max-width: 767px) {
                    font-size: 15px;
                    margin-bottom: 15px;
                    line-height: 24px;
                }
            }
            button {
                background: var(--primary-color);
                border: none;
                font-weight: 500;
                font-size: 16px;

                color: var(--text-color);
                display: flex;
                justify-content: center;
                align-items: center;
                text-transform: capitalize;
                padding: 12px 16px;
                width: 282px;
                border-radius: 24px;
                transition: 0.4s;
                position: relative;
                z-index: 1000;
                @media (max-width: 992px) {
                    width: 224px;
                    font-size: 14px;
                    margin: 0 auto;
                }
                cursor: pointer;
                &:hover {
                    background: var(--text-color);
                    color: #fff;
                }
            }
        }
        .bannerImg {
            width: 100%;
            text-align: right;
            padding-right: 196px;
            margin-top: -116px;
            @media (max-width: 1199px) {
                text-align: left;
                margin-top: 0px;
                padding-right: 0px;
                display: none;
            }
            img {
                width: 439px;
                @media (max-width: 767px) {
                    width: 100%;
                }
            }
        }
    }
}

header {
    @media (max-width: 1200px) {
        padding: 0px 20px;
    }
}

.fleMainHedaer {
    display: flex;
    justify-content: space-between;
}

.headerMainFlex {
    position: fixed;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    padding: 20px 0px;
    left: 0;
    top: 0;
    transition: 0.4s;

    @media (max-width: 767px) {
        padding: 6px 0px;
    }

    .becomeParter {
        border-radius: 24px;
        width: 158px;

        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
        background: var(--primary-color-header);
        border: 1px var(--primary-color-header) solid;
        text-transform: capitalize;
        transition: 0.4s;
        padding: 9px 0px;
        &:hover {
            background: var(--primary-color);
            color: #fff;
        }

        @media (max-width: 1200px) {
            display: none;
        }
    }

    .requestSupplyBtn {
        border-radius: 24px;
        width: 158px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--text-color);
        font-weight: 500;
        font-size: 14px;
        background: transparent;
        border: 1px var(--text-color) solid;
        text-transform: capitalize;
        transition: 0.4s;
        padding: 9px 0px;
        &:hover {
            background: var(--primary-color);
            color: #fff;
            border: 1px var(--primary-color) solid;
        }

        @media (max-width: 1200px) {
            display: none;
        }
    }
    ul {
        margin: 0;
        padding: 0;
        display: flex;
        gap: 3px;
        align-items: center;
        @media (max-width: 1200px) {
            display: none;
        }
        li {
            padding: 0px 20px;
        }
        a {
            font-weight: 400;
            font-size: 16px;
            color: #000;

            text-transform: capitalize;
            position: relative;
            &:hover::before {
                width: 100%;
            }
            &::before {
                position: absolute;
                left: 0;
                width: 0px;
                height: 1px;
                content: "";
                bottom: 0;
                background: #1f3b64;
                transition: 0.4s;
            }
            &:hover {
                color: #1f3b64;
            }
        }
    }
}

header.sticky {
    background: #fff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2509803922);
    z-index: 1000;
    padding: 10px 0px;
    transition: 0.4s;
}
.flexMainCustomer {
    display: flex;
    gap: 12px;
    align-items: center;
    @media (max-width: 570px) {
        display: none;
    }
    span {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #ba9753;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        i {
            color: #fff;
        }
    }
    h3 {
        font-weight: 400;
        display: block;
        font-size: 13px;
        color: #566879;
        margin-bottom: 3px;
    }
    p {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
        color: #030d17;

        text-align: left;
        margin-bottom: 0px;
    }
}

.serviceProviderBg {
    padding: 70px 0px;
    background: var(--primary-color);
    text-align: center;
    @media (max-width: 1199px) {
        padding: 40px 0px;
    }
    p {
        line-height: 27px;
        max-width: 850px;
        margin: 0 auto 40px;
        font-size: 18px;
        color: var(--text-color);
        font-weight: 600;
        @media (max-width: 1199px) {
            font-size: 16px;
            margin-bottom: 20px;
        }
        &:last-child {
            margin-bottom: 0px;
        }
    }
    span {
        font-weight: 600;
        display: block;
        font-size: 20px;
        color: var(--text-color);
        margin-bottom: 10px;
        @media (max-width: 1199px) {
            font-size: 15px;
        }
    }
    .serviceProviderMaxWidth {
        background: #fff;
        border-radius: 18px;

        padding: 35px;
        margin-bottom: 40px;
        @media (max-width: 1199px) {
            margin-bottom: 20px;
        }
        @media (max-width: 570px) {
            padding: 10px;
        }
    }
    h3 {
        color: var(--text-color);
        font-weight: 700;
        font-size: 40px;
        text-transform: capitalize;
        margin-bottom: 30px;
        max-width: 561px;
        margin: 0 auto 30px;
        @media (max-width: 1199px) {
            font-size: 35px;
            margin-bottom: 20px;
        }
        @media (max-width: 570px) {
            font-size: 28px;
        }
    }

    .displexMainAbout {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 10px;
        @media (max-width: 1199px) {
            grid-template-columns: 1fr;
        }
        .displayImgWrapperMain {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .displayImgWrapperMainAll {
                display: flex;
                gap: 10px;
                justify-content: space-between;
            }
            .imgDiv1 {
                overflow: hidden;
                width: 100%;
                border-radius: 12px;
                overflow: hidden;
                transition: 0.4s;

                img {
                    width: 100%;
                    transition: 0.4s;
                    &:hover {
                        transform: scale(1.1);
                    }
                }
            }
            .imgDiv2 {
                overflow: hidden;
                width: 100%;
                border-radius: 12px;
                overflow: hidden;
                transition: 0.4s;

                img {
                    width: 100%;
                    transition: 0.4s;
                    &:hover {
                        transform: scale(1.1);
                    }
                }
            }

            .imgDiv3 {
                overflow: hidden;
                width: 100%;
                border-radius: 12px;
                overflow: hidden;
                transition: 0.4s;

                img {
                    width: 100%;
                    transition: 0.4s;
                    &:hover {
                        transform: scale(1.1);
                    }
                }
            }
            .imgDiv4 {
                overflow: hidden;
                width: 100%;
                border-radius: 12px;
                overflow: hidden;
                transition: 0.4s;

                img {
                    width: 100%;
                    transition: 0.4s;
                    &:hover {
                        transform: scale(1.1);
                    }
                }
            }
        }
        .aboutContentAll {
            .textContentSec {
                background: #fff5fe;
                padding: 50px 50px 127px 50px;
                border-radius: 20px;
                @media (max-width: 1199px) {
                    padding: 25px 15px 60px 31px;
                }
                p {
                    font-weight: 400;
                    font-size: 26px;
                    line-height: 43px;
                    margin-bottom: 0px;
                    color: #303030;
                    @media (max-width: 1199px) {
                        font-size: 20px;
                        line-height: 31px;
                    }
                    @media (max-width: 767px) {
                        font-size: 17px;
                    }
                }
            }

            img {
                margin-top: -81px;
                @media (max-width: 767px) {
                    margin-top: -58px;
                }
            }
        }
    }
}

.howItWorkMainAll {
    background: linear-gradient(180deg, #844d9b 46.15%, #ae5ca4 100%);
    padding: 50px 0px;
    .marginSpaceAll {
        @media (max-width: 1199px) {
            margin-bottom: 15px;
        }
    }
    h3 {
        text-align: center;
        font-weight: 300;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: 35px;
        font-size: 35px;
        @media (max-width: 767px) {
            font-size: 25px;
            margin-bottom: 20px;
        }
        span {
            display: block;
            font-weight: 700;
        }
    }
    .whiteBoxWrapper {
        background: #fff;
        text-align: center;
        box-shadow: 0px 18px 36px -18px #0000004d;
        height: 100%;
        box-shadow: 0px 30px 60px -12px #32325d40;
        border-radius: 10px;
        padding: 30px;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        p {
            color: #000;
            font-size: 14px;
            font-weight: 400;
            margin-bottom: 0px;
        }
    }
}
.reviewsBgScroll {
    @media (max-width: 1199px) {
        padding: 0px 20px;
    }
    .owl-dots {
        display: none;
    }
}
.reviewBgSecMainAll {
    background: #ebebeb;
    padding: 50px 0px;
    @media (max-width: 992px) {
        padding: 40px 0px;
    }
    h3 {
        text-align: center;
        font-weight: 300;
        text-transform: uppercase;
        color: #242323;
        margin-bottom: 35px;
        font-size: 35px;
        @media (max-width: 767px) {
            font-size: 25px;
            margin-bottom: 20px;
        }
        span {
            display: block;
            font-weight: 700;
        }
    }

    .reviewBoxWrapper {
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        p {
            line-height: 26px;
            font-size: 16px;
            font-weight: 300;
            color: #000000;
            margin-bottom: 0px;
            margin-top: 20px;
        }
        .profileIconwrapper {
            display: flex;
            gap: 13px;
            .profileIconImg {
                overflow: hidden;
            }
            .profileIconContent {
                span {
                    color: #000000;
                    font-size: 19px;
                    font-weight: 500;
                    margin-bottom: 0px;
                    display: block;
                }

                p {
                    color: #000000;
                    font-size: 16px;
                    font-weight: 300;
                    margin-bottom: 0px;
                    margin-top: 0px !important;
                }

                ul {
                    margin: 0;
                    padding: 0;
                    display: flex;
                    gap: 2px;
                }
            }
        }
    }
}

.downLoadSecMainAll {
    background: #fff;
    position: relative;
    padding: 30px 0px;

    .rowSpaceMain {
        margin-bottom: 40px;
    }
    .contactUsBgSec {
        background: linear-gradient(90deg, #844d9b 0%, #ae5ca4 100%);
        border-radius: 21px;
        padding: 30px 459px 40px 30px;
        position: relative;
        @media (max-width: 1199px) {
            padding: 30px;
        }

        .imgPos {
            position: absolute;
            top: -44px;
            right: -110px;
            @media (max-width: 1199px) {
                display: none;
            }
        }
        p {
            font-weight: 400;
            font-size: 20px;
            line-height: 32px;
            color: #fff;
            text-transform: capitalize;
            margin-bottom: 0px;
        }
        h3 {
            font-weight: 700;
            font-size: 22px;

            color: #fff;
            text-transform: capitalize;
            margin-bottom: 50px;
            margin-top: 40px;
        }
        button {
            background: transparent;
            border: 1px solid #b8b8b8;
            font-weight: 400;
            font-size: 18px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            text-transform: uppercase;
            height: 55px;
            width: 232px;
            border-radius: 14px;
            transition: 0.4s;
            &:hover {
                background: var(--primary-color);
            }
        }
    }
    h3 {
        font-weight: 300;
        text-transform: uppercase;
        color: #242323;
        margin-bottom: 35px;
        font-size: 35px;
        @media (max-width: 767px) {
            font-size: 25px;
            margin-bottom: 20px;
        }
        span {
            display: block;
            font-weight: 700;
        }
    }
    .pinkBoxWrapper {
        background: #844d9b;
        border-radius: 10px;
        padding: 40px 40px 0px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        @media (max-width: 767px) {
            padding: 20px 20px 0px;
        }
        h4 {
            font-size: 30px;
            font-weight: 300;
            margin-bottom: 20px;
            color: #fff;
            text-align: right;
            text-transform: uppercase;
            @media (max-width: 767px) {
                font-size: 25px;
            }
            span {
                font-weight: 700;
                display: block;
            }
        }
        ul {
            margin: 0;
            padding: 0;
            li {
                text-align: right;
                border-bottom: 1px #ffffff40 solid;
                font-size: 16px;
                text-transform: uppercase;
                font-weight: 400;
                padding-bottom: 14px;
                margin-bottom: 14px;
                color: #fff;
                @media (max-width: 767px) {
                    font-size: 14px;
                }
                &:last-child {
                    border-bottom: none;
                    padding-bottom: 0px;
                    margin-bottom: 0px;
                }
            }
        }
    }

    .pinkLightBoxWrapper {
        background: #fdf3fc;
        border-radius: 10px;
        padding: 40px 40px 0px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        @media (max-width: 1199px) {
            margin-top: 20px;
        }
        @media (max-width: 767px) {
            padding: 20px 20px 0px;
        }
        .flexQr {
            display: flex;
            gap: 0px;
            justify-content: space-between;

            @media (max-width: 767px) {
                flex-direction: column;
            }
            img {
                width: 100%;
            }
        }
        h4 {
            font-size: 30px;
            font-weight: 300;
            margin-bottom: 20px;
            color: #470663;
            text-align: left;
            text-transform: uppercase;
            @media (max-width: 767px) {
                font-size: 25px;
            }
            span {
                font-weight: 700;
                display: block;
            }
        }

        p {
            font-size: 16px;
            font-weight: 400;
            line-height: 28px;
            color: #000;
            margin-bottom: 20px;
            @media (max-width: 767px) {
                font-size: 14px;
            }
        }

        button {
            background: #844d9b;
            border: 1px solid #844d9b;
            font-weight: 400;
            font-size: 18px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            text-transform: uppercase;
            height: 55px;
            width: 232px;
            border-radius: 14px;
            transition: 0.4s;
            @media (max-width: 767px) {
                font-size: 14px;
                width: 100%;
            }
            &:hover {
                background: var(--primary-color);
            }
        }
    }
}

.subBannerSec {
    height: auto !important;
    margin-bottom: -59px;

    .flexBannerMainDiv {
        height: auto !important;
        padding-top: 114px;
        @media (max-width: 992px) {
            padding-top: 0px;
        }
    }
}
.contactUsBgSec {
    padding: 100px 0px;
    @media (max-width: 992px) {
        padding: 60px 0px 60px;
    }

    h3 {
        font-size: 35px;
        color: #844d9b;
        font-weight: 600;
        margin-bottom: 20px;
        text-transform: uppercase;
        @media (max-width: 992px) {
            font-size: 25px;
        }
    }
    label {
        margin-bottom: 10px;
    }
    @media (max-width: 1199px) {
        max-width: 100%;
        margin-top: 30px;
    }

    .commonBtnMain {
        text-transform: uppercase;
        margin-top: 35px;
        padding: 15px 18px;
        &:hover {
            background: var(--primary-color) !important;
        }
        label {
            margin-bottom: 0px !important;
            color: #fff !important;
        }
    }
    .commonBtnMain {
        background: #844d9b;
        border: 1px solid #b8b8b8;
        font-weight: 400;
        font-size: 18px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        height: 55px;
        width: 300px;
        border-radius: 14px;
        transition: 0.4s;
        float: right;
    }
    .docFileHeader {
        font-size: 15px;
        text-transform: uppercase;
        font-weight: 500;
        color: #000000;
        margin-top: 10px;
        margin-bottom: 13px;
    }
    .noteContent {
        font-size: 15px;
        font-weight: 300;
        margin-bottom: 20px;
        color: #000;
    }
    .file-upload-box {
        width: 100%;
        border-radius: 10px;
        background: #ebebeb !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 58px;
        cursor: pointer;
        transition: 0.3s ease;
        margin-bottom: 20px;

        .file-upload-box:hover {
            background-color: #e5e5e5;
        }

        .file-label {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            font-size: 15px;
            color: #000;
            font-weight: 300;
            margin-bottom: 0px;
        }

        .file-label i {
            font-size: 16px;
            color: #333;
        }
    }
    input {
        border: none;
        border-radius: 10px;
        background: #ebebeb !important;
        font-size: 15px;
        font-weight: 300;
        color: #000;
        padding: 0 20px;
        height: 58px;
        width: 100%;
        background: transparent;
        margin-bottom: 20px;
        outline: none;
        box-shadow: none;
    }

    select {
        border: none;
        border-radius: 8px;
        background: #ebebeb !important;
        font-size: 16px;
        font-weight: 600;
        color: var(--primary-color);
        padding: 0 20px;
        height: 52px;
        width: 100%;

        margin-bottom: 20px;
        outline: none;
        box-shadow: none;
    }
    textarea {
        background: #ebebeb !important;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        color: var(--primary-color);
        padding: 10px 20px;
        outline: none;
        box-shadow: none;
        width: 100%;
        background: transparent;
        margin-bottom: 20px;
        resize: none;
    }
    button {
        width: 100%;
        &:hover {
            background: #fff;
        }
    }
}

.patternBottombanner {
    position: absolute;
    bottom: -162px;
    left: 69px;
    width: 590px;

    @media (max-width: 1199px) {
        display: none;
    }
}

.patternBottomSevice {
    margin-top: -251px;
    @media (max-width: 1199px) {
        display: none;
    }
}

.clientSlider {
    img {
        width: auto !important;
        padding: 10px;
    }
}

.ourProductsBgSec {
    padding-bottom: 30px;
    @media (max-width: 1199px) {
        padding: 40px 0px;
    }
    h3 {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        color: var(--text-color);
        font-family: var(--secondary-font) !important;
        margin-top: -61px;
        margin-bottom: 60px;
        @media (max-width: 1199px) {
            margin-top: 0px;
            font-size: 15px;
            margin-bottom: 20px;
        }
        span {
            color: var(--text-color);
            font-weight: 700;
            font-size: 40px;
            text-transform: capitalize;
            margin-bottom: 30px;
            max-width: 561px;
            margin: 4px auto 0px;
            display: block;
            @media (max-width: 1199px) {
                font-size: 35px;
            }
            @media (max-width: 570px) {
                font-size: 28px;
            }
        }
    }
    .productTxtMain {
        padding-top: 13px;
        .buttonEndMain {
            display: flex;
            justify-content: end;
            width: 100%;
        }
        h2 {
            color: #1f3b64;
            font-size: 25px;
            font-weight: 500;
            text-transform: capitalize;
            margin-bottom: 7px;
            @media (max-width: 767px) {
                font-size: 18px;
            }
        }

        p {
            color: #5a5959;
            font-size: 16px;
            font-weight: 400;
            line-height: 27px;
            margin-bottom: 20px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            @media (max-width: 767px) {
                font-size: 15px;
            }
        }

        a {
            background: #65c3f780;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.4s;
            &:hover {
                background: var(--primary-color);
            }
            &:hover span {
                background: #65c3f780;
            }
            span {
                background: var(--primary-color);
                width: 46px;
                height: 46px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: 0.4s;
            }
        }
    }

    .ourProductBorderMain {
        border: 0.25px solid #000000;
        border-radius: 23px;
        padding: 15px;
        box-shadow: 0px 25px 20px -29px #00000073;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &:hover .imgWrapperProduct img {
            transform: scale(1.1);
        }
        .imgWrapperProduct {
            border-radius: 16px;
            overflow: hidden;
            height: 220px;
            background: #f5f7fa;
            display: flex;
            align-items: center;
            justify-content: center;
            @media (max-width: 992px) {
                height: 180px;
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                padding: 8px;
                transition: 0.4s;
            }
        }
    }
}
.patternTopMainall1 {
    margin-top: -100px;
}

.checkOutBgSec {
    background: var(--primary-color);
    position: relative;
    z-index: 100;
    @media (max-width: 1199px) {
        padding: 40px 0px;
    }
    &::before {
        position: absolute;
        left: 0;
        top: 17%;
        content: "";
        width: 600px;
        /* background: url(../img/alpha-icon-pattern1.png) no-repeat; */
        height: 100%;
        @media (max-width: 1199px) {
            display: none;
        }
    }

    &::after {
        position: absolute;
        right: 0;
        top: -50px;
        content: "";
        width: 600px;
        /* background: url(../img/alpha-icon-pattern1.png) no-repeat; */
        height: 100%;
        z-index: -1;
        @media (max-width: 1199px) {
            display: none;
        }
    }
    h3 {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        color: var(--text-color);
        font-family: var(--secondary-font) !important;
        margin-top: -60px;
        margin-bottom: 60px;
        @media (max-width: 1199px) {
            margin-top: 0px;
            margin-bottom: 30px;
            font-size: 15px;
        }
        span {
            color: var(--text-color);
            font-weight: 700;
            font-size: 40px;
            text-transform: capitalize;
            margin-bottom: 30px;
            max-width: 561px;
            margin: 4px auto 0px;
            display: block;
            @media (max-width: 1199px) {
                font-size: 35px;
            }
            @media (max-width: 570px) {
                font-size: 28px;
            }
        }
    }
    .displayGridMainCheckout {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: space-between;
        gap: 50px;
        @media (max-width: 767px) {
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        .iconWrappermainflex {
            display: flex;
            flex-direction: column;
            gap: 18px;
            &:hover .iconWrapper img {
                transform: scale(1.1);
            }
            .iconWrapper {
                width: 139px;
                height: 139px;
                border-radius: 50%;
                box-shadow: 0px 30px 60px -30px #0000004d;

                box-shadow: 0px 50px 100px -20px #32325d40;
                background: #a5deff;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
                @media (max-width: 767px) {
                    width: 90px;
                    height: 90px;
                }
                img {
                    transition: 0.4s;
                    @media (max-width: 767px) {
                        width: 50px;
                    }
                }
            }

            p {
                font-size: 20px;
                font-weight: 600;
                color: var(--text-color);
                text-align: center;
                margin-bottom: 0px;

                @media (max-width: 992px) {
                    font-size: 17px;
                }

                @media (max-width: 767px) {
                    font-size: 15px;
                }
            }
        }
    }
}

.checkoutPattern {
    @media (max-width: 1199px) {
        display: none;
    }
}
.patternTopMainall1 {
    @media (max-width: 1199px) {
        display: none;
    }
}

.ourCertificatesBgSec {
    padding-bottom: 80px;
    @media (max-width: 1199px) {
        padding: 40px 0px;
    }
    h3 {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        color: var(--text-color);
        font-family: var(--secondary-font) !important;
        margin-top: -81px;
        margin-bottom: 30px;
        @media (max-width: 1199px) {
            margin-top: 0px;
            font-size: 15px;
            margin-bottom: 20px;
        }
        span {
            color: var(--text-color);
            font-weight: 700;
            font-size: 40px;
            text-transform: capitalize;
            margin-bottom: 30px;
            max-width: 561px;
            margin: 4px auto 0px;
            display: block;
            @media (max-width: 1199px) {
                font-size: 35px;
            }
            @media (max-width: 570px) {
                font-size: 28px;
            }
        }
    }

    .gridCertificateMain {
        display: grid;
        grid-template-columns: 1fr 1px 1fr;
        gap: 40px;

        @media (max-width: 992px) {
            grid-template-columns: 1fr;
            gap: 20px;
        }
        .certificatesDiv {
            text-align: center;
            label {
                display: block;
                color: #3496cd;
                font-size: 20px;
                margin-bottom: 10px;
                margin-top: 10px;
                font-weight: 600;
            }

            p {
                font-size: 16px;
                color: var(--text-color);
                font-weight: 400;
                line-height: 27px;
                margin-bottom: 0px;
            }
        }
        .divider {
            width: 1px;
            height: 100%;
            background: #cfcfcf;
            justify-self: center;
            @media (max-width: 992px) {
                width: 100%;
                height: 1px;
            }
        }
    }
}

.footerPattern {
    position: absolute;
    margin-left: -394px;
    left: 50%;
    top: 19%;
}

.contact-list {
    margin: 0;
    padding: 0;
    li {
        display: flex;
        align-items: start;
        border-bottom: 0.25px solid #2e2e2e3b;
        gap: 16px;
        padding: 14px 0px;
        &:first-child {
            padding-top: 0px;
        }
        &:last-child {
            border-bottom: none;
            padding-bottom: 0px;
        }

        p {
            color: #000;
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 0px;
            display: flex;

            @media (max-width: 570px) {
                font-size: 14px;
                text-align: left;
            }
        }
    }
}

.flexMainCustomerMobile {
    display: flex;
    gap: 10px;
    .requestSupplyBtn {
        border-radius: 24px;
        width: 158px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--text-color);
        font-weight: 500;
        font-size: 14px;
        background: transparent;
        border: 1px var(--text-color) solid;
        text-transform: capitalize;
        transition: 0.4s;
        padding: 9px 0px;
    }
    .becomeParter {
        border-radius: 24px;
        width: 158px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
        background: var(--primary-color-header);
        border: 1px var(--primary-color-header) solid;
        text-transform: capitalize;
        transition: 0.4s;
        padding: 9px 0px;
    }
}

.subpageCommonDiv {
    padding-top: 151px;
    overflow: hidden;
    position: relative;
    @media (max-width: 1199px) {
        padding-top: 90px;
    }

    .productWrapperMax {
        max-width: 700px;
        margin: 0 auto 50px;
        text-align: center;
        @media (max-width: 767px) {
            margin-bottom: 20px;
        }
        span {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-color);
            @media (max-width: 767px) {
                font-size: 16px;
            }
        }
        h3 {
            color: var(--text-color);
            font-weight: 700;
            font-size: 40px;
            text-transform: capitalize;
            @media (max-width: 767px) {
                font-size: 28px;
            }
        }
        p {
            font-size: 16px;
            line-height: 27px;
            font-weight: 400;
            margin-bottom: 0px;
            color: var(--text-color);
            max-width: 600px;
            margin: 0 auto;
            @media (max-width: 767px) {
                font-size: 14px;
            }
        }
    }

    .subPagePattern {
        position: absolute;
        top: 0;
        right: -61px;
        @media (max-width: 1199px) {
            display: none;
        }
    }
    .subPagePatternTop {
        width: 500px;
        margin-top: -167px;
        z-index: -1;
        position: relative;
        @media (max-width: 1199px) {
            display: none;
        }
    }
    .flexBannerMainDiv {
        display: flex;
        justify-content: space-between;
        align-items: center;
        @media (max-width: 1199px) {
            flex-direction: column;
            margin-bottom: 50px;
        }

        .bannerContent {
            width: 50%;
            @media (max-width: 1199px) {
                width: 100%;
                text-align: center;
            }
            h3 {
                font-size: 60px;
                font-weight: 700;
                text-transform: capitalize;
                color: #fff;
                margin-bottom: 20px;
                color: var(--text-color);

                @media (max-width: 1199px) {
                    margin: 0 auto 20px;
                }
                @media (max-width: 767px) {
                    font-size: 35px;
                    margin-bottom: 10px;
                }
                @media (max-width: 767px) {
                    font-size: 28px;
                    margin-bottom: 10px;
                }
            }
            p {
                font-weight: 400;
                font-size: 21px;
                color: var(--text-color);
                line-height: 30px;
                margin-bottom: 30px;
                @media (max-width: 767px) {
                    font-size: 17px;
                }
            }
        }

        .bannerImg {
            position: relative;
            top: -53px;
            right: 0px;
            border-radius: 50%;
            overflow: hidden;
            width: 433px;
            @media (max-width: 767px) {
                width: 100%;
            }
            img {
                width: 100%;
            }
            @media (max-width: 1199px) {
                top: 0px;
            }
        }
    }
}

.aboutWrapperGrid {
    display: flex;
    gap: 30px;
    align-items: center;
    @media (max-width: 1199px) {
        flex-direction: column;
    }
    .borderImgmain1 {
        max-width: 459px;
        border: 0.25px solid #79797945;
        border-radius: 29px;
        overflow: hidden;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 22px;
    }

    .subPageAboytTxt {
        padding-right: 113px;
        @media (max-width: 1199px) {
            text-align: center;
            padding-right: 0px;
        }
        label {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 7px;
            display: block;
            font-family: var(--secondary-font);
            @media (max-width: 767px) {
                font-size: 16px;
            }
        }
        h3 {
            font-size: 40px;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 7px;
            display: block;
            @media (max-width: 767px) {
                font-size: 34px;
            }
            @media (max-width: 570px) {
                font-size: 28px;
            }
        }
        p {
            line-height: 27px;
            font-size: 16px;
            color: var(--text-color);
            font-weight: 400;
            margin-bottom: 0px;
            @media (max-width: 767px) {
                font-size: 14px;
            }
        }
    }
}

.ourcapabiltiesBgSec {
    padding-bottom: 80px;
    @media (max-width: 1199px) {
        padding-bottom: 40px;
    }
    &::before {
        left: -118px !important;
        top: 49% !important;
    }
    &::after {
        top: -246px !important;
    }
    h3 {
        margin-top: -120px !important;
        @media (max-width: 992px) {
            margin-top: -90px !important;
        }
        @media (max-width: 570px) {
            margin-top: -40px !important;
        }
    }
    .displayGridMainCap {
        display: grid;
        grid-template-columns: 1fr 131px 1fr;
        border-bottom: 1px #0000005e solid;
        @media (max-width: 1199px) {
            grid-template-columns: 1fr;
            border-bottom: none;
        }
        &:first-child {
            .iconWrappermainflex {
                margin-top: 0px;
            }
        }

        &:last-child {
            border-bottom: none;
            .iconWrappermainflex {
                margin-bottom: 0px;
                @media (max-width: 1199px) {
                    margin-bottom: 30px !important;
                }
            }
        }
        .iconWrappermainflex {
            display: flex;

            gap: 25px;
            margin-bottom: 30px;
            margin-top: 30px;
            @media (max-width: 1199px) {
                align-items: center;
                border-bottom: 1px #0000005e solid;
                padding-bottom: 30px;
                margin-top: 0px;
            }
            @media (max-width: 570px) {
                flex-direction: column;
            }
            &:hover .iconWrapper img {
                transform: scale(1.1);
            }
            .iconWrapper {
                width: 122px;
                height: 122px;
                border-radius: 50%;
                box-shadow: 0px 30px 60px -30px #0000004d;

                box-shadow: 0px 50px 100px -20px #32325d40;
                background: #a5deff;
                display: flex;
                align-items: center;
                justify-content: center;

                @media (max-width: 767px) {
                    width: 90px;
                    height: 90px;
                }
                img {
                    transition: 0.4s;
                    width: 62px;
                    @media (max-width: 767px) {
                        width: 50px;
                    }
                }
            }
            .maxWidthTxtCap {
                max-width: 441px;
                @media (max-width: 1199px) {
                    max-width: 100%;
                }
                @media (max-width: 570px) {
                    text-align: center;
                }
            }

            h2 {
                font-size: 20px;
                font-weight: 600;
                color: var(--text-color);

                margin-bottom: 12px;

                @media (max-width: 992px) {
                    font-size: 17px;
                }

                @media (max-width: 767px) {
                    font-size: 15px;
                }
            }

            p {
                line-height: 27px;
                font-size: 16px;
                color: var(--text-color);
                font-weight: 400;
                margin-bottom: 0px;
                @media (max-width: 767px) {
                    font-size: 15px;
                }
            }
        }
    }
    .divider {
        width: 1px;
        height: 100%;
        background: #0000005e;
        justify-self: center;
        @media (max-width: 1199px) {
            width: 100%;
            height: 1px;
            display: none;
        }
    }
}

.productListBgSec {
    padding-bottom: 50px;
    .productStickyFlex {
        display: flex;
        gap: 28px;
        @media (max-width: 1199px) {
            flex-direction: column;
        }
        .productSideNav {
            background: var(--primary-color);
            padding: 30px;
            width: 656px;
            border-radius: 14px;
            max-height: 500px;
            position: sticky;
            top: 74px;
            @media (max-width: 1199px) {
                width: 100%;
                position: static;
            }
            @media (max-width: 767px) {
                padding: 20px;
            }

            h4 {
                color: var(--text-color);
                font-size: 18px;
                font-weight: 600;
                border-bottom: 1px #00000030 solid;
                padding-bottom: 6px;
                margin-bottom: 0px;
            }
            ul {
                margin: 0;
                padding: 0;
                overflow: auto;
                max-height: 407px;
                padding-right: 9px;
                li {
                    border-bottom: 1px #00000030 solid;
                    padding: 7px 0px;
                    &:last-child {
                        border-bottom: none;
                    }
                    a {
                        display: block;
                        color: var(--text-color);
                        font-size: 14px;
                        font-weight: 500;
                        border-radius: 10px;
                        padding: 10px 10px;
                        &:hover {
                            background: #a5deff;
                        }
                    }
                    .activeMain {
                        background: #a5deff;
                        padding: 10px 10px;
                    }
                }
            }
        }
        .productTxtDiv {
            p {
                line-height: 27px;
                font-size: 16px;
                color: var(--text-color);
                font-weight: 400;
                margin-bottom: 20px;
                @media (max-width: 767px) {
                    font-size: 15px;
                }
            }
            .productListDivGrid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 18px;
                align-items: stretch; /* Ensures all items in a row have equal height */
            }

            .productBorder {
                height: 100%;
                display: flex;
                flex-direction: column;
                /* This centers the image wrapper and other blocks horizontally */
                align-items: center;
                /* This centers the actual text lines inside the <p> tags */
                text-align: center;
                padding: 15px;
                border: 1px solid #ddd;
                border-radius: 8px;
                background: #fff;
                transition: transform 0.2s;
            }

            .productBorder:hover {
                transform: translateY(-5px);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            }

            .productBorder p {
                /* Ensures the paragraph takes full width so text-align works */
                width: 100%;
                margin-left: auto;
                margin-right: auto;
            }

            /* Specific styling for the Name */
            .productBorder p:first-of-type {
                font-weight: bold;
                font-size: 1.1rem;
                margin-top: 10px;
                margin-bottom: 5px;
            }

            /* Specific styling for the Description */
            .productBorder p:last-of-type {
                color: #666;
                font-size: 0.9rem;
                line-height: 1.4;
            }

            .produtImgWrapper {
                height: 180px; /* Fixed height for the image area */
                display: flex;
                align-items: center; /* Vertical center image */
                justify-content: center; /* Horizontal center image */
                margin-bottom: 15px;
            }

            .produtImgWrapper img {
                max-height: 100%;
                max-width: 100%;
                object-fit: contain; /* Prevents stretching medical product icons */
            }

            /* Align text consistently */
            .productBorder p:first-of-type {
                font-weight: bold;
                margin-bottom: 8px;
                min-height: 3em; /* Ensures title takes up same space even if 1 line */
            }

            .productBorder p:last-of-type {
                color: #666;
                font-size: 0.9em;
                flex-grow: 1; /* Pushes the card content to stay uniform */
            }

            @media (max-width: 767px) {
                .productListDivGrid {
                    grid-template-columns: 1fr;
                }
            }
        }
    }
}

.ulNavPagination {
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    gap: 10px;
    justify-content: end;
    li {
        a {
            background: #d9d9d9;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 9px;
            color: #000;
            font-weight: 400;
            font-size: 16px;
            transition: 0.4s;
            &:hover {
                background: var(--primary-color);
            }
        }
    }

    .nextBtn {
        width: 136px !important;
    }
}

.backToProducts {
    margin-top: -95px;
    @media (max-width: 1199px) {
        margin-top: 0px;
    }
    a {
        display: flex;
        gap: 10px;
        align-items: center;
        color: var(--text-color);
        font-weight: 400;
        font-size: 16px;
        margin-bottom: 40px;
        @media (max-width: 570px) {
            margin-bottom: 20px;
        }
        &:hover {
            color: var(--primary-color);
        }
        svg {
            width: 24px;
        }
    }
    span {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 9px;
        display: block;
        @media (max-width: 570px) {
            font-size: 16px;
        }
    }

    h3 {
        font-size: 40px;
        font-weight: 700;
        color: var(--text-color);
        margin-bottom: 36px;
        @media (max-width: 767px) {
            font-size: 35px;
            margin-bottom: 20px;
        }
        @media (max-width: 570px) {
            font-size: 28px;
        }
    }
}
.offcanvas-header {
    background: #fff !important;
}
.productFlexGrid {
    display: flex;
    gap: 20px;
    padding-bottom: 57px;
    @media (max-width: 1199px) {
        flex-direction: column;
        padding-bottom: 20px;
    }
    .imgWrapperProductDeatil {
        border: 0.25px solid #79797945;
        border-radius: 18px;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 100%;
        }
    }
    .productDeatiltxt {
        width: 56%;
        padding-top: 51px;
        @media (max-width: 1199px) {
            width: 100%;
            padding-top: 0px;
        }
        ul {
            margin: 0 0 50px;
            padding: 0;
            display: flex;
            gap: 10px;
            @media (max-width: 1199px) {
                margin-bottom: 20px;
                flex-wrap: wrap;
            }
            .nav-link {
                background: #e7e7e7;
                border-radius: 10px;
                color: var(--text-color);
                font-size: 16px;
                font-weight: 500;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 8px 20px;
                transition: 0.4s;
                &:hover {
                    background: var(--primary-color);
                }
            }

            .active {
                background: var(--primary-color);
            }
        }

        .productDeatilTable {
            th {
                color: var(--text-color);
                font-weight: 500;
                font-size: 18px;
                font-family: var(--secondary-font);
                padding: 16px 0px;
            }
            td {
                color: var(--text-color);
                font-weight: 400;
                font-size: 16px;
                padding: 16px 0px;
            }
        }
    }
}

.productsecmain {
    padding-bottom: 70px;
    @media (max-width: 767px) {
        padding-bottom: 40px;
    }
    h5 {
        color: #000000;
        font-weight: 700;
        font-size: 30px;
        margin-bottom: 36px;
        @media (max-width: 767px) {
            font-size: 20px;
            margin-bottom: 0px;
        }
    }

    .productBorder {
        border: 0.25px solid #79797945;
        border-radius: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        &:hover .produtImgWrapper img {
            transform: scale(1.1);
        }
        .produtImgWrapper {
            overflow: hidden;
            img {
                width: 100%;
                transition: 0.4s;
            }
        }
        p {
            line-height: 27px;
            font-size: 16px;
            color: var(--text-color);
            font-weight: 400;
            margin-bottom: 0px;
            max-width: 237px;
            text-align: center;
            @media (max-width: 767px) {
                font-size: 15px;
            }
        }
    }
}

.ourProductSlider {
    @media (max-width: 992px) {
        padding: 20px;
    }
}

.contactBgsec {
    padding-top: 70px;
    @media (max-width: 1199px) {
        padding-top: 0px;
        padding-bottom: 40px;
    }
    .contactWrapperMainGrid {
        display: flex;
        gap: 15px;
        @media (max-width: 1199px) {
            flex-direction: column;
        }
        .sideNavAddress {
            width: 521px;
            background: var(--primary-color);
            border-radius: 12px;
            padding: 25px;
            @media (max-width: 1199px) {
                width: 100%;
                padding: 15px;
            }
            h2 {
                color: var(--text-color);
                margin-bottom: 30px;
                font-size: 20px;
                font-weight: 600;
            }
            label {
                color: var(--text-color);
                margin-bottom: 20px;
                font-size: 17px;
                font-weight: 600;
                margin-top: 34px;
            }

            p {
                color: var(--text-color);
                margin-bottom: 0px;
                font-size: 15px;
                font-weight: 400;
                max-width: 230px;
                line-height: 22px;
            }
            .contact-list {
                margin: 0;
                padding: 0;
                li {
                    display: grid;
                    grid-template-columns: 34px 1fr;
                    align-items: center;
                    border-bottom: 0.25px solid #2e2e2e3b;
                    gap: 16px;
                    padding: 14px 0px;

                    @media (max-width: 570px) {
                        gap: 8px;
                    }
                    &:first-child {
                        padding-top: 0px;
                        align-items: start;
                    }
                    &:last-child {
                        border-bottom: none;
                        padding-bottom: 0px;
                    }

                    .contactIcon {
                        background: #a5deff;
                        width: 35px;
                        height: 35px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50%;
                    }

                    p {
                        color: #000;
                        font-size: 16px;
                        font-weight: 400;
                        margin-bottom: 0px;
                        display: flex;

                        @media (max-width: 570px) {
                            font-size: 14px;
                            text-align: left;
                        }
                    }
                }
            }
        }
        .contactFieldDiv {
            background: #eceeef;
            padding: 30px;
            border-radius: 14px;
            width: 100%;
            @media (max-width: 570px) {
                padding: 20px;
            }
            h2 {
                color: var(--text-color);
                margin-bottom: 30px;
                font-size: 20px;
                font-weight: 600;
            }
            label {
                display: block;
                font-weight: 400;
                color: var(--text-color);
                margin-bottom: 4px;
            }

            input {
                width: 100%;
                background: #fff;
                border-radius: 10px;
                padding: 10px 20px;
                border: none;
                outline: none;
                margin-bottom: 24px;
            }
            textarea {
                width: 100%;
                background: #fff;
                border-radius: 10px;
                padding: 10px 20px;
                border: none;
                outline: none;
                margin-bottom: 24px;
                resize: none;
            }
            button {
                width: 215px;
                border: none;
                background: #65c3f8;
                border-radius: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--text-color);
                font-weight: 500;
                font-size: 16px;
                padding: 12px 22px;
                transition: 0.4s;
                float: right;
                &:hover {
                    background: var(--text-color);
                    color: #fff;
                }
            }
        }
    }
}

.mapMainBgsec {
    background: var(--primary-color);
    padding-bottom: 50px;
    margin-top: -123px;
    @media (max-width: 1199px) {
        margin-top: 0px;

        padding-top: 40px;
    }
    .mapRadiusMain {
        border-radius: 29px;
        overflow: hidden;
    }
}

.contactPattern {
    @media (max-width: 1199px) {
        display: none;
        padding-top: 40px;
    }
}

/* MAIN MENU */
.main-menu {
    list-style: none;
    display: flex;
    gap: 40px;
    align-items: center;
}

.main-menu > li {
    position: relative;
}

/* SUBMENU (HIDDEN BY DEFAULT) */
.sub-menu {
    display: none !important;
    position: absolute;
    /* Move it closer so there's no dead space */
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    background: #ffffff;
    min-width: 240px;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1000;

    /* Row Layout */
    grid-template-columns: 1fr;
    gap: 2px;
}

/* 2. The "Invisible Bridge" (Crucial Part) */
.sub-menu::before {
    content: "";
    position: absolute;
    top: -15px; /* Reaches up to the parent button */
    left: 0;
    width: 100%;
    height: 15px; /* Covers the gap */
    background: transparent;
}

/* 3. Hover Trigger */
.main-menu > li:hover > .sub-menu {
    display: grid !important;
}

/* 4. Smooth Row Styling */
.sub-menu li a {
    display: block;
    padding: 12px 16px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px;
    transition:
        background 0.2s,
        color 0.2s;
}

.sub-menu li a:hover {
    background-color: #f0f7ff;
    color: #007bff;
}

  .nav-active {
        border: 1px solid #90b3df;
        border-radius: 15px;
    }

    .enquiry-btn {
        background: #0d6efd;
        /* primary blue */
        color: #fff;
        border-radius: 30px;
        font-weight: 600;
        transition: 0.3s ease;
    }

    .enquiry-btn:hover {
        background: #0b5ed7;
        color: #fff;
        transform: translateY(-2px);
    }

    .medModal {
        display: none;
        position: fixed;
        z-index: 9999;
        inset: 0;
        background: rgba(13, 110, 253, 0.15);
        backdrop-filter: blur(6px);
    }

    .medModalBox {
        width: 95%;
        max-width: 520px;
        margin: 6% auto;
        background: #fff;
        border-radius: 16px;
        padding: 30px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        animation: popIn .3s ease;
        position: relative;
        border-top: 6px solid #0d6efd;
    }

    .medModalHeader h3 {
        font-weight: 700;
        color: #0d6efd;
        margin-bottom: 5px;
    }

    .medModalHeader p {
        color: #6c757d;
        font-size: 14px;
    }

    .medGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 15px;
    }

    .medForm input,
    .medForm textarea {
        width: 100%;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        font-size: 14px;
    }

    .medForm input:focus,
    .medForm textarea:focus {
        border-color: #0d6efd;
        outline: none;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
    }

    .medSubmit {
        width: 100%;
        margin-top: 15px;
        background: linear-gradient(90deg, #0d6efd, #4dabf7);
        border: none;
        color: white;
        padding: 12px;
        border-radius: 30px;
        font-weight: 600;
        transition: 0.3s;
    }

    .medSubmit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
    }

    .medClose {
        position: absolute;
        right: 18px;
        top: 12px;
        font-size: 22px;
        cursor: pointer;
    }

    @keyframes popIn {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @media(max-width:600px) {
        .medGrid {
            grid-template-columns: 1fr;
        }
    }

    .modern-swal {
        border-radius: 16px !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
        padding: 25px !important;
    }

    #newsletterMsg.success {
        color: #28a745;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
.category-name {
    font-weight: 600;
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 4px;

    /*  Lock height */
    min-height: 50px;      /* 2 lines height */
    line-height: 25px;

    display: -webkit-box;
    -webkit-line-clamp: 2; /* Max 2 lines */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* background: rgba(0,0,0,0.6); */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(6px);

}

.popup-box {
    background: #fff;
    padding: 25px;
    width: 400px;
    border-radius: 8px;
    position: relative;
}

.popup-box input,
.popup-box textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.close-popup {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
    font-size: 20px;
}

/* ─── IT Asset Catalog: product listing & detail pages ─── */

.catalog-nav-strip {
    background: #f5f7fa;
    border-bottom: 1px solid #e4e7ec;
    padding: 10px 0;
}

.catalog-pill {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #d0d8e4;
    color: var(--text-color);
    background: #fff;
    transition: 0.3s;
}

.catalog-pill.active,
.catalog-pill:hover {
    background: var(--secondary-color);
    color: #fff !important;
    border-color: var(--secondary-color);
}

.catalog-layout {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    padding: 48px 0;
}

@media (max-width: 992px) {
    .catalog-layout { flex-direction: column; }
    .catalog-sidebar { width: 100% !important; }
}

.catalog-sidebar {
    width: 220px;
    flex-shrink: 0;
}

.catalog-sidebar-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.catalog-filter-input {
    padding: 9px 12px;
    border: 1px solid #d0d8e4;
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--secondary-font);
    outline: none;
    transition: border-color 0.3s;
}

.catalog-filter-input:focus {
    border-color: var(--primary-color);
}

.catalog-filter-btn {
    background: var(--secondary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 14px;
    cursor: pointer;
    transition: 0.3s;
}

.catalog-filter-btn:hover {
    background: var(--primary-color);
}

.catalog-filter-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d0d8e4;
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--secondary-font);
    outline: none;
    background: #fff;
}

.catalog-brand-label {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-family: var(--secondary-font);
}

.catalog-results-count {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    font-family: var(--secondary-font);
}

/* ── Standalone product card (catalog & category pages) ── */
.product-card {
    background: #fff;
    border: 1px solid #e8edf2;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s, transform 0.25s;
}
.product-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.11);
    transform: translateY(-4px);
}
.product-card-img {
    height: 200px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform 0.3s;
}
.product-card:hover .product-card-img img {
    transform: scale(1.06);
}
.product-card-body {
    padding: 16px 16px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.product-card-body h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    font-family: var(--primary-font);
    margin: 0 0 4px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-body p {
    font-size: 13px;
    color: #777;
    margin: 0;
    font-family: var(--secondary-font);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid #f0f2f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.product-card-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--secondary-color);
    font-family: var(--primary-font);
}
.product-card-arrow {
    width: 36px;
    height: 36px;
    background: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
}
.product-card:hover .product-card-arrow {
    background: var(--primary-color);
    transform: translateX(2px);
}

.product-stock-in {
    font-size: 11px;
    background: #d4edda;
    color: #155724;
    padding: 3px 9px;
    border-radius: 12px;
    font-weight: 600;
}

.product-stock-out {
    font-size: 11px;
    background: #f8d7da;
    color: #721c24;
    padding: 3px 9px;
    border-radius: 12px;
    font-weight: 600;
}

.product-price-tag {
    font-size: 15px;
    font-weight: 700;
    color: var(--secondary-color);
    font-family: var(--primary-font);
}

.product-brand-label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-family: var(--secondary-font);
}

.product-category-badge {
    display: inline-block;
    padding: 4px 14px;
    background: var(--primary-color);
    color: #fff !important;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    font-family: var(--secondary-font);
}

.product-detail-price {
    font-size: 30px;
    font-weight: 800;
    color: var(--secondary-color);
    font-family: var(--primary-font);
}

.product-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.product-info-cell {
    background: #f5f7fa;
    border-radius: 10px;
    padding: 14px;
}

.product-info-cell-label {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
    font-family: var(--secondary-font);
}

.product-info-cell-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    display: block;
    font-family: var(--primary-font);
}

.product-short-desc {
    border-left: 4px solid var(--primary-color);
    padding-left: 14px;
    color: #555;
    line-height: 1.7;
    font-size: 15px;
    margin-bottom: 24px;
}

/* ── Service cards (services listing page) ── */
.service-card {
    background: #fff;
    border: 1px solid #e8edf2;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}
.service-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    transform: translateY(-4px);
}
.service-card-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f0f4f8;
}
.service-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.service-card:hover .service-card-img img {
    transform: scale(1.04);
}
.service-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #bbc5cf;
}
.service-card-body {
    padding: 20px 20px 12px;
    flex: 1;
}
.service-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 8px;
    line-height: 1.4;
}
.service-card-overview {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
}
.service-card-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}
.service-card-bullets li {
    font-size: 13px;
    color: #555;
    padding: 3px 0 3px 18px;
    position: relative;
}
.service-card-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
}
.service-card-bullets .service-card-more {
    color: var(--primary-color);
    font-weight: 600;
}
.service-card-bullets .service-card-more::before {
    content: '';
}
.service-card-footer {
    padding: 12px 20px 20px;
    border-top: 1px solid #f0f2f5;
}
.service-card-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--secondary-font);
}

/* ── Service detail page ── */
.service-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 767px) {
    .service-detail-list { grid-template-columns: 1fr; }
}
.service-detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: #444;
    line-height: 1.5;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 8px;
}
.service-detail-check {
    width: 22px;
    height: 22px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    margin-top: 1px;
}

/* ── Catalog page ── */
.catalog-page-section {
    padding: 50px 0 70px;
}

.catalog-page-heading {
    text-align: center;
    margin-bottom: 40px;
}

.catalog-page-heading span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--secondary-color);
    font-family: var(--secondary-font);
    margin-bottom: 8px;
}

.catalog-page-heading h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-color);
    font-family: var(--primary-font);
    margin: 0;
}

.catalog-empty {
    text-align: center;
    padding: 60px;
    color: #888;
    font-family: var(--secondary-font);
}

/* ── Sidebar card ── */
.catalog-sidebar-card {
    background: #f9fafb;
    border: 1px solid #e8edf2;
    border-radius: 16px;
    padding: 24px 20px;
    position: sticky;
    top: 20px;
}

.catalog-filter-block {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eaedf0;
}

.catalog-filter-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ── Product detail page ── */
.product-detail-section-wrap {
    padding: 50px 0 60px;
    background: #fff;
}

.detail-image-card {
    border: 1px solid #e4e8ef;
    border-radius: 20px;
    padding: 20px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
}

.detail-main-img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 12px;
}

.detail-no-image {
    text-align: center;
    color: #adb5bd;
    padding: 40px;
}

.detail-no-image p {
    margin-top: 12px;
    font-size: 14px;
    color: #adb5bd;
}

.detail-breadcrumb {
    font-size: 13px;
    color: #888;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    font-family: var(--secondary-font);
}

.detail-breadcrumb a {
    color: #888 !important;
}

.detail-breadcrumb a:hover {
    color: var(--secondary-color) !important;
}

.detail-breadcrumb .current {
    color: var(--text-color);
    font-weight: 600;
}

.detail-product-name {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 12px;
    line-height: 1.25;
    font-family: var(--primary-font);
}

.detail-brand-row {
    margin: 0 0 16px;
    font-size: 15px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--secondary-font);
}

.detail-label {
    background: #f0f2f5;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #888;
}

.detail-price-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.detail-stock-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--secondary-font);
}

.detail-stock-badge.in-stock {
    background: #d4edda;
    color: #155724;
}

.detail-stock-badge.out-stock {
    background: #f8d7da;
    color: #721c24;
}

.detail-action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    align-items: center;
}

.detail-enquire-btn {
    width: auto !important;
    padding: 13px 28px !important;
    font-size: 15px !important;
}

.detail-back-btn {
    padding: 13px 22px;
    background: #fff;
    color: var(--secondary-color) !important;
    border: 2px solid var(--secondary-color);
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--primary-font);
    transition: 0.3s;
    white-space: nowrap;
}

.detail-back-btn:hover {
    background: var(--secondary-color);
    color: #fff !important;
}

/* Tabs */
.detail-tabs-section {
    padding: 50px 0;
    background: #f9fafb;
    border-top: 1px solid #eaedf0;
}

.detail-tab-nav {
    display: flex;
    border-bottom: 2px solid #e2e6ea;
    margin-bottom: 32px;
}

.detail-tab-btn {
    padding: 12px 28px;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 600;
    color: #999;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-family: var(--primary-font);
    transition: 0.3s;
    margin-bottom: -2px;
}

.detail-tab-btn.active {
    color: var(--secondary-color);
    border-bottom-color: var(--primary-color);
}

.detail-tab-panel {
    line-height: 1.8;
    color: #444;
    font-size: 15px;
    font-family: var(--secondary-font);
    max-width: 860px;
}

/* Spec table */
.detail-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    font-family: var(--secondary-font);
}

.detail-spec-table .spec-row-alt {
    background: #fff;
}

.detail-spec-table tr {
    background: #f5f7fa;
    border-bottom: 1px solid #e9ecef;
}

.detail-spec-table .spec-key {
    width: 35%;
    padding: 14px 18px;
    font-weight: 600;
    color: var(--text-color);
}

.detail-spec-table .spec-val {
    padding: 14px 18px;
    color: #555;
}

/* Related products */
.related-section {
    padding: 50px 0 70px;
    background: #fff;
}

.related-header {
    margin-bottom: 32px;
}

.related-header h3 {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-color);
    font-family: var(--primary-font);
}

.related-header h3 span {
    color: var(--primary-color);
}