@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --font-main: 'Inter';


	--font-size-h1: 26px;
	--font-size-h2: 24px;
	--font-size-h3: 22px;
	--font-size-h4: 20px;
	--font-size-h5: 18px;
	--line-height-h1: 38px;
	--line-height-h2: 34px;
	--line-height-h3: 32px;
	--line-height-h4: 30px;
	--line-height-h5: 26px;

    /*colors*/
    --color-blue: #008CFF;
    
}

@media (min-width: 992px) {
	:root {
		--font-size-h1: 38px;
		--font-size-h2: 32px;
		--font-size-h3: 24px;
        --line-height-h1: 48px;
		--line-height-h2: 42px;
        --line-height-h3: 34px;
        
	}	
}

@media (min-width: 1336px) {
	:root {
		--font-size-h1: 42px;
		--font-size-h2: 36px;
        --font-size-h3: 32px;
        --font-size-h4: 24px;
        --font-size-h5: 20px;
		--line-height-h1: 50px;
		--line-height-h2: 43px;
        --line-height-h3: 42px;
        --line-height-h4: 34px;
        --line-height-h5: 26px;
	}	
}

/**** heading ***/
h1{ 
	font-family: var(--font-main); 
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
    font-weight: 700;
}

h2{ 
	font-family: var(--font-main);
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
    font-weight: 700;
}

h3{ 
	font-family: var(--font-main);
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
    font-weight: 700;
}

h4{ 
	font-family: var(--font-main);
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
    font-weight: 600;
}

h5{ 
	font-family: var(--font-main);
	font-size: var(--font-size-h5);
	line-height: var(--line-height-h5);
    font-weight: 500;
}

/**** paragraph****/
p, li{ 
	font-family: var(--font-main); 
	line-height: 24px;
    font-weight: 400;
}



@media (min-width: 1200px) {
    p, li{ 
        font-size: 16px;
        line-height: 24px;
    }
    a{ font-size: 16px;}
}

a{
	font-family: var(--font-main); 
	text-decoration: none;
    font-weight: 400;
}

/*Common*/
    body{ overflow-x:hidden !important; font-family: var(--font-main) !important;}
    .container{ width: 98%; max-width: 1440px;}
    .sp-50{ padding-top:30px; padding-bottom:30px;}
    .spt-50{ padding-top:30px;}
    .spb-50{ padding-bottom:30px;}
	.sp-30{ padding-top:30px; padding-bottom:30px;}
    .spt-30{ padding-top:30px;}
    .spb-30{ padding-bottom:30px;}
    .mt-30{ margin-top: 30px;}
    .mb-30{ margin-bottom: 30px;}
    .btn:focus, .btn.focus, a:focus, .swiper-pagination-bullet:focus, button:focus {outline: 0; box-shadow: none !important;}
    .btn.btn-rounded{ border-radius: 44px;}
    .btn{ border-radius: 5px; font-size: 16px; transition: all 300ms linear; border: 0;}
	.btn-black{ background: #151515; color: #fff; padding: 7px 30px;}
	.btn-black:hover{ background: rgba(0, 0, 0, 0.7); color: #fff;}
    .btn-black:active, .btn:focus{background: #151515; color: #fff;}
    .w-100{ width: 100%;}
	.txt-grey{ color: rgba(0, 0, 0, 0.5);}
	.body-bg-grey{ background: #f0f0f0;}
   
@media (max-width: 767px) {
    .row.col-reverse{ flex-direction: column-reverse;}
    .xs-mb-20{ margin-bottom: 20px;}
    .xs-mb-30{ margin-bottom: 30px;}
	.xs-mt-20{ margin-top: 20px;}
    .xs-mt-30{ margin-top: 30px;}
    .xs-text-center{ text-align: center;}
}  

@media (min-width: 992px) {
	.container{ width: 98%; max-width: 1440px;}
	span.db{ display: block;}
	.sp-50{ padding-top:50px; padding-bottom:50px;}
	.spt-50{ padding-top:50px;}
	.spb-50{ padding-bottom:50px;}
	.max-800{max-width: 800px; margin-left: auto; margin-right: auto;}
    .max-940{max-width: 940px; margin-left: auto; margin-right: auto;}
    .max-980{ max-width: 980px; margin-left: auto; margin-right: auto;}
    .max-1000{ max-width: 1000px; margin-left: auto; margin-right: auto;}
    .btn{ font-size: 18px;}
    .txt-20{ font-size: 20px; line-height: 28px;}
}

@media (min-width: 1600px) {
    .sp-50{ padding-top:70px; padding-bottom:70px;}
	.spt-50{ padding-top:70px;}
	.spb-50{ padding-bottom:70px;}
}