@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;1,200&family=Raleway:ital,wght@0,100;0,200;0,300;&display=swap');
*{
    margin: 0%;
    padding: 0%;
    font-family: 'Kanit', sans-serif;
    font-family: 'Raleway', sans-serif;
}
a{
    text-decoration: none;
}
:root{
--color-black:black;
--color-purple-light: rgba(158, 42, 158, 0.641);
--color-lightseagreen :lightseagreen;
--color2-lightseagreen :rgb(63, 201, 171);
--color-white : white;
--color-black-light :rgba(0, 0, 0, 0.26) ;
--color-g:rgba(255, 255, 255, 0.379);
 }
.font{
    display: flex;
    justify-content: space-between;
    padding: 10px 100px;
    font-size: 20px;
}
.font a{
  cursor: pointer;
  color: var(--color-black);
  transition: 0.1s;
}
.font a:hover{
  color: var(--color-lightseagreen);
  padding: 0px;
}

.left-font i{
   padding: 0px 5px;
   transition: 0.3s;
}

.right-font i{
    padding: 0px 5px;
    transition: 0.3s;
 }
 header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 50px;
}

.logo {
  color: var(--black);
  font-size: 35px;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
}

.logo:hover {
  padding: 0px;
}

.navbar a {
  position: relative;
  padding: 0px 20px;
  color: var(--color-black) ;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 20px;
  letter-spacing: 0.5px;
  transition: 0.9s;
}
.navbar a:hover{
  padding: 0px 20px;

}
.navbar a:hover,
.navbar a.active {
  color: var(--color2-lightseagreen);
}
.navbar a::after {
  content: '';
  position: absolute;
  width: 62%;
  transform: scaleX(0);
  height: 2px;
  top: 30px;
  left: 20px;
  background-color: var(--color2-lightseagreen);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.navbar a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.hamburger {
  display: none;
  height: fit-content;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;
  transition: 0.2s;
}
.hamburger div {
  width: 30px;
  height: 2px;
  margin: 6px 0px;
  background: var(--color-black)
}
    .bg-image , .bg-image img , .bg-color {
        height: 450px;
        border-radius: 10px;
    }
    .bg-image{
        margin:  50px 20px ;
        width: 97%;    
    }
    .bg-image img{
        width:100% ;
    }
    .bg-color{
        background-color: rgba(0, 0, 7, 0.597);
        position: absolute;
        top: 153px;
        width: 97%;
    }
    .bg-color .text{
        /* position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%); */
        text-align: center;
        margin-top: 170px;
    }
    .text h1 {
        color: var(--color-white);
        font-size: 50px;
    }
    .text p{
        color:var(--color2-lightseagreen) ;
        font-size: 15px;
        margin-top: 15px;
        font-style: oblique;
    }
    .text  h1,  p{
        cursor: grab;
        font-weight: bold;
    }
    .services{
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .services .text2{
        width: 50%;
    }
    .text2 h2 , .virtual-assistant h2{
        font-size: 30px;
        font-weight: bold;
        margin-top: 25px;
    }
    .text2 p , .virtual-assistant p{
        margin-top: 15px;
        font-size: 18px;
        text-align: justify;
        font-style: italic;
        font-weight: 100;
        width: 80%;
    }
    .services .img img{
        position: relative;
        left: 15px;
    }
    .virtual-assistant{
       margin: 120px 65px;
    }
    .virtual-assistant h2{
        margin-top: 100px;
    }
    .last-data{
        margin-top: 100px;
    }
    .last-data h2{
        text-align: center;
    }
    .last-data .all-card{
    display: flex;
    justify-content: space-around;
    margin-top: 120px;
    }
    .card{
        width: 28%;
        background-color: rgba(255, 255, 255, 0.563);
        box-shadow: 05px 05px 10px rgba(0, 0, 0, 0.5);
        padding: 40px 20px;
        border-radius: 15px;
        margin-left: 10px;
    }
    .card h3{
        letter-spacing: 1px;
        font-weight: 800;
    }
    .card p{
     font-size: 20px;
     text-align: justify;
     font-style: italic;
     font-weight: lighter;
     width: 90%;
     margin-top: 15px;
    }
    .footer{
        top: 100px !important;
        position: relative !important;
    }
    .footer-distributed{
        background: var(--color-black-light);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
        width: 100%;
        text-align: left;
        font: bold 16px sans-serif;
        padding: 55px 50px;
    }
    
    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right{
        display: inline-block;
        vertical-align: top;
    }
    
    /* Footer left */
    
    .footer-distributed .footer-left{
        width: 40%;
    }
    
    /* The company logo */
    
    .footer-distributed h3{
        color:  var(--black);
        font: normal 36px 'Open Sans', cursive;
        margin: 0;
    }
    
    .footer-distributed h3 span{
        color:  var(--color-lightseagreen);
    }
    
    /* Footer links */
    
    .footer-distributed .footer-links{
        color:  var(--color-purple-light);
        margin: 20px 0 12px;
        padding: 0;
    }
    .footer-distributed .footer-links a{
        display:inline-block;
        line-height: 1.8;
      font-weight:400;
        text-decoration: none;
        color:  inherit;
      transition: 0.5s;
    }
    
    .footer-distributed .footer-company-name{
        color: var(--color-black-mid);
        font-size: 14px;
        font-weight: normal;
        margin: 0;
    }
    
    /* Footer Center */
    
    .footer-distributed .footer-center{
        width: 35%;
    }
    
    .footer-distributed .footer-center i{
        background-color:  #33383b;
        color: var(--color-white);
        font-size: 25px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        text-align: center;
        line-height: 42px;
        margin: 10px 15px;
        vertical-align: middle;
    }
    
    .footer-distributed .footer-center i.fa-envelope{
        font-size: 17px;
        line-height: 38px;
    }
    
    .footer-distributed .footer-center p{
        display: inline-block;
        color: var(--black);
      font-weight:400;
        vertical-align: middle;
        margin:0;
      transition: 0.5s;
    }
   
  
    .footer-center p , 
    span ,
     a{
    cursor: grab;
    }
    
    
    .footer-distributed .footer-center p span{
        display:block;
        font-weight: normal;
        font-size:14px;
        line-height:2;
    }
    
    .footer-distributed .footer-center p a{
        color:  var(--black);
        text-decoration: none;;
    }
    
    .footer-distributed .footer-links a:before {
      content: "|";
      font-weight:300;
      font-size: 20px;
      left: 0;
      color: var(--black);
      display: inline-block;
      padding-right: 5px;
    }
    
    .footer-distributed .footer-links .link-1:before {
      content: none;
    }
    
    /* Footer Right */
    
    .footer-distributed .footer-right{
        width: 20%;
    }
    
    .footer-distributed .footer-company-about{
        line-height: 20px;
        color:var(--black);
        font-size: 13px;
        font-weight: normal;
        margin: 0;
    }
    
    .footer-distributed .footer-company-about span{
        display: block;
        color:  rgba(0, 0, 0, 0.973);
        font-size: 16px;
        font-weight: bold;
      text-transform: capitalize;
        margin-bottom: 20px;
    }
    .footer-distributed .footer-company-about .next{
    text-transform: uppercase;
    }
    .footer-distributed .footer-company-about a{
      position: relative;
      left: 35px;
      color:var(--color-purple-light);
      font-size: 15px;
    }
    .footer-distributed .footer-icons{
        margin-top: 25px;
    }
    
    .footer-distributed .footer-icons a{
        display: inline-block;
        width: 35px;
        height: 35px;
        cursor: pointer;
        background-color:  #33383b;
        border-radius: 2px;
        font-size: 20px;
        color: var(--color-white);
        text-align: center;
        line-height: 35px;
        margin-right: 3px;
        margin-bottom: 5px;
    }
    @media only screen and (max-width: 992px) {
        .header {
          padding: 0px 25px;
      }
      .hamburger {
          display: block;
          position: fixed;
          top: 45px;
          right: 30px;
      }
      
      #nav_check:checked~nav {
          left: 0;
      }
      
      .logo {
         position: relative;
          top: 05px;
          font-size: 25px;
      }
      
      .navbar {
          width: 120px;
          height: 500px;
          position: fixed;
          left: -350px;
          top: 100px;
          background: rgba(0, 0, 0, 0.664);
          transition: 0.2s;
          box-shadow: 2px 0px 20px 0px rgba(9, 0, 0, 0.5);
          display: block;
          justify-content: center;
          align-items: center;
          z-index: 1;
      }
      .navbar a {
          line-height: 65px;
          padding: 0px 0px 0px 10px;
          font-size: 17px;
          color: var(--color-white);
      }
      
      .navbar a::after {
          top: 30px;
          width: 50%;
          left: 10px;
      }
   .navbar a:hover{
    padding-left: 10px;
   }
      .navbar a:hover::after {
          transform: scaleX(1.5);
      }
      .bg-image{
        margin:  50px 06px ;
    }
      .bg-color{
        top: 122px;
    }
    .text h1 {
        font-size: 37px;
    }
    .text p{
        font-size: 13px;
    }
     .services .text2{
        width: 40%;
    }
     .text2 h2{
        font-size: 25px;
    }
    .text2 p{
        font-size: 14px;
    }
    .services .img img{
        left: 07.5px;
    } 
    .card{
        width: 30%;
        background-color: rgba(255, 255, 255, 0.563);
        box-shadow: 05px 05px 10px rgba(0, 0, 0, 0.5);
        padding: 40px 10px;
        border-radius: 15px;
        margin-left: 10px;
        cursor: all-scroll;
    }
    .last-data .all-card{
        display: flex;
        justify-content: center;
     }
     .card h3{
        font-size: 17px;
        letter-spacing: 0px;
     }
     .card p{
        font-size: 16px;
        width: 100%;
     }
    }
    @media      (max-width: 880px) {
          .footer-distributed .footer-left,
          .footer-distributed .footer-center,
          .footer-distributed .footer-right{
              display: block;
              width: 100%;
              margin-bottom: 40px;
              text-align: center;
          }
      
          .footer-distributed .footer-center i{
              margin-left: 0;
          }
      
      }
    @media screen and (max-width : 799.9px) {
        .services{
            flex-direction: column;
        }
        .services .text2{
            width: 90%;
            margin: 0px 10px;
        }
        .services .img img{
            top: 20px;
            width: 60%;
        }  
        .virtual-assistant{
            margin: 20px 13px;
        }
        .last-data .all-card{
            flex-direction: column;
            margin-left: 05px;
            margin-top: 0px;
         }
         .card{
            width: 60%;
            padding: 20px 30px;
            margin-top: 70px;
         }
         .card h3{
            font-size: 20px;
            letter-spacing: 3px;
         }
         .card p{
            width: 90%;
         }
         .last-data h2{
            text-align: start;
            margin-left: 10px;
            font-size: 20px;
        }
    }
    @media screen and (max-width: 500px) {
       .font{
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        font-size: 12px;
    } 
    }