@import url('https://fonts.googleapis.com/css2?family=Merienda+One&family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Carter+One&family=Francois+One&family=Montserrat:wght@300&family=Nerko+One&family=Pacifico&family=Poppins:wght@300;400&family=Roboto:wght@300;400;500&family=Signika:wght@600&display=swap');
*{
	padding: 0; margin: 0;
	box-sizing: border-box; text-transform: capitalize;
	transition: .2s linear; font-family: 'Poppins', sans-serif;
	outline: none; border: none; text-decoration: none;
}

:root{
	--main-color: #821a81;
	--blue-color: #190039;
	--light-main: #dac2da;
	--black-color: #1b1b1b;
	--white-color: #fff;
	--gray-color: gray;
	--light-gray: #e5e5e5;
	--border-color: #f14f84;
	--box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

html{
	font-size: 65.5%;
	scroll-behavior: smooth;
	transition: .10s all;
}
body{
	overflow-x: hidden;
}

span{
	color: var(--main-color);
	font-size: 5rem;
    padding: 2rem 0;
    font-weight: 900;
    letter-spacing: .4px;
    text-align: center;
    font-family: "Lato", Sans-serif;
}

.heading{
	color: var(--black-color);
	font-size: 4rem;
	font-weight: 800;
	letter-spacing: 1px;
	padding-top: 1rem;
	padding-bottom: 3.5rem;
	font-family: "poppins", sans-serif;
}

.heading2{
	color: var(--white-color);
	font-size: 4rem;
	font-weight: 800;
	letter-spacing: 1px;
	padding-top: 1rem;
	padding-bottom: 3.5rem;
	font-family: "poppins", sans-serif;
}


.our-btn{
    background: var(--white-color);
    color: #190039;
    padding: 1rem 2rem;
    font-size: 1.6rem;
    margin-top: 1rem;
    font-weight: 700;
    border-radius: 33px;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: .6px;
    border: 2px solid var(--white-color);
}

.our-btn:hover{
	background: transparent;
	color: var(--white-color);
	border: 2px solid var(--white-color);
	transition: .4s all;
}

header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2%;
	position: fixed;
	top: 0; left: 0; right: 0; 
	transition: .9s all!important;
	z-index: 10000;
}

.btn{
	background: var(--main-color);
    color: var(--white-color);
    padding: 1rem 2rem;
    font-size: 2rem;
    margin-top: 1rem;
    border-radius: 22px;
    display: inline-block;
}

.btn:hover{
	letter-spacing: 1px;
}

.header .logo img{
	height: 7rem;
}

.header .navbar a{
	margin: 0 1rem;
	text-decoration: none;
	font-size: 1.6rem;
	color: var(--black-color);
}

.header .navbar a:hover{
	color: var(--white-color);
	border-bottom: 2px solid var(--white-color);
}

.header .icons div{
	color: var(--white-color);
	cursor: pointer;
	font-size: 2.3rem;
	margin-left: 2rem;
}

.header .icons div:hover{
	color: var(--white-color);
}

.header div #menu-btn{
	display: none;
}


.header .search-form input{
	height: 100%;
	width: 100%;
	padding: 1rem;
	text-transform: uppercase;
}

.header .search-form label{
	cursor: pointer;
	font-size: 2.2rem;
	margin-right: 1.5rem;
	color: var(--black-color);
}

header.black{
  background: #ffc700;
  color: var(--white-color);
  opacity: 1;
  transition: .9s all!important;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
}

