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

/* PHOSPhOR ICONS  */
.ph-users-three,
.ph-clipboard-text,
.ph-check-circle,
.ph-coffee {
   font-size: 4rem;
}

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

.ph-map-pin,
.ph-buildings,
.ph-tray,
.ph-phone,
.ph-browser,
.ph-envelope-simple,
.ph-calendar-check {
   font-size: 24px;
   color: #385984;
}

.ph-play-circle,
.ph-fire,
.ph-bell-ringing,
.ph-code,
.ph-flag {
   font-size: 40px;
   color: #fff;
}
/* ################### */
.section-header {
   min-height: 800px;
   background-image: url("../img/rocket-1.svg"), url("../img/background.svg");
   background-size: contain, cover;
   background-repeat: no-repeat, no-repeat;
   background-position: bottom right, bottom right;
   background-clip: border-box;
   overflow: hidden;

   margin-bottom: -1%;
}

.logoFap {
   padding: 1rem 1rem;
}
.logoFap img {
   width: 9rem;
}

.holder {
   max-width: 28rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   z-index: 1;
   position: relative;
   margin: 5rem 5rem 5rem 6rem;
}

.holder::after {
   position: absolute;
   top: -90px;
   content: "";
   width: 580px;
   height: 550px;
   background-image: url("../img/polygon.svg");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}

.logoSBC img {
   width: 11rem;
}

.more {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 1;
}

.date-and-address {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 0.3rem;
   margin: 1.5rem 0;
   font-size: 1rem;
}

.date-and-address > div {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
}

.date-and-address p,
.date-and-address a {
   width: 100%;
}

.text-purple {
   color: #7e57c2;
   font-weight: 700;
}

.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:hover {
   filter: brightness(0.9);
   transition: 0.2s;
}

.btn-more {
   margin: 1.5rem 0;
}

.social-media {
   display: flex;
   align-items: center;
   gap: 1rem;
}
.social-media a img {
   width: 32px;
}

.text-blue {
   color: #385984;
}

/* ######################## */

/* SEÇAO TIMELINE */

.section-timeline {
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      linear-gradient(180deg, #385984 70%, #385984 20%);
}

.steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   padding-top: 1.8rem;
   gap: 3rem;
}

.steps li {
   text-align: center;
   color: #fff;
}

.steps li p {
   padding: 1.5rem 0;
}

.scheldule {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-top: 4rem;
}

.scheldule h2 {
   font-size: 2rem;
   font-weight: 700;
   color: #fff;
}

.scheldule-items {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-top: 3.5rem;
   font-weight: 600;
}

.contain-time {
   width: 430px;
   display: flex;
   align-items: center;
   gap: 1rem;
}

.container-left {
   display: inline-block;
}

.item1,
.item5 {
   align-self: flex-end;
   margin-right: 3.9rem;
}

.item2,
.item3 {
   align-self: flex-start;
   padding: 4rem 1rem 4rem 0;
   border-right: 1px solid #fafcff;
   box-sizing: border-box;
}

.item4 {
   padding-left: 1rem;
}

.item4.pr{
        display:none;
    }

.row-02 {
   display: flex;
   align-items: center;
   padding: 0.5rem 0;
}

.time {
   width: 120px;
   height: 120px;
   padding: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   color: #fff;
   font-size: 1rem;
   font-weight: 700;
}

.hour-09,
.hour-10,
.hour-12,
.hour-13,
.hour-14,
.hour-15,
.hour-20 {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   text-align: center;
}

.hour-09 {
   background-image: url("../img/times/time_9.svg");
}
.hour-10 {
   background-image: url("../img/times/time_10.svg");
}
.hour-12 {
   background-image: url("../img/times/time_12.svg");
}
.hour-13 {
   background-image: url("../img/times/time_13.svg");
}
.hour-14 {
   background-image: url("../img/times/time_14.svg");
}
.hour-15{
   background-image: url("../img/times/time_15.svg");
}
.hour-20 {
   background-image: url("../img/times/time_20.svg");
}

.start,
.warm-up,
.competition,
.lunch,
.closing {
   display: flex;
   align-items: stretch;
}

.start i,
.lunch i,
.closing i,
.warm-up i,
.competition i {
   background: #7e57c2;

   padding: 10px;
}

.start i,
.lunch i,
.closing i {
   border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
}

.warm-up i,
.competition i {
   border-bottom-right-radius: 5px;
   border-top-right-radius: 5px;
}

.start span,
.lunch span,
.closing span,
.warm-up span,
.competition span {
   display: flex;
   align-items: center;
   background-color: #fff;
   width: 100%;
   padding: 1rem;
}

.start span,
.lunch span,
.closing span {
   border-bottom-right-radius: 5px;
   border-top-right-radius: 5px;
}

.warm-up span,
.competition span {
   border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
}

.timeline {
   display: none;
}

/* ############################## */

/* SECTION PLACE */

.section-place {
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      linear-gradient(180deg, #385984 5%, #7e57c2 99.58%);
   padding-bottom: 40px;
}

.contain-place {
   padding-top: 3.75rem;
}

.contain-place h2 {
   font-size: 2rem;
   font-weight: 700;
   text-align: center;
   color: #fff;
}

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

.cards-contact {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   line-height: 1.8;
}

.address,
.contact {
   padding: 1.5rem 3rem 1.5rem 1.5rem;
   border-radius: 10px;

   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;

   background-color: #fff;
   color: black;
}

.sub-address {
   display: flex;
   /* flex-direction: row; */
   gap: 0.6rem;
}

.cards-contact p {
   line-height: 1.8;
}

/* mapa */

.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;
}

