/* ------------------------------
         GLOBAL: START
   ------------------------------ */

/* ------------------------------
             FONTS
   ------------------------------ */

/* Define custom fonts using @font-face */
@font-face {
    font-family: 'Raleway-Black';
    src: url('../fonts/Raleway_Black.woff2') format('woff2'),
         url('../fonts/Raleway_Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway-Bold-Italic';
    src: url('../fonts/Raleway_Bold_Italic.woff2') format('woff2'),
         url('../fonts/Raleway_Bold_Italic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway-Regular';
    src: url('../fonts/Raleway_Regular.woff2') format('woff2'),
         url('../fonts/Raleway_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair-Display';
    src: url('../fonts/Playfair_Display_Black.woff2') format('woff2'),
         url('../fonts/Playfair_Display_Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Libre-Baskerville';
    src: url('../fonts/Libre_Baskerville_Regular.woff2') format('woff2'),
         url('../fonts/Libre_Baskerville_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* ------------------------------
         GENERAL RESET
   ------------------------------ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ------------------------------
          BUTTON RESET
   ------------------------------ */

button {
    background: none;       /* Removes any background */
    border: none;           /* Removes any border */
    outline: none;          /* Removes outline */
    padding: 0;             /* Removes any default padding */
    cursor: pointer;       /* Ensures the pointer cursor appears */
}

/* ------------------------------
             LINK RESET
   ------------------------------ */

a {
    text-decoration: none; /* Removes underline */
    color: inherit;        /* Inherit color from parent element */
}

/* ------------------------------
             BODY RESET
   ------------------------------ */

html, body {
    height: 100%;
    margin: 0; /* Remove default margin */
    scroll-behavior: smooth;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    font-size: 100%; /* Equivalent to 16px */
}

/* ------------------------------
      SCROLLBAR CUSTOMIZATION
   ------------------------------ */

/* Webkit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 1px;  /* Adjust the width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: transparent;  /* Make the track transparent */
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);  /* Light thumb color */
    border-radius: 10px;  /* Optional: rounded corners */
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);  /* Darken thumb on hover */
}

/* Firefox */
html {
    scrollbar-width: thin;  /* Make the scrollbar thinner */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;  /* Set thumb and track colors */
}

/* ------------------------------
             NAV BAR
   ------------------------------ */

#cs-navigation {
    width: 100%;
    box-sizing: border-box;
    background-color: #000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 10000;
}

#cs-navigation .cs-container {
    width: 100%;
    height: 4.75rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding: 1rem 2rem;
}

#cs-navigation {
    transition: transform 0.3s ease-in-out;
}

#cs-navigation .cs-logo {
    position: relative;
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#cs-navigation .cs-logo:hover {
    transform: scale(1.1); /* Slightly enlarges the logo */
}

#cs-navigation .cs-logo img {
    user-drag: none;
    -webkit-user-drag: none; /* For Safari */
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
}

/* ------------------------------
           BACKGROUND
   ------------------------------ */

/* Background gradient */
.background-gradient {
    position: fixed; /* Fix the background relative to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ensures it covers the entire height */
    background: linear-gradient(0deg, #FCEE21, #FF7BAC); /* Gradient colors */
    z-index: -1; /* Place behind the navbar and content */
}

/* Content container for scrolling */
.content-container {
    position: absolute;
    top: 4.75rem;
    width: 100%;
    min-height: 100vh; /* Ensure the container is at least the height of the viewport */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align items at the top */
    align-items: center;
    box-sizing: border-box;
    overflow: auto; /* Allow scrolling */
}

.content-wrapper {
    position: relative;
    width: calc(100% - 3rem); /* Slightly smaller than full width */
    min-height: 100vh;
    margin: 1.5rem; /* Creates space at the top */
    gap: 3rem;
    border-radius: 1rem; /* Adds rounded corners */
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align items to the top */
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    /* Only hide overflow in the X direction to prevent horizontal scroll */
    overflow-x: hidden;
    overflow-y: auto; /* Allows vertical scrolling */
    /* Watermark Background */
    background-image: url('../icons/ico_logo_bg.svg');
    background-repeat: no-repeat;
    background-size: 60rem; /* Watermark size */
    background-position: top;
    background-attachment: fixed; /* Makes watermark stay in place while scrolling */
    user-drag: none;  /* Disable dragging */
    -webkit-user-drag: none; /* For Safari */
}

.legal-page .content-wrapper {
    background-color: #F3E8E0;
    background-image: none;
}

/* ------------------------------
    HEADING & BUTTON MOUSE EFFECT
   ------------------------------ */

.cs-heading,
.button {
    transition: transform 0.3s ease-out; /* Ensures smooth movement */
}

/* ------------------------------
             HEADING
   ------------------------------ */

.cs-heading {
    margin-top: 1rem;
    font-family: 'Raleway-Black', sans-serif;
    font-weight: 900;
    font-feature-settings: "ss01" 1; /* Enables stylistic set 1, if available */
    line-height: 0.8; /* Adjust vertical spacing */
    text-transform: uppercase;
    background: linear-gradient(45deg, #FF7BAC, #FCEE21);
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 1));
}

