/* ================= MEDIA SCREEN ================= */
/* ================= Small Devices (Landscape Phones) ================= */
@media (min-width: 576px) and (max-width: 767.98px){
	
}

/* ================= Medium Devices (Tablets) ================= */
@media (min-width: 768px) and (max-width: 991.98px){
	.space_section{
		padding:60px 0;
	}
	
	h1{
		font-size:35px;
	}
	
	h2{
		font-size:27px;
		margin-bottom: 15px;
		line-height: 1.25;
	}
	
	h3, h4{
		font-size:18px;
	}
	
	h5{
		font-size:16px;
	}
}

/* ================= Large Devices (Desktop) ================= */
@media (min-width: 992px) and (max-width: 1199.98px){
	.space_section{
		padding:70px 0;
	}
	
	h1{
		font-size:40px;
	}
	
	h2{
		font-size:30px;
	}
	
	h3, h4{
		font-size:20px;
	}
	
	h5{
		font-size:17px;
	}
	
	h6, p{
		font-size:14px;
	}
}

/* ================= X-Large (Large Desktop) ================= */
@media (min-width: 1200px) and (max-width: 1399.98px){
	
}

/* ================= XX-Large (Huge Desktop) ================= */
@media (min-width: 1400px){
	#introduction article ul li,
	#customer article p,
	.accordion-body{
		font-size:16px;
	}

	#why-choose-us article p,
	#services-FitMe article p,
	#our-team-FitMe article p{
		font-size:15px;
	}
}


/* ================= Options Devices (All Devices) ================= */
@media (min-width: 1130px){
	.content-width{
		width:1100px;
		margin:0 auto;
	}
}

@media (min-width:992px){
	#menu{
		float:right;
	}
	
	#menu .nav-item .nav-link img{
		display:none;
	}
	
	.logo-mobile{
		display: none;
	}

	#introduction article{
		padding-left:30px;
	}
}

@media (max-width:991.98px){ 
	#header.animate{
		animation-fill-mode:none;
	}

	#menu .nav-item .nav-link img{
		width:32px;
		height:32px;
		margin-right:10px;
	}

	.sticky{
		background-color:var(--white);
		box-shadow:0 1px 5px var(--green);
	}

	.sticky .navbar-nav .nav-item .nav-link{
		color:var(--white) !important;
		padding:17px 0;
		font-size:17px;
	}

	#focus-top{
		background-size: cover;
	}

    .navbar-nav .nav-item .nav-link{
        padding:10px 0;
    }

    #focus-top h1{
        font-size:32px;
    }

    #menu{
        margin-top:40px;
    }
    
    .navbar-nav .nav-item .nav-link{
        padding-left:0;
    }
    
    #navbar_main{
		background: url('../images/bg-menu.jpg?v=1.0') no-repeat center center;
		background-size:cover;
        padding:20px;
    }
    
    .logo-brand img{
        max-width:120px;
    }
    
    header .content-width{
        display:block;
		padding:0;
    }
    
    #header{
        padding:10px 15px !important;
    }
    
    .logo-mobile img{
        max-width:100px;
    }
    
	.container-fluid{
		overflow-x:hidden;
	}
	
	.offcanvas-header{ display:block; }
	.mobile-offcanvas{
		visibility: hidden;
		transform:translateX(-100%);
	    border-radius:0; 
		display:block;
	    position: fixed;
	    top: 0; left:0;
		background:#fff;
	    height: 100%;
	    z-index: 10;
	    width:75%;
		box-shadow:5px 0px 15px #063c3c;
	    overflow-y: scroll;
	    overflow-x: hidden;
	    transition: visibility .3s ease-in-out, transform .3s ease-in-out;
	}

	.mobile-offcanvas.show{
		visibility: visible;
    	transform: translateX(0);
	}
	.mobile-offcanvas .container, .mobile-offcanvas .container-fluid{
		display: block;
	}
	
	#btn-menu{
		background:none;
		border:0;
		transition:all 0.2s ease;
		float:right;
		margin-left: 25px;
		margin-top: 5px;
	}
	
	#btn-menu span{
		width: 26px;
		height: 2px;
		margin-bottom: 8px;
		background-color:var(--green);
		display:block;
	}
	
	.navbar-brand, #navbar_main .nav-item .nav-link::after{
		display:none;
	}
}

@media (max-width: 767.98px) {
	.content-width{
		padding:0 15px;
	}
	
	.space_section{
		padding:50px 0;
	}
	
	h1, h2{
		font-size:32px;
	}
	
	h3, h4{
		font-size:21px;
	}
	
	h5{
		font-size:15px;
	}
	
	h6, p{
		font-size:14px;
	}
}

/* ================= X-Small Devices (Portrait Phones) ================= */
@media (max-width: 575.98px){
	#focus-top {
		background-size: 760px;
		background-position: -288px 60px;
	}
	
	.bg-focus-top{
		padding: 245px 0 120px;
		margin-top: -82px;
	}
	
	#introduction h2{
		margin-top:30px;
	}
	
	.title-section h2{
		font-size:28px;
	}
	
	.title-section hr{
		width:90px;
		border-top:4px solid var(--green);
	}
	
	ul li{
		font-size:15px;
	}
	
	h5{
		font-size:18px;
	}
	
	#why-choose-us article{
		margin-bottom:30px;
	}
	
	.accordion-button{
		font-size:16px;
	}
}