@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Prompt:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
body {
  /* background-color: rgb(235, 224, 224)!important; */
  background-color: rgb(38, 152, 138)!important;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Prompt', sans-serif;
}
p {
    font-family: 'Prompt', sans-serif;
    text-decoration: none;
}
a {
    text-decoration: none;
}
.logo_group {
  max-width: 70%;
  display: block;
  margin: auto;
  margin-bottom: 2rem;
  /* opacity: 0.7; */
}
.row {
  /* background-color: rgb(235, 224, 224,0.7)!important; */
  background-color: rgba(255, 255, 255, 0.7)!important;
  backdrop-filter: blur(10px);
  -webkit-overflow-scrolling: touch;
}
.image_profile {
    max-width: 20%;
    border-radius:  50%;
    border: solid 2px rgb(215, 156, 57, 0.3);
    background: linear-gradient(to right, #fff 20%, #f0c67d 40%, #d79c39 50%, #bf8c32 55%, #f0c67d 70%, #fff 100%);
    background-size: 200% auto;
    animation: shine 5s linear infinite;
}
@keyframes shine {
  to {
    background-position: 200% center;
  }
}
.content {
  display: block;
  margin: auto;
}
.content h6 {
    /* letter-spacing: 2px; */
    /* font-weight: bold; */
}
.icon {
    max-width: 5%;
    margin: 0 2rem 0 2rem;
}
.contact {
  width: 70%;
  display: block;
  margin: auto;
}
.col_content {
    text-align: start;
    display: flex;
    margin: 1rem;
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 0.7)!important;
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.col_content:hover {
    animation-duration: 0.25s;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.dots_header {
  max-width: 4%;
  cursor:pointer;
}

.dots {
  cursor:pointer;
  position: absolute;
  right: 5%;
}
.dots:hover {
  max-width: 6%;
  transition: 1ms linear;
}

li a {
    text-decoration: none;
    color: #2d2f31;
    text-align: start;
  }
  
  nav {
    margin-right: 10%;
    text-align: right;
    cursor: pointer;
  }
  nav i {
    padding: 2rem; 
 }
  
  .slide {
    clear: both;
    width: 100%;
    height: 0px;
    overflow: hidden;
    text-align: right;
    transition: height 0.4s ease;
  }
  
  .slide li {
    padding: 5px;
    list-style: none;
    color: #006c68;
  }
  .slide a {
    padding: 5px;
  }
  
  #touch {
    position: absolute;
    opacity: 0;
    height: 0px;
  }
  
  #touch:checked + .slide {
    height: 100px;
  }
  /*---- Model ----*/
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border-radius: 0.5rem;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: #006c68;
  float: right;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 1rem;
  color: #fff;
  border-radius: 0.5rem 0.5rem 0 0;
}

.modal-body {
  width: 50%;
  display: block;
  margin: auto;
  padding: 1rem;
}
.modal-body img {
  text-align: center;
}
.modal-body p {
  margin-left: 1rem;
}
.footer {
  margin-bottom: 2rem;
}

/*--- accordion --*/


  /*-------------  @media  -----------------*/
  @media only screen and (max-width: 800px) {
    .image_profile {
        max-width: 30%;
    }
    .contact {
      width: 100%;
    }
    .icon {
        max-width: 7%;
        margin: 0 1rem 0 1rem;
    }
    .col_content span {
      margin-left: 40%;
    }
    .modal-content {
      width: 100%;
      padding: 1rem;
    }
    .modal-body {
      width: 70%;
    }
  }