@import url(./typography-variables.css);

/* header css started */
.flex-menu-wrapper {
    display        : flex;
    justify-content: space-between;
    align-items    : center;

}

html {
    scroll-behavior: smooth;
}

#header {
    position: sticky;
    top     : 0px;
    z-index : 33;
}

.header-menu {
    background-color       : #ffffffa6;
    position               : sticky;
    top                    : 0px;
    width                  : 100%;
    padding                : 20px 0px 20px;
    z-index                : 2;
    margin-bottom          : 40px;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter        : blur(16px);
}

.header-menu li a {
    font-size      : 22px;
    color          : var(--color-secondary);
    font-weight    : var(--font-weight-regular);
    text-decoration: none;
}

.header-menu li a:hover {
    color: var(--color-highlight);
}

.header-menu nav ul {
    display       : flex;
    gap           : 30px;
    align-items   : center;
    vertical-align: middle;
}

.header-menu li:hover a {
    text-decoration: underline;
}

/* Mobile Toggle */

.header-menu .nav-toggle {
    display : none;
    position: absolute;
    right   : 1rem;
    top     : 1.5rem;
    cursor  : pointer;
}

.header-menu .nav-toggle img {
    width     : 1.5rem;
    transition: 300ms all ease;
}

.header-menu .nav-toggle:hover img {
    opacity: 0.6;
}

.header-menu .open {
    height: 100vh;
}

.header-menu .hidden {
    display: none;
}

a.cnt_btn {
    font-weight: var(--font-weight-bold);
    color      : var(--color-secondary);
    font-size  : 1.375rem;
}


/* header css end */
/* banner css started */
.herobanner {
    margin-bottom: 120px;

}

.desktp_hide_mp {
    display: none;
}

.mb_blobk {
    display: none;
}

.rm-mb {
    margin-bottom: 0px;
}

.herobanner img {
    max-width: fit-content;

}

.vechile_b {
    animation: slideUpImage 1s ease-out forwards;
}

@keyframes slideUpImage {
    from {
        transform: translateY(100px);
        opacity  : 0;
    }

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

@keyframes slideDownImage {
    from {
        transform: translateY(-100px);
        /* start from top */
        opacity  : 0;
    }

    to {
        transform: translateY(0);
        /* normal position */
        opacity  : 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-150px);
        /* start from left */
        opacity  : 0;
    }

    to {
        transform: translateX(0);
        /* final/original position */
        opacity  : 1;
    }
}

.crd_img {
    animation:
        clawDrop 2.2s ease-out 1 forwards,
        clawShake 1.5s ease-in-out infinite;
    animation-delay: 0s, 2.2s;
    /* drop first, then shake starts */
}

.baner_scrp {
    animation: slideDownImage 1s ease-out forwards;
}

.herobanner .flex-bx {
    display        : flex;
    justify-content: space-between;
    gap            : 20px;

}

