@import url(./sweed.css);
@import url(./color.css);
@import url(./hambuger-menu.css);
@import url(./domain.css);

@import url(/style/footer.css);
@import url(/style/style.css);
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

* {
    font-family: 'Inter', sans-serif;
    color: var(--body-color);
    /* border: 2px solid red;
 */
}
.hosting-hero-section{
    background-color: var(--primary);
    margin-bottom: 5rem;
    border-radius: 0 0 20px 20px;
    padding-bottom:2rem ;
    gap: 2rem;
    margin-top: 80px;
    padding-top:5% ;
}

.hero-feature-item{
    background-color: var(--background);
    width: 300px;
    border-radius: 10px;
    padding: 1.5rem 2rem;
}
.hero-feature-item-icon{
    width: auto;
    height: 32px;
}
.hosting-item-wrapper{
    margin: 1rem 0;
    background-color: var(--blue50);
    padding: 5rem 10% ;
}
.hosting-item-container{
    padding: 3rem 0 ;

} 
.hosting-item{
    margin: 3rem 2rem ;
    transition: top .3s ease-out;
    padding: 2rem ;
    overflow: hidden;
     cursor: pointer;
    position: relative;
    border-radius: 20px;
    background-color: var(--background);
    box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
}
.hosting-item-icon{
    width: 50px;
    height: 50px;
    background-color: var(--primary);
    border-radius: 50%;
}
.hosting-item-feature-list{
        padding: 0 2rem;     
        gap: 10px;   
        list-style: url(/assests/check\ 1.png);
}
.hosting-item-feature-list-name{
    padding: 0 2rem;     
    gap:17px;   
    list-style:none;
    list-style: url(/assests/check\ 1.png);
}
.hosting-item-feature-list-name li span{
    padding-bottom: 5px;bottom: 5px;
    margin-left: 1rem;

}
.hosting-item:hover{
    background-color: var(--primary);
    transform: translateY(-10%);
    transition: .3s ease-out;
    flex-basis: transition;
}
.hosting-item:hover .hosting-item-feature-list-name li span{
    color: var(--background);
    
}
.hosting-item:hover .hosting-item-icon{

    background-color: var(--background);
    
}
.hosting-item:hover .hosting-item-name,.hosting-item:hover  .hosting-item-price-font{

    color: var(--background);
    
}
.hosting-item:hover .hosting-item-dec ,.hosting-item:hover .hosting-item-price-month-font {

    color: var(--gray200);
    
}
.hosting-item .hosting-item-icon svg ,.hosting-item .hosting-item-icon svg path{
     color: var(--background);    
}
.hosting-item:hover .hosting-item-icon svg ,.hosting-item:hover .hosting-item-icon svg path{
     color: var(--primary);    
}
.hosting-price-wrapper.hidden{
display: none;
}
.hosting-item-switcher-wrap2 .toggle-button {
    background-color: #0000007a;
}
.hosting-item-switcher-wrap2 .toggle-button-option{
    background-color: transparent;
    color: var(--background);
}
.hosting-item-switcher-wrap2 .toggle-button-option.active{
    background-color: rgba(255, 255, 255, 0.085);
}
.feature_panel_section{
    padding: 5rem 10%;
    transition: 0.3s ease-out;
    background-image:linear-gradient(to right top, #071931 0%, #33274f 50%, #661e43 100%);
    gap: 2rem;
    
}
.panel_name{
    color: #6c5bc0;
    text-align: center;
}
@keyframes appearToTop {
    
}
.mac-mockbook-wrapper{
    width: 90vw;
    max-width:900px ;
    position: relative;
    max-height: 600px;   
    height: 60vw;
     overflow: hidden;
}
.macbook-frame{
    z-index: 1;
    width: 100%;
    position: absolute;
}
 .direct-admin-frame{
    z-index: 1;
    position: absolute;
    width: 86vw;
    max-width:870px ;
    top: 4%;
    left: 50%;
    transform: translate(-50%, 0%) translateX(-120%);
  }
  .direct-admin-frame.showdirectadmin{
    animation: showdirectadmin 1s forwards ease-in-out;
    animation-fill-mode: forwards;
  }
  .direct-admin-frame.hidedirectadmin{
    animation: showdirectadmin 1s forwards ease-in-out;
    animation-direction:reverse;
    animation-fill-mode: forwards;
  }

  .cpanel-frame{
      top: 6.5%;
      z-index: 1;
      position: absolute;
      width: 86vw;
      max-width:870px ;
      left: 50%;
      transform: translate(-50%, 0%) ;
  }
  .cpanel-frame.hide{
      animation: hidecpanel 1s forwards ease-in-out;
      animation-fill-mode: forwards;
  }
  
  .cpanel-frame.show{
      animation: show 1s forwards ease-in-out;
      animation-fill-mode: forwards;
      animation-direction: reverse;
  }

  @keyframes hidecpanel{
      0%{
          
      }
      40%{
         transform: scale(.4) translateX(-10%)  translate(-50%, 0%);
      }
      60%{
        transform: scale(.4) translateX(-10%)  translate(-50%, 0%);
      }
      100%{
          transform:scale(0.4)  translate(-50%, 0%) translateX(120%);
      }
      
  }
  

  @keyframes showcpanel{
      0%{
          transform:scale(0.4)  translate(-50%, 0%) translateX(120%);
      }
      40%{
                  transform: scale(.4) translateX(-10%)  translate(-50%, 0%);

      }
      60%{
         transform: scale(.4) translateX(-10%)  translate(-50%, 0%);
      }
      60%{
      }
      
      
  }
  

  @keyframes showdirectadmin{
      0%{
          display: block;
      }
      40%{
        transform: scale(.4) translateX(-140%)  translate(-50%, 0%);
      }  
      60%{
        transform: scale(.4) translateX(-140%)  translate(-50%, 0%);
      }  
      100%{
        transform: scale(1) translateX(0%)  translate(-50%, 0%);
      }  
      
  }
  
  @keyframes hidedirectadmin{
      100%{
          display: block;
      }
      60%{
        transform: scale(.4) translateX(-140%)  translate(-50%, 0%);
      }  
      40%{
        transform: scale(.4) translateX(-140%)  translate(-50%, 0%);
      }  
      0%{
        transform: scale(1) translateX(0%)  translate(-50%, 0%);
      }  
      
  }
  .tech-sepc-section {
      padding: 3rem 5%;
      background-color: var(--gray50);
      gap: 3rem;
  }
    .tech-spec-ul-con{
        justify-content: space-between;
flex-direction: row;
gap: 2rem;
  }
  .tech-spec-ul-con>div{
      flex-basis: 1;
      display: flex;
      gap: 1rem;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
  }
  .tech-spec-ul-con>div ul li span{
      bottom:5px ;
      position: relative;
      color: var(--gray700);
  }
  .tech-spec-ul-con>div ul li span::before{
      width: 10px;
      padding-left:5px ;
  }

  .tech-spec-ul-con>div ul li{
     color: var(--gray700);
     min-height: 2rem;
     margin-top: 10px;
    }
  .tech-spec-ul-con>div ul{
      margin-left: 30px;
    list-style: url(/assests/check\ 1.png);
  }
  
@media screen and (max-width: 1500px) {
    .hero-feature-item{
        width: 250px;
    }
    .container{
        padding:     5%;
    }
    .section-side{
        width: 45%;
    }
    .hosting-item-wrapper {
        padding: 5rem 5%;
    }
}

@media screen and (max-width: 1276px) {
    .hosting-hero-section{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:4rem;
    }

    .hero-feature-wrapper{
        justify-content: center;
    }
    .hero-feature-wrapper>div{
        flex-direction: row;
    }
    .section-side{
        width: 80%;
    }
   
}
@media screen and (max-width: 900px) {
    .width70{
        width: 100% !important;
    }
    .hero-feature-wrapper{
        flex-direction: column;
    }
    .hero-feature-wrapper>div{
        align-items: center;
        justify-content: center;
    }
    .section-side{
        width: 80%;
        justify-content: center;
        align-items: center;
    }
    .section-side{
        width: 90%;
    }
    

}

@media screen and (max-width: 576px) {
    .hero-feature-wrapper>div{
        flex-direction: column;
    }
    .section-side{
        width: 100%;
    }
    .hosting-item-switcher-wrap{
        gap: 2rem;
    }
    .hosting-item-container{
        margin: 0 0;
        padding: 2rem 0;
    }
    .hosting-item{
        margin: 2rem 0;
    }
    
}