/* ============================================================
   GLOBAL / RESET / THEME (white + orange)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:#F26A1F;
  --orange-dark:#D4551A;
  --orange-light:#FFF3EB;
  --text:#1a1a1a;
  --muted:#666;
  --border:#ececec;
  --bg:#ffffff;
  --dark:#1b1b1b;
}
html,body{font-family:'Segoe UI',system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:12px 24px;border-radius:6px;font-weight:600;cursor:pointer;border:none;transition:.2s}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-dark)}
.btn-outline{background:transparent;color:#fff;border:2px solid #fff}
.btn-outline:hover{background:#fff;color:var(--text)}
.section{padding:80px 0}
.section-title{text-align:center;margin-bottom:50px}
.section-title h2{font-size:36px;margin-bottom:10px}
.section-title p{color:var(--muted)}
.section-title h2 span{color:var(--orange)}

/* ============================================================
   TOP BAR (contact info + socials)
   ============================================================ */
.topbar{background:#f7f7f7;font-size:13px;color:var(--muted);padding:8px 0}
.topbar .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.topbar .info span{margin-right:20px}
.topbar .socials a{margin-left:12px}

/* ============================================================
   NAVBAR (logo + nav links + CTA)
   ============================================================ */
.navbar{background:#fff;border-bottom:1px solid var(--border);padding:18px 0;position:sticky;top:0;z-index:50}
.navbar .container{display:flex;align-items:center;justify-content:space-between}
.logo{font-size:24px;font-weight:800}
.logo span{color:var(--orange)}
.nav-links{display:flex;gap:30px}
.nav-links a{font-weight:500}
.nav-links a:hover{color:var(--orange)}

/* ============================================================
   HERO SECTION (headline + house image)
   ============================================================ */
.hero{background:var(--orange-light);padding:80px 0 120px}
.hero .container{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:52px;line-height:1.1;margin-bottom:20px}
.hero h1 span{color:var(--orange)}
.hero p{color:var(--muted);margin-bottom:30px;font-size:17px}
.hero-cta{display:flex;gap:15px}
.hero-img img{border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.1)}

/* ============================================================
   SEARCH BAR (overlaps hero bottom)
   ============================================================ */
.search-wrap {
  margin-top: -60px;
  position: relative;
  z-index: 10;
}
.search {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 20px;
}
.search form {
  display: flex;              /* horizontal layout */
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;            /* allows wrapping on smaller screens */
}
.search .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
}
.search label {
  font-size: 12px;
  font-weight: 600;
  color: var(--orange-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}
.search input,
.search select {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  width: 100%;
}
.search button {
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  background: var(--orange);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.search button:hover {
  background: var(--orange-dark);
}
/*title deed section*/


/* ============================================================
   EXPLORE PROPERTY TYPES (small cards, tiny images left, text right)
   ============================================================ */
/* Whole white container */
/* ===================================
   PROPERTY TYPES
=================================== */

.types-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    margin-top:30px;
}

.type-card{
    display:flex;
    align-items:center;
    gap:14px;

    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;

    padding:18px;

    text-decoration:none;
    color:#222;

    transition:.25s ease;

    box-shadow:0 4px 12px rgba(0,0,0,.04);
}

.type-card:hover{
    transform:translateY(-4px);
    border-color:#ff7a00;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.type-card img{
    width:50px;
    height:50px;
    object-fit:contain;
    flex-shrink:0;
}

.type-info{
    display:flex;
    flex-direction:column;
}

.type-info h4{
    margin:0 0 4px;
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    color:#222;
}

.type-info p{
    margin:0;
    font-size:11px;
    color:#888;
    line-height:1.4;
}

/* Tablet */

@media(max-width:1100px){

    .types-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

/* Mobile */

@media(max-width:700px){

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

}

@media(max-width:500px){

    .types-grid{
        grid-template-columns:1fr;
    }

}



/* ============================================================
   FEATURED PROPERTIES (property cards with image + price)
   ============================================================ */
.props-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px}
.prop-card{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:.2s}
.prop-card:hover{box-shadow:0 15px 30px rgba(0,0,0,.1);transform:translateY(-4px)}
.prop-card img{width:100%;height:220px;object-fit:cover}
.prop-body{padding:20px}
.prop-price{color:var(--orange);font-size:22px;font-weight:700;margin-bottom:6px}
.prop-title{font-size:18px;margin-bottom:6px}
.prop-loc{color:var(--muted);font-size:14px;margin-bottom:15px}
.prop-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);border-top:1px solid var(--border);padding-top:12px}

/* ============================================================
   WHY CHOOSE US (small icons + text)
   ============================================================ */
/* Whole white container */

