/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  /*
    2. Remove default margin
  */
  * {
    margin: 0;
  }
  /*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 40px 15.5%;
    background-color: #F8EEFF;
  }
  /*
    5. Improve media defaults
  */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /*
    6. Remove built-in form typography styles
  */
  input, button, textarea, select {
    font: inherit;
  }
  /*
    7. Avoid text overflows
  */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  /*
    8. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }

@font-face {
    font-family: "Optima";
    src: url("fonts/OPTIMA.TTF"),
         url("fonts/Optima_Italic.ttf"),
         url("fonts/Optima Medium.ttf"),
         url("fonts/OPTIMA_B.TTF");
}
@font-face {
    font-family: "Alata";
    src: url("fonts/Alata-Regular.ttf");
}
@font-face {
    font-family: "Orienta";
    src: url("fonts/Orienta-Regular.ttf");
}
@font-face {
    font-family: "Baloo";
    src: url("fonts/BalooBhai2-VariableFont_wght.ttf");
}
@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-VariableFont_wght.ttf");
}


#navBar{    
    display: grid;
    grid-template-areas: "name menu";
    height: 40px;
    font-family: "Optima";
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    align-items: center;
    margin-bottom: 110px;
}
#navBarLeft{
    grid-area: name;
}
#navBarRight{
    grid-area: menu;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
#navMenu{
    display: flex;
    justify-content: space-evenly;
}
.navOption{
    cursor: pointer;
    margin-right: 20px;
}
.navOption a {
    position: relative; /* Positioning needed for the underline effect */
    text-decoration: none; /* Remove default underline */
    color: inherit; /* Ensure it inherits the text color */
    display: inline-flex; /* Use inline-flex so both text and icon are aligned */
    align-items: center; /* Align the chevron with the text vertically */

}
.navOption .fa-chevron-down {
    margin-left: 0px; /* Adjust this value to increase or decrease space */
}
.navOption a::after {
    content: ""; /* Create an empty pseudo-element for the underline */
    position: absolute;
    left: 0;
    bottom: -2px; /* Position the underline slightly below the text */
    width: 0; /* Initially, the underline is not visible */
    height: 2px; /* Thickness of the underline */
    background-color: currentColor; /* Match the text color */
    transition: width 0.3s ease; /* Smooth animation */
}

.navOption a:hover::after {
    width: 100%; /* Make the underline span the full width of the text and icon */
}
.navOption a:any-link{
    color: inherit;
    text-decoration: none;
}
#contrastMode{
    padding: 5px 10px;
    cursor: pointer;
}
.light-mode{
    border: 1px solid black;
}
.light-mode:hover{
    background: black;
    color: white;
}
.dark-mode{
    border: 1px solid white;
}
.dark-mode:hover{
    background: white;
    color: black;
}
#navMenu .fa-solid{
    font-size: 12px;
    font-weight: 900;
    margin-left: 0;
}
#introTitle, #aboutTitle{
    font-family: "Alata";
    font-size: 58px;
}
#titleBlock1{
    background: #EFC5F0;
}
#titleBlock1:hover, .titleBlockEtc{
    color: transparent !important;
    -webkit-text-stroke: 1.5px #C317C7;
    background: none !important;
}
#titleBlock2:hover{
    background: #99E2E3 !important;
    color: black !important;
    -webkit-text-stroke: 0px;
}
#titleBlock3:hover{
    background: #ACCDFE !important;
    color: black !important;
    -webkit-text-stroke: 0px;
}
#titleBlock4:hover{
    background: #FFF6A8 !important;
    color: black !important;
    -webkit-text-stroke: 0px;
}
#introBody, #aboutBody{
    font-family: "Orienta";
    margin-top: 30px;
}
#aboutImage{
    height: 840px;
    background: grey;
    margin: 125px 0 140px 0;
}
/* ================================
   ABOUT PAGE VALUES SECTION
   Pastel + Floating Bubbles
================================ */

