/*  ==========  INDEX STYLES  ==========  */
#main-about{
	background-image: url('../assets/main-frame-bg.png');
	background-size: cover;
	background-position: top center;
}
#main-about .container{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	padding-top: 80px;
	padding-bottom: 80px;
	box-sizing: border-box;
}
#main-about .container .group{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#main-about .main-offer{
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 20px;
}
#main-about .title{
	font-size: 42px;
	font-weight: 600;
	font-family: var(--font-secondary);
}
#main-about .sub-title{
	font-size: 18px;
	font-weight: 500;
	color:#010101;
}
#main-about .additional-services{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
}
#main-about .additional-services .item{
	color: #010101;
	border: 1px dashed #010101;
	padding: 8px 15px;
	box-sizing: border-box;
	border-radius: 100px;
	font-family: var(--font-secondary);
	font-size: 14px;
	font-weight: 500;
}
#main-about .additional-services .item:hover{
	border: 1px solid var(--color-main);
	color: var(--color-main);
}
@media screen and (max-width: 870px){
	#main-about .container{
		display: flex;
		flex-direction: column-reverse;
	}
	#main-about .intro-image{width: 70%;}
	#main-about .main-offer{align-items: center;}
	#main-about .title,
	#main-about .sub_title{text-align: center;}
	#main-about .additional-services{justify-content: center;}
}
@media screen and (max-width: 480px) {
	#main-about .intro-image{display: none;}
	#main-about .container{
		padding: 40px 20px;
		gap: 0;
	}
	#main-about .title{font-size: 32px;}
	#main-about .sub_title{font-size: 18px;}
	#main-about .additional-services .item{font-size: 12px;}
}
/*  ==========  INDEX STYLES  ==========  */




/*  ==========  SITE TYPES SECTION  ==========  */
#site-types .site-types-inner{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: space-between;
	gap: 20px;
}
#site-types .item{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 28px;
	box-sizing: border-box;
	border: 1px solid var(--color-border);
	border-radius: 12px;
}
#site-types .item .icon{
	width: 60px;
	height: 60px;
	border-radius: 12px;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: 32px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: var(--color-gray-bg) !important;
}
#site-types .item .icon.i1{background: url("../assets/icons/browser-blue.png");}
#site-types .item .icon.i2{background: url("../assets/icons/landing-page-blue.png");}
#site-types .item .icon.i3{background: url("../assets/icons/shuttle-blue.png");}
#site-types .item .icon.i4{background: url("../assets/icons/business-card-blue.png");}
#site-types .info-group{
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#site-types .title{
	font-size: 20px;
	font-weight: 600;
	font-family: var(--font-secondary);
}
#site-types .text{color: var(--color-text-gray);}
#site-types .buttons-wrap{
	display: flex;
	align-items: center;
	gap: 8px;
	height: 25px;
}
#site-types .brand{
	height: 25px;
	object-fit: cover;
}
#site-types .link{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-main);
}
#site-types .link:hover{opacity: .7;}
#site-types .link i{font-size: 10px;}
@media screen and (max-width: 1040px){
	#site-types .site-types-inner{grid-template-columns: 1fr 1fr;}
}
@media screen and (max-width: 480px){
	#site-types .site-types-inner{
		grid-template-columns: 1fr;
		gap: 5px;
	}
}
/*  ==========  SITE TYPES SECTION  ==========  */



/*  ==========  OUR DEVELOPMENTS SECTION  ==========  */
#developments{
	margin-top: 64px;
	padding: 96px 0;
	background-color: var(--color-black);
}
#developments .cards{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: space-between;
	gap: 28px;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
}
#developments .cards::-webkit-scrollbar {height: 0;}
#developments .card{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	width: 285px;
	height: 390px;
	padding: 28px;
	box-sizing: border-box;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}
#developments .card .bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover !important;
	transition: .3s;
}
#developments .card:hover .bg{filter: blur(1px);}
#developments .card .bg::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.25);
	transition: .3s;
	opacity: 0;
}
#developments .card:hover .bg::after{opacity: 1;}
#developments .brand{
	max-width: 120px;
	height: 40px;
	z-index: 1;
}
#developments .title{
	display: flex;
	align-items: flex-end;
	flex-grow: 1;
	font-family: var(--font-secondary);
	font-weight: 600;
	font-size: 17px;
	color: #fff;
	z-index: 1;
}
#developments .text{
	height: 54px;
	font-size: 13px;
	color: #fff;
	z-index: 1;
	white-space: pre-wrap;
	
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
	transition: 3s all;
	display: none;
}
#developments .card:hover .text{display: block;}
#developments .link{
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #fff;
	border-radius: 12px;
	background-color: #fff;
	color: #121212;
	z-index: 1;
	font-size: 13px;
	font-weight: 600;
	display: none;
}
#developments .link i{font-size: 10px;}
#developments .card:hover .link{display: flex;}

