* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Rubik", sans-serif;
  min-width: 375px;
}

.container{
  max-width: 1140px;
  margin:0 auto;
  padding: 0 15px;
}

.header {
  background-color: #0a61f7;
  padding: 14px 0;
}
.header-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav{
  display: flex;
  justify-content: end;

}
.menu-toggle {
  display: none;
}

.menu{
  display: flex;
  align-items: center;
  list-style: none;
  gap: 24px;
}



.menu-item a {
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  list-style: none;
}
.menu-icon{
  display: none;
}




 
.main-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 800px;
}


.main-description{
  max-width: 380px;
  margin-bottom: 40px;
}



.main-title {
  font-weight: 500;
  font-size: 58px;
  line-height: 117%;
  color: #363940;
  margin-bottom: 30px;
}


.button {
  display: inline-block;
  width: 152px;
  height: 50px;
  background-color: #0a61f7;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  border-radius: 5px;
  /* padding: 15px 24px; */
  text-transform: uppercase;
  text-align: center;
  border: none;
  transition: .3s, transform 0.3s, box-shadow 0.3s;
  color: #fff;
  box-shadow:0 0 4px rgba(0,0,0,0.5);
  cursor: pointer;
}
.button:hover{
box-shadow: 0 4px 10px rgba(10, 97, 247, 0.3);
transform: scale(1.03);
}

.main-img{
  
  max-width: 650px;
  width: 100%;
  height: auto;
}

.rates-section{
  background-color: #f9fafc;
  padding: 100px 0;
}
.rates-wrapper{
 display: flex;
 flex-direction: column;
 align-items: center;

}


.title {
  font-weight: 500;
  font-size: 32px;
  color: #363940;
  margin-bottom: 20px;
}

.description-table {
  margin-bottom: 20px;
}

.table-title{
font-weight: 500;
  font-size: 18px;
  color: #363940;
}
.table-subtitle{
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  padding: 0 0 0 20px;
  color: #363940;
}
.table-subtitle.gray {
color: #95a1bb;;
}

.table {
  border-collapse: collapse;
}
 th,
 td {
  width: 240px;
  padding: 15px 0;
  text-align: center;
  border: 1px solid #95a1bb;
}
.table-link{
color: #0a61f7;
text-decoration: none;

}

.table-footer td{
  padding: 30px 0;
}

.btn {
  width: 140px;
  height: 36px;
  font-weight: 500;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid #0a61f7;
  text-transform: uppercase;
  text-align: center;
  color: #0a61f7;
  background-color: #fff;
  transition: .3s box-shadow;
  cursor: pointer;
}

.btn.active{
background-color: #0a61f7;
  color: #fff;
}

.btn:hover{
  border: 1.5px solid #95a1bb;
   box-shadow:0 0 2px rgba(70, 66, 66, 0.4);

}
.btn.selected {
  background-color: #0a61f7;
  color: #fff;
}


.section__about {
  padding: 60px 0;
  
}


.wrapper-about{
  display: flex;
  justify-content: space-between;
  gap: 60px;
  align-items: flex-start;
  
}
.info-about{
  max-width: 500px;
  
}


.title-about {
  font-weight: 500;
  font-size: 32px;
  margin-bottom: 40px;
  color: #363940;
}

.description-about {
  margin-bottom: 40px;
  color: #363940;
}

.list-about{
  padding-left: 20px;
}

.list-item{
  list-style-image: url(assets/img/yes.svg);
  margin-bottom: 30px;
  color: #363940;
}
.form-about {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 480px;
}





input, select, fieldset, textarea {
    border-radius: 4px;
    border: 1px solid #95A1BB;
    padding: 14px 15px;
}


input,
p,
select,
fieldset,
textarea,
label,
legend,
input::placeholder,
textarea::placeholder{
  font-weight: 400;
  font-size: 16px;
  color: #95a1bb;
  line-height: 22.4px;
  
}
input[type="text"] {
    width: 100%;
}

select{
  background: url(assets/img/Arrow-down.svg) no-repeat right 15px top 50%;
  appearance: none;
}

input[type="email"],input[type="password"],input[type="date"],select{
min-width: 230px;
width: 100%;
height: 50px;
flex-grow: 1;

}






.radio,
fieldset {
  display: flex;
  column-gap: 30px;
}
.fieldset-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.radio {
  display: flex;
  gap: 30px;
}

.tech-fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  padding: 30px 15px;
}

legend {
  margin-left: 40px;
  padding: 0 8px;
}




.textarea {
  width: 100%;
min-height: 80px;
resize: none;

}

input[type="date"]::-webkit-calendar-picker-indicator{
  background: url(assets/img/Calendar.svg) no-repeat; 
}

.button-textarea {
border-radius: 4px;
border: 1px solid #0a61f7;
max-width: 480px;
width: 100%;
height: 51px;
background-color: #0a61f7;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
text-align: center;
color: #fff;
transition: .3s box-shadow;
  cursor: pointer;
}
.button-textarea:hover{
  border: .5px solid #95a1bb;
   box-shadow:0 0 2px rgba(70, 66, 66, 0.4);
}
.footer > span {
  display: block;
  width: 100%;
  /* height: 62px; */
  background-color: #0a61f7;
  margin-top: 100px;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  line-height: 62px;
  color: #fff;
}

  @media screen and (max-width:1080px){
.main-wrapper{
  flex-direction: column;
  align-items: start;
  
}
.main-img{
  align-self: center;
}
.main-info{
  margin: 100px 0 80px;
}

.table{
 
  width:940px;
}
.table-wrapper{
  overflow-x: auto;
  width: 100%;
  max-width: 940px;
}

.wrapper-about{
  
  flex-direction: column;
  gap: 70px;
}


.form-about{
  align-self: center;
}
.info-about{
  max-width: unset;
  margin-bottom: 70px;
}


}
 @media screen and (max-width:576px){

 .menu-icon-wrapper{
  display: block;
  /* display: flex; 
  align-items: center; */
  position: fixed;
  top: 20px;
  right: 20px;
  box-shadow: 10px 5px 10px  rgba(0,0,0,0.4);
  cursor: pointer;
  z-index: 1; 
  box-shadow: none; 
  background: transparent;
  

}


.menu{
  /* display: block; */
  position: fixed;
  /* visibility: hidden; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  right: -100%;
  width: 150px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  text-align: center;
  background-color: #838a8e78;
  transition: left 0.4s ease;
  /* box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); */

}
.menu-item {
    display: block;
    padding: 10px;
    
  }
  .menu-icon {
    display: block;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .7));
    /* width: 26px; */
    /* height: auto; */
  }

.menu-item:hover .menu-link{ 
color: #5e6f76a9;
}

.menu-icon-wrapper:hover .menu-icon {
  
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(0.5);
  opacity: .8; 
}
.menu-toggle:checked ~ .menu {
    right: 0;
  }
  .menu-link {
    display: block;
    text-decoration: none;
    font-size: 24px;
    color: #333;
    font-weight: 600;
    transition: color 0.3s ease;
  }


 .main-title{
font-size: 52px;
line-height: 60px;
}

.main-img{
  align-self: flex-end;
  max-width: 656px;
  width: 100%;
}

label{
  white-space: nowrap;
}
fieldset {
        flex-wrap: wrap;
        row-gap: 20px;
    }

}