.home-section{
	background: url(https://d2rgo8dacqxio8.cloudfront.net/nextdrive/banner-bg2.png);
	background-size: cover;
	background-position: center;
	padding: 1.5rem 2%;
	min-height: 100vh;
	width: 100%;
}

.home-section .row{
	padding: 2.5rem 0;
	margin-top: 8rem;
}

.home-section .home-text{
	max-width: 50rem;
	margin-top: -3rem;
}

.home-section .home-text h3{
	color: var(--white-color);
	font-size: 5rem;
	letter-spacing: .5px;
	font-family: "Lato", Sans-serif;
	padding: 1rem 0;
}

.home-section .home-text h4{
	color: var(--white-color);
	font-size: 2rem;
	text-transform: capitalize;
}

.home-section .home-text p{
	color: var(--white-color);
	font-size: 1.5rem;
	line-height: 1.7;
	font-weight: lighter;
	padding: 1.5rem 0;
	max-width: 45rem;
}

.home-section .home-img{
	width: 100%;
	height: auto;
}

.home-section .home-img img{
	max-width: 100%;
	display: block;
	transform: scale(1.4)translateX(-92px);
	margin: auto; margin-top: 9rem;
	text-align: center;
}

.home-btn a:nth-child(2){
	margin: 0 .5rem;
}

.home-btn a img{
	text-decoration: none;
	max-width: 140px;
}
/*End home section*/

/*Start mission section*/
.mission-section{
	padding: 6rem 2%;
}

.mission-img{
	width: 100%;
	height: auto;
}

.mission-img img{
	width: 100%;
}

.mission-text{
	padding: 0 2rem;
}

.mission-text h3{
	font-size: 4rem;
	font-weight: 900!important;
	line-height: 1.4;
	font-family: "Lato", Sans-serif;
	color: #333333;
	padding-bottom: 1.4rem;
}

.mission-text p{
	font-size: 1.4rem;
	line-height: 1.6;
	color: var(--black-color);
	padding: 1rem 0;
}

.mission-icon{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 0;
	flex-wrap: wrap;
	gap: 1rem;
}

.mission-icon01 img{
	max-width: 100%;
}

.mission-icon01{
	background: #FFFFFF;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.1);
    padding: 28px 25px;
    display: block;
    text-align: center;
    width: 150px;
    height: 150px;
    flex: 1 1 15rem;
}

/*.mission-icon .mission-icon01:nth-child(2){
	margin: 0 2rem;
}*/

.mission-icon01 h4{
	font-size: 1.4rem;
	padding: 1rem 0;
}
/*End mission section*/

/*Start work section*/
.work-section{
	padding: 6.5rem 2%;
	background-color: #111111;
}

.work-section h2{
	text-align: center;
	padding: 2rem 0;
	color: var(--white-color);
	font-weight: 800;
	font-family: "Lato", Sans-serif;
	font-size: 2.8rem;

}

.work-box{
	text-align: center;
	padding: 2rem;
	transition: .5s all;
}

.work-box:hover .work-img{
	background-color: dodgerblue;
	color: var(--white-color);
}

.work-box:hover .work-img img{
	filter: grayscale(0) invert(2);
}

.work-box h3{
	font-size: 2rem;
	font-weight: 700;
	font-family: "Lato", Sans-serif;
	padding: 1rem 0;
	color: var(--white-color);
	margin-top: 3rem;
}

.work-img{
	background-color: var(--white-color);
	width: 112px;
    height: 112px;
    margin: auto;
    display: flex;
    justify-content: center;
    border-radius: 12px;
    align-items: center;
}

.blue-line{
	width: 100px;
	height: 3px;
	border-radius: 10px;
	background-color: dodgerblue;
	margin: auto;
	margin-bottom: 1.4rem;
}

.work-box p{
	font-size: 1.4rem;
	padding: 1rem 0;
	color: var(--white-color);
}
/*End work section*/

/*Start mobile section*/
.mobile-section{
	padding: 6.5rem 2%!important;
}

.mobile-section-text h3{
	font-size: 3rem;
	color: #333333;
	font-weight: 800;
	padding: 1rem 0;
	font-family: "Lato", Sans-serif;
}

.mobile-section-text p{
	font-size: 1.4rem;
	color: #333333;
	padding: 1rem 0;
}

.mobile-icon-box{
	display: flex;
	align-items: center;
	padding: 1.6rem 0;
}

.mobile-icon{
	background: #FFFFFF;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.1);
    width: 79px;
    height: 79px;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
}

.mobile-icon-text{
	margin: 0 1.5rem;
}

.mobile-icon-text h4{
	font-size: 2rem;
	color: #333333;
	font-family: "Lato", Sans-serif;
	padding: .4rem 0;
}

.mobile-icon-text p{
	font-size: 1.4rem;
	color: #333333;
}

.mobile-img{
	width: 100%;
	height: auto;
}

.mobile-img img{
	width: 100%;
}
/*End mobile section*/

/*Start footer section*/
.footer{
	padding: 1.5rem 2%;
	background-color: #111111;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-logo img{
	max-width: 100%;
	margin: auto;
	display: block;
	transform: translateY(-5rem);
}

.footer-icon-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.4rem;
	justify-content: center;
	flex-wrap: wrap;
}