@media screen and (max-width: 767px){
	#developments .wrap{
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	#developments .item{
		padding: 18px;
		gap: 10px;
	}
	#developments .icon{
		width: 45px;
		height: 45px;
	}
	#developments .title{font-size: 17px;}
}
@media screen and (max-width: 480px){
	#developments .wrap{
		display: flex;
		flex-direction: column;
	}
	#developments .card{
		width: 250px;
		height: 350px;
	}
	#developments .item{
		height: 250px;
		aspect-ratio: unset;
	}
}
/*  ==========  END OUR DEVELOPMENTS SECTION  ==========  */





/*  ==========  ABOUT SECTION  ==========  */
#about-company .counters-wrap{
	padding-bottom: 5px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}
#about-company .counters-wrap .item{
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 15px 24px;
	box-sizing: border-box;
	background-color: var(--color-gray-bg);
	border-radius: 12px;
}
#about-company .counters-wrap .item:last-child{
	grid-column-start: 2;
	grid-column-end: 4;
}
#about-company .counters-wrap .title{
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 24px;
	font-weight: 600;
}
#about-company .counters-wrap .title .expand{
	display: none;
	align-items: center;
	font-size: 18px;
	color: var(--color-text-gray);
	transition: .3s;
}
#about-company .counters-wrap .description{
	color: var(--color-text-gray);
	font-size: 14px;
}
@media screen and (max-width: 767px){
	#about-company .counters-wrap{grid-template-columns: 1fr 1fr;}
	#about-company .counters-wrap .item:last-child{
		grid-column-start: 1;
		grid-column-end: 3;
	}
	#about-company .counters-wrap .item{padding: 8px 16px;}
	#about-company .counters-wrap .title{font-size: 18px;}
	#about-company .counters-wrap .description{font-size: 14px;}
}
@media screen and (max-width: 480px){
	#about-company .counters-wrap{grid-template-columns: 1fr;}
	#about-company .counters-wrap .item{
		padding: 18px;
	}
	#about-company .counters-wrap .item:last-child{
		grid-column-start: 1;
		grid-column-end: 2;
	}
	#about-company .counters-wrap .item .description{display: none;}
	#about-company .counters-wrap .item.opened_options .description{display: block;}
	#about-company .counters-wrap .item.opened_options .expand{transform: rotate(180deg);}
	#about-company .counters-wrap .title .expand{display: flex;}
}
/*  ==========  END ABOUT SECTION  ==========  */





/*  ==========  COMPANIES SECTION  ==========  */
#companies .companies-inner{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
}
/*  ==========  END COMPANIES SECTION  ==========  */





/*  ==========  REVIEWS SECTION  ==========  */
#audio-reviews .audio-reviews-inner{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: space-between;
	gap: 20px;
}
#audio-reviews .item{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px;
	box-sizing: border-box;
	border: 1px solid var(--color-border);
	border-radius: 12px;
}
#audio-reviews .image{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 9px;
	box-sizing: border-box;
	margin-bottom: 16px;
	border: 1px solid var(--color-border);
	border-radius: 64px;
}
#audio-reviews .title{
	font-size: 18px;
	font-weight: 500;
}
#audio-reviews .description{
	font-size: 14px;
	color: var(--color-text-gray);
}
#audio-reviews label{font-weight: 600;}
@media screen and (max-width: 1040px){
	#audio-reviews .audio-reviews-inner{
		grid-template-columns: 1fr 1fr;
	}
}
@media screen and (max-width: 480px){
	#audio-reviews .audio-reviews-inner{
		grid-template-columns: 1fr;
	}
}
/*  ==========  END REVIEWS SECTION  ==========  */



