/* global css */



@font-face {

    font-family: 'BondoluoPeek';

    src: url('../fonts/BondoluoPeek.woff') format('woff'),

        url('../fonts/BondoluoPeek.woff2') format('woff2');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Nexa';

    src: url('../fonts/Nexa-ExtraLight.woff') format('woff'),

        url('../fonts/Nexa-ExtraLight.woff2') format('woff2');

    font-weight: 100;

    font-style: normal;

    font-display: swap;

}



body {

    font-family: "BondoluoPeek", sans-serif;

    overflow-x: hidden;

    counter-reset:section;

    background-color: #DFDEDB !important;

    color: #000;

}

html {

    scroll-behavior: smooth;

}

ul {

    padding: 0;

    margin: 0;

    list-style-type: none;

}

ul li {

    list-style-type: none;

}

.list-disc{

    list-style-type: disc;

    margin-left: 20px;

}

.list-decimal{

    list-style-type: decimal;

    margin-left: 20px;

}

a {

    text-decoration: none;

}

:focus-visible {

    outline: auto 0px;

}

.navbar-toggler:focus {

    box-shadow: none;

}

img {

    max-width: 100%;

    height: auto;

}



/* typography */

h1 {

    margin: 0px 0px 0px;

}

h2 {

   font-size:45px;

   line-height: 64px;

} 

h3{

    font-size:25px;

    line-height: 36px;

 }

h1,h2,h3,h4,h5,h6{

    margin-bottom: 0px;

}

p {

    font-size: 20px;

    margin: 0;

    line-height: normal;

}



 span.nexa-font{

font-family: "Nexa", sans-serif;

 }

 .container{

    max-width: 1360px;

    width: 100%;

}

a.btn {
    font-size: 18px;
    font-weight: 300;
    padding: 14px 36px;
    transition: 0.5s;
    height: 57px;
    border: 1px solid #000 !important;
    border-radius: 50px;
    width: 185px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    gap: 10px;
}
a.btn:focus{
outline: none !important;
}
a.btn.btn-secondary:focus{
    color: #fff !important;  
}

a.btn.btn-primary:focus{
    color: #000 !important;  
}

a.btn.btn-primary:hover{
    background-color: #000 !important;
    color: #fff !important;
 }

 a.btn.btn-secondary:hover{
    background-color: transparent !important;
    color: #000 !important;
 }



.radius-50{

    border-radius: 50px !important;

}

.text-left{

    text-align: left;

}

.text-right{

    text-align: right;

}

.text-center{

    text-align: center;

}

.align-center{

    align-items: center;

}

.align-end{

    text-align: end;

}

.centre{

    display: flex;

    justify-content: center;

    align-items: center;

}

.flex{

    display: flex;

}

.justify-between{

    justify-content: space-between;

}

.justify-center{

    justify-content: center;

}

.justify-end{

    justify-content: end;

}

/* color-plate */



.white {

    color: #ffffff;

}

.bg-white {

    background-color: #ffffff !important;

}

.black {

    color: #000000;

}

.bg-black {

    background-color: #000 !important;

}

.secondary{

    color:#DFDEDB;

}

.bg-secondary{

background-color: #C6BEB0 !important;

}



.py-90{

    padding:90px 0px !important;

}

.py-50{

    padding:50px 0px !important;

}

.relative{

    position: relative !important;

}

.cursor-pointer{

    cursor: pointer;

}

.uppercase{

    text-transform: uppercase;

}

.font-medium{

    font-weight: 500;

}

.font-bold{

    font-weight: 700;

}

.font-semibold{

    font-weight: 600;

}

.w-full{

    width: 100%;

}

.h-full{

    height: 100%;

}





header {
    padding: 19px 70px;
    background-color: #DFDEDB !important;
    border-bottom: 1px solid #fff;
    position: sticky;
    top: 0;
    z-index: 999;
}

header .container{

    display: flex;

    flex-direction: row;

    justify-content: space-between;

}



header a.navbar-brand {

    margin: 0px !important;

    padding: 0px;

}



header button.btn.btn-canvas {
    padding: 0px;
    border: none;
    box-shadow: none;
}
header button.btn.btn-canvas:focus{
background: none !important;
}

header button.btn.btn-canvas:active{

    border: none !important;

}