#aboutValues {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;

    margin: -40px auto 200px auto;
    padding: 80px 8%;
    max-width: 950px;

    background: linear-gradient(135deg, #F8EEFF, #FFF6D8, #E9FAFF);
    border-radius: 36px;
}

/* Floating bubble layer */
#aboutValues::before,
#aboutValues::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    opacity: 0.55;
    z-index: 0;
    animation: floatBubble 7s ease-in-out infinite;
}

#aboutValues::before {
    width: 180px;
    height: 180px;
    background: #EFC5F0;
    top: 40px;
    left: 40px;
}

#aboutValues::after {
    width: 230px;
    height: 230px;
    background: #ACCDFE;
    bottom: 30px;
    right: 45px;
    animation-delay: 1.8s;
}

/* Keep content above bubbles */
#aboutValues > * {
    position: relative;
    z-index: 2;
}

#valuesTitle {
    font-family: "Alata";
    font-size: 54px;
    line-height: 1.1;
    margin-bottom: 25px;
    color: #1f1f1f;
    text-align: center;
}

.valuesList {
    font-family: "Optima";
    font-size: 32px;
    line-height: 1.3;
    text-align: center;

    width: 100%;
    padding: 24px 30px;

    border-radius: 28px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Pastel card colors */
#aboutValues .valuesList:nth-child(2) {
    background: #EFC5F0;
}

#aboutValues .valuesList:nth-child(3) {
    background: #ACCDFE;
}

#aboutValues .valuesList:nth-child(4) {
    background: #FFF6A8;
}

#aboutValues .valuesList:nth-child(5) {
    background: #99E2E3;
}

.valuesList:not(#valuesTitle):hover {
    transform: translateY(-7px) scale(1.02);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.10);
}

/* Floating motion */
@keyframes floatBubble {
    0% {
        transform: translateY(0) translateX(0) scale(1);
    }
    50% {
        transform: translateY(-28px) translateX(18px) scale(1.08);
    }
    100% {
        transform: translateY(0) translateX(0) scale(1);
    }
}

/* Soft pop-in for values */
@keyframes softPop {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#aboutValues .valuesList {
    animation: softPop 0.6s ease both;
}

#aboutValues .valuesList:nth-child(2) {
    animation-delay: 0.1s;
}

#aboutValues .valuesList:nth-child(3) {
    animation-delay: 0.2s;
}

#aboutValues .valuesList:nth-child(4) {
    animation-delay: 0.3s;
}

#aboutValues .valuesList:nth-child(5) {
    animation-delay: 0.4s;
}

@media (max-width: 768px) {
    #aboutValues {
        padding: 60px 6%;
        margin-bottom: 120px;
    }

    #valuesTitle {
        font-size: 40px;
    }

    .valuesList {
        font-size: 24px;
        padding: 20px;
    }
}
#highlightedWork{
    margin-top: 140px;
}
/* ================================
   WORKFLOW IMPROVEMENT CASE STUDIES
================================ */

#highlightedWork {
    padding: 100px 8%;
    margin-top: 100px;
    background-color: #f8f4ef;
    border-radius: 28px;
}

#highlightedWork h3 {
    font-family: "Optima";
    font-size: 18px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: normal;
    margin-bottom: 40px;
    color: #1f1f1f;
}

.projectLink {
    text-decoration: none;
    color: inherit;
    display: block;
}

.projectListing {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 120px;
    background-color: #ffffff;
    margin: 0 0 24px 0;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.projectListing:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

.projectDesc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0;
    gap: 8px;
}

.projectTitle {
    font-family: "Baloo";
    font-size: 18px;
    line-height: 1.3;
    color: #8b5e3c;
    font-weight: 600;
    text-transform: uppercase;
}

.projectSubtitle {
    font-family: "Orienta";
    font-size: 15px;
    line-height: 1.6;
    color: #6C6C6C;
    padding-right: 15%;
}

