* {
 margin: 0;
 padding: 0;
}

body {
 min-height: 100vh;
 max-width: 100vw;
 padding: 0 160px;
}

main {
 row-gap: 112px;
}

/* Header styles */

header {
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin: 32px 0 40px 0;
}

header nav ul {
 gap: 36px;
 display: flex;
 flex-direction: row;
 list-style: none;
 justify-content: center;
}

header nav ul li {
 text-align: center;
}

header nav ul li a {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100%;
}

header div {
 gap: 16px;
 align-items: center;
 display: flex;
 flex-direction: row;
}

main {
 display: flex;
 flex-direction: column;
}

/* Hero-section styles */

.hero-section {
 width: 100%;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 32px;
 align-items: center;
}

.hero-img {
 max-width: 100%;
 height: 100%;
 object-fit: cover;
}

.hero-content {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 row-gap: 24px;
}

.center-text {
 text-align: center;
}

/* About-us-section styles */

.about-us-section {
 width: calc(100% + 320px);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin: 0 -160px;
 padding: 40px 0;
 row-gap: 32px;
}

.cards-container {
 margin: 0 160px;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 32px;
}

.card {
 border-radius: 4px;
 display: flex;
 flex-direction: column;
 row-gap: 16px;
 padding: 12px 16px;
}

.icon-container {
 padding: 12px;
 width: fit-content;
 border-radius: 4px;
}

/* How-it-works-section styles */

.how-it-works-section {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 row-gap: 32px;
}

.steps-container {
 width: 100%;
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 32px;
 grid-template-rows: repeat(2, 1fr);
}

.step {
 display: flex;
 flex-direction: column;
 row-gap: 16px;
 height: 100%;
}

.step-img {
 border-radius: 4px;
 flex-grow: 1;
 object-fit: cover;
 width: 100%;
}

.step-header {
 display: flex;
 flex-direction:row;
 align-items: center;
 gap: 12px;
}

.step-number{
 display: flex;
 padding: 8px;
 min-width: 54px;
 min-height: 54px;
 justify-content: center;
 align-items: center;
 border-radius: 4px;
}

/* Homes-presentation-section styles */

.homes-presentation-section {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 row-gap: 32px;
 overflow: hidden;
 position: relative;
}

.homes-slider {
 width: 100%;
 display: flex;
 flex-direction: row;
 overflow: hidden;
 position: relative;
}

.slider-wrapper {
 display: flex;
 transition: transform 0.5s ease-in-out;
 width: 100%;
}

.home-slide {
 flex: 0 0 100%;
 display: flex;
 flex-direction: row;
 box-sizing: border-box;
 gap: 32px;
}

.home-img {
 width: 50%;
 object-fit: cover;
 max-height: 400px;
 border-radius: 4px;
}

.home-details {
 width: 50%;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: stretch;
}

.homes-description {
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

.home-description-row {
 width: 100%;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

.arrows-container {
 display: flex;
 gap: 28px;
 justify-content: center;
}

/* Video-section styles */

.video-section {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 row-gap: 32px;
 text-align: center;
}

/* Image-with-text-section styles */

.image-with-text-section {
 width: calc(100% + 320px);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin: 0 -160px;
 padding: 40px 0;
 row-gap: 28px;
}

.img-text-content {
 margin: 0 160px;
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 32px;
}

.img-text-info {
 display: flex;
 flex-direction: column;
 row-gap: 20px;
}

.text-img {
 max-width: 50%;
 height: 100%;
 object-fit: cover;
 border-radius: 4px;
}

/* Our-team-section styles */

.our-team-section {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 row-gap: 28px;
 text-align: center;
}

.team-cards {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 32px;
}

.team-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 row-gap: 16px;
}

.team-card-img {
 width: 100%;
 max-width: 400px;
 height: auto;
 object-fit: contain;
}

/* Reviews-section styles */

#reviews-section {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 row-gap: 32px;

}

.reviews-cards {
 width: 100%;
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 32px;
}

.reviews-card {
 display: flex;
 flex-direction: column;
 padding: 16px;
 row-gap: 16px;
}

.review-content {
 display: flex;
 flex-direction: column;
 row-gap: 4px;
}

.review-image {
 width: 60px;
 height: 60px;
 border-radius: 4px;
}


/* Footer styles */
footer {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 80px 0 40px 0;
}

/* Console button */
#console-button {
 position: fixed;
 right: 32px;
 bottom: 32px;
 background-color: #f56900;
 color: white;
 border: none;
 padding: 16px;
 border-radius: 4px;
}