@media only screen and (max-width: 600px) {
    .p-mo{
        padding: 0px 0px;
    }
    section{
        padding: 40px 0px;
    }
    html,body{
        overflow-x: hidden;
        width: 100%;
    }
   
    header{
        height: auto;
        position: relative;
        border-bottom: 0px solid var(--Base-04, #E9E9E9);
        background: transparent;
    }
    .navbar {
        height: auto;
        display: flex;
        /* height: 72px; */
        padding: 16px 0px;
        justify-content: space-between;
        align-items: center;
        align-self: center;
        border-radius: 4px;
        padding: 16px 24px;
        padding: 0px;
        /* margin: 16px 24px; */
    }
    .navbar-brand img {
        width: 226px;
        height: 38px;
        max-width: 100%;
        width: 145.546px;
    }




    
}
@media only screen and (max-width: 600px) {
    .navbar-expand-lg .navbar-nav {
        gap: 24px;
    }
    .navbar-nav .nav-link {
        border-bottom: 1px solid var(--Base-04, #E9E9E9);
        padding: 8px 0px;
        color: var(--Base-Off-Black, #0F0F0F);
        font-family: 'Geist';
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: -0.5px;
        text-transform: capitalize;
        position: relative;
    }
    .right-side{
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .right-side-main{
        flex-direction: column;
        gap: 24px;
    }
    .right-side-main p{
        color: var(--Base-03, #BDBDBD);
        text-align: center;
        font-family: 'Montserrat';
        font-size: 9px;
        font-style: normal;
        font-weight: 600;
        line-height: 15px; /* 166.667% */
        letter-spacing: 1px;
        text-transform: uppercase;
        width: 279px;
        max-width: 100%;
        margin: auto;
        margin-bottom: 0px;
    }
    .right-side-main .btn{
        width: 100%;
    }
    .navbar-collapse{
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
        padding: 32px 24px 32px;
        background: var(--Base-Off-White, #FAFAFA);
        margin-top: 0px;
        border-top: 1px solid var(--Base-04, #E9E9E9);

    }
    header .container{
        padding: 0px;
    }
    .nav-item span{
        color: var(--Brand-gold, #9E8361);
        font-family: Geist;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: -0.5px;
        text-transform: capitalize;
        display: inline-block;
    }
    .right-side .navbar-nav{
        padding-top: 24px;
    }
    header {
        border-radius: 4px;
    }
    .logo-menu-btn {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 0px 24px;
        align-items: center;
        height: 72px;
        display: flex;
        padding: 16px 24px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        border-radius: 4px;
        border: 1px solid var(--Base-04, #E9E9E9);
        background: var(--Base-White, #FFF);
        width: 327px;
        margin: auto;
        margin: 16px 24px
    }
    .navbar-nav .nav-link::after{
        content: "";
        background: url(../img/arrow-down.svg) no-repeat;
        width: 16px;
        height: 16px;
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
    }
    .navbar-toggler{
        border: 0px;
        width: 20px;
        height: 20px;
        background: transparent;
        display: flex;
        justify-self: center; 
        align-items: center;
        padding: 0;
   }
    .navbar-toggler-icon {
        background: url(../img/toogle-menu.svg) no-repeat;
        width: 20px;
        height: 20px;
    }
    .is-active .navbar-toggler-icon {
        background: url(../img/crass-icon.svg) no-repeat;
        width: 20px;
        height: 20px;
    }
    .navbar-toggler:focus{
        box-shadow: none;
    }
    .navbar-brand{
        padding: 0px;
    }
    .header-is-active{
        background: var(--Base-White, #FFF);
    }

}
/* ---------------------------home------------------------------------ */
@media only screen and (max-width: 600px) {
    .home-banner {
        padding: 0px 0px;
        margin-top: 105px;
    }
    .home-banner-content::after {
        content: "";
        background: url(../img/home-content-bg.png) no-repeat;
        background-position: center center;
        background-size: cover;
        position: absolute;
        width: 881px;
        height: 1021px;
        z-index: -1;
        bottom: 0px;
        display: none;
    }
    .home-banner img {
        height: 285px;
        width: 100%;
        object-fit: cover;
    }
    .card-row {
        display: flex;
        gap: 32px;
        margin-bottom: 26px;
        flex-direction: column;
    }
    .card-row p {
        color: var(--Base-01, #383838);
        text-align: center;
        /* P/std */
        font-family: Geist;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        opacity: 0.8;
        line-height: 32.4px;
        margin-bottom: 0px;
    }
    .card-row h5 {
        margin-bottom: 8px;
        color: var(--Base-Off-Black, #0F0F0F);
        text-align: center;
        font-family: Geist;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: -0.5px;
        text-transform: capitalize;
    }
    .card-row .card {
        background: transparent;
        border: 0px;
        border-radius: 0px;
        width: 327px;
        margin: auto;
    }
    .how_ite-works {
        height: auto;
        padding-top: 55px;
    }
    .how_ite-works{

    }


    .home-banner-content {
        width: 856px;
        padding: 24px 24px;
        text-align: center;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 1px solid rgba(250, 250, 250, 0.00);
        /* background: linear-gradient(180deg, #FAFAFA 64.86%, #FFF 100%); */
        position: relative;
        max-width: 100%;
    }
    .home-banner-content h2 {
        color: var(--Base-Off-Black, #0F0F0F);
        text-align: center;
        font-family: 'Geist';
        font-size: 32px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: -1px;
        text-transform: capitalize;
        margin-bottom: 16px;
    }
    .home-banner-content p {
        color: var(--Brand-gold, #9E8361);
        text-align: center;
        font-family: 'Geist';
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26.4px;
        margin-bottom: 24px;
    }
    .left-black, .right-black {
        background: var(--Base-Off-Black, #0F0F0F);
        width: 40px;
        height: 40px;
        display: none;
    }

    .how-its-title h1 {
        background: var(--Base-Off-Black, #0F0F0F);
        display: flex;
        padding: 14px 40px;
        justify-content: center;
        align-items: flex-end;
        gap: 8px;
        flex: 1 0 0;
        align-self: stretch;
        max-width: 100%;
        margin: auto;
        color: var(--Base-Off-White, #FAFAFA);
        text-align: center;
        font-family: 'Geist';
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: -1px;
        text-transform: capitalize;
        height: 64px;
    }
    .how-its-title {
        width: 1116px;
        max-width: 100%;
        margin: auto;
        margin-bottom: 40px;
        display: flex;
        gap: 0px;
        justify-content: center;
        align-items: baseline;
        position: relative;
    }
    .img-how img{
        height: 64px;
    }
    .how-its-content-main .btn-gold {
        width: 327px;
        margin: auto;
        margin-top: 8px;
        height: 48px;
    }
    .how_ite-works{
        padding: 32px 24px 12rem;
    }
    .how_ite-works .container::after{
        display: none;
    }
    .how_ite-works .container::before{
        display: none;
    }
    .how-its-title::after{
        display: none;
    }
    .our-solution img{
        height: 285px;
    }
    .img-how {
        display: flex;
        gap: 2px;
        width: 100%;
        max-width: 100%;
        height: 64px;
    }
    .how_ite-works .card-row {
        display: flex;
        gap: 32px;
        margin-bottom: 32px;
        flex-direction: column;
    }
    .our-solution {
        padding: 0px 0px 0px;
        margin-top:0rem;
    }
    .our-solution .container {
        padding: 40px 24px 32px;
    }
    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
        background: #9E8361;
    }
    .owl-theme .owl-dots .owl-dot span {
        width: 12px;
        height: 13px;
        margin: 5px 7px;
        background: #E9E9E9;
        display: block;
        -webkit-backface-visibility: visible;
        transition: opacity 200ms ease;
        border-radius: 30px;
    }
    .our-solution h2 {
        color: var(--Core-Off-Black, #221735);
        text-align: center;
        font-family: Geist;
        font-size: 32px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: -1px;
        text-transform: capitalize;
        margin-bottom: 32px;
    }
    
    .build-delivery-content {
        display: flex;
        margin-top: 24px;
        padding: 32px 35px 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex: 1 0 0;
        border-radius: 4px;
    }
    .build-delivery-content .btn{
        width: 327px;
        max-width: 100%;
        margin: auto;
        height: 48px;
    }
    .build-delivery-content .btn-31 .text {
        text-align: center;
        /* P/btn */
        font-family: Montserrat;
        font-size: 14px;
    }
    
    .our-solution .card {
        border: 0px;
        background: transparent;
        width: 357px;
        max-width: 100%;
        margin: auto;
        margin-bottom: 32px;
    }
    .build-delivery-content h1 {
        color: var(--Base-Off-Black, #0F0F0F);
        font-family: 'Geist';
        font-size: 32px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: -1px;
        text-transform: capitalize;
        margin-bottom: 0px;
    }

    .our-solution .card h5 {
        color: var(--Base-Off-Black, #0F0F0F);
        text-align: center;
        font-family: 'Geist';
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: -0.5px;
        text-transform: capitalize;
        margin-bottom: 8px;
    }

    .build-for-delivery {
        display: flex;
        padding: 0px 0px;
        position: relative;
    }
    .img-wrapper {
        background: url(../img/Benefits-Image-mo.png) no-repeat;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 300px;
    }
    .build-for-delivery::after {
        content: "";
        background: url(../img/pattern-for-build-mo.png) no-repeat;
        background-position: center center;
        background-size: cover;
        position: absolute;
        height: 24px;
        width: 100%;
        left: 0px;
        right: 0px;
        bottom: 0px;
        top: -32%;
        margin: auto;
        max-width: 100%;
        z-index: 0;
    }
    .build-for-confidance-content {
        width: 1280px;
        padding: 32px 35px;
        max-width: 100%;
        background: var(--Base-Off-White, #FAFAFA);
    }
    .home-banner-content .btn {
        width: 327px;
        height: 48px;
        margin: auto;
    }
    .row-colums {
        display: flex;
        gap: 24px;
        margin: 32px 0px;
        flex-direction: column;
    }
    .col-card {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .build-for-confidance-content h2 {
        color: var(--Base-Off-Black, #0F0F0F);
        font-family: 'Geist';
        font-size: 32px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: -1px;
        text-transform: capitalize;
        margin-bottom: 24px;
    }
    .build-for-confidance-content .btn{
        width: 100%;
    }
    .build-for-confidance .btn {
        width: 327px;
        max-width: 100%;
        margin: auto;
        height: 48px;
    }
    .btn-31 .text {
        text-align: center;
        font-family: Montserrat;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }


}
/* -------------------------------footer------------------------------- */
@media only screen and (max-width: 600px) {
    .left-side-footer h2 {
        color: var(--Base-Off-Black, #0F0F0F);
        font-family: 'Geist';
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: -1px;
        text-transform: capitalize;
        text-align: center;
    }
    .left-side-footer h2 img {
        width: 40px;
        height: 40px;
        max-width: 100%;
    }
    .left-side-footer{
        display: flex;
        flex-direction: column;
        gap: 56px;
        margin-bottom: 56px;
    }
    .left-side-footer h2{
        margin-bottom: 0px;
        height: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 18px
    }
    .footer-div {
        background: #fff;
        padding: 56px 24px 32px;
    }
    .right-side-footer .right-side-footer-div {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        gap: 24px;
    }
    .footer-menu ul {
        padding-left: 0px;
        display: flex;
        gap: 24px;
        list-style: none;
        flex-direction: column;
        text-align: center;
    }
    .right-side-footer p {
        color: var(--Base-Off-Black, #0F0F0F);
        text-align: center;
        font-family: 'Montserrat';
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        margin-bottom: 0px;
    }
    .right-side-footer .p-copy {
        color: var(--Base-03, #BDBDBD);
        font-family: 'Montserrat';
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        margin-bottom: 0px;
    }
    .footer-div .container{
        padding: 0px 0px;
    }

}

@media only screen and (min-width: 601px) and (max-width: 990px) {
    .navbar-expand-lg .navbar-nav {
        gap: 24px;
    }
    .navbar-nav .nav-link {
        border-bottom: 1px solid var(--Base-04, #E9E9E9);
        padding: 8px 0px;
        color: var(--Base-Off-Black, #0F0F0F);
        font-family: 'Geist';
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: -0.5px;
        text-transform: capitalize;
        position: relative;
    }
    .right-side{
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .right-side-main{
        flex-direction: column;
        gap: 24px;
    }
    .right-side-main p{
        color: var(--Base-03, #BDBDBD);
        text-align: center;
        font-family: 'Montserrat';
        font-size: 9px;
        font-style: normal;
        font-weight: 600;
        line-height: 15px; /* 166.667% */
        letter-spacing: 1px;
        text-transform: uppercase;
        width: 279px;
        max-width: 100%;
        margin: auto;
        margin-bottom: 0px;
    }
    .right-side-main .btn{
        width: 100%;
    }
    .navbar-collapse{
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
        padding: 32px 24px 32px;
        background: var(--Base-Off-White, #FAFAFA);
        margin-top: 16px;

    }
    header .container{
        padding: 0px;
    }
    .nav-item span{
        color: var(--Brand-gold, #9E8361);
        font-family: Geist;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: -0.5px;
        text-transform: capitalize;
        display: inline-block;
    }
    .right-side .navbar-nav{
        padding-top: 24px;
    }
    header {
        border-radius: 4px;
    }
    .logo-menu-btn{
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 0px 0px;
    }
    .navbar-nav .nav-link::after{
        content: "";
        background: url(../img/arrow-down.svg) no-repeat;
        width: 16px;
        height: 16px;
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
    }
    .logo-menu-btn{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    
}