*{

    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Parkinsans:wght@300..800&display=swap');
    
    padding: 0%;
    margin: 0%;
    color: white;
    .open-sans-<uniquifier> 
      font-family: "Open Sans", sans-serif;
      font-optical-sizing: auto;
      font-weight: <weight>;
      font-style: normal;
      font-variation-settings:
        
    

}

body{
    background-color: rgb(0, 0, 0);
    background-size: 40px 40px;
    background-image: linear-gradient(to right, #272020 1px, transparent 1px),
    linear-gradient(to bottom, #1e1515 1px, transparent 1px);
    overflow-x: hidden;
    
}

      


html{
    scroll-behavior: smooth;
}

/*    NAVBAR  SECTION      */
.navi{
    margin-top: 3vh;
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 100;    
}

#axoo{
    background-color: transparent;
}
.navgation-container a:hover{
    background-color: gray;
    color: white;
}
.navgation-container{ 
    border: 2px solid rgba(255, 255, 255, 0.632);
    height: 50px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    background-color: black;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);

}
.navgation-container>a{
    display: inline-block;
    margin-right: 30px;
    text-decoration: none;
    width: 180px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    font-size: 14px;
    color: white;
    font-weight: bold;
    position: relative;
}
.navgation-container>a:first-child{
    margin-left: 30px;
}
#add{
    color: #0f0f0f;
    background-color: rgb(241, 245, 248);
}

/*    HOME SECTION      */

.land-page{
    height: 80vh;
    display: flex;
    justify-content: center;
    letter-spacing: 2px;    
}
.land-page .landing {
    display: inline-block;
    color: white;
    padding: 3px;
    letter-spacing: 2px;   
    position: absolute; 
    text-align: center;
    margin-top: 20vh;
    
}
.land-page .landing h1{
    margin-top: 6vh;
    font-weight: bolder;
    
}
.land-page .landing p{
    margin-top: 5vh;
    color: rgb(192, 196, 199);

}
button{
    margin-top: 5vh;
    background-color: white;
    color: black;
    border-radius: 30px;
    padding: 30px;
    width: 190px;
    height: 10px;
    padding-top: 15px;
    text-align: center;
    
    
}
button i{
    font-size: larger;
    color: #0f0f0f;
    background-color: white;
    padding-left: 10px;
}
button a{
    color: black;
    text-decoration: none;
    font-weight: 700;

}


/*    IMAGE SECTION IN 2 SLIDE      */


.colour .image-slide p{
    display: flow-root;
    font-size: 50px;
    color: blue;
    animation-name: test;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    margin-top: 50px;

}
@keyframes test {
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(-100%);
    }
    
}




.image-slide{
    display: grid;
    place-items: center;
    margin-inline: 1.5rem;
    padding-block: 5rem;
    position: relative;  
}

.colour{
     
    background-image: radial-gradient(closest-side, rgba(103, 191, 223, 0.938),rgb(76, 140, 158),rgb(0, 0, 0));
     margin-top: 0;
     width: 100vw;
     height: 70vh;
     padding-bottom: 50px;
     padding-top: 50px;
}
.photo-contant{
    display: flex;
    column-gap: 3.5rem;
    position: sticky;
    top: 0%;
    z-index: 99;

}
.card-article{
    position: relative;

    

}
.card-article img{
    width: 200px;
    height: 200px;
    border-radius: 10px;

}
 #circle-pic{
    position: sticky;
    top: 0%;
    transform: rotate(-7deg);
    border-radius: 40px;
    border: 3px solid rgba(203, 201, 201, 0.972);
    box-shadow: 0 0 10px rgba(228, 223, 223, 0.904);
 }
 #square-pic{
    transform: rotate(3deg);
    border: 3px solid rgba(238, 230, 230, 0.971);
    box-shadow: 0 0 10px rgba(207, 202, 202, 0.873);
 }
 #square-pic:hover{
    transform: scale(1.5);
    transition: 1s ease;
 }
 #circle-pic:hover{
    transform: scale(0.7);
    transition: 1s ease;
 }


 /*    MOBILE PHONE SECTION      */

.third-slid{
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-content: center;
  position: relative;
  height: 100vh;
  margin-left: 80px;
} 
.third-slid .para{
    margin-top: 40px;
    padding-right: 50px;
}