.arrow img {
    width: 22px;
    height: auto;
    transition: transform 0.2s ease;
}

.projectListing:hover .arrow img {
    transform: translateX(5px);
}

/* Mobile */
@media (max-width: 768px) {
    #highlightedWork {
        padding: 70px 6%;
        margin-top: 70px;
        border-radius: 22px;
    }

    #highlightedWork h3 {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .projectListing {
        min-height: auto;
        padding: 24px;
        grid-template-columns: 1fr auto;
    }

    .projectTitle {
        font-size: 16px;
    }

    .projectSubtitle {
        font-size: 14px;
        padding-right: 5%;
    }

    .arrow img {
        width: 18px;
    }
}
.designListing{
    margin: 0 0 120px 0;
}

.designListing:first-of-type{
    height: 200px;
    margin: -60px 0 80px 0;
    background: #99E2E3;
    justify-content: center;
    align-items: center;

}
#keepgoingweb{
    background: #ACCDFE;

}

#gantemobile{
    background: #FADD9A;
}

hr{
    height: 2px;
    background-color: black;
    margin: 250px 0 200px 0;
}
.doublePhones {
    width: 320px; /* adjust this */
    height: auto;
}
.laptop {
    width: 300px; /* adjust this */
    height: auto; 
}
.singlephone {
    width: 130px; /* adjust this */
    height: auto;
}
.designTitle{
    font-family: "Montserrat";
    font-size: 56px;
    font-weight: 700;
    position: relative;
    margin-bottom: 100px;
    
}
.designTitle span:nth-child(2){
    color: #00B6B8;

}

#webdesigncolor{
    color:#ACCDFE;

}
#appdesigncolor{
    color:#EA6F16;
}

.designTitle::after{
    content: " ";
    height: 6px;
    width: 170px;
    background-color: #00B6B8;
    position: absolute;
    bottom: -10px;
    left: 0;
    border-radius: 1vw;
}

#underline2 .designTitle::after{
    background-color: #ACCDFE;

}

#underline3 .designTitle::after{
    background-color: #EA6F16;
}

.designDescSplit{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.designDescBodyThreeCol{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 650px;
}
.designDescSplit>div:first-of-type{
    padding-right: 40px;
}
.designDescSplit>div:nth-of-type(2){
    padding-left: 80px;
}
.designDescTitle, .designDescRole{
    font-family: "Optima";
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 30px;
    Font-weight:750; 
}
.designDescBodyPrimary{
    font-family: "Orienta";
    font-size: 22px;
    
}
.designDescBody span{
    color: black;
}
.designDescBodySecondary{
    font-family: "Montserrat";
    font-size: 24px;
    font-weight:500;
   
}
#footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 140px;
}
#footer > div:first-child{
    font-family: "Alata";
    font-size: 22px;
}
#footer > div:nth-child(2){
    font-family: "Orienta";
    font-size: 14px;
    letter-spacing: 1.5px;
    margin-top: 10px;
}
#footer > div:nth-child(3){
    display: flex;
    width: 300px;
    justify-content: space-evenly;
    font-size: 36px;
    margin: 40px 0 100px 0;
}
#wavingHand{
    display: inline-block;
    height: 16px;
    margin-left: 5px;
}
#aboutImage {
    width: 100%; /* Make the section span the full width */
    height: 860px; /* Set the height of the section */
    overflow: hidden; /* Prevent the image from spilling out */
    display: flex; /* Enable centering for content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

#aboutImage img {
    width: 100%; /* Scale the image to fit the width */
    height: 100%; /* Scale the image to fit the height */
    object-fit: cover; /* Ensure the image covers the section nicely */
}
/* Global Styling */
body.light-mode {
    background-color: white;
    color: black;
    border: none; /* Remove any borders around the page */
}

body.dark-mode {
    background-color: #333; /* Dark background for body */
    color: white;
    border: none; /* Remove any borders around the page */
}

