:root{
   --colText:#202020;
   --pageWidth:1200px;
   --colBg:#f9f9f9;
   --colYellow:#ffe20a;;
   --fontSizeHtml:110%;
   --fontFamily:"Source Sans 3", sans-serif;
   --fontFamily:"Montserrat", sans-serif;
   --colPri:#002ead;
}


body{}
/* global */


.mainBox>.inner{max-width:var(--pageWidth);margin:auto;}
.mainBox .mainBoxTtl .ttl{font-size:3rem;font-style: italic;text-align: center;position: relative;margin-bottom:4rem;}
.mainBox .mainBoxTtl .ttl:after{content:'';position: absolute;bottom:-8px;left:50%;width:150px;border:2px solid lightgray;}
.mainBox .mainBoxTtl .desc{text-align: center;size:1rem;opacity:.7;display: none;}


header{background:#fff;box-shadow:0 .5rem .5rem #10107d30;}
header .inner{display: flex;justify-content: space-between;align-items: center;gap:1rem;padding: 10px;max-width:var(--pageWidth);margin:auto;}
header .inner .hdrTop{display:flex;justify-content: space-between;align-items: center;}
header .brand{height:90px;}
header .brand img{height:100%;}
header .menu{list-style-type: none;margin: 0;padding: 0;text-align: center;font-size:16px;}
header .menu > li{display: inline-block;position: relative;}
header .menu > li > a{padding: 14px 20px;text-decoration: none;display: block;color:var(--colText);}
header .menu a:hover{color:var(--colPri)}
header .dropdown-content{display: none;position: absolute;background:#fff;min-width: 160px;box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);z-index: 10;text-align: left;}
header .dropdown-content a{padding: 12px 16px;text-decoration: none;display: block;color:var(--colText);}
header .dropdown:hover .dropdown-content{display: block;}
header .menu-icon{display: none;font-size: 30px;color: white;cursor: pointer;padding: 10px;}



/* hero slider */
.heroSlider{position:relative;max-width:100vw;height:500px;margin-bottom:4rem;}
.heroSlider .swiper-slide{width:100%;height:100%;background:var(--bgImg);background-size:cover;background-repeat:no-repeat;background-position:bottom;display:flex;align-items:end;overflow:hidden;}
.heroSlider .swiper-scrollbar{display:none;}
.heroSlider .textBox{padding-bottom:.5rem;position:absolute;top:40%;width:100%;}
.heroSlider .textBox p{font-weight: bold;font-size:4rem;color:#fff;text-shadow:2px 2px 1px #000;max-width:1200px;margin: auto;background:linear-gradient(90deg,transparent,#0000009c,transparent);text-align: center;}
.heroSlider .textBox p span{color:var(--colYellow)}
.heroSlider .swiper-button-prev, .heroSlider .swiper-button-next{opacity:.2;}

.aboutUs .mainBoxBody{display: flex;flex-wrap:wrap;gap:2rem;}
.aboutUs .mainBoxBody > *{flex:1 1 350px;}
.aboutUs .mainBoxBody .textBox{text-align: justify;line-height:150%;}
.aboutUs .mainBoxBody .ttl{font-size:1.5rem;font-weight:bold;margin-bottom:1rem;color:var(--colPri);}
.aboutUs .mainBoxBody p{margin-bottom:1rem;}
.aboutUs .mainBoxBody .imgBox{width:100%;}
.aboutUs .mainBoxBody .imgBox img{width:100%;height:300px;}

.ftrAnim{position: relative;width:100vw;margin: 4rem auto -35px;overflow: hidden;height:100px;background-color: pinkk;}
.ftrAnim img{height:100px;transform:translateX(-100px);animation:ftrAnim 12s ease-in-out infinite;}
@keyframes ftrAnim {
    0%{transform: translateX(-100px);}
    100%{transform: translateX(calc(100vw + 100px));}
}


footer{background:linear-gradient(30deg,#000c1f 20%,#00021ded 50%),var(--ftrImg);background-repeat: no-repeat;background-size: cover;background-position:center;color:#d4d4d4;line-height: 150%;margin-top:2rem;}
footer a{color:#d4d4d4;}
footer>.inner{max-width:var(--pageWidth);margin:auto;}
footer .ftrTop{padding-top:4rem;}
footer .ftrBoxs{display: flex;flex-wrap: wrap;}
footer .ftrBox{padding:1rem;}
footer .ftrBox .ttl{font-size:1.5rem;color:#eee;margin-bottom:2rem;font-weight:lighter;}
footer .ftrBox .links{max-width:250px;}
footer .ftrBox .links a{display: block;letter-spacing:2px;}
footer .ftrBox .links a:hover{text-decoration: underline;}
footer .ftrBox .icons{max-width:250px;}
footer .ftrBox .icons a{color:#Fff;font-size:2.5rem;margin:0 1rem 1rem 0;padding:.1rem .3rem;border-radius:.5rem;}
footer .ftrBox .icons a:hover{background:#fff;color:rgb(0, 0, 42);}
footer .ftrBot{display: flex;flex-wrap: wrap;justify-content: space-between;opacity:.5;padding:4rem 1rem 2rem;}


.heroImg{padding:11rem 1rem 5rem;display: flex;justify-content: center;background-size:cover;background-repeat:no-repeat;background-position: center;}
.heroImg .textBox{background:linear-gradient(90deg,transparent,#0000004e,transparent);text-align: center;width:100%;max-width:1100px;padding:.5rem 2rem;color:#fff;font-weight: bold;}
.heroImg .textBox .ttl{font-size:4rem;text-shadow:2px 2px 0 #000;}
.heroImg .textBox .ttl span{color:var(--colYellow)}




/* pop up modal */
.popUpModal>.inner{border-radius:1rem;padding:2rem;}
.popUpModal .popUpCard{display: grid;place-items: center;text-align: center;max-width:300px;}
.popUpModal .iconBox{display: grid;place-items: center;width:110px;height:110px;font-size:4rem;background:var(--background);border-radius:50%;color:#fff;}
.popUpModal .iconBox .cross{display: none;}
.popUpModal .textBox{line-height:160%;}
.popUpModal .textBox .ttl{font-size:2rem;font-weight: bold;padding:2rem 1rem;}
.popUpModal .btn{margin-top:2rem;padding-inline:5rem;text-transform: uppercase;background:var(--background)}
.popUpModal .btn:hover{color:var(--background);}
.popUpModal.succsess{--background:rgb(17, 175, 54);}
.popUpModal.succsess .iconBox{--background:rgb(17, 175, 54);}
.popUpModal.error{--background:rgb(226, 67, 67);}
.popUpModal.error .cross{display: block;}
.popUpModal.error .tick{display: none;}

/* article */
article.textBox{line-height:150%;background:#fff;padding:2rem;border-radius:1rem;}
article.textBox .ttl{font-size:2rem;font-weight: bold;margin:2rem 0 1rem;}
article.textBox .subTtl{font-size:1.2rem;font-weight: bold;margin:2rem 0 1rem;}
article.textBox ul {list-style:disc}
article.textBox ul li{margin-left: 2rem;}

.formBox5{width:100%;}
.formBox5 .group{margin-bottom:1rem;}
.formBox5 label{width:100%;padding:0 0 .5rem 1rem;display: block;opacity:.7;}
.formBox5 input,.formBox5 select,.formBox5 textarea{width:100%;;padding:1rem;border-radius:.3rem;border:none;background:aliceblue;font-size:inherit;outline: none;font-family:inherit;}
.formBox5 .btns{margin-top:1rem;}

/* Modal background */
.modal-popup{display:none;position:fixed;z-index:99;left:0;top:0;width:100%;height:100%;background-color:#00000080;}  
.modal-popup.active{display:block;}  
.modal-popup .modal-content{background:#d4eaff;margin:15% auto;padding:1.5rem 2rem;border:1px solid #888;max-width:700px;border-radius:1rem;}
.modal-popup .modal-content .ttl{font-size:2rem;font-weight: bold;color:#003384;}
.modal-popup .close{color:#aaa;float:right;font-size:28px;font-weight:bold;}
.modal-popup .close:hover, .modal-popup .close:focus{color:black;text-decoration:none;cursor:pointer;}
.modal-popup .popUpBox{display:flex;gap:1rem;justify-content:space-evenly;margin-top:2rem;}
.modal-popup .popUpBox .details{max-width:300px;display:flex;flex-wrap:wrap;align-items:center;}
.modal-popup .popUpBox .formBox5 input,.modal-popup .popUpBox .formBox5 textarea{background:#fff;border:1px solid #cbe7ff;width:100%;border-radius: 1.5rem;}


@media (max-width: 768px){
   header .inner{flex-direction: column;}
   header .inner .hdrTop{width:100%;}
   header .inner .hdrBot{width:100%;border-top:1px solid aliceblue;text-align: center;display: none;}
   header .inner .hdrBot.active{display: block;}
   /* header .menu{flex-direction: column;text-align: left;} */
   header .menu > li{display: block;}
   header .menu-icon{display: block;text-align: left;color:var(--colPri);}


   .heroSlider .textBox p{font-size:3rem;}

}