.touch-id-square {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keeps text aligned properly */
}

.doodle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.touch-id-square::before {
    content: "";
    position: absolute;
    top: 2%;
    left: -1.5em; /* Adjust this so the square is positioned correctly */
    width: 20px; /* Adjust based on doodle size */
    height: 20px;
    background: url('/images/Doodles/touch_ID_box.png') no-repeat center;
    background-size: contain;
    transform: translateY(-50%);
    opacity: 0.9;
    pointer-events: none;
}

.spotify-doodle {
    grid-column: 1; /* Stays in the first column */
    grid-row: 3; /* Places it right below the image */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Aligns vertically */
    width: 100%; /* Ensures it spans the full grid width */
    max-width: 300px; /* Keeps it from being too large */
    margin: 0px auto 0 auto; /* Negative top margin pulls it up */
    text-align: center; /* Ensures content inside is centered */
}

.spotify-doodle img {
    max-width: 100%; /* Ensures the doodle scales properly */
    height: auto;
    box-shadow: none !important;
    background: none;
    opacity: 0.5;
}

.tree-doodle {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keeps text aligned properly */
}

.tree-doodle::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 4em; /* Adjust this so the square is positioned correctly */
    width: 120px; /* Adjust based on doodle size */
    height: 120px;
    background: url('/images/Doodles/tree_doodle.png') no-repeat center;
    background-size: contain;
    transform: translateY(-54%);
    opacity: 0.4;
    pointer-events: none;
}

.finger-doodle {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keeps text aligned properly */
}

.finger-doodle::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 8em; /* Adjust this so the square is positioned correctly */
    width: 80px; /* Adjust based on doodle size */
    height: 80px;
    background: url('/images/Doodles/finger_doodle.png') no-repeat center;
    background-size: contain;
    transform: translateY(20%);
    opacity: 0.4;
    pointer-events: none;
}

.projects-doodle {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keeps text aligned properly */
}

.projects-doodle::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 1em; /* Adjust this so the square is positioned correctly */
    width: 140px; /* Adjust based on doodle size */
    height: 140px;
    background: url('/images/Doodles/projects_doodle.png') no-repeat center;
    background-size: contain;
    transform: translateY(-59%);
    opacity: 0.4;
    pointer-events: none;
}

.props-doodle {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keeps text aligned properly */
}

.props-doodle::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0.5em; /* Adjust this so the square is positioned correctly */
    width: 175px; /* Adjust based on doodle size */
    height: 175px;
    background: url('/images/Doodles/props_doodle.png') no-repeat center;
    background-size: contain;
    transform: translateY(-58%);
    opacity: 0.6;
    pointer-events: none;
}

.exploration-doodle {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keeps text aligned properly */
}

.exploration-doodle::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0.8em; /* Adjust this so the square is positioned correctly */
    width: 175px; /* Adjust based on doodle size */
    height: 175px;
    background: url('/images/Doodles/exploration_doodle.png') no-repeat center;
    background-size: contain;
    transform: translateY(-53%);
    opacity: 0.6;
    pointer-events: none;
}

.scenic-doodle {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keeps text aligned properly */
}

.scenic-doodle::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0.2em; /* Adjust this so the square is positioned correctly */
    width: 190px; /* Adjust based on doodle size */
    height: 190px;
    background: url('/images/Doodles/scenic_desing_doodle.png') no-repeat center;
    background-size: contain;
    transform: translateY(-53%);
    opacity: 0.6;
    pointer-events: none;
}

.jesus-question {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keeps text aligned properly */
}

.jesus-question::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 4.5em; /* Adjust this so the square is positioned correctly */
    width: 20px; /* Adjust based on doodle size */
    height: 20px;
    background: url('/images/Doodles/jesus_question.png') no-repeat center;
    background-size: contain;
    transform: translateY(-50%);
    opacity: 0.9;
    pointer-events: none;
}