.legal-page .cs-heading {
    color: #000;
    background: none;
    filter: none;
}

/* ------------------------------
            LEGAL NAV
   ------------------------------ */

/* Legal Navigation */
.legal-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-left: 2rem; /* Add horizontal padding */
    padding-right: 2rem; /* Add horizontal padding */
}

.legal-link {
    font-family: 'Raleway-Black', sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1.5em;
    color: #000;
    text-decoration: none;
    position: relative;
    transition: transform 0.2s ease;
}

/* Hover effect */
.legal-link:hover {
    color: #FF7BAC;
    transform: scale(1.1);
}

/* Prevent scaling on the active link */
.legal-link.cs-active:hover {
    color: #FF7BAC;
}

/* Underline effect */
.legal-link:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background: #FF7BAC;
    transform: scaleX(0); /* Initially hidden */
    transform-origin: right;
    transition: transform 0.3s ease;
    will-change: transform, opacity;
}

/* Hover effect - expand from left */
.legal-link:hover:before {
    transform: scaleX(1);
    transform-origin: left;
}

/* Active link styling */
.legal-link.cs-active {
    color: #FF7BAC;
}

/* Active underline */
.legal-link.cs-active:before {
    width: 100%;
    transform: scaleX(1);
    transform-origin: left;
}

/* ------------------------------
      SCROLL ANCHOR: CONTACT
   ------------------------------ */

.legal-page #contact {
    margin-top: -6rem;
}

/* ------------------------------
            SUBHEADING
   ------------------------------ */

.cs-subheading {
    font-family: 'Raleway-Black', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 7vw, 5rem); /* Responsive font size */
    font-variant-numeric: lining-nums; /* lining-nums will enforce lining numerals */
    font-feature-settings: "ss01" 1; /* Enables stylistic set 1, if available */
    line-height: 1.2; /* Adjust vertical spacing */
    background: linear-gradient(45deg, #FF7BAC, #FCEE21);
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 1));
}

.contact-page .cs-subheading-line {
    font-family: 'Raleway-Bold-Italic', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1rem, 5vw, 4rem);
    font-feature-settings: "ss02" 1;
    /* Underline Effect */
    display: inline-block;
}

.legal-page h2 {
    font-family: 'Playfair-Display', serif;
    font-weight: 900;
    font-size: clamp(2rem, 7vw, 5rem); /* Responsive font size */
    text-transform: uppercase;
    color: #000;
    filter: none;
}

.legal-page h3 {
    font-family: 'Playfair-Display', serif;
    font-weight: 900;
    font-size: clamp(2rem, 6vw, 4rem); /* Responsive font size */
    text-transform: uppercase;
    color: #000;
    filter: none;
}

.legal-page h4 {
    font-family: 'Libre-Baskerville', serif;
    font-weight: 400;
    font-size: clamp(1.25rem, 4.5vw, 3.25rem); /* Responsive font size */
    line-height: 1.8;
    max-width: 30ch; /* Keeps text from stretching too wide */
    text-transform: uppercase;
    color: #000;
    filter: none;
}

