/* =========================================
   PERFECT PROPERTY WEBSITE
   MAIN STYLESHEET
========================================= */


/* =========================================
   ROOT VARIABLES
========================================= */

:root {

    --primary: #0E5C46;
    --secondary: #D6A63A;
    --dark: #102A22;
    --light: #ffffff;
    --bg: #f7f8f8;
    --text: #1f2937;
    --gray: #6b7280;

    --shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    --transition:
        all .35s ease;

    --radius:
        12px;

}





/* =========================================
   RESET
========================================= */


* {

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

}



html {

    scroll-behavior: smooth;

}



body {

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    color: var(--text);

    background:
        var(--light);

    line-height: 1.7;

}




img {

    width: 100%;
    display: block;

}



a {

    text-decoration: none;
    color: inherit;

}



ul {

    list-style: none;

}



button {

    border: none;
    cursor: pointer;
    font-family: inherit;

}








/* =========================================
   CONTAINER
========================================= */


.container {

    width: 90%;
    max-width: 1200px;
    margin: auto;

}






/* =========================================
   SECTION GLOBAL STYLE
========================================= */


.section {

    padding: 90px 0;

}



.section-title {

    text-align: center;
    margin-bottom: 50px;

}



.section-title h2 {

    font-size: 38px;
    color: var(--dark);
    position: relative;
    display: inline-block;

}



.section-title h2::after {

    content: "";

    width: 60px;
    height: 4px;

    background:
        var(--secondary);

    position: absolute;

    bottom: -12px;
    left: 50%;

    transform: translateX(-50%);

}



.section-description {

    max-width: 750px;

    margin: auto;

    text-align: center;

    color: var(--gray);

}








/* =========================================
   BUTTONS
========================================= */


.btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 14px 32px;

    border-radius:
        50px;

    font-weight: 600;

    transition:
        var(--transition);

}



.primary-btn {

    background:
        var(--primary);

    color: white;

}



.primary-btn:hover {

    background:
        var(--secondary);

    color:
        var(--dark);

    transform:
        translateY(-4px);

}




.secondary-btn {

    background:
        var(--secondary);

    color:
        var(--dark);

}



.secondary-btn:hover {

    background:
        var(--primary);

    color: white;

    transform:
        translateY(-4px);

}









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


.header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        transparent;

    transition:
        var(--transition);

}



.header.scrolled {

    background:
        white;

    box-shadow:
        var(--shadow);

}





.navbar {

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.logo img {

    width: 150px;

}







/* NAV LINKS */


.nav-links {

    display: flex;

    gap: 35px;

    align-items: center;

}



.nav-links a {

    color: white;

    font-weight: 500;

    position: relative;

    transition:
        var(--transition);

}



.header.scrolled .nav-links a {

    color:
        var(--dark);

}





.nav-links a::after {


    content: "";

    position: absolute;

    bottom: -8px;

    left: 0;

    width: 0;

    height: 2px;

    background:
        var(--secondary);

    transition:
        var(--transition);


}



.nav-links a:hover::after {

    width: 100%;

}






/* =========================================
 LANGUAGE SWITCH
========================================= */


.language-switch {

    display: flex;

    align-items: center;

    gap: 8px;

}



.language-switch button {

    background: none;

    color: white;

    font-weight: 600;

}



.header.scrolled .language-switch button {

    color:
        var(--dark);

}



.language-switch button:hover {

    color:
        var(--secondary);

}







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


.menu-toggle {

    display: none;

    flex-direction: column;

    gap: 6px;

}



.menu-toggle span {

    width: 28px;

    height: 3px;

    background: white;

    border-radius: 5px;

}



.header.scrolled .menu-toggle span {

    background:
        var(--dark);

}








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


@media(max-width:900px) {


    .nav-links {


        position: absolute;

        top: 90px;

        left: 0;

        width: 100%;

        background: white;

        flex-direction: column;

        padding: 40px 0;

        transform:
            translateY(-150%);

        transition:
            var(--transition);


    }



    .nav-links.active {

        transform:
            translateY(0);

    }



    .nav-links a {

        color:
            var(--dark);

    }



    .language-switch {

        display: none;

    }



    .menu-toggle {

        display: flex;

    }



}

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


.hero,
.page-hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}




.hero {

    background-image:
        url("../images/hero/hero.jpg");

}



.about-hero {

    background-image:
        url("../images/hero/about.jpg");

}



.services-hero {

    background-image:
        url("../images/hero/services.jpg");

}



