@media  screen and (max-width: 1024px) {
    .bg-image-mob {
    background-image: url(../image/bg-med.jpg);
   background-size: cover;
}

.mid-section-btn {
    margin-top: 120px;
}
.icon{
    font-size:14px;
    
}

.icon-btn p{
        font-size: 10px;
    margin-top: 5px;
}

.mid-btn {
    width: 90px;
    height: 90px;
    position: relative;
    margin-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
}


}

 

@media  screen and (max-width: 768px) {
    .logo img {
    width: 220px;
    margin-top: 0;
}
  .mid-section-btn {
    margin-top: 60px;
}
  .mid-btn {
    width: 120px;
    height: 120px;
    position: relative;
    margin-bottom: 15px;
}
.topic
    { color: #ee1731;
    margin-top: 60px;
    font-size: 30px;
}
.mid-btn img.ar {
    width: 55px;
}
   .gold-marie {
    margin-top: 60px;
}
   .gold-marie img {
    width: 250px;
}
    .icon-btn p {
        font-size: 10px;
        font-weight: 700;
    }
    .mid-btn img {
    width: 35px;
    margin-top: 25px;
    height: auto;
}
    .logo {
        margin-top: 50px;
    }
    .gold-marie-section {
        margin-top: 35px;
    }
    
    .social-center-pop .mid-btn {
        width: 100px;
        height: 100px;
 margin-top: 15px;
        margin-bottom: 15px;
    }
    
   .social-center-pop .mid-btn img {
    width: 35px;
    margin-top: 16px;
    height: auto;
}
}

@media  screen and (max-width: 575px) {
    .result-scroll iframe {
        width: 250px;
        height: 150px;
    }
    .result-bg {
        background-image: url(../image/Web-bg-mob.jpg);
    }
    
/*    .gold-marie-section {*/
/*    margin-top: 25px;*/
/*}*/
/*.mid-section-btn {*/
/*    margin-top: 45px;*/
/*}*/
/*.mid-btn img {*/
/*    height: 28px;*/
/*    margin-top: 11px;*/
/*}*/
/*.mid-btn {*/
/*    width: 80px;*/
/*    height: 80px;*/
/*    margin-bottom: 5px;*/
/*}*/

.bg-image-mob {
    background-image: url(../image/bg.png);
    background-size: cover;
}
}




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

.topic {
    color: #ee1731;
    margin-top: 30px;
    font-size: 24px;
}

.gold-marie {
    margin-top: 10px;
}

.mid-section-btn {
    margin-top: 25px;
}

.icon-btn p {
    font-size: 8px;
    font-weight: 700;
}

.mid-section-btn .mid-btn img {
    width: 24px;
    margin-top: 20px;
    height: auto;
}

.mid-btn {
    width: 93px;
    height: 93px;
    position: relative;
    margin-bottom: 15px;
}


.mid-section-btn .mid-btn img.ar {
    width: 45px;
    margin-top: 20px;
    height: auto;
}





}


@media  screen and (max-width: 420px) {
.modal-content.social {
    width: 86%;
    padding: 10px;
}

.social .mid-btn {
    width: 110px;
    height: 110px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.social .mid-btn img {
    width: 35px;
       margin-top: 22px;
}


}

@media  screen and (max-width: 350px) {
.logo img {
    width: 190px;
    margin-top: 0;
}
.mid-section-btn {
    margin-top: 25px;
}
.logo img {
    width: 170px;
    margin-top: 0;
}


}

@media (max-width: 375px) {
    .social .icon-btn p {
    font-size: 8px;
    }
   .social .mid-btn img {
    width: 35px;
   
}
}
@media (max-width: 320px) {
    .mid-section-btn {
        margin-top: 55px;
    }
    .mid-btn {
        width: 85px;
        height: 85px;
        position: relative;
        margin-bottom: 5px;
    }
    .gold-marie-section {
        margin-top: 25px;
    }
    .mid-btn img {
         
        margin-top: 14px;
    }
    .result-scroll {
        overflow: scroll;
        height: 350px;
    }
}