*{
  max-width:100%; 
  margin:0;
  padding:0;
  font-family:"VAGRounded Std", Sans-serif;
}

header{
    position:fixed;
    top:0;
    right:0;
    left:0;
    z-index:1;
    background-color:rgb(217, 20, 20) ;
    border-bottom:3px solid rgb(252, 184, 84);
    padding:3.125rem;
}

@media  (max-width: 500px) {
    header{
    padding:48px;
    }
}

.container{
 position: relative;
 max-width:100%;
 margin:0;
 box-sizing:border-box;
}

.logo{
    position:absolute;
    top:20px;
    left:60px;  
}
@media (max-width:1023px) {
    .logo{
     position:absolute;
     top:20px;
     left:50px;
    }
}

@media (max-width:500px) {
    .logo{
     width:150px;
     top:20px;
     left:30px;
    }
}
.nav-bar{
    position:absolute;
    top:42px;
    left:550px;
}
 .burger{
  display:none;
  font-size:3rem;
}
@media (max-width:800px) {
    .nav-bar {
        display:none;
    }
}
.nav-bar ul {
    list-style-type: none;
    margin:0;
    padding:0;
  }
  .nav-bar li {
    display:inline-block;
 
}
.nav-bar li a{
    padding:0.938rem;
    text-decoration: none;
    color:rgb(255, 255, 255);
    font-size:1.125rem;
    
}
@media (max-width: 1023px) {
.nav-bar li {
color:black;
height:5rem;
display:inline;
}
.nav-bar li a{
    padding:.938rem;
    text-decoration: none;
    color:rgb(0, 0, 0);
    background-color: white;
    
}
}
@media (max-width: 1023px) {
.nav-links {
    display:none;
    flex-direction:column;
    position:absolute;
    color: rgb(255, 232, 232);
    top: 50px;
    right:0px;
    text-align: center;
    z-index:3;
    
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    margin: 1rem 0;

}
.burger {
display: block;
position: absolute;
top:0px;
left:200px;
color:white;
cursor:pointer;
  }
}
@media (min-width: 500px) {
.burger{
position: absolute;
top:-30px;
left:250px;
}
}

.but a {
  position:absolute;
  top:30px;
  left:1050px;
  height:1.25rem;
  width:6.25rem;
  background-color: #ff8447;
  color:white; 
  padding:0.938rem 1.625rem 0.938rem 1.625rem;
  text-decoration:none;
  display:block;
  border-radius:30px;
  font-size:1.19rem;

}
@media (max-width:1024px) {
 .but a {
  position:absolute;
  top:30px;
  left:850px; 
  height:0.825rem;
  width:5.55rem;
  font-size:1rem;
  padding:0.638rem 1.625rem 0.998rem 1.625rem;
    } 
}

@media (max-width:500px) {
.but a{
 position:absolute;
 top:30px;
 left:230px;
 padding:0.8rem;
 font-size:0.9rem ;
}
}
.but a :visited{
background-color:rgb(254, 152, 62);
}
.but :hover{
 background-color:rgb(252, 129, 34);
}
.section1{
position:relative;
background-image: (url'https://queen.jollibee.com.ph/2021/12/home_banner_1.png');
top:100px;

}

@media (max-width:834px) {
  .section1{
    background-image:(url'https://queen.jollibee.com.ph/2021/12/home_banner_1.png');
    background-size:contain;
    background-position:center;
    height:40%;
    width:100%;
  }
}
    @media (max-width:500px) {
     .section1{
        background-size:cover;
        background-position:center;
        min-height:auto;
        width:100%; 

     }
    }
