@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;800&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=Roboto:wght@300;400&display=swap');


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

html{
	font-family:sans-serif;
	font-size:62.5%;
}

html {
	font-family:sans-serif;
	font-size: 62.5%;}

/* reusable code */
:root{
	--theme-color:#2bae4c;
}

.wrapper{
	width: 114rem;
	min-height: 100vh;
}

.p-font{
	font-family: 'Open sans',sans-serif;
	font-size: 1.6rem;
	color:#111111;
}

.fit-img{
	width: 100%;
	object-fit: cover;
}
a{
	text-decoration: none;
	display: inline-block;
	font-weight: 700;
	color:var(--theme-color);
}

p{
	margin-top: 1.6rem;
	line-height: 1.6;
}

/* main section */
.main{
	display: flex;
	justify-content: center;
}

.main .wrapper{
	padding:6rem 0;
	display: flex;
	justify-content: space-between;
}

.main .wrapper .left-content{
	width:92.6%;
	margin-right: -100000px;
	z-index: 1;
	padding-top:10rem;
	display: flex;
	gap:4rem;
}


.main .wrapper .left-content .col-1{
	flex-basis: 55.3%;
}

.main .wrapper .left-content .col-1 .fit-img{
	height:39rem;
}

.main .wrapper .left-content .col-1 h2{
	font-family:'Roboto',sans-serif;
	margin-top: 14.4rem;
	margin-bottom: 2.2rem;
	font-size: 3rem;
	font-weight: 400;
}


.main .wrapper .left-content .col-2{
	flex-basis: 45%;
	display: flex;
	flex-direction: column;		
	justify-content: space-between;
}

.main .wrapper .left-content .col-2 h1{
	font-size: 6.1rem;
	font-family: 'Playfair Display',serif;
	font-weight:600;
	color: white
}

.main .wrapper .left-content .col-2 .img-container img{
	height: 48.2rem;
	object-fit: cover;
}

.main .wrapper .left-content .col-2 .img-container p{
	margin-bottom: -31px;
}

.main .wrapper .right-content{
	width: 79.5rem;
	height: 58rem;
	background-color: var(--theme-color);
}

/* media quaries */
@media(max-width: 1199px){
	.wrapper{
		width: 94rem;
	}

	.main .wrapper .left-content .col-2 h1 {
    	font-size: 5.6rem;
	}

	.main .wrapper .right-content{
		width: 66.7rem;
		height: 58rem;
	}

}

@media(max-width: 991px){
	
	.fit-img{
		width: 48.4rem;
	}

	.wrapper{
		width: 72rem;
    	flex-direction: column;
    	align-items: center;
	}

	.main .wrapper .left-content {
    	flex-direction: column;
    	margin-right: 0;
    	padding-top: 0;
    	gap:3rem;
	}



	.main .wrapper .left-content .col-1 {
    	flex-basis: 55%;
    	text-align: center;
	}


	.main .wrapper .left-content .col-1 h2 {
    	margin-top: 3rem;
	}


	.main .wrapper .left-content .col-2 {
    	align-items:center;
    	gap:2rem;
	}

	.main .wrapper .right-content{
		margin-top:-59rem;
	}
}

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

	.main .wrapper .right-content{
		width: 100%;
		height: 58rem;
    	margin-top: -61rem;

	}

	.main .wrapper .left-content .col-2 .img-container p {
    	margin-bottom: -4px;
	}
}


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

	.fit-img{
		width: 100%;
	}

	.main .wrapper .left-content .col-2 .img-container img {
    	height: 30.2rem;
	}

	.main .wrapper .right-content{
		margin-top:-50rem;
		height: 47rem;
	}
}

@media(max-width: 360px){
	.wrapper{
		width: 31rem;
	}

	.img-container img {
    	height: 38rem;
	}

	.fit-img{
		width: 100%;
	}

	.img-container img {
    	height: 42rem;
	}
}