/* ------------------------------
      EMAIL CONTACT CLIPBOARD
   ------------------------------ */

.contact-page .cs-subheading {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-align: center;
}

.contact-page .cs-subheading:hover {
    transform: scale(1.05);
}

.contact-page .cs-subheading-line::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    width: 100%;
    height: 4px;
    border-radius: 6px;
    background: linear-gradient(45deg, #FF7BAC, #FCEE21);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
    will-change: transform, opacity;
}

.contact-page .cs-subheading:hover .cs-subheading-line::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ------------------------------
      EMAIL CONTACT TOOLTIP
   ------------------------------ */

/* Tooltip Styles */
.tooltip {
    font-family: 'Raleway-Black', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    position: absolute;
    top: -2rem;
    left: 50%;
    text-align: center;
    display: flex; /* Enable flexbox to align content */
    justify-content: center; /* Horizontally center the text */
    align-items: center; /* Vertically center the text */
    transform: translateX(-50%);
    background-color: #FF7BAC;
    color: white;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    white-space: nowrap;
}

/* Show tooltip when copied */
.copy-email.copied + .tooltip {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------
      LEGAL CONTACT CLIPBOARD
   ------------------------------ */

.legal-page .contact-text {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-align: left; /* Keep text aligned left */
    display: inline-block; /* Prevents full-width scaling issues */
    transform-origin: left; /* Ensures scaling happens towards the right */
    will-change: transform; /* Optimize for Safari */
    padding-bottom: 0.2rem; /* Slightly more padding to prevent clipping */
}

.legal-page .contact-text:hover {
    transform: scale(1.05);
}

.legal-page .cs-text-line {
    position: absolute;
}

.legal-page .cs-text-line::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    border-radius: 6px;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
    will-change: transform, opacity;
}

.legal-page .contact-text:hover .cs-text-line::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ------------------------------
       LEGAL CONTACT TOOLTIP
   ------------------------------ */

/* Tooltip Styles */
.legal-page .tooltip {
    font-family: 'Raleway-Black', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    position: absolute;
    width: 6rem;
    height: 2rem;
    top: -2rem; /* Position the tooltip above the email text */
    left: 5rem; /* Align the tooltip to the left of the email text */
    text-align: center;
    display: flex; /* Enable flexbox to align content */
    justify-content: center; /* Horizontally center the text */
    align-items: center; /* Vertically center the text */
    background-color: #000;
    color: white;
    font-size: 1.2rem; /* Adjusted font size for tooltip */
    border-radius: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    white-space: nowrap;
}

/* Show tooltip when copied */
.legal-page .copy-email.copied + .tooltip {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------
            SUBTEXT
   ------------------------------ */

.cs-text {
    padding-left: 2rem; /* Add horizontal padding */
    padding-right: 2rem; /* Add horizontal padding */
    font-family: 'Raleway-Bold-Italic', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2rem, 8vw, 6rem); /* Responsive font size */
    max-width: 30ch; /* Keeps text from stretching too wide */
    color: #FFF;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 1));
}

.contact-page .cs-text {
    z-index: 1;
}

/* Keep .cs-text-left aligned to the left, but the wrapper still centered */
.legal-page .content-wrapper .cs-text-left {
    align-self: center; /* Center text vertically within the container */
}

.legal-page .cs-text-left {
    padding-left: 2rem; /* Add horizontal padding */
    padding-right: 2rem; /* Add horizontal padding */
    font-family: 'Libre-Baskerville', serif;
    font-weight: 400;
    font-size: clamp(1.25rem, 4.5vw, 3.25rem); /* Responsive font size */
    max-width: 30ch; /* Keeps text from stretching too wide */
    color: #000;
    text-align: justify;
    text-justify: inter-word;
    line-height: 2.5rem;
    display: block; /* Makes the p tags behave as block-level elements */
    width: 100%; /* Ensures p tag takes full width */
}

