:root {
    --accentOrange: #FF8800;
    --secondaryColor: #2D93AD;
    --backgroundColor: #130F3C;
    --textColor: #F5F1ED;
    --bodyFont: barlow, sans-serif;
    --bodyWeight: 300;
    --bodyStyle: normal;
    --headerFont: superior-title, serif;
    --headerWeight: 500;
    --headerStyle: normal;

}

/* Global Fixes */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    background-color: var(--backgroundColor);
    color: var(--textColor);
}

/* ------------------------Navbar-------------------------------- */
.navbar {
    background-color: var(--backgroundColor);
    /* position: fixed; */
    top: 0;
    left: 0;
    z-index: 1000;
}

.customNavPadding {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 15px;
    height: 100px;
}

.customLogo {
    width: clamp(60px, 8vw, 100px);
    height: clamp(60px, 8vw, 100px);
    border-radius: 50%;
    object-fit: cover;
}

/* Remove defaults from button element */
.navbar-toggler {
    border: none;
    background: transparent;
    padding: 0;
}

/* Colorize Hamburger to #FF8800 */
.navbar-toggler-icon {
    filter: invert(53%) sepia(93%) saturate(2853%) hue-rotate(11deg) brightness(101%) contrast(106%) !important;
    width: 32px;
    height: 32px;
}

.navbar-toggler:focus {
    box-shadow: none !important;
    outline: none !important
}

/* Slide-out Drawer Panel configuration */
.customSlideDrawer {
    position: fixed;
    top: 80px;
    right: -100%;
    width: 100%;
    max-width: 350px;
    height: calc(100vh - 80px);
    background-color: var(--backgroundColor);
    border-left: 1px solid rgba(255, 136, 0, 0.1);
    /* Subtle orange boundary edge */
    transition: right 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 999;
}

.customSlideDrawer.show {
    right: 0;
}

