/*=========================================================
GLOBAL RESPONSIVE
Desktop Large
1400px and below
=========================================================*/

@media (max-width:1400px){

/*=========================================================
GLOBAL CONTAINER
=========================================================*/

.container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:0 24px;

    box-sizing:border-box;

}

img{

    max-width:100%;

    height:auto;

    display:block;

}



section{

    overflow:visible;

}

}

html,
body{

    overflow-x:hidden;

}


/*=========================================================
LAPTOP
1200px and below
=========================================================*/

@media (max-width:1200px){

.container{

    padding:0 32px;

}

.section-heading{

    margin-bottom:70px;

}

.section-heading h2{

    font-size:48px;

}

.section-heading p{

    font-size:19px;

    max-width:700px;

    margin:0 auto;

}

}


/*=========================================================
TABLET
991px and below
=========================================================*/

@media (max-width:991px){

.container{

    padding:0 24px;

}

section{

    padding:90px 0 

}

.section-heading{

    margin-bottom:60px;

    text-align:center;

}

.section-heading h2{

    font-size:42px;

    line-height:1.2;

}

.section-heading p{

    font-size:18px;

    max-width:650px;

}

}


/*=========================================================
MOBILE
768px and below
=========================================================*/

@media (max-width:768px){

.container{

    padding:0 24px;

}

section{

    padding:80px 0 !important;

}

.section-heading{

    margin-bottom:50px;

}

.section-heading h2{

    font-size:36px;

    line-height:1.2;

}

.section-heading p{

    font-size:17px;

    line-height:1.8;

}

}


/*=========================================================
SMALL MOBILE
480px and below
=========================================================*/

@media (max-width:480px){

.container{

    padding:0 20px;

}

section{

    padding:70px 0 !important;

}

.section-heading{

    margin-bottom:42px;

}

.section-heading h2{

    font-size:30px;

    line-height:1.25;

}

.section-heading p{

    font-size:16px;

    line-height:1.75;

}

}

/*=========================================================
HEADER
TABLET & MOBILE
991px and below
=========================================================*/

@media (max-width:991px){

.site-header{

    height:74px;

}

.header-container{

    height:74px;

    padding:0 20px;

}

.logo img{

    height:56px;

}

.desktop-btn{

    display:none;

}

/* Hamburger */

.menu-toggle{

    display:flex;

    z-index:1100;

}

/* Mobile Navigation */

.main-nav{

    position:fixed;

    top:74px;

    left:0;

    width:100%;

    height:calc(100vh - 74px);

    background:#FFFFFF;

    display:flex;

    justify-content:flex-start;

    opacity:0;

    visibility:hidden;

    transform:translateY(-20px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;

    overflow-y:auto;

    box-shadow:
        0 18px 40px rgba(0,0,0,.08);

}

.main-nav.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.main-nav ul{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    list-style:none;

    padding:24px 20px 40px;

    margin:0;

    gap:0;

}

.main-nav li{

    width:100%;

    text-align:center;

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

}

.main-nav li:last-child{

    border-bottom:none;

}

.main-nav a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:18px 20px;

    text-align:center;

    font-size:18px;

    font-weight:700;

    text-decoration:none;

}

.mobile-only{

    display:flex;

    justify-content:center;

    margin-top:36px;

    border:none;

}

.mobile-only .btn{

    width:220px;

    padding:10px 28px;

    margin:0 auto;

    font-size:15px;


}

body.menu-open{

    overflow:hidden;

}

}

.main-nav .btn.btn-primary{
        height: 43px;
        min-height: 38px;
        padding: 8px 24px;
        line-height: 22px;
        font-size: 14px;
    }

    


/*=========================================================
SMALL MOBILE
480px and below
=========================================================*/

@media (max-width:480px){

.site-header{

    height:68px;

}

.header-container{

    height:68px;

    padding:0 16px;

}

.logo img{

    height:50px;

}

.menu-toggle{

    width:42px;

    height:42px;

}

.menu-toggle span{

    width:26px;

}

.main-nav{

    top:68px;

    height:calc(100vh - 68px);

}

.main-nav a{

    font-size:17px;

    padding:16px;

}

.mobile-only .btn{

    width:220px;

}

}

