@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");



* {

    box-sizing: border-box;

    padding: 0;

    margin: 0;

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





}



audio,

canvas,

embed,

iframe,

object,

svg,

video {

    display: block;

    height: auto;

    max-width: 100%;

    width: 100%;

}



summary {

    display: list-item;

}



body,

html {

    height: 100%;

}



html {

    font-size: 100%;

    scroll-behavior: smooth;

}



body {

    line-height: 1.4;



    -webkit-overflow-scrolling: touch;



    -ms-overflow-style: scrollbar;



    background-color: #ffffff;

}



body::-webkit-scrollbar {

    width: 10px;

}



body::-webkit-scrollbar-track {

    background-color: #e7e7e7;

}



body::-webkit-scrollbar-thumb {

    background-color: #9f6300;

    border: 1px solid #9f6300;

    border-radius: 10px;

}



p {

    font-size: 15px;

    color: #1c1c1c;

    line-height: 1.55;

    margin-bottom: 1rem;

    font-weight: 500;

}



a,

a:hover,

a:focus,

button:hover,

button:focus,

input:focus {

    outline: none !important;

    text-decoration: none !important;

}



.h1,

.h2,

.h3,

.h4,

.h5,

.h6,

h1,

h2,

h3,

h4,

h5,

h6 {

    color: #000;

}

a {
    color: #00459E;
}

/*------Parallax Css----------*/

.parallax {

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-size: cover;

    background-position-x: center;

}



.animation {

    animation-duration: 0.5s;

    animation-timing-function: linear;

    animation-delay: 0s;

    animation-iteration-count: 1;

    animation-direction: normal;

    animation-fill-mode: forwards;

    animation-play-state: running;

}



@keyframes slide-up {

    from {

        opacity: 0;

        top: 100px;

    }



    to {

        opacity: 1;

        top: 0;

    }

}



.animation_slide-up {

    animation-name: slide-up;

}



@keyframes slide-down {

    from {

        opacity: 0;

        bottom: 100px;

    }



    to {

        opacity: 1;

        bottom: 0;

    }

}



.animation_slide-down {

    animation-name: slide-down;

}



@keyframes slide-left {

    from {

        opacity: 0;

        left: 100px;

    }



    to {

        opacity: 1;

        left: 0;

    }

}



.animation_slide-left {

    animation-name: slide-left;

}



@keyframes slide-right {

    from {

        opacity: 0;

        right: 100px;

    }



    to {

        opacity: 1;

        right: 0;

    }

}



.animation_slide-right {

    animation-name: slide-right;

}



@keyframes flip-x {

    from {

        opacity: 0;

        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);

    }



    to {

        opacity: 1;

        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);

    }

}



.animation_flip-x {

    backface-visibility: visible;

    animation-name: flip-x;

}



@keyframes flip-y {

    from {

        opacity: 0;

        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

    }



    to {

        opacity: 1;

        transform: perspective(400px);

    }

}



.animation_flip-y {

    backface-visibility: visible !important;

    animation-name: flip-y;

}



@keyframes zoom {

    from {

        opacity: 0;

        transform: scale3d(0.3, 0.3, 0.3);

    }



    to {

        opacity: 1;

    }

}



.animation_zoom {

    animation-name: zoom;

}



/*-----Custome Css Area----*/



.sec_padding {

    padding: 30px 0
}



/*------Main Header--------*/

/*.container {*/
/*    max-width: 1340px;*/
/*}*/

.main_header {

    /*position: relative;*/

    background-color: #fff !important;

    height: 10px;

}

.main_header {

    position: fixed;
    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 9;

    -webkit-animation: smoothScroll 1s forwards;

    animation: smoothScroll 1s forwards;

    box-shadow: var(--bs-box-shadow) !important;

    height: 190px;
}

.main_header.sticky {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 9;

    -webkit-animation: smoothScroll 1s forwards;

    animation: smoothScroll 1s forwards;

    box-shadow: var(--bs-box-shadow) !important;

    height: 190px;

}



@-webkit-keyframes smoothScroll {

    0% {

        -webkit-transform: translateY(-40px);

        transform: translateY(-40px);

    }



    100% {

        -webkit-transform: translateY(0px);

        transform: translateY(0px);

    }

}



@keyframes smoothScroll {

    0% {

        -webkit-transform: translateY(-40px);

        transform: translateY(-40px);

    }



    100% {

        -webkit-transform: translateY(0px);

        transform: translateY(0px);

    }

}



.main_header .navbar-brand {



    margin-top: 0px;

    padding: 0px 10px 0;

    z-index: 0;

    -webkit-transition: all 500ms ease-in-out;

    -o-transition: all 500ms ease-in-out;

    transition: all 500ms ease-in-out;

    display: flex;

}



.main_header .navbar-brand .logo-2 {

    display: none
}



.main_header.sticky .navbar-brand {

    padding: 5px 10px 0;

    background-color: inherit;

    z-index: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

    -webkit-transition: all 500ms ease-in-out;

    -o-transition: all 500ms ease-in-out;

    transition: all 500ms ease-in-out;

}



.main_header.sticky .navbar-brand .logo-1 {

    display: none
}



.main_header.sticky .navbar-brand .logo-2 {

    display: block
}



.main_header.sticky .navbar-brand::after {

    display: none;

}



.bg_blue {

    background: #00459E;

}



.topmain_section {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 4px 0px;

}



.top_left {

    display: flex;

    align-items: center;

}



.top_right {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}



.sell_avamartmain {

    display: flex;

    gap: 5px;

    justify-content: space-between;

    align-items: center;

}



.sell_avamartmain img {

    width: auto;

}



.sell_avamartmain p {

    margin: 0px;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

}



.sell_avamartmain p span {

    color: #FFCC4B;

}



.link_button {

    gap: 20px;

    display: flex;

}



.link_button a {

    color: #00459E;

    font-size: 12px;

    font-weight: 700;

    background: #fff;

    border-radius: 30px;

    padding: 8px 16px;

}



.google_tral {

    position: relative;

}

.header_mid_mainsection {

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

}



/* Default select styling */

.google_tral .form-select {

    width: 100%;

    padding: 12px 45px 12px 15px;

    font-size: 14px;

    font-weight: 600;

    border: none;

    border-radius: 0px;

    background-color: transparent;

    appearance: none;

    cursor: pointer;

    transition: all 0.2s ease;

    color: #fff;

    box-shadow: none;

}



.google_tral .form-select:focus {

    outline: none;

    border-color: #4285f4;

    box-shadow: none;

}



.google_tral .form-select option {

    color: #000;

}



/* Custom arrow styles */

.google_tral::after {

    content: "";

    position: absolute;

    top: 50%;

    right: 15px;

    transform: translateY(-50%);

    width: 0;

    height: 0;

    pointer-events: none;

}





/* Arrow Style 4 - Modern Arrow */

.arrow-4::after {

    width: 10px;

    height: 10px;

    border-right: 2px solid #fff;

    border-bottom: 2px solid #fff;

    transform: translateY(-70%) rotate(45deg);

}



/* header mid section start */

.header_mid_section {

    display: flex;

    justify-content: space-between;

    padding: 15px 0px;

}



.header_mid_right {

    display: flex;

    justify-content: space-around;

    gap: 40px;

}



.mid_cart_section {

    display: flex;

    justify-content: space-around;

    gap: 20px;

    align-items: center;

}



.mid_cart_section a {

    position: relative;

}



.mid_cart_section a span {

    position: absolute;

    top: -5px;

    right: -14px;

    background: #DC2626;

    width: 20px;

    height: 20px;

    border-radius: 100px;

    padding: 2px;

    color: #fff;

    font-weight: 600;

    font-size: 12px;

    line-height: 16px;

    text-align: center;

}



.sign_main a {

    display: flex;

    justify-content: space-around;

    gap: 6px;

    padding: 8px 12px 8px 12px;

    line-height: 20px;

    background: #F0F0F0;

    border-radius: 32px;

    align-items: center;

}



.sign_main a img {

    width: auto;

}



.sign_main a p {

    margin: 0px;

    color: #242424;

    font-weight: 600;

    font-size: 14px;

}





.dropdown-toggle {

    background-color: rgba(240, 240, 240, 1);

    border-color: rgba(240, 240, 240, 1);

    gap: 4px;

    padding: 10px 12px 10px 20px;

    border-radius: 30px;

    /*font-family: Inter;*/

    font-weight: 500;

    font-style: Medium;

    font-size: 14px;

    line-height: 20px;

    letter-spacing: 0%;

    color: rgba(75, 85, 99, 1);

}







.dropdown-menu.show {
    padding: 0px !important;
    background: #fff;
}

.dropdown-menu li a {
    padding: 6px 10px;

    /*font-family: Inter;*/

    font-weight: 500;

    font-style: Medium;

    font-size: 14px;

    line-height: 20px;

    letter-spacing: 0%;

    color: rgba(75, 85, 99, 1) !important;
}

.dropdown-menu li a:hover {
    color: #fff !important;
    background-color: rgb(0 69 158);
}

.dropdown-menu li a.active {
    color: #fff !important;
    background-color: rgb(0 69 158);
}

/* --- Tab Navigation --- */

.modular_interiors_section {
    padding: 0px 0px;
}

.nav-pills {

    background: transparent;

    /*gap: 10px;*/

}

.nav-pills .nav-link {

    color: rgba(131, 131, 131, 1);

    font-weight: 600;

    padding: 12px 25px;

    border-radius: 50px;

    font-size: 1.125rem;

    transition: all 0.3s ease;

}

.nav-pills .nav-link.active {

    background-color: rgba(0, 69, 158, 1);



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

}



/* --- Main Featured Card --- */

.featured-card {

    border-radius: 24px;

    color: white;

    padding: 40px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    min-height: 550px;

    position: relative;

    overflow: hidden;

    background-size: cover;

    background-position: center;

    border: none;

}

/* Dark Overlay for text readability */

.featured-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

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

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);

    z-index: 1;

}

.featured-card-content {

    position: relative;

    z-index: 2;

}

.featured-card-content h2 {
    color: rgba(255, 255, 255, 1);
    font-size: 1.5rem;
}

.featured-card-content p {
    color: rgba(255, 255, 255, 1);
}



