/* Info: 
Z-index:
1-100 - under all
100-200 - mid
200-300 - top

Lightbox - 700
Top Menu - 300
Gallery - 250

*/


/* General */
/* #region temp */
* {
    margin: 0;
    padding: 0;
}
:root {
    --dark-faded: rgba(0, 0, 0, .95);
    --whiteBG: rgb(255, 255, 255);
    --grayBG: rgb(36, 36, 36);
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent; /* Removes highlight on tap */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}
button, a {
-webkit-tap-highlight-color: transparent; /* Removes highlight on tap */
}
body {
    position: relative;
    font-family: "Sofia Sans", sans-serif;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    min-height: 100vh;
    background-color: rgb(18, 18, 18);
}
.background{
    position:fixed;
    z-index: 1;
    width: 100%;
    height: 100%; 
    overflow: hidden;
}
/* ButtonTransition */
a, .btn {
    transition: all 300ms ease;
}
a{ 
text-decoration: none;
}


/* #region LIGHTBOX */
.lightbox-container {
    position:fixed;
    vertical-align: middle;
    align-content: center;
    z-index: 700;
    display: flex;
    min-width: 100vw;
    min-height: 100dvh;
    background-color: var(--dark-faded);
    opacity: 0;
    pointer-events: none;
    transition: 300ms ease-in-out;
    justify-content: center; /* Horizontal centering */
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
}
.lightbox-container.active {
    opacity: 1;
    pointer-events: all;
} 
.lightbox-image-wrapper {
    display:flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;
    flex-wrap: wrap;
    place-items: center;
    vertical-align: middle;
    position:relative;
    user-select: none;
}
.lightbox-image {
    justify-content: center; /* Horizontal centering */
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    height: 98dvh;
    max-width: 87vw;
    object-fit: contain;
    cursor: default;
    user-select: none;
    -webkit-tap-highlight-color: transparent; 
    transition: opacity 1s ease-in-out, transform 150ms ease-out;
    transform-origin: center;
}
.lightbox-btn {
    display: flex;
    border: none;
    padding: 100dvh 0rem;
    padding-left: 25vw;
    overflow: hidden;
    place-items: center;
    cursor: pointer;
    transition: 250ms ease-in-out;
    position:fixed;
    accent-color: transparent; 
    color: rgba(128, 128, 128, 0.679);
    background-color: transparent;
    user-select: none;
    -webkit-tap-highlight-color: transparent; 
}
.lightbox-btn:focus {
    outline: none;
}
.left {
    rotate: 180deg;
    left: 1.7vw;
}
.left:hover, .left:focus {
    scale: 90%;
    transition: 300ms ease-in-out;
}
.right { 
    right: 1.7vw;
}
.lightbox-btn.inactive{
    opacity: 0;
    pointer-events: none;
}
.lightbox-close-btn {
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.16);
    color: rgb(255, 255, 255);
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 705;
    transition: background-color 250ms ease, transform 250ms ease;
}
.lightbox-close-btn:hover,
.lightbox-close-btn:focus {
    background-color: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
    outline: none;
}
@media (max-width:700px) {
    .lightbox-image{
        width: 100vw;
        max-width: none;
        /* transform: translateY(-2rem); */
    }
    .lightbox-close-btn {
        top: auto;
        right: 1.5rem;
        bottom: 1.5rem;
    }
}
@media (max-width:1700px) {
    .lightbox-btn {
        padding-left: 21vw;
        
    }
}
@media (max-width:1000px) {
    .lightbox-btn {
    color: transparent;
    }
}
/* #endregion  */
/* #region Landing page */
.bg-container {
    position: relative; 
    width: 100%;
    /* height: 75vh; */
    height: 100dvh;
    min-height: 30rem;
    z-index: 206;
    background-image: url('content/Paintings/10.webp');
    background-size: cover;
    background-position: center;
}
.text-overlay {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers horizontally */
    text-align: center;
    z-index: 204;
    position: relative;
    height: 100dvh; /* Full height of the screen */
    width: 100dvw;
    top: 30%;
    /* justify-content: center; */
}
.landing-title {
    font-size: 5dvw;
    color: rgb(255, 246, 208);
    font-weight: 800;
    padding-bottom: .5rem;
    padding-left: 3%;
    padding-right: 3%;
}
.auto-type {
    color: rgb(225, 217, 106);
}
p {
    font-size: 3.5dvw;
    color: rgb(234, 234, 234);
    font-weight: 400;
}
.btn-landing {
    display: flex;
    justify-content: center; 
    align-items: center; 
    z-index: 205;
    position: absolute;
    top: 34%;
    left: 0;
    height: 100%;
    width: 100%;
}
.landing-btn-1,.landing-btn-2 {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 204;
    margin: 2rem;
    text-align: center;
    flex-wrap: wrap;
    object-fit: cover;
    font-weight: 700;
    padding: .8em;
    max-width: 40dvw;
    background-color: rgb(238, 190, 57);
    cursor: pointer;
    transition: all 200ms ease-in-out;
    color:rgb(84, 39, 9);
    font-size: 1.5rem;
    opacity: 100%;
}
.landing-btn-1:hover,.landing-btn-2:hover {
    opacity: 85%;
    scale:95%;
    background-color: rgb(9, 13, 15);
    color: rgb(255, 215, 104);
    border-radius: 1rem;
}    
.bg-container::before {
    content: "";
    position: absolute;
    z-index: 203;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.427); /* Dark overlay */
}
.landing-browse-btn {
    font-size: 1.2dvw;
}
/* #endregion */
/* Concept Art */
.browse-more-container {
    height: 6rem; /* Full viewport height */
    width: 100dvw; /* Full viewport width */
    background-color: rgb(33, 39, 44);
    position: relative;
    z-index: 201;
    padding-top: 2vh;
    padding-bottom: 5vh;
    /* FLEXBOX for centering */
    display: flex;
    justify-content: center;  /* Center horizontally */
    align-items: center;  /* Center vertically */
}
.browse-more-btn {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    text-align: center;
    flex-wrap: wrap;
    object-fit: cover;
    padding: .8em;
    font-weight: 700;
    max-width: 40dvw;
    background-color: rgb(238, 190, 57);
    cursor: pointer;
    transition: all 200ms ease-in-out;
    color:rgb(84, 39, 9);
    font-size: 1.5rem;;
    opacity: 100%;
}
.browse-more-btn:hover {
    opacity: 90%;
    scale:95%;
    background-color: rgb(9, 13, 15);
    color: rgb(255, 215, 104);
    border-radius: 1rem;
}   
 /* #endregion temp  */
