@import url('https://fonts.googleapis.com/css2?family=Montserrat: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');
@import url('https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css');

* {
   font-family: Montserrat, sans-serif;
   margin: 0;
   padding: 0;
}

body {
   background-color: #FAFAFA;
   color: #1b1b1b;
}
.container-index {
   width: 100%;
   height: 90vh;
 }

.wrapper-menu {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   width: 100%;
}

.wrapper-menu .wrapper-left {
   width: 50%;
}

.wrapper-menu .wrapper-right {
   width: 49%;
}

.wrapper-left .title span {
   color: #00293F;
   font-weight: 700;
   text-shadow: 1px 2px 4px #37373782;
}

.wrapper-right .menu {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.wrapper-right .menu span {
   margin-left: 45px;
   margin-right: 45px;
   color: #00293F;
   font-size: 16px;
   font-weight: 600;
   text-shadow: 1px 2px 4px #37373782;
   cursor: pointer;
}

.container-index .content-info {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   width: 100%;
}

.content-info .img-index {
   width: 70%;
}

.content-info .img-index img{
   width: 100%;
}

.content-info .title-info {
   position: absolute;
   top: -10px;
   color: #00293F;
   font-weight: 600;
   text-shadow: 1px 2px 4px #37373782;

}  

.content-info .name-info {
   color: #00293F;
   font-weight: 600;
   text-shadow: 1px 2px 4px #37373782; 
}  

.content-info .info-1 {
   font-weight: 300;
}

.content-info .info-1 p {
   width: 100%;
}

.content-info .info-2 {
   font-weight: 300;
}

.content-info .info-2 p {
   width: 100%;
}

.content-info .info-3 {
   position: absolute;
   font-weight: 300;
}

.content-info .info-3 ul {
   margin-left: 25px;
   list-style-type: circle;
}

.content-info .info-4 {
   position: absolute;
   font-weight: 300;
}

.content-info .info-4 ul {
   margin-left: 25px;
   list-style-type: circle;
}

.kt-selector {
   position: absolute;
   width: 100%;
   background-color: #00293F;
   bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
}


 /* para desktop */
 @media (min-width: 1450px) {
   .content-info .img-index-mobile {
      display: none;
   }

   .wrapper-right .menu-mobile {
      display: none;
   }

   .wrapper-menu {
      margin-top: 25px;
   }

   .wrapper-left .title {
      margin-left: 100px;
   }
   
   .wrapper-left .title span {
      font-size: 40px;
   }

   .container-index .content-info {
      margin-top: 40px;
   }
   .content-info .info-1 {
      position: absolute;
      left: 224px;
      top: 37px;
      width: 12%;
      font-size: 12px;
   }
   .content-info .info-2 {
      position: absolute;
      right: 197px;
      top: -8px;
      width: 12%;
      font-size: 12px;
   }

   .content-info .info-3 {
      left: 199px;
      top: 248px;
      width: 30%;
      font-size: 12px;
   }
   .content-info .info-4 {
      right: 43px;
      top: 221px;
      width: 12%;
      font-size: 12px;
   }
   .content-info .title-info {
      font-size: 25px;  
   }
   .content-info .name-info {
      position: absolute;
      font-size: 25px;
      top: 335px;
   }  

   .content-info .img-index {
      margin-right: 143px;
   }


   .kt-selector {
      height: 23%;
   }
}

  /* para talet */
@media (min-width: 768px) and (max-width: 1450px) {

}

/* para mobile */
@media (max-width: 500px) {
   .content-info .img-index {
      display: none;
   }
   .wrapper-right .menu {
      display: none;
   }

   .wrapper-menu {
      margin-top: 25px;
   }
   
   .wrapper-left .title {
      margin-left: 40px;
   }
   
   .wrapper-left .title span {
      font-size: 20px;
   }

   .wrapper-right .menu-mobile {
      float: right;
      margin-right: 34px;
      font-size: 18px;
   }
   .wrapper-right .menu-mobile i {
      cursor: pointer;
   }

   .content-info .img-index-mobile {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 35px;
   }
   .content-info .img-index-mobile img {
      width: 40%;
   }

   .container-index .content-info {
      margin-top: 50px;
   }
   .content-info .info-1 {
      width: 75%;
      margin-top: 25px;
      font-size: 12px;
      text-align: justify;
   }
   .content-info .info-2 {
      width: 75%;
      margin-top: 20px;
      font-size: 12px;
      text-align: justify;
   }
   .content-info .info-3 {
      display: none;
   }
   .content-info .info-4 {
      display: none;
   }
   .content-info .title-info {
      width: 80%;
      font-size: 16px;
      text-align: center;
   }
   .content-info .name-info {
      width: 80%;
      margin-top: 25px;
      font-size: 16px;
      text-align: center;
   }  

   .kt-selector {
      height: 20%;
   }
}