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

@media (max-width:1024px){

	header{
		padding:20px 30px;
	}

	.w-\[1392px\]{
		width:100% !important;
	}

	.max-w-\[1380px\]{
		padding-left:20px;
		padding-right:20px;
	}

	.text-\[73px\]{
		font-size:56px !important;
	}

	.text-\[44px\]{
		font-size:34px !important;
	}

	.text-\[32px\]{
		font-size:28px !important;
	}

}


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

@media (max-width:768px){

	body{
		overflow-x:hidden;
	}

	main{
		overflow:hidden;
	}

	/* ---------- HEADER ---------- */

	header{
		padding:18px;
	}

	header nav{
		display:none;
	}

	header a[href^="tel"]{
		display:none;
	}

	/* ---------- HERO ---------- */

	.h-\[707px\]{
		height:auto !important;
		min-height:650px;
	}

	.p-\[60px\]{
		padding:24px !important;
	}

	.text-\[73px\]{
		font-size:34px !important;
		line-height:1.15;
	}

	.text-\[24px\]{
		font-size:18px !important;
	}

	.text-\[16px\]{
		font-size:14px !important;
	}

	.max-w-\[720px\],
	.max-w-\[750px\],
	.max-w-\[636px\],
	.max-w-\[690px\],
	.max-w-\[1004px\]{
		max-width:100% !important;
	}

	.absolute.bottom-\[60px\].left-\[60px\]{
		position:relative;
		left:auto;
		bottom:auto;
		margin-top:40px;
	}

	/* ---------- FEELING ---------- */

	.mt-\[120px\]{
		margin-top:60px !important;
	}

	.mb-\[80px\]{
		margin-bottom:60px !important;
	}

	.text-\[140px\]{
		font-size:30px !important;
	}

	.w-\[1380px\]{
		width:100% !important;
	}

	.h-\[403px\]{
		height:250px !important;
	}

	/* ---------- WORK ---------- */

	.w-\[1392px\]{
		width:100% !important;
	}

	.h-\[835px\]{
		height:auto !important;
	}

	.grid-cols-4{
		grid-template-columns:1fr !important;
	}

	.gap-12{
		gap:20px !important;
	}

	.text-\[44px\]{
		font-size:28px !important;
	}

	/* ---------- ABOUT ---------- */

	.md\:grid-cols-2{
		grid-template-columns:1fr !important;
	}

	.leading-\[34px\]{
		line-height:1.8;
	}

	/* ---------- STATS ---------- */

	.grid-cols-4{
		grid-template-columns:repeat(2,minmax(0,1fr)) !important;
	}

	section .grid-cols-4 > div{
		text-align:center;
	}

	/* ---------- PROGRAMS ---------- */

	.rounded-\[60px\]{
		border-radius:24px !important;
	}

	/* ---------- BLOG ---------- */

	.px-\[70px\]{
		padding-left:20px !important;
		padding-right:20px !important;
	}

	/* ---------- CTA ---------- */

	.h-\[500px\]{
		height:auto !important;
	}

	.text-\[28px\]{
		font-size:22px !important;
	}

	.my-\[32px\]{
		gap:10px;
	}

	/* ---------- FOOTER ---------- */

	footer{
		text-align:center;
		padding:30px 20px;
	}

	footer>div{
		justify-content:center;
		flex-wrap:wrap;
	}

}


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

@media (max-width:480px){

	.text-\[73px\]{
		font-size:28px !important;
	}

	.text-\[44px\]{
		font-size:24px !important;
	}

	.text-\[32px\]{
		font-size:22px !important;
	}

	.text-\[24px\]{
		font-size:16px !important;
	}

	.p-\[60px\]{
		padding:18px !important;
	}

	.px-\[40px\]{
		padding-left:24px !important;
		padding-right:24px !important;
	}

	.py-\[15px\]{
		padding-top:12px !important;
		padding-bottom:12px !important;
	}

	.rounded-\[34px\]{
		border-radius:20px !important;
	}

}

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

.mobile-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:99;

}

.mobile-overlay.active{

    opacity:1;
    visibility:visible;

}

.mobile-menu{

    position:fixed;

    top:0;
    right:-320px;

    width:300px;
    max-width:85%;

    height:100vh;

    background:#fff;

    transition:.35s;

    z-index:100;

    padding:90px 30px;

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

}

.mobile-menu.active{

    right:0;

}

.mobile-menu nav{

    display:flex;
    flex-direction:column;
    gap:25px;

}

.mobile-menu nav a{

    font-size:18px;
    text-transform:uppercase;
    text-decoration:none;
    color:#2B2223;

}

.close-btn{

    position:absolute;

    top:25px;
    right:25px;

    border:none;
    background:none;

    font-size:28px;

    cursor:pointer;

}

@media (min-width:769px){

    .mobile-menu,
    .mobile-overlay{

        display:none;

    }

}