/* ==========================
   GENERAL
========================== */

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


body {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    line-height: 1.6;
    background: #ffffff;
}


h1, h2, h3 {
    color: #1f3c5b;
}


section {
    padding: 60px 10%;
}



/* ==========================
   HEADER
========================== */

header {

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

    padding: 20px 10%;

    background: white;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

    position: sticky;
    top:0;
    z-index:100;

}


.logo {

    font-size: 24px;
    font-weight: bold;
    color:#1f3c5b;

}


nav a {

    text-decoration:none;
    margin:0 10px;
    color:#333;

}


nav a:hover {

    color:#0077cc;

}


.languages button {

    border:none;
    background:#1f3c5b;
    color:white;
    padding:8px 12px;
    margin-left:5px;
    cursor:pointer;
    border-radius:5px;

}



/* ==========================
   HERO
========================== */


.hero {

    height:500px;

    display:flex;
    align-items:center;

    background:

    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45)
    ),

    url("images/apartment-main.jpg");

    background-size:cover;
    background-position:center;

    color:white;

}



.hero-text {

    max-width:600px;

}



.hero h1 {

    font-size:45px;
    color:white;
    margin-bottom:20px;

}


.hero p {

    font-size:20px;
    color:white;

}



.button {

    display:inline-block;

    margin-top:25px;

    padding:15px 30px;

    background:#0077cc;

    color:white;

    text-decoration:none;

    border-radius:8px;

}




/* ==========================
 APARTMENT
========================== */


.apartment-card {

    display:flex;

    gap:40px;

    margin-top:30px;

}


.photo-placeholder {

    width:50%;

    height:350px;

    background:#ddd;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:25px;

    color:#777;

}



.details {

    width:50%;

}


.details ul {

    margin-top:20px;

    list-style:none;

}


.details li {

    margin-bottom:10px;

}




/* ==========================
 SERVICES
========================== */


.services-container {

    display:grid;

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

    gap:20px;

    margin-top:30px;

}



.service {

    padding:25px;

    background:#f5f7fa;

    border-radius:10px;

    text-align:center;

}





/* ==========================
 PAYPAL
========================== */


.paypal-button {

    display:inline-block;

    margin-top:20px;

    padding:15px 35px;

    background:#ffc439;

    color:#111;

    font-weight:bold;

    text-decoration:none;

    border-radius:8px;

}





/* ==========================
 CONTACT FORM
========================== */


form {

    max-width:500px;

}


input,
textarea {

    width:100%;

    padding:12px;

    margin-bottom:15px;

    border:1px solid #ccc;

    border-radius:5px;

}



textarea {

    height:120px;

}


form button {

    background:#1f3c5b;

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:5px;

    cursor:pointer;

}





/* ==========================
 FOOTER
========================== */


footer {

    background:#1f3c5b;

    color:white;

    text-align:center;

    padding:25px;

}





/* ==========================
 MOBILE
========================== */


@media(max-width:800px){


header {

    flex-direction:column;

}


nav {

    margin:15px 0;

}



.hero h1 {

    font-size:32px;

}


.apartment-card {

    flex-direction:column;

}


.photo-placeholder,
.details {

    width:100%;

}



.services-container {

    grid-template-columns:1fr;

}


}