/* =======================================================
   AVSAR REALTY - RESPONSIVE MEDIA QUERIES
   Mobile-First Approach
   Breakpoints: 480px, 768px, 1024px, 1366px
======================================================= */

/* =======================================================
   LARGE DESKTOP (1366px and above) - Optional Enhancements
======================================================= */
@media (min-width: 1366px) {
    .container {
        max-width: 1400px;
    }
}

@media (max-width: 1440px) {

    .como-flex {
        margin: 0;
        padding: 0 20px;
    }

    .symphony-sec .lightGalleryBtn {
        margin-top: 50px;
    }
    .project-navigation{
        width: 90%;
    }
    .project-navigation.fixed{
        width: 70%;
    }

    .welcome-grid{
        gap: 20px;
    }
    .project-banner .tagy-block{
        width: 70%;
    }
    .project-banner .tagy-block h2{
        line-height: 150%;
    }
    .gotham-num{
        font-size: 3rem;
    }
    .serif-head,.job-header .serif-head,
    .whyjoin .serif-head{
        font-size: 32px;
    }
    /* .visionMission-section .welcome-left p,
    .vm-span{
        font-size: 14px;
        font-weight: 500;
    } */
    .visionMission-section .patterny{
        bottom: 0;
        margin-top: 0;
    }
    .visionMission-section .bg-image {
        margin-top: 0;
        height: 700px;
        object-fit: cover;
        object-position: bottom;
        width: 100%;
    }
    .welcome-section{
        padding: 50px 0;
    }
    .score-wrapper{
        padding: 50px 0;
    }
    .score-wrapper{
        border-radius: 0 0 50px 50px;
    }
    .floor-plan-sec .floor-details h4{
        font-size: 14px;
        font-weight: 500;
    }
    .floor-plan-sec .plan-block .floor-details{
        padding: 20px 20px;
    }
    .floor-plan-sec .floor-details li{
        font-size: 14px;
    }
    .brochure{
        font-size: 14px;
    }
    .specification-sec .specs .item .title{
        font-weight: 500;
        font-size: 14px
    }
    .gallery-crc{
        margin-left: 0%;
    }
    .specification-sec .padd-left {
        padding-left: 50px;
    }
    .project-block .overview-blc .ovy-list {
        min-height: 180px;
    }
}

@media (max-width: 1366px) {

    .partnershipStories .d-item{
        gap: 20px;
    }
    .contactPerson p.dsg{
        font-size: 16px;
    }
    .contactPerson h4{
        font-size: 20px;
    }
    .project-block h3 {
        font-size: 32px;
    }
    .owl-carousel.developer {
        padding: 0 50px;
    }

    .job-header {
        margin-bottom: 20px;
    }
    .developer .d-item{
        max-height: 400px !important;
        height: 400px !important;
    }
    .gallery-crc{
        padding: 0 0px 0 50px;
    }

    .usp-content h3{
        font-size: 32px;
    }
    .specification-sec .padd-left {
        padding-left: 5%;
    }

    .floor-plan-sec .plan-block{
        width: 90%;
    }
    #amenities-items .owl-dots{
        width: 60%;
        margin: 30px auto 0;
    }
    .symphony-sec, .floor-plan-sec, .testiminial-sec{
        padding: 50px 0;
    }
    .floor-plan-sec .btn-tab-block li button.j-btn{
        font-weight: 450;
        font-size: 14px;
        padding: 12px 6px;
    }
}

@media (max-width: 1280px) {

    .page-banner .flexi-block{
        top: 90px;
        position: relative;
        left: initial;
        right: initial;
    }
    .page-banner .flexi-block img{
        height: 350px;
    }
    .page-banner .flexi-block img {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }
    .page-banner #elastic-continor {
        height: auto;
        position: relative;
    }
    .page-banner .top-banner-block .year-block {
        position: relative;
        top: initial;
        flex: 0.5;
        opacity: 1 !important;
    }
    .page-banner .top-banner-block .short-text-block {
        width: 100%;
        position: relative;
        bottom: initial;
        right: initial;
        flex: 1;
        opacity: 1 !important;
    }
    .welcome-grid{
        grid-template-columns: 0.5fr 1fr;
    }

    .top-banner-block{
        display: flex;
        gap: 30px;
        top: 100px;
        position: relative;
        align-items: center;
    }

    .whyjoin-desc{
        font-size: 14px;
        line-height: 175%;
    }
    .elos-listy{
        justify-content: flex-start;
        gap: 0px;
        padding: 0;
        margin: 0;
    }
    .elos-listy li span{
        font-size: 50px;
    }
    .elos-listy li a{
        left: 30px;
    }

    .project-navigation ul{
        gap: 20px;
    }
    .project-navigation ul li a{
        font-size: 12px;
    }
    .project-navigation ul li .btn{
        padding: 10px 12px;
    }
    .visionMission-section .bg-image{
        height: 600px;
    }
    .visionMission-section{
        padding: 50px 0 0 0;
    }
    .overview-sec p.parame{
        font-size: 14px;
    }
    .pups small{
        font-size: 12px;
        margin-bottom: 15px;
    }
    .pups p span {
        font-size: 32px;
    }
    .project-navigation.fixed {
        width: 90%;
    }
    .tagy-block .center-aligned{
        top: initial;
        transform: initial;
    }

}

