@media only screen and (max-width: 1024px){
    .usecase .details { width: 96%; margin: 0 auto; }
    .tnc .wrap { padding: 3px 0; }
}

@media only screen and (max-width: 979px) {
    header nav {font-size: 14px; width: calc(100% - 94px - 8px);}
    header .logo {width: 94px;}
    .hBanner .txt h1 {font-size: 44px;}
    .hBanner .txt h2 {font-size: 26px;}
    section.intro .logo img, section.benefits h2 img {width: 94px;}
    section.intro .desc {font-size: 28px;}
    section.benefits h2 {font-size: 40px;}
    .benefitsListWrap .benefitsW h3 {font-size: 32px;}
    .benefitsListWrap .benefitsW .list .box .txt {font-size: 18px;}
    .auditions h2, .threeSteps h2, .packages h2 {font-size: 40px;}
    .threeSteps .stepsWrap .step .head strong {font-size: 24px;}
    .threeSteps .stepsWrap .step .head {font-size: 20px;}
    .threeSteps .stepsWrap .step p {font-size: 18px;}
    .packagesWrap .box .namePrice .name {font-size: 14px; height: 32px;}
    .packagesWrap .box .namePrice .price {min-height: 128px;}
    .packagesWrap .box .namePrice .price .big {font-size: 16px;}
    .packagesWrap .box .namePrice .price .sm {font-size: 12px;}
    .packagesWrap .box .namePrice .price .linthr {font-size: 14px;}
    .packagesWrap .box .register {font-size: 18px;}
    .packages .note {font-size: 12px;}
    footer {font-size: 11px;}
    .benefitsListWrap {width: 96%; max-width: 600px;}
    .benefitsListWrap .benefitsW .list .box .txt {width: calc(100% - 30% - 8px);}
    .benefitsListWrap .benefitsW .list .box .pic {width: 30%;}
    .contact h3 {font-size: 28px;}
    .contact p {font-size: 14px; line-height: 20px;}
    .contactForm .formW .field label {font-size: 13px; line-height: 18px;}
    .contact .Phone {font-size: 32px;}
    .contactDetails .neeHelp h4 {font-size: 20px;}
    .contactDetails .neeHelp a.lnk {font-size: 15px; padding-right: 20px;}
    .contactDetails .neeHelp a.lnk::before {right: 8px;}
    .contactForm .formW .note {font-size: 11px;}
    .contactForm .formW .iagree input[type="checkbox"] ~ label {font-size: 12px;}
    .contactForm .formW .submit .btn {font-size: 12px;}
    .tnc p {font-size: 14px; line-height: 20px;}
    .hBanner .txt h1 br {display: none;}
    .tnc .head {font-size: 24px;}
    .bylink {margin-bottom: 20px;}
    .bylink {font-size: 14px;}
    .bylink a {font-size: 16px;}
    .packages {font-size: 16px;}
    .packagesWrap .box:hover .namePrice .name, .packagesWrap .box .namePrice .name {padding: 0; font-size: 12px;}
    .about p {font-size: 16px; line-height: 24px; margin-bottom: 20px;}
    .telNo span {font-size: 14px; line-height: 20px;}
    .useCaseReadMore {font-size: 14px;}
    .tnc h3 {font-size: 18px;}
    .tnc .note {font-size: 14px;}
    .usecase h1 {font-size: 20px;}
    .usecase h2 {font-size: 18px;}
    .usecase .details { width: 95%; margin: 0 auto; }
    .tnc .wrap { padding: 2px 0; }

    /*--------------contuct-us code --------------*/
    .contactDetails h3, .contactDetails .contDetHead {
        font-size: 22px;
    }
    .contUscont6 .contUSHead {
        font-size: 20px;
        font-weight: 600;
        line-height: 30px;
        padding-top: 30px;
    }
    .contUscont6 .contUSText {
        font-size: 18px;
        line-height: 28px;
    }
    .contUscont4 .contUSHead {
        font-size: 20px;
    }
    .contUscont4 .contUSText {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .hBanner .txt h1 {font-size: 32px;}
    .hBanner .txt h2 {font-size: 22px;}
    .hBanner::after {height: 24%;}
    .hBanner::before {height: 70%;}
    .hBanner {background-position: center;}
    .packagesWrap .box {width: calc(100% / 2 - 20px - 4px); margin: 0 10px; margin-bottom: 20px; }
    .packagesWrap .box .namePrice .price {min-height: 104px;}
    .auditions h2, .threeSteps h2, .packages h2, section.benefits h2 {font-size: 36px;}
    section.benefits h2 img {width: 80px;}
    .contact .head {font-size: 32px;}
    .contact h3 {font-size: 24px;}
    .contactForm, .contactDetails {width: 100%;}

    .benefitsListWrap .benefitsW .cta {font-size: 13px;}
    .ftTnc ul li {margin-bottom: 12px; margin-top: 12px;}
    .about p {font-size: 14px; line-height: 20px; margin-bottom: 12px;}
    .useCaseReadMore {font-size: 12px;}
    .usecase h1 {font-size: 18px;}
    .usecase h2 {font-size: 16px;}
    .usecase .details { width: 100%; margin: 0 auto; }
    .svasuKS{text-align: center;}
}
@media only screen and (max-width: 579px) {
    /*.benefitsListWrap .benefitsW .list .box .txt {font-size: 15px;}*/
    .benefitsListWrap .benefitsW h3 {font-size: 26px;}
    .auditions h2, .threeSteps h2, .packages h2, section.benefits h2 {font-size: 32px;}
    .runningTxts {font-size: 24px;}
    .eocjs-newsticker .eocjs-newsticker-container {height: 32px;}
    .eocjs-newsticker .eocjs-newsticker-one, .eocjs-newsticker .eocjs-newsticker-two {line-height: 32px;}
    .threeSteps .stepsWrap {max-width: 100%;}
    .packagesWrap .box .namePrice .name {height: 32px;}
    /*header {margin: 20px 0;}*/
    .hBanner::before {height: 40%;}
    .hBanner::after {height: 15%;}
    .benefitsListWrap .benefitsW .list .box .pic {opacity: .4;}
    .contact .head {padding: 18px 0;}
    .contactForm, .contactDetails {padding: 20px;}
    .contact h3, .contact p, .contactForm .formW .field, .contactForm .formW .note, .contactForm .formW .iagree {margin-bottom: 20px;}
    .contactForm .formW .field input[type="text"], .contactForm .formW .field select {height: 32px;}
    footer .socialMedia {width: 100%; margin-bottom: 20px; text-align: center; padding: 20px 0;}
    footer .socialMedia ul {float: none; }
    footer .spCertificate{text-align: center;}
    header nav {position: relative;}
    header nav .hamburger {display: inline-block;}
    header nav ul {display: none;}
    header nav ul {position: absolute; top: calc(100% + 4px); right: -10px; width: 164px; background: #fff; padding: 12px 0; border-radius: 8px;}
    header nav ul::before {content: ''; display: block; width: 0; position: absolute; bottom: 100%; right: 17px;
      height: 0; 
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;

      border-bottom: 5px solid #fff;
    }
    header nav ul li {display: block; border-bottom: 1px solid #f3f3f3;}
    header nav ul li:last-child {border-bottom: 0 solid #f3f3f3;}
    header nav ul li a {color: #000; display: block; padding: 4px 12px;}
    header.blk nav ul {box-shadow: 0 0 12px rgba(0,0,0,.2);}

    /*--------------contuct-us code --------------*/
    .contactForm, .contactDetails {
        padding: 20px;
    }
    .contUscont6,
    .contUscont4 {
        width: 100%;
        display: block;
        padding: 0;
    }
  
}
@media only screen and (max-width: 479px) {
    .hBanner .txt h1 {font-size: 36px;}
    .hBanner .txt h2 {font-size: 24px;}
    .hBanner .txt h2 br {display: none;}
    section.intro .desc {font-size: 24px;}
    section.intro .logo img, section.benefits h2 img {width: 80px;}
    .auditions h2, .threeSteps h2, .packages h2, section.benefits h2 {font-size: 28px;}
    section.intro .desc {font-size: 22px;}
    .benefitsListWrap .benefitsW h3 {font-size: 36px;}
    .benefitsListWrap .benefitsW .list .box .txt {width: 100%; margin-bottom: 12px;}
    .benefitsListWrap .benefitsW .list .box {padding: 12px 0 0;}
    .benefitsListWrap .benefitsW .list .box .pic {width: 100%;}
    .spCertificate{margin-left:49px;}
    
    .benefitsListWrap .benefitsW .list .box .txt {text-align: center;}

    .usecase .details{ width: 100%; margin: 0 auto;}
    .tnc .usecase {padding: 0px;}
    .spCertificate { text-align: center; margin: 0 auto; }
}
@media only screen and (max-width: 379px) {
    .hBanner .txt h1 {font-size: 24px;}
    .hBanner .txt h2 {font-size: 15px;}
}