@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	scroll-behavior: smooth;
}

body{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	overflow-x: hidden;
}

section{
	padding: 80px 0;
}

.container{
	max-width: 1100px;
	width: 90%;
	margin: 0 auto;
}

img{
	display: block;
	width: 100%;
	object-fit: cover;
}

a{
	text-decoration: none;
}

h2{
	font-size: 2.5rem;
	margin-bottom: 50px;
}

h3{
	font-size: 1.2rem;
	color: #555555;
	font-weight: 500;
	margin-bottom: 10px;
}

p{
	font-size: 1rem;
	line-height: 1.6rem;
}

@media screen and (max-width: 960px){
	section{
		padding: 60px 0;
	}
}

@media screen and (max-width: 600px){
	section{
		padding: 50px 0;
	}
}


/* Header starts ----------------------------------------- */

header{
	position: absolute;
	top: 0;
	z-index: 2;
	width: 100%;
	padding: 10px 0;
	background-color: #051525;
}

nav{
	height: 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-block-end: .5px solid white;
}

.nav-list{
	text-align: center;
}

.nav-list a{
	margin-left: 20px;
	color: white;
	display: inline-block;
	transition: .5s;
}

.nav-list a:hover{
	color: #EE732E;
}

.logo{
	width: 140px;
}

.nav-btn{
	border-radius: 30px;
	padding: 9px 25px;
	background: #97F974;
	color: #05152c;
	font-weight: 500;
	letter-spacing: -.5px;
	cursor: pointer;
}

.burger i{
	cursor: pointer;
	display: none;
	color: white;
	font-size: 25px;
	transition: .5s;
}

.burger i:hover{
	color: #97F974;
}

.close-icon{
	display: none;
}

@media screen and (max-width: 960px){
	.burger i{
		display: block;
	}

	.nav-list{
		display: none;
/*		position: absolute;
		top: 100%;
		left: 0;
		z-index: 3;
		width: 100%;
		background: #97F974;
		opacity: .5;*/
	}
}


/* Big banner starts ---------------------------------------- */