.sponsorship {
   display: flex;
   gap: 1.1rem;
   justify-content: space-around;
   margin-top: 3rem;
   padding: 1.5rem;
   align-items: center;
   background: #ffffff;
   border-radius: 20px;
   flex-wrap: wrap;
}

.sponsorship img {
   max-width: 100px;
}

.sponsorship .tips-color img {
   filter: contrast(1.5) brightness(50%);
}

.shape-fill {
   fill: hsl(261, 37%, 44%);
}

/* ############################# */

/* SECTION FOOTER  */

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

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

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

/* MEDIA  */
@media screen and (max-width: 1200px) {
   html {
      font-size: 93.75%;
   }

   .section-header {
      min-height: calc(60vh + 80px);
      background-image: url("/assets/img/background-responsive-home.svg");
      background-size: contain, cover;
      background-repeat: no-repeat, no-repeat;
      background-position: bottom right, bottom right;
      background-clip: border-box;
      overflow: hidden;
      margin-bottom: -1%;
      width: 100%;
   }
   .container-header {
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .holder {
      margin: 5rem 0 8rem;
   }
   .holder::after {
      top: -70px;
      width: 535px;
      height: 510px;
   }
   .contain-time {
      width: 400px;
   }
}

@media screen and (max-width: 992px) {
   html {
      font-size: 87.5%;
   }
   /* SECTION PLACE */
   .holder::after {
      top: -70px;
      width: 545px;
      height: 520px;
   }
   .contain-time {
      width: 330px;
   }
   .item1,
   .item5 {
      align-self: flex-end;
      margin-right: 3.3rem;
   }
   .start,
   .warm-up,
   .competition,
   .lunch,
   .closing {
      width: 15rem;
   }

   .hour-09,
   .hour-10,
   .hour-12,
   .hour-13,
   .hour-14,
   .hour-15,
   .hour-20 {
      font-size: 1rem;
      width: 90px;
      height: 90px;
   }

   .start i,
   .lunch i,
   .closing i,
   .warm-up i,
   .competition i {
      padding: 5px 5px;
   }
   .start span,
   .lunch span,
   .closing span,
   .warm-up span,
   .competition span {
      padding: 0.75rem;
   }

   /*====FOOTER====*/
}

@media screen and (max-width: 940px) {
   .holder {
      max-width: 24rem;
   }

   .date-and-address {
      margin: 1rem 0;
   }

   #btn-more {
      margin-top: 4rem;
   }
   .holder::after {
      top: -70px;
      width: 535px;
      height: 510px;
   }

   .steps {
      grid-template-columns: repeat(2, 1fr);
   }

   .steps li {
      text-align: center;
      color: #fff;

      width: 307px;
      max-height: 325px;

      margin-top: 3rem;
      padding-top: 1rem;

      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
      backdrop-filter: blur(13.5px);
      -webkit-backdrop-filter: blur(13.5px);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.116);
      justify-self: center;
   }

   .steps h3,
   .steps p {
      max-width: 280px;
      margin-inline: 10%;
   }

   .map-place {
      gap: 2rem;
   }
}

@media screen and (max-width: 809px) {
   .contain-time {
      width: 300px;
   }
   .item1,
   .item5 {
      align-self: flex-end;
      margin-right: 2.8rem;
   }

   .hour-09,
   .hour-10,
   .hour-12,
   .hour-13,
   .hour-14,
   .hour-15,
   .hour-20 {
      font-size: 0.875rem;
      width: 80px;
      height: 80px;
   }

   .map-place {
      display: flex;
      flex-direction: column;

      justify-content: center;
   }

   .map {
      width: 100%;
   }

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

   .cards-contact {
      flex-direction: row;
      justify-content: flex-start;
      gap: 1rem;
   }
}

@media screen and (max-width: 768px) {
   .contain {
      padding-left: 2rem;
      padding-right: 2rem;
   }
   .holder::after {
      width: 100px;
   }

   .holder p {
      max-width: 100%;
   }
   .steps {
      display: flex;
      flex-direction: column;
      grid-template-columns: repeat(4, 1fr);
      padding-top: 1.8rem;
      gap: 3rem;

      justify-content: center;
      align-items: center;
   }
}
@media screen and (max-width: 760px) {
   .contain-time {
      width: 250px;
      gap: 0.3rem;
   }
   .item1,
   .item5 {
      align-self: flex-end;
      margin-right: 2.5rem;
   }

   .hour-09,
   .hour-10,
   .hour-12,
   .hour-13,
   .hour-14,
   .hour-15,
   .hour-20 {
      font-size: 0.75rem;
      width: 70px;
      height: 70px;
   }
}

@media screen and (max-width: 576px) {
   .contain {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
   }
   

   .contain-place h2,
   .section-footer h2 {
      font-size: 1.5rem;
   }
   
   
   .row-02 {
   display: block;
}

    /*.contain-time{*/
    /*    width:max-content;*/
    /*}*/
    
    .item2, .item3{
        border-right:none;
    }
    
    .item4.pr{
        display:flex;
    }
    
    .item4.sd{
        display:none;
    }
   
   .item5{
       padding-bottom:20px;
   }
   
   
   .scheldule h2{
       font-size:1.5rem;
   }
   
   .timeline {
      display: none;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-top: 3.75rem;
   }

   .timeline h2 {
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
      color: #fff;
      padding-bottom: 3.75rem;
   }
   .timeline img {
      height: 100%;
      width: 100%;

      transition: ease, all 0.5;
   }

   .cards-contact {
      flex-direction: column;
      gap: 1rem;
   }
   .date-and-address {
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
   }

   .address,
   .contact {
      padding: 1.5rem;
   }

   .holder {
      margin: 6rem 0 5rem;
   }
   .holder p {
      text-align: justify;
   }

   .holder::after {
      height: 535px;
   }

   .steps li {
      width: 280px;
   }
}