.legal-page .cs-text-center {
    padding-left: 2rem; /* Add horizontal padding */
    padding-right: 2rem; /* Add horizontal padding */
    font-family: 'Libre-Baskerville', serif;
    font-weight: 400;
    font-size: clamp(1.25rem, 4.5vw, 3.25rem); /* Responsive font size */
    color: #000;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    

/* ------------------------------
          CONTACT PHOTO
   ------------------------------ */

.contact-images {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .75));
    cursor: pointer; /* Show pointer cursor on hover */
    transition: transform 0.5s ease;
}

.contact {
    display: block;  /* Make the images block-level so they don't align horizontally */
    width: 100%;
    height: auto;
    object-fit: contain;  /* Ensures the images maintain their aspect ratio */
    user-drag: none;
    -webkit-user-drag: none; /* Safari */
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
        
}

.contact-images:hover {
    transform: scale(1.05);
}

.portrait {
    position: relative;  /* Keeps the portrait in normal flow */
    width: 100%;
    z-index: 1;
    opacity: 1;
    visibility: visible;
}

.lumi {
    position: absolute;
    width: 100%; /* Increase size of the signature*/
    top: -0.15rem;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevent it from blocking hover */
}

/* Show Lumi when hovering/tapping the container */
.contact-images:hover .lumi {
    opacity: 1;
    visibility: visible;
}

/* Optionally fade the portrait when Lumi shows */
.contact-images:hover .portrait {
    opacity: 0;
    visibility: hidden;
}

/* ------------------------------
          PROJECT IMAGES
   ------------------------------ */

.projects {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.projects img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.75);
    cursor: pointer; /* Indicates the image can be expanded */
    transition: transform 0.3s ease; /* Smooth scaling transition */
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
}

.projects img:hover {
    transform: scale(1.1); /* Slightly enlarges the image on hover */
}

/* ------------------------------
             LIGHTBOX
   ------------------------------ */

/* Lightbox container (hidden by default) */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #191919;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0);
    transition: transform 0.2s ease-in-out;
    z-index: 10001;
}

/* Lightbox image container */
.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Lightbox image */
.lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.75);
    border-radius: 1.5rem;
    cursor: pointer;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
}

/* Show lightbox when active */
.lightbox.active {
    transform: scale(1);
}

/* Prevent scrolling when lightbox is active */
.no-scroll {
    overflow: hidden;
    height: 100vh; /* Locks viewport height */
}

/* ------------------------------
          LIGHTBOX CLOSE
   ------------------------------ */

.close-lightbox {
    filter: opacity(0.5); /* Lower opacity when visible */
}

.close-lightbox:hover {
    filter: opacity(1); /* Higher opacity when hovered */
}

/* Default state: Close button is hidden (scaled down) */
.lightbox .close-lightbox {
    position: absolute;
    top: 20px;
    right: 20px;
    transform: translateX(5rem) scale(0);
    transition: transform 0.5s ease;
}

/* When the lightbox is active, scale it up */
.lightbox.active .close-lightbox {
    transform: translateX(0) scale(1);
}

/* Close icon button styling */
.close-lightbox-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    z-index: 10002; /* Ensure it's above the image */
    opacity: 1; /* Ensure it's visible initially */
    transition: transform 0.2s ease; /* Smooth scaling and fade transition */
}

/* Close hover icon styling (hidden by default) */
.close-hover-lightbox-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    z-index: 10002;
    opacity: 0; /* Initially hidden */
    transition: transform 0.2s ease; /* Smooth scaling and fade transition */
}

/* Hover effect: Hide default close icon and show hover icon */
.close-lightbox:hover .close-lightbox-icon {
    opacity: 0; /* Fade out the default close icon */
    transform: scale(1.1); /* Slightly scale up the hover icon */
}

.close-lightbox:hover .close-hover-lightbox-icon {
    opacity: 1; /* Fade in the hover close icon */
    transform: scale(1.1); /* Slightly scale up the hover icon */
}

.close-lightbox img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
}


/* ------------------------------
        BUTTON PAGE LINKS
   ------------------------------ */

.buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 1));
}

