/*==================================================
RESPONSIVE
XPERTTA THEME
==================================================*/


/*==================================================
LAPTOP
==================================================*/

@media (max-width:1366px){

.container{

    width:94%;

}

.hero-title{

    font-size:34px;

}

}


/*==================================================
TABLET
==================================================*/

@media (max-width:991px){

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

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#FFFFFF;

    padding:18px 0;

    box-shadow:0 8px 30px rgba(0,0,0,.08);

    z-index:9999;

}

.header-wrapper{

    min-height:70px;

}

.menu-toggle{

    display:block;

    margin-left:auto;

    position:relative;

    z-index:99999;

}

.header-right{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    height:100vh;

    background:#FFFFFF;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    padding:110px 35px 40px;

    gap:40px;

    transition:.35s;

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

}

.header-right.active{

    right:0;

}

.main-navigation{

    width:100%;

}

.main-menu{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:24px;

}

.main-menu li{

    width:100%;

}

.main-menu a{

    display:block;

    font-size:20px;

}

.header-button{

    width:100%;

}

/*==========================
HAMBURGER
==========================*/

.menu-toggle.active span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}

/*==========================
BODY
==========================*/

body{

    padding-top:90px;

}

}


/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){

.container{

    width:92%;

}

.logo img{

    width:150px;

}

.hero{

    min-height:auto;

}

.hero-title{

    font-size:32px;

    text-align:center;

}

.hero-text{

    text-align:center;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-outline{

    width:100%;

}

.hero-partner{

    justify-content:center;

}

.hero-partner::before,

.hero-partner::after{

    display:none;

}

.vc_row{

    margin-left:0 !important;

    margin-right:0 !important;

}

.card{

    margin-bottom:30px;

}

.cta-banner{

    min-height:auto;

    padding:60px 35px;

}

.cta-person,

.cta-decoration{

    display:none;

}

.cta-content{

    max-width:100%;

    margin:0;

    text-align:center;

}

.cta-content h2{

    font-size:30px;

}

.cta-content p{

    font-size:17px;

}

.growth-flow{

    flex-direction:column;

}

.growth-flow-left,

.growth-flow-right{

    width:100%;

}

.growth-flow-right{

    overflow:auto;

    padding-bottom:15px;

}

}


/*==================================================
SMALL MOBILE
==================================================*/

@media (max-width:480px){

.hero-title{

    font-size:28px;

}

.hero-text{

    font-size:16px;

}

.header-button{

    font-size:15px;

}

.cta-content h2{

    font-size:26px;

}

.services-left h2{

    font-size:32px;

}

}

body.menu-open{

    overflow:hidden;

}