@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@300;400;600&family=Roboto:wght@400;500&family=Ubuntu:wght@400;500&display=swap');
/*font-family: 'Merriweather', serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Ubuntu', sans-serif;*/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	transition: all 0.3s;
	text-decoration: none;
}

:root{
	--main-bg-color:black;
	--res-h1:5.6rem;
	--res-h4: 2.4rem;
	--res-p:1.8rem;
	--pink: #f7d7c8;
}

html{
	font-size: 62.5%; /* 1rem = 10px */
	scroll-behavior: smooth;
}

body{
	position:relative;
	background:var(--main-bg-color);
}



/* navbar background */
.nav-bg{
	position: absolute;
	opacity: 0;
	background: black;
	width: 100vw;
	height: 100vh;
	z-index: -1000;
}				

/* nav background toggle class */
.show-nav-bg{
	opacity: 0.4;
	z-index: 0;
}

/* navbar css */

header{
	background: black;
	height: 8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	position: relative;
}

header nav{
	position: absolute;
	left: -1000%;
	top: 0;
	width: 25rem;
	height: 100vh;
	background: black;
	opacity: 0.8;
	padding: 2rem;
}

/* nav toggle class */
.show-nav{
	left: 0;
}

header nav ul .close{
	font-size: 3rem;
	text-align: right;
	padding-bottom: 3rem;
	cursor: pointer;
}

header nav ul .links{
	font-size: 1.6rem;
	text-align: center;
	padding: 0.8rem 0;
}

header nav ul .links a{
	color: white;
}

header nav ul .links a:hover{
	color: grey;
}

header div i{
	font-size: 3rem;
	cursor: pointer;
}


/* section 1 css */
.sec-1 .container{
	width:74rem;
	margin: 0 auto;
	padding: 1.7rem 1.2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.9rem;
	background: black;
}

.sec-1 .container .heading,
.sec-1 .container .name{
	font-weight: 300;
	color:var(--pink);
}


.sec-1 .container .heading{
	font-size:7.2rem;
	font-family: 'Merriweather', serif;

}

.sec-1 .container .profile-img{
	width: 39rem;
	height: 39rem;
	border-radius: 50%;
	object-fit: cover;
}

.sec-1 .container .name{
	font-size: 2rem;
	font-family: 'Ubuntu', sans-serif;
	margin-bottom: 0.3rem;
}

.sec-1 .container .about{
	font-size:calc(var(--res-p) - 0.2rem);
	color: #999999;
	line-height: 1.6;
	text-align:justify;
	margin-bottom: 1.4rem;
	font-family: 'Open Sans', sans-serif;
}

.sec-1 .container .icons a{
	color: white;
	font-size: 3.6rem;
	margin: 0 2.6rem;
}

/* section 2 css */ 
.sec-2 .wrapper{
	width: 93.2rem;
	margin: 0 auto;
	padding: 3rem 0;
	display: flex;
	gap: 5rem;
	background: black;
	/*flex-wrap: wrap;*/
}

.sec-2 .wrapper .col{
	flex: 1 1 50%;
}

.sec-2 .wrapper .col-1 h1,
.sec-2 .wrapper .col-1 h4,
.sec-2 .wrapper .col-2 p{
	color: white;
}

.sec-2 .wrapper .col-1 h1{
	font-size:4.8rem;
	line-height:0.9;
	margin-bottom: 2.3rem;
	font-family: 'Merriweather', serif;
	line-height: 1.3;
	color:var(--pink);
}

.sec-2 .wrapper .col-1 h4{
	font-family: 'Roboto', sans-serif;
}

.sec-2 .wrapper .col-1 h4,
.sec-2 .wrapper .col-2 h4{
	font-size: calc(var(--res-h4) - 0.4rem);
	font-weight: 700;
}

.sec-2 .wrapper .col-2 h4,p{
	font-family: 'Open Sans', sans-serif;
}

.sec-2 .wrapper .col-2 h4{
	color: var(--pink);
	margin-bottom: 2.6rem;
}

.sec-2 .wrapper .col-2 p{
	font-size:var(--res-p);
	line-height: 1.7;
	font-weight: 400;
	padding-bottom: 3rem;
}

.sec-2 .wrapper .col-2 span i{
	font-size: var(--res-h4);
	color: var(--pink);
	margin-right: 0.6rem;
}

.sec-2 .wrapper .col-2 span a{
	font-size: var(--res-h4);
	color:white;
	font-weight: 700;
}

.sec-2 .wrapper .col-2 span:hover a{
	color: var(--pink);
}

/* section 3 css */
.sec-3 .wrapper{
	width:84rem;
	margin: 3rem auto;
	background: black;
	text-align: center;
}