.big-banner{
	background-image: url(images/banner-bg.jpg);
	background-position: center;
	background-size: cover;
	height: 92vh;
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

.big-banner .container{
	transform: translateY(70px);
}

.symbol{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 6%;
	left: 5%;
	animation: 3s circle infinite linear;
}

@keyframes circle{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

h1{
	font-size: 3.2rem;
}

h4{
	font-size: 1.2rem;
	font-weight: 300;
}

.banner-title{
	margin: 0 auto 50px;
	width: 700px;
	text-align: center;
	color: white;
}

.banner-title h4{
	margin-bottom: 30px;
}

.banner-title p{
	margin: 15px 0 50px;
}

.banner-btn1{
	border-style: none;
	border-radius: 40px;
	width: 180px;
	height: 40px;
	background: #97F974;
	display: inline-flex;
	align-items: center;
	gap: 40px;
	position: relative;
	font-size: 1rem;
	padding-left: 15px;
	cursor: pointer;
}

.banner-btn1 img{
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 40px;
}

.banner-btn2 {
	margin-left: 50px;
	color: #97F974;
	display: inline-flex;
	align-items: center;
	gap: 20px;
}

.banner-btn2 img{
	width: 35px;
	height: 15px;
}

.banner-card-flex{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

.banner-card-left{
	width: 65%;
	position: relative;
}

.banner-card-right{
	width: 35%;
	position: relative;
}

.banner-card-left img{
	background-position: center;
	background-size: cover;
	height: 300px;
	border-radius: 15px;
}

.banner-card-right img{
	background-position: center;
	background-size: cover;
	height: 300px;
	border-radius: 15px;
}

.banner-card-left .left-btn{
	text-align: center;
	cursor: pointer;
}

.banner-card-left .left-btn i{
	font-size: 4.5rem;
	color: #05152c;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.banner-card-right .right-btn{
	background: transparent;
}

.banner-card-right .right-btn img{
	height: 100px;
	width: 100px;
	position: absolute;
	top: -10px;
	right: -10px;
	transition: .3s;
	border: 10px solid #051525;
	border-radius: 15px;
}


/* Marquee starts --------------------------------------- */
            
.scrolling-text-container {
    background-color: #97F974;
    overflow: hidden;
    height: 80px;
}

.scrolling-text-inner {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px 0;
}

.scrolling-text{
	display: flex;
}

.scrolling-text-item {
	display: inline-flex;
	align-items: center;
    padding: 0 20px;
}

.scrolling-text-item p{
	font-size: 1.4rem;
	font-weight: 600;
	color: #05152c;
}

.scrolling-text-item img{
	background-position: center;
	background-size: cover;
	width: 60px;
	height: 60px;
}

.scrolling-text-inner > div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

.scrolling-text-container:hover .scrolling-text-inner > div {
    animation-play-state: paused;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}


/* About starts --------------------------------------- */

.about{
	background: white;
}

.about-flex{
	display: flex;
	align-items: center;
	gap: 30px;
	margin-bottom: 30px;
}

.about-left{
	width: 60%;
	background: #EDEDED;
	border-radius: 15px;
	text-align: left;
	padding: 30px 200px 30px 40px;
}

.about-left h2{
	margin-bottom: 35px;
}

.about-left p{
	margin-bottom: 30px;
}

.about-right{
	width: 40%;
	background: #192655;
	text-align: center;
	color: white;
	padding: 35px 0;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

.about-right .small-text h3{
	margin-bottom: 5px;
	font-size: 2.4rem;
	color: white;
}

.about-image{
	position: relative;
	object-fit: cover;
}

.about-image img{
	height: 400px;
	background-position: top;
	background-size: cover;
	border-radius: 15px;
}

.about-btn1{
	display: inline-flex;
	align-items: center;
	gap: 20px;
	color: black;
}

.about-btn1 img{
	width: 30px;
	height: 30px;
}

.about-image .about-btn2{
	text-align: center;
}

.about-image .about-btn2 i{
	font-size: 4.5rem;
	color: #05152c;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/* Project starts ---------------------------------- */

.project{
	background-color: #f3f8ff;
	padding: 80px 0 100px;;
}

.project .main-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.project .project-btn{
	border-radius: 30px;
	padding: 9px 25px;
	background: #97F974;
	color: #05152c;
	font-weight: 500;
	letter-spacing: -.5px;
	cursor: pointer;
}

.project .project-btn:hover{
	background-color: transparent;
	border: 2px solid #05152c;
}

.accordion{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #EDEDED;
	padding: 30px 20px;
	border: none;
	border-radius: 15px;
	margin-top: 5px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	cursor: pointer;
	transition: .3s;
}

.accordion:nth-of-type(3n+1){
	background-color: #192655;
	color: white;
	margin-top: 0;
}

.project-text1,
.project-text2{
	display: flex;
	align-items: center;
	gap: 15px;
}

.accordion:nth-of-type(3n+1) h3{
	color: white;
	margin-bottom: 0;
}

.accordion h3{
	color: black;
	margin-bottom: 0;
}

.active, 
.accordion:nth-of-type(3n+1):hover{
	background-color: #75ab00;
}

.active, .accordion:hover{
	background-color: white;
}

.panel{
	background-color: white;
	display: none;
	overflow: hidden;
	transition: max-height 0.25s ease-in-out;
	margin: 0 auto;
	width: 100%;
}

.panel img{
	background-size: cover;
	background-position: top;
	height: 350px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.project-num{
	width: 35px;
	height: 35px;
	background-color: #97F974;
	border-radius: 50%;
	border: none;
	font-size: 1.2rem;
	color: black;
}

.acc-btn{
	cursor: pointer;
	transition: .3s;
}

.project-text2 img{
	width: 35px;
	height: 35px;
	transform: rotate(90deg);
}


/* service starts ---------------------------------- */

.service{
	background-color: gold;
}

.service .main-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.service-btn{
	border-radius: 30px;
	padding: 9px 25px;
	background: #97F974;
	color: #05152c;
	font-weight: 500;
	letter-spacing: -.5px;
	cursor: pointer;
}

.service-btn:hover{
	background-color: transparent;
	border: 2px solid #05152c;
}

.service-flex{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.service-card .service-flex h3{
	font-size: 1.6rem;
	color: black;
	margin-bottom: 5px;
}

.card-service{
	display: flex;
	flex-direction: column;
	gap: 15px;
	border-radius: 15px;
	padding: 30px 20px 35px 25px;
	transition: .3s;
}

.card-service:hover{
	transform: scale(1.05);
}

.card-service{
	background-color: #EDEDED;
}

.card-service:nth-of-type(3n+2){
	background-color: #192655;
	color: white;
}

.card-service:nth-of-type(3n+2) h3, 
.card-service:nth-of-type(3n+2) .service-btn1{
	color: white;
}

.service-card .service-btn1{
	display: inline-flex;
	align-items: center;
	gap: 20px;
	color: black;
	cursor: pointer;
	margin-top: 10px;
}

.service-btn1 img{
	width: 30px;
	height: 30px;
}

.service-card2 .service-btn1{
	color: white;
}


/* Works starts ---------------------------------- */

.works{
	background-color: white;
}

.works-title{
	text-align: center;
}

.works-title h3{
	font-size: 1.4rem;
	margin-bottom: 20px;
}

.works-flex{
	display: flex;
	gap: 30px;
}

.works-left{
	width: 40%;
}

.works-left img{
	height: 480px;
	background-size: conver;
	background-position: center;
	border-radius: 15px;
}

.works-right{
	width: 60%;
}

.works-right .work-card{
	background-color: #EDEDED;
	border-radius: 15px;
	padding: 25px 15px 25px;
	margin-bottom: 22px;
	display: flex;
	gap: 10px;
}

.works-num{
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: none;
	transform: translateY(-2px);
}

.work-text{
	margin-left: 5px;
}

.work-text h3{
	font-size: 1.5rem;
	margin-bottom: 15px;
	color: black;
}


/* Price starts ---------------------------------- */

.price{
	background-color: gold;
}

.price-title{
	text-align: center;
	width: 500px;
	margin: 0 auto;
	margin-bottom: 50px;
}

.price-title h2{
	margin-bottom: 10px;
}

.price-flex{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    align-items: center;
    text-align: center;
}

.price-card h4{
	font-size: 1rem;
	font-weight: 500;
	color: #555555;
	margin-bottom: 15px;
}

.price-card h3{
	font-size: 1.7rem;
	font-weight: 600;
	color: black;
}

.card-price{
	padding: 35px 15px;
	border-radius: 15px;
	transition: .5s;
	background-color: white;
}

.card-price:hover{
	-webkit-box-shadow: 0px 0px 24px 0px rgba(150,136,95,1);
	-moz-box-shadow: 0px 0px 24px 0px rgba(150,136,95,1);
	box-shadow: 0px 0px 24px 0px rgba(150,136,95,1);
}

.card-price:nth-of-type(3n+2){
	background-color: #192655;
	color: white;
}

.card-price:nth-of-type(3n+2) h3, 
.card-price:nth-of-type(3n+2) h4{
	color: white;
}

.card-price ul{
	list-style: disc;
	list-style-position: inside;
	text-align: left;
	margin-left: 30px;
}

.card-price ul li{
	margin-bottom: 10px;
}

.price-btn{
	display: inline-block;
	border: none;
	border-radius: 30px;
	background-color: #97F974;
	color: #192655;
	padding: 10px 85px;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: .2em;
	margin: 25px 0;
	cursor: pointer;
}

.price-btn:hover{
	border: 2px solid #75ab00;
	color: #75ab00;
	background-color: transparent;
}


/* Blog starts ---------------------------------- */

.blog{
	background-color: white;
}

.blog-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.posts-grid{
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}

.posts-card{
	background-color: #EDEDED;
	border-radius: 15px;
	box-shadow: 0px 0px 18px 0px rgba(49,48,77,.3);
}

.posts-card-flex{
	display: flex;
	gap: 10px;
}

.posts-card .posts-image{
	width: 35%;
	background-position: center;
	background-size: cover;
}

.posts-image img{
	height: 350px;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}

.posts-text{
	width: 65%;
	padding: 25px 15px;
}

.posts-text p{
	font-size: .8rem;
	line-height: 1.2rem;
	color: #4E5166;
	margin-bottom: 10px;
}

.posts-text a{
	text-decoration: underline;
	color: #43D130;
	font-size: .8rem;
	margin-top: 15px;
}

.posts-card .profile img{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
}

.posts-card .profile{
	display: flex;
	gap: 20px;
}

.posts-card .profile-image{
	width: 20%;
}

.posts-card .info{
	width: 80%;
}

.posts-text h4{
	font-size: .9rem;
	font-weight: 500;
	color: #EE732E;
	margin-bottom: 8px;
}

.posts-text h3{
	font-size: 1.4rem;
	color: black;
	margin-bottom: 15px;
}

.posts-text .info h4{
	font-size: 1rem;
	font-weight: 500;
	color: #555555;
	margin-bottom: 2px;
}

.posts-text .info p{
	font-size: 0.8rem;
}


/* CTA starts ---------------------------------- */

.cta{
	background-image: url(images/cta.jpg);
	background-position: center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-align: center;
}

.cta p{
	margin-bottom: 50px;
}

.cta-btn{
	border-radius: 30px;
	padding: 10px 25px;
	background: #97F974;
	color: #05152c;
	font-weight: 500;
	cursor: pointer;
}

.cta-btn:hover{
	background-color: transparent;
	border: 2px solid #97F974;
	color: white;
}


/* Footer Starts ----------------------------------- */

footer{
	padding: 30px 0;
	background-color: #EE732E;
	color: white;
	text-align: center;
}

footer .container{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

footer .left-footer,
footer .center-footer,
footer .social-links{
	width: calc((100% - 60px) / 3);
}

footer .left-footer{
	font-size: 1.2rem;
	text-align: left;
}

footer .center-footer{
	font-size: 1.2rem;
	text-align: center;
}

footer .social-links {
	text-align: right;
}

footer .social-links i{
	margin-left: 25px;
	font-size: 1.4rem;
	cursor: pointer;
	transition: .5s;
}

footer .social-links i:hover{
	color: #97F974;
}

@media screen and (max-width: 600px){
	footer .container{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
	}

	footer .left-footer,
	footer .center-footer,
	footer .social-links{
		width: 100%;
		text-align: center;
	}

	footer .social-links i{
		margin-right: 10px;
		margin-left: 10px;
	}
}