*{
    padding: 0;
    margin: 0;
   box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;

}
.header{
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    border-bottom: 2px solid #96fcf2;  
    position: sticky;
    top: 0;
    background: white;
}
.header h2{
            color: transparent;
    background: linear-gradient(280deg,blueviolet,rgb(236, 43, 75),orange,blue);
    background-clip: text;
    animation: check1 linear infinite 2s;
}
@keyframes check1{
0%{
color:transparent;
background: linear-gradient(280deg,blueviolet,orange);
background-clip: text;
}
100%{
color:transparent;
background: linear-gradient(280deg,blue,rgb(236, 43, 75));
background-clip: text;
}

}
.header .links a{
        color: transparent;
    background: linear-gradient(280deg,blueviolet,rgb(236, 43, 75),orange,blue);
    background-clip: text;
    animation: check1 linear infinite 2s;
}
@keyframes check1{
0%{
color:transparent;
background: linear-gradient(280deg,blueviolet,orange);
background-clip: text;
}
100%{
color:transparent;
background: linear-gradient(280deg,blue,rgb(236, 43, 75));
background-clip: text;
}
}

.offer{
    width:100%;
    height:40%;
    background: linear-gradient(210deg, #75f6df);
    display: grid;
    place-content: center;
    position: sticky;
    top:80px;

}
.offer p{
    font-size:0.9em;
    color:rgb(57, 57, 232);
    font-weight: 550;
}
.header .links{
   display: flex;
   align-items: center;
   justify-content: start;
   gap:30px;
}
.header .links a{
    text-decoration: none;
    font-size: 0.9em;
    color:#333;
    position: relative;
}
.header .links a::after{
    content:'';
    position: absolute;
    width: 0%;
    background: linear-gradient(210deg,black);
    height: 5px;
    left:0;
    bottom: -10px;
    border-radius: 5px;
    transition: all ease-in 0.2s;
}
.header .links a:hover::after{
    width:100%;
}
.Homepage{
    width:100%;
    height: 550px;
    margin-top: -70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;

}
.Homepage .background,
.Homepage .content{
    width:90%;
    height: 60%;
}
.Homepage .background{
  background: url('https://cdn.dribbble.com/userupload/14992917/file/original-cbe454129ff2b2e1c7b513466c43817a.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 10px;
}
.Homepage .content{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-self: center;
    gap: 1.5em;
}
.Homepage .content h2{
    font-size: xx-large;
    color: transparent;
    background: linear-gradient(280deg,blueviolet,rgb(236, 43, 75),orange,blue);
    background-clip: text;
    animation: check1 linear infinite 2s;
}
@keyframes check1{
0%{
color:transparent;
background: linear-gradient(280deg,blueviolet,orange);
background-clip: text;
}
100%{
color:transparent;
background: linear-gradient(280deg,blue,rgb(236, 43, 75));
background-clip: text;
}
}
.Homepage .content p{
    line-height: 30px;
    padding-right: 50px;
    text-align: justify;
}
.Homepage .content button{
    padding: 8px 15px;
    border: 2px solid #444;
    color:#444;
    cursor: pointer;
    outline: none;
    border-radius: 4px;
    background: white;
    font-weight: 510;
    transition: all ease-in 0.2s;
}
.Homepage .content button:hover{
    box-shadow: inset 150px 0px 0px #444;
    color: white;
}
.container{
    width:100%;
    padding: 10px 5%;
    background: rgb(254, 224, 229);
    margin-top: 1.5em;
}
.container .grid-container{
    width: 100%;
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:1em;
    margin-top: 25px;
}
.container .grid-container .card{
    width:100%;
    box-shadow: 3px 5px 8px rgba(0,0,0,0.8);
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:0.8em;
    border-radius: 5px;
    overflow: hidden;
}
.container .grid-container .card img{
    width: 80%;
    height: 200px;
    object-fit: cover;

}
.container .grid-container .card h2{
    font-size: 1em;
}
.container .grid-container .card p{
    padding:5px 5%;
    text-align: justify;
    font-size: 0.90m;
}
.center1{
    position: fixed;
    width:100px;
    height: 100px;
    background: linear-gradient(310deg,pink, rgb(235, 72, 99),rgb(57, 57, 232),purple);
    top: 50%;
    left: 50%;
    border-radius: 10%;
    translate: -50% -50%;
    z-index: 10;
     animation: rotate1 linear infinite 1s; 
}
.center2{
    position: absolute;
    width:120px;
    height: 120px;
    background: linear-gradient(310deg,pink);
    top: 50%;
    left: 50%;
    border-radius: 10%;
    translate: -50% -50%;
    z-index: 5;
     animation: rotate1 linear infinite 4s; 
}
.center3{
    position: fixed;
    width:140px;
    height: 140px;
    background: linear-gradient(orange);
    top: 50%;
    left: 50%;
    border-radius: 10%;
    translate: -50% -50%;
    z-index: 2;
     animation: rotate1 linear infinite 6s; 
}
.center4{
    position: fixed;
    width:160px;
    height: 160px;
    background: linear-gradient(rgb(252, 252, 90));
    top: 50%;
    left: 50%;
    border-radius: 10%;
    translate: -50% -50%;
    z-index: 0;
    animation: rotate1 linear infinite 8s; 
}
@keyframes rotate1{
    100%{
    rotate:360deg;
}
}
@keyframes rotate1{
    100%{
    rotate:-360deg;
}
}
.right-side{
    position:fixed;
    top:150px;
    right:0;
    padding: 8px;
    background: linear-gradient(310deg,pink, rgb(235, 72, 99),rgb(57, 57, 232),purple);
    border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: beige;
    font-weight:510;
    cursor:pointer
}