@media (max-width: 425) {
    .giffy{
        display: none;
    }
    
}
@media (min-width: 769px) and (max-width: 999px) {
    .ab-left {
        display: none; 
    }
}
@media (max-width: 768px) {
    .header {
        width: 100%;
        padding: 12px 15px;
    }
    .hamb-menu {
        display: block;
        cursor: pointer;
    }

    .nav-links {
        display: none;
        gap: 0px;
        flex-direction: column;
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        width: 100%;
        top: 60px; /* Adjust based on your header height */
        left: 0;
        padding: 10px 0;
    }

    .hamb-menu.active {
        .nav-links {
            display: flex;
        }
    }


    .logo-container {
        gap: 5px;
        align-items: flex-start;
        gap: 10px;
        transition: all 0.3s ease-in-out;
    }

    .logo {
        width: 100px;
        height: 50px;
    }

    .nav-links li {
        margin-left: 10px;
    }

    .nav-links a {
        font-size: 16px;
        padding: 8px 4px;
    }

    .hamb-menu .line {
        height: 3px;
        margin: 5px;
    }

    .hamb-menu.active .nav-links {
        display: flex;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 5%;
    }

    .section h2 {
        font-size: 18px;
    }

    .section p {
        font-size: 10px;
    }

    .wlc-container * {
        margin-left: 5px;
    }
    
    .giffy {
        display: none;
    }

    .scroll-container {
        width: calc(100vw - 50px); /* Ensures margin of 75px on left & right */
        height: 50px; /* Adjust height as needed */
    }

    .scroll-content img {
        height: 20px; /* Adjust as needed */
        border-radius: 2px;
        object-fit: cover;
        filter: grayscale(0%); /* Makes images grayscale */
        transition: transform 0.3s ease-in-out;
        user-select: none;
        pointer-events: none;
        margin-left: 25px; 
    }


    .ab-left {
        display: none;  /* Hides the .ab-left div on smaller screens */
    }

    .section .ab-right {
        flex: 1;  /* Takes full width on smaller screens */
    }

    .ab-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;  /* Ensures a 30px gap between .ab-left and .ab-right */
        margin-top: 25px;
        margin: 40px auto; /* Centers the container */
    }

    .ab-right * {
        margin-right: 10px;
    }

    .ab-right h2 {
        font-size: 36px;
    }

    .ab-right p {
        font-size: 12px;
    }

    .ab-container .ab-right .ab-button {
        margin-top: 30px;
        background: #ffffff;
        padding: 7px 10px;
        border-radius: 25px;
        font-size: 15px;
        cursor: pointer;
        border: 2px solid #3498db;
        box-shadow: none;
        text-shadow: none;
        font-weight: bold;
        width: 170px; /* Set a fixed width for all buttons */
        text-align: center; /* Center the text inside the button */
    }

    .ee-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #education h2 {
        font-size: 36px;
        margin-left: 15px;
    }

    #education p {
        font-size: 15px;
        margin-left: 15px;
    }

    .job-box {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .job-box .job-top {
        display: flex;
        flex-direction: column;
        align-items: left;
        padding: 10px;
    }

}



@media (max-width: 1199px) {
    .job-box .top-left h4 {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .tri-col {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        margin-right: 20px;
        margin-left: 20px;
    }
}