.featured-card-content .btn-primary {
    background: rgba(0, 69, 158, 1);
    font-size: 0.75rem;
    font-weight: 600;
    border-color: rgba(0, 69, 158, 1);
}

.featured-card-content .btn-primary:hover {
    background: transparent;
}

.featured-card-content .btn-outline-light {
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    border-color: rgba(255, 255, 255, 1);
}

.featured-card-content .btn-outline-light:hover {
    border-color: rgba(0, 69, 158, 1);
    color: rgb(255, 255, 255);
}

.pill-badge {

    background: rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 50px;

    padding: 6px 14px;

    font-size: 12px;

    margin: 0 8px 8px 0;

    display: inline-block;

}



/* --- Right Side Cards --- */

.gallery-item-wrapper {

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    height: 160px;
    /* Fixed height for consistency */

}



.gallery-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.gallery-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 10px 12px;

    /* Dark gradient at the bottom for text readability */

    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);

    color: white;

}



.stars {

    color: #ffc107;
    /* Golden yellow for stars */

    font-size: 10px;

    letter-spacing: 1px;

    margin-bottom: 2px;

}



.location-text {

    font-size: 11px;

    font-weight: 500;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



/* Ensuring the card matches the white box in the image */

.white-card {

    background: white;

    border-radius: 20px;

    padding: 24px;

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

    height: 100%;

}

.see_more {
    color: rgba(0, 69, 158, 1) !important;
    font-size: 0.75rem;
    font-weight: 700;
}

.title_homeinters {
    color: rgba(36, 36, 36, 1);
    font-size: 1.25rem;
    font-weight: 600;
}



/* --- Step Tracker --- */

.step_title {
    color: rgba(36, 36, 36, 1);
    font-size: 1.25rem;
    font-weight: 600;
}

.step-container {

    display: flex;

    justify-content: space-between;

    position: relative;

    padding-top: 10px;

}

.step-container::before {

    content: "";

    position: absolute;

    top: 25px;

    left: 10%;

    right: 10%;

    height: 1px;

    background: #e0e0e0;

    z-index: 0;

}

.step-item {

    position: relative;

    z-index: 1;

    text-align: center;

    width: 15%;

}

.step-number {

    width: 32px;

    height: 32px;

    background: rgba(234, 243, 255, 1);

    color: rgba(0, 69, 158, 1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 12px;

    font-weight: 700;

}

.step-text {

    font-size: 0.875rem;

    font-weight: 500;

    color: rgba(36, 36, 36, 1);

}



/* --- Checklist --- */

.check-list {

    list-style: none;

    padding: 0;

}

.check-list li {

    margin-bottom: 16px;

    font-size: .875rem;

    display: flex;

    align-items: center;

    font-weight: 400;

    color: rgba(36, 36, 36, 1);

}

.check-list li::before {

    content: "✓";

    background: rgba(87, 160, 255, 0.24);

    color: rgba(37, 99, 234, 1);

    width: 22px;

    height: 22px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-right: 12px;

    font-size: 11px;

    font-weight: bold;

}



.gallery-img {

    border-radius: 14px;

    width: 100%;

    height: 140px;

    object-fit: cover;

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

}

.excludes {
    color: rgba(107, 114, 128, 1);
    font-weight: 400;
    font-style: Regular;
    font-size: 11px;
    line-height: 100%;
}

/*===========================Nav bar=========================*/

.stellarnav {

    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    vertical-align: middle;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    position: relative;

    z-index: 1;

    line-height: normal;

    justify-content: center;

}

.stellarnav ul {

    margin: 0;

    padding: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    vertical-align: middle;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}

.stellarnav li {

    list-style: none;

    display: block;

    margin: 0;

    padding: 0;

    position: relative;

    line-height: normal;

}

/* .stellarnav ul li:nth-child(5) {

    margin-right: 235px;

} */

.stellarnav li a {

    position: relative;

    padding-left: 35px;

    margin-bottom: 10px;

    display: block;

    border-bottom: none;

    margin: 0;

    padding: 20px 19px;

    text-transform: capitalize;

    font-weight: 600;

    letter-spacing: 0.5px;

    font-size: 14px;

    color: #242424;

}

.stellarnav li a:hover {

    color: #03399d;

}

.stellarnav ul ul {

    top: 82%;

    padding: 0;

    min-width: max-content;

    position: absolute;

    z-index: 9900;

    box-shadow: 0 0 14px 0 #0000001f;

    text-align: left;

    display: none;

    background: #ddd;

}

.stellarnav li li {

    display: block;

}

.stellarnav ul ul ul {

    top: 0;

    left: 220px;

}

.stellarnav>ul>li:hover>ul>li:hover>ul {

    opacity: 1;

    visibility: visible;

    top: 0;

}

.stellarnav>ul>li.drop-left>ul {

    right: 0;

}

.stellarnav li.drop-left ul ul {

    left: auto;

    right: 220px;

}

.stellarnav.light {

    background: #fff;

}

.stellarnav.light a {

    color: #000;

}

.stellarnav.light ul ul {

    background: #fff;

}

.stellarnav.light li a {

    color: #000;

}

.stellarnav.dark ul ul {

    background: #fff;

    -webkit-border-bottom-right-radius: 8px;

    -webkit-border-bottom-left-radius: 8px;

    -moz-border-radius-bottomright: 8px;

    -moz-border-radius-bottomleft: 8px;

    border-bottom-right-radius: 8px;

    border-bottom-left-radius: 8px;

}

.stellarnav.fixed {

    position: fixed;

    width: 100%;

    top: 0;

    left: 0;

    z-index: 9999;

}

body.stellarnav-noscroll-x {

    overflow-x: hidden;

}

.stellarnav li.has-sub>a:after {

    /*content: '';

    background:url('images/Vector%20(1).png');

    margin-left: 10px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-top: 6px solid #242424;

    display: inline-block;*/

}

.stellarnav li li.has-sub>a:after {

    margin-left: 10px;

    float: right;

    border-top: 6px solid transparent;

    border-bottom: 6px solid transparent;

    border-left: 6px solid #00379C;

    position: relative;

    top: 4px;

}

.stellarnav li.drop-left li.has-sub>a:after {

    float: left;

    margin-right: 10px;

    border-left: 0;

    border-top: 4px solid transparent;

    border-bottom: 4px solid transparent;

    border-right: 4px solid #fff;

}

.stellarnav.hide-arrows li li.has-sub>a:after,

.stellarnav.hide-arrows li.drop-left li.has-sub>a:after,

.stellarnav.hide-arrows li.has-sub>a:after {

    display: none;

}

.stellarnav .call-btn-mobile,

.stellarnav .close-menu,

.stellarnav .location-btn-mobile,

.stellarnav .menu-toggle {

    display: none;

    text-transform: uppercase;

    text-decoration: none;

}

.stellarnav .dd-toggle {

    display: none;

    position: absolute;

    top: 0;

    right: 0;

    padding: 0;

    width: 48px;

    height: 44px;

    text-align: center;

    z-index: 9999;

    border: 0;

}

.stellarnav.desktop li.has-sub a {

    padding-right: 15px;

}

.stellarnav.desktop li.has-sub ul li a {

    padding: 10px 20px;

    font-size: 14px;

    color: #242424;

    text-transform: capitalize;
    font-weight: 400;

}

.stellarnav.desktop li.has-sub ul li a:hover {

    color: #03399d;

}

.stellarnav.desktop.hide-arrows li.has-sub a {

    padding-right: 15px;

}

.stellarnav.mobile>ul>li>a.dd-toggle {

    padding: 0;

}

.stellarnav li.call-btn-mobile,

.stellarnav li.location-btn-mobile {

    display: none;

}

.stellarnav svg {



    fill: currentColor;

    width: 1em;

    height: 1em;

    position: relative;

    top: 2px;

}

/*========Scroll Top======*/



.scrollToTop {

    width: 34px;

    height: 34px;

    border-radius: 25px;

    text-align: center;

    font-weight: bold;

    background: #fff;

    text-decoration: none;

    position: fixed;

    bottom: 20px;

    right: 0;

    z-index: 33;

    /*display: none;*/

}

/*-----------------------------hero section--------------------------------*/

.hero {

    height: 650px;

    background-image: url('../images/Home Repair Hero 1.png');

    background-size: cover;

    background-position: center;

    position: relative;

    display: flax;

    align-items: center;

    margin-top: 180px;

}



.overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

}



.hero-content {

    display: flex;

    flex-item-align: center;

    position: relative;

    color: white;

}



.hero-text {

    /*background-color:red;*/

    max-width: 550px;

    margin-top: 10%;

    margin-left: 10%;

}



.tag {

    display: inline-block;

    background: #24242499;

    padding: 8px 14px;

    border-radius: 6px;

    font-weight: 800;

    font-style: Extra Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 28px;

    letter-spacing: 12%;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 20px;

    color: #FCC020;

}



.hero-text h1 {

    color: #FFFFFF;



    font-weight: 700;

    font-style: Bold;

    font-size: 48px;

    leading-trim: NONE;

    line-height: 56px;

    letter-spacing: -1%;



    margin-bottom: 20px;





}



.hero-text p {



    font-weight: 500;

    font-style: Medium;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 26px;

    letter-spacing: -1%;

    vertical-align: middle;



    color: #FFFFFF;

    margin-bottom: 25px;

}



.hero-buttons {

    display: flex;

    gap: 15px;

}



.btn-yellow {

    color: #242424;

    background: #FCC020;

    border: none;

    padding: 14px 28px;

    border-radius: 30px;



    font-weight: 600;

    font-style: Semi Bold;

    font-size: 16px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;



}



.btn-light {



    font-weight: 600;

    font-style: Semi Bold;

    font-size: 16px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;



    color: #242424;

    background: #FFFFFF;

    border: none;

    padding: 14px 28px;

    border-radius: 30px;

}





@media(max-width:1024px) {

    /*.container {*/

    /*    width: 90%;*/

    /*}*/

    .hero-text h1 {

        font-size: 38px;

    }

}



@media(max-width:768px) {

    .topmenu {

        display: none;

    }



    .hero {

        height: auto;

        padding: 100px 0;

    }



    .hero-buttons {

        flex-direction: column;

    }



    .hero-text h1 {

        font-size: 30px;



    }

}

/*=========================trust section===============================*/

.trust-section {

    padding: 50px 20px;

    text-align: center;

}



.container {

    /*max-width: 1350px;*/

    margin: auto;

}



h2 {

    font-size: 36px;

    font-weight: 700;

    margin-bottom: 10px;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 36px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    text-align: center;



}



h2 span {

    color: #2d8cff;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 36px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    text-align: center;



}



.subtitle {

    color: #6B7280;

    margin-bottom: 20px;

    font-weight: 400;

    font-style: Regular;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 26px;

    letter-spacing: -1%;

    vertical-align: middle;



}



.tag-btn {

    padding: 10px 20px;

    border-radius: 25px;

    border: 1px solid #0000001A;

    background: white;

    color: #2563EA;

    margin-bottom: 40px;

    cursor: pointer;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;



}



.trust-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}



