responsive.css

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

    .header-section{
        background: url("image/head-img.JPG");
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100% 800px;
        height: 800px;
        width: 100%;
        position: relative;
    }
    .logo-div{
        background-color: #ffba00;
        color: #fff;
        margin-top: 15px;
        transition: 0.5s;
        font-size: 2.2rem;
        margin-left: -140px;
        padding-left: 140px;
    }
    .logo-div h1{
        font-size: 2rem;
    }
    .logo-div:hover{
        text-decoration: none;
        color: #fff;
        
    }
    .correc{
        color: white;
        font-size: 1.6rem;
        text-transform: capitalize;
        transition: 0.5s;
        border-radius: 4px;
        margin: 0px 10px 0px 20px;
    }
    .correc:hover{
        color: #ffba00;
        background-color: #1d1d1d;
    }

   
    /* currection */



    .mid{
        background-color: #ffba00;
        position: absolute;
        top: 50%;
        width: 100%;
        height: 180px;
    }
    .top{
        font-size: 7rem;
        text-transform: uppercase;
        font-weight: bolder;
        color: white;
        padding-bottom: -50px;
    }
    .btm{
        font-size: 6rem;
        color: white;
        text-transform: uppercase;
        letter-spacing: 20px;
        margin-top: -40px;
        font-weight: initial;
        font-family: 'Montserrat', sans-serif;
    }
    .position-mid p{
        position: absolute;
        top: 72%;
        left: 58%;
        font-size: 2rem;
        text-align: center;
    }
    .button-mor{
        background-color: #ffba00;
        height: 70px;
        width: 300px;
        border: 4px solid white;
        color: white;
        text-transform: uppercase;
        font-weight: 600;
        transition: 0.5s;
    }
    .button-mor:hover{
        background-color: #fd9002;
    }


    .half-part{
      margin: 80px 0px;
    }
    .headding{
        color: #ffba00;
        font-size:2rem;
        text-align: left;
    }
    .primary{
        background-color: #ffba00;  
        padding: 10px 20px;
        text-transform: uppercase;
        font-weight: bold;
        margin: 0px 30px;
        border: none;
    }
    .pp{
        display: flex;
        justify-content: center;
    }

    .only-img{
        background-image: url("image/rep.PNG");
        background-repeat: no-repeat;
        background-size: 100% 900px;
        width: 100%;
        height: 900px;
        position: relative;
    }
    
    .logo-mid{
        color: #ffba00;
        font-size: 1.8rem;
        text-align: center;
        padding-top: 40px;
        font-weight: 700;
    }
    .box{
        position: absolute;
        left: 21%;
        height: 120px;
        width: 80%;
        border: 2px solid white;
        padding: 10px;
        margin-top: 20px;
    }
    .box-para{
        color: #ffba00;
        text-align:center;
        margin-right: 270px;
    
    }
    .price{
        background-color: #ffba00;
        position: absolute;
        top: 35%;
        left: 39%;
        width: 823px;
    }
    .front{
        position: absolute;
        top: 33%;
        left: 85%;
    }
    .doler{
    float: right;
    }
    .doler li{
        list-style-type: none;
        color: ivory;
        font-size: 2rem;
        font-weight: bold;
        padding: 20px;
    }
   

   
    .about-head p{
        color: white;
        text-align: center;
    }
    .link{
        text-align: center;
    }
    .link a{
        color: white;
        text-decoration: none;
        margin-left: 20px;
        text-transform: capitalize;
        padding: 5px 8px;
        transition: 0.5s;
        border-radius: 2px;
    }
    .link a:hover{
        background-color: gray;
        text-decoration: none;
        color: black;
    }


    .about-img{
        background-image: url("image/4th.JPG");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 900px;
        height: 900px;
        width: 100%;
        position: relative;
    }
    .bahir{
        color: white;
        text-align: right;
        padding-top: 80px;
        text-transform: uppercase;
        font-size: 2.2rem;
    }
    .vitor{
        background-color: #ffba00;
        position: absolute;
        top: 20%;
        left: 60%;
        height: 460px;
        width: 400px;
        
    }
    .v{
        color: white;
        padding: 10px 30px;
        text-transform: uppercase;
        margin-top: 30px;
        font-size: 2.5rem;
    }
    .i{
        padding: 10px 30px;
        color: white;
        font-size: 2.2rem;
    }
    .t{
        color: white;
        font-size: 2.2rem;
       margin-right: auto;
        display: flex;
        justify-content: flex-end;
        margin-right: 55px;
    }
    .apply{
        color: white;
        background-color: #ffba00;
        border: none;
        font-size: 2.2rem;
        text-transform: uppercase;
        position: absolute;
        top: 75%;
        left: 60%;
        width: 400px;
        height: 100px;
    }


    .galery-part{
        background-color: #242524;
        height: 150px;
        width: 100%;
    }
    .div{
        background-color: #ffba00;
        height: 150px;
        width: 150px;
        margin: 0 auto;
        margin-left: 30%;
        display: inline-block;
    }
    .galery{
     text-align: center;
     color: #ffba00;
     text-transform: uppercase;
    padding-top: 45px;
    margin-right: 450px;
    }

    .round{
        background-color: #242524;
        height: 400px;
    }
    .caro{
        height: 700px;
    }
    .back-img:first-child{
        width: 600px;
    }
    .back-img:last-child{
        margin-right: 0px;
    }
    
    .semi{
        margin-top: 0px;
        padding-bottom: 20px;
    }
    .semi h1{
        color: #ffba00;
        text-align: left;
        padding-top: 50px;
    }
    .semi p{
        color: white;
        margin-top: 20px;
    }
    .semi h5{
        color: white;
        text-align: center;
        padding: 20px 0px 0px 0px;
    }
    .semi h5:first-child{
        padding-top: 70px;
    }
    .info{
        display: flex;
        justify-content: center;
    }
    .text{
        background-color: white;
        padding: 5px;
        color: rgb(70, 70, 70);
        margin: 0px 10px;
        transition: 0.5s;
        border-radius: 50%;
        font-size: 2rem;
    }
    .text:hover{
        background-color:#ffba00;
        color: #242424;
        transform: rotate(360deg);
    }
    .pizza-link{
        color: #ffba00;
        text-transform: uppercase;
        text-align: center;
        font-size: 1.5rem;
        display: block;
        text-decoration: none;
    }
    #home{
        color: lightseagreen;
        text-decoration: none;
    }
  
}

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

    .price{
        background-color: #ffba00;
        position: absolute;
        top: 35%;
        left: 35.7%;
        width: 823px;
    }
}

@media screen and (max-width:768px){
    .price{
        background-color: #ffba00;
        position: absolute;
        top: 35%;
        left: 35.7%;
        width: 463px;
    }
}
@media screen and (max-width:1024px){
    .price{
        background-color: #ffba00;
        position: absolute;
        top: 35%;
        left: 35.7%;
        width: 658px;
    }
}

@media screen and (max-width:640px){
    .semi{
        margin-top: 0px;    
    }
}