/*  ==========  SITE PROCESS SECTION  ==========  */
#site-process .site-process-inner{
	gap: 100px;
}
#site-process .examples{
	display: flex;
	position: relative;
}
#site-process .examples a{
	width: 65%;
	max-height: 100%;
	display: block;
}
#site-process .examples a:first-child{
	position: absolute;
	left: 0;
	bottom: 0;
}
#site-process .examples a:last-child{
	position: absolute;
	right: 0;
	bottom: 0;
}
#site-process .examples img{
	border: 1px solid var(--color-main-alpha);
	box-shadow: var(--box-shadow);
}

#site-process .types-list{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#site-process .types-list .item{
	padding: 5px 25px;
	box-sizing: border-box;
	border-left: 1px solid var(--color-border);
	position: relative;
}
#site-process .types-list .item .num{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background-color: #fff;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid var(--color-main);
	box-shadow: var(--box-shadow);
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%);
}
#site-process .types-list .info-group{
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#site-process .types-list .title{
	font-size: 20px;
	font-weight: 600;
	font-family: var(--font-secondary);
}
#site-process .types-list .content{color: var(--color-text-gray);}
#site-process .types-list .buttons-wrap{
	display: flex;
	align-items: center;
	gap: 8px;
	height: 25px;
}
#site-process .types-list .brand{
	height: 25px;
	object-fit: cover;
}
#site-process .types-list .link{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-main);
}
#site-process .types-list .link:hover{opacity: .7;}
#site-process .types-list .link i{font-size: 10px;}

@media screen and (max-width: 767px){
	#site-process .site-process-inner{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#site-process .examples{
		width: 440px;
		height: 430px;
		padding: 20px;
		box-sizing: border-box;
	}
	#site-process .types-list{padding-left: 20px; box-sizing: border-box;}
	#site-process .content{font-size: 12px;}
}
@media screen and (max-width: 480px){
	#site-process .cards{grid-template-columns: 1fr;}
	#site-process .item{flex-direction: row;}
	#site-process .examples{
		width: 300px;
		height: 280px;
	}
}
/*  ==========  END SITE PROCESS SECTION  ==========  */





/*  ==========  TARIFS SECTION  ==========  */
#tarifs{
	background-color: var(--color-gray-bg);
	margin-top: 64px;
	padding-bottom: 64px;
	position: relative;
	overflow: hidden;
}
#tarifs .tarifs-inner{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
#tarifs .item:first-child{grid-column: 1/3}
#tarifs .item{
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	position: relative;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
#tarifs .header{
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--color-border);
}
#tarifs .item:first-child .header{
	flex-direction: row;
	justify-content: space-between;
}
#tarifs .header .image{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 24px 0;
}
#tarifs .header .image img{width: 50%;}
#tarifs .group{
	display: flex;
	gap: 4px;
	flex-direction: column;
}
#tarifs .title{
	font-size: 24px;
	font-family: var(--font-secondary);
	font-weight: 500;
}
#tarifs .price{
	font-size: 40px;
	font-family: var(--font-secondary);
	font-weight: 500;
}
#tarifs .description{
	color: var(--color-gold);
	font-size: 15px;
}
#tarifs .content{
	padding: 36px;
	box-sizing: border-box;
}
#tarifs .content .text{
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding-bottom: 12px;
}
#tarifs .content ul{
	display: grid;
	align-items: flex-start;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding-left: 0;
}
#tarifs ul li{
	box-sizing: border-box;
	position: relative;
	padding-left: 30px;
	list-style: none;
	color: var(--color-text-gray);
	font-size: 14px;
}
#tarifs ul li .icon{
	width: 18px;
	height: 18px;
	position: absolute;
	top: 0;
	left: 0;
}
#tarifs span.orbit_animation{
	position: absolute;
	right: 50px;
	bottom: 50px;
	width: 40px;
	height: 40px;
    animation: orbit 6s linear infinite;
	background: url('../assets/flash-sale.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
}
#tarifs span.orbit_animation:after{
    position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
    border-radius: 50%;
    content: "";
    border: 1px dashed var(--color-gold);
    animation: orbit 6s linear infinite ease-in;
}
#tarifs span.orbit_animation:before{
    position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
    border-radius: 50%;
    content: "";
    border: 1px dashed var(--color-gold);
    animation: orbit 6s linear .5s infinite;
}
@keyframes orbit {
 from { transform: rotate(0deg) translateX(10px) rotate(0deg); }
 to   {  transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}
@media screen and (max-width: 767px){
	#tarifs .tarifs-inner{grid-template-columns: 1fr;}
	#tarifs .item:first-child{grid-column: 1/2;}
	#tarifs span.orbit_animation{display: none;}
}
@media screen and (max-width: 480px){
	#tarifs .item:first-child .header{flex-direction: column;}
	#tarifs .header{align-items: center;}
	#tarifs .title{font-size: 18px; text-align: center;}
	#tarifs .price{font-size: 28px; text-align: center;}
	#tarifs .description{font-size: 14px; text-align: center;}
	#tarifs .content{padding: 32px 26px;}
	#tarifs .content ul{grid-template-columns: 1fr;}
	#tarifs ul li{font-size: 14px;}
	#tarifs ul li .icon{width: 15px; height: 15px;}
}
/*  ==========  END TARIFS SECTION  ==========  */





/*  ==========  BUSINESS SUBJECT FROM SECTION  ==========  */
#start-form{margin-top: 64px;}
#start-form .start-form-inner{
	display: flex;
}
#start-form .image{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 55%;
	height: 100%;
	padding: 48px;
	box-sizing: border-box;
	border-radius: 12px 0 0 12px;
	border: 1px solid var(--color-border);
	background-color: #fbfbfb;
}
#start-form .image img{
	width: 220px;
	object-fit: cover;
}
#start-form .content{
	width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 64px;
	box-sizing: border-box;
	border-radius: 0 12px 12px 0;
	border: 1px solid var(--color-border);
	border-left: none;
}
#start-form .headers{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#start-form .headers .title{
	font-size: 28px;
	font-weight: 600;
	font-family: var(--font-secondary);
}
#start-form .headers .text{font-size: 15px;}

