/* Responsive styles for Landing */
@media only screen and (max-width:1200px) {

    /* ? Header */
    .header {
        padding: 20px 90px;
    }

    .header-logo {
        gap: 10px;
    }

    h1 {
        font-size: 20px;
    }

    a {
        font-size: 14px;
        line-height: 13px;
    }

    /* ? Header */

    /* ? Show Section */
    .show-section {
        padding-top: 80px;
    }

    h2 {
        font-size: 36px;
        line-height: 50px;
        padding-bottom: 14px;
    }

    .show-text1 {
        font-size: 18px;
        line-height: 20px;
        padding-bottom: 18px;
    }

    .show-text2 {
        font-size: 16px;
        line-height: 20px;
        padding-bottom: 10px;
    }

    input,
    textarea {
        padding-left: 10px;
        width: 250px;
        height: 40px;
        font-size: 14px;
    }

    .started-btn {
        gap: 5px;
        font-size: 14px;
        line-height: 20px;
        padding: 10px 16px;
    }

    .started-btn img {
        width: 10px;
    }

    /* ? Show Section */


    /* ? Enjoy Section & Stream Part & Kids Section */
    .enjoy-section,
    .stream-part,
    .kids-section {
        gap: 24px;
        padding: 56px 20px;
        flex-direction: column;
        text-align: center;
    }

    .stream-part {
        flex-direction: column-reverse;
    }

    h3,
    h4,
    h5,
    h6,
    .question-text {
        font-size: 30px;
        line-height: 40px;
        padding-bottom: 10px;
    }

    .enjoy-right,
    .stream-left,
    .kids-section > div,
    .kids-text {
        width: min(100%, 540px);
    }

    .enjoy-text,
    .stream-text,
    .kids-text {
        font-size: 18px;
        line-height: 30px;
    }

    .loading-tv-main,
    .loading-tv-main-2 {
        height: auto;
        min-height: 240px;
    }

    .loading-tv-frame,
    .loading-tv-frame-2 {
        width: min(420px, 80vw);
        height: auto;
    }

    .kids-section {
        padding: 50px 0;
        gap: 6px;
    }

    .kids-section figure img {
        width: min(420px, 80vw);
        height: auto;
    }


    /* ? Enjoy Section & Stream Part & Kids Section */

    /* ? Contact us */
    h6 {
        padding-bottom: 24px;
    }

    .contact_us-section {
        padding-block: 40px 100px;
    }

    .contact_us-input {
        gap: 14px;
    }

    textarea {
        height: 80px;
    }

    .send-btn {
        width: 130px;
        padding: 8px 16px;
        font-size: 14px;
    }

    /* ? Contact us */

    /* ? Question */
    .question-section {
        padding: 60px 0;
    }

    .question-text {
        padding-bottom: 24px;
    }

    .accordion {
        width: 800px;
        margin: 18px auto;
    }

    .accordion-header {
        padding: 18px;
    }

    .accordion-header span {
        font-size: 16px;
    }

    /* ? Question */


    /* ? Footer */
    .footer {
        gap: 40px;
        margin: 60px 130px;
    }

    .footer nav {
        gap: 12px;
        width: 300px;
        height: 172px;
        padding-left: 30px;
    }

    .footer nav a {
        font-size: 12px;
    }

    /* ? Footer */

    /* ? User */
    .user-img {
        width: 30px;
        height: 30px;
    }

    .user-p {
        font-size: 14px;
    }

    .user-modal {
        top: calc(100% + 2px);
        left: 35px;
        width: 100px;
    }

    .user-modal li {
        font-size: 14px;
    }

    /* ? User */


    /* ? Pop-up */
    .popup {
        gap: 14px;
        width: 300px;
        height: 150px;
    }

    .popup p {
        margin: 14px 0;
        font-size: 14px;
    }

    .close-btn {
        font-size: 12px;
        padding: 8px 16px;
    }

    /* ? Pop-up */

}