.third-slid .para h1{
    margin-top: 6vh;
    font-weight: bolder;
    letter-spacing: 2px;
    font-size: 40px;
    
}
.third-slid .para p{
    margin-top: 5vh;
    color: rgb(192, 196, 199);
    letter-spacing: 2px;

}
.mobile img{
    
    margin-top: 40px;
    width: 450px;
 }
 .loho{
    margin-top: 5vh;
  
    display: flex;
    align-items: center;
    justify-content: space-between;
 }
 .loho i{
    padding: 5px;
 }
 .loho i:hover{
    color: rgb(94, 96, 98);
 }
 .Visit{
    background-color: transparent;
    color: rgb(255, 255, 255);
    height: 2vh;
    border: 2px solid rgb(255, 255, 255);
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    cursor: pointer;
 }
 .Visit:hover{
    color: rgb(56, 58, 60) ;
    border: 2px solid rgb(60, 53, 53);
 }

 /*    PEOPLE DATA SLIDE      */

 .people{
    background-image: url(photos/Untitled_design__3_-removebg-preview.png) ;
    padding-right: 50px;
    padding-right: 50px;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom-left-radius: 90px;
    border-bottom-right-radius: 90px;
    position: relative;
   
     padding-bottom: 200px;
     display: flex;
     justify-content: center;
     justify-content: space-between;
    padding-left: 100PX;
    padding-right: 90PX;
    
 }

 .people .para{
    margin-top: 10vh;
 }
 .people .para h1{
    margin-top: 120px;
    text-align: center;
    font-size: 40px;
 }
 
 #last{
    border-radius: 10px;
    background-color: gray;
    
 }
 #pay{
    background-color: gray;
    border-radius: 10px;
    width: 380px;
    
 }
 input{
    width: 330px;
    padding: 20px;
    border: none;
    border-bottom: 1px solid grey;
    background: transparent;
    
 }
  
 .people-data{
    margin-top: 120px;
    border-left: 1px solid grey;
    border-right: 1px solid gray;
    padding-left: 20px;
    padding-right: 20px;
    
 }  

/*    EMAIL AND ADDRESS SECTION     */

.finall{
  height: 50vh;
   text-align: center;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 250px;
    margin-left: 140px;
    margin-right: 140px;  
}

 .address{
    display: flex;
    justify-content: center;
    justify-content: space-between;
 }
 .address p{
    margin-top: 15px;
    color: rgb(165, 175, 184);
 }

 /*    COPY RIGHTS SECTION      */

 footer{
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;   
 }
 footer i{
    padding: 30px;
 }
 footer i:hover{
    color: rgb(142, 152, 161);
 }

/*    HARIZONTAL SECROLLING SECTION      */


.scrolling{
    position: relative;
    width: 100%;
    height: 50%;
}

.scrolling::before{
    position: absolute;
    content: " ";
    left: 0;
    top: 0;
    z-index: 99;
    height: 100%;
    width: 100px;
    background-image: linear-gradient(90deg,black,transparent);
}
.scrolling::after{
    position: absolute;
    content: " ";
    right:0;
    top: 0;
    z-index: 99;
    height: 100%;
    width: 100px;
    background-image: linear-gradient(-90deg,black,transparent);

}
 .slider{
    transform: rotate(-2deg);
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-behavior: smooth;
}
.slider img{
    border-radius: 20px;
    width: 150px;
    height: 150px;
    object-fit: cover;

}
.slider .row{
    display: flex;
    width: calc(100px * 18);
    animation: slide 3s linear infinite;
}
@keyframes slide{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(20px * 5));
    }
}
img:hover{
    transform: translateZ(15px);
    transition: 0.2s;
    
}
.slider .colume{
    perspective: 100px;
    padding: 10px;
}
.slider1{
    transform: rotate(-2deg);
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.slider1 img{
    border-radius: 20px;
    width: 150px;
    height: 150px;
    object-fit: cover;

}
.slider1 .row{
    display: flex;
    width: calc(100px * 18);
    animation: slide1 3s linear infinite;
}
@keyframes slide1{
    0%{
        transform: translateX(0);
    }
    0%{
        transform: translateX(calc(100px));
       
    }
}


img:hover{
    transform: translateZ(15px);
    transition: 0.2s;
    
}

.slider1 .colume{
    perspective: 100px;
    padding: 10px;
}


button{
    cursor: pointer;
}


/*   TABLET VIEW     */
@media only screen and (max-width: 930px){


    .finall{
        margin: 0%;
        padding-left: 10px;
        padding-right: 10px;
        height: 50vh;
        text-align: center;
        align-items: center;
        margin-top: 250px;
        padding-top: 70px;
    }

    .address{
        
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        row-gap: 30px;
        padding: 0%;

     }
     .address h1{
      font-size: 30px;
     }
     .address p{
      font-size: 20px;
    
     }
    footer{
        height:50vh;
        display: flex;
        flex-wrap: wrap;
        margin-top: 250px;
        padding-left: 60px;
        padding-right: 60px;

    }
    footer i{
        display: flex;
        flex-wrap: wrap;
        
    }

    .people{
         display: flex;
         flex-wrap: wrap; 
     }
     .people .para h1{
        font-size: 30px;
     }
     .people .people-data{
        margin-top: 10%;
     }
     
     #pay{
        width: 280px;
        
     }
     input{
        width: 240px;
        padding: 10px;
     }
     

     .third-slid{
        display: flex;
        flex-wrap: wrap;
        height: 200vh;
        margin-left: 80px;
        
      
      } 
      .third-slid .para{

          margin-top: 40px;
          padding-right: 50px;
          
      }
      
      .third-slid .para h1{
          letter-spacing: 2px;
          font-size: 30px;
          
      }
      .third-slid .para p{
          align-self: flex-start;
      
      }

     .mobile img{
        margin-top:10px;
        width: 450px;
        padding-right: 80px;
     }

    .land-page .landing p{
        padding-left: 20px;
        padding-right: 20px;
    }
    button{
        font-weight: 900;
    }
    
    .colour{
         width: 90vw;
         height: 40vh;
    }
    .photo-contant{
        display: flex;
        column-gap: 0.5rem;
    }
    .card-article img{
        width: 100px;
        height: 100px;
        border-radius: 10px;
    
    }
     #circle-pic{
        border-radius: 30px;
       
     }

    .navgation-container>a{
        display: inline-block;
        margin-right: 20px;
        width: 60px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        font-size: 10px;
     
    }
    #axoo{
        background-color: transparent;
    }   
}