header button.btn-close.text-reset {

    background: none;

    background-color: #fff;

    opacity: 1;

    padding: 13px;

    box-shadow: 0px 0px 6px 0px #0000001a;

    display: flex;

    align-items: center;

    justify-content: center;

}

.offcanvas.offcanvas-start{

    width: 30%;

}



header ul.navbar-nav {

    gap: 41px;

    align-items: center;

    flex-direction: row;

}

header ul.navbar-nav.nav-mobile {

    flex-direction: column;

    gap: 0px;

}



header ul.navbar-nav li.nav-item {

    width: 100%;

}

header a.nav-link {

    padding: 0px !important;

    font-size: 20px;

    white-space: nowrap;

    display: flex;

    align-items: center;

    transition: 0.5s;

    justify-content: space-between;

    font-weight: 300;

}

header ul.navbar-nav.nav-mobile li.nav-item {

    padding: 30px 0px 15px;

    border-bottom: 1px solid #999999;

}

header ul.navbar-nav.nav-mobile li.nav-item a.nav-link {

    justify-content: center;

    font-size: 27px;

    line-height: normal;

}



header a.nav-link .fa-angle-right{

    display: none;

}

.hero-banner.hero,
.hero-banner .img-box, 
.hero-banner .img-box img{
height: calc(100vh - 94px);
object-fit: cover;
}

    .hero-banner .img-box {
        position: relative;
    }

    .hero-banner .hero-content-box {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translate(-50%, -10%);
        text-align: center;
    }
    .hero-banner .hero-content-box img{
        height: auto;
    }
    .hero-banner .hero-content-box h1.heading-first {

        text-shadow: 0 3px 0px #0000007a;

        color: #DFDEDB;

        font-size: 72px;

        line-height: 103px;

    }



    .after-hero.text-box{

        padding: 22px;

        text-align: center;

    }

    .after-hero.text-box p {

        font-size: 26px;

        width: 80%;

        margin: auto;

        line-height: 48px;

    }

    /* .gallery {
        overflow: hidden;
    } */
    /* .gallery .slider-negative-margin {
        margin: 0px -1000px;
    } */
    
    .gallery{
        position: relative;
    }

    section.gallery.gallery-home {
        padding: 50px 0px 80px !important;
    }

  
    .gallery h2.text-center{
        margin-bottom: 40px;
    }

  .client-testimonial .testimonial-slider .swiper-wrapper
   {
 margin: 40px 0px;
    }

    .client-testimonial .testimonial-slider .swiper-pagination-new{
        text-align: center;
    }

    .gallery .swiper-pagination-bullets {
        position: relative;
        top: 30px !IMPORTANT;
    }
    .gallery .swiper-pagination-bullets span.swiper-pagination-bullet,
     .client-testimonial .testimonial-slider .swiper-pagination-bullets span.swiper-pagination-bullet{
        width: 8px;
        height: 8px;
        background-color: #fff;
        opacity: 1;
    }

   

      .gallery .gallery-slider,
      .gallery .gallery-slider-second{
        border-radius: 14px;
      }
    .gallery .swiper-pagination-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active,
     .client-testimonial .testimonial-slider .swiper-pagination-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active,
     .gallery .swiper-pagination-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active{
        outline: 1px solid #000;
        outline-offset: 3px;
        background-color: #000;
        width: 10px;
        height: 10px;
    }

    .gallery-slider .swiper-slide.relative img,
    .gallery-slider-second .swiper-slide.relative img {
        height: 600px;
       object-fit: cover;

      }



    .villas .grid.all-villas {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 20px;
        row-gap: 30px;
        margin-top: 55px;
    }



    .villas .grid.all-villas .grid-box .villa-box {

        padding: 15px;

        background-color: #fff;

        border-radius: 6px;

        border: 1px solid #00000057;

    }



    .villas .grid .grid-box img.w-full {

        border-radius: 6px;

        height: 265px;

        object-fit: cover;

    }

    

    .villas .grid .grid-box h3 {

        margin-top: 20px;

    }

    .villas .grid .grid-box p {

        font-size: 14px;

        line-height: 26px;

        margin: 12px 0px 30px;

        height: 50px;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

    }



    .villas .grid .grid-box .inner-grid {

        display: grid;

        grid-template-columns: auto auto auto auto;

        padding: 12px 0px;

        border-width: 1px 0px 1px 0px;

        border-style: solid;

        border-color: #c8c8c8;

    }

    .villas .grid .grid-box .inner-grid .inner-box {

        text-align: center;

        position: relative;

    }



    .villas .grid .grid-box .inner-grid .inner-box:not(:last-child):before {

        content: "";

        position: absolute;

        right: 0px;

        top: 50%;

        background-color: #c8c8c8;

        height: 32px;

        width: 1px;

        transform: translateY(-50%);

    }

    .villas .grid .grid-box .inner-grid .inner-box h4 {

        font-size: 14px;

        line-height: 26px;

        margin-top: 5px;

    }



    .villas .grid .grid-box .btn-box {

        margin: 30px 0px 15px 0px;

        gap: 20px;

    }

    .villas .grid .grid-box .btn-box a.btn{

        display: block;

        width: 100%;

    }



    .villas .grid .grid-box .btn-box a.btn.whatsapp-btn {

        display: flex;

        gap: 10px;

        align-items: center;

        justify-content: center;

    }





    .client-testimonial .testimonial-slider .swiper-slide {
        padding: 32px;
        border-radius: 20px;
        min-height: 500px;
    }


    .client-testimonial .testimonial-slider .swiper-slide img.partners {
        height: 40px;
      width: auto;
    }



    .client-testimonial .testimonial-slider .swiper-slide p {
        padding: 30px 0px 0px;
        margin: 16px 0px 0px;
        border-top: 1px solid #00000057;
        font-size: 20px;
        line-height: 36px;
        display: -webkit-box;
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: #3B3B3B;
    }

    .client-testimonial .testimonial-slider .swiper-slide .about-client {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 30px;
    }

    .client-testimonial .testimonial-slider .swiper-slide .about-client h3 {
        margin-bottom: 6px;
        font-size: 22px;
        color: #3B3B3B;
    }



    .location .grid {

        display: grid;

        grid-template-columns: 7fr 5fr;

        gap: 70px;

        align-items: center;

    }

    .location .grid .map-box iframe {

        height: 360px;

    }

    .location .grid .text-box h2 {

        font-size: 32px;

        line-height: 45px;

    }

    .location .grid .text-box p {

        font-size: 20px;

        line-height: 36px;

        margin-top: 20px;

    }

    footer{
background-color: #DFDEDB;
        border-top: 2px solid #000;

    }

    footer .grid.footer-content {

        display: grid;

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

        gap: 44px;

        margin: 71px 0px 75px;

    }

    footer .grid.footer-content h2 {

        position: relative;

        font-size: 38px;

        line-height: 42px;

        padding-bottom: 5px;

    }

    footer .grid.footer-content h2:before {

        content: "";

        position: absolute;

        left: 0px;

        bottom: 0;

        background-color: #000;

        height: 4px;

        width: 50px;

        border-radius: 10px;

    }

    footer .grid.footer-content .grid-box ul {
        margin-top: 35px;
        gap: 20px;
        flex-direction: column;
    }
    footer .grid.footer-content .grid-box ul ul{
        margin: 0px !important;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    footer .grid.footer-content .grid-box ul li {

        font-size: 14px;

        line-height: 22px;

    }



    footer .grid.footer-content .grid-box ul li.flex {

        gap: 10px;

    }



    footer .copyright p {

        font-size: 14px;

        padding: 17px 0px;

        border-top: 1px solid #000;

    }

    footer .copyright p a{

        border-bottom: 1px solid #000;

    }

    .contact-whatsapp {

        position: fixed;

        bottom: 40px;

        right: 40px;

        z-index: 999;

    }





    .hero.subhero{

        position: relative;

    }



    .hero.subhero::before {

        content: "";

        position: absolute;

        left: 0;

        top: 0;

        height: 100%;

        width: 100%;

        background-color: #0000004f !important;

        z-index: 1;

    }

    .hero.subhero .hero-headding-box {

        position: absolute;

        top: 96px;

        left: 50%;

        text-align: center;

        transform: translateX(-50%);

        z-index: 2;

        width: 100%;

    }

    .hero.subhero .hero-headding-box h1{

        font-size: 62px;

        text-shadow: 0 3px 0px #0000007a;

    }

    .hero.subhero .hero-breadcrumb-box {

        position: absolute;

        bottom: 28px;

        left: 50%;

        text-align: center;

        transform: translateX(-50%);

        z-index: 3;

    }



    .hero.subhero .hero-breadcrumb-box .breadcrumb{

        align-items: center;

        gap: 10px;

    }
    .hero.subhero .hero-breadcrumb-box .breadcrumb img{
height: auto;
    }
    .hero.subhero .hero-breadcrumb-box .breadcrumb li {

        font-size: 28px;

    }

    .hero.subhero .hero-breadcrumb-box .breadcrumb li span.underline {

        border-bottom: 1px solid #fff;

    }

    .about-services .grid {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 20px;

        padding: 0px 30px;

    }

    .about-services .grid .grid-box {

        padding: 30px 33px;

        border-radius: 6px;

    }

    

    .about-services .grid .grid-box.box-second {

        background-color: #DFDEDB;

    }

    .about-services .grid .grid-box ul {

        display: flex;

        flex-direction: column;

        gap: 32px;

    }

    .about-services .grid .grid-box ul li {

        display: flex;

        gap: 20px;

        align-items: center;

        font-size: 21px;

        line-height: 24px;

    }



    .about {

        padding: 90px 0px 74px;

    }

    .about .grid {

        display: grid;

        grid-template-columns: 1fr 1fr;

        align-items: center;

        gap: 32px;

    }



    .about .grid .grid-box.img-box {

        margin-left: 76px;

        margin-right: -25px;

    }

    .about .grid .grid-box.text-box {

        margin-left: 26px;

        margin-top: 10px;

    }

    .about .grid .grid-box.text-box p {

        margin: 15px 0px 22px;

        line-height: 36px;

        width: 84%;

    }

    .about .grid .grid-box.text-box h3 {

        margin: 54px 0px 21px;

    }

    .about .grid .grid-box.text-box .btn-box {

        gap: 20px;

    }



    .gallery.gallery-all-villa  .swiper-pagination-bullets span.swiper-pagination-bullet{
       width: 8px;
       height: 8px;
       background-color: #000;
       opacity: 1;

   }

   .gallery .btn-box a.btn {
    margin-top: 70px !important;
}



/*--------------- contact-us ------------------*/





.contact-us .text-box p {

    line-height: 36px;

    width: 80%;

    margin: auto;

    margin-top: 20px;

}



.contact-us .contact-form {

    margin-top: 60px;

    padding: 0px 30px;

}



.contact-us .contact-form .input-box {

    display: flex;

    column-gap: 30px;

    margin-bottom: 50px;

}

.contact-us .contact-form .input-box .input-fields {

    width: 100%;

}

.contact-us .contact-form .input-box label {

    display: block;

    font-size: 20px;

    line-height: 36px;

    margin-bottom: 15px;

}



.contact-us .contact-form .input-box .input-fields input, 

.contact-us .contact-form .input-box .input-fields select {

    width: 100%;

    height: 64px;

    background-color: #F5F5F4;

    border: 1px solid #B5B5B5;

    border-radius: 4px;

    padding: 20px;

    appearance: none !important;

    font-size: 18px;

    color: #000;

    font-family: "Nexa", sans-serif;

}



.contact-us .contact-form .input-fields a.btn.submit-btn {

    margin-top: -10px;

}





.all-locations {

    padding: 78px 0px 90px;

}

.all-locations .grid.location-box {

    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 57px;
    padding: 0px 30px;
    column-gap: 16px;

}

.all-locations .grid.location-box h2 {
    font-size: 38px;
    line-height: 43px;
}

.all-locations .grid.location-box ul.location-list {
    display: flex;
    flex-direction: column;
     gap: 10px;
    margin-top: 18px;

}

.all-locations .grid.location-box ul.location-list li {
    font-size: 20px;
    line-height: 36px;
}

/* new-css */

.contact-us .contact-form .input-box .input-fields br{
    display:none;
}

.contact-us .contact-form .input-fields input.wpcf7-form-control.submit-btn {
    padding: 22px 20px;
    width: 185px;
    height: 57px;
    border-radius: 50px;
    border: 1px solid #000;
}
.contact-us .contact-form .input-fields input.wpcf7-form-control.submit-btn:hover{
    color: #000;
    background-color: #fff !important;
}