@keyframes clawGrab {
    0% {
        transform: translateY(-30px) rotate(0deg);
    }

    30% {
        transform: translateY(0) rotate(0deg);
    }

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

    70% {
        transform: translateY(0) rotate(5deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes clawIdle {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    15% {
        transform: translateY(-3px) rotate(-2deg);
    }

    30% {
        transform: translateY(2px) rotate(1deg);
    }

    45% {
        transform: translateY(-1px) rotate(-3deg);
    }

    60% {
        transform: translateY(3px) rotate(2deg);
    }

    75% {
        transform: translateY(-2px) rotate(1deg);
    }

    90% {
        transform: translateY(1px) rotate(-1deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes clawDrop {
    0% {
        transform: translateY(-80px);
        opacity  : 0;
    }

    40% {
        transform: translateY(0);
        opacity  : 1;
    }

    55% {
        transform: translateY(-15px);
    }

    70% {
        transform: translateY(0);
    }

    80% {
        transform: translateY(-8px);
    }

    90% {
        transform: translateY(0);
    }

    95% {
        transform: translateY(-4px);
    }

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

@keyframes clawShake {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-3px);
    }

    50% {
        transform: translateY(2px);
    }

    75% {
        transform: translateY(-2px);
    }

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

.twckn_img {
    display: inline-block;
    animation:
        clawGrab 2s ease-out 1 forwards,
        clawIdle 2s ease-in-out infinite;
    animation-delay: 0s, 2s;
    /* grab first, then idle starts */
}

.herobanner .block-banner {
    flex: 0 0 calc(38% - 13.33px);
}

.herobanner .block-banner-two {
    flex: 0 0 calc(24% - 13.33px);
}

.herobanner .block-banner-three {
    flex: 0 0 calc(38% - 13.33px);
}

.herobanner .block-banner .flx-inner {
    display        : flex;
    /* align-items : baseline; */
    justify-content: space-between;
}

.herobanner .block-banner h1 {
    font-size     : 43px;
    color         : var(--color-secondary);
    line-height   : 50px;
    text-transform: uppercase;
    padding-bottom: 40px;
}

.herobanner .block-banner h1 span {
    color: var(--color-primary);
}

.herobanner .block-banner .flx-inner .wrapper p {
    color: var(--color-secondary);
}

.herobanner .block-banner-two .flex-bx-tw {
    display: flex;
}

.block-banner-two .flex-bx-tw .wrappertw {
    position: relative;
}

.block-banner-two .flex-bx-tw .wrappertw img.crd_img {
    position: absolute;
    bottom  : 0px;
    left    : 0px;
    width   : 312px;
}

.block-banner-two .wrappertw {
    width: 50%;
}

.block-banner-two .flx_bx {
    width    : 50%;
    display  : flex;
    flex-wrap: wrap;
    gap      : 75px;
}

.block-banner .flx-inner .wrapper {

    display        : flex;
    flex-wrap      : wrap;
    align-items    : flex-start;
    justify-content: space-between;
    /* height      : 100vh; */
    position       : relative;
    width          : 100%;

}

.block-banner .flx-inner .wrapper p {
    color      : var(--color-secondary);
    font-size  : 32px;
    font-weight: var(--font-weight-regular);
    line-height: 40px;
    max-width  : 360px;
}

.block-banner .flx-inner .wrapper .btn_wraper span {
    font-weight: var(--font-weight-regular);
    color      : #B9B6B6;
    font-family: var(--font-family-primary);
    font-size  : var(--font-size-h3);
    display    : block;
    line-height: 35px;
}

.block-banner .flx-inner .wrapper .btn_wraper button {
    background-color: var(--color-primary);
    color           : var(--color-secondary);
    font-weight     : var(--font-weight-bold);
    width           : 100%;
    border-radius   : 30px;
    font-size       : 30px;
    padding         : 94px 0px
}

.block-banner .flx-inner .wrapper .btn_wraper {
    position: absolute;
    bottom  : 0px;
    width   : 98%;
}

.block-banner-three p {
    font-size     : 34px;
    color         : var(--color-primary);
    text-transform: uppercase;
    font-weight   : var(--font-weight-bold);
    line-height   : 54px;
}

/* banner css end */

/* service section css started */
.services-block {
    position: relative;
}

.bg_layimg {
    position : absolute;
    left     : 0px;
    top      : 0px;
    max-width: fit-content;
    z-index  : -1;
}

.services-block h2 {
    color         : var(--color-secondary);
    font-size     : 100px;
    font-weight   : 800;
    line-height   : 128px;
    padding-bottom: 20px;
}

.services-block .flex-bx {
    /* display              : flex;
    flex-wrap            : wrap; */
    gap                  : 20px;
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
}

.services-block .block-card {
    background     : #F2F2F2;
    padding        : 30px;
    flex-direction : column;
    justify-content: space-between;
    display        : flex;

}

.services-block .block-card .blck_crdone p {
    color      : var(--color-secondary);
    font-weight: var(--font-weight-semibold);
    font-size  : 46px;
    font-family: var(--font-family-secondary);
    line-height: 55px;
}

.services-block .block-card .blck_crdone {
    display           : flex;
    justify-content   : space-between;
    /* align-items    : center; */
}

.services-block .block-card .blck_crdone a {
    width          : 86px;
    height         : 86px;
    /* gap         : 10px; */
    background     : #E4E4E4;
    border-radius  : 20px;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.services-block .block-card .blck_crdone a:hover {
    background-color: var(--color-primary);
}

.services-block .block-card .blck_crdone a img {
    width: 28px;
}

.services-block .block-card .blck_crdtwo {
    display        : flex;
    justify-content: space-between;
    align-items    : end;
}

.services-block .block-card .blck_crdtwo img {
    max-width: fit-content;
}

.services-block .block-card .blck_crdtwo p {
    font-size  : 20px;
    font-weight: var(--font-weight-regular);
    color      : var(--color-secondary);
    line-height: 28px;
}

.services-block .block-card .blck_crdtwo p span {
    color: var(--color-primary);
}

.pd_btm {
    padding-bottom: 22px;
}

/* service section css end */

/* why choose section css start */
.black_whychose {
    margin          : 140px 0px;
    background-color: var(--color-secondary);
    padding         : 80px 60px;
    color           : var(--color-text-light);
}

.why-chosse-sec h3 {
    color      : var(--color-text-light);
    font-size  : 100px;
    font-weight: 800;
    font-family: var(--font-family-secondary);
}

.why-chosse-sec .flx-wrp {
    position: relative;

}

.why-chosse-sec .flx-wrp img {
    position : absolute;
    right    : 0px;
    /* top   : 0px; */
    max-width: 50%;
    bottom   : -39px;
}


.flx-li-blk .brdr_btm {
    display        : flex;
    justify-content: space-between;
    border-bottom  : 1px solid color(srgb 1 1 1 / 0.30);
    align-items    : center;
}

.flx-li-blk .blck_first {
    display    : flex;
    gap        : 40px;
    align-items: center;
    padding    : 40px 0px;
    width      : 50%;
}

.flx-li-blk .block-scond {
    width: 50%;
}

.flx-li-blk .blck_first span {
    color      : var(--color-text-light);
    font-size  : 46px;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-secondary);
}

.flx-li-blk .blck_first p {
    color         : var(--color-text-light);
    font-size     : 46px;
    display       : flex;
    gap           : 40px;
    /* height     : 143px; */
    font-weight   : var(--font-weight-semibold);
    align-items   : center;
    position      : relative;
    top           : 5px;
}


.block-scond p {
    font-size  : 28px !important;
    font-weight: var(--font-weight-regular);


    color: var(--color-text-light);

}

.block-scond p span {
    color: var(--color-primary);
}

.mb-tpsl-vh {
    margin-top: 220px;
}

/* why choose section css end */
.hide-img-desktop {
    display: none;
}

/* testimonial css started */
.testimonial {
    margin-top: 222px;
    position  : relative;
}

.testimonial img.bg_img {
    max-width: 98.5%;
    margin   : 0px auto;
    display  : block;
    position : absolute;
    top      : 0px;
    z-index  : -1;
    left     : 0px;
    right    : 0px;
}

.testimonial h4 {
    font-weight: 800;
    font-size  : var(--font-size-hundred);
    line-height: 104px;
    font-family: var(--font-family-secondary);
    color      : var(--color-secondary);
}

.testimonial .flx-btn {
    display        : flex;
    justify-content: space-between;
    align-items    : end;
    padding-bottom : 60px;
}

.testimonial .testimonials-section {
    /* max-width: 1200px; */
    margin  : 0 auto;
    position: relative;
}




.testimonial .nav-buttons {
    display: flex;
    gap    : 20px;
}

.testimonial .nav-btn {
    width          : 86px;
    height         : 86px;
    border-radius  : 20px;
    border         : none;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 18px;
    transition     : all 0.3s ease;
}

.testimonial .nav-btn img {
    width : 25px;
    height: 25px;
}

.testimonial .nav-btn.prev {
    background-color: #E4E4E4;
    color           : #6c757d;
}

.testimonial .nav-btn.next {
    background-color: #E4E4E4;
    color           : white;
}

.testimonial .nav-btn:hover {
    transform       : scale(1.1);
    background-color: var(--color-primary);
}

.testimonial .testimonial-card {

    /* border-radius: 15px; */
    padding         : 15px 15px 0px;
    margin          : 0 10px;
    /* box-shadow   : 0 5px 20px rgba(0, 0, 0, 0.1); */
    position        : relative;
    /* min-height   : 300px; */
}

/* Even items */
.testimonial .owl-item:nth-child(even) .testimonial-card {
    background: #F2F2F2;
    /* light grey */
}

/* Odd items */
.testimonial .owl-item:nth-child(odd) .testimonial-card {
    background: var(--color-secondary);
    /* white */
}

.testimonial .owl-item:nth-child(odd) p {
    color: var(--color-text-light);

}

.testimonial .owl-item:nth-child(even) p {
    color: var(--color-secondary)
}

.testimonial .owl-item:nth-child(odd) span {
    color: var(--color-text-light);

}

.testimonial .owl-item:nth-child(even) span {
    color: var(--color-secondary)
}

.testimonial .owl-item:nth-child(odd) .testimonial-text {
    color: var(--color-text-light);
}

.testimonial .customer-info {
    display: flex;

    margin-bottom: 20px;
}

.testimonial .customer-avatar {
    max-width    : 98px;
    height       : 98px;
    margin-right : 15px;
    border-radius: 15px;
    object-fit   : cover;
}

.testimonial .customer-details p {
    font-size           : 36px;
    font-weight         : var(--font-weight-semibold);
    /* color            : #333; */
    line-height         : 36px;
    /* margin-bottom    : 5px; */
    text-transform      : uppercase;
}

.testimonial .customer-location {
    font-size  : var(--font-size-h5);
    line-height: 28px;
    font-weight: var(--font-weight-regular);
    font-family: var(--font-family-primary);

}

.testimonial .rating {
    margin-bottom: 20px;
    display      : flex;
    gap          : 4px;
}


.testimonial .rating img {
    max-width: 16px;
}

.testimonial .rating i {
    color       : #ffc107;
    font-size   : 14px;
    margin-right: 2px;
}

.testimonial .testimonial-text {
    position        : relative;
    /* background   : #f8f9fa; */
    font-weight     : var(--font-weight-regular);
    font-size       : 20px;
    line-height     : 28px;
    font-family     : var(--font-family-primary);

}

.ex_sign {
    max-width    : 30px;
    margin-bottom: 15px;
}

.testimonial-text strong {
    display       : block;
    padding-bottom: 10px;
}

.testimonial .quote-icon {
    position : absolute;
    top      : 15px;
    left     : 15px;
    font-size: 20px;
    color    : #ddd;
}

/* Owl Carousel Custom Styles */
.testimonial .owl-carousel .owl-item {
    display: flex;
}

.testimonial .owl-carousel .owl-nav {
    display: none;
}

.testimonial .owl-carousel .owl-dots {
    display: none;
}

/* testimonial css end */

/* faq section css started  */
.faq_section {
    background-color: var(--color-secondary);
    margin          : 140px 0px;
    padding         : 60px 0px;
    box-sizing      : border-box;
}

.faq_section h5 {
    font-size     : 295px;
    font-weight   : 800;
    color         : var(--color-text-light);
    font-family   : var(--font-family-secondary);
    letter-spacing: -12px;
    line-height   : 210px;
}

.faq_section .flx-block {
    display: flex;
    gap    : 217px;
}

.faq_section .flx-block .wrapper .faq-block {
    background-color: #252525;
    margin-bottom   : 20px;
    padding         : 30px;
    width           : 100%;
    box-sizing      : border-box;
    display         : flex;
    justify-content : space-between;
    gap             : 1;
}

.faq_section .flx-block .wrapper .faq-block span:nth-child(1) {
    color      : var(--color-text-light);
    font-family: var(--font-family-secondary);
    font-size  : 46px;
    font-weight: var(--font-weight-semibold);
}

.faq_section .flx-block .wrapper .faq-block p {
    font-size  : 46px;
    color      : var(--color-text-light);
    line-height: 46px;
    font-weight: var(--font-weight-semibold);
}

.faq_section .flx-block .wrapper .faq-block div {
    padding-left : 130px;
    padding-right: 60px;
}

.faq_section .flx-block .wrapper .faq-block span:nth-child(2) {

    font-weight: (var(--font-weight-regular));
    color      : var(--color-text-light);
    font-size  : 28px;
    font-family: var(--font-family-primary);
    line-height: 32px;
    display    : block;
    padding-top: 20px;
}

.faq_section .flx-block .wrapper .faq-block span:nth-child(3) {
    background-color: #B9B6B6;
    height          : 16px;
    width           : 100%;
    border-radius   : 100%;
    left            : 0px;
    line-height     : 0px;
    max-width       : 16px;

}

/* faq section css end  */

/* leave request form css start */
.for_leave_req .form-layout {
    background: #F2F2F2;
    padding   : 60px 30px;
}

.for_leave_req .form-layout .grid-block {
    grid-template-columns: repeat(2, 1fr);
    gap                  : 23px;
    display              : flex;
    overflow             : hidden;
}

.for_leave_req .form-layout h6 {
    color         : var(--color-secondary);
    font-size     : 100px;
    font-weight   : 800;
    line-height   : 100px;
    padding-bottom: 30px;
    font-family   : var(--font-family-secondary);
    letter-spacing: -4px;
}


.for_leave_req .form-grid {
    /* display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 20px;
    margin-bottom        : 20px; */
    /* display  : flex;
    gap      : 10px;
    flex-wrap: wrap; */
}

/* .for_leave_req .form-group {
    display       : flex;
    flex-direction: column;
}

.for_leave_req .form-group.full-width {
    grid-column: 1 / -1;
} */
.grdi_cls {
    display              : grid;
    gap                  : 10px;
    grid-template-columns: repeat(3, 1fr);
}

.grid_two {
    display              : grid;
    gap                  : 10px;
    grid-template-columns: repeat(2, 1fr);
}

.grid_two select {
    width : 100%;
    margin: 10px 0px 0px;
}

.grid_two input {
    width     : 100%;
    margin    : 10px 0px;
    box-sizing: border-box;
}

.for_leave_req input {
    background   : #E4E4E4;
    border       : none;
    border-radius: 10px;
    font-weight  : 300;
    font-size    : 25px;
    line-height  : 28px;
    color        : #575757;


}

.for_leave_req select {
    cursor             : pointer;
    appearance         : none;
    background-image   : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat  : no-repeat;
    background-size    : 16px;
    padding-right      : 40px;
    background-color   : #E4E4E4;
    border             : none;
    border-radius      : 10px;
    font-weight        : 300;
    font-size          : 25px;
    line-height        : 28px;
    color              : #575757;

}

.for_leave_req select option {
    color: #575757;
}

.for_leave_req .file-upload {
    position       : relative;
    display        : flex;
    align-items    : center;
    gap            : 12px;
    padding        : 12px 16px;
    background     : #E4E4E4;
    border         : none;
    justify-content: space-between;
    border-radius  : 10px;
    font-weight    : 300;
    font-size      : 25px;

    line-height: 28px;
    color      : #575757;
    background : #E4E4E4;
    cursor     : pointer;
    transition : all 0.3s ease;
}

#yearOfManufacture {
    margin-top: 0px;
}

.upload-text {
    font-weight: 300;
    font-size  : 25px;
    line-height: 28px;
    color      : #575757;
    font-family: var(--font-family-primary);
}

.for_leave_req .file-upload:hover {
    border-color    : #007bff;
    background-color: #f0f8ff;
}

.for_leave_req .file-upload input[type="file"] {
    position: absolute;
    opacity : 0;
    width   : 100%;
    height  : 100%;
    cursor  : pointer;
}

.for_leave_req .upload-icon {
    width     : 20px;
    height    : 20px;
    object-fit: contain !important;
    color     : #666;
}



.for_leave_req textarea {
    resize       : vertical;
    min-height   : 80px;
    background   : #E4E4E4;
    width        : 100%;
    border       : none;
    border-radius: 10px;
    box-sizing   : border-box;
}

.for_leave_req .error {
    color      : #dc3545;
    font-size  : 12px;
    margin-top : 4px;
    display    : none;
    font-family: var(--font-family-primary);
}

.for_leave_req .form-group.has-error input,
.for_leave_req .form-group.has-error select,
.for_leave_req .form-group.has-error textarea,
.for_leave_req .form-group.has-error .file-upload {
    border-color    : #dc3545;
    background-color: #fff5f5;
}

.for_leave_req .form-group.has-error .error {
    display: block;
}

.for_leave_req .submit-btn {
    background-color: var(--color-primary);
    color           : var(--color-secondary);
    padding         : 75px 30px;
    border          : none;
    border-radius   : 30px;
    font-size       : 30px;
    font-weight     : 700;
    cursor          : pointer;
    transition      : background-color 0.3s ease;
    width           : 100%;
    margin-top      : 20px;
}

.for_leave_req .submit-btn:hover {
    background-color: #c77d05;
}

.for_leave_req .submit-btn:disabled {
    background-color: #6c757d;
    cursor          : not-allowed;
}

/* leave request form css end */

/* blog css started  */
.blog-hm {
    padding : 220px 0px 80px;
    position: relative;
}

.blog-hm .owl-nav {
    display: none;
}

img.rm_bg_img {
    position: absolute;
    left    : 0px;
    width   : 90%;
    z-index : -1;
}

.blog-hm h2 {
    color         : var(--color-secondary);
    font-size     : 100px;
    font-weight   : 800;
    line-height   : 100px;
    padding-bottom: 30px;
    font-family   : var(--font-family-secondary);
    letter-spacing: -4px;
}

.blog-hm .grid-wrapper {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 20px 20px;
}

.blog-hm .grid-wrapper .grid-block {
    border : 2px dashed #EF930040;
    padding: 10px;
}

.blog-hm .grid-wrapper .grid-block {
    display   : flex;
    transition: background-color 0.3s ease;
}

.blog-hm .grid-wrapper .grid-block .content-block {
    width          : 40%;
    position       : relative;
    flex-direction : column;
    /* stack items vertically */
    justify-content: space-between;
    /* spread them apart */

    display: flex;
}

.blog-hm .grid-wrapper .grid-block .image-wrapper {
    width: 60%;
}

img.crwl_icon {
    position : absolute;
    top      : 0px;
    right    : 20px;
    max-width: 20px;
}

.blog-hm .grid-wrapper .grid-block .content-block p.heading_blg {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-semibold);
    line-height   : 40px;
    font-size     : 36px;
    color         : var(--color-secondary);
    letter-spacing: -3px;

}

.blog-hm .grid-wrapper .grid-block .content-block span.blg_date {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    display    : block;
    font-size  : 12px;
    color      : var(--color-secondary);
    line-height: 12px;
    padding-top: 10px;

}

p.blg_twop {

    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size  : 16px;
    line-height: 22px;
    color      : var(--color-secondary);

}

.blog-hm .grid-wrapper .grid-block .content-block a {
    background    : #E4E4E4;
    width         : 96%;
    display       : block;
    margin-top    : 10px;
    border-radius : 10px;
    text-align    : center;
    padding       : 12px 0px;
    font-weight   : var(--font-weight-semibold);
    font-size     : 16px;
    line-height   : 16px;
    text-transform: uppercase;
    color         : var(--color-secondary);
}

.blog-hm .grid-wrapper .grid-block .content-block a svg {
    fill: var(--color-secondary);
}

.blog-hm .grid-wrapper .grid-block:hover {
    background-color: #f2f2f2;
    transition      : background-color 0.3s ease;
    border          : 2px solid #EF930040;
}

.blog-hm .grid-wrapper .grid-block:hover a svg {
    fill: var(--color-primary);
}

.blog-hm .grid-wrapper .grid-block:hover a {
    color: var(--color-primary);
}

a.more_btn {
    background-color: var(--color-primary);
    color           : var(--color-secondary);
    display         : block;
    text-align      : center;
    font-weight     : 700;
    font-style      : var(--font-weight-bold);
    font-size       : 30px;
    text-align      : center;
    line-height     : 30px;
    border-radius   : 10px;
    margin-top      : 40px;
    padding         : 16px 0px 7px;
}



/* blog css end  */
/* footer css started */
.footer_btm {
    background-color: var(--color-secondary);
    padding         : 40px 60px;
    margin-top      : 80px;
}

.footer_btm .sub_lg img {
    max-width: 388px;
}

.footer_btm .sub_lg {
    display: flex;
    gap    : 67px;
}

.footer_btm .sub_lg form {
    display: flex;
}

.footer_btm .sub_lg .form-control label {

    font-family   : var(--font-family-primary);
    font-size     : 12px;
    line-height   : 15px;
    color         : #B9B6B6;
    display       : block;
    padding-bottom: 5px;
    max-width     : fit-content;
}

.footer_btm .sub_lg .form-control input {
    background-color: #E4E4E4;
    border-radius   : 10px;
    border          : none;
    max-width       : 623px;
    width           : 100%;
    font-weight     : 300;
    font-size       : 28px;
    line-height     : 30px;
    padding         : 12px 20px 4px;


}

.footer_btm .sub_lg .sub_frm {
    width       : 100%;
    /* max-width: 825px; */
}

.footer_btm .sub_lg .form-control {
    width  : 100%;
    display: block;
}

.footer_btm .sub_lg form button {
    background   : #B9B6B6;
    border-radius: 10px;
    font-weight  : var(--font-weight-semibold);
    font-size    : 16px;
    text-align   : center;
    color        : var(--color-secondary);
    max-width    : 207px;
    margin-left  : 13px;
    width        : 100%;
    height       : 46px;
    position     : relative;
    top          : -4px;
}

.footer_btm .sub_lg form button:hover {
    background-color: var(--color-primary);
}

.footer_btm .grid-f-block {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    padding              : 70px 0px 60px;
}

.footer_btm .grid-f-block .menu-block p {
    color         : var(--color-primary);
    font-weight   : var(--font-weight-bold);
    font-size     : var(--font-size-h5);
    line-height   : 22px;
    padding-bottom: 40px;
    display       : flex;
    align-items   : center;
    gap           : 44px;
    position      : relative;
}

img.gvt_lg {
    max-width: 110px;
    position : absolute;
    right    : 80px;
}

.footer_btm .grid-f-block .menu-block ul li {
    padding-bottom: 20px;
}

.footer_btm .grid-f-block .menu-block ul li a {

    font-weight: var(--font-weight-regular);
    line-height: 22px;
    font-size  : var(--font-size-h5);

    color: var(--color-text-light);
}

.footer_btm .grid-f-block .menu-block ul li a:hover {
    color: var(--color-primary);
}

.footer_btm .grid-f-block .menu-block ul li img {
    max-width: 14px;
}

.footer_btm .grid-f-block .menu-block ul li {
    display       : flex;
    align-items   : center;
    vertical-align: middle;
    gap           : 6px;
}

.footer_btm .grid-f-block .menu-block .mail span {
    display       : block;
    font-style    : var(--font-weight-regular);
    font-size     : 12px;
    font-family   : var(--font-family-primary);
    line-height   : 14px;
    color         : #B9B6B6;
    padding-bottom: 10px;

}

.footer_btm .grid-f-block .menu-block .mail a {

    font-weight: var(--font-weight-bold);
    line-height: 22px;
    font-size  : var(--font-size-h5);

    color: var(--color-text-light);
}

.footer_btm .grid-f-block .menu-block .mail {
    padding-bottom: 34px;
}

.footer_btm .grid-f-block .menu-block .ph-nmber span {
    display       : block;
    font-style    : var(--font-weight-regular);
    font-size     : 12px;
    font-family   : var(--font-family-primary);
    line-height   : 14px;
    padding-bottom: 10px;
    color         : #B9B6B6;

}

.footer_btm .grid-f-block .menu-block .ph-nmber .flex-bx {
    display       : flex;
    padding-bottom: 10px;
    gap           : 105px;
}

.footer_btm .grid-f-block .menu-block .ph-nmber .flex-bx a {
    font-style : var(--font-weight-regular);
    line-height: 22px;
    font-size  : var(--font-size-h5);

    color: var(--color-text-light);
}

.footer_btm .grid-f-block .menu-block .sm-media span {
    display       : block;
    font-style    : var(--font-weight-regular);
    font-size     : 12px;
    font-family   : var(--font-family-primary);
    line-height   : 14px;
    padding-bottom: 10px;
    color         : #B9B6B6;

}

.footer_btm .grid-f-block .menu-block .sm-media {
    padding-top: 20px;
}

.footer_btm .grid-f-block .menu-block .sm-media ul {
    display: flex;
    gap    : 20px;
}

.footer_btm .grid-f-block .menu-block .sm-media ul li img {
    max-width: 36px !important;
}

.footer_btm .grid-f-block .menu-block .gst-block span {
    display       : block;
    font-weight   : var(--font-weight-regular);
    font-size     : 12px;
    font-family   : var(--font-family-primary);
    line-height   : 14px;
    padding-bottom: 10px;
    color         : #B9B6B6;

}

.footer_btm .grid-f-block .menu-block .address-block span {
    display       : block;
    font-weight   : var(--font-weight-regular);
    font-size     : 12px;
    font-family   : var(--font-family-primary);
    line-height   : 14px;
    padding-bottom: 10px;
    color         : #B9B6B6;
}

p.address_dt {
    color      : var(--color-text-light) !important;
    font-size  : var(--font-size-h6) !important;
    font-weight: var(--font-weight-regular) !important;
}

.footer_btm .grid-f-block .menu-block .gst-block span {
    display       : block;
    font-weight   : var(--font-weight-regular);
    font-size     : 12px;
    font-family   : var(--font-family-primary);
    line-height   : 14px;
    padding-bottom: 10px;
    color         : #B9B6B6;
}

p.gst_dt {
    color         : var(--color-text-light) !important;
    font-size     : var(--font-size-h5) !important;
    font-weight   : var(--font-size-h5) !important;
    letter-spacing: 1px;
}

.footer_btm .grid-f-block .menu-block .gst-block img {
    max-width: 18px;
    cursor   : pointer;
}

.footer_btm .grid-f-block .menu-block .timming-block span {
    display       : block;
    font-weight   : var(--font-weight-regular);
    font-size     : 12px;
    font-family   : var(--font-family-primary);
    line-height   : 14px;
    padding-bottom: 10px;
    color         : #B9B6B6;
}

p.time_p {
    color         : var(--color-text-light) !important;
    font-size     : var(--font-size-h5) !important;
    font-weight   : var(--font-size-h5) !important;
    letter-spacing: 1px;
}

.footer_btm .grid-f-block .menu-block .timming-block span {
    display       : block;
    font-weight   : var(--font-weight-regular);
    font-size     : 12px;
    font-family   : var(--font-family-primary);
    line-height   : 14px;
    padding-bottom: 10px;
    color         : #B9B6B6;
}

.cp-rite {
    border-top     : 1px solid #FFFFFF4D;
    padding-top    : 20px;
    display        : flex;
    justify-content: space-between;

}

.pvc-polcy a {
    color      : #B9B6B6;
    font-size  : var(--font-size-h6);
    font-weight: var(--font-weight-regular);
}

.pvc-polcy {
    display: flex;
    gap    : 143px;
}

.design-devpd p {
    color      : #B9B6B6;
    font-size  : var(--font-size-h6);
    font-weight: var(--font-weight-regular);
}

/* footer css end */

/* 
home page css end  */
/* sell your vehicle page css started  */
/* banner page css started */
.herobanner .sell-vlc {
    display        : flex;
    justify-content: space-between;

}

.hide-vc-dsktp {
    display: none;
}

.herobanner .sell-vlc .vl-bxone {
    flex: 0 0 30%;
}

.herobanner .sell-vlc .vl-bxone h1 {
    font-family   : var(--font-family-secondary);
    font-weight   : 800;
    font-size     : 245px;
    line-height   : 205px;
    letter-spacing: -4px;
    text-transform: uppercase;
    color         : var(--color-secondary);
}

.herobanner .sell-vlc .vl-bxone p {
    font-size  : var(--font-size-h2);
    color      : var(--color-secondary);
    line-height: 40px;
    font-weight: var(--font-weight-regular);
    padding-top: 230px;
}



@keyframes dumpEffect {
    0% {
        opacity  : 0;
        transform: translateY(-200px) rotate(10deg);
    }

    70% {
        opacity  : 1;
        transform: translateY(10px) rotate(-5deg);
    }

    85% {
        transform: translateY(-5px) rotate(3deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.herobanner .sell-vlc .vl-bxtwo {
    flex: 0 0 20%;
}


.herobanner .sell-vlc .vl-bxtwo {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    /* space between stacked images */
    position      : relative;
    width         : 100%;
}

.herobanner .sell-vlc .vl-bxtwo img {
    width    : 100%;
    opacity  : 0;
    transform: translateY(-200px);
    animation: dumpStack 0.8s cubic-bezier(0.3, 1.5, 0.6, 1) forwards;
    /* 👈 important */
}

/* staggered delay */
.herobanner .sell-vlc .vl-bxtwo img:nth-child(1) {
    animation-delay: 0.2s;
}

.herobanner .sell-vlc .vl-bxtwo img:nth-child(2) {
    animation-delay: 0.7s;
}

.herobanner .sell-vlc .vl-bxtwo img:nth-child(3) {
    animation-delay: 1.2s;
}

.herobanner .sell-vlc .vl-bxtwo img:nth-child(4) {
    animation-delay: 1.7s;
}

/* dump + bounce animation */
@keyframes dumpStack {
    0% {
        opacity  : 0;
        transform: translateY(-200px);
    }

    70% {
        opacity  : 1;
        transform: translateY(15px);
    }

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

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

.herobanner .sell-vlc .vl-bxthree {
    flex        : 0 0 calc(50% - 13.33px);
    padding-left: 21px;
}

.herobanner .sell-vlc .vl-bxthree h1 {
    font-family   : var(--font-family-secondary);
    font-weight   : 800;
    font-size     : 230px;
    line-height   : 195px;
    letter-spacing: -4px;
    text-transform: uppercase;
    color         : var(--color-secondary);
}

.herobanner .sell-vlc .bg-og {
    background-color: var(--color-primary);
    display         : flex;
    max-width       : fit-content;
    margin-top      : 20px;
}

.herobanner .sell-vlc .bg-og p {
    font-family   : Khula;
    font-weight   : var(--font-weight-bold);
    font-size     : 43px;
    text-transform: uppercase;
    color         : var(--color-text-light);
    padding       : 10px;
    line-height   : 40px;

}

p.cd_line {

    font-weight: var(--font-weight-regular);
    font-size  : 32px;
    line-height: 32px;
    color      : var(--color-secondary);
    padding    : 156px 0px 0px 258px;

}

p.cd_line span {
    color: var(--color-primary);
}

/* banner page css end */
/* what you get css started  */
.what-yu-gt {
    background-color: var(--color-secondary);
    padding         : 80px 60px 24px;
    margin-bottom   : 140px;
}

.what-yu-gt .flex-bx {
    display        : flex;
    justify-content: space-between;
}

.what-yu-gt .flex-bx .cont-block {
    position: relative;
}

.what-yu-gt .flex-bx .cont-block h2 {
    font-weight   : 800;
    font-size     : 85px;
    line-height   : 95px;
    font-family   : var(--font-family-secondary);
    color         : var(--color-text-light);
    text-transform: uppercase;
    position      : absolute;
    letter-spacing: -4px;
}

.what-yu-gt .flex-bx .cont-block ul li {
    background     : #252525;
    padding        : 30px 27px;
    color          : var(--color-text-light);
    margin-bottom  : 20px;
    font-weight    : var(--font-weight-semibold);
    width          : 100%;
    display        : flex;
    gap            : 20px;
    letter-spacing : -2px;
    font-family    : var(--font-family-secondary);
    font-size      : 46px;
    text-align     : right;
    line-height    : 46px;
    justify-content: space-between;
    transition     : 0.35s ease-in-out;
}

.what-yu-gt .flex-bx .cont-block ul li:hover {
    color: var(--color-primary);
}

.what-yu-gt .flex-bx .cont-block ul li span {
    color      : #B9B6B6;
    font-family: var(--font-family-secondary);
    font-size  : 46px;
    line-height: 46px;
    font-weight: var(--font-weight-semibold);
}

.wd35 {
    width: 35%;
}

.wd60 {
    width: 60%;
}

/* what you get css end  */
/* rvsf block css started  */
.rvsf .flx-bx-hd {
    display        : flex;
    justify-content: space-between;
    padding-bottom : 60px;
}

.rvsf .flx-bx-hd .ct-blck {
    flex-direction : column;
    justify-content: space-between;
    display        : flex;
}

.rvsf .flx-bx-hd h3 {
    font-weight   : 800;
    font-size     : 85px;
    line-height   : 95px;
    font-family   : var(--font-family-secondary);
    color         : var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: -4px;
}

.rvsf .flx-bx-hd .ct-blck p {
    font-size  : 36px;
    line-height: 36px;
    font-family: var(--font-family-secondary);
    color      : var(--color-secondary);
    font-weight: var(--font-weight-semibold);
    text-align : right;
}

.rvsf .flx-bx-hd .ct-blck span {
    font-size  : 28px;
    line-height: 32px;
    font-family: var(--font-family-primary);
    color      : var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-align : right;

}

.rvsf .grid-block {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows   : auto auto;
    gap                  : 20px;
}

.rvsf .block_three {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows   : auto auto;
    gap                  : 20px;
}

.rvsf .grid-block .cnt-block {
    background: #F2F2F2;
    padding   : 30px;
}

span.cnt {

    font-weight   : var(--font-weight-regular);
    color         : #575757;
    font-size     : var(--font-size-h5);
    font-family   : var(--font-family-primary);
    display       : block;
    padding-bottom: 10px;

}

p.hding_cnt {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-semibold);
    font-size     : 46px;
    line-height   : 50px;
    color         : var(--color-secondary);
    padding-bottom: 30px;
}

.rvsf .grid-block .cnt-block ul li {

    font-weight: var(--font-weight-regular);

    font-size     : 22px;
    color         : var(--color-secondary);
    line-height   : 25px;
    letter-spacing: 0%;
    padding-bottom: 30px;
    display       : flex;
    gap           : 20px;

}

.rvsf .grid-block .cnt-block ul li span {
    color      : var(--color-primary);
    font-size  : 28px;
    line-height: 32px;
    max-width  : 230px;
    width      : 100%;
    display    : block;
}

span.lg_free {
    font-size     : 28px;
    line-height   : 32px;
    font-family   : var(--font-family-primary);
    color         : var(--color-secondary);
    font-weight   : var(--font-weight-regular);
    padding-bottom: 30px;
    display       : block;
}

/* Ring-with-dot bullets */
.ring-bullets {
    list-style: none;
    /* hide default bullets */
    margin    : 0;
    padding   : 0;
}

.ring-bullets li {
    /* Tweak these CSS variables to change color/size */
    --bullet-color: #f59e0b;
    /* amber-500 */
    --bullet-size : 18px;
    /* outer ring size */
    --ring-width  : 3px;
    /* ring thickness */
    --dot-size    : 8px;
    /* center dot size */
    padding-bottom: 20px !important;
    position      : relative;
    padding-left  : calc(var(--bullet-size) + 14px);
    /* space for the custom bullet */
    font-weight   : var(--font-weight-semibold) !important;
    color         : var(--color-secondary);

}

/* Outer ring */
.ring-bullets li::before {
    content      : "";
    position     : absolute;
    left         : 0;
    top          : 21%;
    width        : var(--bullet-size);
    height       : var(--bullet-size);
    border-radius: 50%;
    border       : var(--ring-width) solid var(--bullet-color);
    transform    : translateY(-50%);
    box-sizing   : border-box;
    background   : transparent;
    /* keeps the white gap effect */
}

/* Center dot */
.ring-bullets li::after {
    content      : "";
    position     : absolute;
    top          : 21%;
    left         : calc((var(--bullet-size) - var(--dot-size)) / 2);
    width        : var(--dot-size);
    height       : var(--dot-size);
    background   : var(--bullet-color);
    border-radius: 50%;
    transform    : translateY(-50%);
}

/* rvsf block css end  */
/* sell your vehicle page css end  */


/* about us page css started */
/* banner css started */
.hide-bn-dskt {
    display: none;
}

.mb_mison_bg {
    display: none;
}

.hd_detp {
    display         : none;
    background-color: var(--color-primary);
    color           : var(--color-text-light);
    padding         : 29px 46px;
    font-size       : 28px;
    line-height     : 33px;
}

.about-us-banner .grid-block-about-us {
    display: grid;

    grid-template-rows   : auto auto;
    grid-template-columns: 50% 50%;
    gap                  : 20px;
    margin-top           : 10px;
}

.about-us-banner .grid-block-about-us .block1 h1 {
    font-family: var(--font-family-secondary);

    font-style    : var(--font-weight-bold);
    font-size     : 270px;
    color         : var(--color-secondary);
    line-height   : 190px;
    letter-spacing: -4px;
    text-transform: uppercase;
    padding-bottom: 80px;

}

.about-us-banner .grid-block-about-us .block2 h1 {
    font-family: var(--font-family-secondary);

    font-style    : var(--font-weight-bold);
    font-size     : 270px;
    color         : var(--color-secondary);
    line-height   : 190px;
    letter-spacing: -4px;
    text-transform: uppercase;

}

.about-us-banner .grid-block-about-us .block2 .block-bg {
    display      : flex;
    margin-bottom: 80px;
}

.about-us-banner .grid-block-about-us .block2 .block-bg p {
    background-color: var(--color-primary);
    color           : var(--color-text-light);
    padding         : 29px 46px;
    font-size       : 28px;
    line-height     : 33px;
}

.about-us-banner .grid-block-about-us .block1 p {
    color         : var(--color-secondary);
    font-size     : 43px;
    line-height   : 50px;
    text-transform: uppercase;
    font-weight   : var(--font-weight-bold);
}

.about-us-banner .grid-block-about-us .block1 p span {
    color: var(--color-primary);
}

.about-us-banner .grid-block-about-us .block1 {
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

.about-us-banner .grid-block-about-us .block1 button {
    font-weight  : var(--font-weight-bold);
    font-size    : 30px;
    color        : var(--color-secondary);
    text-align   : center;
    display      : block;
    width        : 100%;
    border-radius: 30px;
}

.about-us-banner .grid-block-about-us .block1 button img {
    max-width: 20px;
}

.about-us-banner .grid-block-about-us .block2 img {
    margin-bottom: 0px;
}

/* banner css end */
/* vission-mission css started  */
.vission-mission {
    padding: 220px 0px 140px;
}

.vission-mission .vission-block {
    position       : relative;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}

.vission-mission .vission-block h2 {
    font-family   : var(--font-family-secondary);
    font-weight   : 800;
    color         : var(--color-secondary);
    font-size     : var(--font-size-hundred);
    line-height   : 90px;
    letter-spacing: -4px;

}

img.vission_img {
    max-width: 1462px;
    position : absolute;
    right    : 0px;
    z-index  : -1;
    top      : 0px;
}



.vission-mission .vission-block .border-ct {
    border-bottom: 4px dashed var(--color-secondary);
    max-width    : 1415px;
    width        : 100%;
    position     : relative;
}

.vission-mission .vission-block .border-ct::before {
    height          : 18px;
    width           : 18px;
    background-color: var(--color-primary);
    content         : '';
    position        : absolute;
    left            : -9px;
    border-radius   : 50%;
    top             : -7px;
}

p.clean_greener {
    background    : #F2F2F2;
    padding       : 30px;
    margin        : 60px 0px 80px;
    font-weight   : var(--font-weight-bold);
    color         : var(--color-secondary);
    font-size     : 43px;
    line-height   : 43px;
    text-transform: uppercase;

}

p.clean_greener span {
    color: var(--color-primary);
}

.triangle {
    width        : 0;
    height       : 0;
    border-top   : 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left  : 40px solid black;
    position     : absolute;
    right        : -39px;
    /* top       : -19px; */
    bottom       : -22px;
}

.vission-mission .mission-block {
    position       : relative;
    display        : flex;
    justify-content: space-between;
    gap            : 80px;
    align-items    : baseline;
}

.vission-mission .mission-block h3 {
    font-family   : var(--font-family-secondary);
    font-weight   : 800;
    color         : var(--color-secondary);
    font-size     : var(--font-size-hundred);
    line-height   : 90px;
    letter-spacing: -4px;
    display       : block;
    width         : 100%;
    text-align    : right;
    display       : block;
    max-width     : fit-content;
    padding-bottom: 120px;

}

.vission-mission .mission-block .border-ct {
    border-bottom   : 4px dashed var(--color-secondary);
    /* max-width    : 1415px; */
    width           : 100%;
    position        : relative;
}

img.mission_img {
    max-width: 1266px;
    position : absolute;
    left     : 0px;
    z-index  : -1;
    top      : 76px;

}


ul.ul_li_missblck li {
    font-family     : var(--font-family-secondary);
    font-weight     : var(--font-weight-regular);
    font-size       : 36px;
    line-height     : 36px;
    color           : var(--color-secondary);
    letter-spacing  : -1px;
    display         : flex;
    align-items     : center;
    gap             : 70px;
    border-top      : 2px solid #B9B6B6;
    background-color: var(--color-text-light);
    padding         : 8px 0px;
    position        : relative;
    padding-left    : 212px;

}

ul.ul_li_missblck li:last-child {
    padding-left: 0px;
}

ul.ul_li_missblck li img {
    max-width: fit-content;
}

ul.ul_li_missblck li:after {
    height          : 92px;
    width           : 16px;
    background-color: var(--color-primary);
    position        : absolute;
    content         : '';
    left            : 0px;
}

ul.ul_li_missblck li:last-child::after {
    display: none;
}

ul.ul_li_missblck li p {
    font-family     : var(--font-family-secondary);
    font-weight     : var(--font-weight-regular);
    font-size       : 36px;
    line-height     : 36px;
    color           : var(--color-text-light);
    letter-spacing  : -1px;
    display         : flex;
    align-items     : center;
    gap             : 70px;
    background-color: var(--color-primary);
    padding         : 8px 0px;
    position        : relative;
    width           : 100%;
    padding-left    : 212px;
}

/* vission-mission css end  */
/* why we re diffrent css started */
.why-diffrent {
    background-color: var(--color-secondary);
    padding         : 80px 0px;
    position        : relative;
}

.why-diffrent h4 {
    font-family   : var(--font-family-secondary);
    font-weight   : 800;
    color         : var(--color-text-light);
    font-size     : var(--font-size-hundred);
    line-height   : 90px;
    letter-spacing: -4px;
}

img.benfit_bg {
    position : absolute;
    right    : 0px;
    max-width: 1350px;
    top      : 82px;

}

.why-diffrent .grid-block3 {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    padding              : 60px 0px 20px;
    gap                  : 20px;
    z-index              : 1;
    position             : relative;
    align-items          : flex-end;

}

.why-diffrent .grid-block3 .block1 {
    background     : #252525;
    padding        : 30px 30px 72px;
    height         : 480px;
    min-height     : 480px;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

.why-diffrent .grid-block3 .block1 p {
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-semibold);
    color      : #B9B6B6;
    font-size  : 46px;
    line-height: 40px;

}

.why-diffrent .grid-block3 .block1 span {
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-semibold);
    color      : var(--color-text-light);
    font-size  : 46px;
    line-height: 55px;
}

.why-diffrent .grid-block3 .block2 {
    background     : #252525;
    padding        : 30px 30px 72px;
    height         : 400px;
    min-height     : 400px;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

.why-diffrent .grid-block3 .block2 p {
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-semibold);
    color      : #B9B6B6;
    font-size  : 46px;
    line-height: 40px;

}

.why-diffrent .grid-block3 .block2 span {
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-semibold);
    color      : var(--color-text-light);
    font-size  : 46px;
    line-height: 55px;
}

.why-diffrent .grid-block3 .block3 {
    background     : #252525;
    padding        : 30px 30px 72px;
    height         : 320px;
    min-height     : 320px;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

.why-diffrent .grid-block3 .block3 p {
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-semibold);
    color      : #B9B6B6;
    font-size  : 46px;
    line-height: 40px;

}

.why-diffrent .grid-block3 .block3 span {
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-semibold);
    color      : var(--color-text-light);
    font-size  : 46px;
    line-height: 55px;
}

/* why we re diffrent css end */
/* about us page css end */

/* partner with us page css started */
/* banner css started */
.partner-with-banner {
    padding-bottom: 80px;
}

.hd_mb_blck {
    display: none;
}

.partner_wtbgimg {
    background-image : url(../images/partunion_img.png);
    background-repeat: no-repeat;
    background-size  : auto;
    width            : 100%;
    height           : 900px;
    position         : relative;
    min-height       : 900px;
}

p.local_garage {
    color      : var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size  : 30px;
    line-height: 35px;
}

.partner_wtbgimg h1 {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-bold);
    font-size     : 200px;
    line-height   : 200px;
    letter-spacing: -4px;
    text-transform: uppercase;
}

.partner_wtbgimg .flx-bx {
    position: relative;
}

p.partner_wthgov {
    position   : absolute;
    bottom     : 23px;
    width      : 250px;
    /* right   : 0px; */
    left       : 275px;
    font-weight: var(--font-weight-regular);
    font-size  : 28px;
    line-height: 31px;
    color      : var(--color-secondary);
}

.partner_wtbgimg .org_block {
    padding         : 60px 95px;
    max-width       : 375px;
    width           : 100%;
    position        : absolute;
    right           : 30px;
    bottom          : 30px;
    background-color: var(--color-primary);
}

.partner_wtbgimg .org_block p {
    font-weight: var(--font-weight-regular);
    font-size  : 32px;
    line-height: 35px;
    color      : var(--color-text-light);
}

/* banner css end */
/* why partner with us css started */
.why-diffrent .grid-block3pt {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    padding              : 60px 0px 20px;
    gap                  : 20px;
    z-index              : 1;
    position             : relative;
    align-items          : flex-end;
    /* overflow-x        : scroll; */
}

.why-diffrent .grid-block3pt p.block1p {
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-semibold);
    color      : #B9B6B6;
    font-size  : 46px;
    display    : flex;
    gap        : 20px;
    line-height: 40px;
}

.why-diffrent .grid-block3pt .block1p span {
    color: var(--color-text-light);
}

.why-diffrent .grid-block3pt .block1 {
    background     : #252525;
    padding        : 30px 30px 72px;
    height         : 480px;
    min-height     : 480px;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

.why-diffrent .grid-block3pt p.block2p {
    font-weight: var(--font-weight-regular);
    font-size  : 28px;
    line-height: 32px;
    color      : var(--color-text-light);

}

.why-diffrent .grid-block3pt p.block2p span {
    color: var(--color-primary);

}

.why-diffrent .grid-block3pt .block2 {
    background     : #252525;
    padding        : 30px 30px 72px;
    height         : 400px;
    min-height     : 400px;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

.why-diffrent .grid-block3pt .block3 {
    background     : #252525;
    padding        : 30px 30px 72px;
    height         : 320px;
    min-height     : 320px;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

.why-diffrent .grid-block3pt .block4 {
    background     : #252525;
    padding        : 30px 30px 72px;
    height         : 240px;
    min-height     : 240px;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

/* why partner with us css end */
/* ideal partner with us css started */
.ideal-partner {
    padding: 140px 0px 80px;
}

.ideal-partner .ideal_partners h5 {
    font-family   : var(--font-family-secondary);
    font-weight   : 800;
    font-size     : var(--font-size-hundred);
    line-height   : 90px;
    letter-spacing: -4px;
    color         : var(--color-secondary);
}

.ideal-partner .ideal_partners {
    display : flex;
    position: relative;
    gap     : 25px;

}

.bnr_bg {
    position : absolute;
    top      : 0px;
    z-index  : -1;
    max-width: fit-content;
}

img.arow_img {
    max-width: 185px;
    position : relative;
    top      : 10px;
}



.ideal-partner .wrapper {

    margin  : 40px auto;
    padding : 0 0px;
    position: relative;
    /* allow previews to overflow to the right */
}

.category-list {
    list-style: none;
    margin    : 0;
    padding   : 0;
    border-top: 1px solid #B9B6B6;
}

.category-item {
    position     : relative;
    border-bottom: 1px solid #B9B6B6;
    background   : var(--color-text-light);
    transition   : background-color .2s ease, color .2s ease;
    padding      : 44px 0px 44px 212px;
}

/* Thin orange marker on the left */
.category-item::before {
    content      : "";
    position     : absolute;
    left         : 0px;
    top          : 50%;
    transform    : translateY(-50%);
    width        : 16px;
    height       : 92px;
    background   : var(--color-primary);
    border-radius: 1px;
}

.category-link {
    display       : block;
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-regular);
    font-size     : 36px;
    letter-spacing: -3px;
    line-height   : 42px;
    color         : var(--color-secondary);


}

.category-item:hover {
    background: var(--color-primary);

}

.category-item:hover .category-link {
    /* background: var(--color-primary); */
    color: var(--color-text-light);
}

/* Hover/focus preview image */
.ideal-partner .preview {
    position      : absolute;
    left          : 850px;
    top           : 50%;
    transform     : translateY(-50%);
    width         : 360px;
    aspect-ratio  : 16 / 9;
    object-fit    : cover;
    border        : 4px solid var(--color-text-light);
    border-radius : 4px;
    box-shadow    : 0 10px 24px rgba(0, 0, 0, .08);
    opacity       : 0;
    visibility    : hidden;
    transition    : opacity .18s ease, visibility .18s ease;
    pointer-events: none;
    z-index       : 1;
}

.category-item:hover .preview,
.category-item:focus-within .preview {
    opacity   : 1;
    visibility: visible;
}

/* ideal partner with us css end */
/* join our network css started  */
.join-ntwrk .flxblck {
    display        : flex;
    justify-content: space-between;
    align-items    : flex-start;
}

.join-ntwrk .flxblck h6 {
    font-family   : var(--font-family-secondary);
    font-weight   : 800;
    font-size     : 250px;
    line-height   : 181px;
    letter-spacing: -4px;
    text-transform: uppercase;
    max-width     : fit-content;
}

.join-ntwrk .flxblck span {
    background   : var(--color-secondary);
    height       : 30px;
    width        : 30px;
    border-radius: 100%;
    animation    : blink 5s infinite;
}

@keyframes blink {
    0% {
        opacity   : 1;
        background: var(--color-secondary);
    }

    25% {
        opacity   : 0;
        background: var(--color-primary);
    }

    50% {
        opacity   : 1;
        background: var(--color-primary);
    }

    75% {
        opacity   : 0;
        background: var(--color-primary)
    }

    100% {
        opacity   : 1;
        background: var(--color-secondary);
    }
}

.join-ntwrk .flx-block {
    display: flex;
    gap    : 5px;
}

.join-ntwrk .flx-block h6 {
    font-family   : var(--font-family-secondary);
    font-weight   : 800;
    font-size     : 250px;
    line-height   : 172px;
    letter-spacing: -4px;
    text-transform: uppercase;
    max-width     : fit-content;
}

.join-ntwrk .flx-block img {
    height         : 173px;
    object-fit     : cover;
    object-position: top;
}

.wrapperblock p:first-child {

    font-weight: var(--font-weight-bold);

    font-size     : 43px;
    text-transform: uppercase;
    line-height   : 48px;
    color         : var(--color-secondary);
    padding-top   : 60px;

}


.wrapperblock span {

    font-weight   : var(--font-weight-bold);
    font-family   : var(--font-family-primary);
    font-size     : 43px;
    text-transform: uppercase;
    line-height   : 48px;
    color         : var(--color-primary);
    padding-top   : 20px;
    display       : block;
    padding-left  : 455px;

}

.wrapperblock .flxbx-btn {
    display        : flex;
    padding-left   : 455px;
    justify-content: space-between;
    padding-top    : 40px;
}

.wrapperblock .flxbx-btn button:first-child {
    font-weight   : var(--font-weight-regular);
    font-size     : var(--font-size-h1);
    color         : var(--color-secondary);
    line-height   : 36px;
    letter-spacing: -1px;
    background    : #F2F2F2;
    border-radius : 20px;
    width         : 49%;
}

.wrapperblock .flxbx-btn button:first-child:hover {
    background-color: var(--color-primary);
}

.wrapperblock .flxbx-btn button:last-child {
    font-weight   : var(--font-weight-regular);
    font-size     : var(--font-size-h1);
    color         : var(--color-secondary);
    line-height   : 36px;
    letter-spacing: -1px;
    background    : var(--color-primary);
    border-radius : 20px;
    width         : 49%;
}

.wrapperblock .flxbx-btn button:last-child:hover {
    background: #c77d05;
    color     : var(--color-text-light);
}

/* join our network css end  */

/* partner with us page css started */

/* contact us page css started */
/* banner css started */
.contact-us-banner .txt-block {
    display        : flex;
    justify-content: center;
}

.contact-us-banner .txt-block img {
    max-width      : 376px;
    animation      : clawGrab 2s ease-out 1 forwards, clawIdle 2s ease-in-out infinite;
    animation-delay: 0s, 2s;

}

.contact-us-banner .txt-block h1 {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-bold);
    font-size     : 200px;
    line-height   : 180px;
    letter-spacing: -4px;
    text-transform: uppercase;

}

.contact-us-banner .txt-block h2 {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-bold);
    font-size     : 200px;
    line-height   : 180px;
    letter-spacing: -4px;
    text-transform: uppercase;

}


.form-block .form-row {
    display      : flex;
    gap          : 15px;
    margin-bottom: 10px;

}

.form-block .form-group {
    flex: 1;
}

.form-block .form-group.full-width {
    width        : 100%;
    margin-bottom: 10px;
}

.form-block input[type="text"],
.form-block input[type="email"],
.form-block textarea {
    font-family  : var(--font-family-primary);
    font-weight  : 300;
    font-size    : 28px;
    width        : 100%;
    background   : #E4E4E4;
    border       : none;
    border-radius: 10px;
    box-sizing   : border-box;
    transition   : background-color 0.3s ease;
}

.form-block input[type="text"]:focus,
.form-block input[type="email"]:focus,
.form-block textarea:focus {
    background-color: #ddd;
}

.form-block textarea {
    height       : 120px;
    resize       : vertical;
    box-sizing   : border-box;
    font-family  : var(--font-family-primary);
    font-weight  : 300;
    font-size    : 28px;
    border-radius: 10px;
    width        : 100%;
    background   : #E4E4E4;
    border       : none;
    box-sizing   : border-box;
}

.form-block .submit-btn {
    width        : 100%;
    font-weight  : var(--font-weight-bold);
    font-size    : 30px;
    line-height  : 31px;
    padding      : 84px 0px;
    text-align   : center;
    border-radius: 30px;
    cursor       : pointer;
    transition   : background-color 0.3s ease;
}

.form-block .submit-btn:hover {
    background-color: #e67e00;
}

.form-block .submit-btn:active {
    background-color: #cc7000;
}

.form-block .flx-bx {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 20px;
    padding-top          : 80px;
}

.form-block-inner h2 {
    font-family   : var(--font-family-secondary);
    font-weight   : 800;
    font-size     : var(--font-size-hundred);
    line-height   : 70px;
    letter-spacing: -4px;
    padding-bottom: 60px;
}

.map-wrap {
    position        : relative;
    width           : 100%;
    /* aspect-ratio : 16 / 9; */
    /* keeps it responsive */
    overflow        : hidden;
    border-radius   : 0px;
}

.map-wrap iframe {
    width : 100%;
    height: 100%;
    border: 0;
    filter: grayscale(100%) contrast(1.1);
}

.contact-details-adds {
    padding: 153px 0px 60px;
}

.contact-details-adds .cont-list {
    position: relative;
}

.ct_bnr {
    position: relative;
    z-index : -1;
    top     : 67px;
}

.contact-details-adds ul {
    background-color: var(--color-text-light);
}

.contact-details-adds ul li {
    display       : flex;
    gap           : 600px;
    border-top    : 2px solid #B9B6B6;
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-regular);
    font-size     : 28px;
    line-height   : 34px;
    padding       : 30px 0px;
    letter-spacing: -2px;
    color         : var(--color-secondary);

}

.contact-details-adds ul li span {
    font-size     : 36px;
    line-height   : 36px;
    letter-spacing: -3px;
    max-width     : 350px;
    width         : 100%;
    display       : block;
}

/* banner css end */
/* contact us page css end */
/* blog page css started  */
.blog-banner .flx-bx {
    display        : flex;
    justify-content: space-between;
    align-items    : end;
    padding-bottom : 100px;
}

.blog-banner .flx-bx h1 {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-bold);
    font-size     : 245px;
    line-height   : 170px;
    letter-spacing: -4px;
    color         : var(--color-secondary);
    text-transform: uppercase;

}

.blog-banner .flx-bx p {
    font-weight: var(--font-weight-regular);
    font-size  : 20px;
    line-height: 25px;
    text-align : right;
    color      : var(--color-secondary);

}

.blog-banner img {
    position: relative;
    bottom  : -40px;
    z-index : -1;
}

.filter-sort .flex-searchblock .searchbox {
    position : relative;
    max-width: 500px;
    width    : 100%;
}

.filter-sort .flex-searchblock .searchbox img {
    position : absolute;
    max-width: 48px;
    right    : 60px;
    top      : 10px;
}

.filter-sort .flex-searchblock .searchbox input {
    background-color: var(--color-primary);
    border          : none;
    color           : var(--color-text-light);
    border-radius   : 20.22px;
    font-size       : 36px;
    font-weight     : var(--font-weight-regular);
    /* line-height  : 13px; */
    padding         : 5px 25px 5px;
    font-family     : var(--font-family-secondary);
    line-height     : 36px;
}

.filter-sort .flex-searchblock .searchbox input::placeholder {
    color: var(--color-text-light);
}

.flex-searchblock {
    display        : flex;
    justify-content: space-between;
    margin-bottom  : 40px;
}

.filter-sort .flex-searchblock .searchbox {
    display        : flex;
    justify-content: space-between;
}

.filter-sort .flex-searchblock button {
    display        : flex;
    font-family    : var(--font-family-secondary);
    border-radius  : 20.22px;
    font-size      : 36px;
    font-weight    : var(--font-weight-regular);
    line-height    : 36px;
    letter-spacing : -3px;
    padding        : 10px;
    max-width      : 220px;
    width          : 100%;
    /* display     : block; */
    align-items    : center;
    justify-content: center;
    gap            : 20px;


}

.filter-sort .flex-searchblock button img {
    max-width: fit-content;
}

/* grid blog css started */

.blog-fd .grid-block {
    display   : flex;
    transition: background-color 0.3s ease;
    gap       : 20px;
}

.flip-block {
    flex-direction: row-reverse;
}

.blog-fd .grid-block {
    border : 2px dashed #00000066;
    padding: 20px;
}

.blog-fd .grid-block .content-block span.blg_date {
    font-family   : var(--font-family-primary);
    font-weight   : var(--font-weight-regular);
    display       : block;
    font-size     : 25px;
    color         : var(--color-secondary);
    line-height   : 25px;
    padding-bottom: 20px;

}

.blog-fd .grid-block .content-block p.heading_blg {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-semibold);
    line-height   : 80px;
    font-size     : 80px;
    color         : var(--color-secondary);
    letter-spacing: -3px;
}

.blog-fd .grid-block .content-block {
    position       : relative;
    flex-direction : column;
    justify-content: space-between;
    display        : flex;
    width          : 50%;
}

.blog-fd .image-wrapper {
    width: 50%;
}

.blog-fd .grid-block p.blg_twop {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size  : 32px;
    line-height: 37px;
    color      : var(--color-secondary);
}

.blog-fd .grid-block .content-block img.crwl_icon {
    max-width: 40px;
    top      : -5px;

}

.blog-fd .grid-block .content-block a {
    background    : #E4E4E4;
    width         : 96%;
    display       : block;
    margin-top    : 10px;
    border-radius : 10px;
    text-align    : center;
    padding       : 26px 0px 17px;
    font-weight   : var(--font-weight-semibold);
    font-size     : 32px;
    line-height   : 32px;
    text-transform: uppercase;
    color         : var(--color-secondary);
}

.blog-fd .grid-block .content-block a svg {
    fill  : var(--color-secondary);
    width : 21px;
    height: 21px;
}

.blog-fd .grid-block:hover {
    background-color: #f2f2f2;
    transition      : background-color 0.3s ease;
    border          : 2px solid #EF930040;
}

.blog-fd .grid-block:hover a {
    color           : var(--color-primary);
    background-color: var(--color-text-light);
}

.blog-fd .grid-block:hover a svg {
    fill: var(--color-primary);
}

.blog-section .two-block {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 20px;
    margin               : 60px 0px;
}

.blog-section .two-block .block_wimg {
    display: flex;
    gap    : 180px;
}

.blog-section .two-block .block_wimg p {
    font-weight: var(--font-weight-regular);
    font-size  : 16px;
    line-height: 16px;
}

.blog-section .two-block .block_wimg {
    border : 2px dashed #00000066;
    padding: 20px 10px;
}

.blog-section .two-block .block_wimg .cnt-block p {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-semibold);
    line-height   : 60px;
    font-size     : 60px;
    letter-spacing: -4px;
    color         : var(--color-secondary);
    padding-bottom: 20px;
}

