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

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

/* global */

html{
	font-size: 62.5%;
}

body{
	padding:1.2rem;
}

p{
	line-height: 1.6;
}

.icon::before ,
.icon::after{
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }


/* global end*/

/* header start */

header{
	background-color: #f2f2f2;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:1.1rem 0;
	border-radius: .3rem;
	text-align: center;
}

header .container h1{
	font-size: 3.2rem;
	font-weight: 700;
	font-family: 'Montserrat',sans-serif;
}

header .container h1 + p{
	margin-top: 1.1rem;
}


header .container p {
	font-size: 1.6rem;
	font-weight: 400;
	font-family: 'Open Sans',sans-serif;
}

/* header end */



/* main start */
main{
	margin-top: 1rem;
}

main .container{
	display: flex;
	gap:2rem;
}


main .container .img{
	width:95%;
	max-width: 40rem;
	min-width: 30rem;
	min-height:40rem;
	max-height: auto;
	background-image: url("./images/bg_image/apjKalam.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	flex:1;
}

main .container .description{
	font-family:"Open Sans",sans-serif;
	font-weight: 400;
	flex:1;
	display: flex;
	justify-content: center;
	align-items: center;
	color:#808080;
	word-break: break-all;
}

main .container .description p{
	font-size:clamp(1.6rem,5vw,2.6rem);
	max-width: 100%;
}

main .container .description p::before{
	content: "\f10d";
 	font: var(--fa-font-solid);
 	font-size: 10rem;
 	display:inline-block;
}

main .container .description p::after{
	content: "\f10e";
 	font: var(--fa-font-solid);
 	font-size: 5rem;
 	display: inline-block;
}

/* main end */

@media(max-width: 767px){
	main .container{
		flex-direction: column;
		align-items: center;
	}
}