.properties-hero {

    background-image:
        url("../images/hero/properties.jpg");

}



.gallery-hero {

    background-image:
        url("../images/hero/gallery.jpg");

}



.contact-hero {

    background-image:
        url("../images/hero/contact.jpg");

}






/* HERO OVERLAY */


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(rgba(16, 42, 34, .75),
            rgba(14, 92, 70, .65));

}







/* HERO CONTENT */


.hero-content {

    position: relative;

    z-index: 2;

    color: white;

    max-width: 800px;

    animation:
        fadeUp 1s ease;

}



.hero-content h1 {


    font-size: 55px;

    line-height: 1.2;

    margin-bottom: 25px;

    font-weight: 700;


}



.hero-content p {


    font-size: 20px;

    margin-bottom: 35px;

    color:
        rgba(255, 255, 255, .9);

}





.hero-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}







.page-hero {

    min-height: 70vh;

}





.page-hero .hero-content {

    text-align: center;

    margin: auto;

}







/* =========================================
   ANIMATIONS
========================================= */


@keyframes fadeUp {


    from {

        opacity: 0;

        transform:
            translateY(40px);

    }


    to {

        opacity: 1;

        transform:
            translateY(0);

    }


}






@keyframes fadeIn {


    from {

        opacity: 0;

    }


    to {

        opacity: 1;

    }


}









/* =========================================
   ABOUT PREVIEW
========================================= */


.about-preview {


    background:
        var(--bg);

}




.about-content {


    display: flex;

    justify-content: center;

    text-align: center;

}



.about-text {


    max-width: 800px;

}




.about-text p {


    color:
        var(--gray);

    font-size: 17px;

    margin-bottom: 30px;

}









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


.services-preview {


    background: white;

}



.services-grid {


    display: grid;

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

    gap: 30px;


}






.service-card {


    background: white;

    padding: 35px 25px;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    text-align: center;

    transition:
        var(--transition);

    border-bottom:
        4px solid transparent;


}





.service-card:hover {


    transform:
        translateY(-10px);

    border-color:
        var(--secondary);

}




.service-icon {


    font-size: 40px;

    margin-bottom: 20px;

}



.service-card h3 {


    color:
        var(--dark);

    margin-bottom: 15px;

}



.service-card p {


    color:
        var(--gray);

}









/* =========================================
   WHY CHOOSE US
========================================= */


.why-us {


    background:
        var(--bg);

}




.why-grid {


    display: grid;

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

    gap: 25px;


}




.why-card {


    background: white;

    padding: 35px 25px;

    text-align: center;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    transition:
        var(--transition);


}





.why-card:hover {


    transform:
        translateY(-8px);


}



.why-card h3 {


    color:
        var(--primary);

    margin-bottom: 15px;

}



.why-card p {


    color:
        var(--gray);

}

/* =========================================
   PROPERTIES SECTION
========================================= */


.properties-section {

    background:
        var(--bg);

}



.properties-grid {

    display: grid;

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

    gap: 30px;

}





.property-card {


    background: white;

    border-radius:
        var(--radius);

    overflow: hidden;

    box-shadow:
        var(--shadow);

    transition:
        var(--transition);


}



.property-card:hover {


    transform:
        translateY(-10px);


}






.property-image {

    height: 250px;

    overflow: hidden;

}



.property-image img {


    height: 100%;

    object-fit: cover;

    transition:
        .5s ease;


}



.property-card:hover .property-image img {


    transform:
        scale(1.1);


}







.property-content {


    padding: 30px;


}



.property-content h3 {


    color:
        var(--dark);

    margin-bottom: 10px;


}



.location {


    color:
        var(--primary);

    font-weight: 600;

    margin-bottom: 15px;


}



.property-content p {


    color:
        var(--gray);

    margin-bottom: 20px;


}



.property-details {


    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 25px;


}



.property-details span {


    background:
        rgba(14, 92, 70, .1);

    color:
        var(--primary);

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 13px;


}









/* =========================================
   MISSION & VISION
========================================= */


.mission-vision {


    background:
        var(--bg);


}



.mv-grid {


    display: grid;

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

    gap: 30px;


}




.mv-card {


    background: white;

    padding: 45px;

    text-align: center;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    position: relative;

    overflow: hidden;

}



.mv-card::before {


    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background:
        var(--secondary);


}



.mv-card h3 {


    color:
        var(--primary);

    margin-bottom: 20px;


}



.mv-card p {


    color:
        var(--gray);

}









/* =========================================
   VALUES SECTION
========================================= */


