@font-face {
  font-family: 'sogo-light';
  src:url('../fonts/sogo-light.woff') format('woff'),
        url('../fonts/sogo-light.woff2') format('woff2'),
        url('../fonts/sogo-light.eot'),
        url('../fonts/sogo-light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/sogo-light.otf') format('truetype');

  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'sogo-regular';
  src:url('../fonts/sogo-regular.woff') format('woff'),
        url('../fonts/sogo-regular.woff2') format('woff2'),
        url('../fonts/sogo-regular.eot'),
        url('../fonts/sogo-regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/sogo-regular.otf') format('truetype');

  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'sogo-medium';
  src:url('../fonts/sogo-medium.woff') format('woff'),
        url('../fonts/sogo-medium.woff2') format('woff2'),
        url('../fonts/sogo-medium.eot'),
        url('../fonts/sogo-medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/sogo-medium.otf') format('truetype');

  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'sogo-bold';
  src:url('../fonts/sogo-bold.woff') format('woff'),
        url('../fonts/sogo-bold.woff2') format('woff2'),
        url('../fonts/sogo-bold.eot'),
        url('../fonts/sogo-bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/sogo-bold.otf') format('truetype');

  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
	--lg-wapper:6rem;
	--input-field:30px;
	--input-height:60px;
	--input-padding:1.5rem;
	--container-padding:1.25rem;
	--header-height:12rem;
	--fwcontact-icon:30px;	
    /*container*/
    --main-container:1920px;
	--secondary-container:1500px;
	--third-container:1480px;	
	--small-container:900px;  	  
    /*font-family*/
    --main-fonts:"Mulish", sans-serif;
	--secondary-fonts: 'sogo-regular';
	--third-fonts: 'sogo-bold';
	--fourth-fonts: 'sogo-light';
	--fifth-fonts: 'sogo-medium';
	--f-Thin:100;
	--f-Extralight:200;
	--f-Light:300;
	--f-Regular:400;
	--f-Medium:500;
	--f-Semibold:600;
	--f-Bold:700;
	--f-Black:900;	
     /*color*/
    --main-color:#3DC6C6;
    --secondary-color:#36A2A2;
	--third-color:#EE312E;
	--fourth-color:#42B48C;
	--white-color:#ffffff;
	--brown-color:#50362B;
	--brown-color-opacity:rgba(80, 54, 43, 0.6);
	--black-color:#000000;
	--grey-color:#242424;	
	--lightgrey-color:#F8F8F8;	
	--grey-color2:#A2A2A2;
	--gradient-1:linear-gradient(to right, #002375 , #00033B);
	--gradient-2:linear-gradient(to right, #000675 , #C3061C);
	--gradient-3:linear-gradient(to right, #6E0812	 , #C3061C);
    /*space*/  
    --box-space:2.5rem;
    --section-space:4rem;
    --post-space:2.25rem; 
    --banner-space:3rem;
    --fw-sapce:2rem;
    --block-space:2rem;
    --item-space:1.25rem;
    --header-col:1rem;
    --filter-space:1rem;
	--border-radius:1.5625rem;
	--col-gap:0.7rem;
    --tile-height:46rem;
	--gallery-height:36.875rem;
	--side-width:300px;
	--space-side:3rem;
	--line-height:170%;
    /*font-size*/ 
	--size-xxx-small:0.875rem;/*14*/
    --size-xx-small: 1.125rem;/*18*/
	--size-x-small:1.375rem;/*20*/
	--size-small:1.375rem;/*22*/
	--size-xx-medium:1.5rem;/*24*/	
	--size-medium:1.875rem;/*30*/
	--size-xx-large:1.875rem;/*40*/
	--size-x-large:2.25rem;/*45*/			
	--size-large:2.75rem;/*60*/


	/*button*/
	--swiper-navigation-size:4rem; 
	--btn-padding:1.5rem;
	--btn-height:50px;
	--btn-width:12.5rem;
	--btn-quantity:3.5rem;
	--btn-size:3.5rem;
	}

	html{
		font-size:85%;
	}

.container-wrap{
	padding-left:0;
	padding-right:0;
}


@media (min-width:576px){
	html{
		font-size:90%;
		--size-large:3.125rem;/*60*/
	}
	:root{
		--container-padding:2rem;
		--block-space:3em;
	}
}

	

@media (min-width:992px) {
	:root{
		--header-height:15rem;
		--col-gap:1.25rem;	
		--btn-size:3.875rem;		
		--container-padding:3rem;
		--header-col:2rem;		
		--block-space:4.375rem;
		  --section-space:6.25rem;
		  --size-x-large:2.8125rem;/*45*/	
		  --size-xx-large:2.5rem;/*40*/
		--size-large:5rem;/*80*/
		--lg-wapper:8rem;
		 
	}

	.container-wrap{
	padding-left:5%;
	padding-right:5%;
}


	
}


@media (min-width:1280px) {
	:root{
		--lg-wapper:10.9375rem;
	}
}	
	
	
@media (min-width:1600px) {
	html{
		font-size:100%;
	}
	
	:root{
		--container-padding:4.375rem;
	
	}


	.container-wrap{
	padding-left:8%;
	padding-right:8%;
}


}




.white-color{
	color:var(--white-color);
}

.black-color{
	color:var(--black-color);
}

.grey-color{
	color:var(--grey-color);
}



.main-color{
	color: var(--main-color);
}

.secondary-color{
	color: var(--secondary-color);
}

.main-container{
	max-width:var(--main-container);
	
}


.small-container{
	max-width:var(--small-container);
}

.secondary-container{
	max-width:var(--secondary-container);
}


.main-bg{
	background: var(--main-color);
}

.secondary-bg{
	background: var(--secondary-color);
}

.third-bg{
	background: var(--third-color);
}
.fourth-bg{
	background: var(--fourth-color);
}

.black-bg{
	background: var(--black-color);
}

.white-bg{
	background: var(--white-color);
}


.brown-bg{
	background: var(--brown-color);
}

.brown-bg-opacity{
	background: var(--brown-color-opacity);
}



.lightgrey-bg {
	background: var(--lightgrey-color);
}

.gradient-1-bg{
	background: var(--gradient-1);
}

.gradient-3-bg{
	background: var(--gradient-3);
}

.green-bg{
	background: #4AA596;
}

.green-bg02{
	background:#86C9BE;
}

.grey-bg{
	background:var(--grey-color);
}

.grey-bg02{
	background:#E8E8E8;
}
	
	
	
.pink-bg{
	background:#BF2249;
}

.pink-bg02{
	background:#73142C;
}


.f-Bold{
	font-weight:var(--f-Bold);
}

.f-Light{
	font-weight:var(--f-Light);
}

.f-Semibold{
	font-weight:var(--f-Semibold);
}

.f-Black{
	font-weight:var(--f-Black);
}