/* Dropdown Menu Styling */
.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 9999;
    background-color: white; /* White background for dropdown menu */
    color: black; /* Default text color for dropdown menu */
    border: 1px solid #ccc; /* Border for dropdown menu */
    width: 200px;
    opacity: 0; /* Start with opacity 0 for smooth transition */
    visibility: hidden; /* Make it invisible when not hovered */
    transition: opacity 2s ease-in-out 0.3s, visibility 0s linear 0.2s; /* Add delay for smoother reveal */
}

/* Show the Dropdown Menu when hovering the Design button */
.dropdown-trigger:hover .dropdown-menu {
    display: block; /* Show the dropdown */
    opacity: 1; /* Make it visible */
    visibility: visible; /* Make it visible */
    transition: opacity 0.6s ease-in-out 0.3s, visibility 0s linear 0s; /* Smooth transition */
}

/* Dropdown Menu Items */
.dropdown-menu li {
    padding: 10px 20px;
    text-align: left;
    color: black; /* Default text color for menu items */
    transition: color 0.3s ease; /* Smooth transition for text color */
}

/* Hover Effect for Dropdown Items */
.dropdown-menu li:hover {
    background-color: #f0f0f0; /* Subtle background change on hover */
    color: #C317C7; /* Change text color to pink on hover */
}

/* Button for Switching Light/Dark Mode */
#contrastMode {
    cursor: pointer;
    padding: 10px;
    background-color: inherit;
    color: inherit;
}

/* Smooth text color transition for nav items */
.navOption a {
    color: rgb(255, 255, 255); /* Default color for nav items */
    text-decoration: none; /* Keep the underline separate */
    transition: color 0.4s ease-in-out; /* Smooth color transition */
}

/* Hover effect for other nav items */
.navOption a:hover {
    color: #C317C7; /* Desired hover text color */
}

/* Hover effect for the Design nav button (dropdown trigger) */
.dropdown-trigger {
    transition: color 0.4s ease-in-out; /* Smooth color transition for Design nav */
}

/* When hovering over the Design nav button (dropdown trigger) */
.dropdown-trigger:hover {
    color: #C317C7; /* Change color to pink when hovered */
    transition: color 0.4s ease-in-out; /* Smooth color transition for Design nav */
}
/* Default Style for the Name */
#name {
    transition: color 0.4s ease-in-out; /* Smooth transition for color */
}

/* Hover Effect for the Name */
#name:hover {
    color: #C317C7; /* Change to pink on hover */
    

}

.designDescBodyThreeCol div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@font-face {
    font-family: 'Montserrat'; /* Name your font */
    src: url('fonts/montserrat-variableFont_wght.ttf') format('truetype'); /* Adjust the path to your font file */
    font-weight: 100 900; /* This is for the variable font weight range */
}

.designDescBodyThreeCol p {
    margin-top: 8px;
    text-align: center;
    width: 100%;
    font-family: 'optima', sans-serif; /* Use your custom font here */
    font-size: 25px;
    font-weight: 650; /* You can adjust the weight here */
}

.additional-text {
    margin-top: 8px;
    text-align: center;
    font-family: 'Montserrat', sans-serif; /* Apply the font */
    font-size: 14px; /* Adjust size as needed */
    font-weight: 600; /* Set bold weight */
}

.additional-text span {
    display: block;
    margin: 2px 0; /* Add spacing between lines */
}
.additional-text {
    font-family: 'Montserrat', sans-serif; /* Font for all the text */
    font-weight: 500; /* Make text bold */
    white-space: nowrap; /* Ensures no wrapping */
    font-size: 23px; /* Adjust size as needed */
    

}

.additional-text .number {
    color: #00B6B8; /* Change the number color */
    font-weight: 600; /* Make the numbers bold */
    display: inline; /* Ensures numbers and text are inline */
    font-size: 23px; /* Adjust size as needed */

}

