/* =======================
  Common Media Css Starts
======================= */

@media (max-width: 991px) {}

@media (max-width: 767px) {}

/* ====================
  Common Media Css Ends
=================== */

/* ==========================
   Extra Small Device Starts
=========================== */

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

    /* Banner Section Starts  */
    .banner .banner-left h1 {
        font-size: 30px;
    }

    .banner .banner-left {
        margin-top: 60px;
    }

    .banner .banner-left h2 span {
        width: 38%;
    }

    .banner .banner-left h2 img {
        padding-right: 00px;
    }

    .banner .banner-left p {
        font-size: 16px;
        padding: 0 0px;
    }

    .banner .banner-left h4 {
        font-size: 20px;
    }

    .banner .banner-left a {
        font-size: 30px;
    }

    /* Banner Section Ends */

    /* Why Join Section Starts */

    .why-join {
        padding-top: 80px;
    }

    .why-join h2 {
        font-size: 26px;
    }

    .why-join h2 span {
        width: 40%;
    }

    .why-join h2 span img {
        padding-right: 20px;
        padding-left: 10px;
    }

    .why-join .why-join-left {
        padding-bottom: 40px;
    }

    .why-join .why-join-left ul li {
        padding-left: 25px !important;
    }

    .why-join .why-join-left ul li p {
        font-size: 20px;
    }

    .why-join .why-join-right p {
        font-size: 15px;
        padding: 0 5px;
    }

    .why-join .why-join-right a {
        font-size: 30px;
    }

    /* Why Join Section Ends */

    /* What Offer Section Starts */

    .what-offer h2 {
        font-size: 20px;
    }

    .what-offer h2 span {
        width: 30%;
    }

    .what-offer h2 span img {
        padding-left: 5px;
        padding-right: 5px;
    }

    .what-offer .what-offer-left ul li {
        padding-left: 25px !important;
    }

    .what-offer .what-offer-left ul li p {
        font-size: 20px;
    }

    .what-offer .what-offer-right h4 {
        font-size: 16px;
    }

    .what-offer .what-offer-right a {
        font-size: 30px;
    }

    /* What Offer Section Ends */

    /* What Makes Section Starts  */

    .what-makes h2 {
        font-size: 18px;
    }

    .what-makes h2 span {
        width: 25%;
    }

    .what-makes h2 span img {
        padding-left: 5px;
        padding-right: 5px;
    }

    .what-makes .what-makes-right {
        margin-top: 50px;
    }

    .what-makes .what-makes-left table th {
        font-size: 14px;
    }

    .what-makes .what-makes-right h4 {
        font-size: 16px;
    }

    .what-makes .what-makes-right a {
        font-size: 30px;
    }

    /* What Makes Section Ends */

    /* How Pay Section Starts */

    .how-pay .container {
        width: 320px;

    }

    .how-pay .how-pay-content::after {
        width: 80%;
        top: 50%;
        left: -93px;
        transform: translateX(0) translateY(-50%) rotate(90deg);
        -webkit-transform: translateX(0) translateY(-50%) rotate(90deg);
        -moz-transform: translateX(0) translateY(-50%) rotate(90deg);
        -ms-transform: translateX(0) translateY(-50%) rotate(90deg);
        -o-transform: translateX(0) translateY(-50%) rotate(90deg);
    }

    .how-pay .how-pay-content .how-pay-item {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
    }

    .how-pay .how-pay-content .how-pay-item:nth-child(2) .how-pay-image::after {
        right: 10px;
    }

    .how-pay .how-pay-content .how-pay-item:last-child {
        margin-bottom: 0;
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-image {
        width: 80px !important;
        text-align: left;
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-image img {
        width: 50px;
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-image::after {
        left: unset;
        bottom: unset;
        right: 30px;
        top: 50%;
        width: 15px;
        height: 50px;
        transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -webkit-transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -moz-transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -ms-transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -o-transform: translateX(0%) translateY(-50%) rotate(-90deg);
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-text {
        margin-top: 0px;
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-text p {
        font-size: 14px;
    }

    /* How Pay Section Ends */

    /* Select Seat Section Starts */
    .select-seat {
        padding-top: 80px;
    }

    .select-seat h6 {
        font-size: 14px;
    }

    .select-seat h2 {
        font-size: 19px;
    }

    .select-seat .you-selected-text h3 {
        font-size: 12px;
    }

    .select-seat .category-form .category-form-item {
        margin-top: 35px;
        padding-bottom: 5px;
    }

    .select-seat .category-form .category-form-item label {
        font-size: 18px;
    }

    .select-seat .category-form .category-form-submit button {
        display: block;
        width: 100%;
        margin-top: 30px;
    }

    .select-seat .category-list .claim-btn a {
        font-size: 30px;
    }

    .select-seat .category-list .category-list-heading h3 {
        font-size: 14px;
    }

    .select-seat .category-list .category-list-content .category-list-content-text.content-text-one {
        padding-left: 0;
    }

    .select-seat .category-list .category-list-content .category-list-content-text h3 {
        font-size: 16px;
    }

    .select-seat .category-list .category-list-content .category-list-content-text h4 {
        font-size: 14px;
    }

    .select-seat .category-list .category-list-content .category-list-content-text.content-text-two {
        padding-left: 15px;
        padding-right: 0;
    }

    .select-seat .category-list .category-list-content .category-list-content-text ul {
        grid-template-columns: repeat(1, 1fr);
    }

    .select-seat .category-list .category-list-content .category-list-content-text ul li {
        margin: 15px 0;
    }

    /* Select Seat Section Ends */


    /* Testimonials Section Starts */

    .testimonials h2 {
        font-size: 30px;
    }

    .testimonials .testimonials-left ul li {
        padding-left: 25px !important;
    }

    .testimonials .testimonials-left ul li p {
        font-size: 20px;
    }

    .testimonials .testimonials-right p {
        font-size: 16px;
    }

    .testimonials .testimonials-right h4 {
        font-size: 16px;
    }

    .testimonials .testimonials-right a {
        font-size: 30px;
    }

    /* Testimonials Section Ends */
}

/* ==========================
   Extra Small Device Ends
=========================== */

/* =====================
    Small Device Starts
==================== */

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

    /* Banner Section Starts  */
    .banner .banner-left h1 {
        font-size: 50px;
    }

    .banner .banner-left {
        margin-top: 60px;
    }

    .banner .banner-left h2 span {
        width: 26%;
    }

    .banner .banner-left h2 img {
        padding-right: 20px;
    }

    .banner .banner-left p {
        font-size: 20px;
        padding: 0 30px;
    }

    /* Banner Section Ends */

    /* Why Join Section Starts */
    .why-join h2 span {
        width: 40%;
    }

    .why-join h2 span img {
        padding-right: 20px;
        padding-left: 10px;
    }

    .why-join .why-join-left {
        padding-bottom: 40px;
    }

    /* Why Join Section Ends */

    /* What Offer Section Starts */

    .what-offer h2 {
        font-size: 35px;
    }

    .what-offer h2 span {
        width: 34%;
    }

    /* What Offer Section Ends */

    /* What Makes Section Starts  */

    .what-makes h2 {
        font-size: 30px;
    }

    .what-makes h2 span {
        width: 27%;
    }

    .what-makes .what-makes-right {
        margin-top: 50px;
    }

    /* What Makes Section Ends */

    /* How Pay Section Starts */

    .how-pay .how-pay-content::after {
        width: 60%;
        top: 50%;
        left: -90px;
        transform: translateX(0) translateY(-50%) rotate(90deg);
        -webkit-transform: translateX(0) translateY(-50%) rotate(90deg);
        -moz-transform: translateX(0) translateY(-50%) rotate(90deg);
        -ms-transform: translateX(0) translateY(-50%) rotate(90deg);
        -o-transform: translateX(0) translateY(-50%) rotate(90deg);
    }

    .how-pay .how-pay-content .how-pay-item {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
    }

    .how-pay .how-pay-content .how-pay-item:last-child {
        margin-bottom: 0;
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-image {
        width: 25%;
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-image::after {
        left: unset;
        bottom: unset;
        right: 30px;
        top: 50%;
        width: 15px;
        height: 50px;
        transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -webkit-transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -moz-transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -ms-transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -o-transform: translateX(0%) translateY(-50%) rotate(-90deg);
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-text {
        margin-top: 0px;
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-text p {
        font-size: 14px;
    }

    /* How Pay Section Ends */

    /* Select Seat Section Starts */

    .select-seat h6 {
        font-size: 16px;
    }

    .select-seat h2 {
        font-size: 26px;
    }

    .select-seat .you-selected-text h3 {
        font-size: 14px;
    }

    .select-seat .category-form .category-form-item {
        margin-top: 40px;
    }

    .select-seat .category-form .category-form-submit button {
        display: block;
        width: 100%;
        margin-top: 30px;
    }

    .select-seat .category-list .category-list-heading h3 {
        font-size: 16px;
    }

    .select-seat .category-list .category-list-content .category-list-content-text h3 {
        font-size: 20px;
    }

    .select-seat .category-list .category-list-content .category-list-content-text h4 {
        font-size: 18px;
    }

    .select-seat .category-list .category-list-content .category-list-content-text.content-text-one {
        padding-left: 0;
    }

    .select-seat .category-list .category-list-content .category-list-content-text.content-text-two {
        padding-left: 40px;
        padding-right: 5px;
    }

    .select-seat .category-list .category-list-content .category-list-content-text ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .select-seat .category-list .category-list-content .category-list-content-text ul li {
        margin: 15px 0;
    }



    /* Select Seat Section Ends */
}

/* ====================
    Small Device Ends
=================== */

/* =====================
    Medium Device Starts
==================== */

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

    /* Banner Section Starts  */
    .banner .banner-left {
        margin-top: 60px;
    }

    .banner .banner-left h2 span {
        width: 20%;
    }

    .banner .banner-left h2 img {
        padding-right: 20px;
    }

    .banner .banner-left p {
        font-size: 26px;
        padding: 0 30px;
    }

    /* Banner Section Ends */

    /* Why Join Section Starts */
    .why-join h2 span {
        width: 29%;
    }

    .why-join h2 span img {
        padding-right: 20px;
        padding-left: 10px;
    }

    .why-join .why-join-left {
        padding-bottom: 40px;
    }

    /* Why Join Section Ends */

    /* What Offer Section Starts */

    .what-offer h2 span {
        width: 30%;
    }

    /* What Offer Section Ends */

    /* What Makes Section Starts  */

    .what-makes h2 {
        font-size: 40px;
    }

    .what-makes h2 span {
        width: 25%;
    }

    .what-makes .what-makes-right {
        margin-top: 50px;
    }

    /* What Makes Section Ends */

    /* How Pay Section Starts */

    .how-pay .how-pay-content::after {
        width: 50%;
        top: 50%;
        left: -105px;
        transform: translateX(0) translateY(-50%) rotate(90deg);
        -webkit-transform: translateX(0) translateY(-50%) rotate(90deg);
        -moz-transform: translateX(0) translateY(-50%) rotate(90deg);
        -ms-transform: translateX(0) translateY(-50%) rotate(90deg);
        -o-transform: translateX(0) translateY(-50%) rotate(90deg);
    }

    .how-pay .how-pay-content .how-pay-item {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
    }

    .how-pay .how-pay-content .how-pay-item:last-child {
        margin-bottom: 0;
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-image {
        width: 20%;
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-image::after {
        left: unset;
        bottom: unset;
        right: 30px;
        top: 50%;
        width: 15px;
        height: 50px;
        transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -webkit-transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -moz-transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -ms-transform: translateX(0%) translateY(-50%) rotate(-90deg);
        -o-transform: translateX(0%) translateY(-50%) rotate(-90deg);
    }

    .how-pay .how-pay-content .how-pay-item .how-pay-text {
        margin-top: 0px;
    }

    /* How Pay Section Ends */

    /* Select Seat Section Starts */

    .select-seat h6 {
        font-size: 20px;
    }

    .select-seat h2 {
        font-size: 32px;
    }

    .select-seat .category-form .category-form-item {
        margin-top: 35px;
        padding: 5px;
    }

    .select-seat .category-form .category-form-submit button {
        display: block;
        width: 100%;
        margin-top: 30px;
    }

    .select-seat .category-list .category-list-content .category-list-content-text ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .select-seat .category-list .category-list-content .category-list-content-text ul li {
        margin: 20px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Select Seat Section Ends */
}

/* ====================
    Medium Device Ends
=================== */

/* =====================
    Large Device Starts
==================== */

@media (min-width: 992px) and (max-width: 1199px) {

    /* Banner Section Starts  */
    .banner .banner-left h1 {
        font-size: 60px;
    }

    .banner .banner-left h2 img {
        padding-left: 10px;
        padding-right: 30px;
    }

    .banner .banner-left p {
        font-size: 24px;
        padding: 0 60px;
    }

    /* Banner Section Ends */

    /* Why Join Section Starts  */

    .why-join h2 span {
        width: 25%;
    }

    /* Why Join Section Ends */
    /* What Offer Section Starts */

    .what-offer h2 span {
        width: 20%;
    }

    /* What Offer Section Ends */

    /* What Makes Section Starts */

    .what-makes h2 span {
        width: 22%;
    }

    /* What Makes Section Ends */
}

/* ====================
    Large Device Ends
=================== */

/* ==========================
    Extra Large Device Starts
========================= */

@media (min-width: 1200px) and (max-width: 1399px) {

    /*  Banner Section Starts  */

    .banner .banner-left h2 img {
        padding-left: 10px;
        padding-right: 20px;
    }

    /*  Banner Section Ends */

    /* Why Join Section Starts */

    .why-join h2 span img {
        padding-right: 20px;
        padding-left: 10px;
    }

    /* Why Join Section Ends */

    /* How Pay Section Starts */

    .how-pay .how-pay-content::after {
        top: 72px;
    }

    /* How Pay Section Ends */
}

/* =========================
    Extra Large Device Ends
========================= */