* {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.fa{
    font-family:FontAwesome;
}
.btn {
    padding: 10px 14px 10px 14px;
    border-radius:8px;
    text-decoration:none;
}
.navbar .nav-item .nav-link:hover, .navbar .nav-item .nav-link.active {
    color: #C1A454;
}

.navbar-dark {
    background: linear-gradient(90deg, #1B2018 0%, #4E503E 100%);
}.navbar-dark.bg-transparent{
     background:transparent;
 }
.navbar-dark .nav-item .nav-link{
     color:white;
 }
 .navbar-dark .nav-item{
     padding:0px 20px;
 }
 .navbar .logo{
     width:80px;
 }
.ocpl-mobile-logo {
    display: none;
}
.btn-bronze {
    color: black;
    background-color: #D4B45C;
}
.btn-bronze-dark {
    color: white;
    background-color: #C1A454;
}
.bg-images {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}
.banner {
    height: calc(100vh);
     display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; 
    width:100%; 

}
.contactform{
    border-radius:10px;
}
    .contactform .section-overlay {
        border-radius: 10px;
    }
.section-overlay {
    background-color: #000000B2;
    height: 100%;
    width: 100%; 
    display: flex;
    align-items: center;
}
.other-banners {
    height: calc(70vh - 120px);
}
.banner-overlay {
    /*    background: linear-gradient(0deg, #000000, #000000), linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 16.92%)
*/
    background: #00000080;
    height: 100%;
    width: 100%; 
    display: flex;
    align-items: center;
}
.banner h1 { 
    font-size: 66px;
    font-weight: 700; 
    text-align: center;
    color: white; 
    margin-bottom: 10px;
}

.banner p { 
    font-size: 25px;
    font-weight: 400;
    line-height: 26.4px;
    text-align: center;
    color: white;
    opacity: 1; 
}
.animation-set {
    opacity: 0;
    transform: translateY(100%);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -ms-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}

.animate-opacity {
    opacity: 1;
    transform: translateY(0);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -ms-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}
.animated {
    -webkit-animation-duration: 1000 ms;
    animation-duration: 1000 ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
/* .owl-animated-out - only for current item */
/* This is very important class. Use z-index if you want move Out item above In item */
.owl-animated-out {
    z-index: 1
}
/* .owl-animated-in - only for upcoming item
/* This is very important class. Use z-index if you want move In item above Out item */
.owl-animated-in {
    z-index: 0
}
/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css:  */
.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.owl-item {
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 0s ease-in-out;
}

    .owl-item.active {
        opacity: 1;
        transition: opacity 1.5s ease-in-out, transform 0s ease-in-out;
    }
.section-title{
    text-transform:uppercase;
    font-weight:800;
    font-size:32px;
    text-align:center;
    margin:25px 0px;
    color:black;
}
.colaborators-carousel .owl-item img{
    width:auto!important;
    height:100px!important;
    display:inline-block!important;
}
.colaborators-carousel .owl-item{
    text-align:center;
}
.colaborators-carousel .owl-stage{
    text-align:center;
    justify-content:center;
    align-items:center;
}
.mandate-section {
    background: linear-gradient(90deg, #4A4D3C 0%, #1B2018 100%);
    padding: 10px 0px;
    /* .bg-moon1 inside is absolute; without this it resolves against the page and lands
       on top of the hero rather than behind this band. */
    position: relative;
    overflow: hidden;
}
.section-para {
    font-size: 20px;
    font-weight: 300;
    line-height: 32.74px;
    letter-spacing: -0.014em;
    margin-bottom: 5px;
}
.borderwhite {
    border-left: 5px solid #FFFFFF;
    padding-left: 25px;
}
.line-height {
    line-height: 46.38px
}
.service-img {
    width: 100%;
    height: 300px;
    border-radius: 5px;
    transition: ease-in-out 0.5s transform;
}
.service-img:hover{
    transform:scale(1.1);
  transition:ease-in-out 0.5s transform;
}
.service-name {
    display: table;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    background: linear-gradient(90deg, #4C4E3D 0%, #1B2018 100%);
    border-radius: 30px;
    padding: 10px 24px;
    margin: 15px auto 0;
}
.grey {
    color: #333333
}
.dev-img{
    height:100%;
    width:100%;
}
.dev-card{
    height:450px;
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    justify-content:center;
    overflow:hidden;
    border-radius:5px;
}
.dev-card:hover .dev-img{
    transform:scale(1.1);
    transition:0.6s all ease-in-out;
}
.dev-img {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    transition: 0.6s all ease-in-out;
}
.dev-overlay {
    width: 100%;
    height: 100%;
    background-color: #00000080;
    z-index:1;
    position:absolute;
}
.dev-desc{
    position:relative;
    width:100%;
    z-index:1;
    color:white;
    text-align:center;
    padding:10px;
}
/* The photo shows clear; the dimming and the name come in on hover. Only where there is a
   hover — on a touch screen they would never appear, so there they stay as they were. */
@media (hover:hover){
    .dev-overlay,
    .dev-desc{
        opacity:0;
        transition:opacity .35s ease;
    }
    .dev-desc{transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
    .dev-card:hover .dev-overlay,
    .dev-card:hover .dev-desc{opacity:1;transform:none}
}
.dev-title { 
    font-size: 25px;
    font-weight: 800; 
    letter-spacing: -0.02em; 
    margin-bottom:0px;
}
.dev-para { 
    font-size: 14px;
    font-weight: 400;
    line-height: 21.82px;
    letter-spacing: -0.02em;
    text-align: center;
    margin:0px;
}
.dev-card.card-small1{
    height:250px;
}
.dev-card.card-small2 {
    height: 178px;
}
.dev-card .scale2 {
    transform: scale(1.1);
    transition: 0.6s all ease-in-out;
}
.dev-card:hover .scale2 {
    transform: scale(1.2);
    transition: 0.6s all ease-in-out;
}

/* Our Projects — project tiles. A separate component from .dev-card (which the home page and
   Services also use for small centered-title thumbnails) so this page's larger, bottom-anchored
   layout can't shift those grids. */
.project-tile-link {
    display: block;
}
.project-tile {
    position: relative;
    height: 460px;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.project-tile-link:hover .project-tile,
.project-tile-link:focus-visible .project-tile {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    transform: translateY(-4px);
}
.project-tile-link:focus-visible .project-tile {
    outline: 2px solid #D4B45C;
    outline-offset: 3px;
}
.project-tile-img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    transition: transform 0.6s ease-in-out;
}
.project-tile-link:hover .project-tile-img {
    transform: scale(1.08);
}
.project-tile-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 17, 12, 0) 32%, rgba(15, 17, 12, 0.55) 65%, rgba(15, 17, 12, 0.92) 100%);
}
.project-tile-tag {
    display: inline-block;
    padding: 5px 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(212, 180, 92, 0.6);
    border-radius: 30px;
    background: rgba(15, 17, 12, 0.35);
    color: #D4B45C;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.project-tile-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 32px;
    color: white;
    text-align: left;
}
.project-tile-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.project-tile-text {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 440px;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.project-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #D4B45C;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.project-tile-cta i {
    transition: transform 0.3s ease;
}
.project-tile-link:hover .project-tile-cta i {
    transform: translateX(6px);
}
.news-img{
    height:325px;
    width:100%;
    border-radius:8px;
}
.news-title {
    font-size: 20px;
    font-weight: 700;
    text-align: left;
    margin: 15px 0px 5px 0px;
    color: #000000
}
.news-para {
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    color: #333333
}
.section-sub-title { 
    font-size: 25px;
    font-weight: 700;
    line-height: 43.65px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #333333
}
.section-sub-title2 { 
    font-size: 20px;
    font-weight: 700;
    line-height: 43.65px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #333333
}
.section-para2 { 
    font-size: 18px;
    font-weight: 400; 
    letter-spacing: 0.01em;
    text-align: center;
}
.site-img{
    width:100%;
    height:600px; 
    border-radius:5px;
}
.form-label { 
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color:black;
}
.form-control {
    border: 1px solid #E6E6E6;
    box-shadow: 0px 1px 2px 0px #1018280D;
    padding: 10px 14px 10px 14px;
    border-radius: 8px;
    color: #667085;
}
.updatesection {
    /*background: #404432;*/
    padding: 50px 0px;
}
.btn-black{
    color:white;
    background-color:black;
}
    .btn-black:hover {
        color: #C1A454;
    }
footer {
    background: linear-gradient(90deg, #4C4E3D 0%, #1B2018 100%);
    padding: 40px 0px;
}
footer .logo{
    width:180px; 
    object-fit:contain
}
footer .footer-link{
    color:white;
    text-decoration:none;
    font-size:14px;
    display:inline-block;
}
    footer .footer-link:hover {
        color: #C1A454;
    }
    .fade-animation {
        opacity: 0;
        -webkit-transition: all .6s ease-in-out;
        -moz-transition: all .6s ease-in-out;
        -ms-transition: all .6s ease-in-out;
        -o-transition: all .6s ease-in-out;
        transition: all .6s ease-in-out;
    }
.fade-show {
    opacity: 1;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
.bronze{
    color:#D4B45C!important
}
.getintouch .card {
    background-color: #F2F4F9;border-radius:10px;
    border:0px;
    align-items:center;
}
.getintouch .card .card-body{
    display:flex; 
    width:100%;
    text-align:center;
    padding-top:20px;
    padding-bottom:20px;
}
.getintouch .card .card-body a{
    font-size:15px;
}
.getintouch .card .card-body img{
    margin-bottom:10px;
}
.mandate-section .section-para{
    font-size:16px;
}

/* ---------- Home: one rhythm between sections ----------
   Every section carries the same space above it and nothing below, so the gap between any
   two is the same; the dark band carries that space on both sides of itself and inside.
   A heading starts flush at the top of its section — the section's own space is the gap. */
.home-sec{padding-top:72px}
.home-sec .section-title{margin-top:0}
.home-band{margin-top:72px}
.mandate-section.home-band{padding:72px 0}
.home-band .section-title{margin-top:0}
@media (max-width:767px){
    .home-sec{padding-top:48px}
    .home-band{margin-top:48px}
    .mandate-section.home-band{padding:48px 0}
}
.mandate-section .mission-para {
    font-size: 20px;
    text-align: center;
    line-height: 2.5;
}
@media(max-width :767px) {
    .banner-overlay {
        padding-left: 20px; 
        padding-right: 20px;
    }
    .banner h1{
        font-size:45px;
    }
    .banner p{
        font-size:20px;
    }
    .section-title{
        font-size:25px;
    }
    .colaborators-carousel .owl-item img{
        height:70px!important;
    }
    .fs-2 {
        font-size: 1.25rem !important
    }
    .section-para{
        font-size:16px;
    }
    .service-name {
        font-size: 14px;
        padding: 8px 18px;
        margin-top: 15px;
    }
    .news-title{
        font-size:18px;
    }
    .news-para{
        font-size:16px;
    }
    .section-sub-title{
        font-size:20px;
    }
    .section-sub-title2{
        font-size:15px;
    }
    .section-para2{
        font-size:14px;
    }
    footer .footer-link{
        margin-bottom:10px;
    }
}

.img-height{
    max-height: 710px;
}

/* site carsouel */


.site-carousel .owl-nav {
    position: absolute;
    top: 43%;
    margin: 0!important;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Ensures click through only to the nav buttons */
}

    .site-carousel .owl-nav button {
        background: white !important;
        border: none !important;
        border-radius: 50px !important;
        font-size: 14px !important;
        /* padding: 5px 11px !important; */
        cursor: pointer;
        pointer-events: auto;
        color: #5D6370 !important;
        width: 39px;
        height: 38px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
        .site-carousel .owl-nav button * {
            color: #5D6370 !important
        }
    .site-carousel .owl-nav .owl-next i {
        margin-top: 2px;
        margin-left: 2px;
    }
    .site-carousel .owl-nav .owl-prev i {
        margin-top: 2px;
        margin-right: 2px;
    }
        .site-carousel .owl-nav button:hover {
            color: black !important;
        }

        .site-carousel .owl-nav button.owl-prev {
            position: absolute;
            left: 40px;
        }

        .site-carousel .owl-nav button.owl-next {
            position: absolute;
            right: 40px;
        }
.site-carousel .owl-dots {
    margin-top: 10px !important;
}
    .site-carousel .owl-dot span {
        border: 1px solid #D6D6D6;
        background: none !important;
    }
.site-carousel .owl-dot.active span {
    width: 20px !important;
    background-color: #BCA163 !important;
}
@media(max-width: 600px) {
    .site-carousel .owl-nav button {
        font-size: 25px !important;
        padding: 5px 20px !important;
    }
        .site-carousel .owl-nav button.owl-prev {
            left: 15px;
        }

        .site-carousel .owl-nav button.owl-next {
            right: 15px;
        }
}

/* banner carousel */

.banner-carousel .owl-nav {
    position: absolute !important;
    left: 0;
    width: 100%;
    top: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .banner-carousel .owl-nav button {
        font-size: 13px !important;
        cursor: pointer !important;
        border: 1px solid #5D6370 !important;
        position: absolute !important;
        background-color: white !important;
        color: #5D6370 !important;
        padding: 0px 0px !important;
        margin: 26px 3px !important;
        border-radius: 50% !important;
        width: 41px;
        height: 40px;
        display: flex!important;
        align-items: center;
        justify-content: center;
        
    }


.banner-carousel .owl-prev {
    left: 5% !important;
    top: -1% !important;
    transform: translateY(-42%) !important;
}

.banner-carousel .owl-next {
    right: 5% !important;
    top: -1% !important;
    transform: translateY(-42%) !important;
}

    .banner-carousel .owl-dots {
        margin-top: 30px !important;
    }

    .banner-carousel .owl-dot span {
        border: 1px solid #D6D6D6;
        background: none !important;
    }

    .banner-carousel .owl-dot.active span {
        width: 20px !important;
        background-color: #2A9FE8 !important;
    }

@media(max-width: 1220px) {
    .banner-carousel .owl-prev {
        left: 5% !important;
    }

    .banner-carousel .owl-next {
        right: 5% !important;
    }
}

@media(max-width: 860px) {
    .banner-carousel .owl-prev {
        left: 5% !important;
    }

    .banner-carousel .owl-next {
        right: 5% !important;
    }

    .banner-carousel .owl-nav button {
        font-size: 12px !important;
        padding: 0px 17px !important;
    }
}
@media(max-width: 600px) {
    .banner-carousel .owl-prev {
        left: 5% !important;
    }

    .banner-carousel .owl-next {
        right: 5% !important;
    }

    .banner-carousel .owl-nav button {
        font-size: 12px !important;
        padding: 0px 15px !important;
    }
}

.bg-mehndi {
    background: linear-gradient(90deg, #4A4D3C 0%, #1B2018 100%);
}

    .bg-mehndi * {
        color: white;
    }
    /*animations*/
.card-orange-home {
    transition: all .5s ease-in-out;
    transform: scale(1.0);
}

    .card-orange-home:hover {
        transition: all .5s ease-in-out;
        transform: scale(1.05);
    }

.animated-banner {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .animated-banner.visible {
        opacity: 1;
        transform: translateY(0);
    }

.animated-video {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .animated-video.visible {
        opacity: 1;
        transform: translateY(0);
    }

.animated-div-opacity {
    opacity: 0;
    transform: translateX(-150px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .animated-div-opacity.visible {
        opacity: 1;
        transform: translateX(0);
    }

.card-animation {
    transform: scale(0) rotate(180deg);
    opacity: 0;
    transition: opacity .1s ease-out, transform 0.6s ease-out;
}

    .card-animation.visible {
        opacity: 1;
        transform: scale(1) rotate(0);
    }

.zoomedin {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .zoomedin.visible {
        opacity: 1;
        transform: scale(1);
    }
/*animations*/

.navbar-dark .navbar-toggler{
    color:white;
    border:0px;
    outline:none;
    box-shadow:none
}
@media(max-width:767px)
{
    .bg-moon5 {
        width: 30%!important;
        height: 30%!important;
    }
    .bg-moon4 {
        width: 126px!important;
        height: 32%!important;
    }
    .borderwhite {
        border: 0px;
    }
    #navHome {
        display: block;
        position: fixed;
        top: 0;
        left: -250px;
        height: 100%;
        z-index: 2;
        background: #404432;
        width: 250px;
        padding-top: 20px;
        transition: .5s all ease-in-out;
    }
        #navHome.show {
            left:0;
            transition: .5s all ease-in-out;
        }
    .ocpl-mobile-logo {
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
    }
        .ocpl-mobile-logo img {
            width: 150px;
            max-width: 70%;
            height: auto;
        }
}
.bg-moon1 
{
    background-position:left;
    background-size:contain;
    background-repeat:no-repeat;
    position:absolute;
    width:100%;
    height:100%;
    top:0
}
.bg-moon2 {
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 259px;
    height: 64%;
    bottom: 0;
    left: 0;
}
.bg-moon3 {
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 18%;
    top: 0;
    right: 0;
}
.bg-moon4 {
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 259px;
    height: 64%;
    top: 0;
    left: 0;
}

.bg-moon5 {
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}
.preloader{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:white;
    display:flex;
    align-content:center;
    align-items:center;
    justify-content:center;
    top:0;
    left:0;
}
.preloader img{
    width:300px;
}

/* ==========================================================================
   Mobile corrections
   Appended rather than edited in place, so each rule sits next to the reason
   it exists and the cascade order of the original file is left alone.
   ========================================================================== */

/* The hero is sized to the LARGE viewport, so on a phone its bottom starts under the URL
   bar and jumps when that bar retracts. dvh tracks the bar; vh stays as the fallback. */
@supports (height:100dvh){
    .banner{height:100dvh}
    .other-banners{height:calc(70dvh - 120px)}
}

@media (max-width:767px){
    /* The step-down at :490 drops these to 20px/15px but leaves a 43.65px line box, which
       is close to triple leading on the two-line headings it was written for. */
    .section-sub-title,
    .section-sub-title2{line-height:1.35}

    /* .borderwhite loses its rule here, and the indent that went with it has nothing left
       to line up against. */
    .borderwhite{padding-left:0}

    /* Twelve footer links at 19px tall, stacked. */
    footer .footer-link{padding:9px 0;min-height:40px}

    /* The tap-to-call and tap-to-email lines are each the whole point of their card, and
       each was 20px of bare text. Scoped to the card so the same link set inline in a
       sentence on Privacy keeps its line box. */
    p.bronze.section-para > a.bronze{display:inline-block;padding:10px 0}
}

@media (max-width:575px){
    /* 45px over a full-height photo still wraps an admin-authored heading to three lines. */
    .banner h1{font-size:34px;line-height:1.2}
    .other-banners h1{font-size:30px}

    /* Below md every one of these goes full width, and their desktop heights turn the page
       into a stack of near-square crops roughly 1,750px tall. Height gives way to aspect. */
    .dev-card{height:auto;min-height:320px}
    .dev-card.card-small1{height:190px;min-height:0}
    .dev-card.card-small2{height:150px;min-height:0}
    .news-img{height:210px}
    .service-img{height:200px}
    .site-img{height:260px}

    /* Same crop problem as .dev-card above: a 460px tile stacked full-width doubles the
       scroll length of the page for no extra content. */
    .project-tile{height:360px}
    .project-tile-body{padding:22px}
    .project-tile-title{font-size:22px}
    .project-tile-text{font-size:14px;max-width:none}
}

/* ---------- Home: marketplace teaser ----------
   Copy and live stock on one side, the site plan on the other. The whole plan is a link to
   the map, and it zooms a little on hover so it reads as something to open. */
.mk-card{
    display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch;
    background:linear-gradient(135deg,#1B2018 0%,#34382B 100%);
    border-radius:18px;overflow:hidden;
    box-shadow:0 18px 40px -18px rgba(27,32,24,.45);
}
.mk-copy{padding:48px 44px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.mk-eyebrow{
    display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
    font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#D4B45C;
}
.mk-dot{
    width:8px;height:8px;border-radius:50%;background:#5fbf6a;flex:none;
    box-shadow:0 0 0 0 rgba(95,191,106,.6);animation:mk-pulse 2s infinite;
}
@keyframes mk-pulse{
    0%{box-shadow:0 0 0 0 rgba(95,191,106,.55)}
    70%{box-shadow:0 0 0 8px rgba(95,191,106,0)}
    100%{box-shadow:0 0 0 0 rgba(95,191,106,0)}
}
@media (prefers-reduced-motion:reduce){.mk-dot{animation:none}}
.mk-title{font-size:34px;font-weight:800;line-height:1.15;margin:14px 0 12px;color:#fff}
.mk-lead{font-size:17px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 26px}
.mk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:28px}
.mk-stat{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;
}
.mk-stat b{font-size:24px;font-weight:800;color:#fff;line-height:1.1}
.mk-stat span{font-size:13px;color:rgba(255,255,255,.7)}
.mk-stat-main{background:rgba(212,180,92,.14);border-color:rgba(212,180,92,.35)}
.mk-stat-main b{color:#D4B45C}
.mk-cta{align-self:flex-start;padding:14px 30px;font-weight:700;font-size:16px}
.mk-cta:hover{background-color:#D4B45C;color:#1B2018}

.mk-map{position:relative;display:block;min-height:420px;overflow:hidden;background:#eef0e8}
/* The whole town plan, not a crop of it: contain keeps every edge of the site in view. */
.mk-map img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:contain;object-position:center;
    transition:transform .6s ease;
}
.mk-map:hover img,.mk-map:focus-visible img{transform:scale(1.03)}
/* The dark card's edge fades into the plan, so the two halves read as one piece. */
.mk-map::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(27,32,24,.55) 0%,rgba(27,32,24,0) 22%),
               linear-gradient(0deg,rgba(27,32,24,.45) 0%,rgba(27,32,24,0) 30%);
}
.mk-pill,.mk-open{
    position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;
    border-radius:50rem;font-size:13px;font-weight:700;
}
.mk-pill{top:18px;right:18px;background:rgba(255,255,255,.92);color:#1B2018;padding:7px 13px}
.mk-open{bottom:18px;right:18px;background:#C1A454;color:#fff;padding:10px 18px;transition:background .2s ease}
.mk-map:hover .mk-open{background:#D4B45C;color:#1B2018}

@media (max-width:991px){
    .mk-card{grid-template-columns:1fr}
    .mk-map{min-height:300px;order:-1}
    .mk-map::before{background:linear-gradient(0deg,rgba(27,32,24,.55) 0%,rgba(27,32,24,0) 35%)}
    .mk-copy{padding:32px 24px}
    .mk-title{font-size:28px}
}
@media (max-width:600px){
    .mk-copy{padding:26px 18px}
    .mk-title{font-size:24px}
    .mk-lead{font-size:15px}
    .mk-map{min-height:240px}
    .mk-cta{align-self:stretch;text-align:center}
}

/* ---------- Home: newsletter ----------
   A light card to sit between the dark marketplace card and the dark footer: copy on the
   left, the one field and its button joined into a single pill on the right. */
.nl-card{
    position:relative;overflow:hidden;
    display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;
    padding:48px 52px;border-radius:18px;
    background:linear-gradient(135deg,#F7F0DD 0%,#FBF8EF 100%);
    border:1px solid #E6D6AA;
}
/* The crescent from the logo, faint, in the corner. */
.nl-card::after{
    content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
    border:18px solid rgba(193,164,84,.13);pointer-events:none;
}
.nl-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A7433}
.nl-title{font-size:32px;font-weight:800;line-height:1.2;color:#1B2018;margin:10px 0 12px}
.nl-lead{font-size:17px;font-weight:300;line-height:1.6;color:#4a4e45;margin:0}
.nl-form-wrap{position:relative;z-index:1}
.nl-form{
    display:flex;align-items:center;gap:6px;padding:6px;
    background:#fff;border:1px solid #E6D6AA;border-radius:50rem;
    box-shadow:0 8px 24px -14px rgba(27,32,24,.35);
    transition:border-color .2s ease,box-shadow .2s ease;
}
.nl-form:focus-within{border-color:#C1A454;box-shadow:0 0 0 4px rgba(212,180,92,.25)}
.nl-form input{
    flex:1;min-width:0;border:0;outline:none;background:transparent;
    padding:10px 18px;font-size:16px;color:#1B2018;
}
.nl-form .btn{border-radius:50rem;padding:12px 28px;font-weight:700;white-space:nowrap}
.nl-form .btn:hover{background-color:#1B2018;color:#D4B45C}
.nl-privacy{display:block;margin:12px 0 0 18px;color:#6b6e63;font-size:13px}
.nl-privacy a{color:#1B2018;text-decoration:underline}
.nl-note{margin:0 0 12px;padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600}
.nl-note.ok{background:#eef5ec;border:1px solid #c5dabf;color:#3f7d45}
.nl-note.bad{background:#fbeee9;border:1px solid #e9c4b6;color:#8a3a22}

@media (max-width:991px){
    .nl-card{grid-template-columns:1fr;gap:24px;padding:34px 26px}
    .nl-title{font-size:26px}
}
@media (max-width:600px){
    .nl-card{padding:26px 18px}
    .nl-title{font-size:23px}
    .nl-lead{font-size:15px}
    /* Stacked on a phone: a pill too narrow for the address is worse than two rows. */
    .nl-form{flex-direction:column;align-items:stretch;border-radius:16px}
    .nl-form .btn{border-radius:12px}
    .nl-privacy{margin-left:4px}
}