.values-grid {


    display: grid;

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

    gap: 25px;


}




.value-card {


    background: white;

    padding: 35px 25px;

    text-align: center;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    transition:
        var(--transition);


}



.value-card:hover {


    transform:
        translateY(-8px);


}



.value-card h3 {


    color:
        var(--primary);

    margin-bottom: 15px;


}



.value-card p {


    color:
        var(--gray);


}









/* =========================================
   GALLERY SECTION
========================================= */


.gallery-section,
.activities,
.awards-gallery {


    background:
        var(--bg);


}




.gallery-grid {


    display: grid;

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

    gap: 25px;


}



.gallery-item {


    position: relative;

    overflow: hidden;

    height: 300px;

    border-radius:
        var(--radius);


}




.gallery-item img {


    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        .5s ease;


}




.gallery-item:hover img {


    transform:
        scale(1.15);


}




.gallery-overlay {


    position: absolute;

    inset: 0;

    background:
        linear-gradient(transparent,
            rgba(16, 42, 34, .8));


    display: flex;

    align-items: flex-end;

    padding: 25px;

    color: white;


    opacity: 0;

    transition:
        var(--transition);


}



.gallery-item:hover .gallery-overlay {


    opacity: 1;


}









/* =========================================
   AWARDS
========================================= */


.awards {


    background: white;

}



.awards-grid {


    display: grid;

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

    gap: 25px;


}



.award-card {


    background:
        var(--bg);

    padding: 35px;

    text-align: center;

    border-radius:
        var(--radius);

    border-top:
        4px solid var(--secondary);

    transition:
        var(--transition);


}



.award-card:hover {


    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow);


}



.award-card h3 {


    color:
        var(--dark);

    font-size: 18px;


}



.award-card p {


    color:
        var(--primary);

    font-weight: 600;

}









/* =========================================
   LOCATIONS
========================================= */


.locations-list {


    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;


}




.locations-list div {


    background:
        var(--primary);

    color: white;

    padding: 12px 25px;

    border-radius: 30px;

    transition:
        var(--transition);


}



.locations-list div:hover {


    background:
        var(--secondary);

    color:
        var(--dark);


}









/* =========================================
   CTA SECTION
========================================= */


.cta {


    padding: 90px 0;

    background:
        linear-gradient(135deg,
            var(--primary),
            var(--dark));

    text-align: center;

    color: white;


}




.cta h2 {


    font-size: 40px;

    margin-bottom: 20px;


}




.cta p {


    margin-bottom: 30px;

    font-size: 18px;


}





.services-hero{

position:relative;

padding:130px 0 90px;

background:

linear-gradient(rgba(14,92,70,.55),
rgba(14,92,70,.45)),

url("../images/1\ \(3\).jpeg");

background-size:cover;

background-position:center;

text-align:center;

}

.services-hero h1{

max-width:900px;

margin:auto;

font-size:clamp(2.5rem,5vw,4.5rem);

line-height:1.2;

color:white;

margin-top:25px;

margin-bottom:25px;

}

.services-hero p{

max-width:760px;

margin:auto;

font-size:1.1rem;

line-height:1.9;

color:#f5f5f5;

margin-bottom:45px;

}

.hero-services{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;

}

.hero-services span{

padding:12px 22px;

background:rgba(255,255,255,.15);

backdrop-filter:blur(12px);

border-radius:40px;

color:white;

font-weight:600;

border:1px solid rgba(255,255,255,.2);

transition:.4s;

}

.hero-services span:hover{

background:#D6A63A;

transform:translateY(-6px);

}

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

.footer{
    

background:#023102;
color:#fff;
padding:80px 0 25px;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1.5fr 1fr;
gap:50px;

}

.footer-logo img{

width:170px;
margin-bottom:20px;

}

.footer h3{

margin-bottom:20px;
color:#D6A63A;

}

.footer ul{

list-style:none;
padding:0;

}

.footer ul li{

margin-bottom:12px;

}

.footer a{

color:#fff;
text-decoration:none;
transition:.3s;

}

.footer a:hover{

color:#D6A63A;

}

.footer p{

line-height:1.8;

}

.footer p i{

color:#D6A63A;
margin-right:10px;
width:20px;

}

.footer-social{

display:flex;
gap:15px;

}

.footer-social a{

width:45px;
height:45px;

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

border-radius:50%;

background:rgba(255,255,255,.1);

font-size:20px;

transition:.3s;

}

.footer-social a:hover{

background:#D6A63A;
transform:translateY(-6px);

}