.have h1{
    position:absolute;
    top:120px;
    left:130px;
    text-align:justify;
    color:white;
    font-size:2.95rem;
}
@media (max-width:1023px) {
    .have h1{
     position: absolute;   
     top:90px;
     left:20px;
     font-size:3.5rem;    
     text-align:center;
     width:590px;
    }
}
@media (max-width:840px) {
    .have h1{
     position: absolute;   
     top:90px;
     left:20px;
     font-size:3.5rem;    
     text-align:center;
     width:590px;
    }
}
@media (max-width:500px) {
    .have h1{
     position:absolute;
     top:50px;
     left:0px;
     font-size:2.5rem;
     width:400px;
    
}
}
.have p{
 position: absolute;
 top:200px;
 left:80px;
 color:white;
 text-align:center;
 font-size:29px;
 width:550px;
 font-weight: bold;
}
@media (max-width:840px) {
    .have p{
    position:absolute;
    top:180px;
    left:40px;
    width:450px;
    text-align:center;
    font-size:28px;
    }
}
@media (max-width:500px) {
    .have p{
     position:absolute;
     top:150px;
     left:0px;
     width:500px;
     font-size:23px;
     text-align:center ;
    }
}
.now a{
    position: absolute;
    top:310px;
    left:250px;
    background-color: rgb(227, 131, 14);
  height:1.563rem;
  width:9.38rem;
  color:white;
  padding: 1.48rem 1.56rem 1.48rem 1.625rem;
  text-align:center;
  border-radius:2.5rem;
  text-decoration:none;
  display:block;
  font-weight: 200;
  font-size:1.75rem;
}
@media (max-width:840px) {
    .now a{
     position: absolute;
     top:300px;
     left:150px;
    }
}
@media (max-width:500px) {
    .now a{
        position:absolute;
        top:250px;
        left:120px;
        width:8.5rem;
        height:1.5rem;
        font-size:1.3rem;
        font-weight:bold;
        padding:1rem ;
    }
}
.now a:hover{
    background-color: #ff6a00;
}
.section2{
   position:relative;
   border-bottom:1px solid grey;
   height:28.125rem;
}
@media (max-width:840px) {
    .section2{
     border-bottom:1px solid grey;
     
    }
}
@media (max-width:500px) {
 .section2{
  border-bottom:2px solid rgb(172, 169, 169);
  height:25rem;
}
}
.order{
    position:absolute;
    top:150px;
    left:200px;
    width:18.75rem;
}

@media screen and (max-width:1200px) {
    .order{
     position:absolute;
     top:150px;
     left:100px;
     width:20rem;
    }
}
@media  (max-width:500px) {
.order{
    position: absolute;
    top:150px;
    left:20px;
    width:10rem;
}
}
@media (max-width:500px) {
.order img{
 width:100px;
}
}
.order h2{
    position:absolute;
    top:180px;
    left:0px;
    text-align:start;
    width:12.5rem;
}
@media (max-width:500px) {
    .order h2{
        position: absolute;
        top:120px;
        left:0px;
     font-size:15px;
    }
}
.app{
    position: absolute;
    top:150px;
    left:550px;
    width:18.75rem;
}
@media (max-width:500px) {
 .app img{
  width:100px;
 }
}
@media (max-width:1200px) {
  .app{
  position:absolute;
  top:150px;
  left:430px;
  }
}
@media (max-width:500px) {
    .app{
     position:absolute;
    top:150px;
    left:150px;
    }
}
.app h2{
    position:absolute;
    top:180px;
    left:0px;
    text-align:start;
    width:15.625rem;
}
@media (max-width:500px) {
    .app h2{
     position: absolute;
     top:120px;
     left:0px;
     font-size:17px;
     width:8rem;
    }
}

.price{
    position: absolute;
    top:150px;
    left:900px;
     width:18.75rem;
}
@media (max-width:1200px) {
  .price{
    position: absolute;
    top:150px;
    left:730px;
  }
}

@media (max-width:500px) {
.price{
 position:absolute;
 top:150px;
 left:270px;
}
}

