body{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height:auto;
    background-color: beige;
    font-family: 'Exo',sans-serif;
}

nav{display: grid;
    justify-items: center;
    height: 50px;
    width: 100%;
    background:rgb(36, 40, 44);
    position: fixed;
    align-items: center;
}

nav ul{
    position: fixed;
    display: flex;
    align-items: center ;
    width: 85%;
    max-width: 1100px;
    list-style-type: none;
    margin-right: 2rem;
}
nav ul li {
   margin-right: .3rem;
    color: snow;
    transition: .3s;
    font-size: .9rem;
    padding: 4px;
    border-radius:12px ;
    transition: .2s;
}

nav ul li a:hover{
    padding: 4px;
    border: 1.8px solid white;
    border-radius:12px ;
    box-sizing: border-box;
    transition: .2s;
}

nav ul li a{
    transition: .2s;
    text-decoration: none;
    color: beige;
}

.active{
    padding: 4px;
    border: 1.8px solid white;
    border-radius:12px ;
}

.logo{
    flex: 1;
    margin-right: .5rem;
    font-size: 1.5rem;
}

.image{

    display: grid;
    align-items: center;
    justify-items: center;
    color: beige;
    height: 35vh;
    width: 100%;
    background-color: aqua;
    background:rgba(0,0,0,0.3) url(/any.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: darken;
   
}

.image h1{
    animation: fadein 3s ease-out;
    
    width: 100;
    height: 100%;
    
}

@keyframes fadein{
   
    0%{opacity: 0;}
    100%{opacity: 1;}
}



.line{
    width: 100%;
    height: 4rem;
    background-image:linear-gradient(rgb(211, 127, 97) 1% , beige)  ;
    
}

.container {
    width: 85%;
    max-width: 1100px;
    height:auto;
    background: beige;
    margin: 0 auto;
    text-align: center;
}

.hd{
    margin: 0 auto;
    height: 4rem;
    margin-top: -2rem;
    margin-bottom: 2.5rem;
    font-size: 1.7rem;
   padding-bottom: .2rem;
   
}

.para{
    font-size: 1.2rem;
}

.line1{
    height: 3px;
    width: 100%;
    margin-inline: auto;
    margin-block: 2rem;
    border: 1px;
    border-style: solid;
    background-color: rgb(211, 127, 97);
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-color: rgb(211, 127, 97);
  }

  .linein{
    height: 3px;
    width: 100%;
    margin-inline: auto;
    margin-block: .5rem;
    border: 1px;
    border-style: solid;
    background-color: rgb(211, 127, 97);
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-color: rgb(211, 127, 97);
  }

 

.new{
    height: auto;
    width: 100%;
    background: beige;
}

.scroll-cont{
    padding-left: 10px;
    display: grid;
    text-align: center;
   
    grid-auto-flow: column;
    grid-auto-columns: 28%;
    height: auto + 3px;
    width: auto;
    overflow-x: auto;
    grid-gap:0.5rem;
    margin-bottom: 3rem;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 8px;
    overscroll-behavior-inline: contain;
   
}

.scroll{
    height: 5rem;
    width:5rem;
   
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    scroll-snap-type: inline mandatory;
     scroll-padding-inline: 3px;
     padding: 5px;
     
      border-radius: 4px;
      box-sizing: border-box;
      box-shadow: rgb(0,0,0,0.5);
      transition: 0.3s;}

      .scroll img{
        width :5rem;
        height:5rem;
        object-fit: cover;
        object-position: center;
    }

.img1{
    background-image: url(/set.avif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 25vh;
    width: 80%;
    margin: 0 auto;
    border-bottom-left-radius: 14px;
    border-top-right-radius: 14px;
    border: 3px solid; 
    border-top-color: rgb(36, 40, 44);
    border-left-color:rgb(211, 127, 97)  ;
    border-right-color: rgb(36, 40, 44);
    border-bottom-color:rgb(211, 127, 97) ;
}

.p1{

}

.img2{
    background-image: url(/bar.avif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 25vh;
    width: 80%;
    margin: 0 auto;
    border-top-left-radius: 14px;
    border-bottom-right-radius: 14px;
    border: 3px solid;
    border-top-color: rgb(36, 40, 44);
    border-left-color:rgb(36, 40, 44) ;
    border-right-color: rgb(211, 127, 97);
    border-bottom-color:rgb(211, 127, 97) ;
}

.p2{

}

.img3{
    background-image: url(/furnish.avif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 25vh;
    width: 80%;
    margin: 0 auto;
    border-bottom-left-radius: 14px;
    border-top-right-radius: 14px;
    border: 3px solid; 
    border-top-color: rgb(36, 40, 44);
    border-left-color:rgb(211, 127, 97)  ;
    border-right-color: rgb(36, 40, 44);
    border-bottom-color:rgb(211, 127, 97) ;
}

.p3{

}

.prompt{
    justify-items: center;
    align-items: center;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height:3rem;
    margin-bottom: 1.5rem;
}

.prompt a{
    color:rgb(36, 40, 44);
    transition: .2s;
}

.prompt a:hover{
    color:rgb(211, 127, 97) ;
    transition: .2s;
}

.spacer{
    height: 100%;
    width:2%;
    background-color: rgb(211, 127, 97);
}

.foot{
    height: 6.5rem;
    width:100%;
    background-color:rgb(36, 40, 44) ;
    margin-top: 2rem;
    text-align: center;
    width: 100%;
    padding-top: 20px;
    color:beige ;
}

@media(min-width: 830px){
 .image{
    height: 100vh;
    width: 100%;
    font-size: 2.5rem;
 }

 .sects{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height:auto;
    text-align:left ;
    margin-block: 4rem;
    font-size: 1.2rem;
    
 }

 .sects1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height:auto;
    text-align:left ;
    margin-block: 4rem;
    font-size: 1.2rem;
    width: 100%;
    
 }
 

 .scroll-cont{
grid-auto-columns: 15%;

 }
 .scroll{
    height: 10rem;
    width:10rem;
    margin-bottom: 1rem;
    scroll-margin-block: 8px;
    
    object-fit: cover;
    object-position: center;
}

.scroll img{
    width :10rem;
    height:10rem;
    object-fit: cover;
    object-position: center;
}

.img1{
    height: 20rem;
}

.img2{
    height: 20rem;
    

   
    align-self: right;
}

.img3{
    height: 20rem;
}
.p2{
    height: 20rem;
 
   
}


 .spacer{
    width:1%;
 }

 .prompt{
    font-size: 1.3rem;
 }
}