.footer hr{

margin:50px 0 20px;
border:none;
height:1px;
background:rgba(255,255,255,.15);

}

.footer-bottom{

display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;

}

.footer-bottom a{

color:#D6A63A;
font-weight:600;

}

@media(max-width:992px){

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;
text-align:center;

}

.footer-social{

justify-content:center;

}

.footer-bottom{

flex-direction:column;
text-align:center;

}

}
/* =========================================
   CONTACT PAGE
========================================= */


.contact-info {

    background:
        var(--bg);

}



.contact-grid {


    display: grid;

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

    gap: 30px;


}



.contact-card {


    background: white;

    padding: 40px 25px;

    text-align: center;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    transition:
        var(--transition);


}



.contact-card:hover {


    transform:
        translateY(-8px);


}



.contact-icon {


    font-size: 45px;

    margin-bottom: 20px;


}



.contact-card h3 {


    color:
        var(--primary);

    margin-bottom: 15px;


}



.contact-card p {


    color:
        var(--gray);

}









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


.contact-form-section {


    background: white;


}




.form-wrapper {


    max-width: 800px;

    margin: auto;


}




.contact-form {


    background:
        var(--bg);

    padding: 45px;

    border-radius:
        var(--radius);


}




.form-group {


    margin-bottom: 25px;


}



.form-group label {


    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    color:
        var(--dark);


}




.form-group input,
.form-group textarea {


    width: 100%;

    padding: 15px 18px;

    border: 1px solid #ddd;

    border-radius:
        8px;

    font-family: inherit;

    outline: none;

    transition:
        var(--transition);


}




.form-group input:focus,
.form-group textarea:focus {


    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px rgba(14, 92, 70, .1);


}









/* =========================================
   WHATSAPP CONTACT
========================================= */


.whatsapp-contact {


    padding: 80px 0;

    text-align: center;

    background:
        var(--bg);


}



.whatsapp-contact h2 {


    font-size: 35px;

    color:
        var(--dark);

    margin-bottom: 15px;


}



.whatsapp-contact p {


    color:
        var(--gray);

    margin-bottom: 30px;


}









/* =========================================
   GOOGLE MAP
========================================= */


.map-section {


    padding: 90px 0;


}




.map-container {


    overflow: hidden;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);


}



.map-container iframe {


    width: 100%;

    height: 450px;

    border: 0;


}









/* =========================================
   SCROLL ANIMATION READY
========================================= */


.reveal {


    opacity: 0;

    transform:
        translateY(40px);

    transition:
        1s ease;


}



.reveal.active {


    opacity: 1;

    transform:
        translateY(0);


}









/* =========================================
   RESPONSIVE DESIGN
========================================= */


/* TABLET */


@media(max-width:1100px) {



    .services-grid,
    .why-grid,
    .values-grid {


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


    }




    .properties-grid {


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


    }



    .gallery-grid {


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


    }



    .awards-grid {


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


    }



    .contact-grid {


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


    }



    .hero-content h1 {


        font-size: 45px;


    }


}









/* MOBILE */


@media(max-width:700px) {



    .container {


        width: 92%;


    }



    .section {


        padding: 65px 0;


    }



    .section-title h2 {


        font-size: 30px;


    }






    .hero {


        min-height: 100vh;


    }



    .page-hero {


        min-height: 55vh;


    }





    .hero-content {


        text-align: center;


    }



    .hero-content h1 {


        font-size: 34px;

        line-height: 1.3;


    }



    .hero-content p {


        font-size: 16px;


    }



    .hero-buttons {


        justify-content: center;

        flex-direction: column;


    }




    .hero-buttons .btn {


        width: 100%;


    }






    .services-grid,
    .why-grid,
    .properties-grid,
    .gallery-grid,
    .values-grid,
    .awards-grid,
    .contact-grid,
    .mv-grid {


        grid-template-columns:
            1fr;


    }






    .property-image {


        height: 220px;


    }






    .gallery-item {


        height: 250px;


    }





    .cta h2 {


        font-size: 30px;


    }




    .footer-content {


        grid-template-columns:
            1fr;

        text-align: center;


    }




    .contact-form {


        padding: 25px;


    }




    .map-container iframe {


        height: 300px;


    }




    .locations-list {


        flex-direction: column;


    }



    .locations-list div {


        text-align: center;


    }




}









/* SMALL PHONES */


@media(max-width:400px) {



    .hero-content h1 {


        font-size: 30px;


    }



    .btn {


        padding: 12px 22px;


    }



    .logo img {


        width: 120px;


    }



}

