.elementor-642 .elementor-element.elementor-element-02f383a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-642 .elementor-element.elementor-element-01de2ab > .elementor-widget-container{margin:-20px 0px 0px 0px;}.elementor-642 .elementor-element.elementor-element-67e4407 > .elementor-widget-container{margin:-20px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-596dfba *//* ===================================
FULL WIDTH FIX
=================================== */

body{
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden;
}

/* REMOVE PAGE CONTAINER WIDTH */

.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap{
    width:100% !important;
    max-width:100% !important;
}

/* ===================================
CUSTOM HERO SECTION
=================================== */

.custom-luxury-hero{

    position:relative;

    width:100vw !important;
    max-width:100vw !important;

    margin-left:calc(-50vw + 50%);

    height:90vh;
    min-height:90vh;

    overflow:hidden;
}

/* HERO IMAGE */

.custom-luxury-hero .hero-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* DARK OVERLAY */

.custom-luxury-hero .hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.28);
    z-index:1;
}

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

.custom-luxury-hero .hero-content{
    position:absolute;
    left:80px;
    bottom:110px;
    z-index:2;
}

.custom-luxury-hero .hero-content h2{
    color:#ffffff;
    font-size:70px;
    font-family:Georgia, serif;
    font-weight:600;
    line-height:1.1;
    margin:0;
}

/* ===================================
BOTTOM NAVIGATION
=================================== */

.custom-bottom-nav{

    width:100vw !important;
    max-width:100vw !important;

    margin-left:calc(-50vw + 50%);

    background:#eef0f3;

    padding:24px 20px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;

    flex-wrap:wrap;
}

/* NAV LINKS */

.custom-bottom-nav a{
    text-decoration:none;
    color:#00153d;
    font-size:14px;
    letter-spacing:4px;
    text-transform:uppercase;
    position:relative;
    transition:0.3s ease;
}

/* DIVIDER */

.custom-bottom-nav a:not(:last-child)::after{
    content:'';
    position:absolute;
    right:-20px;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:20px;
    background:#c7c9cf;
}

/* HOVER */

.custom-bottom-nav a:hover{
    opacity:0.7;
}

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

@media(max-width:991px){

    .custom-luxury-hero{
        height:90vh;
        min-height:90vh;
    }

    .custom-luxury-hero .hero-content{
        left:50px;
        bottom:80px;
    }

    .custom-luxury-hero .hero-content h2{
        font-size:54px;
    }

}

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

@media(max-width:768px){

    .custom-luxury-hero{
        height:90vh;
        min-height:90vh;
    }

    .custom-luxury-hero .hero-content{
        left:25px;
        bottom:60px;
    }

    .custom-luxury-hero .hero-content h2{
        font-size:40px;
    }

    .custom-bottom-nav{
        gap:18px;
        padding:18px 15px;
    }

    .custom-bottom-nav a{
        font-size:12px;
        letter-spacing:2px;
    }

}

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

