*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root {
    --gradient-color: linear-gradient(to bottom, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);
  }



   .hero-section .hid{ /*when togel is ohone the text is hid */
    display: none;
}
  .hero-section .hero-content h1 {
    /* font-style: italic; */
    padding-bottom: 1rem;
    font-size: 2.5rem;
    justify-content: space-between;
  }

  .hero-content h3 {
    font-size: 2rem;
    font-weight: 700;
  }

  .hero-content h1,
  .hero-content h3 {
    overflow: hidden;
    font-family: monospace;
    text-align: center;
    color: #fff;
    font-weight: 800;
    padding: 2rem;
    direction: rtl;
  }

  .letter {
    opacity: 0;
    animation: fade-in 1s forwards;
  }

  .animated {
    opacity: 1;
    animation: fade-in 1s forwards;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* Responsive for phone */
@media (max-width: 767px) {

    #hero-section .hero-content h1 {
        font-size: 2rem;
        padding-bottom: 0.5rem;
    }

    .hero-content h3 {
        font-size: 1.5rem;
    }
}
/* responsive for iPad */
@media (min-width: 768px) and (max-width: 1023px) {
    #hero-section .hero-content h1 {
        font-size: 3.5rem;
    }

    .hero-content h3 {
        font-size: 2.5rem;
    }
}



*{
  /* font-family: 'Poppins', sans-serif; */
  margin:0; padding:0;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
  --gradient-color: linear-gradient(to bottom, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);
  --hover-color: #ef2300;
  --head-color: #003336;
  --card-text1: #fff;
  --card-text2: #000;
  --card-background: #3d6189;
  --card-color: #eff2f5;
  --black:#444;
  --border:.1rem solid rgba(0,0,0,.1);
}
/* header section  */



.worker-info{
    margin-top: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
 
  }
  .worker-info .worker-content{
    background: linear-gradient(to bottom, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);;
    width: 80%;
    text-align: center;
    padding: 2rem 2rem 8rem;
    border-radius: 0.3rem;
  }
  .worker-info .workers-images-names-wrapper{
    width: 100%;
    display:flex;
    justify-content: space-evenly;
    position: relative;
    top: -50px;
    left: 0;
  }
  .worker-info .workers-images-names img{
    width: 200px;
    border-radius: 50%;
  }
  .worker-info .workers-images-names .name-lastName-wrapper{
    text-align: center;
    padding-top:0.3rem;
  }

        /*
            slider style
          */  
  
  .reviews{
      transition:all .2s linear;
      overflow-x: hidden;
      padding: 0 5rem;
    
  }
                                            /*  reviews section starts */
  .reviews .reviews-slider .box{
      border:var(--border);
      padding:0.3rem;
      text-align: center;
      margin:0.3rem 0;
      
      
  }
  #about_info{
    padding: 1rem 2rem; 
    margin:5px 0 2rem 0;
     box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    
  }
  #about_radio_info{
    padding-top: .5rem;
    display:flex;
     justify-content: space-between; width:80%;
     position: relative;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
  }
  #T_radio_content{
    width: 60%;
  }
  .reviews .reviews-slider{
    padding:0 2rem;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
  }
  @media only screen and (max-width: 900px) and (min-width:360px){
    .reviews{
      padding: 0 2rem;
    }
    .reviews .reviews-slider{
      padding:0 0rem;
      
    }
    #about_radio_info {
      flex-direction: column;
      align-items: center;
    }
    #about_info{
      padding: 1rem .5rem; 
     
      
    }
    #T_radio_content{
      width: 100%;
    }

  }
  .reviews .reviews-slider .box:hover{
      border:var(--border-hover);
  }
  
  .reviews .reviews-slider .box img{
      height:7rem;
      width:7rem;
      border-radius: 50%;
      object-fit: cover;
  }
  
  .reviews .reviews-slider .box h3{
      color:var(--black);
      font-size: 2rem;
      padding:.3rem 0;
  }
  
  .reviews .reviews-slider .box p{
      color:var(--light-color);
      font-size: 1rem;
      padding:1rem 0;
      line-height: 2rem;
  }