*{margin:0;
padding:0;
box-sizing: border-box;
}

body{
    background-color: rgb(255, 255, 255);
}


  .landscap{
    height: 100%;
    min-height: 100vh;
    width:100% ;
    background-image: url(pics/ley\ feng\ ta.jpg);
    background-size: cover;
    background-position: center;
    position:relative;

    margin: 0;
    padding: 0;
   
   
}


.landscap h1{
  position: absolute; 
  top: 40%;
  left: 40%;
   
  font-size: 4em;

}
@keyframes motionBlur {
  0% { transform: translateY(400px) ; filter: blur(7px); }
  40% { transform: translateX(100px) scale(0.4); filter: blur(7px); }
 70% { transform: translateX(-100px) scale(0.7); filter: blur(7px); }
}


.landscap h1{
  animation: motionBlur 3s 1 ;
}

.menu1{
    height:80px;
    width:400px;
    background-color:antiquewhite;
    position:absolute;
    bottom:30%;
    left: 38%;
    opacity: 0.3;
     
    border-radius:40px;
    
    animation: circle 1.5s 1;
     animation-timeline: run();
   
     
    
}
.landscap .menu1 #icon1{
    height: 2em;
    width: 2em;
    position:absolute;
    top:35%;
    left:15%;
    opacity:1;
     transition:all 0.3s ease;
    

}

.landscap .menu1 #icon1:hover{
    scale: 1.5;
    transform: translatey(-10px)  rotate(20deg);
    

    
}
.landscap .menu1 #icon2{
    height: 2em;
    width: 2em;
    position:absolute;
    top:35%;
    left: 30%;
    opacity:1;
     transition:all 0.3s ease;

}

.landscap .menu1 #icon2:hover{
    scale: 1.5;
    transform: translatey(-10px)  rotate(-20deg);
    
}
.landscap .menu1 #icon3{
    height: 2em;
    width: 2em;
    position:absolute;
    top:35%;
    left: 45%;
    opacity:1;
     transition:all 0.3s ease;
}

    .landscap .menu1 #icon3:hover{
    scale: 1.5;
    transform: translatey(-10px) translateX(20px);
    }

.landscap .menu1 #icon4{
    height: 2em;
    width: 2em;
    position:absolute;  
    top:35%;
    left: 60%;
    opacity:1;
     transition:all 0.3s ease;


}

.landscap .menu1 #icon4:hover{
    scale: 1.5;
    transform: translatey(-10px)  translateX(10px);
    }


.landscap .menu1 #icon5{
    height: 2em;
    width: 2em;
    position:absolute;
    top:35%;
    left: 75%;
    opacity:1;
     transition:all 0.3s ease;
}