@media (max-width:500px) {
    .price img{
     width:100px;
    }
}
.price h2{
 position:absolute;
 top:180px;
 left:50px;
 width:12.5rem;
}
@media (max-width:500px) {
    .price h2{
     position:absolute;
     top:120px;
     left:20px;
     font-size:17px;
    }
}
.section3{
    position:relative;

}
.section3 h1{
    position:absolute;
    top:80px;
    left:530px;
}
@media (max-width:1200px) {
 .section3 h1 {
   position:absolute;
   top:90px;
   left:380px;
 }
}
@media (max-width:500px) {
    .section3 h1 {
        position: absolute;
        top:50px;
        left:80px;
        font-size:28px;
    }
}
.image1{
 position:absolute;
 top:160px;
 left:60px;

}
@media (max-width:1200px) {
 .image1{
    position: absolute;
    top:160px;
    left:100px;
    width:300px;
 }
}
@media (max-width:500px) {
    .image1{
        position:absolute;
        top:100px;
        left:230px;
        width:130px;
    }
}
.image2{
    position:absolute;
    top:160px;
    left:430px;
}
@media (max-width:1200px) {
 .image2{
    position:absolute;
    top:160px;
    left:550px;
    width:350px;
 }
}
@media (max-width:500px) {
    .image2{
        position:absolute;
        top:100px;
        left:30px;
        width:180px;
    
    }
}
.image3{
    position:absolute;
    top:160px;
    left:850px;
}
@media (max-width:1200px) {
    .image3{
     position:absolute;
     top:480px;
     left:100px;
     width:300px
    }
}
@media (max-width:500px){
 .image3{
    display:none;
 }
}
.section3 a{
    position:absolute;
    top:700px;
    left:500px;
    background-color: #ff8d23;
  color: white;
  padding: 1.25rem 2.5rem;
  text-align: center;
  text-decoration:none;
  display: inline-block;
  border-radius:2.5rem;
  font-size:1.563rem;
}
@media (max-width:1200px) {
    .section3 a{
     position: absolute;
     top:840px;
     left:400px;
    }
}
@media (max-width:500px) {
  .section3 a{
    position:absolute;
    top:400px;
    left:80px;
    font-size:1.5rem;
  }
}
.section3 a:hover{
    background-color: #ff8310;
}
.section4{
    position:relative;
    top:800px;
    background-color:rgb(252, 240, 176);
    height:50.625rem;
}
@media (max-width:1200px) {
   .section4 {
    position: relative;
    top:930px;
    height:69rem;
   }
}
@media (max-width:500px) {
    .section4{
     position:relative;
     top:530px;
     height:45rem;
    }
}
.section4 h1{
    position:absolute;
    top:50px;
    left:500px;
    font-size:2.125rem;
}
@media (max-width:1200px) {
    .section4 h1 {
    position:absolute;
    top:50px;
    left:400px;
    font-size:25px;
  }
}
@media (max-width:500px) {
    .section4 h1{
        position:absolute;
        top:30px;
        left:50px;
        font-size:1.8rem;
    }
}
 
.joy{
    position:relative;
    top:100px;
    left:40px;
    border:1px solid rgb(248, 246, 246);
    background-color:rgb(227, 38, 38);
    padding:6.25rem 9.375rem;
    height:12.5rem;
    width:4.375rem;
    border-radius:1.25rem;
    color:white;
    font-size:1.25rem;

}
@media (max-width:1200px) {
    .joy{
        position: relative;
        top:150px;
        left:100px;
        width:3.3rem;
        height:12rem;
        font-size:1rem;
    }
}
@media (max-width:500px) {
    .joy{
        position:absolute;
        top:100px;
        left:16px;
        width:1rem;
        height:7rem;
        font-size:0.7rem;
        padding:4rem 5rem;
    }
}
.joy1 img{
    position:absolute;
    top:130px;
    left:80px;
}
@media (max-width:1200px) {
    .joy1 img{
     position:absolute;
     top:100px;
     left:100px;
    }
}
@media (max-width:500px) {
    .joy1 img{
        position:absolute;
        top:70px;
        left:50px;
        width:120px;
    }
}
.joy h3{
position: absolute;
top:20px;
left:20px;
text-align:start;
font-size:1.563rem;
}
@media (max-width:1200px) {
    .joy h3{
    font-size:1.5rem;
  }
 }
 @media (max-width:500px) {
    .joy h3{
    font-size:0.8rem;
    }
 }
.joy2{
    position:relative;
    top:-300px;
    left:430px;
    border:1px solid rgb(249, 158, 0);
    background-color:rgb(255, 171, 26);
    padding:6.25rem 9.375rem;
    height:12.5rem;
    width:5rem;
    border-radius:1.25rem;
    color:white;
    font-size:1.25rem;
}
@media (max-width:1200px) {
 .joy2{
    position: relative;
    top:-240px;
    left:550px;
    width:3rem;
    height:12rem;
 }
}
@media (max-width:500px) {
    .joy2{
        position: relative;
        top:100px;
        left:200px;
        width:1rem;
        height:7rem;
        padding:4rem 5rem;
    }
}
.joy02 img {
    position:absolute;
    top:220px;
    left:80px;
}
@media (max-width: 1200px) {
 .joy2 img {
    position: absolute;
    top:180px;
    left:80px;
 }
}
@media (max-width:500px){
    .joy2 img{
     position:absolute;
     top:100px;
     left:20px;
     width:150px;
    }
}
.joy2 h3{
    position:absolute;
    top:20px;
     left:20px;
    text-align:start;
    font-size:1.438rem;
}
@media (max-width:840px) {
    .joy2 h3{
     font-size:1.5rem;
    }
}
@media (max-width:500px){
    .joy2 h3{
        font-size:0.8rem;
    }
}
.yum {
    position:relative;
    top:-700px;
    left:830px;
    border:1px solid rgb(0, 225, 255);
    background-color:rgb(55, 176, 176);
    padding:6.25rem 9.375rem;
    height:12.5rem;
    width:5rem;
    border-radius:1.25rem;
    color:white;
    font-size:20px;
}
@media (max-width:1200px) {
    .yum{
     position: relative;
     top:-180px;
     left:100px;
     width:3.5rem;
     height:14rem;
    }
}
@media (max-width:500px){
    .yum{
     position:absolute;
     top:370px;
     left:16px;
     width:1rem;
     height:7rem;
     padding:4rem 5rem;
    }
}
.yum1 img{
    position:absolute;
    top:130px;
    left:80px;
}
@media (max-width:1200px) {
    .yum1 img{
    position:absolute;
    top:168px;
    left:90px;
    width:200px;
    }
}
@media (max-width:500px) {
    .yum1 img{
        position:absolute;
        top:117px;
        left:40px;
        width:130px;
    }
}
.yum h3{
    position:absolute;
    top:20px;
    left:30px;
    text-align:start;
    font-size:1.563rem;
}
@media (max-width:800px) {
 .yum h3{
    font-size:1.2rem;
 }
}
@media (max-width:500px) {
    .yum h3{
        left:20px;
        font-size:0.9rem;
    }
}

