*{
box-sizing:border-box;
}


body{

margin:0;
font-family:
Tahoma,
Arial,
sans-serif;

color:#222;
line-height:1.6;

}


img{

width:100%;
display:block;

}


.header{

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 5%;

background:#fff;

box-shadow:0 2px 10px #ddd;

}


.logo img{

width:230px;

}


nav a{

text-decoration:none;

color:#111;

margin:0 12px;

font-weight:bold;

}



.hero{

display:flex;

align-items:center;

gap:40px;

padding:60px 5%;

background:#f7f9fc;

}


.hero-text{

flex:1;

}


.hero-text h1{

font-size:48px;

color:#073b82;

line-height:1.2;

}


.hero-text p{

font-size:20px;

}


.hero-image{

flex:1;

}



.buttons{

margin-top:30px;

}


.line-btn,
.phone-btn{

display:inline-block;

padding:15px 25px;

border-radius:8px;

text-decoration:none;

margin:5px;

font-weight:bold;

}


.line-btn{

background:#06c755;

color:white;

}


.phone-btn{

background:#073b82;

color:white;

}





section{

padding:60px 5%;

}


h2{

text-align:center;

font-size:36px;

color:#073b82;

}



.cards{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.card{

background:white;

border-radius:15px;

overflow:hidden;

box-shadow:0 5px 20px #ddd;

}


.card h3,
.card p{

padding:0 20px;

}



.premium{

background:#f4f6f9;

}


.premium-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

text-align:center;

}



.gallery{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}





footer{

background:#073b82;

color:white;

text-align:center;

padding:30px;

}



@media(max-width:768px){


.header{

flex-direction:column;

}


nav{

margin-top:15px;

}



.hero{

flex-direction:column;

}



.hero-text h1{

font-size:34px;

}



.cards,
.premium-grid,
.gallery{

grid-template-columns:1fr;

}


}