/* Loading resources and variables */
@font-face {
    font-family: 'Inter';
    src: url('../font/Inter/Inter-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('../font/Inter/Inter-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('../font/Inter/Inter-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('../font/Inter/Inter-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
}

:root {
    --black_background: #1E1E1E;
    --black: #000000;
    --white: #FFFFFF;
    --gray: #C4C4C4;
    --light_gray: #D9D9D9;
    --footer_gray: #A09E9E;
    --text_gray: #363636;
    --yellow: #FFB905;
    --light_yellow: #ffce50;
    --green: #009C51;
    
}

/* General styles */
html {
    scroll-behavior: smooth;
	letter-spacing: 0.01em;
}

@media only screen and (max-width: 1000px){
    html {
        overflow-x: hidden;
    }
}
body {
	/* Used for avoiding default borders in document */
	overflow-x: hidden;
	margin: 0;
	padding: 0;
    background-color: var(--white);
    font-family: "Inter";

    /* To hide scrollbar, uncomment this: */
    /* IE and Edge */
    /* -ms-overflow-style: none;   */
    /* Firefox */
    /* scrollbar-width: none;   */
    /* z-index: 1; */
}

/* To hide scrollbar, uncomment this: */
/* body::-webkit-scrollbar { */
    /* display: none; */
/* } */

h1, h2 {
	letter-spacing: 0.03em;
}
h2 {
	font-weight: 700;
}
@media only screen and (min-width: 1400px) and (max-width: 1580px){
	h1 {
		font-size: 40px;
	}
	div {
		font-size: 18px;
	}
}
@media only screen and (min-width: 1581px){
	h1 {
		font-size: 45px;
	}
	div {
		font-size: 20px;
	}
}
.semibold {
    font-weight: 600;
}

.limit_content {
    width: 1000px;
}
@media only screen and (min-width: 1400px){
	.limit_content {width: 1170px;}
}

.complete_width {
    width: 100vw;
}

/* Background colors */
.black_background {background-color: var(--black_background);}
.white_background {background-color: var(--white);}
.gray_background {background-color: var(--light_gray);}

/* Text colors */
.white_text {color: var(--white)}
.black_text {color: var(--black)}
.black_alt_text {color: var(--black_background)}
.yellow_text {color: var(--yellow)}
.gray_text {color: var(--text_gray)}

/* Text alignment */
.center_text {text-align: center;}
.start_text {text-align: start;}
.end_text {text-align: end;}

.no_padding {padding: 0;}
.no_margin {margin: 0;}

/* Drawing the oval sections */
.oval_limit {
    overflow-x: hidden;
}
.oval_top {
    border-radius: 50% / 100% 100% 0 0; 
}
.oval_bottom {
    border-radius: 50% / 0 0 100% 100%;
}
.oval_shape {
	height: 120px;
    width: 120vw;
}
@media only screen and (max-width: 450px) {
	.oval_shape {
		height: 110px;
		width: 150vw;
	}
}
@media only screen and (min-width: 1400px) and (max-width: 1580px) {
	.oval_shape {
		height: 200px;
		width: 110vw;
	}
}
@media only screen and (min-width: 1581px){
	.oval_shape {
		height: 220px;
		width: 105vw;
	}
}

.oval_shape_alt {
	height: 100px;
}
@media only screen and (max-width: 400px) {
	.oval_shape_alt {height: 70px;}
}
@media only screen and (min-width: 1400px) and (max-width: 1580px) {
	.oval_shape_alt {height: 100px;}
}
@media only screen and (min-width: 1581px){
	.oval_shape_alt {height: 120px;}
}

.oval_distance {
    margin: 80px 0 0 0;
}
@media only screen and (max-width: 500px) {
    .oval_distance {
        margin: 50px 0 0 0;
    }
}
.oval_distance_alt {
    margin: 120px 0 0 0;
}

/* Default distance between blocks */
.block_distance {
    margin: 200px 0 0 0;
}

.border_image {
    border: 2px solid var(--white);
}

/* Flips horizontally an image */
.flip_image {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.vertical_spacing {
    margin: 10px 0;
}

.short_horizontal_spacing {
    margin: 0 5px;
}

/* The responsivity is managed with Flexbox */
.vertical {
    display: flex;
    flex-direction: column;
}
.horizontal, .horizontal_responsive, .horizontal_responsive_card, .horizontal_responsive_reverse {
	display: flex;
    flex-direction: row;
}
@media only screen and (max-width: 1000px) {
	.horizontal_responsive {
		flex-direction: column;
	}
	.horizontal_responsive_reverse {
		flex-direction: column-reverse;
	}
	.horizontal_responsive_card {
		flex-direction: column;
	}
}
.center {
    align-items: center;
    justify-content: center;
}
.justify_start {
	justify-content: start;
}
.justify_center {
    justify-content: center;
}
.between, .between_responsive {
    justify-content: space-between;
}
.between_responsive {
    align-items: center;
}
.align_start {
    align-items: flex-start;
}
@media only screen and (min-width: 1001px) {
    .align_start_responsive {
        align-items: flex-start;
    }
}
.align_end, .align_end_responsive {
    align-items: flex-end;
}
@media only screen and (max-width: 1000px) {
    .align_end_responsive {
        align-items: center;
        justify-content: center;
    }
}
.align_center {
    align-items: center;
}
.wrap {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.responsive-div {
	display:flex;
	flex-direction :row;
	justify-content:space-evenly;
	align-items:center;
}

/* Buttons */
.button_a {
    color: var(--black);
    background-color: var(--yellow);
    border-radius: 5px;
    text-decoration: none;
    padding: 6px 38px;
    font-weight: 700;
}
.button_a_giant {
    font-size: 20px;
    padding: 12px 50px;
}
.button_a_short {
	padding: 12px 20px;
}
.button_a_larger {
    padding: 8px 32px;
}
.button_a:hover {
    filter: brightness(85%);
}

.button_b {
    color: var(--yellow);
    border-radius: 5px;
    border: 2px solid var(--yellow);
    text-decoration: none;
    padding: 8px 60px;
}
.button_b:hover {
    filter: brightness(85%);
  }
@media only screen and (max-width: 1000px) {
	.button_b {
		padding: 8px 20px;
	}
}

.button_c {
    color: var(--black);
    text-decoration: none;
    padding: 6px 10px;
    
    display: inline-block;
    background-image: linear-gradient(var(--black_background), var(--black_background));
    background-size: 0% 3px;
    background-repeat: no-repeat;
    transition: background-size 0.3s;
    margin: 5px 0;
    background-position: 50% 100%;
}
@media only screen and (max-width: 1000px) {
	.button_c {
		padding: 6px 2px;
	}
}
@media only screen and (min-width: 1001px) {
	.button_c {
		margin: 0 10px;
	}
}
.button_c:hover {
    background-size: 100% 3px;
}

.button_d {
    color: var(--yellow);
    border-bottom: 2px solid var(--yellow);
    text-decoration: none;
}
.button_d:hover {
    filter: brightness(85%);
}

.button_e {
    background-color: var(--green);
    border-radius: 5px;
    margin: 0;
    padding: 7px 60px 7px 35px;
}
.button_e a {
    width: 100px;
    text-decoration: none;
    color: var(--white);
}
.button_e_img {
    width: 25px;
    height: 25px;
    margin: 0 10px 0 0;
}
.button_e:hover {
    filter: brightness(85%);
}

.button_f {
    color: var(--black);
    background-color: var(--gray);
    border-radius: 5px;
    text-decoration: none;
    padding: 6px 32px;
}
.button_f_larger {
    padding: 8px 32px;
}
.button_f:hover {
    filter: brightness(85%);
}

/* Distance of 200px between section */
.sections_separator {
    margin: 100px 0;
}
@media only screen and (max-width: 1000px) {
    .sections_separator {
        margin: 50px 0;
    }
}

@media only screen and (max-width: 1000px) {
	.page_title {
		width: 90vw;
		max-width: 500px;
	}
}
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
	.page_title {width: 480px;}
}
@media only screen and (min-width: 1201px) and (max-width: 1399px) {
	.page_title {width: 500px;}
}
@media only screen and (min-width: 1400px) and (max-width: 1580px) {
	.page_title {width: 580px;}
}
@media only screen and (min-width: 1581px){
	.page_title {width: 620px;}
}