/* ================= FEATURED PROJECTS ================= */


.projects-grid {

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

}



.project-card {

    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
    transition: .5s ease;
}



.project-card:hover {

    transform: translateY(-12px);

}





.project-image {

    height: 260px;
    position: relative;
    overflow: hidden;

}



.project-image img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;

}



.project-card:hover img {

    transform: scale(1.1);

}





.project-overlay {

    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .7),
            transparent);

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

    opacity: 0;
    transition: .4s ease;

}



.project-card:hover .project-overlay {

    opacity: 1;

}




.project-btn {

    background: #D6A63A;
    color: white;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;

}



.project-content {

    padding: 25px;

}



.project-content h3 {

    color: #0E5C46;
    margin-bottom: 10px;

}



.project-content p {

    color: #666;

}




@media(max-width:900px) {


    .projects-grid {

        grid-template-columns: 1fr;

    }


    .project-image {

        height: 240px;

    }


}

.about-wrapper {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;

}

.about-image {

    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .12);

}

.about-image img {

    width: 100%;
    height: 500px;
    display: block;
    object-fit: cover;
    transition: .6s;

}

.about-image:hover img {

    transform: scale(1.08);

}

.about-text p {

    margin: 25px 0;
    line-height: 1.9;

}

.about-features {

    display: grid;
    gap: 15px;
    margin-bottom: 35px;

}

.about-features div {

    padding: 14px 18px;
    background: #f7f7f7;
    border-left: 5px solid var(--secondary);
    border-radius: 8px;
    font-weight: 500;

}

@media(max-width:900px) {

    .about-wrapper {

        grid-template-columns: 1fr;

    }

    .about-image {

        order: 1;

    }

    .about-text {

        order: 2;

    }

    .about-image img {

        height: 320px;

    }

}
/* ==========================================
   HERO SLIDER
========================================== */

.hero{
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hero-slider{
    position: absolute;
    inset: 0;
    z-index: 1;
}

.slide{
    position: absolute;
    width: 100%;
    height: 100%;

    top: 0;
    left: 100%;

    transition: transform 1s ease, left 1s ease;

    overflow: hidden;
}

.slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;

    animation: zoomHero 6s linear infinite;
}

/* Active */

.slide.active{
    left: 0;
    transform: translateX(0);
    z-index: 3;
}

/* Previous */

.slide.prev{
    left: 0;
    transform: translateX(-100%);
    z-index: 2;
}

/* Next */

.slide.next{
    left: 100%;
    transform: translateX(0);
    z-index: 1;
}

/* Overlay */

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:4;
}

/* Hero Content */

.hero-content{
    position:relative;
    z-index:5;
    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    color:#fff;
}

/* Zoom Effect */

@keyframes zoomHero{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }

}
.nav-cta{

background:#D6A63A;

color:#111;

padding:12px 28px;

border-radius:40px;

font-weight:700;

text-decoration:none;

transition:.35s;

box-shadow:0 10px 25px rgba(214,166,58,.35);

}

.nav-cta:hover{

background:#111;

color:#fff;

transform:translateY(-3px);

}
/* =======================================
LANGUAGE DROPDOWN
======================================= */

.language-dropdown{

position:relative;

margin-left:25px;

}



.language-btn{

display:flex;
align-items:center;
gap:10px;

padding:10px 18px;

border:none;

border-radius:50px;

background:white;

cursor:pointer;

font-weight:600;

box-shadow:0 5px 20px rgba(0,0,0,.08);

transition:.3s;

}



.language-btn:hover{

transform:translateY(-2px);

}



.globe{

font-size:20px;

}



.arrow{

font-size:11px;

transition:.3s;

}



.language-dropdown.active .arrow{

transform:rotate(180deg);

}



.language-menu{

position:absolute;

top:110%;

right:0;

background:white;

border-radius:12px;

overflow:hidden;

min-width:170px;

box-shadow:0 15px 35px rgba(0,0,0,.12);

display:none;

z-index:999;

}



.language-dropdown.active .language-menu{

display:block;

animation:fadeMenu .3s ease;

}



.language-menu div{

padding:14px 18px;

cursor:pointer;

transition:.3s;

}



.language-menu div:hover{

background:#0E5C46;

color:white;

}



@keyframes fadeMenu{

from{

opacity:0;
transform:translateY(-10px);

}

to{

opacity:1;
transform:translateY(0);

}

}
/* ==========================================
   FLOATING WHATSAPP
========================================== */