#numbers{
    color: #ACCDFE;
}

#numbers2{
    color: #EA6F16;
}

.image-container {
    display: flex;  /* This will align the images horizontally */
    gap: 10px;      /* Optional: Adds space between the images */
}

.image-container img {
    width: 550px;    /* Adjust the width if needed */
    height: auto;   /* Adjust the height if needed */
}

.image-container {
    display: flex;          /* Align items horizontally */
    justify-content: center; /* Center items horizontally */
    gap: 22px;              /* Optional: Adds space between the images */
}

.image-container img {
    width: 550px;            /* Adjust the width if needed */
    height: auto;           /* Adjust the height if needed */
}

.image-wrapper {
    display: flex;          /* Use flexbox for centering */
    justify-content: center; /* Horizontally center the image */
    align-items: center;    /* Vertically center if necessary */
    height: 110vh;          /* Optional: Full height of the viewport */
}

.image-wrapper img {
    max-width: 100%;        /* Ensures the image scales responsively */
    height: auto;           /* Maintains the image's aspect ratio */
}
.small-image {
    width: 570px; /* Adjust the width as needed */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Ensures the images behave like blocks (optional) */
    margin: 0 auto; /* Center the images horizontally */
}

.small-image2 {
    width: 1150px; /* Adjust the width as needed */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Ensures the images behave like blocks (optional) */
    margin: 0 auto; /* Center the images horizontally */
}

/* Center the wrapper */
.link-wrapper {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;    /* Vertical centering (if needed) */
    height: 100%;           /* Adjust as necessary */
}

/* Style the link */
.final-prototype-link {
    font-family: 'Montserrat', sans-serif; /* Your desired font */
    font-size: 16px;                       /* Font size */
    font-weight: bold;                     /* Bold text */
    color: #00B6B8;                        /* Link color */
    text-decoration: none;                 /* Remove underline */
    padding: 8px 12px;                     /* Add padding */
    border: 2px solid #00B6B8;             /* Optional border */
    border-radius: 5px;                    /* Rounded corners */
    display: inline-block;                 /* Inline-block for padding effects */
}

/* Hover effect */
.final-prototype-link:hover {
    color: white;                          /* Change text color on hover */
    background-color: #00B6B8;             /* Background color on hover */
    text-decoration: none;                 /* Keep underline removed */
}
.final-prototype-link {
    display: block;  /* Makes the link a block-level element */
    margin-top: 10px;  /* Optional: adds space between the text and link */
}
.service-case-studies {
  padding: 80px 8%;
  margin-top: 120px; /* 👈 add or increase this */
  background: #f8f4ef;
}

.service-case-header {
  max-width: 760px;
  margin-bottom: 40px;
}

.section-label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}

.service-case-header h2 {
  font-size: 2.4rem;
  margin-bottom: 14px;
}

.service-case-header p {
  font-size: 1rem;
  line-height: 1.7;
  color: #4f4a45;
  font-family: "Orienta"
}

.service-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-case-card {
  display: block;
  padding: 28px;
  border-radius: 24px;
  background: #ffffff;
  text-decoration: none;
  color: #1f1f1f;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

.case-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 18px;
  color: #8b5e3c;
}

.service-case-card h3 {
  font-size: 1.25rem;
  margin-bottom: 14px;
  line-height: 1.3;
}

.service-case-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #5a5550;
  margin-bottom: 24px;
}

.case-link {
  font-weight: 600;
  color: #1f1f1f;
}

@media (max-width: 900px) {
  .service-case-grid {
    grid-template-columns: 1fr;
  }

  .service-case-header h2 {
    font-size: 2rem;
  }
}
/* ================================
   HOMEPAGE CASE STUDY SECTIONS
   Pastel + Floating Bubbles
================================ */

