@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

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


body{font-family: "Poppins", sans-serif;}
/* 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{position: fixed;top:0;left:0;right:0;z-index:10;}
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(--colPri);font-weight: bold;}
header .menu a:hover{color:var(--colText)}
header .dropdown-content{display: none;position: absolute;background:#fff;min-width: 360px;box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);z-index: 10;text-align: left;}
header .dropdown-content a{padding: 9px 16px;text-decoration: none;display: block;color:var(--colText);}
header .dropdown-content a:hover{color:#1616c2;text-decoration: underline;}
header .dropdown:hover .dropdown-content{display: block;}
header .menu-icon{display: none;font-size: 30px;color: white;cursor: pointer;padding: 10px;}

header.active{background:#fff;}
header.active .brand{height:70px;}


/* hero slider */
.heroSlider{position:relative;max-width:100vw;height:700px;margin-bottom:4rem;}
.heroSlider .swiper-slide{width:100%;height:100%;background:linear-gradient(#ffffff82,#ffffff00),var(--bgImg);background-size:cover;background-position: center;background-repeat:no-repeat;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;text-shadow:2px 2px 1px #00000000;max-width:1200px;margin: auto;text-align: center;color:var(--colPri)}
.heroSlider .textBox p.ttl{font-weight: bold;font-size:3.5rem;max-width:1200px;margin: auto;text-align: center;text-shadow:2px 2px #fff;}
.heroSlider .textBox p.desc{font-size:1.5rem;margin-block:1rem;max-width:600px;text-shadow:2px 2px #fff;}
.heroSlider .textBox .btns{max-width:300px;margin:2rem auto 0;}
.heroSlider .textBox .btns .btn{border:2px solid var(--colPri);background:transparent;color:var(--colPri);}
.heroSlider .textBox .btns .btn:hover{background:var(--colPri);color:#fff;}
.heroSlider .swiper-button-prev, .heroSlider .swiper-button-next{opacity:.2;}

.ourServices.mainBox .cards{flex:1 1 350px;gap:3rem;}
.ourServices .card{flex:1 1 350px;max-width:400px;box-shadow:.5rem .5rem .5rem #00000044;position: relative;border-radius:1rem;overflow: hidden;background:#ffffff;}
.ourServices .card img{width:100%;height:255px;margin-bottom:5rem;}
.ourServices .card .textBox{text-align: center;padding:1rem;border-radius:2rem;position: absolute;top:260px;left:1rem;right:1rem;transition:1s;}
.ourServices .card .ttl{font-size:1.2rem;color:var(--colPri);font-weight: bold;}
.ourServices .card .desc{opacity:.7;line-height: 150%;height:0px;overflow: hidden;margin-top:1rem;}
.ourServices .card .desc .link{display: block;color:#1f1fb2;}
.ourServices .card .desc .link:hover{text-decoration: underline;}
.ourServices .card:hover .textBox{background:#ffffff;top:100px;}
.ourServices .card:hover .desc{height:unset;}

.whyChoose.mainBox{background:linear-gradient(#c5efffde,#e9f4ffa9), url('../asset/img/e/6.png');background-position:center;background-repeat: no-repeat;background-size:cover;}
.whyChoose .textBox{max-width:1100px;margin:auto;text-align: center;line-height:170%;font-size:1.1rem;}
.whyChoose .cards{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2rem;}
.whyChoose .cards p{flex:1 1 300px;max-width:350px;padding:1rem;background:var(--colPri);color:#fff;border:2px solid var(--colPri);}
.whyChoose .cards p:hover{background:unset;color:var(--colPri);}


.dealsWith.mainBox{background:linear-gradient(90deg,#ffffff1d,#ffffff00,#ffffff00,#ffffff00,#ffffff37),url('../asset/img/e/4.jpg');background-position:center;background-repeat: no-repeat;background-size:cover;}
.dealsWith .cards1{gap:2rem;}
.dealsWith .cards1 .card{max-width:350px;text-align: center;padding:1rem;border-radius:1rem;background: #ffffff;border:1px solid transparent;transition: .1s;}
.dealsWith .cards1 .card .ttl{font-size:1.2rem;color:var(--colPri);font-weight: bold;}
.dealsWith .cards1 .card .desc{margin-top:1rem;line-height:170%;opacity:.7;}
.dealsWith .cards1 .card:hover{background:linear-gradient(30deg,#e8fff2,#fff,#e8fff2);}
   
.aboutUs.mainBox .mainBoxBody{display: flex;justify-content: space-evenly;flex-wrap:wrap;gap:3rem;}
.aboutUs.mainBox .mainBoxBody > *{flex:1 1 350px;}
.aboutUs.mainBox .mainBoxBody .textBox{text-align: justify;line-height:180%;max-width:500px;}
.aboutUs.mainBox .mainBoxBody .ttl{font-size:2rem;font-weight:bold;margin-bottom:1rem;color:var(--colPri);}
.aboutUs.mainBox .mainBoxBody .ttl span{font-size:2.5rem;margin-right:1rem;font-weight:200;}
.aboutUs.mainBox .mainBoxBody .desc{margin-block:2rem;}

.aboutUs.mainBox .mainBoxBody p{margin-bottom:1rem;}
.aboutUs.mainBox .mainBoxBody .imgBox{max-width:450px;}
.aboutUs.mainBox .mainBoxBody .imgBox img{width:100%;}

.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,#001a37 20%,#00302aed 50%);line-height: 150%;margin-top:2rem;color:#fff;}
footer a{color:#d4d4d4;}
footer>.inner{max-width:var(--pageWidth);margin:auto;}
footer .ftrTop{padding-top:4rem;}
footer .ftrBoxs{display: flex;flex-wrap: wrap;justify-content: space-between;}
footer .ftrBox{padding:1rem;flex:unset;}
footer .ftrBox .ttl{font-size:1.5rem;color:#eee;margin-bottom:2rem;font-weight:bold;}

footer .ftrBox .links a{display: block;margin-bottom:.5rem;}
footer .ftrBox .links a:hover{text-decoration: underline;}
footer .ftrBox .icons{max-width:150px;}
footer .ftrBox .icons a{color:#Fff;font-size:4rem;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;}


  body.articlePage{--pageWidth:1000px;}
  body.articlePage .mainBox{margin-top:5rem;}
  body.articlePage article{line-height:1.5;padding:1rem;}
  body.articlePage article img{float: right;max-width:400px;max-height:400px;margin:0 0 1rem 2rem;}
  body.articlePage article p{margin-bottom:1rem;}
  body.articlePage article ul li{list-style: circle;margin-left:1rem;}

  



@media (max-width: 768px){
   :root{

      --fontSizeHtml:100%;
   }

   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:has(.hdrBot.active){background: #fff;}

   header .menu > li{display: block;}
   header .menu-icon{display: block;text-align: left;color:var(--colPri);}

   footer .ftrBox .icons{max-width:unset;}
   footer .ftrBox .links a{display: inline-block;margin-bottom:.5rem;}

   .heroSlider .textBox{padding:.5rem;}
   .heroSlider .textBox p.ttl{font-size:2.5rem;}
   .heroSlider .textBox p.desc{font-size:1rem}

   .mainBox .mainBoxTtl .ttl{font-size:1.5rem;}

   .whyChoose .cards{gap:1rem;}
   .whyChoose .cards p{flex:1 1 34%;padding:10px;font-size:.9rem;display: grid;place-items: center;}


   body.articlePage article img{max-width:350px;float: none;display: block;margin:0 auto 1rem;}

}