@charset "UTF-8";
*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;list-style:none}
html{font-size:10px;overflow-x:hidden;scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;font-size:1.6rem;color:#111;background:#fff}
img{width:100%;border:none;height:auto;display:block}
a,a:link,a:active{text-decoration:none}
button,input,textarea,select{font-family:'Poppins',sans-serif}

:root{--primary:#0d3b91;--secondary:#ff7a00;--text:#111111;--white:#ffffff;--border:#e5e5e5;--shadow:0 10px 30px rgba(0,0,0,.08)
}
.container{width:100%;max-width:1200px;margin:auto;padding-inline:2rem}

.topbar{width:100%;background:#fff;border-bottom:1px solid #f1f1f1}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.6rem; flex-direction:column;}
.topbar__left{display:flex;align-items:center;gap:2.4rem;flex-direction:column;}
.topbar__logo{width:28rem;}
.topbar__recognitions{display:flex;align-items:center}
.topbar__recognitions img{width:100%;max-width:51.5rem;height:auto;display:block;object-fit:contain}
.topbar__right{flex-shrink:0}
.topbar__call{display:inline-flex;align-items:center;gap:1rem;background:var(--secondary);color:#fff;padding:1.4rem 2rem;border-radius:10rem;font-size:1.5rem;font-weight:600;transition:.3s ease}
.topbar__call:hover{background:#e46600;transform:translateY(-2px)}
.topbar__call svg{flex-shrink:0}

.hero{position:relative;padding:5rem 0;background:url('../assets/heropattern.jpg') repeat; overflow:hidden}
.hero_wrapper{display:flex; flex-direction:column; gap:4rem; align-items:center;}
.hero_img{display:none;}
.hero_content{max-width:28rem; margin:auto; padding:2rem; background:#002961; text-align:center;}
.hero_content h1{font-size:5rem; color:#f48134; text-shadow:1px 1px 0 #fff;}

.hero__formbox{position:relative;z-index:3;width:100%; min-height:63rem;}

.intro{padding:5rem 0;background:#fff}
.intro__wrapper{max-width:118rem;margin:auto;text-align:center}
.intro__title{line-height:1.15;font-weight:700;color:#000;font-size:3.4rem;margin-bottom:2rem}
.intro__text{max-width:110rem;margin:auto;font-size:2.2rem;line-height:1.7;font-weight:400;color:#111}


.works{padding:5rem 0;background:#efefef}
.works__head{text-align:center;margin-bottom:5rem}
.works__title{font-size:3.8rem;line-height:1.1;font-weight:700;color:#000}
.works__wrapper{position:relative;display:flex;flex-direction:column;align-items:center;gap:4rem}
.works__wrapper::before{content:"";position:absolute;top:10rem;left:20%;width:60%;border-top:2px dashed #000;opacity:.7;display:none}
.works__item{position:relative;z-index:2;text-align:center}
.works__icon{display:flex;align-items:center;justify-content:center;width:25rem;height:25rem;margin:auto auto 2.4rem;  border:.8rem solid #f5f5f5;border-radius:50%;background:#1d4298;box-shadow:0 10px 25px rgba(0,0,0,.12)}
.works__icon img{height:8.5rem; width:auto; margin:auto;}
.works__text{font-size:2rem;line-height:1.6;font-weight:400;color:#000}


.refer{padding:8rem 0;}
.refer__head{text-align:center;margin-bottom:6rem}
.refer__title{font-size:6rem;line-height:1.15;font-weight:700;color:#000}
.refer__wrapper{display:grid;grid-template-columns:1fr;gap:5rem;align-items:center;margin-bottom:8rem}
.refer__content{width:100%}
.refer__list{display:flex;flex-direction:column;gap:2.4rem}
.refer__item{display:flex;align-items:flex-start;gap:1.8rem;font-size:2.1rem;line-height:1.4;font-weight:400;color:#000}
.refer__item svg{flex-shrink:0;color:#000;margin-top:.4rem}
.refer__media{width:100%}
.refer__media img{width:100%;border:.2rem solid #000;border-radius:2.4rem;object-fit:cover}
.refer__cta{text-align:center}
.refer__cta-text{max-width:110rem;margin:0 auto 4rem;font-size:2.2rem;line-height:1.5;font-weight:400;color:#111}
.refer__btn{display:inline-flex;align-items:center;justify-content:center;min-width:29rem;height:7rem;padding:0 3rem;border-radius:10rem;background:#ff7a00;color:#fff;font-size:2rem;font-weight:700;transition:.3s ease}
.refer__btn:hover{background:#e46600;transform:translateY(-3px)}

/* Botttom Section */
#bottom{background:#060f1e; padding:4rem 2rem; border-top:0.5rem solid #e95301; color:#dfe0e3; line-height:3rem; font-size:1.6rem;}
.bottom_wrapper{display:grid; gap:3rem;}
.bottom_col{display:flex; flex-direction:column; gap:2rem}
.bottom_col p{font-size:2rem; color:#e95301; font-weight:500;}
.bottom_col ul a{color:inherit; line-height:0}
.address_section{display:flex; flex-direction:column; gap:1rem; font-size:1.45rem; line-height:2.4rem}
.address_section span{display:inline-flex; padding:0.2rem 4rem; background:#20509f; color:#fff;font-weight:500; width:max-content; border-radius:0.5rem}
.bc_row{display:flex; gap:1.5rem; align-items:start;}
.bc_row a{color:inherit}
.bc_row_icon{width:2rem; height:2rem;  border:1px solid rgba(255,255,255,0.3); border-radius:50%; background-color:#060f1e; display: flex; justify-content: center; align-items: center;}
.bc_row_icon svg{width:1rem; height:1rem;}
.bc_row_text{flex:1}
.items_center{align-items:center}
.bc_row_sep_line{height:0.2rem; background:#dfe0e3; width:100%;}
.social_links{display:flex; flex-direction:column; gap:1rem}
.social_links span{font-weight:500}
.social_links > ul{display:flex; gap:2rem; align-items:center; }
.social_links > ul > li{width:max-content; padding:0.5rem; background:white; display:flex; justify-content:center; align-items:center; border-radius:0.5rem;}
.social_links > ul > li svg{color:#060f1e; font-size:1.6rem;}

/* Footer Section */
footer{background:#20509f; color:white; padding:2rem;}
.footer_wrapper{display:flex; flex-direction:column; gap:2rem; align-items:center;}
.footer_links ul{display:flex; gap:2rem; justify-content:center; flex-wrap:wrap;}
.footer_links ul li{width:max-content;}
.footer_links ul li a{color:inherit;}

@media(max-width:767px){
.refer{padding:5rem 0}
.refer__head{margin-bottom:4rem}
.refer__title{font-size:3.6rem}
.refer__wrapper{gap:4rem;margin-bottom:5rem}
.refer__item{gap:1.4rem;font-size:1.8rem}
.refer__item svg{width:2rem;height:2rem}
.refer__media img{border-radius:1.8rem}
.refer__cta-text{font-size:1.8rem;margin-bottom:3rem}
.refer__btn{min-width:24rem;height:6rem;font-size:1.8rem}
}

@media(min-width:768px){
	.hero_content{width:50rem; max-width:50rem;}
	.intro{padding:6rem 0}
	.intro__title{font-size:4.5rem}
	.intro__text{font-size:3rem}
	
	.works__wrapper{flex-direction:row;justify-content:space-between;align-items:flex-start}
	.works__wrapper::before{display:block}
	.works__item{width:33.333%}
	.works{padding:7rem 0}
	.works__title{font-size:5rem}
	.works__icon{width:21rem;height:21rem}

	.refer{padding:7rem 0}
	.refer__title{font-size:5rem}
	.refer__wrapper{margin-bottom:6rem}
	.refer__item{font-size:2rem}
	.refer__cta-text{font-size:2rem}
}

@media(min-width:1024px){
	.topbar{position:sticky;top:0;left:0;z-index:999;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 35px rgba(15,23,42,.08);transition:background .3s ease,box-shadow .3s ease}
	.topbar .container, .topbar__left{flex-direction:row;}
	.hero_wrapper{position:relative; flex-direction:row;}
	.hero_img{display:block; position:absolute; bottom:0; left:0; width:70rem; z-index:1}
	.hero_content{z-index:2; width:40rem; max-width:40rem;}
	.hero__formbox{width:40rem;}

	.refer__wrapper{grid-template-columns:1fr 52rem;gap:7rem}
	.bottom_wrapper{grid-template-columns:1.1fr 0.9fr 1fr 1fr;  gap:2rem;}
}

@media(min-width:1200px){
	.hero_img{width:75rem;bottom:-10rem;left:-10rem;}
	.hero_wrapper{justify-content:space-between;}
	.hero_content{z-index:2; width:40rem; max-width:40rem; margin:0 auto}
	.refer__item{font-size:2.5rem}
	.refer__cta-text{font-size:2.5rem}

	#bottom{color:white; padding:2rem 0}
	.bottom_col p{font-size:1.8rem; font-weight:700}
	.bottom_wrapper{gap:4rem;}
	.social_links > ul > li{justify-content:space-between;}
	.footer_wrapper{flex-direction:row; gap:0; justify-content:space-between;}
	.footer_links ul{justify-content:start; flex-wrap:nowrap; flex:1;}	
}

@media(min-width:1280px){
	.container{padding-inline:2rem 0;}
	.hero{padding:5rem 0}
	.hero_wrapper{justify-content:end;}
	.hero__wrapper{grid-template-columns:1fr .95fr .75fr;gap:3rem;}
	.hero__title{font-size:7rem}
	.hero__formbox{grid-column:auto;align-self:center}
	.hero_content{margin:0; width:34rem; max-width:34rem;}
	.hero_img{width:68rem;z-index:3;bottom:-5rem;left:-20rem;}
	.works__text{font-size:2.5rem;line-height:1.6;}
}


@media(min-width:1600px){
	.container{max-width:1400px;}
	.hero_content{margin-right:0; width:50rem; max-width:50rem;}
	.hero_content h1{font-size:7rem; }
	.hero_img{width:80rem; z-index:3; bottom:-15rem; left:-25rem;}
}