.cardT {

    display: flex;

    align-items: center;

    background: white;

    border-radius: 15px;

    overflow: hidden;

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

}



.cardT img {

    width: 246px;

    transition: transform 0.4s ease;

    /*height:142px;*/

    /*object-fit:cover;*/

}

cardT :hover img {

    transform: scale(1.2);
    /* zoom */

}

.cardT .text {



    padding: 20px;

    text-align: left;

}



.cardT h3 {

    color: #242424;

    font-weight: 700;

    font-style: Bold;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    margin-bottom: 10px;

}



.cardT p {

    color: #6B7280;

    font-weight: 500;

    font-style: Medium;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;



}



/* Tablet */



@media (max-width:900px) {



    .trust-grid {

        grid-template-columns: 1fr;

    }



    .cardT {

        flex-direction: column;

        text-align: center;

    }



    .cardT img {

        width: 100%;

        height: 200px;

    }

    .cardT:hover img {

        transform: scale(1.2);
        /* zoom */

    }

    .cardT .text {

        text-align: center;

    }



}



/* Mobile */



@media (max-width:500px) {



    h2 {

        font-size: 26px;

    }



    .subtitle {

        font-size: 14px;

    }



}

/*===================Problem section===============================*/



.problem-section {

    padding: 30px 20px;

}



.problem-section .container {

    max-width: 1350px;

    margin: auto;

    /*padding:20px;*/

}







.problem-section .section-title {

    text-align: center;

    margin-bottom: 50px;

}



.problem-section .top-tag {


    display: ruby-text;


    background: #EAF3FF;

    color: #2563EA;

    padding: 8px 14px;

    border-radius: 20px;

    font-weight: 800;

    font-style: Extra Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 28px;

    letter-spacing: 12%;

    text-align: center;

    vertical-align: middle;

    text-transform: uppercase;



}



.problem-section .section-title h2 {



    font-weight: 600;

    font-style: Semi Bold;

    font-size: 36px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    text-align: center;

    color: linear-gradient(90deg, #2563EA 0%, #0FA4E9 100%);

    margin-top: 15px;

}



.problem-section .section-title p {

    font-weight: 400;

    font-style: Regular;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 26px;

    letter-spacing: -1%;

    text-align: center;

    vertical-align: middle;



    color: #6B7280;

    margin-top: 10px;



}



/* GRID */



.problem-section .problem-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}



/* CARD */



.problem-section .problem-card {

    background: white;

    border-radius: 14px;

    overflow: hidden;

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

}



/* IMAGE */



.problem-section .image-box {

    position: relative;

}



.problem-section .image-box img {

    width: 100%;

    height: 260px;

    object-fit: cover;



}

