*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}
li{
    list-style: none;
    text-decoration: none;
}
a{
text-decoration: none;
padding: 8px 8px;
border-radius: 20px;
background-color: hsl(353, 93%, 51%);
color: white;
}
a:hover,button:hover{
    color:hsl(353, 93%, 51%);
    background-color:hsl(352, 33%, 91%);
    border: 1px solid hsl(352, 33%, 91%);
}
.brand img{
    width: 3rem;
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    height: 15vh;
}
.navbar{
    display: flex;
    gap: 1rem;
}
main{
    height: calc(100vh - 15vh);
    position: relative;
}
main::before{
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    background-color:rgba(0,0,0,0.3);
}
.calc{
    background: url("./image/bigger.jpeg") no-repeat center center/ cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.calc form{
    position: relative;
    z-index:3 ;
    width: 30%;
    height: 65%;
    padding: 3rem;
  /* background-color: hsl(352, 33%, 91%);*/
  background-color: rgba(0,0,0,0.7);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 20px 20px 60px hsl(353, 93%, 51%),
    -20px -20px 60px hsl(353, 93%, 51%);
}
.form-group > * {
    display: block;
    width: 100%;

}
input,select{
    padding: 5px 10px;
    border: 0;
    border-radius: 5px;
}
select{
    margin-block-start: 10px;
}
label{
    color: hsl(352, 33%, 91%);
    margin: 2px;
}
input:focus{
    border:1px solid hsl(353, 100%, 76%);
}
button{
    border:1px solid hsl(353, 93%, 51%);
    background-color:hsl(353, 93%, 51%);
    color: hsl(352, 33%, 91%);
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    margin-block:1rem ;
    padding:0.5rem;
}
.home{
    display: flex;
}
.image {
    width:60%;
    height: 513px;
}
.text{
    background-color: hsl(344, 10%, 21%);
    width: 40%;
    height: 513px;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    padding:0px 20px 40px 20px;
    margin-bottom: 30px;

}
.text a {
    margin-top: 20px;
}
.second-a{
    text-decoration: none;
padding: 8px 8px;
border-radius: 20px;
background-color:hsl(352, 33%, 91%);
color: hsl(353, 93%, 51%);
}
.box img{
    width: 100%;
}
.s-above{
    display: flex;
    gap: 2rem;
    margin: 30px 50px 0 50px;
}
.left{
    flex:1;
    flex-basis: 60%;
}
.right h2{
    padding-bottom: 4px;
}
.s-second{
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap: 8px;
    margin:20px 50px 0 50px;
    gap: 1rem;
}
.s-firs{
    margin: 60px 0 0 50px;
}
.foot a{
    background: none;
}
footer{
    background-color: hsl(0, 1%, 32%);
    color: white;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    padding: 20px 0px 40px 40px;
    margin-top: 40px;
}
.foot{
    padding-right: 20px;
}
.foot li{
 padding-top: 20px;
}
.bottom{
    background: hsl(344, 10%, 21%);
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reg{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color:black;
}
.reg a{
    background: none;
}
.top{
    border: 1px solid black;
    border-radius: 10px;
    padding: 8.1px 0px;
}
.top a{
    border-radius:10px;
    color: hsl(353, 93%, 51%);
    background-color:white;
}
.top span a{
    border-radius: 10px;
    background-color: hsl(353, 93%, 51%);
    color:white;
}


.form-sign  label {
    display: block;
    display: none;
}
.reg form{
    background: none;
    box-shadow: none;
    color: black;
}
.form-sign input{
    border:  0.5px solid black;
}
.reg form{
    
    width: 100%;
    margin-top: 40px;
}
.form-sign input{
    width: 60%;
   padding: 15px;
   margin-bottom: 40px;
}
.reg button{
    width: 60%;
    padding: 12px;
    margin-top: -5px;
    color: white;
}
.line{
    width: 60%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.line p {
    padding: 0 4px;
}
.links a{ display: flex;
    flex-direction: row;
    align-items: center;
    color: black;
    border: 1px solid black;

}
.links{
    margin-top: 20px;
    margin-bottom: 40px;
}
.links a:hover{
    border: 1px solid red;
}
.linkone{
    padding-bottom: 20px;
}
hr{
width: 60%;
}
.reg button:hover{
border: 1px solid black;
background-color: hsl(353, 93%, 51%);
color: white;
}
.linkone img{
width: 40px;
}
.linktwo img{
    width: 40px;
}
@media (max-width:820px) {
    .s-above{
        display: grid;
    }
    .s-second{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap:1rem;
        
    }
    .calc form{
        width: 96%;
        height: 90%;
        padding-top: 100px;
    }
    .form-group{
        padding-bottom: 20px;

    }
    input,select{
        padding: 10px;
    }
    button{
        padding: 10px;
    }
    .left {
line-height: 2.5rem;
    }
    footer{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    
}


@media (max-width:768px) {

    .s-second{
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .box{
        padding-bottom: 20px;
    }

    footer{
        grid-template-columns: 1fr;
        display: grid;
    }
    .text p{
        display: none;
    }
    .home{
        flex-direction: column;
        margin: 0;
    }
    .image{
        width: 100%;
        height: 400px;
    }
    .text{
        width: 100%;
        height: 20%;
        order: 2;
        margin-bottom: 0;
        padding-top: 10px;
    }
}
@media (width:1024px) {
footer{
    grid-template-columns: 1fr 1fr 1fr;
}
.calc form{
    height: 80%;
}
}
@media (width:912px) {
    form{
        width: 96%;
        height: 90%;
        padding-top: 100px;
    }
    .s-second{
        gap: 20px;
    }
    footer{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .form-group{
        padding-bottom: 20px;

    }
    input,select{
        padding: 10px;
    }
    button{
        padding: 10px;}
}
@media(max-width:280px){
    .home{
        flex-direction: column;
        margin: 0;
    }
    .image{
        width: 100%;
        height: 400px;
    }
    .text{
        width: 100%;
        height: 20%;
        order: 2;
        margin-bottom: 0;
        padding-top: 10px;
    }
    header{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .brand{
        padding-bottom: 10px;
    }
    .calc form{
        height: 96%;
    }

}
@media (width:717px) {
    .calc form{
        padding-top: 10px;
    }
    .form-group{
        padding-bottom: 6px;
    }
}