/* Inner links presentation configuration */
.customSlideDrawer .nav-link {
    color: var(--textColor) !important;
    font-size: 20px;
    font-family: var(--headerFont);
    padding: 15px 30px !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.customSlideDrawer .nav-link:hover {
    color: var(--accentOrange) !important;
    padding-left: 38px !important;
    /* Elegant modern shift look on hover */
}

/* -----------------------Home--------------------------------- */
.headerImage {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    max-height: 475px;
}

.spacer {
    height: 10vh;
}

.portfolioImage {
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.portfolioImage:hover {
    transform: scale(1.03); /* Slightly increase scale for a more noticeable, yet elegant, effect */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); /* Softer, more diffused shadow */
}

a{
    text-decoration: none !important;
}
.homeHeader:hover{
    opacity: .65;
}
/* --- TEXT LAYOUT RULES --- */

/* Base setting: Clean up headings and paragraphs globally */
.textColumn h1 {
    font-size: 2rem;
    letter-spacing: 1px;
}

.textColumn p {
    font-size: 1rem;
    line-height: 1.5;
}

/*  Mobile (Screens smaller than 576px) */
.textWrapper {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Tablet & Desktop Layout (Screens 576px and wider) */
@media (min-width: 576px) {
    .textWrapper {
        max-width: 380px;
        /* Constrains line lengths */
        margin-left: 0;
        margin-right: 0;
        /* Flushes the text container left */
    }

    /* Pushes the Digital Art text wrapper right */
    .textSmEndBlock {
        margin-left: auto;
        margin-right: 0;
    }
}

/* Mobile-Only Alignment Fix (Screens under 576px) */
@media (max-width: 575.98px) {
    .textWrapper {
        width: 85%;
        /* Gives text comfortable margins on mobile screens */
    }
}

/* Home-text Editing */
.rowContainer p {
    font-family: var(--bodyFont);
    font-weight: var(--bodyWeight);
    font-style: var(--bodyStyle);
    color: var(--textColor);
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.rowContainer h1 {
    font-family: var(--headerFont);
    font-weight: var(--headerWeight);
    font-style: var(--headerStyle);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.portfolio {
    color: var(--accentOrange);
}

.digArt {
    color: var(--secondaryColor);
}


/* -----------------------Bio------------------------------------- */

.bioImage {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.bioContainer h1 {
    font-family: var(--headerFont);
    font-weight: var(--headerWeight);
    font-style: var(--headerStyle);
    color: var(--textColor);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.bioContainer p {
    font-family: var(--bodyFont);
    font-weight: var(--bodyWeight);
    font-style: var(--bodyStyle);
    color: var(--textColor);
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.resumeBtn {
    background-color: var(--secondaryColor);
    color: var(--textColor);
    font-family: var(--headerFont);
    font-weight: var(--headerWeight);
    font-size: clamp(1.5rem, 2.25vw, 1.75rem);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    max-width: 400px;
    /* letter-spacing: 0.05em; */
}

.resumeBtn:hover {
    border: 1px solid var(--accentOrange);
    background-color: transparent;
    color: var(--accentOrange);
}

.contactCtaDecor {
    position: absolute;
    width: 250px;
    height: auto;
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
    top: -20px;
    right: -115px;
}

/* -----------------------Digital Art Styles------------------------------- */

.digArtText {
    font-family: var(--bodyFont);
    font-weight: var(--bodyWeight);
    font-style: var(--bodyStyle);
    color: var(--textColor);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.digContactBtn {
    background-color: var(--accentOrange);
    font-family: var(--headerFont);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.digContactBtn:hover {
    background-color: var(--backgroundColor);
    color: var(--accentOrange);
    border: 1px solid var(--accentOrange);
}

/* Digital Art CTA Typography */
.digContactHead {
    font-family: var(--headerFont);
    color: var(--textColor);
}

.digContactDesc {
    font-family: var(--bodyFont);
    color: var(--textColor);
}

/* Container aspect engine overrides */
.mainGallerySwiper {
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.thumbGallerySwiper {
    height: 80px;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.thumbGallerySwiper .swiper-slide {
    aspect-ratio: 1 / 1;
    height: 100%;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

/* Active thumbnail selection state highlight */
.thumbGallerySwiper .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid var(--accentOrange, #ff6b00);
}

/* Custom Swiper Navigation Styles */
.mainGallerySwiper .swiper-button-next,
.mainGallerySwiper .swiper-button-prev {
    color: var(--accentOrange, #ff6b00);
    transition: transform 0.2s ease;
    width: auto !important;
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
}

.mainGallerySwiper .swiper-button-next:hover,
.mainGallerySwiper .swiper-button-prev:hover {
    transform: translateY(-50%) scale(1.1);
}

.galleryCaptionBox {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

#galleryDescText {
    transition: opacity 0.2s ease-in-out;
}

.cursorPointer {
  cursor: pointer;
}



/* make button larger and change their positions */
.slick-prev,
.slick-next {
    width: 50px;
    height: 50px;
    z-index: 1;
}

.slick-prev {
    left: 5px;
}

.slick-next {
    right: 5px;
}

.slick-prev:before,
.slick-next:before {
    font-size: 40px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


/* General slick slider styling */
.slick-slide:focus,
.slick-slide:focus {
    outline: none;
    /* remove default outline when on :focus */
}

/* hide dots and arrow buttons when slider is not hovered */
.slick-slider:not(:hover) .slick-arrow,
.slick-slider:not(:hover) .slick-dots {
    opacity: 0;
}

/* transition effects for opacity */
.slick-arrow {
    transition: opacity 0.5s ease-out;
}


/* Loading effects for main slider */
.slider {
    background: url(img/tail-spin.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px 100px;
    min-height: 100px;
}

.slider img.slick-loading {
    opacity: 0;
}

.slider img {
    transition: opacity 0.3s ease 0s;
}

.slider .slick-loading:after {
    content: 'loading'
}

/* -----------------------Portfolio Styles------------------------------- */
.portfolioBody h1{
    font-family: var(--headerFont);
    color: var(--accentOrange);
}

.portfolioBody h2{
    font-family: var(--headerFont);
    color: var(--textColor);
    font-size: clamp(1.35rem, 8vw, 1.65rem);

}
.portfolioBody p{
    font-family: var(--bodyFont);
    color: var(--textColor) !important;
}
.lightBg {
    background-color: var(--secondaryColor);
}
.videoPlaceholder {
    aspect-ratio: 16 / 10;
    width: 100%;
}
.absoluteFill {
    position: absolute;
    top: 0;
    left: 0;
}

/* --- DECORATIVE IMAGES POSITIONING ENGINE --- */
/* Core Structural Position Wrap Container */
.portfolio-media-wrap {
    position: relative;
    width: 100%;
    display: block;
}

/* Base style setup for assets */
.decorFlower {
    position: absolute;
    height: auto;
    pointer-events: none;
    z-index: 99; /* Higher value layers elements over the borders */
}

/* Pinned strictly to the top-right corner of the layout box */
.anchorBat {
    top: -10%;
    right: -24%;
    width: 45%;
    min-width: 150px;
    max-width: 350px;
    transform: rotate(20deg);
}

/* Pinned strictly to the bottom-left corner of the layout box */
.anchorTower {
    bottom: -12%;
    left: -2%;
    width: 20%; /* Scaled proportionally to match display changes seamlessly */
    min-width: 80px;
    max-width: 180px;
}

.seeFull{
    font-family: var(--headerFont);
    font-weight: var(--headerWeight);
    font-style: var(--headerStyle);
    color: var(--backgroundColor);
    background-color: var(--textColor) ;
}
.seeFull:hover{
    background-color: rgba(217, 218, 219, 0.8) !important;
    color: var(--backgroundColor) !important;
}

/* Section 2 Positions (Coffee Cow) */
/* Bean stalks: Placed tightly to bottom-left layout edge. Hazel tree: Angled out from bottom-right */

.bottomRightSec2 { 
    bottom: 6%; 
    right: -4%; 
    max-width: 450px;
    width: 30%;
    height: auto;
}

/* Section 3 Positions (Jelly Belly) */
/* Jelly monster/fluid: Large overlay stretching across the text and edge line */
.midLeftSec3 { 
    top: 10%; 
    left: -4%; 
    width: 50%;
    max-width: 450px;
    min-width: 110px;
}

.bottomRightSec3 { 
    bottom: 6%; 
    right: -4%; 
    max-width: 350px;
    width: 50%;
    height: auto;
}

/* Section 4 Positions (Elevate / Moodboard) */
/* Black icon emblem: Overlapping image top edge. 'E' token: Layered onto bottom-right corner */
.topCenterSec4 { 
    top: 2%; 
    left: 40%; 
    width: 90px;
}
.midRightSec4 { 
    bottom: 9%; 
    right: 5%; 
    width: 110px;
}

/* Section 5 Positions (Honestgin) */
/* Top-Left Flower: Sits cleanly right on the top-left edge of the box mockup border */
.topLeftSec5 { 
    top: -9%; 
    left: -9%; 
    width: 25%;
    min-width: 100px;
    max-width: 160px;
} 

/* Middle-Left Flower: Anchored safely below the top crop line */
.bottomLeftSec5 { 
   bottom: -6%; 
    left: -7%; 
    width: 22%;
    min-width: 90px;
    max-width: 140px;
} 

/* Bottom-Right Vine: Extended outward over the bottom banner border edge */
.bottomRightSec5 { 
    bottom: -6%; 
    right: -20%; 
    width: 40%;
    min-width: 110px;
    max-width: 250px;
    transform: rotate(65deg); 
}


.lightBg .text-start {
    text-align: left !important;
}

/* Forces the Moodboard image to match the wider landscape profile from your wireframe */
.layoutLandscape {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    height: auto;
}


/* Mobile Adjustments for Decorative Assets */
@media (max-width: 767.98px) {
    .decorFlower {
        width: 100px;
        opacity: 0.4; /* Soften layout overlaps on tiny displays */
    }
}

/* -----------------------Contact Styles------------------------------- */
.contactHeading {
    font-family: var(--headerFont);
    font-weight: var(--headerWeight);
    font-style: var(--headerStyle);
    color: var(--secondaryColor);
}

/* Translucent Glass Card Effect */
.glassCard {
    background: rgba(29, 195, 255, 0.541);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.downloadContact {
    font-family: var(--bodyFont);
    font-weight: var(--bodyWeight);
    font-style: var(--bodyStyle);
    color: var(--accentOrange) !important;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
}

/* Minimal Line Input Fields */
.formControlLine {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #ffffff !important;
    color: #ffffff !important;
    padding: 4px 0;
    border-radius: 0 !important;
    outline: none;
    box-shadow: none !important;
}

.formControlLine:focus {
    border-bottom-color: var(--accentOrange) !important;
    transition: border-color 0.2s ease-in-out;
}

.form-label {
    color: #ffffff !important;
    font-family: var(--bodyFont);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    margin-bottom: 0.5rem;
}

/* Dark Accent Send Button */
.btn-dark-send {
    background-color: #160625 !important;
    color: var(--accentOrange);
    font-family: var(--headerFont);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.btn-dark-send:hover {
    background-color: #240c3a !important;
    color: #ffffff !important;
}


/* Mobile responsive adjustments */
@media (max-width: 767.98px) {
    .formStackSpacing {
        margin-top: -2rem;
        /* Pulls the overlapping glass card element upwards on mobile screens */
        z-index: 10;
    }
}

/* Contact Page Image Overlay */
.contactOverlayImage {
    position: absolute;
    bottom: -40%; 
    left: -4%; /* Adjust to pull it up from the bottom of the col-md-6 */
    width: 70%;  /* Make it smaller, relative to the col-md-6 width */
    z-index: 2;  /* Ensure it's on top of the first image */
}

/* @media (max-width: 767.98px) {
    .contactOverlayImage {
        bottom: -5%;  Less overlap on smaller screens 
        right: 5%;
        width: 50%;
    }
} */

/* Utility Classes for Contact Page */
.textCyan { color: var(--secondaryColor) !important; }
.textCyanLight { color: #a5e1f0 !important; }
.textOrange { color: var(--accentOrange) !important; }



/* Footer Styles */
.footerAvatar {
    width: clamp(100px, 8vw, 150px);
    height: clamp(100px, 8vw, 150px);
    border-radius: 50%;
    object-fit: cover;
}

.footerContainer a {
    color: var(--textColor);
    text-decoration: none;
}

.footerContainer a:hover {
    color: var(--accentOrange);
    text-decoration: underline;
}

.footerContainer {
    color: var(--textColor);
    font-family: var(--bodyFont);
    letter-spacing: 0.04em;
    font-size: clamp(1.15rem, 2vw, 1.25rem);
}

.footerDate {
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    color: var(--secondaryColor);
}

/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Back to Top Button */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--accentOrange);
    color: var(--textColor);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
    /* Ensures it sits above navbars and drawers */
    font-size: 24px;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
}

#backToTop:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}