.problem-section .badge span {

    font-weight: 600;

    background: linear-gradient(90deg, #2563EA 0%, #0FA4E9 100%);



    /* 2. Clip the background to the text */

    -webkit-background-clip: text;

    background-clip: text;

    /* 3. Make the actual text transparent so the background shows through */

    -webkit-text-fill-color: transparent;

    color: transparent;



}

.problem-section .badge {

    position: absolute;

    top: 15px;

    right: 15px;

    background: white;

    padding: 8px 14px;

    border-radius: 20px;

    font-size: 13px;

    /*color:#1e63d5;*/

}



/* CONTENT */



.problem-section .card-content {

    padding: 25px;

    text-align: left;

}



.problem-section .problem-label {

    color: #23A192;

    font-weight: 700;

    font-style: Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 5%;

    text-transform: uppercase;



}



.problem-section .card-content h3 {



    font-weight: 700;

    font-style: Bold;

    font-size: 20px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    color: #242424;

    margin: 10px 0 20px;



}



.problem-section .info-row {

    margin-bottom: 12px;

}



.problem-section .info-row strong {

    font-weight: 700;

    font-style: Bold;

    font-size: 13px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;

    margin-bottom: 12px;

    color: #4B5563;

    display: flex;

    gap: 10px;

    align-items: center;

}

.problem-section .info-row1 strong {

    font-weight: 700;

    font-style: Bold;

    font-size: 13px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;

    margin-bottom: 12px;



    color: #EF4444;

    display: flex;

    gap: 5px;

}

.problem-section .info-row p {

    font-weight: 400;

    font-style: Regular;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;



    color: #242424;

    display: block;

    gap: 16px;

}

.problem-section .info-row1 p {

    font-weight: 400;

    font-style: Regular;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;



    color: #242424;

    display: flex;

    gap: 50px;

}

/* BOTTOM BAR */



.problem-section .solution-bar {

    background: #0a4fa6;

    color: #fff;

    padding: 15px;

    font-size: 13px;

    text-align: left;

    font-weight: 700;

}

.problem-section .solution-bar p {

    font-weight: 400;

    font-style: Regular;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;

    color: #F3F4F6;

}





/* RESPONSIVE */



@media(max-width:992px) {



    .problem-grid {

        grid-template-columns: 1fr;

    }



    .section-title h2 {

        font-size: 28px;

    }



    .image-box img {

        height: 220px;

    }



}

/*------------------------Health Check Section-------------------------------*/

.cta-section {

    padding: 50px 20px;

    background: #fff;

}



.cta-container {



    max-width: 1350px;

    margin: auto;

    background: #fff;

    border-radius: 18px;

    padding: 40px 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border: 1px solid #e5e7eb;

    box-shadow: 20px 40px 100px 0px #00000014;



}





.cta-label {



    color: #23A192;

    font-weight: 700;

    font-style: Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 5%;

    text-transform: uppercase;

}



.cta-title {

    font-weight: 700;

    font-style: Bold;

    font-size: 32px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;



    margin: 10px 0;

    padding: 0px;

    color: #242424;

    text-align: left;

}



.cta-desc {

    font-weight: 400;

    font-style: Regular;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 24px;

    letter-spacing: -1%;

    color: #242424;

    margin-bottom: 25px;

}



.cta-note {

    list-style: none;

    padding: 0px;

}

.cta-note li {

    position: relative;

    padding-left: 35px;

    margin-bottom: 10px;

    color: #242424;

    font-weight: 500;

    font-style: Italic;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: -1%;



}

.cta-note li::before {

    content: url('../images/Line.svg');

    position: absolute;

    left: 0;

    width: 22px;

    height: 22px;

    background: #eef4ff;

    color: rgba(37, 99, 234, 1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    font-size: 0.8rem;

}





.cta-btn {

    display: inline-block;

    background: #FCC020;

    color: #242424;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 16px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    padding: 14px 28px;

    border-radius: 40px;

    text-decoration: none;

    transition: 0.3s;



}

.cta-btn::after {}

.cta-btn:hover {

    background: #e0a300;

}





@media(max-width:768px) {


    .problem-section .info-row p {

        display: block !important;

    }

    .problem-section .info-row1 p {
        display: block !important;
    }

    .problem-section .info-row1 p img {
        height: 16px;
    }

    .problem-section .solution-bar img {
        margin-right: 7px;
    }

    .consultation-section .step-content small span {

        margin: auto;

    }


    .cta-container {

        flex-direction: column;

        align-items: flex-start;

    }



    .cta-right {

        margin-top: 20px;

    }



    .cta-title {

        font-size: 26px;

    }



}



/*<!--    ====================DIAGNOSE section===================-->*/

.ndt-tools-section {

    padding: 50px 20px;

    background-color: transparent;

    /*box-shadow: 20px 40px 100px 0px #00000014;*/



}



.ndt-wrapper {

    max-width: 1350px;

    margin: auto;

    text-align: center;



}

.g {

    padding: 2px 13px;

    border-radius: 8px;

    background: rgba(234, 243, 255, 1);

    display: inline-block;

}

.ndt-pill {



    background: linear-gradient(90deg, #2563EA 0%, #0FA4E9 100%);



    /* 2. Clip the background to the text */

    -webkit-background-clip: text;

    background-clip: text;

    /* 3. Make the actual text transparent so the background shows through */

    -webkit-text-fill-color: transparent;

    color: transparent;

    padding: 6px 14px;

    border-radius: 20px;

    font-weight: 800;

    font-style: Extra Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 28px;

    letter-spacing: 12%;

    text-align: center;

    vertical-align: middle;

    text-transform: uppercase;

    /*box-shadow: 20px 40px 100px 0px #00000014;*/



}



.ndt-title {

    /*font-size:36px;*/

    margin: 15px 0;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 36px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    text-align: center;

    color: #242424;



    /*box-shadow: 20px 40px 100px 0px #00000014;*/



}



.ndt-subtext {

    color: #6B7280;

    font-weight: 400;

    font-style: Regular;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 26px;

    letter-spacing: -1%;

    text-align: center;

    vertical-align: middle;

    /*box-shadow: 20px 40px 100px 0px #00000014;*/



}



.ndt-cards {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

    margin-top: 40px;

    /*box-shadow:0 10px 20px rgba(0,0,0,0.08);*/



}

.ndt-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

}



.ndt-card {

    /*background:white;*/

    border-radius: 15px;

    overflow: hidden;

    padding-bottom: 20px;

    box-shadow: 20px 40px 100px 0px #00000014;



}



.ndt-card img {

    width: 100%;

    height: 200px;

    object-fit: cover;

}



.ndt-card h3 {

    margin-top: 15px;

    font-weight: 700;

    font-style: Bold;

    font-size: 24px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    text-align: center;

    color: #242424;

}



.ndt-badge {

    display: inline-block;

    margin-top: 8px;

    background: #EAF3FF;

    color: #00459E;

    padding: 8px 10px 8px 10px;

    border-radius: 20px;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    text-transform: uppercase;

    margin: auto;

    border: 1px solid #C6DFFF;

}



.ndt-note {

    margin-top: 30px;

    font-size: 13px;

    color: #6B7280;

    font-weight: 400;

    font-style: Regular;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    text-align: center;



}





@media(max-width:992px) {

    .ndt-cards {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media(max-width:600px) {

    .ndt-cards {

        grid-template-columns: 1fr;

    }

}

/*============================Service===================*/

.home-services {

    /*background:#f5f7fb;*/

    padding: 20px 20px;



}



.home-services .hs-container {

    max-width: 1350px;

    margin: auto;

}



.home-services .hs-header {

    text-align: center;

    margin-bottom: 60px;

}



.home-services .hs-tag {

    background: #EAF3FF;

    color: #2563EA;

    padding: 6px 14px;

    border-radius: 6px;

    font-weight: 800;

    font-style: Extra Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 28px;

    letter-spacing: 12%;

    text-align: center;

    vertical-align: middle;

    text-transform: uppercase;

}



.home-services h2 {

    margin-top: 15px;

    color: #242424;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 36px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    text-align: center;



}



.home-services .hs-header p {

    margin-top: 20px;

    color: #6b7280;

    font-weight: 400;

    font-style: Regular;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 26px;

    letter-spacing: -1%;

    text-align: center;

    vertical-align: middle;



}



.home-services .hs-cards {

    display: flex;

    gap: 28px;

    justify-content: center;

    flex-wrap: wrap;

}



.home-services .hs-card {

    background: #fff;

    padding: 28px;

    border-radius: 14px;

    width: 375px;

    height: 446px;

    border: 1px solid #e6e8ef;

    transition: .3s;

}



.home-services .hs-card:hover {

    transform: translateY(-6px);

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

}



.home-services .hs-card.active {

    border: 2px solid #2f6fed;

}



.home-services .hs-card-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;



    font-weight: 700;

    font-style: Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 8%;

    text-transform: uppercase;



}



.home-services .hs-badge {

    height: 28px;

    max-width: 100px;

    background: #C6DFFF;

    color: rgba(0, 69, 158, 1);



    padding: 5px 10px;

    border-radius: 20px;

    font-weight: 700;

    font-style: Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 1%;

    text-transform: uppercase;

    padding: 8px;

}



.home-services .hs-badge.gray {

    background: #f1f3f7;

    color: #6b7280;

}



.home-services .hs-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eef3ff;

    border-radius: 10px;

    font-size: 22px;

    margin-bottom: 25px;

}



.home-services h3 {

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 20px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    color: #242424;

    margin-bottom: 6px;

}



.home-services .hs-highlight {

    height: 20px;

    font-weight: 500;

    font-style: Medium;

    font-size: 13px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: -1%;

    color: #00459E;

    margin-bottom: 10px;

}

.home-services p {

    color: #6B7280;

    font-weight: 500;

    font-style: Medium;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: -1%;

    margin-bottom: 10px;

}

.home-services ul {

    height: 70px;

    width: 100%;

    /*padding-top:30px;

     padding-bottom:15px;*/

    padding-left: 18px;

    margin-top: 50px;

    color: #6b7280;



}



.home-services li {

    color: #4B5563;

    font-weight: 400;

    font-style: Regular;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;



    margin-bottom: 5px;

}



.home-services .hs-divider {

    border-top: 1px solid #eceef3;

    margin: 18px 0;

}



.home-services .hs-best strong {

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 16px;

    letter-spacing: 0%;

    color: #242424;

}



.home-services .hs-best p {

    font-weight: 500;

    font-style: Medium;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 16px;

    letter-spacing: 0%;

    margin-top: 2px;

    color: #6b7280;

}

/* ---------------------------------Consultation & Inspection Fees---------------------*/

.consultation-section {



    /*background:#f6f8fc;*/

    padding: 50px 20px;

}



.consultation-section .cs-container {

    max-width: 1200px;

    margin: auto;

}



.consultation-section .cs-header {

    text-align: center;

    margin-bottom: 50px;

}



.consultation-section .cs-tag {

    background: #EAF3FF;

    color: #2563EA;

    padding: 6px 14px;

    border-radius: 20px;

    /*font-size:12px;

font-weight:600;*/

    font-weight: 800;

    font-style: Extra Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 28px;

    letter-spacing: 12%;

    text-align: center;

    vertical-align: middle;

    text-transform: uppercase;

}



.consultation-section .cs-header p {

    margin-top: 12px;

    color: #6b7280;

    font-weight: 400;

    font-style: Regular;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 26px;

    letter-spacing: -1%;

    text-align: center;

    vertical-align: middle;



}



.consultation-section .cs-grid {

    display: grid;

    grid-template-columns: 560px 1fr;

    gap: 30px;

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



}



.consultation-section .cs-pricing {

    background-image: url('../images/Overlay.png');

    color: #fff;

    padding: 45px 40px 20px 40px;

    border-radius: 12px;

}



.consultation-section .cs-pricing h3 {

    font-weight: 600;

    font-style: Bold;

    font-size: 24px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;



    margin-bottom: 10px;

    color: #ffffff;

}



.consultation-section .cs-note {

    font-weight: 400;

    font-style: normal;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: -1%;



    font-size: 13px;

    opacity: 0.99;

    color: #fff;

    margin-bottom: 20px;





}



.consultation-section table {

    width: 100%;

    border-collapse: collapse;

    font-size: 14px;

    margin-top: 30px;

    margin-bottom: 30px;



}



.consultation-section th {

    text-align: left;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 10%;

    text-transform: uppercase;

    color: #fff;

    margin-top: 30px;

    margin-bottom: 30px;



}



.consultation-section td {

    padding: 10px 0;

    font-weight: 400;

    font-style: Bold;

    font-size: 16px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    color: #fff;





}



.consultation-section td span {

    font-size: 12px;

    opacity: .7;

    color: #fff;

    opacity: 0.78;





}



.consultation-section .price {

    font-weight: 700;

    font-style: Bold;

    font-size: 16px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;





    font-weight: 600;

    color: #FCC020;





}

.consultation-section .price span {

    font-weight: 400;

    font-style: Regular;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;

    font-size: 12px;

    opacity: .7;

    color: #fff;

    opacity: 0.78;





}

.consultation-section .quoteCI {



    font-weight: 700;

    font-style: Bold;

    font-size: 16px;

    font-style: normal;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;



    color: #FCC020;





}

.consultation-section .quoteCI span {

    font-weight: 400;

    font-style: normal;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;



    /*opacity:.7;*/

    color: #fff;

    opacity: 0.78;



}



.consultation-section .cs-foot {

    font-weight: 400;

    font-style: Regular;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;



    /*opacity:.7;*/

    margin-top: 15px;

    color: #fff;

    opacity: 0.78;



}



.consultation-section .cs-steps {

    display: flex;

    flex-direction: column;

    gap: 18px;

    height: 250px;

}



.consultation-section .cs-step {

    display: flex;

    gap: 18px;

    padding: 20px;

    background: white;

    /*border-radius:12px;*/

    border: 1px solid #e5e7eb;

    border-radius: 6px;

    box-shadow: 0px 6px 30px 0px #0000000D;





}



.consultation-section .step-num {

    width: 36px;

    height: 36px;

    background: #eaf1ff;

    color: #00459E;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-weight: 600;

    display: flex;

}

.step-content {

    flex: 1;

}

.consultation-section .step-content h4 {



    font-weight: 700;

    font-style: Bold;

    font-size: 20px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    color: #242424;

    margin: 8px 0;



}



.consultation-section .step-content p {

    font-weight: 400;

    font-style: Regular;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;

    color: #6b7280;

    margin-bottom: 6px;

}



.consultation-section .step-content small {

    display: inline-block;



    font-weight: 400;

    font-style: Italic;

    font-size: 13px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;



    color: #6b7280;

}

.consultation-section .step-content small span {

    background: #EAF3FF;

    border: 1px solid #FFFFFF;

    border-radius: 20px;

    padding: 4px;

    padding-top: 2px;

    padding-bottom: 2px;

    margin: 8px;



}

.consultation-section .step-content small span::before {

    content: url('../images/Line.svg');



    left: 0;

    margin: 0;

    width: 10px;

    height: 8px;

    justify-content: space-between;
    /* dono ko alag kar dega */

    align-items: center;

}



.consultation-section .step-badge {

    padding: 3px 8px;

    border-radius: 10px;

    font-weight: 600;



    font-weight: 600;

    font-style: Semi Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    text-transform: uppercase;



}



.consultation-section .free {

    background: #e8f0ff;

    color: #00459E;



}



.consultation-section .paid {

    background: #e8f0ff;

    color: #00459E;

}



.consultation-section .quote1 {

    background: #eef6ff;

    color: #00459E;

}





.consultation-section .cs-bottom {

    height: 110px;

    margin-top: 140px;

    background: #ffffff;
    box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.05);



    border: 1px solid #e5e7eb;

    padding: 20px 25px;

    border-radius: 12px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    /*flex-wrap:wrap;*/

}



.consultation-section .cs-bottom p {

    color: rgba(36, 36, 36, 1);

    font-weight: 600;

    font-style: Italic;

    font-size: 20px;

    leading-trim: NONE;

    line-height: 24px;

    letter-spacing: -1%;

    vertical-align: middle;

}



.consultation-section button {

    background: #FCC020;

    border: none;

    padding: 12px 20px;

    border-radius: 25px;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 16px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    color: #242424;

    cursor: pointer;

    height: 48px;
    max-width: 320px;

}

.arrow {

    margin-left: 0px;

    font-weight: 600;

    font-style: extra Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    color: #242424;

    cursor: pointer;

}

/*-------------------------------tablet------------------------*/

@media (max-width:992px) {



    .consultation-section {

        padding: 60px 20px;

    }



    .consultation-section .cs-grid {

        grid-template-columns: 1fr;

    }



    .consultation-section .cs-pricing {

        order: 2;

    }



    .consultation-section .cs-steps {

        order: 1;

    }



}

/*--------------------------mobile----------------------*/

@media (max-width:768px) {



    .consultation-section {

        padding: 50px 15px;

    }



    .consultation-section .cs-header h2 {

        font-size: 22px;

    }



    .consultation-section .cs-header p {

        font-size: 14px;

    }



    .consultation-section .cs-step {

        flex-direction: column;

        gap: 10px;

    }



    .consultation-section .step-num {

        width: 28px;

        height: 28px;

        font-size: 13px;

    }



    .consultation-section .step-content h4 {

        font-size: 16px;

    }



    .consultation-section .step-content p {

        font-size: 13px;

    }



    .consultation-section table {

        font-size: 13px;

    }



}



/*------------------------------portfolio----------------------------*/

.sr-portfolio {



    /*background:#f5f7fb;*/

    padding: 50px 20px;



}



.sr-container {

    max-width: 1150px;

    margin: auto;

}





.sr-head {

    text-align: center;

    margin-bottom: 10px;

}



.sr-tag {

    background: #e8f0ff;

    color: #2f6fed;

    padding: 6px 14px;

    border-radius: 20px;

    font-weight: 800;

    font-style: Extra Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 28px;

    letter-spacing: 12%;

    text-align: center;

    vertical-align: middle;

    text-transform: uppercase;



}



.sr-head h2 {

    margin-top: 12px;

    /*font-size:34px;*/

    color: #111827;

    /*font-family: Inter;*/

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 36px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    text-align: center;



}



.sr-head p {

    margin-top: 10px;

    color: #6B7280;

    /*font-family: Inter;*/

    font-weight: 400;

    font-style: Regular;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 26px;

    letter-spacing: -1%;

    text-align: center;

    vertical-align: middle;



}





.sr-filter {

    max-width: 750px;

    background: #F3F4F6;

    display: flex;

    align-items: center;

    justify-content: center;

    /*gap:10px;*/

    padding: 15px 0px;

    border-radius: 12px;

    border: 1px solid #e5e7eb;

    margin: auto;

    margin-bottom: 30px;

    flex-wrap: wrap;



}



.filter-item {

    flex: 1px;

    padding: 0px 15px;

    text-align: left;

    /*display:flex;

flex-direction:column;

font-size:12px;*/

    max-width: 180px;



}



.filter-item label {

    display: block;

    font-size: 12px;

    font-weight: 700;

    color: #4B5563;

    text-transform: uppercase;

    margin-bottom: 4px;

}



.filter-item select {

    width: 100%;

    border: 1px solid #0000001A;

    padding: 10px 16px;

    border-radius: 6px;

    background: white;

    color: #242424;

    font-size: 14px;

    font-weight: 500;

}



.sr-card {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    background: white;

    border-radius: 14px;

    border: 1px solid #e5e7eb;

    padding: 0px;

}



.sr-left {

    display: flex;

    gap: 15px;



}



.img-box {

    position: relative;

    flex: 1;

    height: 433px;

}



.img-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 14px 0px 0px 14px;

    justify-content: space-center;

    align-items: center;

}



