@media only screen and (max-width: 600px) {
    .p-mo{
        padding: 0px 0px;
    }
    section{
        padding: 40px 0px;
    }
    html,body{
        overflow-x: hidden;
        width: 100%;
    }

   
}
@media only screen and (max-width: 800px) {
    header .navbar-nav .dropdown-menu {
        position: absolute !important;
    }
    .cartCount {
        position: absolute;
        top: -8px;
        right: -2px;
    }
}
@media only screen and (max-width: 600px) {
    header .navbar-nav .dropdown-menu {
        position: absolute !important;
    }
    .navbar-brand img {
        width: 126px;
        height: 32px;
    }
    .navbar-toggler{
        background: var(--brand-Main-Green, #2A7E2F);
        display: flex;
        padding: 8px;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 40px;
        border: 0px;
        border-radius: 0px;
    }
    .navbar {
        padding: 19px 24px;
        transition: all 0.3s ease;
        height:auto;
    }
    .navbar-toggler-icon{
        background: url(../img/menu.svg) no-repeat;
        background-position: center center;
        background-size: cover;
        height: 14px;
        width: 18px;
        max-width: 100%;

    }
    .is-active .navbar-toggler-icon {
        background: url(../img/crass.svg) no-repeat;
        background-position: center center;
        background-size: cover;
        height: 10px;
        width: 10px;
        max-width: 100%;
    }
    .navbar-toggler:focus{
        outline: none;
        box-shadow: none;
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
        gap: 12px;
    }
    .navbar-expand-lg::after {
        content: " ";
        /* background: url(../img/Buildings.png) no-repeat; */
        background-size: cover;
        background-position: center center;
        position: absolute;
        left: 0px;
        right: 0px;
        bottom:-100%;
        width: 375px;
        height: 93px;
        z-index: -1;
        opacity: 0;
        transition: all .7s;
    }
    .navbar-expand-lg.header-is-active::after {
        content: " ";
        /* background: url(../img/Buildings.png) no-repeat; */
        background-size: cover;
        background-position: center center;
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: 375px;
        height: 93px;
        z-index: 0;
        opacity: 1;
    }
    .right-side-menu .navbar-nav {
        display: flex;
        flex-direction: row;
    }
    .navbar-collapse{
        flex-basis: 100%;
        flex-grow: revert;
        align-items: baseline;
        display: none !important;
        flex-direction: column;
    }
    .navbar-collapse.collapse.show{
        display: flex !important;
        gap: 24px;
        justify-content: center;
        align-items: center;
        padding-top: 48px;
    }
    .menu-items-mobile{
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 0;
    }
    .navbar-collapse h5{
        color: var(--base-White, #FFF);
        font-family: "Cal Sans";
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 28.8px */
        display: block;
        text-transform: capitalize;
        text-align: center;
        margin-bottom: 4px;
    }
    .navbar-nav{
        order: 1;
    }
    .navbar.header-is-active{
       background: #162819;
       background: url(../img/menu-open.png)no-repeat;
       background-size: cover;
       background-position:center center;
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
       height: 586px;
    }
    header .nav-link {
        color: var(--base-03, #BDBDBD);
        font-family: "Cal Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: 0.18px;
        text-transform: uppercase;
        text-align: center;
    }
    .right-side-menu .navbar-nav {
        gap: 16px;
    }
    .right-side-menu .user-icon {
        width: 25px;
        height: 27.5px;
        filter: invert(1);
    }
    .right-side-menu .shopping-basket-icon {
        width: 35px;
        height: 31.133px;
        filter: invert(1);
    }
    .dropdown-toggle::after {
        border: none;
        background: url(../img/drop-icon.svg) no-repeat;
        background-position: center center;
        background-size: cover;
        width: 12px;
        height: 8px;
        max-width: 100%;
        filter: invert(1);
    }
    .header-bottom{
        text-align: center;
        display: flex;
        height: 67px;
        padding: 25px 24px 0 24px;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
    }
    header .navbar {
        display: block;
    }
    .header-bottom{
        display: none !important;
    }
    .header-is-active .header-bottom{
        display: block !important;
        order: 1;
        position: relative;
        z-index: 1;
    }   
    .header-bottom p {
        color: var(--brand-Light-Green, #51AF5E);
        font-feature-settings: 'salt' on;
        font-family: Cabin;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        text-align: center;
        display: block;
        margin: auto;
        width: 100%;
    }
    header .container{
        padding: 0px 0px;
    }
    .header-scroll .navbar {
        padding: 19px 24px;
        background-color: #162819;
        background: var(--base-White, #FFF);
        box-shadow: 0 41px 160px 0 rgba(0, 0, 0, 0.04), 0 20.756px 69.75px 0 rgba(0, 0, 0, 0.03), 0 8.2px 26px 0 rgba(0, 0, 0, 0.02), 0 1.794px 9.25px 0 rgba(0, 0, 0, 0.01);
        
    }
    header.header-is-active{
        background-color: #162819;
    }
    header .nav-link {
        padding: 0px 0px;
    }
    .header-scroll .header-is-active{
        background: #162819;
        background: url(../img/menu-open.png) no-repeat;
        background-size: cover;
        background-position: center center;
        box-shadow: 0 41px 160px 0 rgba(0, 0, 0, 0.04), 0 20.756px 69.75px 0 rgba(0, 0, 0, 0.03), 0 8.2px 26px 0 rgba(0, 0, 0, 0.02), 0 1.794px 9.25px 0 rgba(0, 0, 0, 0.01);
    }
    .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
        color: #fff;
    }
}
/* -------------------------------login--------------------------------- */

@media only screen and (max-width: 600px) {
    .auth-section {
        display: flex;
        justify-content: center;
        align-items: center;
        height: fit-content !important;
        margin-top: 78px;
        padding: 0px 0px;
    }
    .auth-section .container{
        padding: 0px 0px;
    }
    .auth-login .welcome-back {
        background: #D9D9D9;
        display: flex;
        max-width: 500px;
        padding: 40px 24px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        align-self: stretch;
        position: relative;
        margin: auto;
        padding-bottom: 107px;
    }
    .welcome-back-main {
        height: 461px;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 500px;
        margin: auto;
    }
    .auth-login .welcome-back::after, .auth-login .welcome-back::before{
        
        bottom: 151px;
        
    }
    .welcome-back .btn-green{
        width: 273px;
        margin: auto;
        margin-bottom: 16px;
    }
    .auth-register .welcome-back-main {
        height: 680px;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 500px;
        margin: auto;
    }
    .auth-reset-login .welcome-back-main::after {
        content: "";
        background: url(../img/devider-img.png) no-repeat;
        background-position: center center;
        background-size: 100%;
        position: absolute;
        left: 0px;
        right: 0%;
        bottom: 125px;
        width: 100%;
        height: 20px;
        z-index: 1;
    }
    .auth-reset-login .welcome-back-main {
        height: 408px;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 500px;
        margin: auto;
    }
    .auth-register .welcome-back {
        background: #D9D9D9;
        display: flex;
        max-width: 500px;
        padding: 40px 24px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        align-self: stretch;
        position: relative;
        margin: auto;
        padding-bottom: 107px;
    }
    .auth-register .welcome-back::after ,.auth-register .welcome-back::before{
        bottom: 147px;
        background: #000;
    }
    .auth-password-main {
        width: 327px;
        max-width: 100%;
        margin: auto;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 24px;
    }
    .auth-password-main h2 {
        color: var(--base-Off-Black, #0F0F0F);
        text-align: center;
        font-family: "Cal Sans";
        font-size: 32px;
        width: 88%;
        margin: auto;
        max-width: 100%;
        margin-bottom: -8px;
    }
    .auth-password {
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-self: center;
        margin: auto;
        padding: 40px 0px;
        align-items: center;
        margin-top: 6rem;
    }
    .erro-btn-warp {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        gap: 24px;
        margin: auto;
        flex-direction: row;
    }
    .auth-password-main .btn-green, .auth-password-main .btn-white{
        width: 189px;
    }
    .error-page-password .btn {
        height: 48px;
        width: 140px;
        max-width: 100%;
        font-size: 16px;
        padding: 12px 0px;
    }


}
/* -------------------------------footer--------------------------------- */
@media only screen and (max-width: 600px) {
    .footer-logo p {
        color: var(--base-White, #FFF);
        /* text-align: center; */
        font-feature-settings: 'salt' on;
        font-family: Cabin;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        margin-top: 16px;
        margin-bottom: 0px;
    }
    footer {
        padding: 32px 0px;
    }
    .footer-p {
        margin-top: 16px;
    }
    .footer .container{
        padding: 0px 24px;
    }
    .footer-p p{
        width: 249px;
        max-width: 100%;
    }
    .footer-link h6 {
        color: var(--base-White, #FFF);
        font-family: "Cal Sans";
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        text-transform: capitalize;
        margin-bottom: 16px;
    }
    .footer-navigation li a, .policies-link li a {
        color: var(--base-03, #BDBDBD);
        font-family: "Cal Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: 0.18px;
        text-transform: uppercase;
        text-decoration: none;
    }
    .footer-navigation ul li, .policies-link ul li {
        margin-bottom: 0px;
    }
    .footer-navigation ul, .policies-link ul{
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .socials-link ul {
        display: flex;
        gap: 24px;
    }
    .footer-logo{
        margin-bottom: 32px;
    }
    .footer-navigation {
        display: flex;
        gap: 40px;
    }
    .col-right-main-footer {
        display: flex;
        gap: 40px;
        flex-wrap: wrap;
        width: 723px;
        max-width: 100%;
        float: right;
        margin-bottom: 32px;
    }
    .footer-navigation ul, .policies-link ul, .socials-link ul {
        padding-left: 0px;
        list-style: none;
        margin-bottom: 0px;
    }
    .forget-main-modal .modal-content {
        display: flex;
        width: 500px;
        max-width: 100%;
        padding: 24px 24px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
        border-radius: 0px;
        background: var(--base-White, #FFF);
    }
    .forget-main-div .form-control {
        border: 1px solid var(--base-04, #E9E9E9);
        background: var(--base-Off-White, #FAFAFA);
        display: flex;
        height: 56px;
        max-height: 56px;
        padding: 20px 24px;
        align-items: center;
        align-self: stretch;
        color: var(--base-02, #727272);
        font-family: Cabin;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        width: 100%;
        max-width: 100%;
        border-radius: 0px;
    }
    .forget-main-div .modal-footer .btn-green {
        display: flex;
        padding: 12px 32px;
        justify-content: center;
        align-items: center;
        /* flex: 1 0 0; */
        color: var(--base-White, #FFF);
        font-family: "Cal Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: 0.18px;
        text-transform: uppercase;
        background: var(--brand-Main-Green, #2A7E2F);
        border-radius: 0px;
        width: 100%;
    }
    .policies-link-sociel{
        display: flex;
        gap: 30px;
    }


}
@media only screen and (max-width: 950px) and (min-width: 700px)  {
    .navbar-brand img {
        width: 126px;
        height: 32px;
    }
    .navbar-toggler{
        background: var(--brand-Main-Green, #2A7E2F);
        display: flex;
        padding: 8px;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 40px;
        border: 0px;
        border-radius: 0px;
    }
    .navbar {
        padding: 24px 24px;
        transition: all 0.3s ease;
    }
    .navbar-toggler-icon{
        background: url(../img/menu.svg) no-repeat;
        background-position: center center;
        background-size: cover;
        height: 14px;
        width: 18px;
        max-width: 100%;

    }
    .is-active .navbar-toggler-icon {
        background: url(../img/crass.svg) no-repeat;
        background-position: center center;
        background-size: cover;
        height: 10px;
        width: 10px;
        max-width: 100%;
    }
    .navbar-toggler:focus{
        outline: none;
        box-shadow: none;
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
        gap: 12px;
    }
    .right-side-menu .navbar-nav {
        display: flex;
        flex-direction: row;
    }
    .navbar-collapse{
        flex-basis: 100%;
        flex-grow: revert;
        align-items: baseline;
        display: none !important;
        flex-direction: column;
    }
    .navbar-collapse.collapse.show{
        display: flex !important;
        gap: 24px;
        justify-content: center;
        align-items: center;
        padding-top: 48px;
    }
    .menu-items-mobile{
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 0;
    }
    .navbar-collapse h5{
        color: var(--base-White, #FFF);
        font-family: "Cal Sans";
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 28.8px */
        display: block;
        text-transform: capitalize;
        text-align: center;
        margin-bottom: 4px;
    }
    .navbar-nav{
        order: 1;
    }
    .navbar{
       background: #162819;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    header .nav-link {
        color: var(--base-03, #BDBDBD);
        font-family: "Cal Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: 0.18px;
        text-transform: uppercase;
        text-align: center;
    }
    .right-side-menu .navbar-nav {
        gap: 16px;
    }
    .right-side-menu .user-icon {
        width: 25px;
        height: 27.5px;
        filter: invert(1);
    }
    .right-side-menu .shopping-basket-icon {
        width: 35px;
        height: 31.133px;
        filter: invert(1);
    }
    .dropdown-toggle::after {
        border: none;
        background: url(../img/drop-icon.svg) no-repeat;
        background-position: center center;
        background-size: cover;
        width: 12px;
        height: 8px;
        max-width: 100%;
        filter: invert(1);
    }
    .header-bottom{
        text-align: center;
        display: flex;
        height: 67px;
        padding: 25px 24px 0 24px;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
    }
    header .navbar {
        display: block;
    }
    .header-bottom{
        display: none !important;
    }
    .header-is-active .header-bottom{
        display: block !important;
        order: 1;
        position: relative;
    }   
    .header-bottom p {
        color: var(--brand-Light-Green, #51AF5E);
        font-feature-settings: 'salt' on;
        font-family: Cabin;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        text-align: center;
        display: block;
        margin: auto;
        width: 100%;
    }
    header .container{
        padding: 0px 0px;
    }
    .header-scroll .navbar {
        padding: 24px 24px;
        background-color: #162819;
    }
    header .nav-link {
        padding: 0px 0px;
    }

    .footer-logo p {
        color: var(--base-White, #FFF);
        /* text-align: center; */
        font-feature-settings: 'salt' on;
        font-family: Cabin;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        margin-top: 16px;
        margin-bottom: 0px;
    }
    footer {
        padding: 32px 0px;
    }
    .footer-p {
        margin-top: 16px;
    }
    .footer .container{
        padding: 0px 24px;
    }
    .footer-p p{
        width: 249px;
        max-width: 100%;
    }
    .footer-link h6 {
        color: var(--base-White, #FFF);
        font-family: "Cal Sans";
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        text-transform: capitalize;
        margin-bottom: 16px;
    }
    .footer-navigation li a, .policies-link li a {
        color: var(--base-03, #BDBDBD);
        font-family: "Cal Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: 0.18px;
        text-transform: uppercase;
        text-decoration: none;
    }
    .footer-navigation ul li, .policies-link ul li {
        margin-bottom: 0px;
    }
    .footer-navigation ul, .policies-link ul{
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .socials-link ul {
        display: flex;
        gap: 24px;
    }
    .footer-logo{
        margin-bottom: 32px;
    }
    .footer-navigation {
        display: flex;
        gap: 40px;
    }
    .col-right-main-footer {
        display: flex;
        gap: 40px;
        flex-wrap: wrap;
        width: 723px;
        max-width: 100%;
        float: right;
        margin-bottom: 32px;
    }
    .footer-navigation ul, .policies-link ul, .socials-link ul {
        padding-left: 0px;
        list-style: none;
        margin-bottom: 0px;
    }
    .auth-section {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 708px;
        margin-top: 5rem;
    }
    .auth-reset-login .welcome-back-main::after {
        content: "";
        background: url(../img/devider-img.png) no-repeat;
        background-position: center center;
        background-size: 100%;
        position: absolute;
        left: 0px;
        right: 0%;
        bottom: 119px;
        width: 100%;
        height: 20px;
        z-index: 1;
    }
    .auth-reset-login .welcome-back-main {
        height: 450px;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 500px;
        margin: auto;
    }
    .auth-reset-login .welcome-back::before, .auth-reset-login .welcome-back::after {
        bottom: 56px;
    }

}
@media only screen and (min-width: 970px) and (max-width: 1080px)  {
    .auth-password {
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-self: center;
        margin: auto;
        padding: 104px 0px;
        align-items: center;
        margin-top: 6rem;
    }
    .navbar-expand-lg .navbar-nav {
        gap: 3px;
    }
    .navbar {
        padding: 21px 0;
        transition: all 0.3s ease;
    }
    .col-right-main-footer {
        display: flex;
        gap: 19px;
        flex-wrap: wrap;
        width: 847px;
        max-width: 100%;
        float: right;
    }
    .footer-navigation li a, .policies-link li a {
        color: var(--base-03, #BDBDBD);
        font-family: "Cal Sans";
        font-size: 14px;
    }
}

@media only screen and (min-width: 1100px) and (max-width: 1290px)  {
    .navbar-expand-lg .navbar-nav {
        gap: 18px;
    }
    .navbar {
        padding: 21px 0;
        transition: all 0.3s ease;
    }
    .col-right-main-footer {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
        width: 847px;
        max-width: 100%;
        float: right;
    }
    .footer-navigation li a, .policies-link li a {
        color: var(--base-03, #BDBDBD);
        font-family: "Cal Sans";
        font-size: 16px;
    }
    .auth-password {
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-self: center;
        margin: auto;
        padding: 104px 0px;
        align-items: center;
        margin-top: 6.5rem;
    }
}
@media only screen and (min-width: 1300px) and (max-width: 1390px)  {
    .navbar-expand-lg .navbar-nav {
        gap: 18px;
    }
    .navbar {
        padding: 21px 0;
        transition: all 0.3s ease;
    }
    .col-right-main-footer {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
        width: 847px;
        max-width: 100%;
        float: right;
    }
    .auth-password {
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-self: center;
        margin: auto;
        padding: 104px 0px;
        align-items: center;
        margin-top: 7rem;
    }
}