.blog-section .two-block .block_wimg .cnt-block span {
    font-family   : var(--font-family-primary);
    font-weight   : 400;
    font-size     : 28px;
    line-height   : 30px;
    letter-spacing: 0px;
    display       : block;
}

.blog-section .two-block .block_wimg .cnt-block a {
    background : #E4E4E4;
    font-family: var(--font-family-secondary);
    font-weight: 600;

    font-size      : 16px;
    justify-content: center;
    letter-spacing : 0px;
    text-transform : uppercase;
    max-width      : 238px;
    color          : var(--color-secondary);
    text-align     : center;
    width          : 100%;
    padding        : 13px 0px;
    margin-top     : 20px;
    border-radius  : 10px;
    display        : flex;
    align-items    : center;
    gap            : 12px;
}

.blog-section .two-block .block_wimg .cnt-block a svg {
    fill: var(--color-secondary);
}

.blog-section .two-block .block_wimg:hover {
    background-color: #f2f2f2;
    transition      : background-color 0.3s ease;
    border          : 2px solid #EF930040;
}

.blog-section .two-block .block_wimg:hover a {
    color           : var(--color-primary);
    background-color: var(--color-text-light);
}

.blog-section .two-block .block_wimg:hover a svg {
    fill: var(--color-primary);
}

