/* ===============================
      desktop media screen 
  ============================================== */
 /* GLOBAL Css variable
   ============================= */

:root {
    /*Responsive Styles*/
    --responsive-heading2-size: 38px;
}

 @media only screen and (max-width: 1700px) {

     .thanks-you-page {
        height: auto;
        padding: 100px 0;
     }
 }
 @media only screen and (max-width: 1560px) {
     .about-nutri-wrp {
         width: 227px;
         height: 227px;
     }

 }
 
 @media only screen and (max-width: 1396px) {
     .thanks-you-page {
         height: auto;
         padding: 150px 0;
     }
 }
 
 @media only screen and (max-width: 1280px) {
     .fixdfull-section {
         height: auto;
     }
     body header .container .header-btn a{
        padding: 4.5px 15px 4.5px 15px;
     }
     header .main-logo {
        max-width: 105px;
     }
     header .main-logo img {
        max-width: 75px;
     }

     header .container {
        width: 95%;
     }
 }
 
 @media only screen and (max-width: 1150px) {
     .contact .contact-info {
         padding: 50px 31px
     }
     .banner{
        background-position: 45% center; 
     }
     .banner .banner-wrp{
        max-width: 50%;
     }
     header nav ul li{
        padding-right: 3%;
     }
     header nav ul li a {
         font-size: 13px;
     }
     header .header-btn a {
        font-size: 12.8px;
    }
    header nav {
        width: calc(100% - 520px);
    }
 }
 
 @media only screen and (max-width:1024px) {
     header .header-btn a {
         font-size: 10.5px;
         padding: 4.5px 13px 4.5px 12px
     }
     header .header-btn a.btn-secondary {
         padding: 6.5px 30px 6.5px 30px
     }
     header nav {
         width:calc(100% - 376px);
     }
     header .header-btn.profile-wrp a {
         font-size: 13px;
         padding: 10px 15px;
     }
    .banner {
            background-position: 56% 0;
    }
    header .container {
        width: 98%;
    }
}
 
 @media only screen and (max-width:980px) {
     .banner {
         background-image: none;
         background-color: #beebce;
     }
     .banner .banner-wrp {
         float: left;
         max-width: 100%;
     }
     .home-about .about-wrp {
         width: calc(100% / 1 - 0px)
     }
     .home-about .container {
         flex-direction: column;
     }
     .home-about .about-wrp:first-child,
     .home-about .about-wrp:nth-child(2),
     .home-about .about-wrp:last-child {
         max-width: 100%;
         width: 100%;
         text-align: center;
     }
     .login-form .login-formwrp {
         padding: 50px 30px 30px 30px
     }
     .register-page .login-max {
         max-width: 100%;
     }
     .login-form h3 {
         width: 70%;
     }
     .login-form .login-max {
         margin: 0 auto;
         float: none;
     }
     .login-form .login-box .btn-secondary{
        display: table;
        margin: 0 auto;
     }
     header .mobile-menu{
        width: 85%;
     }
     header nav {
        width: calc(100% - 476px);
    }
 }
 
 @media only screen and (max-width:800px) {
    h2 {
        font-size: var(--responsive-heading2-size);
    }
     header {
         padding: 10px 0;
     }
     #nav-icon {
         display: block;
     }
     header .main-logo:before {
         display: none;
     }
     header .main-logo {
         position: relative;
         box-shadow: none;
         height: auto;
         max-width: 58px
     }
     body header .mobile-menu {
         overflow-y: scroll;
         display: flex;
         flex-direction: column-reverse;
         position: fixed;
         height: 100vh;
         max-width: 325px;
         right: 0;
         background: #fff;
         top: 0;
         box-shadow: -12px 1px 93px rgba(0, 0, 0, 0.48);
         z-index: +999999;
         right: -500px;
         transition: all 0.3s;
         align-items: center;
         justify-content: flex-end;
     }
     .mobile-menu.active {
         right: 0px;
         box-shadow: -12px 1px 93px rgb(36 116 85);
     }
     header nav {
         padding-left: 0;
         width: 100%
     }
     header .header-btn {
         flex-direction: column;
         background: #367455
     }
     body header ul li {
         display: block;
         padding-right: 0
     }
     body header ul li a,
     body header .header-btn a {
         padding: 12px 20px;
         margin: 0;
         font-size: 15px;
         display: block;
         background: transparent;
         border-radius: inherit;
     }
     body header .header-btn a {
         border-bottom: 1px solid #70ba70;
     }
     body header nav ul li a {
         color: #4f564a;
         border-bottom: 1px solid #edeeed;
     }
     body header ul li:last-child a,
     body header .header-btn a:last-child {
         border-bottom: none
     }
     body .contact .container {
         flex-direction: column;
     }
     body .contact .container>div {
         width: 100%;padding: 30px;
     }
     footer .container {
         flex-direction: column;
     }
     footer .footer-bottom {
         text-align: center;
         font-size: 14px;
     }
     header .main-logo img {
         max-width: 52px
     }
     header .header-btn {
         max-width: 100%;
     }
     .user-name {
         width: 158px
     }
     header .profile-wrp .user-box {
         max-width: 100%;
         height: auto;
         border-radius: 0;
         padding: 0;
         display: flex;
         flex-direction: column;
     }
     header .profile-wrp .user-box .user-wpr {
         justify-content: end;
         padding: 12px 20px;
         border-bottom: 1px solid #edeeed;
     }
     .mobile-menu.active .user-box .user-arrow.active {
         transform: rotate(180deg);
     }
     .user-box .profile {
         position: relative;
         width: 100%;
         max-width: 100%;
         box-shadow: none;
         margin-top: 0;
     }
     .user-box .profile {
         max-height: 0;
         transition: max-height 0.2s ease-out;
         overflow: hidden;
         display: block;
     }
     .user-box .profile.active-profile {
         max-height: 500px;
         transition: max-height 0.2s ease-in;
         top: 0;
     }
     body header .header-btn a {
         margin-right: 0 !important;
         border: none;
         color: #fff;
         border-bottom: 1px solid #276345
     }
     .user-box .profile a:last-child {
         border-bottom: 1px solid #edeeed;
     }
     body header .user-box .profile a {
         color: #4f564a;
         padding: 12px 20px;
     }
     /* body .show-menu {
         -webkit-transform: translateX(300px);
         transform: translateX(-300px);
         -webkit-transition: -webkit-transform 0.3s linear;
         transition: -webkit-transform 0.3s linear;
         transition: transform 0.3s linear;
         transition: transform 0.3s linear, -webkit-transform 0.3s linear;
         overflow: inherit;
     }
     .content-area {
         -webkit-transition: -webkit-transform 0.3s linear;
         transition: -webkit-transform 0.3s linear;
         transition: transform 0.3s linear;
         transition: transform 0.3s linear, -webkit-transform 0.3s linear;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         overflow: scroll;
     } */
     body .form-coltwo {
         margin-right: 0px;
         width: calc(100% / 1 - 0px);
     }
     .register-page .width100:first-of-type .form-coltwo:first-of-type {
        margin-right: 0;
        flex-direction: column;
    }
    .register-page .radio-wrp {
        width: 100%;
    }
    .login-form .login-formwrp {
        padding: 150px 30px 30px 30px;
    }
    .top-postion-logo {
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .login-form h3 {
        width: 100%;
        text-align: center;
    }
    .login-form .login-box p{
        text-align: center;
    }
    span.check-icon {
        padding-top: 100px;
    }
    body .multiple .dropdown-selected {
        padding: 4px 4.1px;
        margin: 0 2px 3.6px 0;
    }
    body header .container .header-btn a:first-of-type{
        padding-left: 30px;
        line-height: 1.3;
        padding-top: 13px
    }

}
 
