@media (max-width: 375px) {
    .start-now-section img {
        width: 130px !important;
    }

    .img1 svg {
        width: 80% !important;
    }

    #missionModal .modal-body h3.title {
        font-size: 40px;
    }

    .help-text {
        margin: 0 25px;
    }
}

@media (max-width: 480px) {
    .prize-section p,
    .btn-upload,
    .progress-text.completed {
        font-size: 20px !important;
    }

    .btn-mission .btn-text {
        width: 280px;
        padding: 10px 20px;
        font-size: 24px;
    }

    .mission-label h3 {
        font-size: 20px !important;
    }

    .custom-header {
        padding: 15px;
    }

    .file-upload h6 {
        font-size: 14px;
    }

    .submission p {
        font-size: 12px !important;
    }


    #missionModal .modal-header .p3-logo {
        width: 64px !important;
        height: 48px !important;
    }

    .form-group span {
        transform: translate(0px, -85px);
    }

    .img-container {
        justify-content: center;
        margin-top: 30px;
        transform: translateX(-10%);
    }
    
    .img-container img {
        height: 60vh;
    }

    .accordion-header {
        height: auto;
    }

    .m-b-40-xs {
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .switch {
        width: 60px;
        height: 60px;
    }

    .video-container video {
        object-position: 80% center;
    }

    .start-now-section {
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    .start-now-section h3 {
        margin-bottom: clamp(25px, 8vw, 40px);
    }

    .start-now-section img {
        width: 150px;
    }

    .img-band {
        transform: rotate(-5deg) scale(1.4);
    }

    .second-section {
        background-position: center center;
    }

    .background-box-img {
        height: 782px;
    }

    .introduction {
        width: 100%;
        padding: 20px;
    }

    .introduction .title h3 {
        font-size: clamp(22px, 8vw, 42px);
    }

    .introduction .col-md-6 {
        padding: 0;
    }

    .background-box {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .second-section .img-content img,
    .second-section .img-content p {
        width: 100%;
        height: auto;
    }

    .second-section .text-content {
        color: #FFF;
        padding: 30px 0 24px;
    }

    .text-content h3 {
        font-size: clamp(29px, 8vw, 36px);
    }

    .text-content p {
        font-size: 12px;
    }

    footer,
    .modal-footer {
        padding: 10px 80px;
        display: block;
        height: auto;
    }

    footer p {
        margin-top: 20px;
    }

    /* Modals */
    .modal-fullscreen-sm-down {
        padding: 2.5rem 20px;
    }

    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        margin-top: 2rem;
    }

    form {
        padding: 0;
    }

    #formModal .modal-body h3 {
        font-size: clamp(22px, 7vw, 32px);
        margin: 20px 0 0;
    }

    .form-group label {
        margin-bottom: 20px;
    }

    .form-check-label {
        padding-left: .5rem;
        line-height: 1.2;
    }

    .gradient-hr {
        margin: 0 0 6rem;
    }

    /* Mission Modal */
    .bg-image-modal {
        background: url(img/m-mission-bg.png) no-repeat top center;
        background-size: cover;
    }

    #missionModal .modal-header,
    #missionModal .modal-body {
        padding: 40px 24px 0;
        overflow-y: auto;
    }

    #missionModal .modal-header {
        padding: 60px 24px 0;
        overflow-y: auto;         
    }

    #missionModal .modal-header .p3-logo {
        width: 74px;
        height: 56px;
        padding: 0
    }

    #missionModal .modal-body .row {
        padding: 0;
    }

    #missionModal .modal-body .row .col-md-6 {
        padding: 0;
    }

    #missionModal .modal-body h3 {
        font-size: 48px;
    }

    #missionModal .modal-body h3.title {
        font-size: clamp(30px, 8vw, 48px);
    }

    .mission-container {
        padding: 0;
    }

    .progress {
        width: 100%;
    }

    .progress-text {
        font-size: clamp(22px, 6vw, 28px);
    }

    .prize-section img {
        width: 100%;
    }

    .btn-share {
        margin: 24px 0 48px;
    }

    .accordion-item {
        width: auto;
        margin: 0 0 1.5rem;
    }

    .accordion-header {
        border: none;
    }

    .custom-header {
        background: url(img/accordion-bg.png) no-repeat;
        background-size: cover;
    }

    .progress-sec {
        padding-right: 5px;
    }

    .accordion-scroll {
        height: auto;
        padding-right: 0;
    }

    .task-card p,
    .submission p {
        font-size: 14px;
    }

    .task-card p {
        line-height: 1.1;
    }

    .task-card h6 {
        font-size: clamp(22px, 7vw, 30px);
        padding: 0;
    }

    .bonus-status {
        padding: 12px 20px;
        font-size: clamp(12px, 4vw, 20px);
        gap: 5px;
    }

    .file-upload {
        padding: 2rem 1.5rem;
    }

    #toaster {
        bottom: 0;
        width: 100%;
        height: auto;
        line-height: 1.3;
        gap: 10px;
    }

    #toaster a {
        display: block;
        margin-top: 8px;
    }

    .download-modal h3 {
        font-size: 24px;
        padding: 0 0.5rem;
    }

    #prizeDownloadModal .modal-body {
        padding: 2rem 0.5rem;
    }
    .img-container img {
        height: 60vh;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .second-section .img-content img {
        width: 450px;
        height: 295px;
    }

    .btn-mission .btn-text {
        font-size: 28px;
    }

    #missionModal .modal-body {
        padding: 20px;
        overflow-y: auto;
    }

    #missionModal .modal-header {
        padding: 0 80px;
    }

    .introduction .title h3 {
        font-size: clamp(42px, 5vw, 3rem);
    }

    #missionModal .modal-header {
        padding: 60px 24px 0;
    }

    .img-container {
        margin-top: 30px;
    }
}