button.blog_mr {

    font-weight     : var(--font-weight-bold);
    font-size       : 30px;
    line-height     : 30px;
    text-align      : center;
    display         : block;
    width           : 100%;
    background-color: var(--color-primary);
    text-transform  : uppercase;
    color           : var(--color-secondary);
    border-radius   : 10px;
    margin-top      : 60px;
}

/* blog page css end  */

/* inner blog page css started */
/* banner css started  */
.inner-blog-banner .wraper {
    position     : relative;
    margin-bottom: 40px;
}

.inner-blog-banner .wraper h1 {
    font-family   : var(--font-family-secondary);
    font-weight   : 800;
    font-size     : 100px;
    line-height   : 100px;
    letter-spacing: -4px;
    color         : var(--color-secondary);

}

.inner-blog-banner .wraper .inner-blog-banner {
    position: relative;

}

.inner-blog-banner .wraper .image-wrapper h2 {
    position      : absolute;
    font-family   : var(--font-family-secondary);
    font-weight   : 800;
    font-size     : 90px;
    line-height   : 90px;
    letter-spacing: -4px;
    color         : var(--color-secondary);
}

.inner-dt-ct .flx-wrapper {
    display           : flex;
    /* justify-content: center; */
    gap               : 285px;
}

.inner-dt-ct span {
    font-family   : var(--font-family-primary);
    font-weight   : var(--font-weight-semibold);
    font-size     : 32px;
    line-height   : 32px;
    letter-spacing: 0%;
    text-align    : right;
    color         : var(--color-primary);
}