.badge1 {

    position: absolute;

    top: 15px;

    left: 30%;

    background: #242424;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    line-height: 100%;

    letter-spacing: 1%;

    padding: 5px 30px;

    border-radius: 10px;



}

.sr-right {

    padding: 25px 15px;

    margin-right: 20px;



}

.title-row {

    color: rgba(36, 36, 36, 1);

    font-weight: 700;

    font-style: Bold;

    font-size: 36px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    color: #242424;



    display: flex;

    justify-content: space-between;

    align-items: center;

}



.delivered {

    background: #F0FDF4;
    border: 1px solid #86EFAC;
    color: rgba(34, 197, 94, 1);

    /*background:#e6f9ef;

color:#16a34a;*/

    padding: 4px 20px;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;



    border-radius: 20px;

}



.meta {

    font-weight: 400;

    font-style: Regular;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;



    font-size: 13px;

    color: #4B5563;

}



.desc {

    font-weight: 500;

    font-style: Medium;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 22px;

    letter-spacing: 0%;



    margin-top: 10px;

}



.info {

    display: flex;

    gap: 40px;

    margin-top: 20px;

}



.info span {

    font-size: 11px;

    color: #6b7280;

    display: block;

}



.info strong {

    font-size: 15px;

}



.info p {

    font-size: 12px;

    color: #6b7280;

}



.quote {



    font-weight: 400;

    font-style: Italic;

    font-size: 13px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;

    padding-left: 8px;

    margin-top: 15px;

    /*border:1px solid;*/

    color: #242424;

    border-left: 1px solid #6b7280;

    font-style: italic;

}



.btns {

    margin-top: 50px;

    display: flex;

    gap: 20px;

}



.yellow {

    width: 50%;

    background: #f4b000;

    border: none;

    padding: 10px 18px;

    border-radius: 20px;

    font-weight: 600;

    cursor: pointer;

}



.outline {

    width: 50%;

    color: #00459E;

    font-weight: 600;

    background: white;

    border: 1px solid #ddd;

    padding: 10px 18px;

    border-radius: 20px;

}

.thumb-strip {
    display: flex;
    gap: 13px;
    justify-content: center;
    margin-top: 25px;
}

.thumb {
    width: 140px;
    height: 90px;
    border-radius: 10px;
    cursor: pointer;
    border: 4px solid transparent;
    overflow: hidden;
    transition: 0.2s;
    opacity: 60%
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb.active {
    border-color: #2563EA;
    opacity: 100%
}



.sr-load {

    text-align: center;

    margin-top: 20px;

}



.sr-load button {

    height: 40px;
    width: 230px;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;



    color: #00459E;

    padding: 10px 20px;

    border-radius: 20px;

    border: 1px solid #ddd;

    background: white;

    cursor: pointer;

}

/*-------------------------------- EXPERT section -------------------*/

.experts-section {

    /*font-family:Inter;*/

    background: #FFF;

    padding: 50px 20px;

}



.experts-section .ex-container {

    max-width: 1200px;

    margin: auto;

}



.ex-header {

    text-align: center;

    margin-bottom: 30px;



}



.ex-tag {

    background: #EAF3FF;

    color: #2563EA;

    padding: 6px 14px;

    border-radius: 6px;

    /*font-family: Inter;*/

    font-weight: 800;

    font-style: Extra Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 28px;

    letter-spacing: 12%;

    text-align: center;

    vertical-align: middle;

    text-transform: uppercase;



}



.ex-header h2 {

    margin-top: 12px;

    /*font-size:34px;*/

    color: #242424;

    /*font-family: Inter;*/

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 36px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    text-align: center;



}



.ex-header p {

    margin-top: 8px;

    color: #6b7280;

    font-weight: 400;

    font-style: Regular;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 26px;

    letter-spacing: -1%;

    text-align: center;

    vertical-align: middle;



}



.ex-filters {

    max-width: 850px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    background: #F3F4F6;

    padding: 15px;

    border-radius: 12px;

    border: 1px solid #e5e7eb;

    margin: auto;

    margin-bottom: 30px;

    flex-wrap: wrap;

}

.ex-filter-item {

    flex: 1px;

    padding: 0 15px;

    text-align: left;

    max-width: 180px;



}



.ex-filter-item label {

    font-weight: 700;

    font-style: Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;



    display: block;

    color: #4B5563;

    text-transform: uppercase;

    margin-bottom: 4px;

}





.ex-filter-item select {

    padding: 8px 12px;

    border-radius: 8px;

    border: 1px solid #e5e7eb;

    font-weight: 500;

    font-style: Medium;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;

    color: #242424;

    height: 40px;
    width: 180px;

}



.ex-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;



}



.ex-card {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 20px 40px 100px 0px #00000014;

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

    display: flex;

    flex-direction: column;

    border: 1px solid #0000001A;



    /*background:white;

border-radius:14px;

border:1px solid #e5e7eb;

overflow:hidden;*/

}

.ex-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

}

