/* ---------------------------------
           DESKTOP: START
   --------------------------------- */

/* Desktop Menu - Above 623px */
@media only screen and (min-width: 38.94rem) {
    
     /* ---------------------------------
          DESKTOP: NAV LOGO
    --------------------------------- */

    #cs-navigation .cs-logo {
        width: 6rem;
        height: auto;
        animation: animateDesktopIcons 0.5s ease;
    }

    /* Ensure mobile logos remain hidden on desktop */
    .logo-mobile, .logo-mobile-hover {
        display: none;
    }

    /* Show desktop logo */
    .logo-desktop {
        width: 6rem;
        height: auto;
        display: block;
    }

    /* Show desktop hover logo on hover */
    .logo-desktop-hover {
        width: 6rem;
        height: auto;
        display: none; /* Hide by default */
    }

    /* Hover effect for smooth swap */
    #cs-navigation .cs-logo:hover .logo-desktop {
        display: none;
    }

    #cs-navigation .cs-logo:hover .logo-desktop-hover {
        display: block;
    }

    /* ------------------------------
          DESKTOP: NAV SOCIAL MEDIA
       ------------------------------ */
    
    .cs-instagram-icon-nav, .cs-instagram-icon-nav-hover {
        display: none;
    }
    
    
    /* ---------------------------------
           DESKTOP: NAV MENU SLIDER
       --------------------------------- */

    #cs-navigation .cs-toggle {
        display: none;
    }
    
    /* Hide slider nav's social media on desktop */
    .cs-social-nav {
        display: none;
    }

    /* ---------------------------------
            DESKTOP: NAV PAGE LINKS
       --------------------------------- */

    #cs-navigation .cs-ul {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        /* 20px - 36px */
        gap: clamp(1.25rem, 2.6vw, 2.25rem);
    }

    #cs-navigation .cs-li {
        list-style: none;
        padding: 0;
        /* Prevent flexbox from squishing it */
        flex: none;
    }

    #cs-navigation .cs-li-link {
        font-family: 'Raleway-Black', sans-serif;
        font-weight: 900;
        font-size: 1.25rem;
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        padding: 0;
        background: linear-gradient(45deg, #FF7BAC, #FCEE21); /* 45-degree gradient */
        -webkit-background-clip: text; /* Ensures gradient is applied to text only */
        color: transparent; /* Text color becomes transparent to show gradient */
        display: inline-block;
        position: relative;
        animation: animateDesktopIcons 0.5s ease;
    }

    #cs-navigation .cs-li-link:hover {
        color: #FF7BAC;
        transform: scale(1.1);
    }
    
    /* Prevent scaling on the active link */
    #cs-navigation .cs-li-link.cs-active:hover {
        color: transparent;
        transform: none; /* Prevents scaling effect */
    }

    #cs-navigation .cs-li-link.cs-active:before {
        width: 100%;
        background: linear-gradient(45deg, #FF7BAC, #FCEE21); /* Gradient for active underline */
        transform: scaleX(1); /* Ensure it's fully expanded */
        transform-origin: left; /* Keep consistency */
    }

    #cs-navigation .cs-li-link:before {
        /* Default state underline */
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        border-radius: 3px; /* Rounded edges for the line */
        background: #FF7BAC; /* Underline color */
        transform: scaleX(0); /* Initially hidden */
        transform-origin: right; /* Contract from right */
        transition: transform 0.3s ease;
        will-change: transform, opacity;
    }
    
    #cs-navigation .cs-li-link:hover:before {
        transform: scaleX(1); /* Expands left to right */
        transform-origin: left;
    }
    
    /* Hide the legal text and logomark image on desktop */
    #cs-navigation .cs-logo-item {
        display: none;
    }
    
    /* ------------------------------
            DESKTOP: BACKGROUND
       ------------------------------ */
    
    .content-wrapper {
        background-size: 100rem; /* Watermark size */
        background-position-y: -10rem;
    }
    
    .discover-page .cs-text {
        margin: 1.5rem 0;
    }
    
    .services-page .cs-text {
        margin: 1.5rem 0;
    }
    
    .services-page .cs-subheading {
        margin: 1.5rem 0;
    }
    
    /* ------------------------------
             DESKTOP LEGAL NAV
       ------------------------------ */
    
    .legal-page .legal-nav {
        margin-bottom: 4rem;
    }
    
    .legal-page .legal-nav:first-of-type {
        animation: animateDesktopText 0.6s ease;
    }
    
    .legal-link {
        font-size: 3.125rem;
    }
    
    .legal-link:before {
        height: 8px;
        border-radius: 8px;
    }

    
    /* ------------------------------
          DESKTOP: HEADING & TEXT
       ------------------------------ */
   
   .explore-page .cs-heading {
       font-size: clamp(4rem, 22vw, 20rem); /* Responsive font size */
       flex-direction: row; /* Place "EXPL" and "ORE" on the same line */
       animation: animateDesktopHeading 0.5s ease-out;
   }
   
   .explore-page .cs-text:first-of-type {
       animation: animateDesktopText 0.6s ease;
   }
  
   .discover-page .cs-heading {
       font-size: clamp(3rem, 19.5vw, 16.5rem); /* Responsive font size */
       flex-direction: row; /* Place "DISC" and "OVER" on the same line */
       animation: animateDesktopHeading 0.5s ease-out;
   }
   
   .discover-page .cs-text:first-of-type {
       animation: animateDesktopText 0.6s ease;
   }
   
   .services-page .cs-heading {
       font-size: clamp(3rem, 21vw, 18rem); /* Responsive font size */
       flex-direction: row; /* Place "DISC" and "OVER" on the same line */
       animation: animateDesktopHeading 0.5s ease-out;
   }
   
   .services-page .cs-text:first-of-type {
       animation: animateDesktopText 0.6s ease;
   }
   
   .contact-page .cs-heading {
       font-size: clamp(3rem, 20.5vw, 17.5rem); /* Responsive font size */
       flex-direction: row; /* Place "DISC" and "OVER" on the same line */
       animation: animateDesktopHeading 0.5s ease-out;
   }
   
   .legal-page .cs-heading {
       font-size: clamp(3rem, 20vw, 17rem); /* Responsive font size */
       flex-direction: row; /* Place "DISC" and "OVER" on the same line */
       animation: animateDesktopHeading 0.5s ease-out;
   }
   
   .cs-heading-line {
       display: inline-block; /* Ensure the spans stay on the same line */
   }
   
   .legal-page h2 {
       font-size: clamp(2rem, 6vw, 4rem); /* Responsive font size */
   }

   .legal-page h3 {
       font-size: clamp(2rem, 5vw, 3rem); /* Responsive font size */
   }
   
   /* Tooltip Styles */
   .legal-page .tooltip {
       width: 8rem;
       height: 3rem;
       top: -2.5rem;
       left: 6rem;
       text-align: center;
       display: flex; /* Enable flexbox to align content */
       justify-content: center; /* Horizontally center the text */
       align-items: center; /* Vertically center the text */
    }
   
   /* ------------------------------
         DESKTOP: CONTACT PHOTO
      ------------------------------ */

   .contact-images {
       width: 20rem;
   }
   
   /*.contact-images img:nth-child(2) {
       animation: animateDesktopContactPhoto 0.6s ease;
   }*/
   
   .contact-images img{
       animation: animateDesktopContactPhoto 0.6s ease;
   }
   
   /*.sig {
       margin-top: 15rem;
       width: 60rem; /* Increase size of the signature
   }*/
   
   /* ------------------------------
             DESKTOP: SUBTEXT
      ------------------------------ */

   .discover-page .cs-text {
       font-size: clamp(2rem, 6vw, 4rem); /* Responsive font size */
   }
   
   .services-page .cs-text {
       font-size: clamp(2rem, 6vw, 4rem); /* Responsive font size */
   }
   
   .contact-page .cs-text {
       font-size: clamp(2rem, 6vw, 4rem); /* Responsive font size */
   }
   
   .legal-page .cs-text-center {
       font-size: clamp(1rem, 3.25vw, 2.25rem); /* Responsive font size */
       max-width: 40ch; /* Keeps text from stretching too wide */
       line-height: 5rem;
   }
   
   .legal-page .cs-text-left {
       font-size: clamp(1rem, 3.25vw, 2.25rem); /* Responsive font size */
       max-width: 40ch; /* Keeps text from stretching too wide */
       line-height: 5rem;
   }
   
   .legal-page .contact-text {
       margin-bottom: 5rem;
   }
       
   .legal-page .cs-text-line::after {
       height: 4px;
       bottom: 0.5rem;
   }

   /* ------------------------------
         DESKTOP: PROJECT IMAGES
            & GRID MEDIA QUERY
      ------------------------------ */

   /* For small to medium screens (mobile to tablet) */
   .projects {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
       gap: 2rem;
       padding: 0 2rem;
   }

       /* For larger screens, force a max of 4 columns */
       @media (min-width: 1200px) {
           .projects {
               grid-template-columns: repeat(4, 1fr); /* Forces max 4 columns */
               max-width: 1600px; /* Prevents overexpansion */
               gap: 2rem;
           }
       }
       
   .projects img {
       border-radius: 0.5rem;
   }
   
   
   /* ------------------------------
        DESKTOP: FOOTER PAGE LINK
      ------------------------------ */

   .cs-footer-legal {
       animation: animateDesktopIcons 0.5s ease;
   }
   
   /* ------------------------------
          DESKTOP: SOCIAL MEDIA
      ------------------------------ */
   
   .cs-social-instagram {
       animation: animateDesktopIcons 0.5s ease;
   }

/* ------------------------------
      DESKTOP: MEDIA QUERY END
   ------------------------------ */
}