/* ////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////*/
/* PROJECTS */
.projects-color-trigger {
    position: absolute;
    background-color: red;
    width: 100%;
    height:1rem;
    opacity: 0;
    pointer-events: none;
    z-index: 1044;
}
.projects-container {
    padding-top: 2rem;
    margin-bottom:5rem ;
    position: relative;
    z-index: 210;
    width: 100%;
    place-items: center;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s ease;
}
.prjects-title {
    display:flex;
    position:relative;
    z-index: 212;
    width: 100%;
    place-items:center;
    justify-content: center;
    align-items: center;
}
.projects-title-text{
    padding-bottom: .7rem;
    position: relative;
    font-size: 3rem;
    font-weight: 700;
    z-index: 212;
}
/* .projects-grid {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    grid-gap: 2.5rem;
    display: grid;
    z-index: 211;
    user-select: none;
    padding: 0 16px;
    box-sizing: border-box;

  
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    
  
    width: 100%;
    max-width: 1000px; 
    margin: 0 auto; 
} */


/* ==========================================================================
   1. BASE SYSTEM (Mobile Setup: 1 Column)
   ========================================================================== */
.projects-grid {
    
    padding-top: 1.5rem;
    display: grid;
    z-index: 211;
    user-select: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    
    /* Forces items to stretch to the edges instead of centering/shrinking */
    justify-content: stretch;
    justify-items: stretch;

    /* SINGLE COLUMN SETUP: 
       Leaves a clean, controlled 20px gap to the edge of the mobile screen.
       The card takes up almost the entire remaining width. */
    padding: 10% 3%; 
    grid-gap: 2rem; 
    grid-template-columns: 1fr; 
}

