@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
       padding: 0;
       margin: 0;
       box-sizing: border-box;
       font-size: inherit;
       font-family: 'poppins', sans-serif;
       

}

html {
       font-size: 55.5%;
       background-image: linear-gradient(to right, black, rgb(3, 3, 28), rgb(3, 3, 28), black);
       overflow-x: hidden;
}

:root {
       --text-color: #fff;
       --buttons-color: #DB4444;
       --green: #00953c;
       --text-second-color: rgb(174, 172, 172);
       --star-color: #FFAD33;
       --star-dark-color: #8D8D8D;
       --blue-color: #326994;
       --Circle-color: #817D7D;
       --blue: #5557d1;

       --bg-color: #09031B;
       --sec-bg-color: #344162;
       --text-color: #ffffff;
       --white: #fdfdfd;
       --sub-color: #e4d4f9;

}

.all {
       width: 100vw;
       height: 100vh;


       font-family: 'Times New Roman', Times, serif;
       animation: transitionIN 1s;


}
.search-icon {
       color: var(--text-color);
}

.heart {
       color: var(--text-color);
}

.home-nav {

       display: flex;
       padding: 1rem;
       justify-content: space-around;
       font-size: 1.5rem;
       position: relative;
       top: 1.5rem;
       font-weight: 800;

}

.i {
       margin-right: 1rem;
       text-decoration: none;
       color: var(--text-color);
       transition: all 0.5s;
       font-weight: 800;

}


h2 {
       color: var(--text-color);
}

.home-nav h2 {
       font-size: 2rem;
}

.i:hover {
       color: var(--buttons-color);
}


.input input {
       border: none;
       outline: none;
       font-size: 1.25rem;
       width: 22rem;
       height: 3rem;
       border-radius: 2rem;
       color: var(--text-second-color);
       text-align: center;

}

/***********************/


.ourstory
{
      margin: 3rem 0;
      width: 100vw;
      height: 40rem;
       color: var(--text-color);
       display: flex;
       justify-content: space-around;
       align-items: center;
       z-index: 5;
       
}
.ourstory .text
{
       display: flex;
       flex-direction: column;
       width: 40vw;
       height: 20rem;
       justify-content: space-around;
       
       

}
.ourstory h1
{
       width: 100%;
       font-size: 3rem;
       padding-bottom: 1rem;
      
       
       animation: goright 2s;
       

}

.ourstory .p1
 {
       font-size: 1.2rem;
             
       animation: goright 2s;
       font-family: 'Times New Roman', Times, serif;
       padding-bottom: 1.2rem;
             
              

 }
 .ourstory .p2 {
       font-size: 1.2rem;
     
       animation: goright 2s;
font-family: 'Times New Roman', Times, serif
        


 }
 .ourstory img
 {
       width: 30vw;
       height: 30rem;
    
       animation: goleft 2s;

 }
.Circles {
       width: 100vw;
       display: flex;
       justify-content: space-around;
       margin: 2rem 0;
      



}

.cin {
       width: 3rem;
       height: 3rem;
       background-color: var(--text-color);
       padding: 1rem;
       border-radius: 2rem;
}

.cout {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 4rem;
       height: 4rem;
       background-color: #5b5b5b4d;
       border-radius: 2rem;
       
       border: 0.1rem solid black;
}
.txtc1 {
       
       font-size: 3rem;
}

.txtc2 {
       font-size: 3rem;
}

.txtc3 {font-size: 3rem;}
.one
{
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       padding: 2rem;
       border: 0.1rem solid white;
       font-family: cursive;
       
}
.two
{
       display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
       padding: 2rem;
       border: 0.1rem solid white;
font-family: cursive;
       

}
.three
{
       display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
       padding: 2rem;
       border: 0.1rem solid white;
    font-family: cursive;

      
}
.one p
{
       color: var(--blue-color);
}
.two p {
       color: var(--blue-color);
}
.three p {
       color: var(--blue-color);
}