.inner-dt-ct .flx-wrapper .content-block {
    display  : flex;
    gap      : 20px;
    max-width: 1050px;
    width    : 100%;
}

.inner-dt-ct .flx-wrapper .content-block p:first-child {
    max-width     : 590px;
    width         : 100%;
    font-weight   : var(--font-weight-semibold);
    font-size     : 28px;
    line-height   : 32px;
    letter-spacing: 0%;
    color         : var(--color-secondary);
}

.inner-dt-ct .flx-wrapper .content-block p:last-child {
    max-width     : 430px;
    width         : 100%;
    font-weight   : var(--font-weight-semibold);
    font-size     : 28px;
    line-height   : 32px;
    letter-spacing: 0%;
    color         : var(--color-secondary);
}

.inner-dt-ct .flx-wrapper .content-block p span {
    font-size: 28px;
}

/* banner css end  */
/* wd block css started */
.width-mx .wd-block {
    max-width   : 1200px;
    width       : 100%;
    margin      : 0px auto;
    padding-left: 220px;
    padding-top : 80px;
}

.width-mx .wd-block h3 {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-semibold);
    font-size     : 46px;
    line-height   : 42px;
    color         : var(--color-secondary);
    padding-bottom: 40px;
}

.width-mx .wd-block p:nth-child(2) {
    font-weight   : var(--font-weight-regular);
    font-size     : 25px;
    color         : var(--color-secondary);
    line-height   : 30px;
    padding-bottom: 40px;
}

