
@media only screen and (max-width:1199px){
    .registration-detail-image>div>img{
        width: 100%;
    }
    .detail-of-red>ul, .detail-of-blue>ul {
        padding: 10px 2rem 10px 3rem;
        font-size: 15px;
    }
}
@media only screen and (max-width:1063px){
    .compose>h3 {
        font-size: 2.5rem;
    }
    .register-and-enter {
        font-size: 18px;
    }
    .winner-prize {
        padding: 10px 30px 10px 25px;
        font-size: 18px;
    }
    .head-text{
        font-size: 12px;
    }
    .custom-school-id {
        font-size: 10px;
    }
}

@media only screen and (max-width:991px){
    .ctrl-mob-detail-block{
        display: contents;
    }
    .ctrl-mob-detail-block>.detail-block{
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .six-image-note{
        padding-top: 1.5rem;
    }
    .detail-of-red>ul, .detail-of-blue>ul {
        padding: 10px 2rem 10px 3rem;
        font-size: 18px;
    }
    .head-text>span{
        padding-left: 0rem;
    }
    .icon-button {
        padding-right: 0px;
    }
    
}

@media only screen and (max-width:768px){
    .snap-style {
        width: 70%;
        left: 15%;
        right: 15%;
    }
    .upload-instruction p {
        line-height: 55px;
        text-indent: unset;
        font-size: 50px;
    }
    .upload-instruction {
        padding: 1rem 0 1rem 0;
    }
    .upload-instruction svg, rect {
        width: 250px;
    }
    .head-text{
        width: 35%;
        font-size: 10px;
    }
    .head-text>ul {
        padding-left: 1rem;
    }
    .search-form {
        margin-right: 0rem;
    }
    .icon-button {
        padding-right: 15px;
    }
    .custom-school-id {
        font-size: 12px;
    }
    .pincode {
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 767px){
        .head-text {
            width: 25%;
            font-size: 9px;
        }
        .search, .contact-menu, .menu-title{
            display: none !important;
        }
        .icon-button {
            padding-right: 0px;
        }
        .icon-button>nav{
            padding-right: 0;
        }
        .detail-of-red>ul, .detail-of-blue>ul {
            padding: 10px 2rem 10px 3rem;
            font-size: 17px;
        }
}

@media only screen and (max-width:575px){
    
    .snap-style {
        width: 100%;
        left: 0;
        right: 0;
    }
    .compose>p {
        font-size: 20px;
        padding: 0px 0px 30px 0px;
    }
    .compose>h3 {
        font-size: 2rem;
        bottom: 0px;
        padding-bottom: 8px;
    }
    .ctrl-mob-detail-block{
        display: unset;
    }
    .ctrl-mob-detail-block>.detail-block{
        width: 100%;
        padding: 0;
    }
    .six-images{
        display: contents;
    }
    .describe-area {
        text-align: unset;
    }
    .six-images>div{
        margin: 0 10px 0 15px;
        width: 40%;
    }
    .submit-btn {
        text-align: unset;
    }
    .snap-style {
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .register-and-enter {
        display: flex;
        padding-left: 15px;
        padding-right: 15px;
    }
    .register-and-enter>a {
        margin-left: 25px;
    }
    .winner-prize {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 18px;
    }
    .upload-instruction svg, rect{
        width: 280px;
    }
    .custom-school-id {
        /* width: 160px; */
        font-size: 12px;
        border: 2px solid #f2f2f2;
    }
    .line-brk{
        display: none;
    }
    .detail-of-red>ul, .detail-of-blue>ul {
        font-size: 17px;
    }
    .head-text{
        font-size: 9px;
    }
    .head-text{
        border-bottom: 1px solid #e2e2e2;
        width: 100%;
        font-size: 11px;
    }
    .detail-btn{
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    .search-btn, .enquire-btn {
        padding: 0px 10px 4px 10px;
    }
      .the-circle {
        font-size: 30px;
    }
    .the-circle>span {
        top: 30px;
    }
    .desk-display{
        display: none;
    }
    .mob-display{
        display: block;
    }
}

@media only screen and (max-width: 540px){
    .detail-of-red>ul, .detail-of-blue>ul {
        font-size: 14px;
        padding: 1rem 2rem 2rem 2rem;
    }
    .school-id-note{
        display: none !important;
    }
    .mob-note{
        display: flex;
    }
    .form-bottom-note {
        display: flex;
        justify-content: unset;
    }
    .mob-note>p{
        font-size: 13px;
        /* padding-bottom: 2rem; */
        margin: 0;
    }
    .equl-width-for-school-id {
        /* width: 50.33%; */
        width:100%;
    }
}

@media only screen and (max-width:450px){
    .upload-school-id{
        display: block;
        padding: 15px 0px 0px 0px;
        justify-content: space-between;
        width: 100%;
    }
    .register-and-enter {
        padding: 8px 15px 8px 15px;
    }
    .winner-prize {
        padding: 7px 15px 7px 15px;
    }
    .winner-prize>p{
        margin-left: 0;
    }
    .detail-of-red>ul, .detail-of-blue>ul {
        font-size: 13px;
    }
    
}
@media only screen and (max-width:425px){
    .registration-detail-image{
        display: block;
    }
    .upload-instruction p {
        line-height: 45px;
        font-size: 45px;
        text-indent: unset;
    }
    .six-images{
        display: contents;
    }
    .compose>h3 {
        font-size: 2rem;
        bottom: 0px;
        padding: 0px;
    }
    .compose>p {
        padding: 0px 0px 20px 0px;
        font-size: 18px;
    }
    .detail-of-red{
        margin-right: 0 !important;
    }
    .detail-of-red, .white-img{
        padding-right: 1rem;
    }
     .detail-of-blue>ul {
        padding: 3rem 5rem 10px 5.5rem;
        font-size: 20px;
    }
    .detail-of-red>ul {
        padding: 3rem 5rem 10px 5.5rem;
        font-size: 20px;
    }
    .submit-btn {
        text-align: left;
    }
    .head-text>ul {
        padding-left: 2.5rem;
    }
    .upload-instruction svg, rect{
        width: 200px;
    }
    .trending-img-grid-heading>h2 {
        font-size: 2.8rem;
    }
    .yellow-img, .white-img{
        display: none;
    }
}

@media only screen and (max-width:375px){
    .school-id-note>p {
        font-size: 9px;
    }
    .trending-img-grid-heading>h2 {
        font-size: 2rem;
    }
    /* .custom-school-id {
        width: 132px;
    } */
    /* #school-id-label{
        width: 140px;
        margin-left: 10px;
    } */
    .detail-of-red>ul, .detail-of-blue>ul {
        padding: 2rem 4rem 10px 4rem;
        font-size: 18px;
    }
    .search-field{
        margin: 2px;
        padding: 0;
        width: 110px;
    }
    .the-circle {
        font-size: 24px;
    }
    .head-text>ul {
        padding-left: 0.5rem;
    }
   
}


@media only screen and (max-width:320px){
    .winner-prize {
        font-size: 16px;
    }
    .upload-instruction {
        padding: 1rem 0 1rem 0;
    }
    .upload-instruction p {
        line-height: 40px;
        font-size: 32px;
        text-indent: unset;
    }
    
    .detail-of-red>ul, .detail-of-blue>ul {
        padding: 1rem 3rem 10px 3rem;
        font-size: 18px;
    }
    .submit-btn {
        text-align: left;
        font-size: 14px;
    }
    .upload-school-id {
        display: inline-grid;
        padding: 15px 0px;
    }
    .school-id-note>p {
        font-size: 12px;
    }
    .describe-area>span>textarea{
        width: 300px;
    }
    .search-field {
        width: 75px;
    }
    .the-circle {
        font-size: 18px;
    }
    .submit-btn>button, .submit-btn>a {
        font-size: 14px;
    }
    .equl-width-for-school-id {
        width: 100%;
    }
    
}

@media only screen and (max-width:280px){
    .custom-school-id {
        font-size: 10px;
    }
    .detail-of-red>ul, .detail-of-blue>ul {
        padding: 1rem 3rem 10px 3rem;
        font-size: 16px;
    }
}