@media (max-width: 1140px) {
    
    .project-block h3 {
        font-size: 28px;
    }
    .location-sec .locate-details .highlights .icon{
        width: 50px;
        height: 50px;
    }
    .project-navigation.fixed {
        width: 100%;
    }
    .project-navigation img {
        width: auto;
        height: auto;
        max-width: 150px;
    }
    .project-navigation ul li .btn{
        font-size: 12px;
    }
    
    .project-navigation ul {
        gap: 15px;
    }
    .project-banner .tagy-block {
        width: 90%;
    }
    .project-banner .tagy-block {
        width: 90%;
        height: auto;
    }
    .project-block .overview-blc .unit-area p{
        font-size: 20px;
    }
    .footy-pattern {
        margin-bottom: 40px;
    }
    footer .igbc-logo {
        height: 100px;
    }
    .badges img {
        height: 40px;
        width: auto;
    }
    
}    


/* =======================================================
   TABLET & SMALLER DESKTOP (Max 1024px)
======================================================= */
@media (max-width: 1024px) {

    .topBannerSection{
        height: 60vh;
    }
    .hero-symbol-before, .hero-symbol-after{
        width: 300px;
        height: 300px;
    }
    .hero-symbol-before{
        left: calc(50% + 50px);
    }
    .hero-symbol-after{
        left: calc(50% - 50px);
    }

    .score-section .score-box{
        margin: 0px 0;
    }
    .visionMission-section {
        padding: 50px 0;
    }
    p.notes{
        padding: 10px;
    }
    .contactPerson{
        margin-bottom: 20px;
    }

    .partnershipStories .d-item {
        display: flex;
        gap: 15px;
        align-items: flex-start;
        flex-direction: column;
    }
    .partnershipStories .d-item img{
        margin: 0;
    }
    .architect-sec img{
        max-height: 70px;
        margin-bottom: 20px;
    }
    .architect-sec .roundy-disclaim img {
        max-height: 150px;
        margin-bottom: 0px;
    }
    .roundy-disclaim{
        border-radius: 50px 50px 0 0;
    }
    .developer img{
        max-width: 150px;
        height: auto;
        margin-bottom: 20px;
    }
    .gallery-crc {
        padding: 0 0px 0 20px;
    }
    .call-back-sec .form-wrapper {
        padding: 25px 25px 80px 25px;
    }
    .owl-carousel.developer {
        padding: 0 0px;
    }
    .project-banner .tagy-block{
        padding: 20px;
    }

    .tagy-block .como-flex{
        gap: 15px;
        padding: 0 0;
    }

    footer .social-icons{
        margin-top: 0;
    }
    .developer{
        margin-left: 2%;
    }
    .gallery-crc {
        margin-left: 0;
    }
    .call-back-sec{
        background-position: 0% 100%;
    }
    .call-back-sec .como-flex{
        flex-direction: column-reverse;
    }
    .specification-sec .fixy{
        position: relative;
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
    .specification-sec .como-flex{
        padding: 0 20px 20px;
    }

    .specification-sec .padd-left {
        padding: 30px 15px;
    }
    #amenities-items .owl-dots {
        width: 80%;
        margin: 20px auto 0;
    }
    .page-banner .top-banner-block .short-text-block small, small {
        font-size: 12px;
    }

    .comm-vh-block .glass-block .gb-soul{
        width: 90%;
    }

    /* Container */
    .container {
        padding: 0 20px;
        max-width: 100%;
    }

    /* Navigation */
    .main-nav {
        padding: 18px 40px;
    }

    .logo img {
        height: 38px;
    }

    .c-link {
        font-size: 13px;
    }

    /* Hero Section */
    .hero-section {
        height: 70vh;
    }

    .hero-content h1 {
        font-size: 4rem;
    }

    /* Typography */
    .serif-head, .job-header .serif-head,.whyjoin .serif-head {
        font-size: 2rem;
    }

    .sub-head {
        font-size: 13px;
    }

    /* Grid Layouts */
    .welcome-grid {
        grid-template-columns: 1fr;
        gap: 0px;
    }

    /* Score Section */
    .score-wrapper {
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center;
    }

    .about-page .visionMission-section {
        padding: 0;
        margin-bottom: 30px;
    }
    .who-we-are-sec ul li.tardes-listo img{
        height: 600px;
    }
    .who-we-are-sec ul li.tardes-listo {
        gap: 30px;
    }

    .score-divider {
        display: none;
    }

    .score-box {
        width: 45%;
    }

    /* Projects List */
    .project-list {
        flex-direction: column;
    }

    .project-list .pl-item-img {
        width: 100%;
        height: 400px;

        display: none;
    }

    .project-list .pl-item-list {
        width: 100%;
    }

    /* Project Details */
    .como-flex, .applyJobSec .como-flex{
        flex-direction: column;
        margin: 0;
        padding: 0 20px;
    }

    .como-lg-4,
    .como-lg-6,
    .como-lg-8 {
        width: 100%;
    }

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

    /* Project Navigation */
    .project-navigation {
        width: 90%;
        padding: 18px 25px;
    }

    .project-navigation img {
        width: 180px;
    }

    .project-navigation ul {
        gap: 10px;
    }

    .project-navigation ul li a {
        font-size: 12px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .f-col.certs {
        grid-column: span 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Accordion */
    .BenefitsAccordSec {
        margin-bottom: 40px;
    }

    .accord-header {
        padding: 18px;
    }

    .accord-label {
        font-size: 16px;
    }
    .whyjoin-desc{
        font-size: 14px;
    }
}

@media (max-width: 992px) {

    .job-meta{
        gap: 10px;
    }
    .job-details-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding-top: 20px;
    }
    .whyjoin-grid {
        grid-template-columns: 1fr;
        gap: 5px;
        margin-bottom: 25px;
    }
    .whyjoin-left {
        max-width: 100%;
    }
    .whyjoin-right{
        height: 400px;
    }
    .whyPartnerSection .whyjoin-right {
        height: auto;
    }
}

@media (max-width: 991px) {

    .welcome-section {
        padding: 40px 0;
        text-align: center;
    }
    .welcome-section .reveal-text p {
        text-align: left;
        hyphens: initial;
    }
    .visionMission-section .bg-image {
        height: 500px !important;
    }
    .project-block .overview-blc small,
    .project-block .overview-blc .ovy-list{
        display: none;
    }
    .project-block .overview-blc .unit-area small{
        display: block;
    }

    .topBannerSection{
        height: 50vh;
    }
    
}    

@media (max-width: 860px) {
    .project-list .my-projects li.prj-list{
        width: 48%;
    }
    .project-navigation {
        width: 98%;
        padding: 15px 15px;
    }
    .project-navigation ul li .btn {
        padding: 6px 8px;
        font-size: 11px;
    }
    .project-navigation img{
        max-width: 130px;
    }
    .project-navigation.fixed ul li a {
        font-size: 11px !important;
    }
    .specification-sec .una-flexi{
        flex-direction: column;
        gap: 20px;
    }
    .specification-sec .una-flexi div {
        width: 100%;
    }
    .sub-head, .specification-sec .sub-head {
        font-size: 10px;
        margin-bottom: 10px;
    }
    .specification-sec .brochure{
        float: left;
    }
    .specification-sec .specs{
        max-width: 100%;
        gap: 20px;
        margin-top: 30px;
    }
}

/* =======================================================
   TABLET (Max 768px)
======================================================= */
@media (max-width: 768px) {

    .score-section .score-box {
        margin: 10px 0;
    }

    .copyright{
        padding-bottom: 60px;
    }
    /* Container */
    .container {
        padding: 0 25px;
    }

    .como-flex {
        padding: 0 10px;
        margin: 0px;
    }

    /* Navigation */
    .main-nav {
        padding: 15px 25px;
    }

    .logo img {
        height: 35px;
    }

    .desktop-only {
        display: none !important;
    }

    .burger-menu {
        width: 22px;
    }

    /* Menu Overlay */
    .menu-link {
        font-size: 2.5rem;
    }

    /* Hero Section */
    .hero-section {
        height: 70vh;
    }

    .video-bg iframe {
        width: 100%;
        height: 100%;
        transform: none;
        left: 0;
        top: 0;
        object-fit: cover;
    }

    .custom-cursor {
        display: none;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    /* Progress Bar */
    .progress-container {
        bottom: 30px;
    }

    .progress-item {
        width: 60px;
    }

    /* Typography */
    .serif-head,.job-header .serif-head,.whyjoin .serif-head {
        font-size: 2rem;
        line-height: 100%;
    }

    .sub-head {
        font-size: 12px;
    }

    .parame,
    .whyjoin-desc {
        font-size: 15px;
    }

    /* Buttons */
    .btn-whyjoin {
        padding: 15px 28px;
        font-size: 13px;
    }

    /* Banner Sections */
    .project-banner,
    .project-details-banner {
        /* height: 60vh; */
        height: auto;
    }

    .tagy-block {
        bottom: 40px;
    }

    .welcome-grid {
        gap: 30px;
    }

    /* Score Section */
    .score-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .score-box {
        width: 100%;
    }

    .gotham-num {
        font-size: 3.5rem;
    }

    /* USP Section */
    .usp-container {
        flex-direction: column;
    }

    .usp-item {
        height: 30vh;
        width: 100%;
    }

    .usp-item.active {
        flex: 1;
        height: 50vh;
    }

    /* Projects Section */
    .project-list .pl-item-img {
        height: 300px;
    }

    .project-block h3 {
        font-size: 28px;
    }

    .unit-area {
        flex-direction: column;
        gap: 20px;
    }

    /* Project Details Page */
    .project-navigation {
        width: 95%;
        padding: 15px 20px;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .project-navigation img {
        width: 160px;
    }

    .project-navigation ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .project-navigation ul li a {
        font-size: 13px;
    }

    .project-navigation.fixed {
        width: 100%;
        padding: 12px 20px;
        border-radius: 0;
    }

    .project-navigation.fixed img {
        width: 100px !important;
    }

    .project-navigation.fixed ul li a {
        font-size: 11px !important;
    }

    /* Overview Section */
    .pups .row-flex {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    /* Amenities Carousel */
    .owl-carousel .ame-items {
        margin: 0 10px;
    }

    /* Floor Plans */
    .btn-tab-block {
        flex-direction: row;
        gap: 10px;
    }

    .btn-tab-block li {
        width: 100%;
    }

    .btn-tab-block .j-btn {
        width: 100%;
    }

    /* Specifications */
    .specs {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .specification-sec .una-flexi {
        flex-direction: column;
        gap: 30px;
    }

    /* Location */
    .highlights .grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Call Back Form */
    .form-wrapper {
        padding: 40px 30px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .price-box {
        padding: 30px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .f-col.certs {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .links-inner {
        flex-direction: column;
        gap: 15px;
    }

    .social-icons {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Whyjoin Section */
    .whyjoin-list {
        margin-bottom: 35px;
    }

    .whyjoin-item {
        padding: 8px 0;
    }

    .item-number {
        font-size: 50px;
        min-width: 65px;
    }

    .item-title {
        font-size: 18px;
    }

    /* Accordion Section */
    .accord-header {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .accord-label {
        font-size: 16px;
    }

    .accord-content p {
        font-size: 14px;
    }

    /* Job Accordion Section */
    .job-accordion-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px 30px;
        gap: 20px;
    }

    .job-title {
        font-size: 24px;
    }

    .job-toggle-btn {
        width: 100%;
        justify-content: center;
    }

    .job-details-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .job-accordion-body,
    .job-accordion-item.active .job-accordion-body {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Job Application Form */
    .applyJobSec .form-wrapper {
        padding: 0 30px 60px;
    }

    .jobApplicationForm .form-row {
        grid-template-columns: 1fr;
    }

    /* Partner Page */
    .whyPartnerSection .whyjoin-grid {
        gap: 30px;
    }

    /* Developer Section */
    .developer .d-item {
        padding: 40px 30px;
    }

    .BenefitsAccordSec .accord-header{
        flex-direction: row;
    }
}

/* =======================================================
   MOBILE (Max 767px)
======================================================= */
@media (max-width: 767px) {


    .score-wrapper {
        border-radius: 0 0 0px 0px;
        padding: 20px 0 50px;
    }
    .about-page .score-wrapper .container {
        padding-bottom: 50px;
    }
    .copyright{
        font-size: 14px;
    }
    .upcoming-proj .upcoming-text, .upcoming-text{
        position: absolute;
        right: 4px;
        top: 4px;
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 11px;
        line-height: 150%;
    }

    .project-block .page-link {
        gap: 10px;
        padding: 10px;
        width: 100%;
        border: 1px solid;
        border-radius: 10px;
        font-size: 12px;
    }
    .project-block .page-link span {
        font-size: 12px;
    }
    .whyjoin-grid{
        padding: 0 0;
    }

    /* Page Banner - Sequential Positioning on Mobile */
    .flexi-block {
        position: relative;
    }

    .top-banner-block .year-block {
        position: relative;
    }

    .short-text-block {
        position: relative;
    }

    .welcome-grid {
        gap: 20px;
    }
    .usp-section{
        height: 100vh;
    }
    p.notes{
        padding: 10px 20px;
        line-height: 120%;
        bottom: 20px;
    }
    .topBannerSection{
        height: 40vh;
    }
    .contact-sec .title{
        font-size: 16px;
    }

    .project-list .project-block{
        border-radius: 16px;
    }
    .project-block .overview-blc .unit-area div{
        width: 100%;
    }
    .unit-area .phase-dropdown{
        padding-right: 20px;
    }
    .project-block .botmy {
        padding: 15px 15px 10px;
        flex-direction: column-reverse;
        gap: 10px;
    }
    .phase-dropdown select{
        width: 100%;
        font-size: 20px;
    }
    .unit-area .phase-dropdown::after{
        right: 0;
    }
    .project-block .overview-blc .unit-area{
        flex-direction: column;
        gap: 10px;
        margin: 0px;
    }
    .nov-com{
        margin-top: 15px;
    }
    .welcome-section{
        text-align: left;
    }
    .usp-content h3 {
        font-size: 26px;
    }
    .contact-sec .section {
        margin-bottom: 20px;
    }

.about-page .visionMission-section .serif-head,
.job-header .serif-head,.whyjoin .serif-head {
    font-family: var(--font-serif);
    font-size: 32px;
    line-height: 150%;
    font-weight: 400;
}
.who-we-are-sec ul li.tardes-listo img {
    height: 400px;
}
.who-we-are-sec ul li.tardes-listo:not(:last-child) {
    margin-bottom: 20px;
}

    footer .links-inner {
        flex-direction: row;
    }
    footer .links-inner .menu-footer-left-container,
    footer .links-inner .menu-footer-right-container{
        flex-basis: 100%;
    }
    footer .links-inner ul{
        flex: 1;
    }
    .footy-pattern{
        height: 100px;
        margin-bottom: 0;
    }
    footer .container {
        padding: 0px 20px;
    }
    footer .f-logo {
        display: block;
        margin: 30px auto;
    }

    .contact-sec .form-wrapper {
        padding: 20px;
        border-radius: 15px;
        background-color: #F6F3F3;
    }

    .elos-listy li span {
        font-size: 46px;
    }
    .elos-listy li a{
        left: 15px;
    }
    .elos-listy li{
        height: auto;
    }
    .project-list-sec{
        padding: 30px 0;
    }

    .my-navigation{
        padding: 20px 0px;
    }
    .burger-menu.active .line-2{
        transform: rotate(-45deg) translate(1px, -1px);
    }
    .page-banner .flexi-block{
        border-radius: 0px !important;
        top: initial;
        position: relative;
        height: 50vh;
        width: 100%;
    }
    .page-banner .top-banner-block{
        position: relative;
        height: auto;
        gap: 0;
        top: initial;
        position: relative;
        align-items: center;
        flex-direction: column;
    }
    .page-banner .top-banner-block .year-block {
        width: 100%;
        padding: 0px 0px 0;
        opacity: 1 !important;
        position: relative;
        top: initial;
        left: initial;
    }
    .page-banner .flexi-block img {
        width: 100%;
        height: 100%;
    }
    .page-banner #elastic-continor {
        height: auto;
        position: relative;
    }
    .page-banner .top-banner-block .short-text-block{
        width: 100%;
        opacity: 1 !important;
        top: initial;
        position: relative;
        padding: 20px 0 0 0;
    }
    .page-banner .bottom-banner-block{
        padding: 0 0px 30px;
    }
    .page-banner .bottom-banner-block {
        margin-top: 10px;
    }

.about-page .visionMission-section .welcome-grid{
    flex-direction: column;
}
.about-page .visionMission-section .welcome-left, .about-page .visionMission-section .welcome-right {
    width: 100%;
}
.about-page .visionMission-section .v-border{
    display: none;
}
.comm-vh-block .glass-block .gb-soul{
    width: 100%;
    padding: 20px 30px;
}
.about-page .visionMission-section .serif-head{
    text-align: center;
}
.about-page .visionMission-section .mac-flex {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    flex-direction: column;
    justify-content: center;
}
.about-page .visionMission-section p{
    text-align: center;
}
.who-we-are-sec ul li.tardes-listo,
.who-we-are-sec ul li.tardes-listo:nth-child(even) {
    gap: 20px;
    flex-direction: column;
}
.who-we-are-sec ul li.tardes-listo figure,
.who-we-are-sec ul li.tardes-listo .user-details {
    width: 100%;
}
.who-we-are-sec ul li.tardes-listo .user-details .sub-head {
    margin: 15px 0 30px;
}
.who-we-are-sec ul li.tardes-listo:first-child figure,
.who-we-are-sec ul li.tardes-listo:last-child figure {
    border-radius: 10px 10px;
}
.project-list .my-projects{
    gap: 20px;
    flex-direction: column;
    margin: 0px;
}
.project-list .my-projects li.prj-list {
    width: 100%;
}
.project-block .overview-blc .unit-area{
    align-items: flex-start;
}

.overview-sec .row-flex{
    align-items: flex-start;
    flex-direction: column;
}
.location-sec .locate-details .highlights .grid{
    gap: 15px;
    flex-direction: column;
}
#amenities-items .owl-dots{
    width: 100%;
}
#amenities-items .owl-dot {
    width: 30%;
}
#amenities-items .owly-btn small{
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0;
    display: inline-block;
}
#amenities-items .owly-btn{
    height: 130px;
    padding: 10px;
}
#amenities-items .owly-btn img {
    width: 75px;
}
#amenities-items .owl-item.active.center {
    transform: scale(1);
}

.symphony-sec .text-center, 
.floor-plan-sec .text-center, 
.testiminial-sec .text-center{
    text-align: left;
}
.lightGalleryBtn .owl-carousel .ame-items {
    margin: 0 0px;
}
.specification-sec .padd-left {
    padding: 30px 0px;
}
.specification-sec .specs .item {
    margin-bottom: 15px;
}

.symphony-sec, .floor-plan-sec, .testiminial-sec{
    padding: 40px 20px;
}
#amenities-items .owl-dots{
    margin: 10px auto 0;
}

.como-flex {
    padding: 0 15px;
}
.padd-left {
    padding-left: calc(var(--bs-gutter-x) * .5);
}
.specification-sec .una-flexi div {
    width: 100%;
}
.specification-sec .specs{
    max-width: 100%;
}
.specification-sec .specs {
    max-width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0px;
    margin-top: 30px;
}
.floor-plan-sec .plan-block{
    width: 100%;
    border-radius: 20px;
    padding: 15px;
}
.floor-plan-sec .plan-block .brochure {
    position: relative;
    top: initial;
    right: initial;
    border-radius: 10px;
    z-index: 10;
    margin: 0;
    width: 100%;
}
.floor-plan-sec .plan-block .floor-details {
    background: #f7f3f1;
    border-radius: 0 0 15px 15px;
    padding: 15px;
    max-width: 100%;
    font-family: var(--font-text);
    position: relative;
    top: initial;
    left: initial;
}
.floor-plan-sec .floor-details>div {
    margin-bottom: 15px;
}
.floor-plan-sec .floor-details h4 {
    font-size: 14px;
    margin-bottom: 10px;
}
.floor-plan-sec .floor-details li{
    font-size: 14px;
}
.specification-sec .specs .item .title{
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
}
.specification-sec .brochure {
    width: 100%;
}
.padila {
    padding-top: 20px;
    padding-bottom: 20px;
}
.specification-sec{
    padding-bottom: 20px;
}
.location-sec .locate-details .highlights {
    padding: 20px 0px;
}

.locate-details .text-center {
    text-align: left;
}
.locate-details .container{
    padding: 0px;
}
.call-back-sec .form-wrapper {
    padding: 20px;
}
.gallery-crc{
    padding: 0;
}
.gallery-crc.owl-carousel .owl-nav .owl-prev {
    left: 0px;
}
.gallery-crc.owl-carousel .owl-nav .owl-next {
    right: 0px;
}
.gallery-crc .owl-nav, .developer .owl-nav{
    margin-top: -25px;
}
.owl-carousel.developer {
    padding: 0 0px 0 20px;
}
.developer-sec {
    padding: 30px 0;
}

.location-sec .locate-details {
    padding: 40px 20px 15px;
    border-radius: 0;
}
#EnquirePanel .como-flex {
    flex-direction: column-reverse;
}
.call-back-sec {
    background: #ffffff url(../img/enquiry-bg.jpg) 0% 100% no-repeat;
    padding: 40px 0;
}
.call-back-sec .price-box {
    max-width: 100%;
    margin: 20px auto;
    padding: 0;
}
.gallery-crc {
    margin-top: 30px;
    margin-left: 0;
}
.developer {
    margin-top: 30px;
    margin-left: 0;
}
.developer .d-item{
    height: 100%;
    max-height: 100%;
}
.developer img{
    margin-bottom: 20px;
}
.roundy-disclaim {
    border-radius: 30px 30px 0 0;
    padding: 25px 0;
    margin-top: 30px;
}
.roundy-disclaim .floax div{
    text-align: center;
}
.roundy-disclaim .floax small{
    margin: 0;
}
.roundy-disclaim h6{
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid rgb(0 0 0 / 15%);
}
.symphony-sec .lightGalleryBtn {
    margin-top: 30px;
}
.sub-head{
    margin-bottom: 10px;
}

#EnquirePanel .como-flex{
    padding: 0 0px;
}

.overview-sec p.parame{
    font-size: 14px;
}

.project-banner img{
    height: 300px;
}
.project-banner .pattery{
    display: none;
}
.whyjoin-image-wrapper{
    height: 400px;
}
.whyjoin .serif-head{
    margin-bottom: 15px;
}
.whyjoin-desc{
    margin-bottom: 30px;
}
.btn-whyjoin{
    width: 100%;
    justify-content: center;
    border-radius: 12px;
}
.job-header-content,.AplybtnWrap {
    flex: 1;
    width: 100%;
}

.como-lg-4, .como-lg-6, .como-lg-8 {
    width: 100%;
    padding: 0px;
}
.elos-listy li{
    width: 100%;
}
.elos-listy{
    flex-direction: column;
}
.contact-sec{
    padding: 30px 0;
}

.tagy-block .center-aligned {
    position: relative;
    top: initial;
    transform: initial;
}

.contact-sec .como-flex {
    padding: 0 0px;
}
.contact-sec .contact-wrapper {
    margin: auto;
    display: grid;
    grid-template-columns: 100%;
    gap: 0px;
    margin-top: 15px;
    justify-items: start;
    align-content: start;
}


.fleximanda {
    padding: 15px 15px;
    gap: 10px;
    min-height: fit-content;
}

/*////////////////////////////////////*/

    /* Container */
    .container {
        padding: 0 20px;
    }

    /* Navigation */
    .main-nav {
        padding: 12px 20px;
    }

    .logo img {
        height: 32px;
    }

    .burger-menu {
        width: 20px;
    }

    .burger-menu .line {
        height: 2px;
        margin: 5px 0;
    }

    /* Menu Overlay */
    .menu-link {
        font-size: 2rem;
    }

    /* Hero Section */
    .hero-section {
        height: 60vh;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 0.9rem;
    }

    /* Progress Bar */
    .progress-container {
        bottom: 20px;
        gap: 8px;
    }

    .progress-item {
        width: 50px;
        height: 3px;
    }

    /* Typography */
    .serif-head,.whyjoin .serif-head,.whyjoin .serif-head {
        font-size: 26px;
        line-height: 120%;
    }

    .sub-head {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .parame,
    .whyjoin-desc {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Buttons */
    .btn-whyjoin {
        padding: 12px 22px;
        font-size: 12px;
    }

    /* Banner Sections */
    .project-details-banner {
        height: 40vh;
        overflow: visible;
    }
    .project-banner{
        height: auto;
    }
    .project-details-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
.project-banner .tagy-block {
    width: 100%;
    border-radius: 20px;
    padding: 20px;
    margin-top: 0;
    position: relative;
    height: auto;
}
.project-banner .tagy-block .welcome-grid{
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}
.project-banner .tagy-block h2 {
    color: #000000;
    line-height: 120%;
}
.project-banner .tagy-block .welcome-right {
    width: 100%;
}
.accord-item.active .accord-content {
    padding: 15px;
    max-height: auto;
}
.whyPartnerSection .secCommon{
    padding: 20px 0;
}
.whyPartnerSection{
    padding: 20px 0;
}
.whyPartnerSection .whyjoin-grid {
    gap: 20px;
    display: flex;
    justify-content: start;
    flex-direction: column;
    align-items: flex-start;
}

    .tagy-block {
        bottom: 20px;
        padding: 0 20px;
    }

    .welcome-left h2 {
        font-size: 26px;
    }

    .welcome-right p {
        font-size: 14px;
    }

    /* Score Section */
    .score-box h2 {
        font-size: 2.5rem;
    }

    .gotham-num {
        font-size: 2.8rem;
    }


    /* Projects Section */
    .project-list .pl-item-img {
        height: 250px;
        display: none;
    }
    .fleximanda .flemwe:first-child {
        width: 25%;
    }
    .fleximanda .flemwe:last-child {
        width: 75%;
    }

    .fleximanda {
        padding: 15px 15px;
        gap: 15px;
        min-height: fit-content;
    }
    .project-block {
        padding: 0px;
    }
    .project-list .project-block figure img{
        border-radius: 15px 15px;
    }
    .project-block .botmy {
        padding: 15px 15px;
        flex-direction: column-reverse;
        gap: 0;
    }
    .dnd-micro {
        gap: 10px;
        flex-direction: column;
    }
    .microsite {
        padding: 10px 10px;
        font-size: 12px;
        width: 100%;
    }

    .project-block h3 {
        font-size: 24px;
    }

    .project-block .overview-blc {
        padding: 15px 15px;
        min-height: fit-content;
    }

    .project-block .boldy {
        font-size: 11px;
        padding: 3px 8px;
    }

    .unit-area div small {
        font-size: 11px;
    }

    .unit-area div p {
        font-size: 16px;
    }

    .ovy-list li {
        font-size: 14px;
    }

    .page-link span {
        font-size: 14px;
    }

    /* =====================================================
       PROJECT NAVIGATION - Mobile Optimization
       - Horizontal scroll for menu items
       - Fixed "Enquire Now" button on right side
    ===================================================== */
    
    /* Base Navigation Styles */
    .project-navigation {
        padding: 12px 15px;
        gap: 15px;
    }

    .project-navigation img {
        width: 140px;
    }

    .project-navigation ul {
        gap: 8px;
    }

    .project-navigation ul li a {
        font-size: 11px;
    }

    .project-navigation ul li.btn {
        padding: 5px 8px;
        font-size: 10px;
    }

    /* Fixed Navigation State */
    .project-navigation.fixed {
        bottom: 0;
        padding: 10px 8px;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }

    /* Logo Container - Fixed Width */
    .project-navigation.fixed div:first-child {
        flex-shrink: 0;
        width: 55px;
    }

    .project-navigation.fixed img {
        width: 100% !important;
    }

    /* Menu Container - Scrollable with Fixed Button */
    .project-navigation.fixed div:last-child {
        flex: 1;
        position: relative;
        overflow: hidden;
    }

    .project-navigation.fixed ul {
        display: flex;
        gap: 8px;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-right: 100px;
        white-space: nowrap;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    .project-navigation.fixed ul::-webkit-scrollbar {
        display: none;
    }

    /* Menu Items - Scrollable */
    .project-navigation.fixed ul li {
        flex-shrink: 0;
    }

    .project-navigation.fixed ul li a {
        font-size: 11px !important;
        white-space: nowrap;
        display: block;
        line-height: 25px;
    }

    /* Fixed Button - Always Visible on Right */
    .project-navigation.fixed ul li:last-child {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 8px;
        padding: 0;
        z-index: 10;
        box-shadow: -5px 0 10px rgba(0, 0, 0, 0.05);
    }

    .project-navigation.fixed ul li:last-child a {
        padding: 0px 8px !important;
        font-size: 10px !important;
        font-weight: 600;
    }
    

    /* Overview Section */
    .overview-sec {
        padding: 40px 0 0 0;
    }

    .pups .row-flex {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .pups small{
        letter-spacing: 0.4px;
        font-weight: 500;
        font-style: normal;
        font-size: 12px;
        color: #959595;
        letter-spacing: 0.4px;
    }

    .pups .row-flex > div {
        text-align: center;
    }
    .pups p span {
        font-size: 36px;
    }

    .overview-sec .pups .row-flex > div {
        text-align: left;
        width: 100%;
    }
    .overview-sec .pups small{
        margin-bottom: 15px;
    }

    /* Amenities */
    .owl-nav button {
        width: 35px;
        height: 35px;
    }

    /* Floor Plans */
    .plan-img {
        height: auto;
    }

    .floor-details {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* Specifications */
    .specification-sec .una-flexi {
        gap: 20px;
    }

    .brochure {
        padding: 12px 20px;
        font-size: 14px;
    }

    /* Location */
    .locate-details iframe {
        height: 300px;
    }

    .highlights .box {
        padding: 5px;
    }

    /* Call Back Form */
    .form-wrapper {
        padding: 30px 20px;
    }

    .form-title {
        font-size: 20px;
        margin-bottom: 25px;
    }

    .form-row {
        gap: 12px;
    }

    form input,
    form textarea,
    form select {
        padding: 12px 15px;
        font-size: 14px;
    }

    .phone span {
        font-size: 14px;
        padding: 0 12px;
    }

    .checkbox {
        gap: 10px;
    }

    .checkbox span {
        font-size: 12px;
    }

    form button[type="submit"],
    .submit-btn {
        padding: 18px;
        font-size: 16px;
    }

    .price-box {
        padding: 20px;
    }

    .price-box .label {
        font-size: 14px;
    }

    .price-box .price-line {
        font-size: 14px;
    }

    /* Footer */
    .footer-grid {
        gap: 20px;
    }

    .f-logo {
        width: 140px;
        margin-bottom: 30px;
    }

    .address-box h5 {
        font-size: 16px;
    }

    .address-box p,
    .address-box a {
        font-size: 14px;
        margin-bottom: 0px;
    }

    .links-inner ul li a {
        font-size: 14px;
    }

    .badges {
        gap: 15px;
    }

    .footer-bottom-grid .fb-grid-right{
        gap: 10px;
        flex-direction: column;
    }
    .footer-bottom-grid .fb-grid-right span{
        display: none;
    }
    .footer-bottom-grid .fb-grid-right p {
        margin-left: 0;
        padding-top: 10px;
    }
    .badges img {
        height: auto;
        margin: 0 auto;
        width: 75%;
    }
    .project-template-default.single-project .copyright {
        padding-bottom: 100px !important;
    }
    footer .badges{
        justify-content: center;
        width: 100%;
    }

    .footer-bottom-grid {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .copyright p, .footer-bottom-grid .fb-grid-right p{
        font-size: 14px;
    }

    /* Whyjoin Section */
    .whyjoin {
        padding: 30px 0 30px;
    }

    .whyjoin-item {
        padding: 6px 0;
    }

    .item-number {
        font-size: 40px;
        min-width: 55px;
    }

    .item-title {
        font-size: 16px;
        margin: 0 0 0 -20px;
    }

    /* Accordion Section */
    .accord-title {
        font-size: 12px;
        margin-bottom: 18px;
    }

    .accord-header {
        padding: 14px;
    }

    .accord-label {
        font-size: 14px;
    }

    .accord-toggle {
        width: 20px;
        height: 20px;
    }

    .accord-content p {
        font-size: 14px;
    }

    /* Job Section */
    .jobSection{
        padding: 20px 0;
    }
    .job-header {
        margin-bottom: 15px;
    }
    .job-header .serif-head,.whyjoin .serif-head {
        font-size: 24px;
        text-align: left;
    }
    .job-header .serif-head{
        margin-bottom: 0;
    }

    .job-title {
        font-size: 32px;
    }
    .title-underline {
        width: 20px;
        height: 2px;
        margin: 0;
    }

    .job-category {
        font-size: 10px;
        padding: 4px 0px;
        margin: 0 0 10px 0;
    }

    .job-meta {
        flex-direction: column;
        gap: 6px;
        font-size: 14px;
    }

    .job-accordion-header {
        padding: 20px 20px 0;
    }

    .job-details-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .job-accordion-body,
    .job-accordion-item.active .job-accordion-body {
        padding: 20px;
    }
     .applyJobSec .como-flex {
        margin: 0;
        padding: 0;
    }
    .form-wrapper .form-title{
        font-size: 16px;
        text-align: center;
    }
    .form-wrapper .form-title::after{
        margin: 10px auto;
        width: 20px;
    }

    .job-toggle-btn {
        padding: 18px 24px;
        font-size: 14px;
    }

    /* Job Application Form */
    .applyJobSec h2 {
        padding: 0 20px 0 0;
        font-size: 1.6rem;
    }

    .applyJobSec .whyjoin-desc {
        font-size: 14px;
    }

    .applyJobSec .form-wrapper {
        padding: 20px 20px 40px;
    }

    .jobApplicationForm input,
    .jobApplicationForm textarea,
    .jobApplicationForm select {
        padding: 12px 14px;
        font-size: 14px;
    }

    .phone-input input {
        padding-left: 50px;
    }

    .phone-prefix {
        left: 14px;
        font-size: 14px;
    }

    .file-upload-label {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .upload-btn {
        width: 100%;
        font-size: 12px;
    }

    .file-info {
        font-size: 11px;
    }

    /* Developer/Partner Sections */
    .developer .d-item {
        padding: 30px 20px;
    }

    .developer .d-item img {
        max-width: 120px;
    }

    .developer .d-item p {
        font-size: 14px;
    }

    /* Architect Section */
    .architect-sec .serif-head {
        font-size: 1.8rem;
    }

    .architect-sec p {
        font-size: 14px;
    }

    .roundy-disclaim {
        padding: 30px 0;
    }

    .floax {
        flex-direction: row;
        gap: 20px;
        flex-wrap: wrap;
    }

    .roundy-disclaim .floax {
        display: flex;
        align-items: center;
        gap: 15px;
        justify-content: center;
    }

    .dis-det {
        font-size: 11px;
    }

    /* Video Modal */
    .video-close {
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
    }

    .usp-content {
        left: 20px;
        width: calc(100% - 40px);
        max-width: 100%;
    }

    .hero-progress-bar{
        left: 20px;
        bottom: 50px;
    }
}

/* =======================================================
   EXTRA SMALL MOBILE (Max 360px)
======================================================= */
@media (max-width: 360px) {
    .serif-head,.job-header .serif-head,.whyjoin .serif-head {
        font-size: 1.5rem;
    }

    .project-navigation {
        padding: 10px;
    }

    .project-navigation img {
        width: 120px;
    }

    .project-navigation ul li a {
        font-size: 10px;
    }

    .project-navigation.fixed img {
        width: 70px !important;
    }

    .project-navigation.fixed ul li a {
        font-size: 8px !important;
    }

    .hero-content h1 {
        font-size: 1.6rem;
    }

    .item-number {
        font-size: 35px;
        min-width: 50px;
    }

    .item-title {
        font-size: 14px;
    }
}