#start-form .start-form-arrow{
	width: 105px;
	height: 18px;
	background: url("../assets/start-form-arrow.svg");
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 36px;
}

#start-form form{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	margin-top: 32px;
}
#start-form form .btn-wrap{
	display: flex;
	justify-content: flex-end;
}
#start-form form button{
	border: none;
	cursor: pointer;
	outline: none;
	font-size: 14px;
	font-family: var(--font-secondary);
	font-weight: 600;
}
#start-form form button:hover{
    opacity: 0.85;
}
#start-form .alert_area{
	width: 100%;
	margin: 10px 0;
	color: #f55;
	text-indent: 15px;
}
@media screen and (max-width: 1040px){
	#start-form .image{
		width: 45%;
		padding: 36px;
	}
	#start-form .headers .title{font-size: 22px;}
	#start-form .headers .text{font-size: 14px;}
	#start-form .content{
		width: 55%;
		padding: 36px 46px;
	}
}
@media screen and (max-width: 767px){
	#start-form .start-form-inner{
		flex-direction: column;
		align-items: center;
	}
	#start-form .image{
		width: 100%;
		border-radius: 12px 12px 0 0;
	}
	#start-form .image img{width: 128px;}
	#start-form .start-form-arrow{display: none;}
	#start-form .content{
		width: 100%;
		border-radius: 0 0 12px 12px;
		border: 1px solid var(--color-border-6);
		border-top: none;
		padding: 36px;
	}
	#start-form .content .title{display: none;}
	#start-form form{margin: 0;}
}
/*  ==========  END BUSINESS SUBJECT FROM SECTION  ==========  */





/*  ==========  DESSERTS SECTION  ==========  */
#methods .methods-inner{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}
#methods .item{
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 18px;
	font-family: var(--font-secondary);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 18px;
	box-sizing: border-box;
	position: relative;
}
#methods .item:hover{
	border-color: var(--color-main); 
}
#methods .item .icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background-color: var(--color-gray-bg);
	color: var(--color-gold);
	font-size: 22px;
}
@media screen and (max-width: 1040px){#methods .methods-inner{grid-template-columns: 1fr 1fr;}}
@media screen and (max-width: 767px){#methods .methods-inner{grid-template-columns: 1fr;}}
/*  ==========  END DESSERTS SECTION  ==========  */





/*  ==========  REVIEWS SECTION  ==========  */

/*  ==========  END REVIEWS SECTION  ==========  */





/*  ==========  REVIEWS SECTION  ==========  */

/*  ==========  END REVIEWS SECTION  ==========  */





/*  ==========  REVIEWS SECTION  ==========  */

/*  ==========  END REVIEWS SECTION  ==========  */