@media(min-width:840px) {
.steak{
display:none;
}
}
@media (max-width:1200px) {
 .steak{
    position:relative;
    top:-610px;
    left:550px;
    border:1px solid rgb(220, 152, 56);
    background-color:rgb(220, 152, 56);
    padding:6.25rem 9.375rem;
    width:3rem;
     height:14rem;
    border-radius:1.25rem;
    color:white;
    font-size:20px; 
 }
}
@media(max-width:500px) {
    .steak{
        position:absolute;
        top:370px;
        left:200px;
        width:1rem;
        height:7rem;
        padding:4rem 5rem;
    }
}
 .steak1 img{
    position: absolute;
    top:auto;
    left:30px;
 }
 @media (max-width:1200px) {
    .steak1 img{
        position: absolute;
        top:168px;
        left:80px;
        width:250px;
    }
 }
 @media(max-width:500px) {
    .steak1 img{
     position:absolute;
     top:120px;
     left:20px;
     width:150px;
    }
 }
 .steak h3{
    position:absolute;
    top:40px;
    left:30px;
    top:20px;
    left:30px;
    text-align:start;
    font-size:1.563rem;
    
 }
 @media(max-width:800px) {
    .steak h3{
       position:absolute;
       top:20px;
       left:30px;
       text-align:start;
       font-size:1.26rem;
    }
 }
 @media(max-width:500px) {
    .steak h3{
      font-size:0.8rem;
      left:20px;

    }
 }
.section4 a{
    position:absolute;
    top:540px;
    left:540px;
    background-color: #ff8a1c;
  color: white; 
  padding:1.25rem 2.5rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius:2.5rem;
  font-size:1.563rem;
}
@media (max-width:1200px) {
 .section4 a{
    position:absolute;
    top:1040px;
    left:400px;
 }
 }
 @media (max-width:500px) {
    .section4 a{
     position:absolute;
     top:640px;
     left:110px;
     padding:1rem 2rem;
     font-size:1.5rem;
    }
 }
.section5{
    position:relative;
}
.image0{
 position:absolute;
 top:1030px;
 left:290px;
 background-color:rgb(255, 208, 1);
 width:14.375rem;
 height:12.5rem;
 border-radius:1.25rem;
}
@media (max-width:1200px) {
.image0{
  position: absolute;  
  top:1080px;
  left:150px;
}
}
@media (max-width:500px) {
 .image0{
    position:absolute;
    top:600px;
    left:90px;
 }
}
.image0 img{
 position: absolute;
 top:-40px;
 left:-30px;
}

.text h1{
    position:absolute;
    top:270px;
    left:20px;
}
.yellow-line{
    position: absolute;
    top:330px;
    left:10px;
    width:21.88rem;
    height:0.25rem;
    background-color: #fac72d;
    border-radius:1.875rem;
}
.text p{
    position:absolute;
    top:360px;
    left:15px;
    text-align:center;
    font-size:1.063rem;
    line-height:1.75rem;
}
.image00{
    position:absolute;
    top:1030px;
 left:750px;
 background-color:rgb(190, 16, 16);
 width:14.375rem;
 height:12.5rem;
 border-radius:1.25rem;
}
@media (max-width:1200px) {
    .image00{
        position: absolute;
        top:1080px;
        left:620px;
    }
}
@media (max-width:500px) {
    .image00{
        position:absolute;
        top:1200px;
        left:80px;
        width:15.375rem;
    }
}
.image00 img{
 position: absolute;
 top:-40px;
 left:30px;
}

