/*
    *****OFFICAL WEBSITE OF CFPA BERAKI - Responsive Landing Page Template
    designed by mouaz brai
    version : 1.0
*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}
body{
	  font-family: "Roboto", sans-serif;
}
/*General Style*/
/* List And Link Reset Defualt Style */
a{
	text-decoration: none;
}
ul{
	list-style: none;
}
/* ScroolBar Style */
::-webkit-scrollbar {
    width: 7px;
}
:root {
	--main-color:#0D0D0D;
	--sec-color: #1c1e24;
	--hov-color: #2A2D35;
    --alg-main-color: #D21034;
    --alg-sec-color: #006633;
	--alg-white-color: #FFFFFF;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--alg-main-color), var(--alg-sec-color));

}

::-webkit-scrollbar-thumb:hover {
    opacity: .7;
}
/* Buttons General Style */
.btn{
	
	background-color: var(--sec-color);
	border-radius: 5px;
	color: var(--alg-white-color);
	text-transform: capitalize;
	padding: 10px 20px;
	display: inline-block;
	font-weight: bold;
	transition: background .5s;
}
.btn:hover{
	background-color: var(--hov-color);
}
/* Conatiner General Style */
.container{
	padding: 80px 40px;
	display: flex;
	flex-wrap: wrap;
}
.container > div{
	width: 50%;
}
/* Title Of Sections General Style */
.sections-title{
	text-align: center;
}
.section-title {
    padding: 8px 10px;
    position: relative;
    display: inline-block;
	color: var(--alg-white-color);
}

.section-title::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
	background: linear-gradient(180deg, var(--main-color), var(--sec-color));
    transform: skewX(-10deg);
}
.to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--sec-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease, background-color 0.3s ease, right 0.4s ease;
    z-index: 9999;
}

.to-top i {
    font-size: 20px;
}

.to-top:hover {
    background-color: var(--hov-color);
    transform: translateY(-5px);
}

