/*
Theme Name: Hello Biz Child
Theme URI: https://github.com/elementor/hello-biz-child/
Description: Hello Biz Child is a child theme of Hello Biz, created by Elementor team
Author: Elementor Team
Template: hello-biz
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Version: 1.0.0
Stable tag: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-biz-child
Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready, style-variations
*/

/* Add your custom styles here */

:root {
    --bs-red: #e4151c;
    --bs-black: #000000;
    --bs-yellow: #f8c300;
    --bs-purple: #9f599d;
    --bs-purple-md: #572673;
    --bs-grey:#eae6e2;
	--bs-white:#FFF;
}


.profile-wrap>.e-con-inner{
	position:relative;
}
.profile-wrap>.e-con-inner::before{
	border-top:4px dotted var(--bs-red);
	content:'';
	position:absolute;
	top:104px;
	right:180px;
	left:180px;
	z-index:-1;
}

.number-wrap{
	position:relative;
}
.number-wrap::before{
	border-left:4px dotted var(--bs-red);
	content:'';
	height:100px;
	position:absolute;
	top:80%;
	left:50%;
	z-index:-1;
}
.number-field{
	background: var(--bs-white);
	border:4px solid;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    margin: 0 auto 30px;
	position:relative;
    width: 130px;
	z-index:4;
}


.number-field span{
	border-radius:100%;
	color:var(--bs-white);
	font-size:40px;
	font-weight:700;
	display:flex;
	align-items:center;
	justify-content:center;
	height:94px;
	width:94px;
}
.number-field.number-1{
	border-color:var(--bs-yellow);
}
.number-field.number-1 span{
	background:var(--bs-yellow);
}
.number-field.number-2{
	border-color:var(--bs-purple);
}
.number-field.number-2 span{
	background:var(--bs-purple);
}
.number-field.number-3{
	border-color:var(--bs-purple-md);
}
.number-field.number-3 span{
	background:var(--bs-purple-md);
}

/* SECTION video */
.section-video{
	display:flex;
	flex-wrap:wrap;
	grid-column-gap:40px;
	margin:0 auto;
	max-width:1680px;
	padding-right:10px;
	padding-left:10px;
	width:100%;
}
.video-wrapper{
	max-width:calc(70% - 40px);
	padding:0 10px;
	width:100%;
}

.video-container{
	aspect-ratio: 16 / 9;
	max-width:100%;
	width:100%;
}

.video-container iframe{
	border:none;
	display:block;
	height:100%;
	margin:0;
	max-width:100%;
	padding:0;
	width:100%;
}
.chapters{
	display:flex;
	flex-direction:column;
	grid-row-gap:30px;
	max-width:30%;
	padding:0 10px;
	width:100%;
}

.chapters h2{
	color:var(--bs-black);
	font-size:40px;
	font-weight:700;
	text-align:center;
	text-transform:uppercase;
}
.chapters .chapter-item{
	border-left:6px solid var(--bs-red);
	color:var(--bs-red);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:space-between;	
	grid-column-gap:30px;
	padding-left:15px;
}
.chapters .chapter-item .chapter-title{
	font-size:24px;
}
.chapters .chapter-item .chapter-time{
	background:var(--bs-red);
	border-radius:15px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	color:var(--bs-white);
	font-size:18px;
	font-weight:300;
	max-width:90px;
	padding:10px 0;
	text-align:center;
	width:100%;
}
@media screen and (max-width:1200px){
	.video-wrapper{
		max-width:55%;
	}
	.chapters{
		max-width:45%;
		grid-row-gap:0;
	}
	.chapters .chapter-item{
		margin-bottom:30px;
	}
}
@media screen and (max-width:880px){
	.video-wrapper{
		max-width:100%;
	}
	.chapters{
		max-width:100%;
		padding:0;
	}
	.chapters .chapter-item .chapter-title{
		font-size:18px;
	}
}
@media screen and (max-width:767px){
	.profile-wrap>.e-con-inner::before{
		display:none;
	}
	.section-footer a{
		display:block;
		margin-top:20px;
		text-align:center;
	}
	.chapters .chapter-item .chapter-time{		
		display:flex;
		justify-content:center;
		font-size:14px;
		padding:10px 0;
		text-align:center;
	}
}

@media screen and (max-width:376px){
	.chapters{}
	.chapters h2{
		font-size:28px;
	}
	
	.chapters .chapter-item .chapter-title{
		font-size:16px;
	}
	
}