.whyCards{
    display:flex;
    width:100%;
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* Individual feature */

.whyCard{
    flex:1;

    display:flex;
    align-items:center;

    gap:18px;

    padding:32px 28px;   /* Increased height */

    position:relative;

    transition:.3s ease;

    background:transparent;
}

/* Vertical divider */

.whyCard:not(:last-child){
    border-right:1px solid #ececec;
}

/* Hover */

.whyCard:hover{
    background:#fafafa;
}

/* Icon */

.whyCard img{
    width:64px;
    height:64px;
    object-fit:contain;
    flex-shrink:0;
}

/* Text */

.cardText{
    display:flex;
    flex-direction:column;
}

.cardText h4{
    font-size:18px;
    font-weight:700;
    margin-bottom:8px;
    color:#222;
}

.cardText p{
    font-size:14px;
    line-height:1.6;
    color:#777;
    margin:0;
}

/* Tablet */

@media(max-width:1000px){

    .whyCards{
        flex-wrap:wrap;
    }

    .whyCard{
        flex:0 0 50%;
        border-right:none;
        border-bottom:1px solid #ececec;
    }

    .whyCard:nth-child(even){
        border-left:1px solid #ececec;
    }

}

/* Mobile */

@media(max-width:700px){

    .whyCards{
        display:block;
    }

    .whyCard{
        width:100%;
        border:none;
        border-bottom:1px solid #ececec;
    }

    .whyCard:last-child{
        border-bottom:none;
    }

}
/*==================================================
                TESTIMONIALS
==================================================*/

.testi-grid{

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

}

.testi{

    background:#fff;
    border:1px solid #ececec;
    border-radius:20px;

    padding:35px;

    transition:.35s;

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

}

.testi:hover{

    transform:translateY(-8px);

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

}

/* Stars */

.stars{

    color:#ffb400;

    font-size:22px;

    letter-spacing:4px;

    margin-bottom:18px;

}

/* Quote */

.testi p{

    font-size:16px;

    color:#666;

    line-height:1.8;

    font-style:italic;

    margin-bottom:28px;

}

/* Bottom Section */

.author{

    display:flex;

    align-items:center;

    gap:15px;

}

/* Profile Picture */

.author img{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #fff;

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

}

/* Name */

.author h5{

    font-size:18px;

    margin-bottom:4px;

    color:#222;

}

/* Position */

.author span{

    font-size:14px;

    color:#888;

}

/* ============================================================
   NEWSLETTER CTA (banner with subscription)
   ============================================================ */
.cta{background:linear-gradient(rgba(242,106,31,.9),rgba(242,106,31,.9)),url('assets/cta-interior.jpg') center/cover;color:#fff;text-align:center;padding:80px 20px;border-radius:12px;margin:60px auto;max-width:1160px}
.cta h2{font-size:34px;margin-bottom:15px}
.cta p{margin-bottom:25px;opacity:.95}
.cta form{display:flex;max-width:500px;margin:0 auto;gap:10px}
.cta input{flex:1;padding:14px;border:none;border-radius:6px;font-size:15px}
.cta button{background:var(--dark);color:#fff}

/* ============================================================
   FOOTER (dark, multi-column)
   ============================================================ */
.footer{background:var(--dark);color:#bbb;padding:60px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer h4{color:#fff;margin-bottom:20px;font-size:16px}
.footer ul{list-style:none}
.footer ul li{margin-bottom:10px;font-size:14px}
.footer ul li a:hover{color:var(--orange)}
.footer .brand{font-size:24px;font-weight:800;color:#fff;margin-bottom:15px}
.footer .brand span{color:var(--orange)}
.footer-bottom{border-top:1px solid #333;padding-top:20px;text-align:center;font-size:13px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
  .hero .container{grid-template-columns:1fr}
  .hero h1{font-size:36px}
  .search{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
/*adding the  title deed section*/
/*==========================================
            ABOUT SECTION
==========================================*/
/*====================================================
                ABOUT MEFALAND
====================================================*/

.aboutSection{
    padding:110px 0;
    background:#fff;
    overflow:hidden;
}

/* Main Layout */

.aboutContainer{

    width:92%;
    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

}

/*============================
        LEFT CONTENT
============================*/

.aboutContent{

    max-width:560px;

}

.aboutTag{

    display:inline-block;

    padding:10px 22px;

    background:#FFF3EB;

    color:var(--orange);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    border-radius:40px;

    margin-bottom:25px;

}

.aboutContent h2{

    font-size:58px;

    font-weight:800;

    line-height:1.15;

    color:#1b1b1b;

    margin-bottom:28px;

}

.aboutContent h2 span{

    color:var(--orange);

}

.aboutContent p{

    color:#666;

    font-size:18px;

    line-height:1.9;

    margin-bottom:20px;

}

.aboutBtn{

    display:inline-block;

    margin-top:15px;

    padding:17px 38px;

    background:var(--orange);

    color:#fff;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}
.exploreBtn{

    display:inline-block;

    margin-top:15px;

    padding:17px 38px;

    background:var(--orange);

    color:#fff;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.aboutBtn:hover{

    background:var(--orange-dark);

    transform:translateY(-4px);

}

/*============================
            IMAGE
============================*/

.aboutImage{

    position:relative;

    display:flex;

    justify-content:flex-end;

}

/* Orange Shape */

.aboutImage::before{

    content:"";

    position:absolute;

    width:330px;

    height:330px;

    background:linear-gradient(135deg,#ffb36a,var(--orange));

    border-radius:40px;

    right:-70px;

    top:-50px;

    z-index:0;

    opacity:.12;

}

/* White Card */

.aboutImage::after{

    content:"";

    position:absolute;

    width:520px;

    height:560px;

    background:#fff;

    border-radius:32px;

    box-shadow:0 30px 70px rgba(0,0,0,.08);

    right:20px;

    top:25px;

    z-index:1;

}

/* Image */

.aboutImage img{

    position:relative;

    z-index:2;

    width:100%;

    max-width:560px;

    height:650px;

    object-fit:cover;

    border-radius:28px;

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

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

@media(max-width:1100px){

.aboutContainer{

    grid-template-columns:1fr;

    gap:70px;

}

.aboutContent{

    max-width:none;

    text-align:center;

}

.aboutImage{

    justify-content:center;

}

.aboutImage::before,
.aboutImage::after{

    display:none;

}

.aboutImage img{

    max-width:650px;

    height:auto;

}

}

@media(max-width:700px){

.aboutSection{

    padding:70px 0;

}

.aboutContent h2{

    font-size:38px;

}

.aboutContent p{

    font-size:16px;

}

}
/*==========================================
            OUR PARTNERS
==========================================*/

#ourPartners{

    padding:100px 0;

    background:#fff;

}

#ourPartners .section-title{

    text-align:center;

    max-width:900px;

    margin:0 auto 60px;

}

#ourPartners .section-title h2{

    font-size:36px;

    font-weight:700;

    margin-bottom:12px;

    color:var(--text);

    font-family:inherit;

    line-height:1.2;

}

#ourPartners .section-title span{

    color:var(--orange);

}

#ourPartners .section-title p{

    font-size:18px;

    color:#666;

    line-height:1.8;

}

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

.partnersGrid{

    display:grid;

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

    gap:35px;

}

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

.partnerCard{

    background:#fff;

    border:1px solid #ececec;

    border-radius:24px;

    overflow:hidden;

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

    transition:.35s;

    display:flex;

    flex-direction:column;

    min-height:620px;

    padding:18px;        /* Space between card border and everything inside */

}

.partnerCard:hover{

    transform:translateY(-8px);

    border-color:var(--orange);

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

}

/*==============================
        LARGE LOGO AREA
==============================*/

.partnerLogo{

    width:100%;

    height:260px;

    background:#fafafa;

    display:flex;

    justify-content:center;

    align-items:center;

    border-bottom:1px solid #ececec;

    padding:30px;

    transition:.35s;

}

.partnerLogo img{

    width:85%;

    height:85%;

    object-fit:contain;

    transition:.35s;

}

.partnerCard:hover .partnerLogo{

    background:#fff7f1;

}

.partnerCard:hover .partnerLogo img{

    transform:scale(1.08);

}

/*==============================
        CONTENT
==============================*/

.partnerContent{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:10px 18px 18px;

}
.partnerBadge{

    display:inline-block;

    padding:8px 20px;

    background:#fff2e8;

    color:var(--orange);

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    margin:0 auto 22px;

}

.partnerCard h3{

    font-size:28px;

    font-weight:700;

    margin:18px 0 15px;

    color:#222;

}

.partnerCard p{

    font-size:16px;

    line-height:1.8;

    color:#666;

    max-width:90%;

}

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

@media(max-width:1000px){

    .partnersGrid{

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

    }

}

@media(max-width:700px){

    .partnersGrid{

        grid-template-columns:1fr;

    }

    .partnerCard{

        min-height:auto;

    }

    .partnerLogo{

        height:220px;

    }

    #ourPartners .section-title h2{

        font-size:34px;

    }

}
.hero-img {
  width: 100%;
  height: 600px;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.slide.active {
  opacity: 1;
}

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

/* Previous / Next buttons */

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.45);
  color: white;

  font-size: 22px;
  cursor: pointer;

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

  transition: background 0.3s ease;
}

.slider-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}

.prev {
  left: 15px;
}

.next {
  right: 15px;
}

/* Dots */

.slider-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  gap: 8px;
}

.dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);

  cursor: pointer;

  transition: all 0.3s ease;
}

.dot.active {
  width: 25px;
  border-radius: 10px;
  background: white;
}
.whyHeader {
    text-align: center;
    margin: 0 auto 50px;
    max-width: 750px;
    padding: 20px;
}

.whyHeader h2 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #111;
    letter-spacing: -1px;
    line-height: 1.2;
}

.whyHeader h2 span {
    color: #f58220;
    position: relative;
}

.whyHeader h2 span::after {
    content: "";
    display: block;
    width: 55px;
    height: 4px;
    background: #f58220;
    border-radius: 10px;
    margin: 10px auto 0;
}

.whyHeader p {
    margin: 18px 0 0;
    font-size: 1.05rem;
    color: #666;
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* Optional small orange accent above the heading */
.whyHeader::before {
    content: "";
    display: block;
    width: 45px;
    height: 5px;
    background: #f58220;
    border-radius: 10px;
    margin: 0 auto 18px;
}