@media only screen and (max-width: 1400px) {
    /* .exp {
    flex-direction: column;
  } */
}

@media only screen and (max-width: 1200px) {
    .social-network.active {
        display: block;
        position: absolute;
        top: 80vh;
        left: 50%;
        transform: translate(-50%);
        transition: transform 0.3s ease;
        width: 100%;
    }

    /* #sectio-home{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  } */

    #delayedText {
        font-size: 100px;
    }

    #delayedText1 {
        font-size: 100px;
    }

    #hidden-header nav ul li a {
        margin-right: 10px;
    }

    .image-31 {
        width: 30px;
        margin-top: 10px;
    }

    .scroll-arrow22 {
        right: 50%;
        transform: translateX(50%);
        position: fixed;
        margin-right: auto;
        margin-bottom: -9px;
    }

    .scroll-text {
        font-size: 15px;
    }

    .scroll-text2 {
        height: 70px;
    }

    .scroll-circle {
        width: 43px;
        height: 43px;
        right: 50%;
        transform: translateX(+50%);
        position: fixed;
        bottom: 45px;
    }

    .exp-box {
        width: 100%;
    }

    .about-title {
        width: 100%;
    }

    .about-title .p2 {
        width: 100%;
    }

    .br-none {
        display: none;
    }

    .arrow-imagine {
        display: none;
    }

    .work-marquee-outer-container {
        display: none;
    }

    .portfolio-title {
        font-size: 2.5rem;
        margin-top: -40px;
    }

    .ppc-box {
        font-size: 22px;
        padding-bottom: 10px;
        text-align: center;
    }

    .box2 {
        padding-bottom: 20px;
        margin: 0;
    }

    .submenu-item a {
        font-size: 20px;
    }

    .submenu-item {
        display: flex;
        flex-direction: column; /* Arrange items one under another */
        justify-content: center; /* Center vertically */
        align-items: center; /* Center horizontally */
        padding: 20px 16px; /* Equal padding for all sides */
        gap: 15px; /* Equal vertical gap between items */
        height: auto; /* Allow container to grow with items */
    }

    .education-title {
        font-size: 2.5rem;
        margin-top: -60px;
    }

    #section-awards {
        padding-bottom: 50px;
        position: static;
    }

    .award-item {
        height: 200px;
    }

    .beonmax-img-x img {
        width: 400px;
        height: auto;
    }

    .beonmax-img-x img {
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .beonmax-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pdf-oppener {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #10193d;
        font-size: 40px;
        padding: 10px;
    }

    .lets-talk {
        font-size: 2.5rem;
    }

    .envelope-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .envelope {
        width: 100%;
        margin: 0 auto;
    }

    .hr {
        display: block;
    }
}

@media only screen and (max-width: 1024px) {
    .social-network {
        display: none;
    }

    #toggleButton {
        display: flex;
        top: 1.5vh;
        position: absolute;
        font-size: 17px;
        margin-left: 5%;
    }

    #facebook-icon {
        font-size: 40px;
    }

    #twitter-icon {
        font-size: 40px;
    }

    #linkedin-icon {
        font-size: 40px;
    }

    /* Creative Mobile Menu Overlay */
    #nav-list {
        display: flex !important;
        flex-direction: column;
        justify-content: center !important;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9998;
        gap: 25px;
        margin: 0;
        padding: 0;
        clip-path: circle(0% at 90% 5%);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
        background-color: #f8f8f8 !important;
    }

    #nav-list.active {
        clip-path: circle(150% at 90% 5%);
    }

    .nav-list li {
        list-style: none;
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.5s ease;
    }

    #nav-list.active li {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered entrance for links */
    #nav-list.active li:nth-child(1) {
        transition-delay: 0.2s;
    }
    #nav-list.active li:nth-child(2) {
        transition-delay: 0.3s;
    }
    #nav-list.active li:nth-child(3) {
        transition-delay: 0.4s;
    }
    #nav-list.active li:nth-child(4) {
        transition-delay: 0.5s;
    }
    #nav-list.active li:nth-child(5) {
        transition-delay: 0.6s;
    }

    .nav-list a {
        font-size: 2.5rem !important;
        font-weight: 700 !important;
        color: #10193d !important;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 4px;
        position: relative;
    }

    .nav-list a::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 3px;
        background: #10193d;
        transition: width 0.3s ease;
    }

    .nav-list a:active::after {
        width: 100%;
    }

    .burger {
        position: relative;
        z-index: 10002;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 0 90%;
    }

    .burger i,
    #nav-list i {
        color: #10193d !important;
    }

    #toggleButton {
        position: static !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center;
        opacity: 0;
        color: #10193d !important;
        transform: translateY(30px);
        transition: all 0.5s ease;
    }

    #social-network {
        display: flex !important;
        position: static !important;
        transform: translateY(30px) !important;
        opacity: 0;
        margin: 0 !important;
        width: auto !important;
        transition: all 0.5s ease;
    }

    #nav-list.active #toggleButton,
    #nav-list.active #social-network {
        opacity: 1;
        transform: translateY(0) !important;
    }

    #social-network .center-block {
        display: flex;
        gap: 20px;
    }

    .footer {
        display: block !important;
    }
    #hidden-header {
        display: none;
    }
    #delayedText1,
    #delayedText {
        top: 30%;
    }
    .hamburger {
        display: block;
        font-size: 50px;
        z-index: 100;
    }

    .copyright-link {
        font-size: 10px;
        width: 100px;
        height: 100px;
    }

    .work-heading {
        font-size: 6vmax;
        margin-top: 25px;
    }

    .arrow {
        display: none;
    }

    .padding-submenu {
        padding: 23px 0 23px 0;
    }

    .sent {
        font-size: 70px;
    }

    .container {
        display: none;
    }

    .my-experience {
        display: none;
    }

    .white-box {
        display: none;
    }

    .arrow-container {
        display: none;
    }

    .award-item {
        flex-basis: calc(100% - 40px);
        height: 350px;
    }

    .year-box {
        margin: -30px 0 0 50%;
    }
}

@media only screen and (max-width: 769px) {
    #delayedText1 {
        font-size: 50px;
    }

    #delayedText {
        font-size: 50px;
        padding: 20px;
    }

    .submenu-item div {
        width: 100%; /* Ensure each item block is the same width */
        color: #10193d;
        text-decoration: none;
        margin-bottom: 0; /* Replaced by gap on the parent */
    }

    .toggle {
        display: none;
    }

    .award-item {
        height: 280px;
    }

    .sent {
        font-size: 50px;
    }
}

@media (max-width: 600px) {
    .experience-box-mob {
        width: 80vmax;
        padding: 20px;
        margin-top: 100%;
    }

    .award-item {
        height: 300px;
    }
}

@media only screen and (max-width: 480px) {
    .track .font2 {
        font-size: 60px;
    }

    .track .font1 {
        font-size: 60px;
    }

    #delayedText1 {
        font-size: 40px;
    }

    #delayedText {
        font-size: 40px;
        padding: 20px;
        top: 20%;
    }

    .award-item {
        height: 150px;
    }
}

@media only screen and (max-width: 320px) {
    /* .about-title {
    font-size: 20px;
    line-height: 20px;
    padding: 20px;
  } */

    .lets-talk {
        margin-bottom: -200px;
    }

    .envelope {
        width: 100%;
        margin: 0 auto;
    }

    .arrow {
        display: none;
    }
}