* {
cursor: url("/images/CURSOR1.png"), auto;
}
body {
background-color: #121212;
font-family: Arial, Helvetica, sans-serif;
color: #f0f3ff;
margin: 0;
padding: 50px;
text-align: justify;
text-justify: inter-word;
background-image: url("https://i.pinimg.com/originals/e6/c9/e3/e6c9e3d891aa56637847ba09c28fa00c.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
}
/* Custom Scrollbar Styles */
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: #000;
}

::-webkit-scrollbar-thumb {
background-color: #d61c1c;
border: 1px solid black;
border-radius: 10px;
transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
outline: none;
border-color: red;
border-radius: 10px;
box-shadow: 0 0 10px darkred;
}

#homecontent {
display: flex;
margin-left: auto;
margin-right: auto;

color: #fff;
width: 90%;
height: 100%;
text-align: left;
font-size: 2.5em;
}

#homecontent h1 {
margin-left: 26%;
color: #ff5c5c;
}

#homecontent span,
#homecontent div {
font-style: normal;
}

.buttons {
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
}

.buttons .btn {
position: relative;
width: 140px;
height: 20px;
cursor: pointer;
padding: 17px;
padding-left: 26px;
padding-right: 26spx;
align-items: center;
background: none;
border: none;
color: #fff;
font-weight: 500;
font-size: 18px;
margin-bottom: 10px;
z-index: 1;
}

.buttons a {
text-decoration: none;
}

.buttons .btn::before,
.buttons .btn::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(15px);
background: rgba(253, 251, 251, 0.049);
border-radius: 10px;
box-shadow: 20px 20px 50px rgba(74, 65, 57, 0.5);
z-index: -2;
}

.buttons .btn::after {
width: 99%;
height: 75%;
top: 25%;
left: 0.5%;
z-index: -3;
transform: scaleX(0.5);
transition: all 0.3s;
background: linear-gradient(135deg, #f47f0a, #ff045c);
}

.buttons .btn:hover:after {
transform: scaleX(1.01) translateY(-15px);
}

h1,
h3 {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 10px 0;
}

h1 {
font-size: 50px;
color: #ff6347;
}

h3 {
font-size: 30px;
color: gold;
}

p {
font-size: 20px;
line-height: 1.6;
margin: 20px auto;
}

ul {
list-style-type: none;

padding: 20px;
margin: 20px auto;
}

ul.explore,
ul.features,
ul.why {
list-style-type: none;
padding: 20px;
border: 1px solid #f0f3ff;
border-radius: 25px;
margin: 20px auto;
background-color: #151515;
}

li {
margin: 10px 0;
font-size: 20px;
}

.explore li,
.features li,
.why li {
padding-bottom: 10px;
}

.content {
display: flex;
flex-direction: column;
align-items: center;
}

.highlight {
color: #f43636;
font-weight: 900;
text-decoration: underline;
}

.welcome {
line-height: 45px;
}

.welcome .highlight {
display: contents;
}

.popup {
background-color: #282828;
border: 2px solid #f43636;
padding: 10px;
margin: 20px;
border-radius: 10px;
}

.step {
display: flex;
align-items: center;
margin: 20px 0;
font-size: 20px;
flex-direction: column-reverse;
flex-wrap: nowrap;
}

.step img {
width: 50%;
margin-right: 50px;
margin-top: 30px;
border-radius: 10px;
}

.step1 {
display: flex;
align-items: center;
margin: 20px 0;
font-size: 20px;
flex-direction: column-reverse;
flex-wrap: nowrap;
}

.step1 img {
max-width: 250px;
margin-top: 30px;
margin-right: 50px;
border-radius: 10px;
}

.typewriter {
overflow: hidden;
border-right: 0.15em solid #f0f3ff;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 0.15em;
animation: typing 3.5s steps(30, end),
    blink-caret 0.5s step-end infinite;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

@keyframes typing {
from {
    width: 0;
}

to {
    width: 100%;
}
}

@keyframes blink-caret {
from,
to {
    border-color: transparent;
    border-width: 1px;
}

50% {
    border-color: #f0f3ff;
}
}

.bounce {
animation: bounce 0.4s ease infinite alternate;
-webkit-animation: bounce 0.4s ease infinite alternate;
}

@keyframes bounce {
0% {
    text-shadow: 0 5px 0 #ccc, 0 2px 3px rgba(0, 0, 0, 1);
}

100% {
    transform: translateY(-20px);
    text-shadow: 0 50px 0 #000, 0 0 20px rgba(0, 0, 0, 0.8);
}
}

@-webkit-keyframes bounce {
0% {
    text-shadow: 0 5px 0 #ccc, 0 2px 3px rgba(0, 0, 0, 1);
}

100% {
    -webkit-transform: translateY(-20px);
    text-shadow: 0 50px 0 #000, 0 0 20px rgba(0, 0, 0, 0.8);
}
}

@media screen and (max-width: 600px) {
#homecontent h1 {
    margin-left: 10px;
    margin-top: 1px;
    font-size: 25px;
}

.step,
.step1 {
    flex-direction: column;
    align-items: center;
}

.step img,
.step1 img {
    width: 80%;
    margin: 10px 0;
}

h1 {
    font-size: 36px;
}

h3 {
    font-size: 24px;
}

p,
li {
    font-size: 18px;
}

ul {
    padding: 10px;
    margin: 10px auto;
}

.typewriter {
    font-size: 20px;
    width: 100%;
    margin: 0;
    text-align: center;
}

.buttons .btn {
    width: 120px;
    /* Adjust the width */
    height: 15px;
    /* Adjust the height */
    padding: 14px;
    /* Adjust the padding */
    font-size: 16px;
    /* Adjust the font size */
    margin-bottom: 8px;
    /* Adjust the margin bottom */
}
}

.fullCont {
background-color: rgba(0, 0, 0, 0.8);
padding: 20px;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
animation: fadeIn 2s ease-in-out;
border-radius: 20px;
}
@keyframes fadeIn {
from {
    opacity: 0;
    transform: translateY(-20px);
}

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

/* Social Media Icon */
.icons {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
gap: 35px;
background-color: rgb(34, 34, 34); /* Black background */
padding: 20px; /* Padding to provide some space around the icons */
box-shadow: 0 0 10px red; /* Red shadow */
border-radius: 10px;
}

.icons .icon i {
margin-top: 5px;
font-size: 30px;
transition: all 0.9s ease;
color: red;
}

.icons .icon:hover i {
transform: scale(1.2);
}

/* Specific hover color changes */
.icons .icon:hover .fab.fa-facebook {
color: #3b5998;
}

.icons .icon:hover .fab.fa-twitter {
color: #090e11;
}

.icons .icon:hover .fab.fa-instagram {
background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
);
background-clip: text;
border-radius: 20%;
transform: scale(1.5);
color: transparent;
}

.icons .icon:hover .fab.fa-youtube {
color: #c31a1e;
}

.icons .icon:hover .fab.fa-github {
color: #333;
}

.icons .icon:hover .fab.fa-linkedin {
color: #0077b5;
}

/* Responsive design */
@media (max-width: 768px) {
.icons {
    gap: 20px;
    padding: 15px;
}

.icons .icon i {
    font-size: 25px;
}
}

@media (max-width: 480px) {
.icons {
    gap: 15px;
    padding: 10px;
}

.icons .icon i {
    font-size: 20px;
}
}