:root {
--main-color: #550000;
--main-color-hover: #440000;
--background-color: #000
}
/*#0c111d*/

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

body {
background: white;
}

/*
@media (prefers-color-scheme: dark) {
body {
background-color: var(--background-color);
color: #ffffff;
}
}

@media (prefers-color-scheme: light) {
body {
background-color: #ffffff;
color: #000000;
}
}
*/
img {width: 100%}

button, .button {
border-radius: 20px;
border: none;
color: black;
background : #fff;
transition: 0.1s;
padding: 6px 16px;
text-decoration: none
}

.button2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    width: 200px;
    height: 50px;
    border-radius: 14px;
    color: #000d;
}


button:hover, .button:hover, .button2:hover {
background : #f0f0f0;
}

.appear {opacity : 0;transform: translateY(200px); animation : appear 1s linear forwards; animation-timeline: view(); animation-range : entry 0% cover 50%}
.appear:nth-child(2) {transform: translateY(400px)}
.appear:nth-child(3) {transform: translateY(600px)}
.appear:nth-child(4) {transform: translateY(800px)}



.feature-card {
margin: auto ; width: 100%; padding : 20px; display: flex; flex-direction : column; gap : 6px
}
.feature-card-content {
color : white; text-align: center; display: flex; flex-direction : column; gap : 4px; align-items: center
}
.feature-card-content p {
margin-bottom : 8px
}


@keyframes appear {
from {opacity : 0;}
to {opacity : 1 ;transform: translateY(0px)}
}

.slide-left {opacity : 0;transform: translateX(-50px); animation : slide-left 1s linear forwards; animation-timeline: view(); animation-range : entry 0% cover 50%}

@keyframes slide-left {
from {opacity : 0;transform: translateX(-50px)}
to {opacity : 1 ;transform: translateX(0px)}
}

.fade-in {opacity : 0; animation : fade-in 1s linear forwards; animation-timeline: view(); animation-range : entry 0% cover 50%}

@keyframes fade-in {
0% {opacity : 0;}
50% {opacity : 0;}
100% {opacity : 1 ;transform: translateY(0)}
}

/*
.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in;
}

.fade-in.visible {
  opacity: 1;
}

*/