/* ==========================================================================
   2. TWO COLUMNS SETUP (Small Tablets & Mid-range screens)
   ========================================================================== */
@media (min-width: 630px) {
    .projects-grid {
        /* Holds onto the 2-column layout down into the low-end perfectly.
           Leaves a precise 30px edge gap to the browser window. */
        padding: 5% 5%;
        grid-gap: 2.5rem;
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   3. DESKTOP & 2K MONITOR SETUP (Strict Max of 3 Columns)
   ========================================================================== */

   @media (min-width: 1000px) {
    .projects-grid {
        /* Locks layout to exactly 3 columns maximum */
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 3rem;
        
        /* Restores your premium desktop spacing parameters */
        padding: 5% 5%;
        max-width: 1800px;
        justify-content: center;
    }
}
@media (min-width: 1400px) {
    .projects-grid {
        /* Locks layout to exactly 3 columns maximum */
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 3rem;
        
        /* Restores your premium desktop spacing parameters */
        padding: 5% 10%;
        max-width: 1800px;
        justify-content: center;
    }
}

.project-element{
    z-index: 211;
    position: relative;
    user-select: none;
    justify-content: center;
    align-items: center;
}
.project-image {
    display: block;
    position: relative;
    z-index: 211;
    overflow: hidden;
    border-radius: 0;
    transition: transform 0.3s ease-in-out, border-radius 0.3s ease-in-out;
    user-select: none;
}
.project-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    transition: inherit;
}
.project-image:hover {
    transform: scale(1.05);
    border-radius: 1rem;
}
.project-image:hover img {
    border-radius: 1rem;
}
/* The container for your text links and tags */
.overlay-text {
    display: flex;
    flex-direction: column; /* FORCES elements to stack vertically on separate rows */
    gap: 6px;               /* Adds a clean space between the title row and the tag row */
    padding-top: 12px;      /* Pushes the text safely down below the image boundary */
    width: 100%;
    
    /* Remove any old "justify-content: space-between" properties, as they conflict here */
}


.overlay-font {
    list-style: none;
    font-size: 24px; 
    font-weight: bold; 
    background-color:transparent;
}
.project-tag-font {
    list-style: none;
    font-size: 20px; 
    font-weight: bold; 
    background-color:transparent;
}
/* Project Font Colors */
.ship{
    color: rgb(74, 136, 177);
}
.cf26{
    color: rgb(80, 88, 163);
}
.cf25 {
    color: rgb(173, 16, 16);
}
.pgj {
    color: rgb(37, 68, 83);
}
.nh {
    color: rgb(61, 119, 10);
}
.hp {
    color: rgb(41, 49, 19);
}
.study {
    color: rgb(145, 119, 3);
}
.category-color {
    color: rgb(129, 123, 123);
}
.pp {
    color: rgb(87, 93, 4);
}
.of {
    color: rgb(51, 70, 24);
}
.portal{
    color: rgb(44, 85, 19);
}
.hills{color: rgb(210, 98, 6);}
/* ////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////*/
/* CONTACT */
.contact-container {
/* margin-top: 11rem; */
padding-top: 1rem;
overflow: hidden;
width: 100dvw;
min-height: 80vh;
background-color: rgb(18, 18, 18);
/* background-color: rgb(33, 39, 44); */

position: relative;
z-index: 220;
}
.contact-title {
display: block;
padding-bottom: 1rem;
padding-top: 3rem;
position:relative;
z-index: 221;
width: 100dvw;
place-items:center;
justify-content: center;
align-items: center;
}
.contact-title-text {
color: var(--whiteBG);
}
.contact-list-container {
padding-top: 1rem;
width: 80dvw;
justify-self: center;
justify-items:center;
justify-content:center;
align-items: center;
}
.contact-info {
color: aliceblue;
display: flex; 
align-items: center; 
gap: 10px;
padding-bottom: 1.5rem;
text-align: center;
justify-content: center;
}
.contact-links { 
align-self:center;
color: aliceblue;
text-decoration: underline;
text-decoration-thickness: .17rem;
text-decoration-color: rgb(232, 179, 32);
cursor: pointer;
display: flex;
z-index: 221;
font-size: 1.3rem;
padding-bottom: 1.5rem;
}
.contact-title-text {
    font-size: 3rem;
    font-weight: 700;
    color: rgb(232, 179, 32);
}

.fil0 { fill: none; }
.fil1 { fill: rgb(165, 202, 204); }

.back-to-top-icon {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    width: 3rem !important;
    height: 3rem !important;
    background-color: rgba(0, 0, 0, 0.65) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;                /* Enable Flexbox */
    justify-content: center !important;      /* Center horizontally */
    align-items: center !important;          /* Center vertically */
    padding: 0.4rem !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 200ms ease, transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
    transform: translateY(10px) !important;
    z-index: 9999 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.25) !important;
}