.ex-img {

    transform: translateY(-8px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

}

.ex-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.wishlist-btn {

    position: absolute;

    bottom: 15px;

    right: 15px;

    background: white;

    border: 1px solid #D1D5DB;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

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

    transition: all 0.2s ease;

    z-index: 1;

}



.wishlist-btn img {

    border-width: 1.5px;

    angle: 0 deg;

    opacity: 1;

    top: 3.13px;

    left: 2.19px;

    height: 14px !important;

    width: 16px !important;

    margin: auto;

    text-align: center;

    vertical-align: middle;

    align-items: center;

    justify-content: center;

}



.wishlist-btn.active img {

    color: #00459E;
    /* Red color when liked */

}

.ex-content {

    padding: 24px;

}



.ex-content h3 {

    font-weight: 700;

    font-style: Bold;

    font-size: 24px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    color: #242424;

}

.tags {

    font-size: 0.85rem;

    color: #4B5563;

    margin-bottom: 15px;

}



.tags .blue-text {

    color: #00459E;

    font-weight: 700;

}



.stats-row {

    display: flex;

    gap: 12px;

    margin-bottom: 16px;

}



.stat-pill {

    font-size: 0.85rem;

    font-weight: 600;

    padding: 6px 12px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    gap: 6px;

}



.rating {
    background: #FF9500;
    color: #242424;
    border: 1px solid #FCD34D
}

/*.rating i{ color: #FF9500;}*/

.delivery {
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    color: #22C55E;
}

.role {



    font-weight: 400;

    font-style: Regular;

    font-size: 13px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    color: #6b7280;

    margin-bottom: 15px;

    height: 20px;

}



.ex-tags {

    display: flex;

    gap: 8px;

    margin-bottom: 10px;

    flex-wrap: wrap;



}



.ex-tags span {

    font-size: 12px;

    padding: 6px 8px;

    border-radius: 20px;



    align-items: center;

    justify-content: center;



}



.rating {

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    /*background:#fff7cc;*/

    background: #FFFBEB;



}



.rating span {

    position: relative;

    padding-left: 20px;

}

.rating span::before {

    content: url('../images/Vector%20(4).svg');

    position: absolute;

    left: 0px;

    width: 5px;

    height: 5px;

    margin: auto;

    top: 7px;

}







.online {

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    /*background:#e6f9ef;

color:#16a34a;*/

    background: #F0FDF4;
    border: 1px solid #86EFAC;
    color: #22C55E;







}

.online span {

    position: relative;

    padding-left: 20px;





}

.online span::before {

    content: url('https://uat.avasmart.in/public/front/ava-restore/images/icons/clock.svg');

    position: absolute;

    left: 0px;

    width: 20px;

    height: 20px;



    top: 4px;

    margin: auto;

}



.projects {

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;



    background: #F4EAFF;
    border: 1px solid #E2C6FF;
    color: #79009E;



}



.ex-badges {

    /*display:flex;

gap:6px;

flex-wrap:wrap;

margin-bottom:10px;*/

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 18px;

}



.ex-badges span {

    background: #EAF3FF;
    color: #00459E;

    border: 1px solid #C6DFFF;

    font-size: 0.75rem;

    padding: 5px 8px;

    border-radius: 20px;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 4px;

}





.desc {

    font-weight: 400;

    font-style: Regular;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;

    height: 40px;

    color: #4B5563;

    margin-bottom: 15px;

}







.primary {

    width: 100%;

    background: #00459E;

    color: white;

    border: none;

    padding: 10px;

    border-radius: 20px;

    margin-bottom: 8px;

    cursor: pointer;

}



.secondary {

    width: 100%;

    background: white;

    border: 1px solid #d1d5db;

    padding: 10px;

    border-radius: 20px;

    cursor: pointer;

    color: #00459E;



}







.ex-bottom {

    text-align: center;

    margin-top: 50px;

    margin-bottom: 20px;

}



.ex-bottom p {



    font-weight: 400;

    font-style: Regular;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    text-align: center;



    color: #6b7280;



}

.ex-bottom p span {

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    text-align: center;



    color: #00459E;



}

/*.show{*/

/*    width:230px;*/

/*    height:40px;*/

/*    font-weight:600;*/

/*    font-size:14px;*/

/*    font-style:semi bold;*/

/*    color:#00459E;*/

/*padding:10px 18px;*/

/*border-radius:20px;*/

/*border:1px solid #ddd;*/

/*background:white;*/

/*cursor:pointer;*/

/*margin-top:20px;*/

/*margin-bottom:20px;*/

/*}*/



.showEx {

    width: 230px;

    height: 40px;

    font-weight: 600;

    font-size: 14px;

    font-style: semi bold;

    color: #00459E;

    padding: 10px 18px;

    border-radius: 20px;

    border: 1px solid #ddd;

    background: white;

    cursor: pointer;

    margin-top: 20px;

    margin-bottom: 20px;

}

/*------------------------------------testimonial----------------------------->*/

.reviews-section {

    /*font-family:Inter;*/

    background: #F0F6FF;

    padding: 50px 20px;

}



.reviews-section .rv-container {

    max-width: 1150px;

    margin: auto;

}







.rv-header {

    margin-bottom: 35px;



}



.rv-tag {

    background: #fff;

    color: #2f6fed;

    padding: 6px 14px;

    border-radius: 6px;

    font-weight: 800;

    font-style: Extra Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 28px;

    letter-spacing: 12%;

    text-align: center;

    vertical-align: middle;

    text-transform: uppercase;



}



.rv-header h2 {

    text-align: left;

    margin-top: 12px;

    font-size: 34px;

    color: #111827;

    /*font-family: Inter;*/

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 36px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;



}



.highlight {

    background: linear-gradient(90deg, #2563EA 0%, #0FA4E9 100%);



    /* 2. Clip the background to the text */

    -webkit-background-clip: text;

    background-clip: text;

    /* 3. Make the actual text transparent so the background shows through */

    -webkit-text-fill-color: transparent;

    color: transparent;

}



.rv-sub {

    margin-top: 8px;

    color: #6b7280;

    font-weight: 400;

    font-style: Regular;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 26px;

    letter-spacing: -1%;

    vertical-align: middle;



}

.rv-sub span {

    /*font-family: Inter;*/

    font-weight: 700;

    font-style: Bold;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 26px;

    letter-spacing: -1%;

    vertical-align: middle;



}

.rv-badges {

    margin-top: 10px;

    display: flex;

    gap: 10px;

    flex-wrap: wrap;



}



.rv-badges span {

    color: f59e0b;

    font-size: 12px;

    background: white;

    border: 1px solid #e5e7eb;

    padding: 5px 10px;

    border-radius: 20px;

}

.rv-badges .S {

    color: #f59e0b;

    font-weight: 800;

    font-style: extra bold;

    font-size: 12px;

    border: none;



}

.rv-grid {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

}



.rv-cardT {

    height: 90px;

    background: white;

    border-radius: 12px 12px 0px 0px;

    border: 1px solid #e5e7eb;

    padding: 20px;

}



.rv-top {



    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

}



.rv-user {

    display: flex;

    gap: 10px;

    align-items: top;



}



.avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: #E5E7EB;



    color: #00459E;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 600;

}

.rv-user strong {



    font-weight: 700;

    font-style: Bold;

    font-size: 16px;

    leading-trim: NONE;

    line-height: 24px;

    letter-spacing: 0%;

    vertical-align: middle;

    color: #000000;

}

.rv-user p {

    font-size: 12px;

    color: #6b7280;

}





.rv-stars {

    color: #f59e0b;

    font-weight: 800;

    font-style: extra bold;

    font-size: 22px;

}



.rv-stars span {

    display: block;

    color: #6b7280;

    text-align: right;

    font-weight: 500;

    font-style: Medium;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 16px;

    letter-spacing: 0%;

    text-align: right;

    vertical-align: middle;



}



.rv-cardB {

    background: white;

    border-radius: 0px 0px 12px 12px;

    border: 1px solid #e5e7eb;

    padding: 20px;

}

.rv-text {

    font-weight: 500;

    font-style: Medium;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;

    color: #4B5563;

    margin: 20px 0;

}

.rv-text span {

    font-weight: 700;

    font-style: Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;

    color: #374151;

    margin: 20px 0;

}

.rv-tags {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.rv-tags span {

    height: 24px;

    background: #EAF3FF;
    color: #00459E;
    border: 1px solid #C6DFFF;

    font-size: 0.75rem;

    padding: 6px 12px;

    border-radius: 20px;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 4px;

}







.rv-bottom {



    /*margin-top:25px;

margin-bottom:25px;*/

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 50px 0px 50px;



}



.rv-bottom p {

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;



    color: #242424;

}

.rv-bottom p span {



    font-weight: 400;

    font-style: Regular;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;



    color: #242424;

}



.rv-bottom button {

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    color: #242424;

    background: #FCC020;

    border: none;

    padding: 10px 16px;

    border-radius: 20px;

    cursor: pointer;

}

/*-----------------next step--------------------------------*/

.nextstep-section {

    /*font-family:'Inter' sans-serif;*/

    background: #fff;

    padding: 80px 20px;

}



.nextstep-section .ns-container {

    max-width: 1150px;

    margin: auto;

}







.ns-header {

    text-align: center;

    margin-bottom: 40px;

}



.ns-tag {

    background: #EAF3FF;

    color: #2563EA;

    padding: 6px 14px;

    border-radius: 6px;

    font-weight: 800;

    font-style: Extra Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 28px;

    letter-spacing: 12%;

    text-align: center;

    vertical-align: middle;

    text-transform: uppercase;



}



.ns-header h2 {

    margin-top: 12px;

    margin-bottom: 8px;

    font: lighter;

    color: #111827;

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 36px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    text-align: center;



}



.ns-header p {

    margin-top: 10px;

    color: #6b7280;

    font-weight: 400;

    font-style: Regular;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 26px;

    letter-spacing: -1%;

    text-align: center;

    vertical-align: middle;

}







.ns-grid {



    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 30px;

}







.ns-form {

    background: white;

    padding: 25px;

    border-radius: 12px;

    border: 1px solid #e5e7eb;

}



.ns-form h4 {

    color: #242424;

    font-weight: 700;

    font-style: Bold;

    font-size: 20px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: -1%;

    margin-bottom: 15px;

}



.form-row {

    display: flex;

    gap: 15px;

    margin-bottom: 12px;

}



.field {

    flex: 1;

    display: flex;

    flex-direction: column;

    font-size: 12px;

}



.field label {

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;



    margin-bottom: 5px;

    color: #6b7280;

}



.field input,

.field textarea {

    font-weight: 500;

    font-style: Medium;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;

    /*color:#9CA3AF;*/

    opacity: 60%;

    padding: 9px;

    border-radius: 6px;

    border: 1px solid #e5e7eb;

    box-sizing: border-box;

    width: 100%;

}



textarea {

    min-height: 80px;

    resize: none;

}



.ns-submit {

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    color: #242424;

    margin-top: 12px;

    margin-bottom: 10px;

    width: 100%;

    background: #f4b000;

    border: none;

    padding: 12px;

    border-radius: 20px;

    cursor: pointer;

}



.ns-note {

    font-weight: 400;

    font-style: Regular;

    font-size: 11px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;



    color: #6B7280;

    margin-top: 8px;

    margin-bottom: 20px;

}





.ns-steps {

    background: white;

    padding: 30px;

    border-radius: 12px;

    border: 1px solid #e5e7eb;

}



.step {

    display: flex;

    gap: 12px;

    margin-bottom: 18px;

}



.num {

    width: 40px;

    height: 30px;

    border-radius: 50%;

    background: #EAF3FF;

    color: #00459E;

    display: flex;

    align-items: center;

    justify-content: center;



    font-weight: 700;

    font-style: Bold;

    font-size: 16px;

    leading-trim: NONE;

    line-height: 14px;

    letter-spacing: 0%;



}

.step .numS1 {

    width: 50px;

    height: 30px;

    border-radius: 50%;

    background: #EAF3FF;

    color: #00459E;

    display: flex;

    align-items: center;

    justify-content: center;



    font-weight: 700;

    font-style: Bold;

    font-size: 16px;

    leading-trim: NONE;

    line-height: 14px;

    letter-spacing: 0%;



}

.content h4 {



    font-weight: 600;

    font-style: Semi Bold;

    font-size: 18px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    color: #242424;

    margin-bottom: 4px;

}



.content p {



    font-weight: 400;

    font-style: Regular;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;



    color: #6b7280;

}



.step .tags {

    margin: auto;

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

    text-align: center;

    vertical-align: middle;

}



.tags span {

    font-weight: 600;

    font-style: Semi Bold;

    font-size: 12px;

    leading-trim: NONE;

    line-height: 100%;

    letter-spacing: 0%;

    color: #00459E;

    background: #eef2ff;

    padding: 6px;

    border-radius: 20px;

    height: 28px;

    border: 1px solid #C6DFFF;



}







.ns-safe {



    margin-top: 15px;

    background: #e6f4ea;

    padding: 10px;

    border-left: 5px solid #23A192;



    font-weight: 400;

    font-style: Regular;

    font-size: 14px;

    leading-trim: NONE;

    line-height: 20px;

    letter-spacing: 0%;



    border-radius: 6px;

    color: #242424;



}

/*-------footer Area-------*/

.footer_section {

    display: inline-block;

    width: 100%;

}



.footer_bg {

    background: #F3F4F6;

    padding-bottom: 0px;

}



.footer_mainsection {

    padding: 40px 0%;

}



.footer_logo {

    margin-bottom: 15px;

}



.footer_contact h4 {

    font-size: 12px;

    font-weight: 700;

    color: #4B5563;

    margin-bottom: 10px;

}



.footer_contact p {

    font-size: 14px;

    font-weight: 400;

    color: #4B5563;

    margin-bottom: 10px;

}



.footer_contact p a {

    font-size: 14px;

    font-weight: 600;

    color: #4B5563;

}



.footer_contact h5 {

    font-size: 14px;

    font-weight: 500;

    color: #4B5563;

    margin-bottom: 10px;

    margin-top: 20px;

}



.follow_us {

    display: flex;

    gap: 15px;

}



.follow_us a {}



.follow_us a:hover img {

    transform: scale(1.05) rotate(2deg);

    filter: brightness(1.1) contrast(1.1);

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

    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.footer_about h4 {

    font-size: 16px;

    font-weight: 700;

    color: #239F8E;

    margin-bottom: 10px;

}



.footer_about ul {

    list-style: none;

    padding: 0;

}



.footer_about li {}



.footer_about li a {

    font-size: 14px;

    font-weight: 400;

    color: #4B5563;

    margin-bottom: 12px;

    display: block;

    transition: all 0.3s ease-in-out;

}



.footer_about li a:hover {

    color: #239F8E;

    padding-left: 2px;

}



.footer_quicklink h4 {

    font-size: 16px;

    font-weight: 700;

    color: #239F8E;

    margin-bottom: 10px;

}



.footer_quicklink ul {

    list-style: none;

    padding: 0;

}



.footer_quicklink li {}



.footer_quicklink li a {

    font-size: 14px;

    font-weight: 400;

    color: #4B5563;

    margin-bottom: 12px;

    display: block;

    transition: all 0.3s ease-in-out;

}



.footer_quicklink li a:hover {

    color: #239F8E;

    padding-left: 2px;

}



.boder_lefq {

    padding-left: 15px;

    border-left: solid 1px #d4d0d0;

}



.partner li a {

    color: #00379C;

    margin-bottom: 12px;

    display: block;

    transition: all 0.3s ease-in-out;

    border: solid 1px #00379C;

    border-radius: 6px;

    padding: 5px 10px;

}





.footer_soluction h4 {

    font-size: 16px;

    font-weight: 700;

    color: #239F8E;

    margin-bottom: 10px;

}



.footer_soluction ul {

    list-style: none;

    padding: 0;

}



.footer_soluction li {}



.footer_soluction li a {

    font-size: 14px;

    font-weight: 400;

    color: #4B5563;

    margin-bottom: 12px;

    display: block;

    transition: all 0.3s ease-in-out;

}



.footer_soluction li a:hover {

    color: #239F8E;

    padding-left: 2px;

}



.footer_community h4 {

    font-size: 16px;

    font-weight: 700;

    color: #239F8E;

    margin-bottom: 10px;

}



.footer_community ul {

    list-style: none;

    padding: 0;

}



.footer_community li {}



.footer_community li a {

    font-size: 14px;

    font-weight: 400;

    color: #4B5563;

    margin-bottom: 12px;

    display: block;

    transition: all 0.3s ease-in-out;

}



.footer_community li a:hover {

    color: #239F8E;

    padding-left: 2px;

}



.footer_community li a span {

    font-size: 11px;

    font-weight: 500;

    background: #E2FFFB;

    color: #239F8E;

    border: solid 1px #239F8E;

    border-radius: 15px;

    padding: 1px 8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.lang_but {

    text-align: center;

    margin-bottom: 45px;

}



.lang_but img {

    width: auto;

    display: inline-block;

}



.copy_main {

    background: #0B1E48;

    padding: 16px 0;

}



.copy_mainse {

    display: flex;

    justify-content: space-between;

}



.copy_left {

    display: flex;

    gap: 20px;

}



.copy_left p {

    font-size: 12px;

    font-weight: 700;

    color: #fff;

    margin-bottom: 0px;

}



.copy_right {

    gap: 15px;

    display: flex;

}



.copy_right a {

    font-size: 12px;

    font-weight: 400;

    color: #fff;

}



.copy_right a:hover {

    color: #239F8E;

}



.ex-img img {

    width: 100%;

    height: 300px;

    object-fit: cover;

}





/*.wishlist-btn img {*/

/*    width: 100%;*/

/*    height: 100%;*/

/*    object-fit: cover;*/

/*}*/





















/* Page load ke time header/menu glitch hide */

html.ava-page-loading .menu_mainsection,

html.ava-page-loading .stellarnav ul ul,

html.ava-page-loading .banner_section,

html.ava-page-loading .hero_section,

html.ava-page-loading .ava_restore_banner {

    visibility: hidden !important;

}



/* Header ke niche extra blank space stop */

.menu_mainsection {

    height: auto !important;

    min-height: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

    overflow: visible !important;

}



/* Desktop dropdown ko normal flow se bahar rakho */

.menu_mainsection .stellarnav>ul>li {

    position: relative !important;

}



.menu_mainsection .stellarnav>ul>li>ul {

    position: absolute !important;

    top: 100% !important;

    left: 0 !important;

    display: none !important;

    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 10px 0 !important;

    z-index: 99999 !important;

}



/* Empty dropdown bilkul hide */

.menu_mainsection .stellarnav>ul>li>ul:empty {

    display: none !important;

    height: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

    border: 0 !important;

}



/* Hover par hi dropdown open */

.menu_mainsection .stellarnav>ul>li:hover>ul {

    display: block !important;

}



/* Page ready hone ke baad smooth show */

html.ava-page-ready .menu_mainsection,

html.ava-page-ready .banner_section,

html.ava-page-ready .hero_section,

html.ava-page-ready .ava_restore_banner {

    visibility: visible !important;

}



/* Mobile me dropdown normal rahe */

@media (max-width: 991px) {

    .menu_mainsection .stellarnav>ul>li>ul {

        position: static !important;

    }

}







/* Toastr popup design fix */

#toast-container {

    z-index: 999999 !important;

}



#toast-container>.toast {

    width: 360px !important;

    max-width: calc(100vw - 30px) !important;

    border-radius: 14px !important;

    padding: 16px 18px 16px 54px !important;

    box-shadow: 0 12px 35px rgba(0, 55, 156, 0.18) !important;

    opacity: 1 !important;

    border: 1px solid rgba(0, 55, 156, 0.12) !important;

    background-image: none !important;

    font-family: inherit !important;

}



#toast-container>.toast-success {

    background-color: #ffffff !important;

    color: #11315c !important;

    border-left: 5px solid #00379c !important;

}



#toast-container>.toast-success:before {

    content: "\f00c";

    font-family: "Font Awesome 7 Free";

    font-weight: 900;

    position: absolute;

    left: 18px;

    top: 50%;

    transform: translateY(-50%);

    width: 26px;

    height: 26px;

    background: #00379c;

    color: #ffffff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

}