.width-mx .wd-block span {
    font-family   : var(--font-family-primary);
    font-weight   : var(--font-weight-semibold);
    font-size     : 28px;
    line-height   : 32px;
    letter-spacing: 0px;
    color         : var(--color-primary);
}

.width-mx .wd-block p:nth-child(4) {
    font-weight   : var(--font-weight-regular);
    font-size     : 25px;
    color         : var(--color-secondary);
    line-height   : 30px;
    padding-bottom: 20px;
}

.width-mx .wd-block p:nth-child(6) {
    font-weight   : var(--font-weight-regular);
    font-size     : 25px;
    color         : var(--color-secondary);
    line-height   : 30px;
    padding-bottom: 20px;
}

.width-mx .wd-block p:nth-child(8) {
    font-weight   : var(--font-weight-regular);
    font-size     : 25px;
    color         : var(--color-secondary);
    line-height   : 30px;
    padding-bottom: 40px;
}

.width-mx .wd-block p:nth-child(10) {
    font-weight: var(--font-weight-regular);
    font-size  : 25px;
    color      : var(--color-secondary);
    line-height: 30px;
    padding    : 40px 0px 110px;
}

.width-mx .wd-block h4 {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-semibold);
    font-size     : 46px;
    line-height   : 42px;
    color         : var(--color-secondary);
    padding-bottom: 40px;
}