.imag h1{
    position:absolute;
    top:270px;
    left:50px;
    font-size:1.563rem;
}
.red-line{
    position: absolute;
    top:330px;
    left:10px;
    width:490px;
    height:0.25rem;
    background-color: #c81515;
    border-radius:1.875rem;
}
.imag p{
    position:absolute;
    top:360px;
    left:0px;
    text-align:center;
    font-size:0.938rem;
    line-height:1.75rem;
}
.footer{
    position:relative;
    top:1600px;
    padding-left:3.125rem;
    padding-right:9.375rem;
    font-size:0.938rem;
    text-decoration:none;
    border-top:3px solid rgb(241, 212, 51);
    padding-top:3.125rem;
    padding-bottom:3.125rem;
  }
  @media (max-width:1200px) {
    .footer{
     position: relative;
     top:1600px;
     font-size:0.8rem;
    }
  }
  @media (max-width:500px) {
    .footer{
        position:relative;
       top:1700px;
    }
  }
  .f.img{
    position:absolute;
    top:50px;
    left:50px;
   }
@media (max-width:1200px) {
    .f.img{
     position: absolute;
     top:1900px;
     left:600px;
    }
}
@media (max-width:500px) {
    .f.img{
        position:absolute;
        top:50px;
        left:30px;
        width:120px;
    }
}
  .footer a{
    text-decoration:none;
    color:black;
    font-size:1rem;

  }
  .footer p{
    position: absolute;
    top:550px;
    left:50px;
  }
  @media (max-width: 1200px) {
    .footer p{
    position:absolute;
    top:600px;
    font-size: 2.5rem;
    margin-bottom:40px;
}
}
@media (max-width:500px) {
    .footer p{
    position:absolute;
    top:1300px;
    font-size: 1.5rem;
}
}
.footer-container {
    display: flex;
    position: absolute;
    top:150px;
    left:250px;
    flex-wrap: nowrap;
    padding: 20px;
    font-size:0.8rem;
    
}
@media (max-width: 1200px) {
    .footer-container{
   left:200px;
    }}
.footer-section {
    flex: 1 1 200px; /* Adjust the width as needed */
    margin: 10px;
}
.footer-section h3 {
    margin-top: 0;
    font-size: 1.3rem;
}
.footer-section a {
    display: block;
    margin: 5px 0;
    color: #333;
    text-decoration: none;
    font-size:1rem;
}
.footer-section a:hover {
    text-decoration: underline;
}
@media (max-width: 500px) {
    .footer-container {
        flex-direction: column;
        position: absolute;
        top:380px;
        left:50px;
    }
    .footer-section {
        flex: 2 2 50%;
    }
}
  .apple{
    position:absolute;
    top:180px;
    left:1050px;
  }
  @media (max-width:1200px) {
   .apple{
    position:absolute;
    top:100px;
    left:850px;
    width:120px;
   }
  }
  @media (max-width:500px) {
    .apple{
    position:absolute;
    top:270px;
    left:60px;
    width:150px;
    }
  }
.google{
    position: absolute;
    top:230px;
    left:1050px;
    
}
@media (max-width:1200px) {
    .google{
     position:absolute;
     top:140px;
     left:850px;
     width:120px;
    }
}
@media (max-width:500px) {
    .google{
     position:absolute;
     top:330px;
     left:60px;
     width:150px;
    }
}
.button a{
    position:absolute;
    top:100px;
    left:1050px;
    background-color: #ff8411;
    color:white; 
    padding: 0.813rem 1.875rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius:1.875rem;
    font-size:1.25rem;
}
@media (max-width:1200px) {
    .button a{
        position: absolute;
        top:30px;
        left:840px;
    }
}
@media (max-width:500px) {
    .button a{
        position:absolute;
        top:190px;
        left:50px;
    }
}
.button a:hover{
 background-color: #fd7a00;
}
.media h4{
 position:absolute;
top:-50px;
 left:0px;
}
@media (max-width:1200px) {
 .media h4{
    position: absolute;
    top:-50px;
    left:30px;
    font-size:24px;
 }
}
@media (max-width:500px) {
 .media h4{
    position: absolute;
    top:-100px;
    left:-10px;
    font-size:22px;
 }
}

.media{
 position: absolute;
 top:240px;
 left:50px;
}
@media (max-width:1024px) {
.media{
  position:absolute;  
  top:240px;
  left:50px; 
}
}
@media (max-width:500px) {
    .media{
    position: absolute;
    top:1200px;
    left:50px;
   
    }
    .media img{
    width:70px;
    }
}