@media only screen and (max-width:520px) {
    .login-form .login-formwrp {
        padding: 150px 10px 30px 10px;
    }
    .contact .contact-info .btn-secondary{
        line-height: 1.3;
    }
    .mobile-code {
        line-height: 4.1;
    }
    .mobile-code,
    select, input,
    body .multiple .dropdown-chose-list .placeholder,
    .upload-label,
    .login-form .login-formwrp input::placeholder {
        font-size: 11px;
    }
    
    .login-form .login-formwrp input::-webkit-input-placeholder {
        font-size: 11px;

    }
    
    .login-form .login-formwrp input::-moz-placeholder {
        font-size: 11px;
    }
    
    .login-form .login-formwrp input:-ms-input-placeholder {
        font-size: 11px;  
    }


    .register-page .container{
        width:100%;
    }
    .login-form .login-formwrp label{
        line-height: 1.3;
    }
    .login-form .login-formwrp label[for="remember_me"]{
        line-height: 40px;
    }
    .login-form .login-formwrp label  .sub-text {
        display: block;
    }
    

    .show_password {
        top: 37px;
    }

    
}
@media (max-width:480px) {
    body .multiple .dropdown-selected {
        padding: 4px 4.1px;
        font-size: 9.3px;
        margin: 0 3.2px 8px 0;
        position: relative;
        top: -2px;
    }
}
 
 @media (max-width:400px) {
    body .multiple .dropdown-selected{
    
        padding: 4px 7.2px;
        font-size: 8.2px;
        margin: 0 1px 8px 0;
    
    }
     .dropdown-display .dropdown-chose-list{
    padding:9px 10px 10px;    
    }
 }