.annotationes-underline {
    position: relative;
    display: inline-block; /* Ensures the underline only spans the text */
}

.annotationes-underline::after {
    content: "";
    position: absolute;
    bottom: -10px; /* Adjusts how far below the text the underline appears */
    left: 60%;
    width: 120%; /* Adjust width to match your doodle */
    height: 15px; /* Adjust based on your doodle */
    background: url('/images/Doodles/annotation_underline.png') no-repeat center;
    background-size: contain;
    transform: translateX(-50%); /* Center it */
    opacity: 0.9; /* Adjust opacity for a natural feel */
    pointer-events: none; /* Prevents interaction */
}

.check-doodle {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keeps text aligned properly */
}

.check-doodle::before {
    content: "";
    position: absolute;
    top: 20%;
    left: -1.5em; /* Adjust this so the square is positioned correctly */
    width: 20px; /* Adjust based on doodle size */
    height: 20px;
    background: url('/images/Doodles/hand_check.png') no-repeat center;
    background-size: contain;
    transform: translateY(-50%);
    opacity: 0.9;
    pointer-events: none;
}

.square-doodle-titus {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keeps text aligned properly */
}

.square-doodle-titus::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1.5em; /* Adjust this so the square is positioned correctly */
    width: 20px; /* Adjust based on doodle size */
    height: 20px;
    background: url('/images/Doodles/titus_square.png') no-repeat center;
    background-size: contain;
    transform: translateY(-50%);
    opacity: 0.9;
    pointer-events: none;
}

.square-doodle {
    position: relative;
    display: inline-flex;
    align-items: center; /* Keeps text aligned properly */
}

.square-doodle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1.8em; /* Adjust this so the square is positioned correctly */
    width: 20px; /* Adjust based on doodle size */
    height: 20px;
    background: url('/images/Doodles/boy_friend_square.png') no-repeat center;
    background-size: contain;
    transform: translateY(-50%);
    opacity: 0.9;
    pointer-events: none;
}

.spotify-underline {
    position: relative; /* Allows absolute positioning of the doodle */
    display: inline-block; /* Ensures it wraps only around the text */
    z-index: 2; /* Keeps the link on top */
}

.spotify-underline::after {
    content: ""; 
    position: absolute;
    top: 50%; /* Adjust based on the doodle */
    left: 45%;
    width: 100%; /* Slightly larger than text */
    height: 100%; 
    background: url('/images/Doodles/spotify_underline_doodle.png') no-repeat center;
    background-size: contain; 
    transform: translate(-46%, -10%);
    z-index: -1; /* Places the doodle behind the text */
    pointer-events: none; /* Prevents interactions */
    opacity: 0.9; /* Makes it blend naturally */
  }

  .madea-underline {
    position: relative; /* Allows absolute positioning of the doodle */
    display: inline-block; /* Ensures it wraps only around the text */
    z-index: 2; /* Keeps the link on top */
}

.madea-underline::after {
    content: ""; 
    position: absolute;
    top: 50%; /* Adjust based on the doodle */
    left: 45%;
    width: 100%; /* Slightly larger than text */
    height: 100%; 
    background: url('/images/Doodles/madea-underline.png') no-repeat center;
    background-size: contain; 
    transform: translate(-46%, -10%);
    z-index: -1; /* Places the doodle behind the text */
    pointer-events: none; /* Prevents interactions */
    opacity: 0.9; /* Makes it blend naturally */
  }

    .boyfriend-underline {
    position: relative; /* Allows absolute positioning of the doodle */
    display: inline-block; /* Ensures it wraps only around the text */
    z-index: 2; /* Keeps the link on top */
}