.button {
    font-family: 'Raleway-Black', sans-serif;
    font-weight: 900;
    font-size: clamp(8rem, 42vw, 35rem); /* Responsive font size */
    line-height: 0.8; /* Adjust vertical spacing */
    text-transform: uppercase;
    background: linear-gradient(45deg, #FF7BAC, #FCEE21);
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.legal-page .buttons {
    filter: none;
    
}

.legal-page .button {
    color: #000;
    
}

/* Add hover effect on all buttons */
.button:hover {
    color: #FF7BAC;
}

.button img {
    width: auto;
    height: 3rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Combined transition for smooth change */
    transform: scale(1);
    opacity: 1; /* Make sure the image is fully visible */
    user-drag: none;
    -webkit-user-drag: none; /* For Safari */
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
}

/* Change the image when hovering the button */
.button:hover img {
    transform: scale(1.1); /* Slightly scale up on hover */
    transition: transform 0.3s ease;
}

.button-explore img {
    content: url('../icons/ico_arrow_left.svg'); /* Default icon when not hovered */
}

.button-explore:hover img {
    content: url('../icons/ico_arrow_left_hover.svg'); /* Change to the hover icon */
}

.legal-page .button-explore img {
    content: url('../icons/ico_arrow_left_legal.svg'); /* Change to the hover icon */
}

.legal-page .button-explore:hover img {
    content: url('../icons/ico_arrow_left_hover.svg'); /* Change to the hover icon */
}

.button-discover img {
    content: url('../icons/ico_arrow_right.svg'); /* Default icon when not hovered */
}

.button-discover:hover img {
    content: url('../icons/ico_arrow_right_hover.svg'); /* Change to the hover icon */
}

.services-page .button-discover img {
    content: url('../icons/ico_arrow_left.svg'); /* Default icon when not hovered */
}

.services-page .button-discover:hover img {
    content: url('../icons/ico_arrow_left_hover.svg'); /* Change to the hover icon */
}

.button-services img {
    content: url('../icons/ico_arrow_right.svg'); /* Default icon when not hovered */
}

.button-services:hover img {
    content: url('../icons/ico_arrow_right_hover.svg'); /* Change to the hover icon */
}

.button-contact img {
    content: url('../icons/ico_arrow_right.svg'); /* Default icon when not hovered */
}

.button-contact:hover img {
    content: url('../icons/ico_arrow_right_hover.svg'); /* Change to the hover icon */
}

/* ------------------------------
        BUTTON SCROLL TO TOP
   ------------------------------ */

#scrollToTopBtn {
    position: fixed;
    bottom: 5.8rem;
    right: 3rem;
    width: 4rem;
    height: 4rem;
    opacity: 0;
    pointer-events: none; /* Prevents interaction when hidden */
    transition: opacity 0.3s ease;
    filter: opacity(0.5); /* Lower opacity when visible */
    z-index: 9999;
}

.legal-page #scrollToTopBtn {
    filter: opacity(0.1); /* Lower opacity when visible */
}

.cs-scroll img {
    animation: animateMobileIcons 0.5s ease;
    transition: transform 0.2s ease;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .75));
    user-drag: none;
    -webkit-user-drag: none; /* For Safari */
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
}

.legal-page .cs-scroll img {
    filter: none;
}

#scrollToTopBtn:hover img {
    filter: opacity(1) drop-shadow(2px 2px 4px rgba(0, 0, 0, .75));
    transform: scale(1.1);
}

.legal-page #scrollToTopBtn:hover img {
    filter: opacity(1);
}

/* Show Button Only When at Bottom */
#scrollToTopBtn.visible {
    opacity: 1;
    pointer-events: auto;
}

#scrollToTopBtn:hover {
    filter: opacity(1); /* Full opacity on hover */
    transform: scale(1.1); /* Slightly enlarge for effect */
}

/* ------------------------------
        FOOTER PAGE LINK
   ------------------------------ */

.cs-footer {
    z-index: 10;
}

.cs-footer-legal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #FF7BAC; /* Text color */
    font-family: 'Raleway-Regular', sans-serif; /* Match the font used for nav links */
    font-weight: 400;
    font-size: 1rem;
    gap: 1rem;
    transition: transform 0.2s ease;
    animation: animateMobileIcons 0.5s ease;
    z-index: 10;
}