.footer-icon-box01 a{
	margin: 0 .4rem;
	transition: .5s transform;
}

.footer-icon-box02 a{
	margin: 0 .4rem;
}

.footer-icon-box02 a img{
	 width: 130px;
}

.contact-box{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.contact-box a{
	padding-top: 2.5rem;
	text-decoration: none;
	color: var(--white-color);
	font-size: 1.4rem;
	margin: 0 2rem;
}

.contact-box a:hover{
	color: #ffc700;
}

.contact-box-detail{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.contact-box-detail a{
	text-decoration: none;
	color: var(--white-color);
	font-size: 1.4rem;
	margin: 0 2rem;
	padding-top: 1rem;
	padding-bottom: 1.2rem;
}


.contact-box-detail a:hover{
	color: #ffc700;
}

.bottom-footer{
	text-align: center;
	width: 100%;
	padding-top: 2rem;
	border-top: 1px solid rgb(255 255 255 / 12%);
	padding: 1.5rem 2%;
	background-color: #111111;
}

.bottom-footer a{
	font-size: 1.4rem;
	color: var(--white-color);
	width: 100%;
	text-decoration: none;
}

.bottom-footer a:hover{
	color: #ffc700;
}

.scroll-icon a{
	background-color: #ffc700;
	position: fixed;
	top: 80%;
	right: 2rem;
	padding: 2rem;
	width: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	text-decoration: none;
	font-size: 2.2rem;
	box-shadow: var(--box-shadow);
	color: var(--white-color);
}
/*End footer section*/

/*Media quaries*/
@media screen and (max-width: 991px){
html{
	font-size: 55%;
}

.header{
	padding: 1.5rem 2rem;
}

.home-section .home-text{
	text-align: center;
}

.footer-row .footer-col-4 img{
	margin-left: 0;
    margin-top: 0;
    cursor: pointer;
}

.slider img:hover {
	 transform: scale(0);

}

@media screen and (max-width: 991px){
.header div #menu-btn{
	display: inline-block;
}

.header .navbar.active{
	right: 0;
	transform: scale(1);
}

.header .navbar a{
	color: var(--white-color);
}

.header .search-form{
	width: 90%;
	right: 2rem;
}

.home-section .home-img img {
    display: block;
    margin: auto;
    text-align: center;
    margin-top: 2rem;
    width: 100%;
    transform: scale(1) translateX(0px);
}

.home-section .home-text{
	max-width: 100%;
	margin: auto;
}

.home-section .home-text p{
	max-width: 100%;
}

}

@media screen and (max-width: 768px){
	.header .navbar a{
		color: var(--white-color);
		margin: 0 .5rem;
	}

	.home-section .row{
		margin-top: 7rem;
	}

	.footer-logo img{
		max-width: 100px;
	}

}

@media screen and (max-width: 450px){
html{
	font-size: 50%;
}

.header .navbar a{
	color: var(--white-color);
	margin: 0 .6rem;
	font-size: 1.4rem;
}

.home-section .row{
	margin-top: 9rem;
}

header.black{
  background: var(--black-color);
}

.contact-box-detail a{
	font-size: 1.2rem;
}

}