/* ==========================================================================
   Tablet / Laptop Responsive Fixes  â€”  v3
   ×˜×•×•×—: 769px â€“ 1440px
   ×¡×“×¨ ×˜×¢×™× ×”: ××—×¨×™ style.css, ×œ×¤× ×™ responsive.css
   ========================================================================== */


/* ==========================================================================
   1440px
   ========================================================================== */
@media screen and (max-width: 1440px) {

    .vector-field-overlay {
        height: auto;
    }
    
    .event-details-panel {
        padding: 100px 0 70px 40px;
    }

    .vector-graphic-bg {
        width: 375px;
        z-index: 99;
    }

    .logo {
        left: clamp(24px, 3.5vw, 95px);
        top: clamp(32px, 4vw, 77px);
    }

    .menu {
        /* left: clamp(320px, 23vw, 637px); */
        /* width: clamp(500px, 46vw, 718px); */
        /* top: clamp(76px, 0vw, 114px); */
        /* gap: clamp(18px, 2.2vw, 35px); */
        /* background: red; */
        /* padding: 2vw 1.5vw; */
    }

    .hero-content {
        left: clamp(90px, 8vw, 200px);
        top: clamp(200px, 15vw, 338px);
    }

    .main-heading {
        font-size: clamp(64px, 6vw, 105px);
        line-height: clamp(58px, 5.6vw, 89px);
    }

    .sub-heading {
        font-size: clamp(20px, 1.8vw, 30px);
        line-height: clamp(24px, 2.2vw, 36px);
    }

    .cards-main-heading,
    .form-title,
    .events-title,
    .kinetic-heading {
        font-size: clamp(64px, 6vw, 105px);
        line-height: clamp(58px, 5.6vw, 89px);
    }

    .event-inner-box { width: 100%; }
    .events-swiper { width: 100%; max-width: 100%; box-sizing: border-box; }
    .events-main-header { max-width: 100%; padding-inline: clamp(20px, 2vw, 40px); box-sizing: border-box; }
    .about-grid { padding-inline: clamp(20px, 3vw, 40px); }
    .cards-deck {/* padding-inline: clamp(20px, 3vw, 40px); *//* width: 100%; */flex-wrap: wrap;/* justify-content: center; */gap: 40px;}

    .speakers-system-wrapper { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
    .speaker-card { width: 100%; }

    .body-light, .body-bold {
        font-size: clamp(20px, 1.8vw, 30px);
        line-height: clamp(26px, 2.4vw, 36px);
    }
    .body-light br { display: none; }

    .vector-data-form { max-width: clamp(700px, 80vw, 986px); }
    .form-grid { grid-template-columns: 1fr 1fr; }

    .footer-inner { padding-inline: clamp(20px, 3vw, 0px); }
    .footer-menu { width: auto; gap: clamp(16px, 2vw, 35px); }
}


/* ==========================================================================
   1280px
   ========================================================================== */
@media screen and (max-width: 1280px) {

    .logo {
        left: clamp(20px, 2.5vw, 48px);
        top: clamp(24px, 3vw, 52px);
    }

    .menu {
        left: clamp(260px, 30vw, 440px);
        width: clamp(420px, 48vw, 600px);
        top: clamp(60px, 6.5vw, 92px);
        gap: clamp(12px, 1.6vw, 22px);
    }

    .menu-item { font-size: clamp(15px, 1.4vw, 20px); }

    .hero-content {
        left: clamp(50px, 5.5vw, 120px);
        top: clamp(140px, 17vw, 260px);
    }

    .main-heading {
        font-size: clamp(48px, 5.2vw, 72px);
        line-height: clamp(44px, 4.8vw, 66px);
        margin-bottom: 36px;
    }

    .sub-heading {
        font-size: clamp(16px, 1.5vw, 22px);
        line-height: clamp(20px, 2vw, 28px);
        margin-bottom: 14px;
    }

    .cards-main-heading,
    .form-title,
    .events-title,
    .kinetic-heading {
        font-size: clamp(48px, 5.2vw, 72px);
        line-height: clamp(44px, 4.8vw, 66px);
    }

    .event-inner-box { grid-template-columns: 1fr 1fr; width: 100%; }
    .event-details-panel {
        padding: clamp(32px, 3.2vw, 60px) clamp(28px, 2.8vw, 52px) clamp(32px, 3.2vw, 60px);
    }

    .event-heading {
        font-size: clamp(36px, 3.8vw, 54px);
        line-height: clamp(34px, 3.6vw, 52px);
    }

    .event-meta {
        font-size: clamp(18px, 1.8vw, 28px);
        line-height: clamp(22px, 2.2vw, 34px);
    }

    .event-description {
        font-size: clamp(16px, 1.5vw, 22px);
        line-height: clamp(20px, 2vw, 26px);
    }

    .cyborg-head-layer { width: 100%; }
    .vector-field-overlay { width: 60%; }

    .about-grid {
        gap: clamp(14px, 1.8vw, 22px);
        padding-inline: clamp(28px, 3.5vw, 56px);
    }

    .kinetic-wrapper {/* width: clamp(320px, 40vw, 560px); */height: auto;}

    .vector-card {/* width: clamp(160px, 17vw, 260px); *//* width: auto; */width: 23vw;}

    .body-light, .body-bold {
        font-size: clamp(18px, 1.6vw, 24px);
        line-height: clamp(24px, 2.2vw, 30px);
    }

    .form-grid { grid-template-columns: 1fr 1fr; }
    .vector-data-form { max-width: clamp(560px, 82vw, 860px); }

    .footer-inner { padding-inline: clamp(20px, 3vw, 0px); }
    .footer-menu { width: auto; gap: clamp(10px, 1.3vw, 24px); }
    .footer-menu-item { font-size: clamp(14px, 1.3vw, 20px); }
}


/* ==========================================================================
   1024px
   ========================================================================== */
@media screen and (max-width: 1024px) {

    /* â”€â”€ ×ª×¤×¨×™×˜: × ×¢×œ×, ×”×ž×‘×•×¨×’×¨ ×ž×•×¤×™×¢ â”€â”€ */
    .menu { display: none !important; }

    .hamburger-toggle-btn {
        display: flex !important;
        position: absolute;
        right: clamp(16px, 3vw, 36px);
        top: clamp(20px, 3vw, 40px);
    }

    /* â”€â”€ Logo â”€â”€ */
    .logo {
        left: clamp(16px, 2.5vw, 32px) !important;
        top: clamp(16px, 2.5vw, 32px) !important;
    }

    /* â”€â”€ Hero: ×ž×•×¦×™××™× ×ž-absolute ×œ×—×œ×•×˜×™×Ÿ â”€â”€ */
    .hero-container {
        display: flex;
        flex-direction: column;
        min-height: auto;
        padding-bottom: 48px;
        overflow: hidden;
    }

    .header-navigation {
        position: relative;
        width: 100%;
        padding: clamp(16px, 2.5vw, 28px) clamp(16px, 3vw, 36px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .hero-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-top: clamp(24px, 4vw, 48px);
        padding-inline: clamp(20px, 4vw, 60px);
        max-width: 60%;
        z-index: 5;
    }

    .main-heading {
        font-size: clamp(36px, 4.8vw, 58px);
        line-height: clamp(34px, 4.5vw, 54px);
        margin-bottom: 22px;
    }

    .sub-heading {
        font-size: clamp(14px, 1.6vw, 18px);
        line-height: clamp(18px, 2vw, 24px);
        margin-bottom: 12px;
    }

    .button {
        position: relative;
        font-size: clamp(18px, 2vw, 26px);
        height: clamp(44px, 5vw, 60px);
        padding: 0 clamp(18px, 2.2vw, 28px);
    }

    /* â”€â”€ Section headings â”€â”€ */
    .cards-main-heading,
    .form-title,
    .events-title,
    .kinetic-heading {
        font-size: clamp(36px, 4.8vw, 58px);
        line-height: clamp(34px, 4.5vw, 54px);
    }

    /* â”€â”€ About â”€â”€ */
    .about-container { padding: 48px 0 0; }

    .about-grid {
        flex-direction: column;
        align-items: center;
        padding-inline: clamp(20px, 4vw, 52px);
        gap: 32px;
    }

    .kinetic-wrapper {
        width: 100%;
        max-width: 420px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .mission-wrapper { max-width: 100%; }

    .body-light, .body-bold {
        font-size: clamp(16px, 1.6vw, 20px);
        line-height: clamp(22px, 2.4vw, 28px);
    }
    .body-light br { display: none; }
    .mission-text { margin-bottom: 32px; }

    /* â”€â”€ Cards â”€â”€ */
    .cards-container { padding: 60px 0 48px; }

    .cards-deck {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding-inline: clamp(16px, 3vw, 40px);
    }

    .vector-card {
        width: clamp(160px, 43%, 260px);
        height: auto !important;
    }

    .vector-card.active,
    .vector-card:hover { height: auto !important; }

    .cards-sub-paragraph {
        font-size: clamp(16px, 1.6vw, 20px);
        line-height: clamp(22px, 2.4vw, 28px);
        padding-inline: clamp(16px, 3vw, 40px);
    }

    /* â”€â”€ Events â”€â”€ */
    .events-container { padding-top: 52px; }

    .events-main-header {
        padding-inline: clamp(20px, 4vw, 52px);
        margin-bottom: 28px;
    }

    .event-inner-box { grid-template-columns: 1fr; width: 100%; }
    .event-graphic-panel { display: none; }

    .event-details-panel {
        padding: clamp(24px, 3.5vw, 52px) clamp(20px, 3.5vw, 52px);
    }

    .event-heading {
        font-size: clamp(30px, 3.8vw, 48px);
        line-height: clamp(28px, 3.6vw, 46px);
    }

    .event-meta {
        font-size: clamp(14px, 1.6vw, 22px);
        line-height: clamp(18px, 2vw, 28px);
    }

    .event-description {
        font-size: clamp(14px, 1.4vw, 18px);
        line-height: clamp(18px, 1.8vw, 24px);
    }

    .timeline-row {
        font-size: clamp(14px, 1.4vw, 18px);
        line-height: clamp(18px, 1.8vw, 24px);
    }

    .speakers-system-wrapper { grid-template-columns: 1fr; max-width: 100%; }
    .speaker-card { width: 100%; }

    .button-register {
        height: clamp(44px, 4.8vw, 60px);
        font-size: clamp(18px, 2vw, 26px);
    }

    /* â”€â”€ Form â”€â”€ */
    .form-container { padding-bottom: 72px; }

    .form-header {
        padding-inline: clamp(20px, 4vw, 52px);
        margin-top: 64px;
        margin-bottom: 36px;
    }

    .form-grid { grid-template-columns: 1fr 1fr; gap: 14px; }

    .vector-data-form {
        max-width: clamp(460px, 86vw, 760px);
        margin: 0 auto;
    }

    .disclaimer-group {
        max-width: clamp(460px, 86vw, 760px);
    }

    .input-group,
    .custom-dropdown,
    .dropdown-trigger,
    .dropdown-panel,
    .vector-textarea,
    .file-upload-trigger { width: 100%; }

    /* â”€â”€ Footer â”€â”€ */
    .global-footer { padding: 52px clamp(20px, 4vw, 52px); }

    .footer-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding-inline: 0;
    }

    .footer-menu {
        width: auto;
        flex-wrap: wrap;
        gap: 10px 18px;
        justify-content: center;
        height: auto;
    }

    .footer-menu-item { font-size: clamp(13px, 1.3vw, 18px); }
}