.legal-page .cs-footer-legal {
    filter: none;
}

/* "Built by" text */
.built-by {
    color: #FFF;
    font-size: 0.75rem;
    text-align: center;
    margin-top: -0.5rem; /* Adds spacing */
}

.legal-page .built-by {
    color: #000;
}

.legal-page .cs-footer-legal {
    color: #000;
}

/* Prevent underline from being applied */
.cs-footer-legal:before {
    content: none; /* Remove the underline effect */
}

/* Hover effect */
.cs-footer-legal:hover {
    transform: scale(1.1); /* Slightly scale up the button on hover */
}

/* Logo image styling */
.cs-footer-legal img {
    width: auto;
    height: 4rem; /* Adjust the height of the logo */
    user-drag: none;
    -webkit-user-drag: none; /* Prevent Safari dragging */
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
}

/* Hover effect for logo image */
.cs-footer-legal:hover img {
    content: url('../icons/ico_logo_mark_hover.svg'); /* Change the image on hover */
}

/* ---------------------------------
            SOCIAL MEDIA
   --------------------------------- */

.cs-social {
    padding-bottom: 3rem;
    z-index: 10;
}

.cs-social-instagram {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; /* Align icon & text in a single row */
    text-align: center;
    gap: 0.5rem; /* Adds space between the icon and text */
    text-decoration: none;
    font-family: 'Raleway-Regular', sans-serif;
    font-weight: 400;
    transition: transform 0.2s ease;
    animation: animateMobileIcons 0.5s ease;
}

/* Instagram Username Text */
.social-instagram {
    color: #FFF;
    font-size: 1rem;
}

.legal-page .social-instagram {
    color: #000;
}

.cs-social-instagram img {
    width: auto;
    height: 1.5rem; /* Adjust the height of the logo */
    transition: transform 0.2s ease; /* Smooth scaling */
    user-drag: none;
    -webkit-user-drag: none; /* Prevent Safari dragging */
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
}

/* Initially hide the hover images */
.cs-social-instagram .cs-instagram-hover-icon {
    display: none;
    opacity: 0;
}

/* Initially hide the hover images */
.cs-social-instagram .cs-instagram-alt-hover-icon {
    display: none;
    opacity: 0;
}

/* Hover Effect - Scale Up and Change Icon */
.cs-social-instagram:hover {
    transform: scale(1.1); /* Slight scale-up effect */
}

/* Hover Effect for Logo Image */
.cs-social-instagram:hover img.cs-instagram-icon {
    display: none; /* Hide default icon on hover */
}

.cs-social-instagram:hover .cs-instagram-hover-icon {
    display: block; /* Show the first hover icon */
    opacity: 1;
}

.cs-social-instagram:hover .cs-instagram-alt-hover-icon {
    display: block; /* Show the first hover icon */
    opacity: 1;
}

/* ------------------------------
      ICON ANIMATIONS: MOBILE
   ------------------------------ */

@keyframes animateMobileIcons {
    from {
        opacity: 0;
        transform: translateX(5rem) scale(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes animateMobileHeading {
    from {
        transform: translateX(5rem) scale(0.9);
    }
    to {
        transform: translateX(0) scale(1);
    }
}

@keyframes animateMobileText {
    from {
        opacity: 0;
        transform: translateY(-5rem) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes animateMobileContactPhoto {
    from {
        opacity: 0;
        transform: translateY(-5rem) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------------------------------
       ICON ANIMATIONS: DESKTOP
   --------------------------------- */

@keyframes animateDesktopIcons {
    from {
        opacity: 0;
        transform: translateX(5rem) scale(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes animateDesktopHeading {
    from {
        transform: translateX(5rem) scale(0.9);
    }
    to {
        transform: translateX(0) scale(1);
    }
}

@keyframes animateDesktopText {
    from {
        opacity: 0;
        transform: translateY(-5rem) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes animateDesktopContactPhoto {
    from {
        opacity: 0;
        transform: translateY(-5rem) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}