@media only screen and (max-width:768px) {

    /* ? Header */
    .header {
        padding: 16px 40px;
    }

    .header-logo {
        gap: 8px;
    }

    h1 {
        font-size: 18px;
    }

    a {
        font-size: 12px;
        line-height: 10px;
    }

    /* ? Header */

    /* ? Show Section */
    .show-section {
        padding-top: 80px;
    }

    h2 {
        font-size: 30px;
        line-height: 40px;
        padding-bottom: 10px;
    }

    .show-text1 {
        font-size: 15px;
        line-height: 17px;
        padding-bottom: 14px;
    }

    .show-text2 {
        font-size: 13px;
        line-height: 17px;
        padding-bottom: 8px;
    }

    .show-section form {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    input,
    textarea {
        width: min(100%, 300px);
        height: 30px;
        font-size: 12px;
    }

    .started-btn {
        width: min(100%, 180px);
        justify-content: center;
        gap: 5px;
        font-size: 12px;
        line-height: 18px;
        padding: 6px 10px;
    }

    .started-btn img {
        width: 8px;
    }

    /* ? Show Section */


    /* ? Enjoy Section & Stream Part & Kids Section */
    .enjoy-section,
    .stream-part,
    .kids-section {
        gap: 4px;
    }

    h3,
    h4,
    h5,
    h6,
    .question-text {
        font-size: 25px;
        line-height: 30px;
        padding-bottom: 7px;
    }

    .enjoy-right,
    .stream-left {
        width: 320px;
    }

    .kids-section > div,
    .kids-text {
        width: min(100%, 420px);
    }

    .enjoy-text,
    .stream-text,
    .kids-text {
        font-size: 14px;
        line-height: 23px;
    }

    .loading-tv-frame,
    .loading-tv-frame-2 {
        width: 350px;
        height: 250px
    }

    .kids-section {
        padding: 50px 0;
        gap: 6px;
    }

    .kids-section figure img {
        width: 350px;
        height: 250px
    }

    .kids-section {
        padding: 35px 0;
    }


    /* ? Enjoy Section & Stream Part & Kids Section */

    /* ? Contact us */
    h6 {
        padding-bottom: 18px;
    }

    .contact_us-section {
        padding-block: 35px 80px;
    }

    .contact_us-input {
        gap: 10px;
    }

    textarea {
        height: 60px;
    }

    .send-btn {
        width: 100px;
        padding: 8px 16px;
        font-size: 12px;
    }

    /* ? Contact us */

    /* ? Question */
    .question-section {
        padding: 50px 0;
    }

    .question-text {
        padding-bottom: 18px;
    }

    .accordion {
        width: 600px;
        margin: 14px auto;
    }

    .accordion-header {
        padding: 16px;
    }

    .accordion-header span {
        font-size: 14px;
    }

    /* ? Question */


    /* ? Footer */
    .footer {
        gap: 20px;
        margin: 40px 100px;
    }

    .footer nav {
        gap: 8px;
        width: 200px;
        height: 160px;
        padding-left: 20px;
    }

    .footer nav a {
        font-size: 10px;
    }

    /* ? Footer */

    /* ? User */
    .user-img {
        width: 25px;
        height: 25px;
    }

    .user-p {
        font-size: 12px;
    }

    .user-modal li {
        font-size: 10px;
    }

    .user-modal {
        width: 100px;
    }

    .user-modal li img {
        width: 15px;
        height: 15px;
    }

    /* ? User */

}

@media only screen and (max-width:576px) {

    /* ? Header */
    .header {
        padding: 12px 30px;
    }

    .header-logo {
        gap: 4px;
    }

    h1 {
        font-size: 12px;
    }

    a {
        font-size: 8px;
        line-height: 6px;
    }

    /* ? Header */

    /* ? Show Section */
    .show-section {
        padding-top: 20px;
    }

    h2 {
        font-size: 18px;
        line-height: 30px;
        padding-bottom: 8px;
    }

    .show-text1 {
        font-size: 12px;
        line-height: 14px;
        padding-bottom: 10px;
    }

    .show-text2 {
        font-size: 10px;
        line-height: 14px;
        padding-bottom: 8px;
    }

    input,
    textarea {
        width: 200px;
        height: 20px;
        font-size: 10px;
    }

    .started-btn {
        font-size: 10px;
        line-height: 13px;
        padding: 4px 8px;
    }

    .started-btn img {
        width: 6px;
    }

    /* ? Show Section */


    /* ? Enjoy Section & Stream Part & Kids Section */
    .enjoy-section,
    .stream-part,
    .kids-section {
        gap: 16px;
        padding: 28px 12px;
    }

    h3,
    h4,
    h5,
    h6,
    .question-text {
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 7px;
    }

    .enjoy-right,
    .stream-left {
        width: min(100%, 220px);
    }

    .kids-section > div,
    .kids-text {
        width: min(100%, 240px);
    }

    .enjoy-text,
    .stream-text,
    .kids-text {
        font-size: 10px;
        line-height: 16px;
    }

    .loading-tv-main,
    .loading-tv-main-2 {
        height: auto;
        min-height: 140px;
    }

    .loading-tv-frame,
    .loading-tv-frame-2 {
        width: min(180px, 60vw);
        height: auto;
    }

    .kids-section {
        padding: 20px 0;
        gap: 4px;
    }

    .kids-section figure img {
        width: min(180px, 60vw);
        height: auto;
    }

    .kids-section {
        padding: 25px 0;
    }


    /* ? Enjoy Section & Stream Part & Kids Section */

    /* ? Contact us */
    h6 {
        padding-bottom: 12px;
    }

    .contact_us-section {
        padding-block: 25px 60px;
    }

    .contact_us-input {
        gap: 8px;
    }

    .contact_us-input input,
    .contact_us-input textarea {
        font-size: 8px;
    }

    textarea {
        height: 50px;
    }

    .send-btn {
        padding: 4px 12px;
        font-size: 8px;
    }

    /* ? Contact us */

    /* ? Question */
    .question-section {
        padding: 30px 0;
    }

    .question-text {
        padding-bottom: 14px;
    }

    .accordion {
        width: 250px;
        margin: 10px auto;
    }

    .accordion-header {
        font-size: 10px;
        padding: 10px;
    }

    .accordion-header span {
        font-size: 10px;
    }

    .accordion-content {
        font-size: 10px;
    }

    /* ? Question */


    /* ? Footer */
    .footer {
        gap: 12px;
        margin: 20px 45px;
    }

    .footer nav {
        gap: 4px;
        width: 150px;
        padding-left: 0;
    }

    .footer nav a {
        font-size: 8px;
    }

    /* ? Footer */

    /* ? User */
    .user-img {
        width: 22px;
        height: 22px;
    }

    .user-p {
        font-size: 12px;
    }

    .user-modal {
        width: 60px;
        left: 30%;
    }

    .user-modal li {
        font-size: 8px;
    }

    .user-modal li img {
        width: 10px;
        height: 10px;
    }

    /* ? User */

}