.content-box
{
	padding: 0 40px;
	font-size: 20px;
    font-weight: 400;
	color: var(--color-black);
}

.banner-call-action
{
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.banner-call-action > span
{
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    flex-shrink: 0;
    border: .5px solid var(--color-primary);
    position: relative;
}

.banner-call-action > span i
{
    position: relative;
	color: var(--color-primary);
	font-size: 20px;
    z-index: 1;
}

.banner-call-action > span:after
{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0;
    width: 0;
    transform: translate(-50%, -50%);
    transition: all .5s;
    background-color: var(--color-black);
    border-radius: 100%;
}

.banner-call-action > span:hover:after
{
    height: 100%;
    width: 100%;
}

.banner-call span
{
    display: block;
    font-size: 14px;
    color: var(--color-primary);
    line-height: 15px;
}

.banner-call a
{
    font-size: 18px;
    color: var(--color-black);
}

/************************************************************************/
/* SLIDER
/************************************************************************/

.slider
{
	width: 70%;
	margin-top: 100px;
	margin-bottom: 250px;
}

.slider h3
{
	font-size: 65px;
	line-height: 1.2;
}

#line-wrapper
{
	position: relative;
	padding-bottom: 50px;
	padding-top: 20px;
}

.slider .line
{
	position: absolute;
	font-family: var(--heading-font);
	font-size: 50px;
	color: var(--color-primary);
	letter-spacing: 5px;
	line-height: 1.2;
	opacity: 0;
}

/************************************************************************/
/* ABOUT BOX
/************************************************************************/

.about-box
{
	margin-top: 90px;
	margin-bottom: 100px;
	padding-bottom: 40px;
    /*border-bottom: 1px solid #00000033;*/
}

.row
{
    display: flex;
    flex-wrap: wrap;
	min-width: 350px;
    margin-bottom: 30px;
    margin-right: -12px;
    margin-left: -12px;
}

.about-box-three
{
    display: flex;
	margin: auto !important;
    align-items: center;
    column-gap: 18px;
    max-width: 83%;
    position: relative;
}

.about-icon-three
{
    height: 74px;
    width: 74px;
    border-radius: 100%;
    background-color: var(--color-decoration);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-details-three h4
{
    font-size: 20px;
    margin-bottom: 8px;
	color: var(--color-primary);
}

.about-details-three p
{
    margin-bottom: 0;
}

.about-box-three:after
{
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    width: 1px;
    height: 55px;
    background-color: var(--color-dark-grey);
}

.row:last-child .about-box-three:after
{
    display: none
}

.about-icon-three
{
	font-size: 30px;
}

/************************************************************************/
/* RESPONSIVE
/************************************************************************/

@media only screen and (max-width: 1360px)
{
	.row
	{
		width: 33.33333%;
	}

	.row .about-box-three:after
	{
	    display: none
	}

	.slider
	{
		width: 80%;
	}
}

@media only screen and (max-width: 1150px)
{
	.slider h3
	{
		font-size: 50px;
	}

	.slider .line
	{
		font-size: 40px;
	}

	.content-box
	{
		font-size: 18px;
	}
}

@media only screen and (max-width: 1035px)
{
	.row
	{
		width: 50%;
	}

}

@media only screen and (max-width: 1000px)
{
	.content-box
	{
		padding: 0 20px;
	}
}

@media only screen and (max-width: 960px)
{
	.content-box
	{
		padding: 0 40px;
	}

	.slider
	{
		width: 90%;
	}
}

@media only screen and (max-width: 720px)
{
	.row
	{
		width: 100%;
	}

	.about-box-three
	{
		margin: 0 40px !important;
	}

	.slider
	{
		margin-right: 0;
		margin-left: 0;
		width: auto;
	}

}

@media only screen and (max-width: 600px)
{
	.content-box
	{
		padding: 0 20px;
	}

	.about-box-three
	{
		margin: 0 20px !important;
	}
}


@media only screen and (max-width: 500px)
{
	.slider
	{
		margin-bottom: 200px;
	}

	.slider h3
	{
		font-size: 40px;
	}

	.slider .line
	{
		font-size: 30px;
	}

	.content-box
	{
		padding: 0;
		font-size: 16px;
	}

	.about-box-three
	{
		margin: 0 !important;
	}
}

@media only screen and (max-width: 350px)
{
	.slider h3
	{
		font-size: 35px;
	}

	.slider .line
	{
		font-size: 25px;
	}
}