/* normal */

:root{
	--text_clr: #000;
	--clr1: #005c72;
	--clr2: #be1622;
	--awesome100 : 100 100% "Font Awesome 6 Pro";
	--awesome300 : 300 100% "Font Awesome 6 Pro";
	--awesome400 : 400 100% "Font Awesome 6 Pro";
	--awesome900 : 900 100% "Font Awesome 6 Pro";
	--light_weight: 300;
	--normal_weight : 400;
	--medium_weight : 600;
	--bold_weight : 700;
	
}

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	
}
html,
body {
	font-family: "haboro-soft", sans-serif;
	font-size: 18px;
	color: var(--text_clr);
	font-weight: var(--normal_weight);
	line-height:2;
	word-break: break-word;
	scroll-behavior:smooth;
	
}

body {
	background: #fff;
}
img {
	border: 0px;
	display: block;
	max-width: 100%;
	height:auto;
}
a{color:inherit; text-decoration: none; transition-duration:0.2s;}



ul {
	list-style: disc;
}
h1,.h1,
h2,.h2,
h3,.h3,
h4,.h4,
h5,.h5,
h6,.h6 {
	font-weight: var(--bold_weight); line-height:1.3; color:var(--clr1)
}

h1, .h1{font-size:2.1rem;}
h2, .h2{font-size:1.3rem;}
h3, .h3{font-size:1.2rem;}
h4, .h4{font-size:1.1rem;}
h5, .h5{font-size:1.05rem;}
h6, .h6{font-size:1rem;}

p{margin-bottom:1em}

h1 span{font-weight:var(--normal_weight)}


.maxw1{max-width:1600px; margin:0 auto; padding: 0 20px}
.maxw2{max-width:1200px; margin:0 auto; padding: 0 20px}


.flexbox{display:flex; flex-wrap:wrap}
.flexbox.space_between{justify-content: space-between;} 
.flexbox.justify_center{justify-content: center;} 
.flexbox.align_right{justify-content: flex-end;}
.flexbox.align_center{align-items: center;}
.flexbox.align_bottom{align-items: flex-end;}
.flexbox.align_top{align-items: flex-start;}

.grid{display:grid; gap: 40px;}

.grid.align_top{align-items: start}
.grid.align_center{align-items: center}
.grid.align_bottom{align-items: end}



.header {background:var(--clr1)}
.header .inner{background:linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.5) calc(10%), rgba(255,255,255,0.1) calc(30%)); padding: 20px 0}
.header .grid{grid-template-columns:300px 1fr 130px}
.header .slogan{line-height:1; font-size:1.5rem; color:#fff; text-align:center; letter-spacing:0.07em}
.header .slogan span{font-weight:var(--bold_weight); display:inline-block}
.header .slogan span:after{content:""; display:inline-block; margin-left:1em; background:var(--clr2); width:0.45em; height:0.9em; clip-path:polygon(100% 0 , 100% 100%, 0 50%)}
.header .contact_btns {display:grid; grid-template-columns:repeat(3, 1fr); gap:15px;}
.header .contact_btns a{width:33px;  transition-duration:0.2s}
.header .contact_btns a:hover{transform:translatey(-2px)}

.banner{ object-fit:cover; /*border-top:3px solid var(--clr2);*/ border-bottom:1px solid var(--clr2); min-height:150px;}
.banner:after{content:""; padding-bottom:20%; display:block;}

.content{padding: 80px 0 120px; background:url(img/content_bg.png) top/cover}
.content .page_title{margin-bottom:2rem}
.content .content_container{position:relative;}
.content .contact_link{margin-top:1rem; display:inline-block; color:var(--clr1); font-weight:var(--bold_weight)}
.content .contact_link i{display:inline-block; width:30px;}
.content .contact_link:hover{color:var(--text_clr)}
.content .personal_card{position:absolute; right:0; bottom:0;  }
.content .personal_card .grid{align-items: end; grid-template-columns: auto auto;}
.content .personal_card .label{color:var(--clr1); padding-right:20px; position:relative; margin-bottom:1rem; padding:5px 0; padding-left:calc(0.45em + 20px);}
.content .personal_card .label:after{content:""; height:1px; width:calc(100% + 100px); left:0; bottom:0; position:absolute; background:var(--clr2)}
.content .personal_card .label .name{font-size:1.2rem; position:relative; display:inline-block;}
.content .personal_card .label:before{content:""; display:inline-block; margin-right:1em; background:var(--clr2); width:0.45em; height:0.9em; clip-path:polygon(0% 0 , 0% 100%, 100% 50%); margin-left:calc(-0.45em - 20px); }
.content .personal_card .label .function{display:inline-block;}

.content .personal_card .photo{width:200px; height:200px;}
.content .personal_card .photo img{width:100%; height:100%; position:relative; object-fit:cover; border:1px solid var(--clr2); border-radius:100%}



@media only screen and (max-width: 1200px) {
	.header .grid {    grid-template-columns: 250px 1fr 130px;}
	.header .slogan {font-size: 1.2rem;}
	
	.content .personal_card { position: relative;           display: flex;        justify-content: flex-end;}
	.content .personal_card .grid{width:515px;}
	.content .personal_card .photo{margin-top:-150px}
	
}


@media only screen and (max-width: 800px) {
	.header .grid {    grid-template-columns: 200px 1fr 130px;}
}

@media only screen and (max-width: 720px) {
	.header .inner{background:linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.5) calc(10%), rgba(255,255,255,0.2) calc(30%)); padding: 20px 0}
	.header .grid {    grid-template-columns: 200px 1fr 130px; gap: 20px 10px}
	.header .contact_btns{grid-column:3}
	.header .slogan {grid-column:span 3; grid-row:2}
	.content{padding: 60px 0 80px;} 
	
	.content .personal_card .photo{margin-top:-80px}
	
	
}
@media only screen and (max-width: 550px) {
	
	.content .personal_card .label span.function{display:block;}
	.content .personal_card .label span.divider{display:none}
}
@media only screen and (max-width: 500px) {
	.content .personal_card .photo{margin-top:-10px; width:150px; height:150px;}
	
}

@media only screen and (max-width: 400px) {
	.maxw1{padding:0 10px;}
	.maxw2{padding:0 10px;}
	.header .grid {    grid-template-columns: 150px 1fr 130px;}
	
	.content .personal_card .photo{width:100px; height:100px;}
	
	
}