.landscap .menu1 #icon5:hover{
    scale: 1.5;
    transform: translatey(-10px)  ;
    }






 .boxs{
    gap: 20px;
    height: auto;
    min-height: 100vh;
   
    display: grid;
    grid-template-columns: repeat(2, minmax(500px,1fr));
    grid-template-rows: repeat(4, minmax(500px,1fr));
    overflow-y: auto;
    z-index: 1;
    justify-self: center;
    align-self: center;
    overflow:visible;

}

 

        .boxs  #one{
            background-color: black;
            border-radius: 75px;
            display:grid;
            place-items: end;
            overflow: hidden;
            background-image: url(section2/chill\ out4.jpg);
            background-size: cover;
            background-position: center;
            animation:alternate fadein 2s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 50%;
            transition:all 1.5s ease;   
            border: 5px solid white;
    
        }

        .boxs  #one:hover{
            transform: translatex(100px) translatey(100px);
            scale: 1.1;
            z-index: 2;
            box-shadow: 3px 10px 20px rgba(0,0,0,0.4);
            
        }
      




        .boxs  #one p{
        grid-column: 1/2;
        grid-row: 1/2;

        color: white;
        font-size: 1.1em;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0.7;
            border-radius: 70px;
            padding: 20px;
            object-fit: cover;
            width: 100%;
        
        
        }



        .boxs #two{
        background-image: url(section2/Legendary\ 5\ am.jpg);
            background-size: cover;
            background-position: center;
        
        background-color: black;
            border-radius: 75px;
            display:grid;
            place-items: end;
            overflow: hidden;
        border: 5px solid white;

             animation:alternate fadein 1.5s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 50%;

         transition:all 1.5s ease;   
           

            
        }

         .boxs  #two:hover{
            transform: translatex(-100px) translatey(100px);
            scale: 1.1;
            z-index: 2;
             


        }

         .boxs  #two p{
        grid-column: 1/2;
        grid-row: 1/2;

        color: white;
        font-size: 1.1em;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0.7;
            border-radius: 70px;
            padding: 20px;
            object-fit: cover;
            width: 100%;
        
        
        }


        .boxs #three{
        background-image: url(section2/gallery\ art1.jpg);
            background-size: cover;
            background-position: center;
            overflow: hidden;
        
            background-color: black;
            border-radius: 75px;
             animation:alternate fadein 2s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 30%;
         transition:all 1.5s ease;  
         border: 5px solid white; 

            
        }
        
         .boxs  #three:hover{
            transform: translatex(100px) translatey(-100px);
            scale: 1.1;
            z-index: 2;
             


        }


 .boxs  #three p{
        grid-column: 1/2;
        grid-row: 1/2;

        color: white;
        font-size: 1.1em;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0.7;
            border-radius: 70px;
            padding: 20px;
            object-fit: cover;
            width: 100%;
        
        
        }
        .boxs #four{
            background-image: url(section2/cyber\ city1.jpg);
            background-size: cover;
            background-position: center;
            background-color: black;
            border-radius: 75px;
            overflow: hidden;
             animation:alternate fadein 2.3s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 30%;
            transition:all 1.5s ease;
            border: 5px solid white;
    
}


 .boxs  #four:hover{
            transform: translatex(-100px) translatey(-100px);
            scale: 1.1  ;
            z-index: 2;

        }

         .boxs  #four p{
        grid-column: 1/2;
        grid-row: 1/2;

        color: white;
        font-size: 1.1em;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0.7;
            border-radius: 70px;
            padding: 20px;
            object-fit: cover;
            width: 100%;
        
        }



 h2{
    margin:100px;
  text-align:center;
   font-size: 5em;
   animation: text 5s ease  ;
   animation-timeline: view();
   animation-range: entry 0% cover 30%;
  
   
}
.topic{
    position: relative;
    bottom:900px;
   

    text-align: center;
    font-size: 4em;
     margin: 100px;

     animation: text 10s ease  ;
   animation-timeline: view();
   animation-range: entry 0% cover 30%;
}
.description{
    position: relative;
    bottom:900px;
    text-align: center;
    font-size: 1.5em;
     margin: 50px;

     animation:alternate 15s;
     animation-name:blur;
     animation-timeline:view();
     animation-range: entry 0% cover 70%;
}
.last-section{
    height: 100vh;
    width: 100%;
    background-image: url(section2/gallery\ art3.jpg);
    background-size: cover;
    background-position: center;
    position:sticky;
  
    margin: 0;
    padding: 0;
} 

.last-section p{

    position: absolute;
        top:65%;
        font-size: xx-large;
        left:35%;
        text-align: center;
       animation:alternate underline 2s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 30%;;

}

.last-section p::first-letter{
     animation:alternate underline 5s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 10%;;
}

.last-section p #last-letter{
     animation:alternate underline 5s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 10%;;
}

.compund-pic{
 height: 300px;
    width: 300px;
    background-image: url(section2/clover-solid-full.svg);
    background-size: cover;
    background-position: center;
   

    position:relative;
    bottom:800px;
    left:45%;

    animation:alternate-reverse clover 5s ease-in-out;
    animation-timeline: view();
    animation-range: entry 0% cover 100%;;

    
    
}

.section3{
    height:auto;
    min-height: 100vh;
    width: 100%;
    
    background-color: rgb(27, 47, 34);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    grid-template-rows: repeat(auto-fill, minmax(300px,1fr));
    gap: 20px;
    border-radius: 30px;
  
       


grid-template-areas: 
             " item1 item2 item3 item4 item5"
                "item6 item7 item8 item9 item10"
                "item11 item12 item13 item14 item15"
                "item16 item17 item18 item19 item20" ;
}
    
.section3 h2{
    color: white;
    font-size: 4em;
    text-align: center;
    margin: 100px;

}