.whatsapp-float{

position:fixed;

right:25px;
bottom:25px;

width:65px;
height:65px;

border-radius:50%;

background:#25D366;

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

box-shadow:0 10px 25px rgba(0,0,0,.25);

z-index:9999;

transition:.35s;

animation:whatsappPulse 2s infinite;

}

.whatsapp-float img{

width:63px;

height:63px;

}

.whatsapp-float:hover{

transform:translateY(-8px) scale(1.08);

background:#1ebe5d;

}

@keyframes whatsappPulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.55);

}

70%{

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

@media(max-width:768px){

.whatsapp-float{

width:58px;
height:58px;

right:18px;
bottom:18px;

}

.whatsapp-float img{

width:30px;
height:30px;

}

}

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

.about-hero{

position:relative;

padding:100px 0 80px;

background:
linear-gradient(rgba(0,0,0,.72),
rgba(0,0,0,.72)),
url("../images/1\ \(2\).jpeg");

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

text-align:center;

overflow:hidden;

}

.hero-badge{

display:inline-block;

padding:10px 24px;

background:rgba(214,166,58,.18);

border:1px solid rgba(214,166,58,.35);

border-radius:50px;

color:#D6A63A;

font-weight:600;

letter-spacing:2px;

margin-bottom:30px;

}

.about-hero h1{

font-size:clamp(2.5rem,4vw,3rem);

line-height:1.15;

color:#fff;

max-width:900px;

margin:auto;

margin-bottom:30px;

}

.about-hero p{

font-size:1.15rem;

line-height:1.9;

color:#eee;

max-width:760px;

margin:auto;

margin-bottom:70px;

}

/*========================
STATS
========================*/

.hero-stats{

display:grid;

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

gap:25px;

}

.stat-card{

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

padding:35px 20px;

border-radius:18px;

border:1px solid rgba(255,255,255,.12);

transition:.4s;

}

.stat-card:hover{

transform:translateY(-10px);

background:rgba(214,166,58,.15);

}

.stat-card h2{

font-size:2.4rem;

color:#D6A63A;

margin-bottom:10px;

}

.stat-card span{

color:white;

font-size:1rem;

font-weight:500;

}

@media(max-width:992px){

.hero-stats{

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

}

}

@media(max-width:768px){

.hero-stats{

grid-template-columns:1fr;

}

.about-hero{

padding:150px 0 90px;

}

}
.stat-card:hover{

background:#D6A63A;

transform:translateY(-10px);

}

.stat-card:hover h2,
.stat-card:hover span{

color:white;

}
.story-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}

.story-image img{

width:100%;
height:550px;
object-fit:cover;
border-radius:25px;
box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.section-tag{

display:inline-block;
padding:8px 18px;
background:#D6A63A;
color:#fff;
border-radius:30px;
font-size:.8rem;
margin-bottom:20px;

}

.story-content h2{

font-size:2.7rem;
margin-bottom:20px;
color:#0E5C46;

}

.story-content p{

line-height:1.9;
font-size:1.05rem;
color:#555;
margin-bottom:30px;

}

.story-features{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-bottom:35px;

}

.story-features div{

padding:15px;
background:#f7f7f7;
border-left:4px solid #D6A63A;
border-radius:10px;
font-weight:500;

}

@media(max-width:992px){

.story-grid{

grid-template-columns:1fr;

}

.story-image{

order:2;

}

.story-content{

order:1;

}

.story-image img{

height:400px;

}

.story-features{

grid-template-columns:1fr;

}

}
.services-intro{

background:#fff;

}


.intro-wrapper{

max-width:850px;

margin:auto;

text-align:center;

}



.section-tag{

display:inline-block;

color:#0E5C46;

font-size:.85rem;

font-weight:700;

letter-spacing:2px;

margin-bottom:20px;

}



.intro-wrapper h2{

font-family:'Poppins',sans-serif;

font-size:clamp(2rem,4vw,3.2rem);

font-weight:700;

line-height:1.2;

color:#102A22;

margin-bottom:25px;

}



.intro-wrapper p{

font-family:'Inter',sans-serif;

font-size:1.08rem;

font-weight:400;

line-height:1.9;

color:#555;

max-width:750px;

margin:auto;

}
.main-services{

background:#f7f8f8;

}


.services-grid{

display:grid;

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

gap:25px;

}



.service-card{

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.4s;

}



.service-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 60px rgba(0,0,0,.15);

}



.service-image{

height:220px;

overflow:hidden;

}


.service-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.service-card:hover img{

transform:scale(1.1);

}