@media (min-width: 768px) and (max-width: 991.9px) {
    .background-box-img {
        width: auto;
        height: auto;
    }

    .introduction {
        width: auto;
        padding: 0 88px;
    }

    .img-content {
        text-align: center;
        width: 100%;
    }

    .img-content p {
        width: auto !important;
    }

    #missionModal .modal-body .row {
        padding: 0;
    }

    .mission-container {
        padding: 0 88px 50px;
    }

    .accordion-scroll {
        height: auto;
    }

    .start-now-section {
        top: 50%;
        left: 30%;
        transform: none;
    }

    .video-container img.mobile-bg {
        width: 100%;
        position: absolute;
        top: 5%;
        right: 5%;
    }

    .img-container {
        justify-content: center;
        transform: translateX(-5%);
    }
    
    .img-container img {
        height: 60vh;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .introduction {
        width: 1000px;
        align-items: center;
    }

    .second-section .text-content {
        padding: 57px 25px 24px 0;
    }

    .second-section .img-content p {
        width: auto;
    }

    .accordion-scroll {
        height: 1000px;
    }

    .mission-row {
        padding: 2rem 0 0;
    }
    
    .img-container img {
        height: 80vh;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .start-now-section img { width: 195px; }
  .background-box-img, .introduction { width: 1050px; }
  .background-box-img { height: 550px; }
  .second-section .img-content img { width: 450px; height: 275px; }
  .img-tint img { width: 440px; }

  .introduction .title h3, #missionModal .modal-body h3 { font-size: 50px; }
  .text-content h3,
  #formModal .modal-body h3 { font-size: 30px; }
  .form-group label,
  .form-group input,
  .bonus-status,
  .prize-section p,
  .btn-upload,
  .btn-download { font-size: 20px; }
  .text-content p,
  .task-card p,
  .submission p,
  .file-upload h6,
  .download-modal p { font-size: 14px; }
  .file-upload p { font-size: 12px; }
  .task-card h6, .download-modal h3 { font-size: 28px; }
  .btn-mission .btn-text { width: 280px; font-size: 25px; }

  .second-section .text-content { padding: 47px 0 24px; }
  .text-content p { padding: 0 10px; }
  .img-content { padding-top: 20px; }
  .accordion-scroll { height: 430px; }
  .accordion-item { margin: 0 0.3rem 1rem; }
  .prize-section { padding: 0; }
  .mission-row { padding: 1rem 0 0 4rem; }
  .img-tint { margin-top: 20px; }
  #missionModal .modal-header .p3-logo { width: 120px; height: 97px; }
  #prizeDownloadModal .modal-dialog { max-width: 500px; }
  .download-modal.modal-content { padding: 18px; }
  #prizeDownloadModal .modal-body { padding: 1rem 30px; }
  .btn-download { padding: 8px 24px; margin-top: 2rem; }

  .accordion-header { border-top: solid 2px red; }
}

@media (min-width: 1920px) {
  .background-box-img { width: 1600px; }
  .img-tint img { width: 600px; }
  .accordion-scroll { height: 650px; }
  .mission-row { padding: 3rem 0 0 4rem; max-width: 1500px; }
  .mission-container { padding-right: 6rem; }
  .progress { width: 100%; margin-bottom: 48px; }
}

@media (max-height: 800px) {
    .start-now-section h3 {
        margin-bottom: 0;
    }

    .image-mask-container {
        width: 50%;
    }
}