* {
            box-sizing: border-box;
        }


        @font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('./fonts/HelveticaNeueLTStd-Bd.eot');
    src: url('./fonts/HelveticaNeueLTStd-Bd.eot?#iefix') format('embedded-opentype'),
        url('./fonts/HelveticaNeueLTStd-Bd.woff2') format('woff2'),
        url('./fonts/HelveticaNeueLTStd-Bd.woff') format('woff'),
        url('./fonts/HelveticaNeueLTStd-Bd.ttf') format('truetype'),
        url('./fonts/HelveticaNeueLTStd-Bd.svg#HelveticaNeueLTStd-Bd') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto-Regular.eot');
    src: url('./fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('./fonts/Roboto-Regular.woff2') format('woff2'),
        url('./fonts/Roboto-Regular.woff') format('woff'),
        url('./fonts/Roboto-Regular.ttf') format('truetype'),
        url('./fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto-Medium.eot');
    src: url('./fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('./fonts/Roboto-Medium.woff2') format('woff2'),
        url('./fonts/Roboto-Medium.woff') format('woff'),
        url('./fonts/Roboto-Medium.ttf') format('truetype'),
        url('./fonts/Roboto-Medium.svg#Roboto-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



        body {
            font-family: 'Roboto';
            margin: 0;
            padding: 0;      
        }


        body.preloader-active {
    overflow: hidden;
}
.wow {
    visibility: hidden;
}

h1, h2, h3, h4, h5, h6{
    font-weight: 500;
}

       .opeingthumb {
    background-image: radial-gradient(circle at top right, grey 10%, #000000 34%);
    color: #ffffff;
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.opeingthumb-inner {
    width: 95vw;
    height: 80vh;
    margin: auto;
    overflow: hidden; /* Crucial: Hides text when it is below or above */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.thumb-content {
    font-size: 11.5rem;
    font-weight: bold;
    line-height: 0.85;
    position: relative;    
    /* 1. Initial State: Pushed down below the container */
    transform: translateY(150%);
    opacity: 0;
    
    font-family: 'Helvetica Neue LT Std';
    
    /* Smooth CSS Transition */
    /* transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); */
        transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;

}

/* 2. Center State: Added by jQuery */
.thumb-content.show-center {
    transform: translateY(0);
    opacity: 1;
}

/* 3. Exit State: Pushed up above the container */
.thumb-content.move-up {
    transform: translateY(-150%);
    opacity: 0;
}

.thumb-content::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 12px;
    width: 59px;
    height: 10px;
    background: transparent linear-gradient(90deg, #F9D16F 0%, #EEBE5C 7%, #E0A341 18%, #DB9A38 25%, #DB9B39 34%, #DD9F40 37%, #E1A64C 39%, #E6B05D 41%, #EDBD73 43%, #F5CD8D 44%, #FDDDA7 45%, #FCDB9D 47%, #FAD584 52%, #F9D274 56%, #F9D16F 60%, #E5AE4D 64%, #D28D2C 68%, #D38E2D 68%, #E1A748 70%, #ECBA5C 71%, #F4C76A 73%, #F8CF73 75%, #FAD276 78%, #FAD582 82%, #F3C974 83%, #E6B259 86%, #DCA043 88%, #D59334 91%, #D18C2B 95%, #D08A29 100%) 0% 0% no-repeat padding-box;
    border: 1px solid #00000000;
}

/* Responsive adjustments for the big text */
@media (max-width: 991px) {
    .thumb-content {
        font-size: 5rem;
    }
}


        .navbar {
            padding: 20px 0;
            background-color: transparent;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
        }

        .navbar-nav .nav-item {
            margin-right: 30px;
        }

        .navbar-nav .nav-link {
            font-size: 13px;
            color: #ffffff;
            letter-spacing: 0.5px;
            padding: 0 !important;
            position: relative;
            transition: color 0.3s ease;
        }
        .navbar-expand-lg .navbar-nav{
            align-items: center;
        }

        /* The Animated Line */
        .navbar-nav .nav-link::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #ffffff;
            
            /* The Magic: Start scaled to 0 width */
            transform: scaleX(0);
            /* Transform from the right side */
            transform-origin: right; 
            transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
        }

        /* .navbar-nav .nav-link:hover {
            color: #ffffff;
        } */

        .navbar-nav .nav-link:hover::before {
            transform: scaleX(1);
            transform-origin: left; /* Sweep direction change on hover */
        }

        /* --- The "Download Profile" Button (Last Item) --- */
        
        /* Target the last nav-item's link specifically */
        .navbar-nav .nav-item:last-child .nav-link {
            background-color: #000;
            color: #fff !important; /* Force white text */
            padding: 12px 14px !important;
            border-radius: 10px; /* Pill shape */
            border: 2px solid #000;
            display: inline-block;
            transition: all 0.3s ease;
        }
        .navbar-nav .nav-item:last-child .nav-link::before {
            display: none;
        }

        /* Button Hover Effect */
        .navbar-nav .nav-item:last-child .nav-link:hover {
            background-color: transparent;
            color: #000 !important;
        }

        /* --- Responsive Tweaks --- */
        @media (max-width: 991px) {
            .navbar-nav {
                padding: 20px 0;
            }
            .navbar-nav .nav-item {
                margin-right: 0;
                margin-bottom: 15px;
                text-align: center;
            }
            
            /* Center the button on mobile */
            .navbar-nav .nav-item:last-child .nav-link {
                margin-top: 10px;
                display: inline-block;
            }
        }

        /* Optional: Smooth font rendering */
        .banner-inner{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom, #00000063 8%, transparent 30%);
        }

        .banner-content{
            width: 390px;
          margin-right: 74px;
        }

        .banner-content p{
            font-size: 20px;
    margin-top: 20px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 2px;
    color: #000000;
    opacity: 0.59;
        }

        .pad100{
    padding: 100px 0;
        }

        p{
            font-size: 20px;
            letter-spacing: 2.2px;
            line-height: 47px;
            font-weight: normal;
        }

        .bgskin{
    background-color: #F7F4EB;
        }
.leadership-philosophy{
    border-top: 1px solid #C4C4C4;
}
        .leadership-philosophy h2.section-title{
            color: #60594A;
            font-size: 20px;
            margin-bottom: 0;
            letter-spacing: 2.8px;
            font-weight: normal;
        }
        .leadership-philosophy p{
            color: #000000;
            font-size: 20px;
            letter-spacing: 1.8px;
            font-weight: 500;
        }

        .h2{
            font-size: 35px;
            line-height: 35px;
             letter-spacing: 5px;
        }





.bgblack {
      background-image: radial-gradient(circle at 50% 50%, rgba(80, 80, 80, 0.3) -20%, #000000 20%);
background-repeat: no-repeat;
    }


    .gradient-text-gold {
      background: transparent linear-gradient(90deg, #F9D16F 0%, #EEBE5C 7%, #E0A341 18%, #DB9A38 25%, #DB9B39 34%, #DD9F40 37%, #E1A64C 39%, #E6B05D 41%, #EDBD73 43%, #F5CD8D 44%, #FDDDA7 45%, #FCDB9D 47%, #FAD584 52%, #F9D274 56%, #F9D16F 60%, #E5AE4D 64%, #D28D2C 68%, #D38E2D 68%, #E1A748 70%, #ECBA5C 71%, #F4C76A 73%, #F8CF73 75%, #FAD276 78%, #FAD582 82%, #F3C974 83%, #E6B259 86%, #DCA043 88%, #D59334 91%, #D18C2B 95%, #D08A29 100%) 0% 0% no-repeat padding-box;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 22px;
      line-height: 30px;
        letter-spacing: 2.2px;
        font-weight: 500;
      margin-bottom: 10px;
      text-transform: uppercase;
    }

    .sub-text-grey {
      color: #999999;
      font-size: 20px;
        letter-spacing: 2.2px;
        
      margin-bottom: 0;
       font-weight: 500;
      text-transform: uppercase;
    }

    
    .heightlights {
      position: relative;
      overflow: hidden; 
      margin-top: 60px;
      height: 100vh;
    }

    

    .heightlights-inner {
      padding: 40px 20px;      
     position: relative;
      width: 98%;
      margin: auto;
      opacity: 0.3;
      transition: all 2s ease;
    }
    .heightlights-inner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 100%;
    background-image: url(../images/right-brackit.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.heightlights-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 100%;
    background-image: url(../images/left-brackit.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
   
    .slick-current .heightlights-inner {
      width: 100%;    
      opacity: 1;
      transition: all 2s ease;
    }
    

    .heightlightsSlider2 .heightlights-inner{
        min-height: 192px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    /* .heightlightsSlider::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(to top, #000000 0%, rgba(247, 244, 235, 0) 100%); 
        pointer-events: none; 
    } */


   .heightlightsSlider2  .heightlights-inner::after {
   
    width: 58px;
  
    background-image: url(../images/right-leaf.svg);
    
}

.heightlightsSlider2 .heightlights-inner::before {
    
    width: 58px;
    
    background-image: url(../images/left-leaf.svg);
    
}

    .work-expertise{
        margin-top: 50px;
    }


    .work-expertise-inner {
            border: 1px solid #ffffff30;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
           
        }

       

        .work-expertise-content {
            padding: 40px 30px;
            text-align: center;
        }

        .work-expertise-img {
            /*height: 250px;*/
            width: 100%;
        }

        .work-expertise-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }

        /* --- SLIDER GAP FIX --- */
        /* Slick doesn't have a 'gap' property, so we use padding on the items */
        .work-expertise-slider .slick-slide {
           
            margin-bottom: 30px; /* Space for dots */
        }

       

  /* the slides */
 .work-expertise-slider .slick-slide {
      margin: 0 10px;
  }

  /* the parent */
 .work-expertise-slider .slick-list {
      margin: 0 -10px;
  }

  .slick-vertical .slick-slide {
      margin: 25px 0px;
  }

  .slick-vertical .slick-list{
     margin: -25px 0px;
  }

        /* --- DOTS CSS CUSTOMIZATION --- */
    .work-expertise-slider    .slick-dots li button:before {
            font-size: 0px; /* Size of the dot */
            color: #555; /* Inactive color */
            opacity: 1;
            border: 1px solid #fff;
            border-radius: 100%;
            width: 11px;
            height: 11px;
            margin: 0px;
        }
        .slick-dots li button, .slick-dots li{
            padding: 0;
            width: 15px;
            height: 15px;
        }

        .work-expertise-slider .slick-dots li.slick-active button:before{
            background-color: #fff;
        }

    .work-expertise-slider     .slick-dotted.slick-slider{
            margin-bottom: 49px;
        }

      

        /* Optional: Move dots down slightly */
     .work-expertise-slider    .slick-dots {
            bottom: -54px; 
        }

        .work-expertise-h3{
            font-size: 20px;
    color: #fff;
    margin-bottom: 14px;
    letter-spacing: 2.2px;
        }

        .work-expertise-p{
            color: #C9C9C9;
             font-size: 16px;
             letter-spacing: 2.2px;
             line-height: 20px;
        }

        .work-expertise-slider .slick-list{
            padding-right: 100px;
        }

        .work-expertise{
            padding-left: 5%;
        }

        .edge-inner {
    padding: 20px 22px;      
    border: 0.5px solid #FFFFFF;
    border-radius: 8px;
    color: #FFFFFF;
    letter-spacing: 1.8px;
    font-size: 18px;
    line-height: 18px;
    /* Animation Essentials */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    font-weight: 500;
}

.edge-inner:hover {
    background-color: #FFFFFF; /* Fills box white */
    color: #000000;            /* Text turns black */
    transform: scale(1.03);    /* Slightly grows larger */
}

        .edge-slider{
            gap: 10px;
            margin-top: 58px;
        }

        .keynotes{
            gap: 10px;
            margin-top: 30px;
        }

        .edge-box {
    padding: 20px 22px;      
    border: 0.5px solid #000000;
    border-radius: 8px;
    color: #000000;
    letter-spacing: 1.8px;
    font-size: 18px;
    line-height: 18px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    font-weight: 500;
}

.edge-box:hover {
    background-color: #000000;
    color: #ffffff;
    transform: scale(1.03);
}

.slider-container {
   margin-top: 60px;
}

/* --- Card Design --- */

/* Wrapper to create gap between slides in Slick */
.article-item {
    padding: 0 15px; /* This creates the space between cards */
    height: 100%;
}

.articles-inner {
    display: flex;
    flex-direction: column;
    background-color: #F7F4EB; /* Card Background */
    border: 0.5px solid #00000069;
    border-radius: 12px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Ensure full height */
    min-height: 400px; /* Force consistent height */
}



/* Black Image Box */
.article-img-box {
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.article-img-box img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.article-item:hover .article-img-box img{
    transform: scale(1.2);
    
}

.article-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
}

/* Typography */
.articles-h3 {
    font-size: 16px;
   letter-spacing: 2.2px;
color: #000000;
text-transform: uppercase;
line-height: 35px;
   
    flex-grow: 1; /* Pushes Read More to bottom */
    padding: 0 5px;
    width: 317.22px;
    margin: auto;
     margin-bottom: 37px;
}

.read-more {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 10px;
}

.read-more svg {
    font-size: 12px;
    transition: margin-left 0.2s;
}

.articles-inner:hover .read-more svg {
    margin-left: 5px;
}

/* --- Slick Slider Customization --- */

/* Hide Default Arrow Buttons (if needed, assuming design uses only dots) */
.slick-prev, .slick-next {
    display: none !important;
}

/* Dots Container */
.slick-dots {
    bottom: -40px; /* Position below cards */
}

/* Custom Dots Styling to match image (Hollow vs Solid) */
.slick-dots li {
    margin: 0 5px;
}

.slick-dots li button {
    width: 12px;
    height: 12px;
    padding: 0;
}

/* The actual dot circle */
.slick-dots li button:before {
    content: '';
    width: 10px;
    height: 10px;
    border: 1px solid #333; /* Hollow border */
    border-radius: 50%;
    background: transparent;
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

/* Active Dot Styling */
.slick-dots li.slick-active button:before {
    background-color: #000; /* Solid Black */
    border-color: #000;
    width: 12px; /* Slightly larger on active */
    height: 12px;
    opacity: 1;
}

.media-gallery{
    margin-top: 60px;
    padding-left: 5%;
}
.media-gallery-slider .slick-list{
padding-right: 100px;
}

 .media-gallery-slider .slick-slide {
      margin: 0 13px;
  }

  /* the parent */
 .media-gallery-slider .slick-list {
      margin: 0 -13px;
  }
 .media-gallery-slider .slick-dots{
    left: -3%;
  }

  .footer-link{
    width: 29px;
height: 29px;
border: 1px solid #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease-in-out;
}

.footer-link:hover{
    background-color: #FFFFFF;  
}
.footer-link:hover svg{
    color: #000000;  
}

.footer-link svg{
    width: 11px;
    color: #FFFFFF;
    transition: all 0.3s ease-in-out;
}

.footer-text{
    letter-spacing: 1.43px;
color: #FFFFFF;
text-transform: uppercase;
font-size: 13px;
line-height: 13px;
}
footer{
    padding: 10px 0;
}


.sticky-nav {
    transition: 0.3s ease;
    backdrop-filter:blur(50px);
    padding: 10px 0;
    background: #00000017;
}



.animated {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

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


/**/
/* --- FIXED CSS FOR #vh-section --- */
/* --- CSS UPDATE FOR PINNING CONTAINER ONLY --- */
/* --- CSS UPDATE --- */

/* 1. Main Section - Full viewport height to center the pin */
#vh-section {
  position: relative;
  /* Ensure the section is at least full screen so pin works smoothly */
  min-height: 100vh; 
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center the content */
  align-items: center;
  padding: 100px 0;
  overflow: hidden; 
}

/* 2. Pin Wrapper - This element gets PINNED */
.vh-pin-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
    margin: auto;
    
  /*display: flex; */
  /*flex-direction: column;*/
  /*align-items: center;*/
  /*justify-content: center;*/
}

/* Ensure Heading has spacing */
.vh-pin-wrapper h2 {
  margin-bottom: 100px; /* Space between Heading and Card 1 */
  position: relative;
  z-index: 20; /* Ensure heading is above cards */
}

/* 3. Card Container - Fixed Height */
.vh-stack-container {
  position: relative;
  width: 100%;
  /* 600px allows room for Card 1 + Gap + Card 2 */
  height: 400px; 
  overflow:hidden ;
}

/* 4. The Individual Card */
.vh-card {
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0;
  margin: auto;
  
  width: 100%;
  padding: 30px 20px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  opacity: 0; 
  background: transparent; 
  will-change: transform, opacity;
}

/* --- Brackets & Text --- */
.vh-card::after {
  content: ''; position: absolute; top: 0; right: 0; width: 44px; height: 100%;
  background-image: url(../images/right-brackit.svg);
  background-position: center; background-repeat: no-repeat; background-size: contain;
  pointer-events: none;
}
.vh-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 100%;
  background-image: url(../images/left-brackit.svg);
  background-position: center; background-repeat: no-repeat; background-size: contain;
  pointer-events: none;
}
.vh-gold-title {
  background: transparent linear-gradient(90deg, #F9D16F 0%, #EEBE5C 7%, #E0A341 18%, #DB9A38 25%, #DB9B39 34%, #DD9F40 37%, #E1A64C 39%, #E6B05D 41%, #EDBD73 43%, #F5CD8D 44%, #FDDDA7 45%, #FCDB9D 47%, #FAD584 52%, #F9D274 56%, #F9D16F 60%, #E5AE4D 64%, #D28D2C 68%, #D38E2D 68%, #E1A748 70%, #ECBA5C 71%, #F4C76A 73%, #F8CF73 75%, #FAD276 78%, #FAD582 82%, #F3C974 83%, #E6B259 86%, #DCA043 88%, #D59334 91%, #D18C2B 95%, #D08A29 100%) 0% 0% no-repeat padding-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 32px; line-height: 38px; letter-spacing: 2.2px;
  font-weight: 700; margin-bottom: 10px; text-transform: uppercase;
}
.vh-grey-subtitle {
  color: #999999;
  font-size: 30px; letter-spacing: 2.2px; margin-bottom: 0;
  font-weight: 500; text-transform: uppercase;
}


/* --- LEGACY SECTION GSAP --- */
#legacy-section {
  position: relative;
  /* min-height ensures distinct space for the pin to happen */
  min-height: 100vh; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100px 0;
  /* Background color ensures it covers content behind it */
  background-color: #000; 
  z-index: 10;
}

.legacy-pin-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: auto;
  /* z-index is important so it stays visible */
  z-index: 20; 
}

.legacy-pin-wrapper h2 {
  margin-bottom: 100px;
  position: relative;
  z-index: 20;
}

.legacy-stack-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden; 
}

.legacy-card {
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: auto;
  width: 100%;
  padding: 45px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0; 
  background: transparent; 
  will-change: transform, opacity;
}

/* Specific Leaves for Legacy */
.legacy-card::after {
  content: ''; position: absolute; top: 0; right: 0; width: 58px; height: 100%;
  background-image: url(../images/right-leaf.svg);
  background-position: center; background-repeat: no-repeat; background-size: contain;
  pointer-events: none;
}

.legacy-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 58px; height: 100%;
  background-image: url(../images/left-leaf.svg);
  background-position: center; background-repeat: no-repeat; background-size: contain;
  pointer-events: none;
}




.media-gallery-item img{
    border-radius:10px;
}

.logo21{
    width: 189px;
}

 .bgblack2 {
    background-image: radial-gradient(circle at top right, grey 10%, #000000 34%);
 }
 
 
.masonry-grid {
    margin-top: 60px;
  display: grid;
  /* 6 Columns allows for 2s, 3s, and 6s to fit nicely */
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  /* KEY PROPERTY: This automatically packs items into empty gaps */
  grid-auto-flow: dense; 
}

/* Base styles */
.masonry-grid > div,
.media-gallery-item {
  height: 100%;
  width: 100%;
}

.masonry-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* --- THE PATTERN (Items 1-7) --- */
.masonry-grid > div:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.masonry-grid > div:nth-child(2) { grid-column: span 2; grid-row: span 1; }
.masonry-grid > div:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.masonry-grid > div:nth-child(4) { grid-column: span 2; grid-row: span 1; }
.masonry-grid > div:nth-child(5) { grid-column: span 4; grid-row: span 2; }
.masonry-grid > div:nth-child(6) { grid-column: span 2; grid-row: span 2; }
.masonry-grid > div:nth-child(7) { grid-column: span 2; grid-row: span 1; }

/* --- THE EXTENSION (Items 8-13) --- */
/* Item 8: Wide */
.masonry-grid > div:nth-child(8) { grid-column: span 4; grid-row: span 1; }
/* Item 9: Tall */
.masonry-grid > div:nth-child(9) { grid-column: span 2; grid-row: span 2; }
/* Item 10: Standard square */
.masonry-grid > div:nth-child(10) { grid-column: span 2; grid-row: span 1; }
/* Item 11: Large Feature */
.masonry-grid > div:nth-child(11) { grid-column: span 4;
    grid-row: span 3;}
/* Item 12: Standard square */
.masonry-grid > div:nth-child(12) { grid-column: span 2; grid-row: span 1; }
/* Item 13: Full width panoramic finish */
.masonry-grid > div:nth-child(13) {     grid-column: span 2;
    grid-row: span 2; }


/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
  .masonry-grid {
    /* Switch to 2 columns */
    grid-template-columns: repeat(2, 1fr);
    margin-top: 40px;
  }

  /* Force all items to be 1x1 on mobile to prevent breaking */
  .masonry-grid > div {
    grid-column: span 1 !important; 
    grid-row: span 1 !important;
  }
  
  /* OPTIONAL: Make every 3rd item wide on mobile for variety */
  .masonry-grid > div:nth-child(3n) {
     grid-column: span 2 !important;
  }
}