@media(max-width:480px){

    .custom-luxury-hero{
        height:90vh;
        min-height:90vh;
    }

    .custom-luxury-hero .hero-content{
        left:20px;
        bottom:45px;
    }

    .custom-luxury-hero .hero-content h2{
        font-size:32px;
    }

    .custom-bottom-nav{
        flex-direction:column;
        gap:14px;
    }

    .custom-bottom-nav a:not(:last-child)::after{
        display:none;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-01de2ab *//* ===================================
MODERN ABOUT SECTION
=================================== */

.modern-about-section{

    width:100vw !important;
    max-width:100vw !important;

    margin-left:calc(-50vw + 50%);

    padding:0 7% 100px 7%;

    background:#f8f8f8;

    overflow:hidden;
}

/* REMOVE TOP GAP */

body{
    margin:0;
    padding:0;
}

.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap{
    margin-top:0 !important;
    padding-top:0 !important;
    max-width:100% !important;
}

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

.modern-about-container{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
    flex-wrap:wrap;
}

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

.modern-about-content{
    flex:1;
    min-width:320px;
}

/* TAG */

.about-tag{
    display:inline-block;
    padding:10px 22px;
    position: relative;
    top: 17px;
    background:#e8eef1;
    color:#4c6574;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:25px;
    border-radius:40px;
}

/* HEADING */

.modern-about-content h2{
    font-size:68px;
    line-height:1.1;
    font-family:Georgia, serif;
    color:#111111;
    font-weight:400;
    margin-bottom:30px;
}

.modern-about-content h2 span{
    color:#4c6574;
}

/* TEXT */

.modern-about-content p{
    font-size:20px;
    line-height:1.9;
    color:#444444;
    margin-bottom:40px;
    max-width:700px;
}

/* ===================================
FEATURE BOXES
=================================== */

.about-features{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:45px;
}

.feature-box{
    background:#ffffff;
    padding:25px 35px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    min-width:160px;
    transition:0.3s ease;
}

.feature-box:hover{
    transform:translateY(-5px);
}

.feature-box h3{
    font-size:28px;
    color:#4c6574;
    margin-bottom:8px;
    font-family:Georgia, serif;
    font-weight:500;
}

.feature-box span{
    color:#666666;
    font-size:15px;
    letter-spacing:1px;
}

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

.about-btn{
    display:inline-block;
    padding:16px 34px;
    background:#4c6574;
    color:#ffffff;
    text-decoration:none;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    border-radius:4px;
    transition:0.3s ease;
}

.about-btn:hover{
    background:#2e4654;
}

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

.modern-about-image{
    flex:1;
    min-width:320px;
    position:relative;
}

.modern-about-image img{
    width:100%;
    border-radius:25px;
    display:block;
    object-fit:cover;
    box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

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

@media(max-width:991px){

    .modern-about-container{
        flex-direction:column-reverse;
    }

    .modern-about-content h2{
        font-size:52px;
    }

    .modern-about-content p{
        font-size:18px;
    }

}

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

@media(max-width:768px){

    .modern-about-section{
        padding:0 20px 70px 20px;
    }

    .modern-about-content h2{
        font-size:38px;
    }

    .modern-about-content p{
        font-size:16px;
        line-height:1.8;
    }

    .about-features{
        gap:15px;
    }

    .feature-box{
        width:100%;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-67e4407 *//* ===================================
RESET
=================================== */

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

/* ===================================
BODY
=================================== */

body{
  font-family:'Poppins', sans-serif;
  background:#ffffff;
  overflow-x:hidden;
}

/* ===================================
REMOVE ELEMENTOR WIDTH ISSUE
=================================== */

.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap{
  width:100% !important;
  max-width:100% !important;
}

/* ===================================
BACKGROUND
=================================== */

.gallery-bg{

  width:100vw;
  max-width:100vw;

  margin-left:calc(-50vw + 50%);

  background:url('https://escalarealty.in/wp-content/uploads/2026/05/Alocassia-Manor-I.jpg') center center no-repeat;

  background-size:cover;

  background-attachment:fixed;

  overflow:hidden;

  position:relative;
}

/* ===================================
DARK OVERLAY
=================================== */

.gallery-bg::before{

  content:'';

  position:absolute;

  inset:0;

  background:rgba(0,0,0,0.35);

  z-index:1;
}

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

.gallery-section{
  position:relative;
  z-index:2;
  padding:90px 0;
}

/* ===================================
WRAPPER
=================================== */

.gallery-wrapper{
  width:100%;
  overflow:hidden;
}

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

.gallery-title{

  text-align:center;

  margin-bottom:50px;

  font-size:58px;

  font-weight:400;

  font-family:Georgia, serif;

  color:#ffffff;

  letter-spacing:1px;
}

/* ===================================
SLIDER
=================================== */

.gallery-slider{
  width:100%;
  overflow:hidden;
  position:relative;
}

/* ===================================
TRACK
=================================== */

.gallery-track{

  display:flex;

  align-items:center;

  gap:22px;

  width:max-content;

  animation:galleryScroll 30s linear infinite;

  padding-left:20px;
}

/* ===================================
ANIMATION
=================================== */

@keyframes galleryScroll{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }

}

/* ===================================
PAUSE ON HOVER
=================================== */

.gallery-slider:hover .gallery-track{
  animation-play-state:paused;
}

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

.gallery-card{

  width:380px;

  aspect-ratio:16/10;

  flex-shrink:0;

  border-radius:24px;

  overflow:hidden;

  position:relative;

  background:#ffffff;

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

  transition:0.4s ease;

  display:flex;

  align-items:center;

  justify-content:center;
}

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

.gallery-card:hover{
  transform:translateY(-8px);
}

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

.gallery-image{

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

  display:block;

  transition:0.5s ease;
}

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

.gallery-card:hover .gallery-image{
  transform:scale(1.08);
}

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

@media(max-width:767px){

  .gallery-bg{
    background-attachment:scroll;
  }

  .gallery-section{
    padding:60px 0;
  }

  .gallery-title{
    font-size:34px;
    margin-bottom:30px;
  }

  .gallery-track{
    gap:12px;
    padding-left:12px;
    animation-duration:20s;
  }

  .gallery-card{

    width:220px;

    aspect-ratio:16/10;

    border-radius:16px;
  }

}

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

@media(min-width:768px) and (max-width:1024px){

  .gallery-bg{
    background-attachment:scroll;
  }

  .gallery-title{
    font-size:46px;
  }

  .gallery-track{
    gap:16px;
  }

  .gallery-card{

    width:300px;

    aspect-ratio:16/10;
  }

}/* End custom CSS */