.service-content{

padding:30px;

position:relative;

}



.service-icon{

width:55px;

height:55px;

background:#0E5C46;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

margin-top:-60px;

border:5px solid white;

}



.service-content h3{

margin:25px 0 15px;

font-size:1.3rem;

color:#102A22;

}



.service-content p{

color:#666;

line-height:1.7;

font-size:.95rem;

}



.service-link{

display:inline-block;

margin-top:20px;

color:#D6A63A;

font-weight:600;

}



@media(max-width:1100px){

.services-grid{

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

}

}



@media(max-width:600px){

.services-grid{

grid-template-columns:1fr;

}

}
.process{

background:#fff;

}



.journey-wrapper{

max-width:900px;

margin:auto;

position:relative;

}



.journey-wrapper::before{

content:"";

position:absolute;

left:40px;

top:0;

bottom:0;

width:2px;

background:#D6A63A;

}



.journey-item{

display:flex;

gap:40px;

margin-bottom:45px;

opacity:0;

transform:translateX(-40px);

animation:slideProcess .8s forwards;

}



.journey-item:nth-child(2){

animation-delay:.2s;

}


.journey-item:nth-child(3){

animation-delay:.4s;

}


.journey-item:nth-child(4){

animation-delay:.6s;

}



.journey-number{

width:80px;

height:80px;

border-radius:50%;

background:#0E5C46;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:1.5rem;

font-weight:700;

z-index:2;

}



.journey-content{

background:#f7f8f8;

padding:25px 35px;

border-radius:20px;

flex:1;

transition:.4s;

}



.journey-content:hover{

background:#0E5C46;

color:#fff;

transform:translateX(10px);

}


.journey-content h3{

margin-bottom:12px;

font-size:1.4rem;

}



.journey-content p{

line-height:1.7;

color:#666;

}



.journey-content:hover p{

color:#fff;

}



@keyframes slideProcess{

to{

opacity:1;

transform:translateX(0);

}

}
.hero-tag{

display:inline-block;

padding:8px 18px;

background:rgba(214,166,58,.15);

border:1px solid #D6A63A;

color:#D6A63A;

border-radius:30px;

font-size:.85rem;

letter-spacing:1px;

margin-bottom:20px;

}