.back-to-top-icon.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.back-to-top-icon:hover {
    transform: translateY(-4px) !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.back-to-top-icon svg {
    width: 1rem !important;
    height: 1rem !important;
    fill: currentColor !important;
}

/* Explicitly show the button when relocated to body */
body > .back-to-top-icon {
    opacity: 1 !important;
    pointer-events: auto !important;
}

body > .back-to-top-icon:not(.visible) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* When the lightbox is open, hide and disable the back-to-top button to avoid conflicts */
.lightbox-open .back-to-top-icon,
body.lightbox-open > .back-to-top-icon {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
}

a {
    color: inherit;
 }
 /* ////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////*/
 /* Media Query */
 /* MEDIA 1 */
 @media (min-width: 1000px) and (max-width:1400px) {
    .text-overlay {
        top: 20%;
    }
    .landing-btn-1,.landing-btn-2 {
        margin-bottom: 5rem;
        color:rgb(84, 39, 9);
        font-size: 1.3rem;
        text-decoration: none;
    }
    .browse-more-btn {
        color:rgb(84, 39, 9);
        font-size: 1.3rem;
        text-decoration: none;
    }
    .landing-title {
        font-size: 4.5rem;
    }
    p {
        font-size: 3rem;
    }
}
/* MEDIA 2 */
 @media (min-width: 600px) and (max-width:1000px) {
    .bg-container {
        height: 100dvh;
    }
    .text-overlay {
        top: 22%;
    }
    .btn-landing {
        top: 12%;
    }
    .landing-btn-1,.landing-btn-2 {
        margin-bottom: 1rem;
        color:rgb(84, 39, 9);
        font-size: 1.2rem;
        text-decoration: none;
    }
    .browse-more-btn {
        color:rgb(84, 39, 9);
        font-size: 1.2rem;
        text-decoration: none;
    }
    .landing-title {
        font-size: 3rem;
    }
    p {
        font-size: 2.5rem;
    }   
}
/* MEDIA 3 */
@media (max-width:600px) {
        .overlay-text {
    margin-bottom: 1rem;
    }
    .text-overlay {
        top: 25%;
    }
    .browse-more-btn {
        font-size: 1.3rem;
    }
    .bg-container {
        background-size: 250%;
        width: 100%;
        height: 100dvh;
        /* height: 660px; */
        background-size: cover;
        background-position: center;
    }
    .landing-title {
        font-size: 2.9rem;
    }
    p {
        font-size: 1.8rem;
    }
    .btn-landing {
        top: 18%;
    }
    .landing-btn-1,.landing-btn-2 {
        margin-bottom: 20%;
        color:rgb(84, 39, 9);
        text-decoration: none;
        font-size: 1.3rem;
    }
    .browse-more-container {
        padding-top: 0 ;
    }
    .contact-list-container {
        height: 50dvh;
    }
    .browse-more-btn:hover {
        opacity: 100%;
        scale:100%;
        border-radius: 0;
        background-color: rgb(238, 190, 57);
        color:rgb(84, 39, 9);
    }    
    .concept-art {
        padding-bottom: .7rem;
        font-size: 2.3rem;
        font-weight: 700;
    }
    .contact-title-text {
        font-size: 3rem;
        font-weight: 700;
        color: rgb(232, 179, 32);
    }
    .landing-btn-1:hover,.landing-btn-2:hover {
        opacity: 100%;
        scale:100%;
        border-radius: 0;
        background-color: rgb(238, 190, 57);
        color:rgb(84, 39, 9);
        }  }
        /* #endregion temp */
/* MEDIA 3 */
@media (max-width:450px) {
    .projects-grid{
    padding-top: 1.5rem;
    grid-gap: 3rem;
    display: grid;
    z-index: 211;
    /* grid-template-columns: 1fr 1fr 1fr; */
    user-select: none;
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;
}
  .project-element{
    z-index: 211;
    position: relative;
    user-select: none;
    justify-content: center;
    align-content: center;
    align-self: center;
    align-items: center;
}
    .project-image {
        object-fit: contain;
        object-position: center;
         justify-content: center;
    }
    .overlay-text {
         /* object-fit: cover; */
        /* object-position: center; */
         justify-content: space-between;
         justify-self:center;
    }
    .overlay-font {
        font-size: 20px;
    }
    .overlay-text {
    margin-bottom: 0.1rem;
    }
    .text-overlay {
        top: 25%;
       
    }
    .browse-more-btn {
        font-size: 1.3rem;
    }
    .bg-container {
        background-size: 250%;
        width: 100%;
        height: 100dvh;
        background-size: cover;
        background-position: center;
    }
    .landing-title {
        font-size: 2.9rem;
    }
    p {
        font-size: 1.8rem;
    }
    .btn-landing {
        top: 18%;
    }
    .landing-btn-1,.landing-btn-2 {
        margin-bottom: 20%;
        color:rgb(84, 39, 9);
        text-decoration: none;
        font-size: 1rem;
    }
    .browse-more-container {
        padding-top: 0 ;
    }
    .contact-list-container {
        height: 50dvh;
    }
    .browse-more-btn:hover {
        opacity: 100%;
        scale:100%;
        border-radius: 0;
        background-color: rgb(238, 190, 57);
        color:rgb(84, 39, 9);
    }    
    .concept-art {
        padding-bottom: .7rem;
        font-size: 2.3rem;
        font-weight: 700;
    }
    .contact-title-text {
        font-size: 3rem;
        font-weight: 700;
        color: rgb(232, 179, 32);
    }
    .landing-btn-1:hover,.landing-btn-2:hover {
        opacity: 100%;
        scale:100%;
        border-radius: 0;
        background-color: rgb(238, 190, 57);
        color:rgb(84, 39, 9);
        }  
}

@media (max-width:450px) {
    .projects-grid{
    padding-top: 1.5rem;
    grid-gap: 3rem;
    display: grid;
    z-index: 211;
    /* grid-template-columns: 1fr 1fr 1fr; */
    user-select: none;
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;
}
  .project-element{
    z-index: 211;
    position: relative;
    user-select: none;
    justify-content: center;
    align-content: center;
    align-self: center;
    align-items: center;
}
    .project-image {
        object-fit: contain;
        object-position: center;
         justify-content: center;
    }
    .overlay-text {
         /* object-fit: cover; */
        /* object-position: center; */
         justify-content: space-between;
         justify-self:center;
    }
    .overlay-font {
        font-size: 20px;
    }
    .overlay-text {
    margin-bottom: 0.1rem;
    }
    .text-overlay {
        top: 25%;
       
    }
    .browse-more-btn {
        font-size: 1.3rem;
    }
    .bg-container {
        background-size: 250%;
        width: 100%;
        /* height: 660px; */
        height: 100dvh;
        background-size: cover;
        background-position: center;
    }
    .landing-title {
        font-size: 2.4rem;
    }
    p {
        font-size: 1.8rem;
    }
    .btn-landing {
        top: 18%;
    }
    .landing-btn-1,.landing-btn-2 {
        margin-bottom: 20%;
        color:rgb(84, 39, 9);
        text-decoration: none;
        font-size: 1rem;
    }
    .browse-more-container {
        padding-top: 0 ;
    }
    .contact-list-container {
        height: 50dvh;
    }
    .browse-more-btn:hover {
        opacity: 100%;
        scale:100%;
        border-radius: 0;
        background-color: rgb(238, 190, 57);
        color:rgb(84, 39, 9);
    }    
    .concept-art {
        padding-bottom: .7rem;
        font-size: 2.3rem;
        font-weight: 700;
    }
    .contact-title-text {
        font-size: 2.5rem;
        font-weight: 700;
        color: rgb(232, 179, 32);
    }
    .landing-btn-1:hover,.landing-btn-2:hover {
        opacity: 100%;
        scale:100%;
        border-radius: 0;
        background-color: rgb(238, 190, 57);
        color:rgb(84, 39, 9);
        }  
    }   
@media (max-width:350px) {
.project-element{
    z-index: 211;
    position: relative;
    user-select: none;
    justify-content: center;
    align-content: center;
    align-self: center;
    align-items: center;
}
    .project-image {
        object-fit: contain;
        object-position: center;
         justify-content: center;
    }
    .overlay-text {
         justify-content: space-between;
         justify-self:center;
    }
    .overlay-font {
        font-size: 20px;
    }
    .overlay-text {
    margin-bottom: 0.1rem;
    }
    .text-overlay {
        top: 25%;
       
    }
    .browse-more-btn {
        font-size: 1rem;
    }
    .bg-container {
        background-size: 250%;
        width: 100%;
        /* height: 560px; */
        height: 100dvh;
        background-size: cover;
        background-position: center;
    }
    .landing-title {
        font-size: .3rem;
    }
    p {
        font-size: 1.5rem;
    }
    .btn-landing {
        top: 18%;
    }
    .landing-btn-1,.landing-btn-2 {
        margin-bottom: 20%;
        color:rgb(84, 39, 9);
        text-decoration: none;
        font-size: .9rem;
    }
    .browse-more-container {
        padding-top: 0 ;
    }
    .contact-list-container {
        height: 20dvh;
    }
    .browse-more-btn:hover {
        opacity: 100%;
        scale:100%;
        border-radius: 0;
        background-color: rgb(238, 190, 57);
        color:rgb(84, 39, 9);
    }    
   
    .contact-title-text {
        font-size: 2rem;
        font-weight: 700;
        color: rgb(232, 179, 32);
    }
    .landing-btn-1:hover,.landing-btn-2:hover {
        opacity: 100%;
        scale:100%;
        border-radius: 0;
        background-color: rgb(238, 190, 57);
        color:rgb(84, 39, 9);
        }  
    .contact-container {
        /* margin-top: 11rem; */
        padding-top: 1rem;
        overflow: hidden;
        width: 100dvw;
        min-height: 100vh;
        background-color: rgb(18, 18, 18);
        /* background-color: rgb(33, 39, 44); */
    }        
}