/* HEADER */
@import "./global.css";

/* PHOSPhOR ICONS  */

.ph-linkedin-logo,
.ph-instagram-logo,
.ph-facebook-logo {
   font-size: 36px;
   color: #385984;
}
/* ######## */

.pageInfor-section-home {
   background-image: url("../img/rocket-2.svg"), url("../img/cloud.svg");
   background-repeat: no-repeat, no-repeat;
   background-position:
      130% 40%,
      top right;
   background-size:
      900px 900px,
      750px;
}
.pageInfor-header-contain {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 1rem;
   padding-bottom: 1rem;
}
.navbar {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2rem;
}

.link {
   padding: 0.5rem;
}

.navbar a {
   color: #fff;
   font-size: 1rem;
}

.navbar a:hover {
   color: #ffc107;
   transition: 0.2s;
}
.pageInfor-logoSBC {
   background-color: #fff;
   border-radius: 4px;
}
.pageInfor-logoSBC img {
   width: 5rem;
}

/* HOME  */
.container-calendar {
   display: block;
}
.calendar {
   list-style-position: inside;
   width: 50rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   background-color: #edf0f2;
   color: #385984;
   padding: 2rem;
   gap: 0.75rem;

   border-radius: 1rem;
   margin: 1.5rem 0 3rem;
}

.date {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1.5rem;
}
.circle {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 4rem;
   height: 4rem;
   border: 1px solid transparent;
   border-radius: 50%;
   background: #ffc107;
   color: #000;
   font-size: 0.75rem;
   font-weight: 600;
   text-align: center;
   padding: 1rem;
}

.btn {
   display: block;
   padding: 1rem 3.5rem;
   background-color: #385984;
   color: #ffff;
   border-radius: 2rem;
   font-size: 1rem;
   font-weight: 600;
   text-align: center;
}
.btn-align-selff-center {
   align-self: center;
}

.btn:hover {
   filter: brightness(0.9);
   transition: 0.2s;
}
.text-yellow {
   color: #ffc107;
   font-weight: 600;
}
/* SECTION EVENT */

.pageInfor-section-event {
   display: flex;
   padding-top: 2rem;
   margin-bottom: 3rem;
   justify-content: space-between;
   align-items: flex-start;
   gap: 2rem;
}
.pageInfor-code-evironment {
   background-color: #385984;
   padding: 2rem;
   color: #fff;
   border-radius: 1rem;
   max-width: 50rem;
}

.pageInfor-code-evironment h2 {
   padding-bottom: 2rem;
}

.pageInfor-code-evironment p {
   padding-bottom: 1rem;
}

.pageInfor-code-evironment ul {
   list-style: disc;
}

.pageInfor-scheldule {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.pageInfor-scheldule h2 {
   padding-bottom: 2rem;
   color: #385984;
}

.language {
   padding: 2rem;
}
.evironment {
   padding: 2rem 2rem 0 2rem;
}

.pageInfor-divisor {
   height: 26rem;
   min-width: 1rem;
   background-color: #131f2e;
   position: relative;
}

.pageInfor-divisor::after {
   content: "";
   width: 55px;
   height: 60px;
   background-image: url("/assets/img/icons/medal.svg");
   background-size: 55px 60px;
   background-repeat: no-repeat;
   background-position: center;
   position: absolute;
   bottom: -60px;
   left: -20px;
}

.pageInfor-hours {
   display: flex;
   align-items: center;
}

.pageInfor-hours-col-1 {
   display: flex;
   flex-direction: column;
   gap: 6rem;
   padding: 6rem 0;
   align-items: flex-end;
}

.pageInfor-hours-col-2 {
   display: flex;
   flex-direction: column;
   gap: 6rem;
   padding: 1rem 0;
}

.pageInfor-hour-col-1 {
   display: flex;
   align-items: center;
   gap: 5px;
}

.pageInfor-hour-col-1 p,
.pageInfor-hour-col-2 p {
   background-color: #ffc107;
   padding: 0.5rem 1rem;
   border-radius: 3px;
   font-size: 0.875rem;
}

.pageInfor-hour-col-1::after {
   content: "";
   border-top: 16px solid #131f2e;
   border-left: 50px solid #131f2e;
}

.pageInfor-hour-col-2 {
   display: flex;
   align-items: center;
   gap: 5px;
}

.pageInfor-hour-col-2::before {
   content: "";

   border-top: 16px solid #131f2e;
   border-left: 50px solid #131f2e;
}

/* SECTION PLACE  */

.pageInfor-section-place {
   padding-top: 2rem;
   margin-bottom: 3rem;
}
.pageInfor-section-place h2 {
   padding-bottom: 2rem;
   color: #385984;
   text-align: center;
}

.pageInfor-map-place {
   display: flex;
   align-items: stretch;
   justify-content: center;
   gap: 6rem;
   margin-top: 3.75rem;
   margin-bottom: 3.75rem;
}

.pageInfor-cards-contact {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 2rem;
}

.pageInfor-address,
.pageInfor-contact {
   padding: 1.5rem 3rem 1.5rem 1.5rem;
   background-color: #385984;
   color: #fff;
   line-height: 1.8;

   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
}

.pageInfor-address {
   margin-bottom: 1rem;
}
.pageInfor-contact a {
   color: #fff;
}

.pageInfor-address {
   border-top-left-radius: 10px;
   border-bottom-left-radius: 3px;
}
.pageInfor-contact {
   border-top-left-radius: 3px;
   border-bottom-left-radius: 10px;
}
.pageInfor-social-media {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.mapouter {
   position: relative;
   text-align: right;
}
.gmap_canvas {
   overflow: hidden;
   background: none !important;

   border-radius: 0.5rem;
}

#gmap_canvas {
   width: 500px;
   height: 500px;
}

.gmap_canvas a {
   display: none;
}
/* SECTION ABOUT  */

.pageInfor-section-about {
   padding-top: 2rem;
   margin-bottom: 3rem;
}

.pageInfor-section-about h2 {
   padding-bottom: 2rem;
   color: #385984;
}

.text-blue {
   color: #385984;
}

.about p {
   text-align: justify;
   text-indent: 2rem;
   padding: 1rem 0;
   line-height: 1.3;
}

.about h2,
.rule h2 {
   text-align: center;
}

.rule ul {
   list-style: disc;
   padding-left: 1rem;
}
.rule ul > li {
   text-align: justify;
   padding: 1rem 0;
}
.rule ol {
   padding-top: 2rem;
}
.rule ol > li {
   padding: 1rem 0;
   margin-left: 2rem;
}

/* FOOTER  */

.pageInfor-section-footer {
   margin-bottom: 3rem;
}

.pageInfor-section-footer h2 {
   text-align: center;
   font-size: 2rem;
}

.footer-img {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3rem;
   flex-wrap: wrap;
}

.organization img {
   width: 100px;
   height: 50px;
}

/* MENU  */
.menu {
   height: 100%;
   display: none;
   position: absolute;
   top: 1rem;
   right: 0;
   z-index: 9999;
   flex-direction: row-reverse;
   align-items: flex-start;
   justify-content: center;
}
.navbar-mobile {
   display: none;
   flex-direction: column;
   justify-content: center;
   background-color: #385984;
   padding: 1rem 2rem;
   border-radius: 3px;
}
.link-mobile {
   padding: 1rem;
}
.link-mobile a {
   color: #edf0f2;
}

#checkbox-menu {
   position: absolute;
   opacity: 0;
}