.service-case-studies,
#highlightedWork {
    position: relative;
    overflow: hidden;

    padding: 90px 8%;
    margin-top: 120px;

    background: linear-gradient(135deg, #F8EEFF, #FFF6D8, #E9FAFF);
    border-radius: 36px;
}

/* floating bubbles */
.service-case-studies::before,
.service-case-studies::after,
#highlightedWork::before,
#highlightedWork::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    opacity: 0.45;
    z-index: 0;
    animation: floatBubble 7s ease-in-out infinite;
}

.service-case-studies::before,
#highlightedWork::before {
    width: 170px;
    height: 170px;
    background: #EFC5F0;
    top: 35px;
    left: 35px;
}

.service-case-studies::after,
#highlightedWork::after {
    width: 220px;
    height: 220px;
    background: #ACCDFE;
    bottom: 35px;
    right: 40px;
    animation-delay: 1.8s;
}

/* keep content above bubbles */
.service-case-studies > *,
#highlightedWork > * {
    position: relative;
    z-index: 2;
}

/* headings */
.service-case-header h2,
#highlightedWork h3 {
    font-family: "Alata";
    font-size: 42px;
    line-height: 1.15;
    color: #1f1f1f;
    margin-bottom: 18px;
}

.section-label {
    font-family: "Optima";
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8b5e3c;
    margin-bottom: 10px;
}

.service-case-header p {
    font-family: "Orienta";
    font-size: 16px;
    line-height: 1.7;
    color: #4f4a45;
}

/* grids */
.service-case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

#highlightedWork {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* cards */
.service-case-card,
.projectListing {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-case-card:hover,
.projectListing:hover {
    transform: translateY(-7px) scale(1.02);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.10);
}

/* pastel card accents */
.service-case-card:nth-child(1),
.projectLink:nth-of-type(1) .projectListing {
    background: #EFC5F0;
}

.service-case-card:nth-child(2),
.projectLink:nth-of-type(2) .projectListing {
    background: #ACCDFE;
}

.service-case-card:nth-child(3),
.projectLink:nth-of-type(3) .projectListing {
    background: #FFF6A8;
}

.projectLink:nth-of-type(4) .projectListing {
    background: #99E2E3;
}

.projectLink:nth-of-type(5) .projectListing {
    background: #F8D7E8;
}

.projectLink:nth-of-type(6) .projectListing {
    background: #DFF7E8;
}

/* text */
.case-tag,
.projectTitle {
    font-family: "Baloo";
    color: #1f1f1f;
    font-weight: 700;
}

.service-case-card h3,
.projectTitle {
    font-size: 18px;
    line-height: 1.3;
    text-transform: uppercase;
}

.service-case-card p,
.projectSubtitle {
    font-family: "Orienta";
    font-size: 15px;
    line-height: 1.6;
    color: #4f4a45;
}

.case-link {
    font-family: "Optima";
    font-weight: 700;
    color: #1f1f1f;
}

/* bubble motion */
@keyframes floatBubble {
    0% {
        transform: translateY(0) translateX(0) scale(1);
    }
    50% {
        transform: translateY(-28px) translateX(18px) scale(1.08);
    }
    100% {
        transform: translateY(0) translateX(0) scale(1);
    }
}

/* mobile */
@media (max-width: 900px) {
    .service-case-grid {
        grid-template-columns: 1fr;
    }

    .service-case-studies,
    #highlightedWork {
        padding: 65px 6%;
        margin-top: 80px;
    }

    .service-case-header h2,
    #highlightedWork h3 {
        font-size: 34px;
    }
}
/* ================================
   FLOATING PASTEL BALLS
================================ */

.floating-balls {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    pointer-events: none; /* important - so it doesn’t block clicks */
    overflow: hidden;
    z-index: 0;
}

/* individual balls */
.floating-balls span {
    position: absolute;
    bottom: -150px;

    width: 40px;
    height: 40px;

    border-radius: 50%;
    opacity: 0.4;

    animation: rise 18s linear infinite;
}