.properties-hero{

background-image:
linear-gradient(
rgba(16,42,34,0.65),
rgba(16,42,34,0.65)
),
url("../images/redevelopment.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}
.properties-hero h1{

max-width:850px;

font-size:clamp(2.5rem,5vw,4.5rem);

line-height:1.1;

}



.properties-hero p{

max-width:650px;

font-size:1.1rem;

line-height:1.8;

}
.projects-title{

max-width:850px;

margin:auto;

text-align:center;

}



.section-tag{

display:inline-block;

font-size:.85rem;

font-weight:600;

letter-spacing:2px;



margin-bottom:18px;

position:relative;

}



.section-tag::before,
.section-tag::after{

content:"";

display:inline-block;

width:35px;

height:2px;

background:#D6A63A;

vertical-align:middle;

margin:0 12px;

}



.projects-title h2{

font-size:clamp(2rem,4vw,3.2rem);

line-height:1.2;

font-weight:700;

color:#102A22;

margin-bottom:20px;

}



.section-description{

font-size:1.1rem;

line-height:1.8;

color:#667085;

max-width:750px;

margin:auto;

}
.gallery-hero .hero-content{

max-width:850px;

}


.hero-tag{

display:inline-block;

color:#D6A63A;

font-size:.85rem;

letter-spacing:2px;

font-weight:600;

margin-bottom:20px;

}



.gallery-hero h1{

font-size:clamp(2.5rem,5vw,4rem);

line-height:1.15;

}



.gallery-hero p{

font-size:1.1rem;

max-width:700px;

line-height:1.8;

margin:25px 0;

}
/* ================= GALLERY HERO BACKGROUND ================= */

.gallery-hero{

background-image:
linear-gradient(
rgba(16,42,34,0.65),
rgba(16,42,34,0.65)
),
url("../images/galaa.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}
.contact-hero{

background-image:
linear-gradient(
rgba(16,42,34,.7),
rgba(16,42,34,.7)
),
url("../images/2\ \(2\).png");

background-size:cover;

background-position:center;

}
/* ================= FOOTER BOTTOM ================= */


.footer-bottom{


display:grid;

grid-template-columns:1fr auto 1fr;

align-items:center;

gap:20px;

padding-top:25px;

text-align:center;

}





.footer-bottom p{

margin:0;

font-size:14px;

}





.designer a{

color:var(--secondary);

text-decoration:none;

font-weight:700;

transition:.3s;

}





.designer a:hover{

letter-spacing:.5px;

}





.admin-link{

display:flex;

justify-content:flex-end;

}





.admin-link a{


display:flex;

align-items:center;

gap:8px;


padding:8px 15px;


border:1px solid rgba(255,255,255,.25);


border-radius:30px;


color:white;


text-decoration:none;


font-size:13px;


transition:.3s;


}





.admin-link a i{

color:var(--secondary);

font-size:16px;

}





.admin-link a:hover{


background:var(--secondary);

color:#102A22;


}





.admin-link a:hover i{

color:#102A22;

}





@media(max-width:768px){



.footer-bottom{


grid-template-columns:1fr;


gap:15px;


}



.admin-link{


justify-content:center;


}


}
/*====================
        AWARDS
=====================*/

.awards{
    background:#f8fafc;
    padding:80px 0;
}

.awards-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:50px;
}

.award-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s ease;
    text-align:center;
}

.award-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

/* Image */
.award-image{
    width:100%;
    background:#fff;
    overflow:hidden;
}

.award-image img{
    width:100%;
    height:auto;
    display:block;
    transition:transform .5s ease;
}

.award-card:hover .award-image img{
    transform:scale(1.05);
}

/* Content */
.award-content{
    padding:22px 20px;
    border-top:1px solid #eee;
}

.award-content h3{
    font-size:18px;
    line-height:1.5;
    font-weight:700;
    color:var(--dark);
    margin:0;
}


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

@media (max-width:992px){

    .awards-grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

}


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

@media (max-width:768px){

    .awards{
        padding:60px 0;
    }

    .awards-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:35px;
    }

    .award-card{
        border-radius:16px;
    }

    .award-content{
        padding:18px;
    }

    .award-content h3{
        font-size:17px;
        line-height:1.4;
    }

}
/*==================================================
PREMIUM PROPERTY HERO
==================================================*/

.properties-hero{

position:relative;

min-height:95vh;

display:flex;

align-items:center;

overflow:hidden;

}

.hero-slider{

position:absolute;

width:100%;

height:100%;

top:0;

left:0;

z-index:0;

}

.hero-slide{

position:absolute;

width:100%;

height:100%;

opacity:0;

transition:1.2s;

}

.hero-slide.active{

opacity:1;

}

.hero-slide img{

width:100%;

height:100%;

object-fit:cover;

transform:scale(1.08);

animation:zoomHero 12s linear infinite;

}

@keyframes zoomHero{

0%{transform:scale(1.08);}

100%{transform:scale(1.18);}

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(0,0,0,.72),

rgba(0,0,0,.45)

);

z-index:1;

}

.hero-content{

position:relative;

z-index:5;

color:#fff;

max-width:760px;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

border-radius:40px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(10px);

margin-bottom:25px;

font-weight:600;

}

.hero-content h1{

font-size:clamp(2.8rem,6vw,4.7rem);

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.hero-content p{

font-size:1.18rem;

line-height:1.9;

max-width:700px;

opacity:.95;

margin-bottom:35px;

}

.hero-stats{

display:flex;

gap:25px;

margin:45px 0;

flex-wrap:wrap;

}

.hero-stat{

padding:20px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

border-radius:16px;

min-width:150px;

text-align:center;

}

.hero-stat h2{

font-size:2rem;

color:#D6A63A;

margin-bottom:8px;

}

.hero-circle{

position:absolute;

border-radius:50%;

background:rgba(214,166,58,.15);

filter:blur(10px);

}

.hero-circle-1{

width:240px;

height:240px;

top:8%;

right:8%;

}

.hero-circle-2{

width:180px;

height:180px;

bottom:12%;

right:20%;

}

@media(max-width:768px){

.properties-hero{

min-height:88vh;

}

.hero-content{

text-align:center;

}

.hero-stats{

justify-content:center;

}

.hero-buttons{

justify-content:center;

}

}
/* ===========================
   COMPANY ACTIVITIES
=========================== */

.activities-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.activity-card{
    position:relative;
    overflow:hidden;
    border-radius:15px;
    width:100%;
    height:280px;
}

.activity-card img{
    width:100%;
    height:280px;
    object-fit:cover;
}
.activity-card:hover img{
    transform:scale(1.08);
}

.activity-card .gallery-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.activity-card:hover .gallery-overlay{
    opacity:1;
}