/*
Theme Name: Givememedia
Author: Givememedia
Version: 1.0
*/

:root {
	--color-body: #272727;
}

html, body {
	margin: 0px;
	scroll-behavior: smooth;
}

body {
	font-family: 'Inter';
	font-size: 20px;
	color: var(--color-body);
	padding-bottom: 100px;
}

body.header-fixed {padding-top: 168px;}

.common__typography h1,
.common__typography h2,
.common__typography h3,
.common__typography h4,
.common__typography h5 {
	margin: 65px 0px 35px 0px;
	font-family: 'Cakra';
	font-weight: normal;
	text-transform: uppercase;
}

.common__typography h1:first-child,
.common__typography h2:first-child,
.common__typography h3:first-child,
.common__typography h4:first-child,
.common__typography h5:first-child {margin-top: 0px;}

.common__typography h2 {font-size: 40px;}

.common__typography p {margin: 0px 0px 30px 0px;}
.common__typography p:last-child {margin-bottom: 0px;}

.common__typography img {
	max-width: 100%;
	height: auto;
}

.common__typography li:not(:last-child) {margin-bottom: 40px;}
.common__typography a {color: var(--color-body);}

*:focus {outline: none;}

.common__container {
	width: 95%;
	max-width: 935px;
	margin: auto;
}

.index__section:not(:last-child) {margin-bottom: 70px;}
.index__hero {
	position: relative;
	box-sizing: border-box;
	font-family: 'Cakra';
	font-size: 40px;
	padding: 80px 0px;
	background: linear-gradient(229deg, rgba(154, 170, 255, 0.32) 7.17%, rgba(229, 237, 255, 0.00) 65.24%);
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
}
.index__hero-title {
	font-size: 40px;
	font-weight: normal;
	margin: 0px;
}
.index__hero:before {
	position: absolute;
	content: '';
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: linear-gradient(6deg, rgba(245, 182, 255, 0.32) 4.14%, rgba(229, 237, 255, 0.00) 99.82%);
	z-index: -2;
}
.index__hero:after {
	position: absolute;
	content: '';
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: linear-gradient(153deg, rgba(162, 253, 199, 0.32) 8.46%, rgba(229, 244, 255, 0.00) 85.51%);
	z-index: -1;
}

.index__hero-container {
	display: flex;
	gap: 40px;
}
.index__hero-content {
	padding-top: 20px;
	width: 60%;
}
.index__hero-logo {
	display: inline-block;
	width: 240px;
	height: auto;
	margin-bottom: 92px;
}
.index__hero-image {flex-grow: 1;} 
.index__hero-image img {
	max-width: 100%;
	max-height: 610px;
	height: auto;
	width: auto;
}

.index__block {
	box-sizing: border-box;
	padding: 60px 30px;
	background: #F6FAFF;
	border-radius: 6px;
}
.index__block-cta {
	margin-top: 65px;
	text-align: center;
}
.index__block-cta:first-child {margin-top: 0px;}

a.index__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	gap: 14px;
	background: #2AABEE;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	height: 62px;
	padding: 0px 22px 0px 22px;
	margin-right: 12px;
	border-radius: 6px;
	box-shadow: 0px 30px 40px rgba(215, 102, 72, 0.15);
	text-decoration: none;
	transition: 0.3s;
}
.index__cta:before {
	display: block;
	content: '';
	width: 30px;
	height: 30px;
	background: url(assets/images/icon-telegram.png) center center no-repeat;
	background-size: contain;
}
.index__cta:after {
	position: absolute;
	top: 50%;
	right: -12px;
	display: block;
	content: '';
	width: 12px;
	height: calc(100% - 10px);
	background: #2AABEE;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
	transform: translateY(-50%);
	transition: 0.3s;
}
.index__cta:hover {background: #4cb7ee}
.index__cta:hover:after {background: #4cb7ee}