.section3 .item{
     display:grid;
    

}
        .section3  #item1{
            background-size: cover;
            background-position: center;
            border-radius: 75px;
            


            
        }

        .section3 #item2{
            margin: 20px;
                background-image: url(section2/chill\ out2.jpg);
                background-size: cover;
            background-size: cover;
            background-position: center;
            border-radius: 75px;
             animation:alternate appear 5s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 70%;;
}
            
            

            
        

        .section3 #item3{
        
                background-position: center;
                border-radius: 75px;
                    
        }

        .section3  #item4{
            margin: 20px;
            background-image: url(section2/delivery-day.jpg);
                background-size: cover;
                background-position: center;
                border-radius: 75px;

                 animation:alternate appear 5s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 70%;;
                

        }
        .section3 #item5{
                background-size: cover;
                background-position: center;
                border-radius: 75px;
                

        }
        .section3 #item6{
            margin: 20px;
            background-image: url(section2/Legendary\ 5\ am.jpg);
                background-size: cover;
                background-position: center;
                border-radius: 75px;

                 animation:alternate appear 5s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 70%;;
                
        }
        .section3 #item7{
                background-size: cover;
                background-position: center;
                border-radius: 75px;
                    

        }
        .section3 #item8{
                margin: 20px;
                background-size: cover;
                background-position: center;
                border-radius: 75px;
                    

        }
        .section3 #item9{
                background-size: cover;
                background-position: center;
                border-radius: 75px;
                    

        }  
        .section3 #item10{
                    margin: 20px;
                    background-image: url(section2/cyber\ city1.jpg);
                background-size: cover;
                background-position: center;
                border-radius: 75px;

                 animation:alternate appear 5s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 70%;;

        }
        .section3 #item11{
            
                margin: 20px;
                background-size: cover;
                background-position: center;
                border-radius: 75px;
                    

        }
        .section3 #item12{
            background-image: url(section2/hotel\ room\ view.jpg);
                margin: 20px;
                background-size: cover;
                background-position: center;
                border-radius: 75px;
                     animation:alternate appear 5s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 70%;;

        }
        .section3 #item13{
                margin: 20px;
                background-size: cover;
                background-position: center;
                border-radius: 75px;
                    

        }
        .section3 #item14{
                    margin: 20px;
                background-image: url(section2/goalden\ tree.jpg);
                background-size: cover;
                background-position: center;
                border-radius: 75px; 
            
             animation:alternate appear 5s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 70%;;}
                
        .section3 #item18{

                    margin: 20px;
                background-image: url(section2/gallery\ art2.jpg);
                background-size: cover;
                background-position: center;
                border-radius: 75px;  
            
             animation:alternate appear 5s 1;
            animation-timeline: view();
                animation-range: entry 0% cover 70%;;}

 @media (max-width: 658px) {
    .section3 {grid-template-areas: 
           "item8"
            "item4"
            "item6"
            "item2"
            "item10"
            "item12"
            "item14";
       grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    grid-template-rows: repeat(4, minmax(300px,1fr));


       
    }
 }

 @media (min-width: 768px) and (max-height: 1024px) {
    .section3 {grid-template-areas: 
          "item8 item8  .    .  "
          "item8 item8 item2 item4"
         " .   item6 item18 item18"
          "item10 item14 item18";
        
       grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    grid-template-rows: repeat(auto-fill, minmax(300px,1fr));


       
    }
 }

 @keyframes fadein {
    0% { opacity: 0;
         scale: 0.7 ; 
         filter:blur(7px) }
    100% { opacity: 1;
         scale: 1; }

 }

 @keyframes circle {
    0% { transform:scale(0.7);
        width: 80px;
        height: 80px;       
        border-radius: 40px;
        filter:blur(7px);
    }
    100% {
        width: 400px;
        height: 80px;
        border-radius: 40px;
    }
}

@keyframes text{
   0%{filter:blur(10px);
       transform: translateY(-250px);


   }

   100%{}

}

@keyframes underline{
   0% { 
    opacity: 0; 
    transform: translateY(20px); 
    color:red;
  }
  60%{
    color:rgb(69, 148, 164);
  }
  100% { 
    opacity: 1; 
    transform: translateY(0px); 
  }

}

@keyframes appear { 
    from{ opacity: 0.0;

    }
    to{opacity:1;

    }
}
    


@keyframes blur{
    from{ filter:blur(10px);
          transfrom: scalex(0.5) translateY(100px);
    }

    to{
    }

}

@keyframes clover{
    
   60%{}

   0%{
    transform: translateY(800px) rotate(91deg);
    filter:blur(10px)
    opacity(0)
   }
}