.to-top-active {
    right: -70px;
}
/*End General Style*/
/*Navbar Part*/
.nav-pad{
	padding: 20px 50px;
}
.nav-icon{
	display: none;
	height: 30px;
	width: 40px;
	position: fixed;
	top: 30px;
	right: 30px;
	justify-content: space-between;
	flex-direction: column;
	z-index: 10000000;
	cursor: pointer;
}
.nav-icon span{
	display: block;
	background: linear-gradient(180deg, var(--alg-main-color), var(--alg-sec-color));
	height: 3px;
	width: 100%;

}
nav{
	display: flex;
	flex-wrap: wrap;
	position: fixed;
	top: 0;
	width: 100%;
	padding: 10px 40px;
	background-color: var(--main-color);
	align-items: center;
	z-index: 1000;
	transition: padding .5s;
}
nav ul{
	width: 70%;
	display: flex;
	flex-wrap: wrap;
}
nav ul li{
	margin-left: 40px;
}
nav ul li a{
	color: var(--alg-white-color);
	font-size: 1rem;
	text-transform: capitalize;
	transition: color .5s;
}
nav ul li a:hover{
	color: var(--hov-color);
}
nav .signup{
	width: 30%;
	text-align: right;
}
/*End Navbar Part*/
/*Main Content Part*/
.main-container{
	height: 100vh;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	background-attachment: scroll;
}
.main-container i{
	position: absolute;
	top: 50%;
	right: 30px;
	font-size: 40px;
	color: var(--alg-white-color);
	cursor: pointer;
	z-index: 5;
}
.overlay{
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, .6);
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	left: 0;
}
.main-container .home-content{
	height: 100%;
	width: 100%;
	position: relative;
}
.main-container .home-content .home-info{
	width: 50%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	visibility: hidden;
	opacity: 0;
	transition: opacity .5s , visibility .5s;
	padding: 0 10px;
}
.home-info-active{
	visibility: visible !important;
	opacity: 1 !important;
}
.main-container .home-content .home-info h1{
	font-size: 4rem;
	text-transform: uppercase;
	color: var(--alg-white-color);
}
.main-container .home-content .home-info p{
	color: var(--alg-white-color);
	margin: 20px 0;
	line-height: 1.5;
	font-size: 1rem;
	font-weight: 200;
}
.main-container .home-content .home-info .info-btn{
	padding: 15px 30px;
}
.main-container .home-content .home-info strong{
	font-size: 2rem;
	margin-bottom: 30px;
	display: inline-block;
	color: var(--alg-white-color);
}
.main-container .home-content .home-info .info-circle{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: conic-gradient(#fff 0deg 324deg,transparent 324deg 360deg );
	margin: auto;
	position: relative;
}
.main-container .home-content .home-info .info-circle span{
	font-size: 4rem;
	color: var(--sec-color);
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
}
.main-container .home-content .home-info h3{
	font-size: 2.5rem;
	color: var(--alg-white-color);
	text-transform: capitalize;
}
.main-container .slide-points {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
}
.main-container .slide-points span{
	display: inline-block;
	height: 10px;
	width: 10px;
	background-color: var(--hov-color);
	border-radius: 50%;
}.main-container .slide-points span:nth-child(2){
	margin: 0 5px;
}
.main-container .slide-points span.point-active{
	background-color: rgb(142 144 151);
}
/*Home Part Media Quiery*/
@media (max-width: 768px) {
	.nav-icon{
		display: flex;
	}
	nav{
		padding: 20px 0;
		top: -100%;
		transition: top .5s;
	}
	.nav-active{
		top: 0;
	}
	nav ul ,
	nav .signup
	{
		width: 100%;
		text-align: center;
	}
	nav ul li{
		display: block;
		margin: 0;
		width: 100%;
		padding: 20px 0;
		transition: background .5s;
	}
	nav ul li:hover{
		background-color: var(--hov-color);
	}
	nav .signup{
		margin-top: 20px;
	}
	.main-container .home-content .home-info{
		width: 80%;
	}
	.main-container .home-content .home-info h1{
		font-size: 2rem;
	}
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.main-container .home-content .home-info{
		width: 80%;
	}
}
@media (max-width: 575.98px) {
	.main-container .home-content{
		padding: 0 20px;
	}
	.main-container .home-content .home-info{
		width: 100%;
	}
	.main-container i{
		top: 80%;
	}
}
/*End Main Content Part*/
/*About Part*/
.about-text{
	padding: 20px;
}
.about-text h3{
	text-align: center;
	font-size: 2rem;
	margin-bottom: 20px;
	color: var(--alg-sec-color);
}
.about-text p{
	font-size: 1.1rem;
	line-height: 1.5;
}
.about-img{
	overflow: hidden;
}
.about-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.4);
}
/*About Part Media Quiery*/
@media (max-width: 878px) {

	.about-text p{
		font-size: .9rem;
	}
}
@media (min-width: 878px) and (max-width: 991.98px) {

	.about-text p{
		font-size: 1rem;
	}
}
@media (max-width: 768px) {
	.about-content{
		gap: 30px;
	}
	.about-content > div{
		width: 100%;
	}
	.about-text p{
		text-align: center;
	}
}
/*End About Part Media Quiery*/
/*End About Part*/
/*Services Section Part*/
.services-content .container {
	gap: 30px;
}
.services-content .card{
	width: calc(25% - 30px);
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	border-radius: 5px;
	padding-bottom: 20px;
}
.services-content .card .card-head{
	position: relative;
}
.services-content .card .card-head img{
	width: 100%;
	height: 200px;
	filter: brightness(.3);
}
.card-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 50px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background-color: var(--alg-white-color);
	transition: .5s;

}
.card .card-head:hover .card-icon {
	transform: translate(-50%,-50%) scale(1.5);
}
.services-content .card h3{
	text-align: center;
	color: var(--alg-sec-color);
	margin: 15px 0;
}
.services-content .card p{
	text-align: center;
	color: var(--hov-color);
	line-height: 1.5;
	font-size: 1.2rem;
	
}
/*Services Part Media Quiery*/
@media (max-width: 768px) {
    .services-content .card {
        width: 100%;
    }
    .services-content .card h3 {
        margin: 12px 0;
    }
    .services-content .card p {
        font-size: 1.1rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .services-content .card h3 {
        margin: 14px 0;
    }
    .services-content .card p {
        font-size: 1.15rem;
    }
}

@media (max-width: 575.98px) {
    .services-content .card {
        width: 100%;
    }
    .services-content .card h3 {
        margin: 10px 0;
    }
    .services-content .card p {
        font-size: 1rem;
    }
}
/*End Services Part Media Quiery*/
/*End Services Section Part*/
/*Contact Section Part*/
.contact-section .container{
	padding-top: 20px;
	padding-bottom: 20px;
	padding-bottom: 0;
	margin-top: 80px;
}
.contact-section{
	background-image: url("electrical.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.contact-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000000a8;
}
.contact-section .container > div{
	z-index: 1;
}
.contact-section .contact-info{
	padding-top: 40px;
	color: var(--alg-white-color);
}
.contact-section .contact-info p{
	font-size: 1.2rem;
}
.contact-section .contact-info span{
	font-size: 1.1rem;
	display: block;
	margin-top: 40px;
}
.contact-section .contact-info span i{
	font-size: 2rem;

	margin-right: 15px;
}
.contact-section .contact-img img{
	width: 100%;
	height: auto;
	object-fit: cover;
}
/*Contact Part Media Quiery*/
@media (max-width: 768px) {
    .container > div {
        width: 100%;
    }
    .contact-section .contact-info {
        padding-top: 30px;
		text-align: center;
    }
    .contact-section .contact-info p {
        font-size: 1.1rem;
    }
    .contact-section .contact-info span {
        font-size: 1rem;
        margin-top: 30px;
    }
    .contact-section .contact-info span i {
        font-size: 1.8rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .contact-section .contact-info {
        padding-top: 35px;
    }
    .contact-section .contact-info p {
        font-size: 1.15rem;
    }
    .contact-section .contact-info span {
        font-size: 1.05rem;
        margin-top: 35px;
    }
    .contact-section .contact-info span i {
        font-size: 1.9rem;
    }
}

@media (max-width: 575.98px) {
    .contact-section .container > div {
        width: 100%;
    }
    .contact-section .contact-info {
        padding-top: 20px;
    }
    .contact-section .contact-info p {
        font-size: 1rem;
    }
    .contact-section .contact-info span {
        font-size: 0.95rem;
        margin-top: 25px;
    }
    .contact-section .contact-info span i {
        font-size: 1.6rem;
    }
}
/*End Contact Part Media Quiery*/
/*End Contact Section Part*/
/*Footer Part*/
.footer-social-media{
	text-align: center;
	padding-bottom: 30px;
}
.footer-social-media img{
	height: auto;
	width: 250px;
}
.footer-social-media .social-icons{
	text-align: center;
	margin-top: 30px;
}
.footer-social-media .social-icons a{
	color: var(--main-color);
	font-size: 1.4rem;
	margin-right: 15px;
	transition: .5s;
}
.footer-social-media .social-icons a:hover{
	color: var(--alg-main-color);
}
.copyright{
	padding-top: 0;
	padding-bottom: 0;
}
.copyright span{
	display: block;
	width: 100%;
	padding: 20px 0;
	text-align: center;
	font-size: 1.2rem;
	border-top: 2px solid var(--main-color);
}
/*Footer Part*/