body { margin: 0; padding: 0;}
.container {   margin: 0; padding: 0; overflow: hidden; min-height: 100vh; height: 100%; width: 100%; }

/*header*/

.nav { width: 100%; max-height: 100%; height: 8vh; display: flex; text-align: center; background-color: #253551; position: fixed; z-index: 2; }
.H-title { font-family: "Inknut Antiqua", sans-serif; font-weight: bold; color: #ffffff; display: flex; align-items: center; text-decoration: none; list-style-type: none; }
.H-menu { margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-evenly; margin-left: auto; }
.H-text { position: relative; text-decoration: none; list-style-type: none; }
.H-text a { text-decoration: none; color: #ffffff; }
.H-text:hover .H-link-text { display: block; }
.H-link-text:hover ul { display: block; }
.H-link-text { margin: 0; padding: 0; width: auto; list-style: none; display: none; background: #253551; position: absolute; left: 50%; transform: translateX(-50%); }
.H-hide-menu:hover a { color: #c5e0b4; transition: ease 5ms; z-index: 999; }
.H-hide-menu {margin-bottom: 5px; }
.H-hide-menu a { color: #ffffff; text-decoration: none; }
#menu-toggle { display: none;}
.menu-btn { display: none; }

@media (min-width: 1200px) {
	
	.H-title  { width: 40rem; padding-left: 5%; font-size: 1.1rem; }
	.H-menu { width: 40rem; font-size: 0.9rem; margin-right: 2rem; }
	.H-link-text {width: 5rem; font-size: 0.9rem;}
  
}

@media (min-width: 992px) and (max-width: 1199px) {
	
  .H-title  { width: 40rem; padding-left: 3%; font-size: 1rem; font-weight: bold; }
  .H-menu {width: 40rem; font-size: 0.7rem;}
  .H-link-text {width: 4rem; font-size: 0.7rem; position: absolute;}
  
}
@media (min-width: 768px) and (max-width: 991px) {
	
 .H-title  {width: 40rem; padding-left: 3%; font-size: 0.85rem; font-weight: bold;}
 .H-menu {width: 40rem; font-size: 0.6rem;}
 .H-link-text {width: 3.5rem; font-size: 0.6rem;}
 
}
@media (min-width: 651px) and (max-width: 767px) {
	
  .H-title  {width: 40rem; padding-left: 3%; font-size: 0.7rem; font-weight: bold;}
  .H-menu {width: 40rem; font-size: 0.5rem;}
  .H-link-text {width: 3rem; font-size: 0.6rem;}
  
}

@media (max-width: 650px) {
	
  .H-title  { width: 15rem; padding-left: 3%; font-size: 0.55rem; font-weight: bold; }
  .H-menu { width: 40rem; font-size: 0.5rem; display: none; }
  .H-link-text { width: 3rem;}
  .menu-toggle { display: none; }
  .menu-btn { display: block; position: fixed; top: 13px; right: 20px; font-size: 1.5rem; cursor: pointer; color: #ffffff; }
  #menu-toggle:checked + .H-menu { display: block; position: absolute; top: 50px; right: 0; background-color: #333; width: 100%; padding: 20px; }
  .show-menu { display: block; position: absolute; top: 50px; right: 0; background-color: #253551; width: 50%; }
  .H-text:hover .H-link-text { display: flex; position: absolute; top: 10px; left: 60%; background-color: #253551; }
  .H-text { padding: 10px 0; position: relative; }
  .H-hide-menu {margin-left: 5px;}
  
}




/*first*/

.container1 { max-width: 100%; min-height: 100vh; height: auto; margin: 0; padding: 0; background-color: #253551; }
.image1 { background-repeat: no-repeat; background-size: cover; background-position: center; }
.first-title { color: #ffffff; font-weight: bold; }
.first-text { color: #ffffff; }
.learn-btn { display: flex; outline: none; border: none; border-radius: 30px; cursor: pointer; justify-content: center; align-items: center; background-color: #ffffff; color: #253551; font-weight: 600; }


@media (min-width: 768px) {
	
  .container1 { display: flex; justify-content: space-evenly; align-items: center; }
  
}

@media (max-width: 991px) {
	
  .container1 { display: flex; align-items: center; justify-content: center; flex-direction: column; }
  .image1 { margin: 3rem 0 0 0; width: 40rem; height: 20rem; }

}

@media (min-width: 1200px) {
	
  .image1 { width: 35rem; height: 35rem; }
  .first-content { width: 35rem; }  
  .first-title { margin: 0 0 3rem 0; font-size: 1.5rem; }  
  .first-text { margin-bottom: 5rem; font-size: 1.2rem; line-height: 30px; }
  .learn-btn { height: 3.5rem; width: 10rem; font-size: 1rem; }
  
}

@media (min-width: 992px) and (max-width: 1199px) {
	
  .image1 { width: 25rem; height: 25rem; }
  .first-content { width: 25rem; }  
  .first-title { margin: 0 0 2rem 0; font-size: 1.05rem; }  
  .first-text { margin-bottom: 3rem; font-size: 0.9rem; line-height: 30px; }  
  .learn-btn { height: 3rem; width: 8rem; font-size: 0.8rem; }
  
}

@media (min-width: 768px) and (max-width: 991px) {
	
  .first-content { width: 40rem; }  
  .first-title { margin: 2rem 0; font-size: 1.5rem; }  
  .first-text { margin: 3rem 0; font-size: 1.2rem; line-height: 25px; }  
  .learn-btn { height: 3.5rem; width: 8rem; font-size: 0.9rem; }
  
}

@media (min-width: 651px) and (max-width: 767px) {
	
  .image1 { width: 35rem; height: 25rem; }
  .first-content { width: 35rem; }  
  .first-title { margin: 2rem 0 0 0; font-size: 1.3rem; }  
  .first-text { margin-top: 2rem; font-size: 1rem; line-height: 30px; }
  .learn-btn { margin-top: 2rem; height: 3rem; width: 8rem; font-size: 0.8rem; }
  
}

@media (min-width: 500px) and (max-width: 650px) {
	
  .image1 { width: 25rem; height: 15rem; }
  .first-content { width: 25rem; }  
  .first-title { margin: 1rem 0 0 0; font-size: 1rem; }  
  .first-text { margin-top: 2rem; font-size: 0.85rem; line-height: 30px; }
  .learn-btn { margin-top: 2rem; height: 3rem; width: 8rem; font-size: 0.8rem; }
  
}

@media (max-width: 499px) {
	
  .image1 { width: 20rem; height: 15rem; }
  .first-content { width: 20rem; }  
  .first-title { margin: 1rem 0 0 0; font-size: 0.85rem; }  
  .first-text { margin-top: 2rem; font-size: 0.7rem; line-height: 16px; }
  .learn-btn { margin-top: 2rem; height: 2.8rem; width: 6rem; font-size: 0.7rem; }
}

/*second*/

.container2 { max-width: 100%; min-height: 100vh; height: auto; margin: 0; padding: 0; border-top: 1px solid #e0e0db; }
.second-title { display: flex; justify-content: center; align-items: center; font-weight: bold; padding-top: 7%; font-size: 2rem; }
.Introduce { margin: 0 auto; padding-top: 5%; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, auto)); align-items: center; gap: 2rem;}
.image-container { display: block; margin: 0 auto; }
.image2 { margin-left: auto; margin-right: auto; width: 350px; height: 350px; border-radius: 50%; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; align-items: center; }
.second-sub-title { display: flex; justify-content: center; font-weight: bolder; width: 25rem; margin: 2.5rem 0; font-size: 1.2rem; }
.second-text { margin: 0 auto; text-align: left; height: 10rem; line-height: 20px; font-size: 1.1rem; }

@media (min-width: 1200px) {
	
  .second-title { padding-top: 6%; font-size: 2rem; }
  .image-container { width: 25rem; }
  .image2 { width: 350px; height: 350px; }
  .second-sub-title { width: 25rem; margin: 2.5rem 0 2.5rem 0; font-size: 1.2rem; }
  .second-text { height: 10rem; line-height: 28px; font-size: 1.1rem; }
  
}

@media (min-width: 992px) and (max-width: 1199px) {
	
  .second-title { padding-top: 7%; font-size: 1.75rem; }  
  .image-container { width: 25rem; }
  .image2 { width: 250px; height: 250px; }
  .second-sub-title { width: 23rem; margin: 2rem 0; font-size: 1.1rem; }
  .second-text { line-height: 20px; height: 7rem; font-size: 0.9rem; }
  
}

@media (min-width: 768px) and (max-width: 991px) {
	
  .second-title { padding-top: 10%; font-size: 1.5rem; }
  .image-container { width: 20rem; }
  .image2 { width: 200px; height: 200px; }
  .second-sub-title { width: 20rem; margin: 1.5rem 0; font-size: 1rem; }
  .second-text { line-height: 16px; height: 7rem; font-size: 0.75rem; }
  
}

@media (min-width: 651px) and (max-width: 767px) {
	
  .second-title { padding-top: 12%; font-size: 1.3rem; }
  .image-container { width: 20rem; }
  .image2 { width: 200px; height: 200px; }
  .second-sub-title { width: 20rem; margin: 1.5rem 0; font-size: 0.9rem; }
  .second-text { height: 8rem; font-size: 0.7rem; }
  
}

@media (min-width: 500px) and (max-width: 650px) {
	
  .second-title { padding-top: 12%; font-size: 1.2rem; }
  .image-container { width: 20rem;}
  .image2 { width: 200px; height: 200px; }
  .second-sub-title { width: 20rem; margin: 1.5rem 0; font-size: 0.9rem; }
  .second-text { height: 8rem; font-size: 0.7rem; }
  
}

@media (max-width: 499px) {
  
  .Introduce { display: flex; flex-direction: column; align-items: center; }
  .second-title { padding-top: 12%; font-size: 1.1rem; }
  .image-container { width: 20rem; }
  .image2 { width: 200px; height: 200px; }
  .second-sub-title { width: 20rem; margin: 1rem 0; font-size: 0.85rem; }
  .second-text {height: 8rem; font-size: 0.7rem; text-align: center; }
  
}

/*third*/

.container3 {   max-width: 100%; height: 100vh; margin: 0; padding: 0; border-top: 1px solid #e0e0db; }
.image3 { background-repeat: no-repeat; background-size: cover; background-position: center; }
.third-title { font-weight: bold; }
.third-sub-title { font-weight: 600; }

  @media (min-width: 768px) {
	  
	  .container3 { display: flex; justify-content: space-evenly; align-items: center; }
	  
  }

@media (max-width: 991px) {
	
  .container3 { display: flex; align-items: center; justify-content: center; flex-direction: column; }

}

@media (min-width: 1200px) {
	
  .image3 { width: 35rem; height: 35rem; }
  .third-content { width: 35rem; }
  .third-title { margin: 2rem 0; font-size: 1.8rem; }
  .third-sub-title { margin: 2rem 0; font-size: 1.5rem; }
  .third-text { font-size: 1.1rem; line-height: 30px; }
  
}

@media (min-width: 992px) and (max-width: 1199px) {
	
  .image3 { width: 25rem; height: 25rem; }
  .third-content { width: 30rem; }
  .third-title { margin: 2rem 0; font-size: 1.6rem; }
  .third-sub-title { font-size: 1.2rem; }
  .third-text { font-size: 0.95rem; line-height: 30px; }
  
}

@media (min-width: 768px) and (max-width: 991px) {
	
  .image3 { margin: 2rem 0 0 0; width: 40rem; height: 20rem; }
  .third-content { width: 40rem; }
  .third-title { margin: 2rem 0; font-size: 1.6rem; }
  .third-sub-title { font-size: 1.3rem; }
  .third-text { font-size: 0.95rem; line-height: 30px; }
  
}

@media (min-width: 651px) and (max-width: 767px) {
	
  .image3 { width: 35rem; height: 25rem; }
  .third-content { width: 35rem; }
  .third-title { margin: 2rem 0; font-size: 1.3rem; }
  .third-sub-title { font-size: 1.1rem; }
  .third-text { font-size: 0.8rem; line-height: 20px; }
  
}

@media (min-width: 500px) and (max-width: 650px) {
	
  .image3 { width: 25rem; height: 15rem; }
  .third-content { width: 25rem; }
  .third-title { margin: 2rem 0; font-size: 1.2rem; }
  .third-sub-title { font-size: 1rem; }
  .third-text { font-size: 0.7rem; line-height: 20px;}
  
}

@media (max-width: 499px) {
  
  .image3 { width: 20rem; height: 15rem; }
  .third-content { width: 20rem; }
  .third-title { margin: 1.5rem 0; font-size: 1rem; }
  .third-sub-title { font-size: 0.9rem; }
  .third-text { font-size: 0.7rem; line-height: 16px;}

}

/*fourth*/

.container4 { max-width: 100%; min-height: 80vh; height: auto; margin: 0; padding: 0; border-top: 1px solid #e0e0db; }
.image4 { background-size: cover; margin: 0; }
.fourth-content { width: 40rem; }
.fourth-title { font-weight: bold; }
.required { color: gray; margin-left: 0.5rem; }
.name { font-weight: 500; }
.means { font-weight: 500; color: black; }
.input { border-radius: 10px; border: none; text-indent: 15px; line-height: 35px; ime-mode: disabled; color: gray; background-color: #e0e0db; color: #000000; }
.send-btn { display: flex; outline: none; border: none; border-radius: 30px; color: #ffffff; cursor: pointer; justify-content: center; align-items: center; background-color: red; font-weight: 500; }
.send-btn:disabled { background-color: #253551; cursor: not-allowed;}
.error { margin: 0 auto; text-align: center; color: red; }
.checkbox{margin: 3rem 0 0 0; accent-color: red;}
.show-info { color: #828282 !important; cursor: pointer !important; pointer-events: auto !important; text-decoration: underline !important; margin: 0 0 0 0.5rem;}
#institute-info { font-size: 1rem; color: #333; background-color: #f9f9f9; padding: 10px; border: 1px solid #ccc; border-radius: 5px; max-width: 40rem; margin: 20px auto;}
.hidden { display: none; }
.personal { margin: 0 auto; display: flex; justify-content: center; flex-direction: column; }
.personal-title { border-bottom: 1px solid #ddd; font-size: 1.2rem; color: #253551; }
.personal-ul03 { margin: 0; padding: 0; font-size: 0.8rem; color: #333; margin-left: 15px; margin-bottom: 8px; word-break: keep-all; line-height: 18px; }

@media (min-width: 768px) {
	
  .container4 { display: flex; justify-content: space-evenly; align-items: center; }
  
}

@media (max-width: 767px) {
	
  .container4 { display: flex; align-items: center; justify-content: center; flex-direction: column; }

}


@media (min-width: 1200px) {
	
  .image4 { width: 35rem; height: 35rem; }
  .fourth-content { width: 30rem; }
  .fourth-title { font-size: 2rem; margin-bottom: 1.5rem; }
  .contact-container { width: 40%; margin-top: 2%; display: flex; }
  .required { line-height: 2rem; font-size: 0.8rem; }
  .name { margin-top: 1.3rem; font-size: 1.25rem; line-height: 2rem; }
  .means { margin-top: 1.3rem; font-size: 1.25em; line-height: 2rem; }
  .input { width: 13rem; margin-top: 0.5rem; font-size: 20px; line-height: 40px; }
  .send-btn { height: 3rem; width: 8rem; font-size: 0.95rem; margin: 3rem 0; }
  .error { width: 14rem; font-size: 0.9rem; }
  .checkbox-text { margin: 0 0 0 1rem; }
  
}

@media (min-width: 992px) and (max-width: 1199px) {
	
  .image4 { width: 35rem; height: 35rem; }
  .fourth-content { width: 15rem; }
  .fourth-title { margin-top: 2rem; font-size: 1.5rem; }
  .contact-container { width: 50%; margin-top: 2%; }
  .required { font-size: 0.8rem; }
  .name { margin-top: 1rem; font-size: 1.15rem; line-height: 2rem; }
  .means { margin-top: 1rem; font-size: 1.15rem; line-height: 2rem; }
  .input { width: 13rem; margin-top: 1.2rem; font-size: 18px; line-height: 40px; }
  .send-btn { height: 3rem; width: 8rem; font-size: 0.9rem; margin: 2rem 0;}
  .error { width: 13rem; font-size: 0.8rem; }
  .checkbox-text { margin: 0 0 0 1rem; font-size: 0.9rem;}
  .show-info{font-size: 0.9rem;}
}

@media (min-width: 768px) and (max-width: 991px) {
	
  .image4 { width: 30rem; height: 30rem; }
  .fourth-content { width: 12rem; }
  .fourth-title { width: 10rem; margin-top: 4rem; font-size: 1.3rem; }
  .contact-container { width: 50%; margin-top: 2%; }
  .required { font-size: 0.75rem; }
  .name { margin-top: 1rem; font-size: 1rem; line-height: 2rem; }
  .means { margin-top: 1rem; font-size: 1rem; line-height: 2rem; }
  .input { width: 10rem; margin-top: 1rem; font-size: 15px; }
  .send-btn { height: 2.5rem; width: 6rem; font-size: 0.8rem; margin: 2rem 0; }
  .error { width: 10rem; font-size: 0.6rem; }
  .checkbox-text { margin: 0 0 0 0.5rem; font-size: 0.7rem;}
  .show-info{font-size: 0.7rem;}
  
}

@media (min-width: 651px) and (max-width: 767px) {
	
  .image4 { width: 35rem; height: 25rem; }
  .fourth-content { width: 24rem; }
  .fourth-title { margin-top: 2rem; font-size: 1.5rem; }
  .contact-container { width: 50%; margin-top: 2%; display: flex; }
  .required { font-size: 0.75rem; }
  .name { margin-top: 1rem; font-size: 1.15rem; line-height: 2rem; margin-right: 3rem; }
  .means { font-size: 1.15rem; line-height: 2rem; margin-right: 3rem; }
  .input { width: 10rem; margin-top: 1rem; font-size: 15px; }
  .send-btn { height: 2.5rem; width: 6rem; font-size: 0.8rem; margin: 1rem 0; }
  .error { width: 10rem; font-size: 0.6rem; }
  .checkbox-text { margin: 0 0 0 0.5rem; font-size: 0.85rem;}
  .show-info{font-size: 0.85rem;}
  
}

@media (min-width: 500px) and (max-width: 650px) {
	
  .image4 { width: 25rem; height: 25rem; }
  .fourth-content { width: 24rem; }
  .fourth-title { margin-top: 2rem; font-size: 1.5rem; }
  .contact-container { width: 50%; margin-top: 2%; display: flex; }
  .required { font-size: 0.75rem; }
  .name { margin-top: 1rem; font-size: 1.15rem; line-height: 2rem; margin-right: 3rem; }
  .means { font-size: 1.15rem; line-height: 2rem; margin-right: 3rem; }
  .input { width: 10rem; margin-top: 1rem; font-size: 15px; }
  .send-btn { height: 2.5rem; width: 6rem; font-size: 0.8rem; margin: 1rem 0; }
  .error { width: 10rem; font-size: 0.6rem; }
  .checkbox-text { margin: 0 0 0 0.5rem; font-size: 0.85rem;}
  .show-info{font-size: 0.85rem;}
  
}


@media (max-width: 499px) {
  
  .container4 {min-height: 100vh; height: auto; display: flex; align-items: center; justify-content: center; flex-direction: column; }
  .image4 { width: 20rem; height: 15rem; }
  .fourth-content { width: 18rem; }
  .fourth-title {margin: 5rem 0 0 0; font-size: 1.3rem; }
  .contact-container { width: 50%; margin-top: 2%; display: flex; }
  .required { font-size: 0.65rem; }
  .name { margin-top: 0.5rem; font-size: 1rem; line-height: 2rem; }
  .means {margin-top: 0.5rem; font-size: 1rem; line-height: 2rem; }
  .input { width: 8rem; margin: 0.5rem 1rem 0 0; font-size: 15px; }
  .send-btn {  height: 2.5rem; width: 6rem; font-size: 0.8rem; margin: 1rem 0; }
  .error { width: 8rem; font-size: 0.5rem; line-height: 15px;}
  .checkbox-text { margin: 0 0 0 0.5rem; font-size: 0.8rem;}
  .show-info{font-size: 0.8rem;}
}


/*footer*/

.Footer_wrap { width: 100%; height: 150px; border-top: 1px solid #e0e0db; background-color: #ffffff; display: flex; align-items: center; bottom: 0; }
.F-utill_box { flex: 1; display: flex; flex-direction: column; align-items: center; }
.F-title { display: flex; justify-content: space-evenly; font-weight: bold; color: #253551; }
.F-content { display: flex; justify-content: space-evenly; font-weight: bold; color: #969696; margin-bottom: 0.3rem; }
.copyright-list {margin: 0; padding: 0.3rem 0; display: flex; align-items: center; justify-content: center; list-style-type: none; font-size: 0.8rem; }
.copy1 { margin: 1rem 0; margin-right: 10px; }
.last-copy4 { margin: 1rem 0; margin-right: 10px; padding-left: 10px; text-decoration: none; }
.last-copy4 a { text-decoration-line: none; }

@media (min-width: 1200px) {
	
   .F-title { width: 15rem; font-size: 1.2rem; }
   .F-content { width: 15rem; font-size: 0.9rem; }
  
}

@media (min-width: 992px) and (max-width: 1199px) {
	
  .F-utill_box { width: 10rem; }
  .F-title { font-size: 0.9em; }
  .F-content { font-size: 0.9em; }
  .copyright-list{ font-size: 0.7rem; }
  
}

@media (min-width: 768px) and (max-width: 991px) {
	
  .F-utill_box { width: 5rem; }
  .F-title { font-size: 0.8rem; }
  .F-content { font-size: 0.65rem; }
  .copyright-list{ font-size: 0.65rem; }
  
}

@media (min-width: 651px) and (max-width: 767px) {
	
  .F-utill_box { width: 3rem; }
  .F-title { font-size: 0.5rem; }
  .F-content { font-size: 0.45rem; }
  .copyright-list{ font-size: 0.55rem; }
  
}

@media (min-width: 500px) and (max-width: 650px) {
	
  .F-utill_box { width: 2rem; }
  .F-title { font-size: 0.65rem; }
  .F-content { font-size: 0.5rem; }
  .copyright-list{ font-size: 0.5rem; }

}


@media (max-width: 499px) {
  .Footer_wrap { height: 80px; }
  .F-utill_box { width: 2rem; }
  .F-title { font-size: 0.6rem; }
  .F-content { font-size: 0.45rem; }
  .copyright-list{ font-size: 0.4rem; }

}