.sec-3 .wrapper h1:nth-child(1){
	color:white;
	font-size: var(--res-h1);
	padding: 3rem 0;
}

.sec-3 .wrapper h1:nth-child(2){
	color: var(--pink);
	font-size: var(--res-h1);
	border-top: .2rem solid var(--pink);
	padding-top: 5rem;
	font-family: 'Merriweather', serif;
}

.sec-3 .wrapper img{
	width: 6rem;
	height: 6rem;
	object-fit: cover;
	filter: invert(100%);
	margin: 2.6rem 0;
}

.sec-3 .wrapper h4{
	font-size: calc(var(--res-h4) - 0.3rem);
	color: var(--pink);
	font-family: 'Ubuntu', sans-serif;
}


/* section - 4 css */
.sec-4 .wrapper{
	width: 114rem;
	margin: 6rem auto;
	display: flex;
	justify-content: center;
	gap:3rem;
	flex-wrap: wrap;
}

.sec-4 .wrapper .img{
	width: 35rem;
	height: 35rem;
}

.sec-4 .wrapper .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15%;
}

.sec-4 .learn-more{
	width: 100%;
	display:flex;
	justify-content: center;
	align-items: center;
	padding: 2.4rem 0;
}

.sec-4 .learn-more a{
	font-size: var(--res-h4);
	color: var(--pink);
	padding: 2rem 5rem;
	border: .2rem solid var(--pink);
}


/* section 6 css */
.sec-6 .container{
	width: 74rem;
	margin: 3rem auto;
	padding: 0 1.6rem;
	text-align: center;
	background:black;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sec-6 .container h1{
	color: var(--pink);
	font-size: var(--res-h1);
	font-weight: 700;
	margin: 3rem 0;
	font-family: 'Merriweather', serif;
}

.sec-6 .container span{
	font-size: var(--res-h4);
	color: var(--pink);
	cursor: pointer;
	margin-bottom: 3rem;
}

.sec-6 .container span a{
	color:white;
	font-weight: 700;
}

.sec-6 .container span a:hover{
	color: var(--pink);
}

.sec-6 .container img{
	width: 20rem;
	height: 20rem;
	object-fit: cover;
	border-radius: 50%;
	margin-bottom: 3rem;
}

.sec-6 .container h4{
	font-size: var(--res-h4);
	color: var(--pink);
	margin-bottom: 3rem;
}

.sec-6 .container p{
	font-size: var(--res-p);
	font-weight: 700;
	color: black;
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	width: 24rem;
	color: white;
	border-bottom: 1rem solid var(--pink);
}
/* media queries */

@media(max-width: 1199px){
	.sec-2 .wrapper,
	.sec-3 .wrapper,
	.sec-4 .wrapper{
		width: 94rem;
	}

}

@media(max-width : 992px){
	.sec-2 .wrapper,
	.sec-3 .wrapper,
	.sec-4 .wrapper{
		width: 74rem;
	}
}

@media(max-width: 768px){
	.sec-1 .container,
	.sec-2 .wrapper,
	.sec-3 .wrapper,
	.sec-4 .wrapper,
	.sec-6 .container{
		width: 54rem;
	}

	.sec-2 .wrapper .col{
		flex-basis:100%;
	}
	.sec-2 .wrapper{
		flex-wrap: wrap;
	}

	.sec-4 .wrapper .img{
		width:98%;
		height:50rem;
	}
}

@media(max-width: 575px){
	.sec-1 .container .heading{
		font-size:7rem;
	}
	.sec-1 .container{
		width:37.2rem;
	}
	.sec-1 .container .profile-img{
		width: 30rem;
		height: 30rem;
	}
	
	.sec-1 .container,
	.sec-2 .wrapper,
	.sec-3 .wrapper,
	.sec-4 .wrapper,
	.sec-6 .container{
		width: 34rem;
	}

	.sec-2 .wrapper{
		padding:3rem 1.2rem;
	}
	.sec-2 .wrapper .col-1 h1{
		font-size: calc(var(--res-h1) - 1.5rem);
	}
	.sec-3 .wrapper h1:nth-child(2),
	.sec-6 .container h1{
		font-size: calc(var(--res-h1) - 2rem);
	}


	.sec-4 .wrapper .img{
		height:35rem;
	}
}

@media(max-width: 372px){
	.sec-1 .container .heading,
	{
		font-size:5.6rem;
	}
	.sec-1 .container{
		width:30.2rem;
	}
	.sec-1 .container .profile-img{
		width: 28rem;
		height: 28rem;
	}
	.sec-1 .container,
	.sec-2 .wrapper,
	.sec-3 .wrapper,
	.sec-4 .wrapper,
	.sec-6 .container{
		width:31rem;
	}

	.sec-4 .wrapper .img{
		height:30rem;
	}
}