/*   MOBILE PHONE VIEW     */
@media only screen and (max-width: 430px){

botton{
    cursor: pointer;
}
    .navi{
        margin-top: 3vh;
        display: flex;
        justify-content: center;
        position: sticky;
        top: 0;
        z-index: 100;    
    }
    .navgation-container>a{
        display: inline-block;
        margin-right: 20px;
        width: 60px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        font-size: 10px;
     
    }



    .scrolling{
        position: relative;
        width: 100%;
        height: 50%;
    }
     .slider{
        width: 50%;
        height: 50px;  
    }
    .slider img{
        border-radius: 5px;
        width: 40px;
        height: 60px;
    }
    .slider .colume{
        padding: 5px;
    }
    .slider1{
       
        width: 50%;
        height: 100px;
    }
    .slider1 img{
        border-radius: 5px;
        width: 40px;
        height: 60px;
    }
   
    .slider1 .colume{
        padding: 5px;
    }

    .third-slid{
        height: 100vh;
        margin-top: 10%;
    }
    #scrolll{
        height: 100vh;
        margin-top: 20%;
    }
    #people{
        margin-top: 0%;
    }
    

    .colour{
        width: 100vw;
        height: 20vh;
   }
   .photo-contant{
       display: flex;
       column-gap: 0.5rem;
   }
   .card-article img{
       width: 77px;
       height: 75px;
       border-radius: 5px;
   
   }
    #circle-pic{
       border-radius: 30px;
      
    }
    .mobile img{
        margin-top:10px;
        width: 350px;
        
     }
     .people{
        display: flex;
        flex-wrap: wrap; 
    }
    .people .para h1{
       font-size: 30px;
    }
    .people .people-data{
       margin-top: 10%;
    }
   .people .para{
    margin-top: 0%;
   }
    
    #pay{
       width: 180px;
       
    }
    input{
       width: 140px;
       padding: 10px;
    }

   
    footer{
        height:50vh;
        display: flex;
        flex-wrap: wrap;
        margin-top: 250px;
        padding-left: 60px;
        padding-right: 60px;

    }
    footer i{
        display: flex;
        flex-wrap: wrap;
        
    }

    .finall{
          flex-wrap: wrap;
          height: 100vh;
      }
      
       .address{
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          row-gap: 30px;
          padding: 0%;

       }
       .address h1{
        font-size: 30px;
       }
       .address p{
        font-size: 20px;
      
       }

       .land-page{

        padding-top:0%;
        height: 80vh;
        display: flex;
        justify-content: center;
        letter-spacing: 2px;    
    }
    .land-page .landing {
        margin-top: 5vh;
        
    }
 
    button i{
        font-size: larger;
        color: rgb(9, 9, 10);
        background-color: white;
        padding-left: 20px;
    }

    

    .colour{
         
        background-image: radial-gradient(closest-side, rgba(103, 191, 223, 0.938),rgb(76, 140, 158),rgb(0, 0, 0));
         margin-top: 0;
         width: 100vw;
         height: 20vh;
         padding-bottom: 50px;
         padding-top: 0px;
    }
    .card-article{
        position: relative;
    
        
    
    }

   

    
}