.title-and-cat {
    display: flex;
    /* max-width: 1000px; */
    justify-content: center;
    width: 75%;
    max-width: 2000px;
}

#fluffy {
    object-fit: contain;
    float: right;
    width: 45vw;
    height: auto;
    padding-top: 3%;
}
.title {
    display: flex;
    flex-direction: column;
    padding-top: 8%;
    padding-right: 2rem;
    justify-content: space-between;
}

.highlight {
                        position: relative;
                        display: inline-block;
                        font-size: inherit;
                        color: inherit;
                        --bg-size: 400%;
                        --color-one: #46392F;
                        --color-two: #ff7300;
                        background: linear-gradient(90deg,var(--color-one),var(--color-two),var(--color-one)) 0 0 / var(--bg-size) 100%;
                        color: transparent;
                        background-clip: text;
                        -webkit-background-clip: text;
                        animation: move-bg 10s infinite ease-in-out reverse;
                        -webkit-animation: move-bg 10s infinite linear reverse;
}
@keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }

.chatgpt {
    color: inherit;
    --bg-size: 600%; /* Increased background size for a more noticeable effect */
    --color-one: #09b4d2;
    --color-two: #11f4a0;
    background: linear-gradient(135deg, var(--color-one), var(--color-two), var(--color-one)) 0 0 / var(--bg-size) 100%; /* Diagonal gradient for a more dynamic effect */
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: move-bg 7s infinite linear reverse; /* Slower animation for a smoother effect */
    -webkit-animation: move-bg 7s infinite linear reverse;
}

/* .highlight .bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #FF8818;
    z-index: -1;
} */
/* 
.highlight:hover {
    color: white;
} */

#arrow-shape::after {
    transform: translate(-50%, -50%);
  }

h1 {
    font-size: 4rem;
    color: #46392F;
    display: inline-block;
    position: relative;
    font-weight: 700;
    line-height: 3.5rem;
}
h1 span {
    font-size: inherit;
    color: inherit;
    display: inline-block;
    position: relative;
}

.split-line {
    font-size: inherit;
    display: inline-block;
    overflow: hidden;  /* Ensure overflow is hidden to create the 'cut off' effect */
  }

p {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 1.35rem;
}

a {
    font-size: 1.35rem;
}

svg {
    width: 40%;
    max-width: 10rem;
    height: auto;
    display: block; /* Remove any unwanted space below the SVG */
    padding-bottom: 20rem;
  }

.fluffy-intro {
    display: flex;
    flex-direction: column;
}

#arrow-container {
    width: 100%;
    display: flex;
    align-items: flex-end; /* Optional: vertically centers the items */
    flex-direction: column;
    padding-right: 20%;
    box-sizing: border-box; /* Includes padding within the element's width */
}

h3 {
    font-size: 2rem;
    color: #46392F;
    display: inline-block;
    position: relative;
}

.content-block {
    width: 70%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-top: 6rem;
    padding-left: 5%;
    gap: 5%
}

.title-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

  .skills-container {
    display: flex;
    justify-content: space-evenly; /* Even spacing between the blocks */
    align-items: flex-start;      /* Align titles at the top */
    text-align: center;
    width: 100%;
    padding-top: 1rem;
    flex-wrap: wrap;
    gap: clamp(0rem, 5vw, 2rem);  /* Scale the gap between skill blocks */
  }
  
  .skill-block {
    flex: 1;                      /* Make all blocks the same width */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: start;
    gap: 0.3rem;
  }
  
h4 {
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
    color: #46392F;
  }

.experience-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    padding-top: 1rem;
}

.experience-block {
    display: flex;
    flex-direction: column;
}

.top-exp-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.experience-title {
    text-decoration: none;
}

.experience-content {
    display: flex;
    justify-content: space-between; /* Space between left and right content */
    align-items: center;
    margin-top: 5px;
}

.right-text {
    margin: 0;
    color: #888; /* Lighter color for the right text */
    font-style: italic;
    text-align: right; /* Aligns right text to the right */
}


.card-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    padding-top: 1rem;
}
.card {
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between image/video and content */
    width: 100%;
}

.card-image {
    width: 70%;
    max-width: 40rem;
    height: auto;
    object-fit: contain;
}

.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contact-me {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 1.2rem;
    margin-bottom: 2rem;
}

.contact-me-left {
    flex: 1;
    padding-right: 2rem;
}

.contact-me-right {
    display: flex;
    gap: clamp(0rem, 5vw, 2rem);  /* Scale the gap between skill blocks */
}

.right-cm-block {
    display: flex;
    flex-direction: column;
}

.right-cm-block h4 {
    margin-bottom: 10px;
}

.right-cm-block ul {
    list-style-type: none;
    padding: 0;
}

.right-cm-block a {
    text-decoration: none;
}

.right-cm-block a:hover {
    text-decoration: underline;
}

/* Added Media Query */
@media (max-width: 1300px) {
    .title-and-cat {
        flex-direction: column;
    }
    #fluffy {
        width: 100%;
    }
    #arrow-container {
        align-items: flex-start;
    }
    #arrow-svg {
        display: none;
    }
    .card {
        flex-direction: column;
        align-items: flex-start;
    }
    .content-block {
        flex-direction: column; /* Stack the title-box and container vertically */
        align-items: center;    /* Center the content-block items */
    }

    .title-box {
        align-items: center;    /* Center content inside the title-box */
        margin-bottom: 2rem;    /* Add space below the title-box */
    }

    .skills-container {
        width: 100%;            /* Ensure the container stretches across the available width */
        justify-content: center; /* Center the skill-blocks */
    }

    * {
        cursor: auto;
    }

    .cursor {
        display: none;
    }
}