@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Open+Sans:wght@300;400;700&family=PT+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

/* universal css */

*{
	margin:0;padding:0;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
}


html{
	font-size: 62.5%;
	overflow-x: hidden;
}

a{
	text-decoration: none;
}

/* reusable css */

:root{
	--blue:#4a549b;
	--purple:#80185f;
	--white:white;
	--black:black;
	--para-black:#999999;
	--bg-color:#f2f2f2;
	--contact-us-field-brdr:white;
}

.wrapper{
	width:116rem;
	margin:0 auto;
}

.btn{
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .2rem;
	font-family: 'Lato', sans-serif;
	padding:1.3rem 3rem;
	display: inline-block;
	background-color: var(--blue);
	color:white;
	width: max-content;
}

.btn:hover{
	background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1))
}

.p-font{
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.5;
}

h1,h2{
	font-family:'Lato',sans-serif;
}

/* section 1 row 1 */
.sec-1 .row-1{
	background-image:linear-gradient(0deg, rgba(51,48,41,0.6), rgba(51,48,41,0.6)), url("./images/hero.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height: 135vh;
}

.sec-1 .row-1::before,
.sec-1 .row-1 .centre-content{
	position: absolute;
	top:88%;
	left: 50%;
	transform: translate(-50%,-54%);
}

.sec-1 .row-1::before{
	content: "";
	background:url("./images/png/hero_center.png");
	background-repeat: no-repeat;
	background-size:100%;
	width:67rem;
	height:36rem;
	opacity: 0.1;
}

.sec-1 .row-1 .centre-content{
	color:var(--white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.sec-1 .row-1 .centre-content h2{
	font-family: 'PT Sans', sans-serif;
	font-size: 3.6rem;
	font-weight: 400;}
.sec-1 .row-1 .centre-content h1{
	font-family: 'Lato', sans-serif;
	font-size: 13rem;
	line-height: 1;
	margin:0.5rem 0 0 0;
	text-align: center;

}

/* section 1 row 2 */
.sec-1 .row-2{
	background-color: var(--bg-color);
}

.sec-1 .row-2 .wrapper{
	margin:0 auto;
}

.sec-1 .row-2 .wrapper .row2-1{
	display: flex;
	justify-content: center;
	margin-bottom: 5.4rem;

}

.sec-1 .row-2 .wrapper .row2-1 .container{
	margin-top: -4rem;
	width:98.67rem;
	min-height: 24.2rem;
	background-color: var(--blue);
	display: flex;

}

.sec-1 .row-2 .wrapper .row2-1 .container div{
	flex-basis: 33.3333%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color:var(--white);
	gap:2rem;
}

.sec-1 .row-2 .wrapper .row2-1 .container div h1{
	font-size: 7rem;
}

.sec-1 .row-2 .wrapper .row2-1 .container div h3{
	font-size: 1.9rem;
	font-weight: 400;
}

.sec-1 .row-2 .wrapper .row2-2{
	display: flex;
	gap:2rem;
}

.sec-1 .row-2 .wrapper .row2-2 div {
	flex-basis: 50%;
}

.sec-1 .row-2 .wrapper .row2-2 .col-1{
	padding-left: 2.8rem;
	padding-right: 5.5rem;
	padding-top: 3.5rem;
	display: flex;
	flex-direction: column;}

.sec-1 .row-2 .wrapper .row2-2 .col-1 h3{
	font-size: 2.2rem;
	font-weight: 400;
	margin-bottom: 2.2rem;
}

.sec-1 .row-2 .wrapper .row2-2 .col-1 h1{
	font-size: 4.8rem;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 1.9rem;
}

.sec-1 .row-2 .wrapper .row2-2 .col-1 p{
	color:var(--black);
	margin-bottom: 4.2rem;
}


.sec-1 .row-2 .wrapper .row2-2 .col-2{
	margin:1rem;
	background: url("./images/about.jpeg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 48rem;
}


/* section 2 */
.sec-2{
	display: flex;
	background-color: var(--white);
}

.sec-2 .wrapper{
	min-height: 27rem;
	display: flex;
	margin:7rem auto;
}

.sec-2 .wrapper div{
	flex-basis: 33.3333%;
	margin:0 3rem;
}

.sec-2 .wrapper div img{
	width: 7rem;
	margin:1.4rem 0 1.4rem 0;
}

.sec-2 .wrapper div h2{
	font-size: 2.4rem;
	font-weight: 400;
	margin-bottom: 2rem;
}

/* section 3 */
.sec-3{
	display: flex;
	min-height: 35.7rem;
}

.sec-3 div{
	flex-basis: 33.3333%;
}

.sec-3 .img-1{
	background:url("./images/speakers/1.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.sec-3 .img-2{
	background:url("./images/speakers/2.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:50% 46%;
}

.sec-3 .img-3{
	background:url("./images/speakers/3.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:50% 48%;
}

.sec-3 .content {
	background-color: var(--purple);
	display: flex;
	flex-direction: column;
	justify-content: center;
	color:var(--white);}

.sec-3 .content h2,p,.btn{
	margin-left: 2rem;
}	

.sec-3 .content h2{
	font-size: 2.5rem;
	font-weight: 400;
	margin-bottom: 2rem;
}

.sec-3 .content p{
	margin-bottom: 3.8rem;
	font-size: 1.4rem;
	font-weight: 400;
	padding-right: 2rem;
}

.sec-3 .content .btn{
	background-color:var(--white);
	color:var(--black);
}


/* section 5 */

.sec-4{
	background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url("./images/sec-5.jpeg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.sec-4 .wrapper{
	min-height: 53rem;
	padding:2.5rem 3rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	color:white;
	gap:7rem;
}

.sec-4 .wrapper > div{
	flex:1;
	min-width: 31.7rem;
}


.sec-4 .wrapper .address{
	display: flex;
	flex-direction: column;
	padding-top:6%;
}

.sec-4 .wrapper .address h2{
	font-size: 4.8rem;
	padding-right: 3rem;
	line-height: 1.1;
}

.sec-4 .wrapper .address h3{
	font-size: 2.24rem;
	font-weight: 400;
	margin:2rem 0 2.8rem 0;
}

.sec-4 .wrapper .address h4{
	font-size: 1.4rem;
	font-weight: 400;
	margin-bottom: 0.3rem;
}

.sec-4 .wrapper .address .social_icons{
	margin-top:2rem;
}

.sec-4 .wrapper .address .social_icons a{
	display: inline-block;
	font-size: 2.1rem;
	color:white;
	margin-right: 1.2rem;
}

.sec-4 .wrapper .contact-us form{
	width:100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap:1.6rem;
	justify-content: center;
	padding: 1rem 0.5rem 0 0.5rem;
}

.sec-4 .wrapper .contact-us form .fields{
	font-size: 1.6rem;
	color:var(--contact-us-field-brdr);
	padding: 1.2rem;
	background: transparent;
	outline: none;
	border: none;
	border:.1rem solid var(--contact-us-field-brdr);
}

.sec-4 .wrapper .contact-us form .fields:focus{
		border-radius: .5rem;
}

.sec-4 .wrapper .contact-us form textarea{
	resize: none;
}

/* section 6 */
.sec-5{
	background-color: var(--blue);
}

.sec-5 .wrapper{
	min-height: 20rem;
	display: flex;
}

.sec-5 .wrapper div{
	flex:1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sec-5 .wrapper div h1{
	font-size: 5rem;
	font-weight: 400;
	color:white;
	align-self: flex-end;
	margin-right: 3.7rem;
}

.sec-5 .wrapper div a{
	background-color: var(--white);
	color: var(--black);
	font-weight:bolder;
	font-size: 1.7rem;
	letter-spacing: 0.2rem;
	margin-left: 17.7rem;
}

/* media quaries */

@media(max-width: 1200px){
	.wrapper{
		width: 94rem;
	}

	.sec-1 .row-2 .wrapper .row2-1 .container{
		width: 81.6rem;
	}
}
@media(max-width: 992px){
	.wrapper{
		width: 72rem;
	}

	.sec-1 .row-1::before{
		width:58rem;
		height:31rem;
	}

	.sec-1 .row-2 .wrapper .row2-1 .container{
		width: 62.5rem;
		flex-wrap: wrap;
	}
	.sec-1 .row-2 .wrapper .row2-1 .container div{
		flex-basis:50%;
		padding-bottom: 6rem; 
	}


	.sec-3{
		flex-wrap: wrap;
	}

	.sec-3 div{
		flex-basis:50%;
		height: 30rem;
	}
	.sec-3 .img-3 {
    	background-position: top;
	}

@media(max-width: 767px){
	.wrapper{
		width: 54rem;
	}

	.sec-1 .row-2 .wrapper .row2-1 .container{
		width:33rem;
	}
	.sec-1 .row-2 .wrapper .row2-1 .container div{
		flex-basis:100%;
	}
	.sec-1 .row-2 .wrapper .row2-2{
		flex-wrap: wrap;
	}

	.sec-1 .row-2 .wrapper .row2-2 div {
		flex-basis: 100%;
	}

	.sec-2 .wrapper{
		width:54rem;
		flex-direction: column;
		gap:2rem;
	}

	.sec-3 .content{
		padding:3.6rem 7rem;		
	}

	.sec-3 div{
		flex-basis:100%;
		height: 30rem;
	}
	.sec-5 .wrapper {
    	flex-direction: column;
	}
	.sec-5 .wrapper div > h1{
    	margin-right: 0;
    	align-self: center;
	}

	.sec-5 .wrapper div > a{
    	margin-left: 0;
    	align-self: center;
	}

@media(max-width: 575px){
	.wrapper{
		width: 34rem;
	}

	.sec-1 .row-1{
		height: 100vh;
	}

	.sec-1 .row-1::before,
	.sec-1 .row-1 .centre-content{
		top:50%;
		transform: translate(-50%,-50%);
		width:58rem;
		height:31rem;
	}

	.sec-1 .row-1::before,
	.sec-1 .row-1 .centre-content{
		max-width:31rem;
		height:20rem;
	}

	.sec-1 .row-1 .centre-content h1{
		font-size: 6rem;
	}

	.sec-1 .row-1 .centre-content h2{
		font-size: 3rem;
	}

	.sec-1 .row-2 .wrapper .row2-1 .container{
		width:30rem;
	}

	.sec-2 .wrapper{
		width:34rem;
	}
}

@media(max-width: 365px){
	.wrapper{
		width: 31rem;
	}
	.sec-1 .row-2 .wrapper .row2-2 .col-1 h1 {
    	font-size: 3.6rem;
	}
	.sec-2 .wrapper{
		width:31rem;
	}
}