label {
   cursor: pointer;
   position: relative;
   display: block;
   height: 22px;
   width: 30px;
}

label span {
   position: absolute;
   display: block;
   height: 3px;
   width: 100%;
   border-radius: 30px;
   background: #ffc107;
   transition: 0.25s ease-in-out;
}

label span:nth-child(1) {
   top: 0;
}

label span:nth-child(2) {
   top: 8px;
}

label span:nth-child(3) {
   top: 16px;
}

#checkbox-menu:checked + label span:nth-child(1) {
   transform: rotate(-45deg);
   top: 8px;
}

#checkbox-menu:checked + label span:nth-child(2) {
   opacity: 0;
}

#checkbox-menu:checked + label span:nth-child(3) {
   transform: rotate(45deg);
   top: 8px;
}

#checkbox-menu:checked + label + .navbar-mobile {
   display: flex;
}

/* MEDIA  */

@media screen and (max-width: 1200px) {
   html {
      font-size: 93.75%;
   }
   .container-calendar {
      display: flex;
      width: 100%;
   }
}

@media screen and (max-width: 1000px) {
   .container-calendar {
      justify-content: center;
      padding: 0 20px;
   }
}

@media screen and (max-width: 992px) {
   html {
      font-size: 87.5%;
      /* width: 100vw;
    overflow-x: hidden; */
   }

   .pageInfor-section-event {
      flex-wrap: wrap;
      justify-content: center;
   }
   .pageInfor-code-evironment,
   .pageInfor-scheldule {
      max-width: 45rem;
   }

   .pageInfor-map-place {
      flex-direction: column-reverse;
      gap: 3rem;
   }
   .cards {
      display: flex;
      justify-content: start;
      align-items: stretch;
      gap: 1rem;
   }

   .pageInfor-address,
   .pageInfor-contact {
      padding: 1rem;
      margin: 0;
      border-radius: 10px;
   }

   .pageInfor-map {
      width: 100%;
   }
   #gmap_canvas {
      width: 100%;
      height: 300px;
   }

   .navbar {
      gap: 1rem;
   }
}

@media screen and (max-width: 768px) {
   .contain {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
   }
   .pageInfor-header-contain {
      gap: 0.5rem;
   }

   .menu {
      display: flex;
   }
   .navbar {
      display: none;
   }
}

@media screen and (max-width: 576px) {
   #address,
   #about {
      min-height: 100vh;
   }
   .cards {
      flex-direction: column;
   }
   .pageInfor-divisor {
      min-width: 0.6rem;
   }
   .pageInfor-divisor::after {
      left: -23px;
   }

   #gmap_canvas {
      width: 100%;
      height: 300px;
   }

   .pageInfor-hour-col-1::after {
      border-top: 0.6rem solid #131f2e;
      border-left: 40px solid #131f2e;
   }
   .pageInfor-hour-col-2::before {
      border-top: 0.6rem solid #131f2e;
      border-left: 40px solid #131f2e;
   }

   .pageInfor-section-place {
      margin-bottom: 0;
   }
   .pageInfor-map-place {
      margin-top: 0;
      margin-bottom: 0;
   }
}