#toast-container>.toast-error {

    background-color: #ffffff !important;

    color: #842029 !important;

    border-left: 5px solid #dc3545 !important;

}



#toast-container>.toast-warning {

    background-color: #ffffff !important;

    color: #664d03 !important;

    border-left: 5px solid #ffc107 !important;

}



#toast-container>.toast-info {

    background-color: #ffffff !important;

    color: #055160 !important;

    border-left: 5px solid #0dcaf0 !important;

}



.toast-title {

    font-size: 15px !important;

    font-weight: 700 !important;

    margin-bottom: 4px !important;

}



.toast-message {

    font-size: 14px !important;

    line-height: 1.45 !important;

    font-weight: 500 !important;

}



.toast-close-button {

    color: #11315c !important;

    opacity: 0.8 !important;

    text-shadow: none !important;

    right: -4px !important;

    top: -6px !important;

}



.toast-close-button:hover {

    opacity: 1 !important;

}



/* Progress bar */

#toast-container>.toast-success .toast-progress {

    background-color: #00379c !important;

    opacity: 1 !important;

}



/* Mobile */

@media (max-width: 575px) {

    #toast-container.toast-top-right,

    #toast-container.toast-bottom-right {

        right: 12px !important;

        left: 12px !important;

        width: auto !important;

    }



    #toast-container>.toast {

        width: 100% !important;

    }

}











/*#toast-container > .toast-success:before {*/

/*    content: "\f00c";*/

/*    font-family: "Font Awesome 6 Free";*/

/*}*/





/* ============================================================
   MOBILE / TABLET RESPONSIVE FIXES — appended directly below
   original styles so there is NO separate file, NO link order
   issue, NO caching confusion. Just replace style.css with this.
   ============================================================ */

/* =========================================================
   RESPONSIVE CSS FIXES — is file ko apni main CSS ke SABSE
   AAKHIR me @import ya <link> se add karo (override ke liye)
   Breakpoints: 1200px / 992px / 768px / 576px / 400px
   ========================================================= */