.width-mx .wd-block p:nth-child(12) {
    font-weight   : var(--font-weight-regular);
    font-size     : 25px;
    color         : var(--color-secondary);
    line-height   : 30px;
    padding-bottom: 40px;
}

.width-mx .wd-block p:nth-child(14) {
    font-weight: var(--font-weight-regular);
    font-size  : 25px;
    color      : var(--color-secondary);
    line-height: 30px;
    padding    : 40px 0px 110px;
}

.width-mx .wd-block h5 {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-semibold);
    font-size     : 46px;
    line-height   : 42px;
    color         : var(--color-secondary);
    padding-bottom: 40px;
}

.width-mx .wd-block p:nth-child(16) {
    font-weight: var(--font-weight-regular);
    font-size  : 25px;
    color      : var(--color-secondary);
    line-height: 30px;
    padding    : 0px 0px 40px;
}

.width-mx .wd-block .flx-block {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
}

.width-mx .wd-block p:nth-child(25) {
    font-weight: var(--font-weight-regular);
    font-size  : 25px;
    color      : var(--color-secondary);
    line-height: 30px;
    padding    : 0px 0px 40px;
}

.dt_bg {
    font-weight: var(--font-weight-regular);
    font-size  : 25px;
    color      : var(--color-secondary);
    line-height: 30px;
    padding    : 0px 0px 0px;
}