.boyfriend-underline::after {
    content: ""; 
    position: absolute;
    top: 50%; /* Adjust based on the doodle */
    left: 45%;
    width: 100%; /* Slightly larger than text */
    height: 100%; 
    background: url('/images/Doodles/boyfriend-underline.png') no-repeat center;
    background-size: contain; 
    transform: translate(-46%, -10%);
    z-index: -1; /* Places the doodle behind the text */
    pointer-events: none; /* Prevents interactions */
    opacity: 0.9; /* Makes it blend naturally */
  }

      .boyfriend-chandelier {
    position: relative; /* Allows absolute positioning of the doodle */
    display: inline-block; /* Ensures it wraps only around the text */
    z-index: 2; /* Keeps the link on top */
}

.boyfriend-chandelier::after {
    content: ""; 
    position: absolute;
    top: 100%; /* Adjust based on the doodle */
    left: 45%;
    width: 100%; /* Slightly larger than text */
    height: 100%; 
    background: url('/images/Doodles/boyfriend-chandelier.png') no-repeat center;
    background-size: contain; 
    transform: translate(-46%, -10%);
    z-index: -1; /* Places the doodle behind the text */
    pointer-events: none; /* Prevents interactions */
    opacity: 0.7; /* Makes it blend naturally */
  }

  .contact-square {
    position: relative; /* Allows absolute positioning of the doodle */
    display: inline-block; /* Ensures it wraps only around the text */
    z-index: 2; /* Keeps the link on top */
}

.contact-square::after {
    content: ""; 
    position: absolute;
    top: 50%; /* Adjust based on the doodle */
    left: 50%;
    width: 180%; /* Slightly larger than text */
    height: 180%; 
    background: url('/images/Doodles/contact-square.png') no-repeat center;
    background-size: contain; 
    transform: translate(-50%, -50%);
    z-index: -1; /* Places the doodle behind the text */
    pointer-events: none; /* Prevents interactions */
    opacity: 0.9; /* Makes it blend naturally */
  }


.highlighted-link {
    position: relative; /* Allows absolute positioning of the doodle */
    display: inline-block; /* Ensures it wraps only around the text */
    z-index: 2; /* Keeps the link on top */
}

.highlighted-link::after {
    content: ""; 
    position: absolute;
    top: 50%; /* Adjust based on the doodle */
    left: 45%;
    width: 250%; /* Slightly larger than text */
    height: 250%; 
    background: url('/images/Doodles/legacy_square.png') no-repeat center;
    background-size: contain; 
    transform: translate(-50%, -50%);
    z-index: -1; /* Places the doodle behind the text */
    pointer-events: none; /* Prevents interactions */
    opacity: 0.9; /* Makes it blend naturally */
  }

.case-study-container {
    position: relative;
    display: inline-block; /* Keeps the text and doodle aligned */
}

.doodle-name {
    position: absolute;
    left: 50%;  /* Centers it */
    transform: translateX(-50%) translateY(-5px); /* Adjust the Y offset to fit naturally */
    width: auto; /* Keeps the aspect ratio */
    height: 40px; /* Adjust based on your design */
    opacity: 0.9; /* Slight transparency for an authentic feel */
    pointer-events: none; /* Prevents it from being selectable */
}

@media (max-width: 768px) {  
    .spotify-doodle {
        grid-column: 1;  /* Keep it aligned with the main content */
        grid-row: auto;  /* Allow it to flow properly */
        display: flex;
        justify-content: center;  /* Center horizontally */
        align-items: center;
        width: 100%;  
        max-width: 300px;  
        margin: 10px auto 0 auto; /* Adjust margin for better spacing */
        text-align: center;
    }

    .spotify-doodle img {
        max-width: 80%; /* Make sure it scales well on smaller screens */
    }

    .doodle-wrap {
    display: flex;
    flex-direction: column; /* Stack doodle below the title */
    align-items: center; /* Center aligns on mobile */
    }

    .doodle-wrap::before {
        position: relative; /* No longer absolute */
        top: auto; 
        left: auto;
        width: 200px; /* Resize for mobile */
        height: 50px;
        margin-top: 0px; /* Spacing between text and doodle */
        transform: translateY(0);
    }
}