.items {
       color: var(black);

}

.items {
       width: 100vw;
       height: 22rem;
       margin: 0 1rem;
       display: flex;
       justify-content: space-around;
       margin: 10rem 0;
}

.box img {
       background-color: var(--text-color);
       padding: 1.5rem;
       width: 15rem;
       height: 15rem;
       border-radius: 1rem;
       margin-left: 1rem;
}



.item {
       color: #DB4444;
       transition: transform 0.25s;
       font-size: 1.5rem;

}

.item img
{
       height: 35rem;
}
.item:hover {
       transform: scale(0.96);
}


.discription {
       margin-left: 0.2rem;
}

.title {
       color: var(--text-color);
       font-family: sans-serif;
       font-size: 3rem;
}

.move
{
       position: relative;
       top: 20rem;
      
}
.fontbig
{
       font-size: 1.5rem;
}
.fontsmall
{
       font-size: 1rem;
      

}


footer {
       background-color: black;
       width: 100vw;
       height: 15rem;
       position: relative;
       top: 25rem;
}























@keyframes goright{
       from{
              opacity: 0;
              transform: translateX(-5rem);

       }
       to
       {
              opacity: 1;
              transform: translateX(0);

       }
}
@keyframes goleft {
       from {
              opacity: 0;
              transform: translateX(5rem);

       }

       to {
              opacity: 1;
              transform: translateX(0);

       }
}









.userName {
       color: white;
}














/**********************/
















@keyframes transitionIN {
       from {
              opacity: 0;
              transform: scale(1.2);


       }

       to {
              opacity: 1;
              transform: scale(1);
       }
}


.container
{
       width: 100vw;
       height: 100vh;
       position: absolute;
       display: flex;
       overflow: hidden;
       z-index: -1;

}
.bubbles
{
       position: relative;
       display: flex;
}
.bubbles span
{
       position: relative;
       width: 3rem;
       height: 3rem;
       background-color: #4fc3dc;
       margin: 0 0.4rem;
       border-radius: 50%;
       box-shadow: 0 0 0 1rem #4fc3dc44,0 0 5rem #4fc3dc , 0 0 10rem #4fc3dc;
       animation: animate  ease-in infinite;
       animation-duration: calc(250s/var(--i));
     
       


}
.bubbles span:nth-child(even)
{
       background-color: #ff2d75;
       box-shadow: 0 0 0 1rem #ff2d7544,0 0 5rem #ff2d75,
       0 0 10rem #ff2d75;
}

@keyframes animate {
       0%
       {
              opacity: 0.1;
              transform: translateY(200vh) scale(0);
       }
       100%
       {
              opacity: 0.1;
              transform: translateY(-10vh) scale(1);

       }
       
}
div.footer{
       margin-top: 300px;
       padding-bottom: 300px;
       background-color: black;
       text-decoration: none;
       
}
span.footer_content{
       margin-left: 200px;
       
       
}
.account span{
       text-decoration: none;
       
}
.footer a{
       text-decoration: none;
       color: aliceblue;
       font-family:'Times New Roman', Times, serif ;
}


@media (max-width:700px) {
.home-nav
{
       font-size: 1.25rem;
}
.input
{
       display: none;
}

.ourstory
{
       display: flex;
       flex-direction: column-reverse;
       justify-content: start;
       align-items: center;
       width: 100vw;
       height: 65rem;
       margin:  2rem 0;

}
.ourstory img
{
       width: 80%;
       justify-self: start;
       margin: 2rem 0;
       left: 0;
}
.text
{

       width: 80vw;
       align-self: flex-start;
       justify-self: flex-end;
       position: relative;
       left: 2rem;
       margin: 0;
       bottom: 0;
 
}
.p1
{
       width: 80vw;

}
.p2
{
       width: 80vw;
       display: none;

}
.Circles
{
       font-size: 0.75rem;
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
}
.items
{
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       height: 100rem;
}







       
}