/* -------------------- 1200px (Large tablets / small laptops) -------------------- */
@media (max-width: 1200px) {
    .container {
        /*max-width: 96% !important;*/
        padding: 0 15px !important;
    }

    .ndt-cards {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .ex-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .rv-grid {
        grid-template-columns: 1fr !important;
    }

    .consultation-section .cs-grid {
        grid-template-columns: 1fr !important;
    }

    .consultation-section .cs-pricing {
        order: 2 !important;
    }

    .consultation-section .cs-steps {
        order: 1 !important;
        height: auto !important;
    }
}

/* -------------------- 992px (Tablets) -------------------- */
@media (max-width: 992px) {

    /* Header / Nav */
    .main_header.sticky {
        height: auto !important;
    }

    .topmain_section,
    .header_mid_section {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .header_mid_right {
        flex-wrap: wrap !important;
        gap: 15px !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .stellarnav {
        flex-wrap: wrap !important;
    }

    .stellarnav .menu-toggle,
    .stellarnav .dd-toggle {
        display: block !important;
    }

    .stellarnav.mobile ul {
        /*flex-direction: column !important;*/
        width: 100% !important;
    }

    .stellarnav.mobile ul li {
        width: 100% !important;
    }

    .stellarnav.mobile ul ul {
        position: static !important;
        box-shadow: none !important;
    }

    /* Hero */
    .hero {
        height: auto !important;
        padding: 90px 0 60px !important;
        margin-top: 120px !important;
    }

    .hero-text {
        max-width: 100% !important;
        margin-left: 6% !important;
        margin-right: 6% !important;
        margin-top: 0 !important;
    }

    .hero-text h1 {
        font-size: 34px !important;
        line-height: 42px !important;
    }

    .hero-text p {
        font-size: 16px !important;
    }

    /* Trust / Problem / NDT already have their own 992 rules above — keep consistent */
    .ndt-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Home services */
    .home-services .hs-cards {
        justify-content: center !important;
    }

    .home-services .hs-card {
        width: 100% !important;
        max-width: 375px !important;
        height: auto !important;
    }

    /* Portfolio */
    .sr-card {
        grid-template-columns: 1fr !important;
    }

    .img-box {
        height: 300px !important;
    }

    .img-box img {
        border-radius: 14px 14px 0 0 !important;
    }

    .sr-right {
        margin-right: 0 !important;
        padding: 20px 15px !important;
    }

    .sr-filter {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 15px !important;
    }

    .filter-item {
        max-width: 100% !important;
    }

    /* Experts */
    .ex-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ex-filters {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .ex-filter-item {
        max-width: 100% !important;
    }

    .ex-filter-item select {
        width: 100% !important;
    }

    /* Next step */
    .ns-grid {
        grid-template-columns: 1fr !important;
    }

    /* Footer */
    .footer_mainsection [class*="col-"] {
        margin-bottom: 25px !important;
    }

    .boder_lefq {
        border-left: none !important;
        padding-left: 0 !important;
    }
}

/* -------------------- FIX: fixed pixel heights causing blank gaps on mobile -------------------- */
/* Ye classes original CSS me fixed height ke saath hain — mobile pe text wrap hone se
   content clip/overflow hoke blank space bana deta hai. Sabko auto kar rahe hain. */
@media (max-width: 992px) {

    .desc,
    .role,
    .hs-highlight,
    .rv-cardT,
    .cs-bottom,
    .cs-steps,
    .home-services ul,
    .gallery-item-wrapper,
    .featured-card,
    .step-container .step-item,
    .thumb,
    .ndt-card img,
    .ex-img img,
    .cardT img {
        height: auto !important;
        min-height: 0 !important;
    }

    .cs-steps {
        display: flex !important;
        flex-direction: column !important;
    }

    .rv-cardT {
        padding-bottom: 5px !important;
    }

    .home-services ul {
        margin-top: 20px !important;
        padding-bottom: 10px !important;
    }
}

/* -------------------- 768px (Large phones / small tablets) -------------------- */
@media (max-width: 768px) {
    
    .problem-section .top-tag{
        display: block !important;
    }
    
    .consultation-section .cs-tag{
         display: block !important;
    }

    .rv-grid {
        display: grid;
        grid-template-columns: auto !important;

        gap: 20px;
    }

    .navbar-custom.fixed-top {
        left: auto !important;
        top: -4px !important;
    }


    .rv-badges .S {
        color: #f59e0b;
        font-weight: 800;
        font-style: extra bold;
        font-size: 12px;
        border: none;
        padding: 0 5px;
    }

    /*.sec_padding {*/
    /*    padding: 20px 0 !important;*/
    /*}*/

    h2 {
        font-size: 26px !important;
    }

    h2 span {
        font-size: 26px !important;
    }

    /* Header */
    .topmain_section {
        padding: 8px 0 !important;
    }

    .sell_avamartmain p {
        font-size: 11px !important;
    }

    .link_button {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .header_mid_right {
        gap: 20px !important;
    }

    .sign_main a p {
        display: none !important;
    }

    /* icon-only on small screens */

    /* Hero */
    .hero {
        margin-top: 241px !important;
        padding: 60px 0 40px !important;
    }

    .tag {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .hero-text h1 {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    .hero-text p {
        font-size: 14px !important;
        line-height: 22px !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .btn-yellow,
    .btn-light {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
    }

    /* Trust section */
    .trust-grid {
        grid-template-columns: 1fr !important;
    }

    .cardT {
        flex-direction: column !important;
        text-align: center !important;
    }

    .cardT img {
        width: 100% !important;
        height: 180px !important;
    }

    .cardT .text {
        text-align: center !important;
        padding: 15px !important;
    }

    /* Problem section */
    .problem-section .problem-grid {
        grid-template-columns: 1fr !important;
    }

    .problem-section .section-title h2 {
        font-size: 24px !important;
    }

    .problem-section .image-box img {
        height: 200px !important;
    }

    .problem-section .info-row1 p {
        gap: 15px !important;
    }

    /* CTA / health check */
    .cta-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 25px 20px !important;
    }

    .cta-title {
        font-size: 22px !important;
    }

    .cta-desc {
        font-size: 15px !important;
    }

    .cta-btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* NDT tools */
    .ndt-tools-section {
        padding: 30px 15px !important;
    }

    .ndt-title {
        font-size: 24px !important;
    }

    .ndt-cards {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .ndt-card img {
        height: 160px !important;
    }

    /* Home services */
    .home-services h2 {
        font-size: 24px !important;
    }

    .home-services .hs-card {
        padding: 20px !important;
    }

    .home-services ul {
        margin-top: 15px !important;
        height: auto !important;
    }

    /* Consultation */
    .consultation-section {
        padding: 40px 15px !important;
    }

    .consultation-section .cs-header p {
        font-size: 14px !important;
    }

    .consultation-section table {
        font-size: 13px !important;
    }

    .consultation-section .cs-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        height: auto !important;
        margin-top: 40px !important;
        padding: 20px !important;
    }

    .consultation-section .cs-bottom button {
        width: 100% !important;
    }

    .consultation-section .step-content h4 {
        font-size: 16px !important;
    }

    /* Portfolio */
    .sr-portfolio {
        padding: 30px 15px !important;
    }

    .sr-head h2 {
        font-size: 24px !important;
    }

    .title-row {
        font-size: 22px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .btns {
        flex-direction: column !important;
    }

    .yellow,
    .outline {
        width: 100% !important;
    }

    .thumb-strip {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .thumb {
        width: 30% !important;
        height: 70px !important;
    }

    .badge1 {
        left: 15px !important;
    }

    /* Experts */
    .experts-section {
        padding: 30px 15px !important;
    }

    .ex-header h2 {
        font-size: 24px !important;
    }

    .ex-grid {
        grid-template-columns: 1fr !important;
    }

    .ex-img img {
        height: 220px !important;
    }

    .ex-filter-item select {
        width: 100% !important;
    }

    .filter-item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    .ex-filter-item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    /* Reviews */
    .reviews-section {
        padding: 30px 15px !important;
    }

    .rv-header h2 {
        font-size: 24px !important;
        text-align: center !important;
    }

    .rv-sub {
        text-align: center !important;
    }

    .rv-bottom {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
        padding: 30px 0 !important;
    }

    .rv-badges {
        justify-content: center !important;
    }

    /* Next step */
    .nextstep-section {
        padding: 40px 15px !important;
    }

    .ns-header h2 {
        font-size: 24px !important;
    }

    .form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Footer */
    .footer_mainsection {
        padding: 30px 0 !important;
    }

    .copy_mainse {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }

    .copy_left {
        flex-direction: column !important;
        gap: 5px !important;
        align-items: center !important;
    }
}

/* -------------------- 576px (Phones) -------------------- */
@media (max-width: 576px) {

    h2,
    h2 span {
        font-size: 22px !important;
    }

    .hero-text h1 {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    .home-services .hs-cards {
        gap: 18px !important;
    }

    .home-services .hs-card {
        width: 100% !important;
    }

    .consultation-section .cs-pricing {
        padding: 25px 20px 15px !important;
    }

    .consultation-section .cs-step {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
    }

    .ex-content h3 {
        font-size: 20px !important;
    }

    .stats-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .rv-text,
    .rv-text span {
        font-size: 13px !important;
    }

    .thumb {
        width: 45% !important;
    }

    .step-container {
        flex-wrap: wrap !important;
        row-gap: 20px !important;
    }

    .step-item {
        width: 45% !important;
    }

    .step-container::before {
        display: none !important;
    }
}

/* -------------------- 400px (Small phones) -------------------- */
@media (max-width: 400px) {
    .hero-text h1 {
        font-size: 22px !important;
        line-height: 28px !important;
    }

    .tag {
        font-size: 11px !important;
    }

    .ndt-card h3 {
        font-size: 18px !important;
    }

    .cta-title {
        font-size: 20px !important;
    }

    .sr-head h2,
    .ex-header h2,
    .rv-header h2,
    .ns-header h2 {
        font-size: 20px !important;
    }

    .thumb {
        width: 100% !important;
        height: 90px !important;
    }
    
}



@media (max-width: 768px) {
    .wa-float-btn {
        width: 50px;
        height: 50px;
        bottom: 60px !important;
        right: 0px !important;
    }
}