/* pastel colors */
.floating-balls span:nth-child(1) { background: #EFC5F0; left: 10%; width: 30px; height: 30px; animation-duration: 20s; }
.floating-balls span:nth-child(2) { background: #ACCDFE; left: 25%; width: 50px; height: 50px; animation-duration: 18s; }
.floating-balls span:nth-child(3) { background: #FFF6A8; left: 40%; width: 35px; height: 35px; animation-duration: 22s; }
.floating-balls span:nth-child(4) { background: #99E2E3; left: 60%; width: 45px; height: 45px; animation-duration: 19s; }
.floating-balls span:nth-child(5) { background: #F8D7E8; left: 75%; width: 30px; height: 30px; animation-duration: 24s; }
.floating-balls span:nth-child(6) { background: #DFF7E8; left: 85%; width: 40px; height: 40px; animation-duration: 21s; }

/* animation */
@keyframes rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.4;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-110vh) scale(1.2);
        opacity: 0;
    }
}
/* ================================
   ABOUT INTRO SECTION
   Pastel + Cohesive With Values
================================ */

#about {
    position: relative;
    overflow: hidden;

    padding: 90px 8%;
    margin-top: 40px;

    background: linear-gradient(135deg, #F8EEFF, #FFF6D8, #E9FAFF);
    border-radius: 36px;
    color: #1f1f1f;
}

/* floating pastel bubbles */
#about::before,
#about::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    z-index: 0;
    animation: floatBubble 7s ease-in-out infinite;
}

#about::before {
    width: 180px;
    height: 180px;
    background: #EFC5F0;
    top: 35px;
    right: 60px;
}

#about::after {
    width: 230px;
    height: 230px;
    background: #ACCDFE;
    bottom: 40px;
    left: 40px;
    animation-delay: 1.8s;
}

/* keep content above bubbles */
#about > * {
    position: relative;
    z-index: 2;
}

#aboutTitle {
    font-family: "Alata";
    font-size: 58px;
    line-height: 1.1;
    color: #1f1f1f;
    margin-bottom: 35px;
}

#aboutTitle div {
    display: inline-block;
    background: #EFC5F0;
    padding: 10px 18px;
    border-radius: 18px;
}

#aboutBody {
    font-family: "Orienta";
    font-size: 17px;
    line-height: 1.85;
    max-width: 1100px;
    color: #3f3a3a;
    margin-top: 0;
}

/* reuse if you don't already have it */
@keyframes floatBubble {
    0% {
        transform: translateY(0) translateX(0) scale(1);
    }
    50% {
        transform: translateY(-28px) translateX(18px) scale(1.08);
    }
    100% {
        transform: translateY(0) translateX(0) scale(1);
    }
}

@media (max-width: 768px) {
    #about {
        padding: 65px 6%;
        border-radius: 28px;
    }

    #aboutTitle {
        font-size: 40px;
    }

    #aboutBody {
        font-size: 15px;
    }
}
/* ================================
   SOFT PASTEL CUSTOM CURSOR
================================ */

body {
    cursor: none;
}

.custom-cursor,
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.custom-cursor {
    width: 34px;
    height: 34px;
    background: radial-gradient(circle, rgba(239, 197, 240, 0.75), rgba(172, 205, 254, 0.35));
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 18px rgba(239, 197, 240, 0.75);
    transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background: #C317C7;
    box-shadow: 0 0 10px rgba(195, 23, 199, 0.55);
}

/* grows softly on clickable items */
.custom-cursor.cursor-hover {
    width: 52px;
    height: 52px;
    background: radial-gradient(circle, rgba(255, 246, 168, 0.8), rgba(153, 226, 227, 0.45));
    box-shadow: 0 0 24px rgba(153, 226, 227, 0.8);
}

@media (max-width: 768px) {
    body {
        cursor: auto;
    }

    .custom-cursor,
    .cursor-dot {
        display: none;
    }
}