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

}

body{
font-family: "montserrat";
overflow-x: hidden;
}


.container{
display:flex;
gap: 30px;
justify-content: space-between;
align-items: center;
padding:20px 40px;
margin: 0 auto;

}
.nav-links {
display: flex;
gap: 100px;
align-items: center;
font-size: 14px;
margin-left: auto;
margin-right: 20px;
}

h2{
font-size: 17px;
width: 100%;

}
.nav-links a{
color: gray;
white-space: nowrap;

}
.nav-links a:hover{
transform:translateY(-1px) ;
transition: 0.1s;
color: black;
}

a{
text-decoration: none;
color: black;
}

.button{
padding:6px 20px ;
background-color: white;
border-style: solid;
border-width: 2px;
border-color: black;
}

.button:hover{
cursor: pointer;
transition: 0.1s;
transform: translate(-3px);
background-color:rgb(15, 136, 236);
color: white;
}
.header{
   display: flex; 
   justify-content: space-around;
   align-items: center;
}
.main-container{
padding-left: 20px;

}
img{
    width:550px ;
    
}

.comfort{
color: rgb(15, 136, 236);
font-weight: bold;
font-size: 18px;
}
.h2{
font-weight: bold;
font-size: 50px;
width:500px ;
margin-top: 20px;

}
.h3{
color: rgb(61, 60, 60);
width: 380px;
margin-top: 25px;
font-size: 14px;
}
.show{
background-color: red;
border: none;
color: white;
padding: 8px 12px;
margin-top: 20px;
}


@media (max-width:768px) {
.container{
padding:20px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;

}
.container-text{
    width: 50%;
}


.nav-links{
gap: 10px;
justify-content: center;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.nav-links a{
text-decoration: none;
font-size: 14px;

}
.nav-links .button{
width:fit-content ;
padding:6px 15px ;
border:2px solid black;
}
}