/* ==========================
   APARTMENTS SECTION
========================== */

.apartments {
    background-color: #f7f7f7;
    padding-bottom: 100px;
    margin-top: -100px; /* Moves section upward */

}

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

.section-header {
    background-color: #3b3b3b;
    height: 200px;

    margin-top: 50px; /* Pushes section down */
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-header h2 {
    color: #ffffff;
    font-size: 42px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

.sec-another-title{
	position: relative;
	margin-top: 100px;    /* Added */
	margin-bottom: 75px;
}

.sec-another-title .float-text{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	font-size: 72px;
	line-height: 1em;
	color: #2f2f2f;
	font-weight: 700;
	text-transform: uppercase;
	opacity: .10;
	font-family: "Arimo", sans-serif;
	text-align: center; /* Centers the text itself */
    

}

.sec-another-title h2{
	position: relative;
	display: block;
	font-size: 30px;
	line-height: 40px;
	color: #2f2f2f;
	font-weight: 500;
	padding: 16px 0;
	text-align: center;
    
}





.buildings-section {
    background-color: #f7f7f7;
    padding-bottom: 100px;
    

}

.buildings{
	position: relative;
	margin-top: 100px;    /* Added */
	margin-bottom: 75px;
    padding-top: 70px; /* adjust as needed */

}

.buildings .float-text{
	position: absolute;
	left: 0;
	top: 50;
	width: 100%;
	font-size: 72px;
	line-height: 1em;
	color: #2f2f2f;
	font-weight: 700;
	text-transform: uppercase;
	opacity: .10;
	font-family: "Arimo", sans-serif;
	text-align: center; /* Centers the text itself */
    

}

.buildings h2{
	position: relative;
	display: block;
	font-size: 30px;
	line-height: 40px;
	color: #2f2f2f;
	font-weight: 500;
	padding: 16px 0;
	text-align: center;
    
    
    
}


/* ==========================
   BUILDING GRID
========================== */

.buildings-grid {
    max-width: 1300px;

    margin: 25px auto 0;

    padding: 0 20px;

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

    gap: 60px 35px;
}

/* ==========================
   BUILDING CARD
========================== */

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

.buildings-card img {
    width: 100%;
    height: 400px;

    object-fit: cover;
    display: block;

    transition: 0.4s ease;
}

.buildings-card:hover img {
    transform: scale(1.04);
}

/* ==========================
   BUILDING TITLE
========================== */

.buildings-card h3 {
    margin-top: 20px;
    margin-bottom: 15px;

    color: #2e6461;

    font-size: 26px;
    font-weight: 400;
    line-height: 1.4;
}

/* ==========================
   EXPLORE BUTTON of Buildings
========================== */

.buildings-card a {
    display: inline-block;

    text-decoration: none;

    color: #87a977;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    transition: 0.3s ease;
}

.buildings-card a:hover {
    color: #0f5b57;
}


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

.apartment-grid {
    max-width: 1300px;

    margin: 25px auto 0;

    padding: 0 20px;

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

    gap: 60px 35px;
}

/* ==========================
   CARD
========================== */

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

.apartment-card img {
    width: 100%;
    height: 240px;

    object-fit: cover;
    display: block;

    transition: 0.4s ease;
}

.apartment-card:hover img {
    transform: scale(1.04);
}

/* ==========================
   TITLE
========================== */

.apartment-card h3 {
    margin-top: 20px;
    margin-bottom: 15px;

    color: #2e6461;

    font-size: 26px;
    font-weight: 400;
    line-height: 1.4;
}

/* ==========================
   EXPLORE BUTTON
========================== */

.apartment-card a {
    display: inline-block;

    text-decoration: none;

    color: #87a977;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    transition: 0.3s ease;
}

.apartment-card a:hover {
    color: #0f5b57;
}

/* ==========================
   TABLET
========================== */

@media (max-width: 992px) {

    .apartment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-header h2 {
        font-size: 34px;
    }

    .apartment-card h3 {
        font-size: 22px;
    }
}

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

@media (max-width: 768px) {

    .section-header {
        height: 180px;
    }

    .section-header h2 {
        font-size: 28px;
    }

    .apartment-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .apartment-card img {
        height: auto;
    }

    .apartment-card h3 {
        font-size: 20px;
    }
}