.width-mx .main-wrapper {
    border-bottom : 1px solid #00000066;
    padding-bottom: 160px;
}

/* wd block css end */
/* blog slider css started  */
.blog-slider h6 {
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-semibold);
    font-size  : 46px;
    line-height: 46px;
    color      : var(--color-primary);
    padding    : 40px 0px;
}

.blog-slider .grid-wrapper {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 20px 20px;
}

.blog-slider .grid-wrapper .grid-block {
    border : 2px dashed #EF930040;
    padding: 10px;
}

.blog-slider .grid-wrapper .grid-block {
    display   : flex;
    transition: background-color 0.3s ease;
}

.blog-slider .grid-wrapper .grid-block .content-block {
    width          : 40%;
    position       : relative;
    flex-direction : column;
    /* stack items vertically */
    justify-content: space-between;
    /* spread them apart */

    display: flex;
}

.blog-slider .grid-wrapper .grid-block .image-wrapper {
    width: 60%;
}

img.crwl_icon {
    position : absolute;
    top      : 0px;
    right    : 20px;
    max-width: 20px;
}

.blog-slider .grid-wrapper .grid-block .content-block p.heading_blg {
    font-family   : var(--font-family-secondary);
    font-weight   : var(--font-weight-semibold);
    line-height   : 40px;
    font-size     : 36px;
    color         : var(--color-secondary);
    letter-spacing: -3px;

}

.blog-slider .grid-wrapper .grid-block .content-block span.blg_date {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    display    : block;
    font-size  : 12px;
    color      : var(--color-secondary);
    line-height: 12px;
    padding-top: 10px;

}

p.blg_twop {

    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size  : 16px;
    line-height: 22px;
    color      : var(--color-secondary);

}

.blog-slider .grid-wrapper .grid-block .content-block a {
    background    : #E4E4E4;
    width         : 96%;
    display       : block;
    margin-top    : 10px;
    border-radius : 10px;
    text-align    : center;
    padding       : 12px 0px;
    font-weight   : var(--font-weight-semibold);
    font-size     : 16px;
    line-height   : 16px;
    text-transform: uppercase;
    color         : var(--color-secondary);
}

.blog-slider .grid-wrapper .grid-block .content-block a svg {
    fill: var(--color-secondary);
}

.blog-slider .grid-wrapper .grid-block:hover {
    background-color: #f2f2f2;
    transition      : background-color 0.3s ease;
    border          : 2px solid #EF930040;
}

.blog-slider .grid-wrapper .grid-block:hover a svg {
    fill: var(--color-primary);
}

.blog-slider .grid-wrapper .grid-block:hover a {
    color: var(--color-primary);
}

a.more_btn {
    background-color: var(--color-primary);
    color           : var(--color-secondary);
    display         : block;
    text-align      : center;
    font-weight     : 700;
    font-style      : var(--font-weight-bold);
    font-size       : 30px;
    text-align      : center;
    line-height     : 30px;
    border-radius   : 10px;
    margin-top      : 40px;
    padding         : 16px 0px 7px;
}

.blog-slider .wrapper-btn {
    position: relative;
}

.wrapper-btn .nav-btn.prev {
    background-color: #E4E4E4;
    color           : #6c757d;
}

.wrapper-btn .nav-btn.prev {
    width          : 86px;
    height         : 86px;
    border-radius  : 20px;
    border         : none;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 18px;
    transition     : all 0.3s ease;
    position       : absolute;
    /* top         : 20%; */
    z-index        : 1;
    /* left        : 50%; */
    top            : 54%;
    transform      : translate(0%, -50%);
    left           : -32px;

}

.wrapper-btn .nav-btn.next {
    background-color: #E4E4E4;
    color           : white;
}

.wrapper-btn .nav-btn.next {

    width          : 86px;
    height         : 86px;
    border-radius  : 20px;
    border         : none;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 18px;
    transition     : all 0.3s ease;
    position       : absolute;
    /* top         : 20%; */
    z-index        : 1;
    /* left        : 50%; */
    top            : 54%;
    transform      : translate(0%, -50%);
    right          : -32px;
}

.wrapper-btn .nav-btn:hover {

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

.wrapper-btn .nav-btn:hover {

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

/* inner blog page css end */
a.whatsapp-icon {

    width    : 75px;
    animation: beat .60s infinite alternate;

    position: fixed;
    right   : 30px;
    bottom  : 30px;
    z-index : 4444;
}

@keyframes beat {
    to {
        transform: scale(1.1);
    }
}

.preview-container {
    display   : flex;
    flex-wrap : wrap;
    margin-top: 5px;
    gap       : 5px;
}

.img-preview-wrapper {
    position: relative;
    width   : 80px;
    height  : 80px;
}

.img-preview {
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    border-radius: 4px;
    border       : 1px solid #ccc;
}

.remove-img {
    position       : absolute;
    top            : -6px;
    right          : -6px;
    background     : red;
    color          : #fff;
    border-radius  : 50%;
    width          : 18px;
    height         : 18px;
    display        : flex;
    justify-content: center;
    align-items    : center;
    cursor         : pointer;
    font-weight    : bold;
}