body {
    margin: 0 !important;
    padding: 0;
    background-color: #f6f9fc;
    font-family: 'PT Sans', sans-serif;
  }
  table {
    border-spacing: 0;
  }
  td {
    padding: 0;
  }
  img {
    border: 0;
  }
  div[style*="margin: 16px 0"] {
    margin: 0 !important;
  }
  
  h1 {
    font-family: 'Ubuntu', sans-serif;
    color: white;
    font-size: 52px;
    text-align: center;
    padding: 20px 0;
  }
  h2{
    color: black;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0px;
    padding: 10px 0;
}
  p {
    color: rgb(114, 111, 111);
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    font-weight: 400;
    padding: 10px 0;
    margin: 0;
}
hr{
    color: #e2e3e4;
    border-top: 4px solid #e2e3e4;
  }
  /*  */
.wrapper {
    width: 100%;
    table-layout: fixed;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  .webkit {
    max-width: 800px;
    margin: 0 auto;
  }
  .outer {
    margin: 0 auto;
    width: 100%;
    background-color: #ffffff;
  }
   /* header */
   header{
    width: 100%;
    text-align: center;
    color: #ffffff;
}
   .elena {
    font-size: 52px;
    font-family: 'Great Vibes', cursive;
    color: white;
  }
  nav ul {
    display: flex;
    justify-content: center;
  }

  ul li {
    list-style-type: none;
  }

  li a {
    text-decoration: none;
    color: #ffffff;
    padding-right: 13px;
    font-family: 'PT Sans', sans-serif;
  }

  ul li {
    list-style-type: none;
  }
  .line {
    margin:0 0 1em;
    line-height:2em;
    padding:0;
    position:relative;
    overflow:hidden;
    text-align:center;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
}
.line:before,.line:after {
    content:" ";
    position:absolute;
    top:50%;
    margin-left:-120px;
    height:2px;
    width:100px;
    border-top:1px solid #ffffff;
}
.line:after {
    left:auto;
    width:100px;
    margin:0 0 0 1em;
}
  .home-button {
    background-color: #50c3af;
    color: white;
    font-weight: 600;
    height: 40px;
    padding: 10px 40px;
    margin: 50px 0 80px 0;
    border-radius: 20px;
    text-align: center;
    border-color: transparent;
    cursor: pointer;
  }
  .home-button:hover {
    background-color:#a0dfd4;
  }
  /* profesionals */
  .profesionals .three-column{
    display:flex;
    gap:30px;
  }
  /* responsive */
  .read-more-button{
    background-color: #50c3af;
    color: white;
    height: 40px;
    border-radius: 20px;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
    border-color: transparent;
    cursor: pointer;
    padding: 5px 20px;
    }
    .read-more-button:hover {
    background-color: #a0dfd4;
    }
     /* support */
     .support{
        display: flex;
        justify-content: center;
    }
    .support .float{
       float: left;
       margin: 0;
       width: 50px;
    }
    .support img{
        width: 10%;
    }
    .readmore-button {
        background-color: #d2d5da;
        color: white;
        height: 40px;
        border-radius: 20px;
        align-items: center;
        text-align: center;
        border-color: transparent;
        cursor: pointer;
        padding: 5px 20px;
        margin: 20px 0;
      }
      .readmore-button:hover {
        background-color: #bbbdc2;
      }
       /* layer-types */
       .check-this-out{
        color: #50c3af;
        background-color: transparent;
        text-decoration: none;
        font-weight: 500;
    }
    .check-this-out:hover {
        color: #a0dfd4;
        background-color: transparent;
        text-decoration: underline;
    }
    .themeforest{
      padding:30px;
      background-color: #f5f5f5;
  }
  .themeforest .column{
      width: 100%;
      max-width:350px;
      display: inline-block;
      vertical-align: top; 
  }
     /* footer */
     .footer{
      padding:10px;
      text-align: center;
      
      
  }
  .footer .column{
      width: 100%;
      max-width:130px;
      display: inline-block;
      font-size: 19px;
  }

     .underline-text{
      position:relative;
      padding-bottom:5px;
      display:inline-block;
 }

 .underline-text::after{
      position: absolute;
      bottom: 0px;
      content: " ";
      width:90%;
      background:rgb(240, 236, 236);
      height:2px;
      left:1%;
      right:10%;
 }
 
 /* footer banner */
 .footer-banner{
  background-color: #f5f5f5;
  padding: 20px;
}

.footer-text{
  color: #787b80;
  text-align: center;
  padding-right: 10px;
}
.fa-brands{
  color: #787b80;
}
    
    /* One column layout */
    .one-column {
        padding: 20px;
        display: flex;
    }
    .one-column .contents {
        text-align: left;
    }
    .one-column div{
        width: 100%;
    }
    .one-column img{
        display: block;
        width: 80%;
        margin: 0px auto;
    }

   /*Two column layout*/
   .two-column {
    justify-content: center;
    text-align: center;
    padding:20px;
    overflow: hidden;
    gap: 30px;
}

.two-column .column {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 20px;
}

.two-column .contents {
    font-size: 14px;
    text-align: left;
}
.two-column img {
    width: 100%;
    height: auto;
}
.two-column .text {
    padding-top: 10px;
}
    /* three column */
    .three-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        overflow: hidden;
        gap: 30px;
        
      }
      .three-column .column {
        width: 100%;
        display: inline-block;
        vertical-align: top;
      }
      .three-column img {
        width: 100%;
        height: auto;
      }
       /* Media Queries*/
       @media screen and (min-width: 800px){
        h1{
            font-size: 50px;
        }
        .three-column{
            flex-direction: row;
            justify-content: center;
            padding: 20px;
        }
        .three-column .column{
            max-width: 200px;
        }
        .three-column p{
            padding: 20px 0;
        }
        
        .themeforest .one-column{
          display: flex;
      }
        
      
     }
     @media screen and (min-width:768px) {
        .three-column{
            flex-direction: row;
            justify-content: center;
        }
        .profesionals .three-column{
          flex-direction: row;
        }
        /* two column */
        .two-column{
            display: flex;
            padding: 30px 70px;
        }
        .themeforest .one-column{
          display: flex;
          flex-direction: row;
      }
      .support .one-column{
        padding: 30px 70px;
      }
     
     }
     @media screen and (min-width:300px) {
      header ul{
          flex-direction: row;
      }
      
      footer div ul{
          flex-direction: row;
      }  
      .footer-banner .div{
          width: 50%;
      } 
      .footer-banner .footer-icon{
        float: right;
    } 
   }