/*=========================================================
GLOBAL RESPONSIVE
Desktop Large
1400px and below
=========================================================*/

html,
body{

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

@media (max-width:1400px){

/*=========================================================
GLOBAL CONTAINER
=========================================================*/

.container{

    width:100%;
    max-width:1400px;

    margin:0 auto;

    padding:0 24px;

    box-sizing:border-box;

}

section{

    overflow:visible;

}

}


/*=========================================================
LAPTOP
1200px and below
=========================================================*/

@media (max-width:1200px){

.container{

    padding:0 32px;

}

.section-header{

    margin-bottom:70px;

}

.section-title{

    font-size:48px;

}

.section-subtitle{

    font-size:19px;

    max-width:700px;

    margin:0 auto;

}

}


/*=========================================================
TABLET
991px and below
=========================================================*/

@media (max-width:991px){

.container{

    padding:0 24px;

}

section{

    padding:90px 0;

}

.section-header{

    margin-bottom:60px;

    text-align:center;

}

.section-title{

    font-size:42px;

    line-height:1.2;

}

.section-subtitle{

    font-size:18px;

    max-width:650px;

}

}


/*=========================================================
MOBILE
768px and below
=========================================================*/

@media (max-width:768px){

.container{

    padding:0 24px;

}

section{

    padding:80px 0;

}

.section-header{

    margin-bottom:50px;

}

.section-title{

    font-size:36px;

    line-height:1.2;

}

.section-subtitle{

    font-size:17px;

    line-height:1.8;

}

}


/*=========================================================
SMALL MOBILE
480px and below
=========================================================*/

@media (max-width:480px){

.container{

    padding:0 20px;

}

section{

    padding:70px 0;

}

.section-header{

    margin-bottom:42px;

}

.section-title{

    font-size:30px;

    line-height:1.25;

}

.section-subtitle{

    font-size:16px;

    line-height:1.75;

}

}


/*=========================================================
HEADER
TABLET & MOBILE
991px and below
=========================================================*/

@media (max-width:991px){

.site-header{

    height:74px;

}

.header-container{

    height:74px;

    padding:0 20px;

}

.logo img{

    height:56px;

}

.desktop-btn{

    display:none;

}


/* Hamburger */

.menu-toggle{

    display:flex;

    z-index:1100;

}


/* Mobile Navigation */

.main-nav{

    position:fixed;

    top:74px;
    left:0;

    width:100%;
    height:calc(100vh - 74px);

    background:#FFFFFF;

    display:flex;
    justify-content:flex-start;

    opacity:0;
    visibility:hidden;

    transform:translateY(-20px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;

    overflow-y:auto;

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.main-nav.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.main-nav ul{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    list-style:none;

    padding:24px 20px 40px;

    margin:0;

    gap:0;

}

.main-nav li{

    width:100%;

    text-align:center;

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

}

.main-nav li:last-child{

    border-bottom:none;

}

.main-nav a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:18px 20px;

    text-align:center;

    font-size:18px;

    font-weight:700;

    text-decoration:none;

}

.mobile-only{

    display:flex;

    justify-content:center;

    margin-top:36px;

    border:none;

}

.mobile-only .btn{

    width:220px;

    min-height:44px;

    padding:10px 28px;

    margin:0 auto;

    font-size:15px;

}

body.menu-open{

    overflow:hidden;

}

}


/*=========================================================
HEADER BUTTON
=========================================================*/

.main-nav .btn.btn-primary{

    height:43px;

    min-height:38px;

    padding:8px 24px;

    line-height:22px;

    font-size:14px;

}


/*=========================================================
SMALL MOBILE
480px and below
=========================================================*/

@media (max-width:480px){

.site-header{

    height:68px;

}

.header-container{

    height:68px;

    padding:0 16px;

}

.logo img{

    height:50px;

}

.menu-toggle{

    width:42px;

    height:42px;

}

.menu-toggle span{

    width:26px;

}

.main-nav{

    top:68px;

    height:calc(100vh - 68px);

}

.main-nav a{

    font-size:17px;

    padding:16px;

}

.mobile-only .btn{

    width:220px;

}

}

@media (min-width:992px){

    .mobile-only{
        display:none !important;
    }

}