/*
 Theme Name: Bittanto
 Theme URI: https://themeforest.net/user/themewar/portfolio
 Author: themewar
 Author URI: 
 Description: Bittanto - Creative Resume HTML5 Responsive Template
 Version: 1.0
 License:
 License URI:
*/

/*=======================================================================
[Table of contents]
=========================================================================
1. Responsive For Extra large Device 2
2. Desktop Device
3. Responsive For Tab Device
4. Responsive For Mobile & Tab
5. Responsive For Mobile Device
*/

/*------------------------------------------------------------------------------------
/ 1. Responsive For Extra large Device 2
--------------------------------------------------------------------------------------*/
@media (min-width: 1200px) and (max-width: 1600px){

}
/*------------------------------------------------------------------------------------
/ 2. Desktop Device
/--------------------------------------------------------------------------------------*/
@media (min-width: 1024px) and (max-width: 1360px){
    header{
        padding: 22px 30px;
    }
    .mainMenu ul li{
        margin: 0 20px;
    }
    .headerBTN .landBtn{
        min-width: inherit;
        padding: 0 25px;
    }
    .infoBox{
        padding: 15px;
    }
}
/*------------------------------------------------------------------------------------
/ 3. Responsive For Tab Device
/--------------------------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1023px){
    header{
        padding: 22px 0px;
    }
    .logo{
        width: 24%;
    }
    .mainMenu{
        width: 61%;
        justify-content: flex-start;
    }
    .mainMenu ul li{
        margin: 0 15px;
    }
    .mainMenu ul li a{
        font-size: 16px;
    }
    .landBtn{
        padding: 0 15px;
    }
    footer h2,
    .fixedBanner h2 {
        font-size: 42px;
        line-height: 64px;
    }
    .singleCount h2 {
        font-size: 48px;
    }
    .countArea {
        padding: 22px 0;
        margin-top: -85px;
    }
    .featuresSection {
        margin-top: 30px;
        padding-bottom: 50px;
        padding: 80px 0;
    }
}
/*------------------------------------------------------------------------------------
/ 5. Responsive For Mobile Device
--------------------------------------------------------------------------------------*/
@media (max-width: 767px){
    header{
        padding: 20px 0px;
    }
    .headerBTN{
        display: none;
    }
    .logo{
        width: 25%;
    }
    .mobileBtns{
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        width: 75%;
    }
    .mobileBtns a{
        width: 45px;
        height: 45px;
        background: #FFF;
        font-size: 19px;
        line-height: 45px;
        color: var(--tw-primary-color);
        margin-left: 5px;
        text-align: center;
    }
    .fixedHeader .mobileBtns a{
        background: var(--tw-primary-color);
        color: #FFF;
    }
    .mobileBtns a:hover, .mobileBtns a.active{
        background: var(--tw-primary-color);
        color: #FFF;
    }
    .fixedHeader .mobileBtns a:hover, .fixedHeader .mobileBtns a.active{
        background: #000;
        color: #FFF;
    }
    .mainMenu{
        position: absolute;
        left: -15px;
        top: calc(100% + 20px);
        background: #FFF;
        width: calc(100% + 30px);
        border-top: 3px solid var(--tw-primary-color);
        border-bottom: 3px solid var(--tw-primary-color);
        display: none;
    }
    .mainMenu ul{
        display: block;
        width: 100%;
    }
    .mainMenu ul li{
        display: block;
        margin: 20px 0;
        padding: 0 15px;
    }
    .mainMenu ul li a{
        color: #000;
        display: inline-block;
    }
    .mainMenu ul li a:after{
        background: #000;
        height: 2px;
    }
    .fixedBanner h2, footer h2{
        font-size: 36px;
        line-height: 48px;
    }
    .singleCount.hasBorder{
        border: none;
        border-top: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
        margin: 30px 0;
        padding-top: 35px;
        padding-bottom: 40px;
    }
    .stBar{
        max-width: 100%;
    }
    .featuredSectionSlider .fsItems{
        margin: 0;
    }
    .featuredSectionSlider{
        padding-top: 0;
    }
    .featuredSectionSlider .owl-stage-outer{
        min-height: inherit;
    }
    .featuresSection {
        margin-top: 10px;
        padding-bottom: 40px;
        padding-top: 50px;
    }
    .innerPageSection{
        padding: 80px 0;
    }
    .comonSection{
        padding-bottom: 80px;
    }
}
@media(max-width: 575px){
    .sectionTitle {
        font-size: 34px;
    }
}