* {
  padding: 0px;
  margin: 0px;
  font-family: "Predator";
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Predator;
  src: url(../Fonts/Squares-Regular.otf);
}

/* Customize scrollbar for WebKit browsers */
body::-webkit-scrollbar {
  width: 12px; /* width of the scrollbar */
}

/* Track */
body::-webkit-scrollbar-track {
  background: #010d16; /* color of the track */
  border-radius: 15px;
}

/* Handle */
body::-webkit-scrollbar-thumb {
  background: #01a8b4; /* color of the handle */
  border-radius: 15px;
}

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
  background: #01a8b4; /* color of the handle on hover */
}
body {
  background-color: #010d16;
  overflow-x: hidden;
}

.h-grad {
  background-image: linear-gradient(
    to right,
    rgb(11, 206, 206),
    #0571c3
  ); /* Adjust colors as needed */
  -webkit-background-clip: text; /* Clip text to the background's shape */
  -webkit-text-fill-color: transparent; /* Make the text transparent */
}
.code-grad {
  background-image: linear-gradient(
    to right,
    rgb(11, 206, 206),
    #0571c3
  ); /* Adjust colors as needed */
  -webkit-background-clip: text; /* Clip text to the background's shape */
  -webkit-text-fill-color: transparent; /* Make the text transparent */
}
a {
  text-decoration: none;
}

.cap-l {
  font-weight: bolder;
}
.cap-l-l {
  background-image: linear-gradient(
    to right,
    rgb(11, 206, 206),
    #0571c3
  ); /* Adjust colors as needed */
  -webkit-background-clip: text; /* Clip text to the background's shape */
  -webkit-text-fill-color: transparent; /* Make the text transparent */
}
#p-light {
  color: #bcbcbcd5;
}

/* header photo */

.header-photo {
  width: 100%;
  height: 550px;
  background-image: url("../Images/main-bg.jpg");
  background-size: cover;
  background-position: center;
}
.gradint {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#010d16b9, #010d16);
}

/* Nav bar */

header {
  width: 100%;
  height: 120px;
}

/* nav logo */
.logo-back {
  width: 100%;
  height: 100%;
  max-width: 80%;
}

.logo img {
  max-width: 55%;
  background-color: #031726;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
.logo img:hover {
  transform: scale(1.1);
  box-shadow: 1px 1px 5px 1px #05eeffe3;
}

/* nav list */

.nav-list {
  border: 3px solid #038c96;
  border-radius: 25px;
  background-image: linear-gradient(to left, #020d15, #041a2b);
}
.nav-list ul {
  list-style: none;
}

.nav-list a {
  text-decoration: none;
  color: white;
  transition: all 0.1s ease-in-out;
}
.nav-list li {
  transition: all 0.1s ease-in-out;
}
.nav-list li a:hover {
  color: #05eeff;
}

/* button */

.nav-btn {
  text-decoration: none;
  color: #000;
  background-color: rgb(88, 225, 255);
  padding: 6px 30px;
  border: none;
  border-radius: 30px;
  font-weight: bolder;
  transition: all 0.2s ease-in-out;
}

.download .nav-btn:hover {
  background-color: rgb(47, 142, 163);
}

/* header*/
.header-contet {
  width: 100%;
}

.header-text > p {
  color: #05eeff;
  font-size: 18px;
  font-weight: bolder;
}
.header-text h1 {
  font-weight: bolder;
  font-size: 40px;
}

/*header buttons */
.head-fbtn {
  color: #000;
  background: #05eeffdf;
  padding: 10px 50px;
  border-radius: 30px;
  font-weight: bolder;
  transition: all 0.2s ease-in-out;
  border: 0px solid;
}
.head-fbtn:hover {
  color: white;
  background-color: transparent;
  border: #01a8b4 3px solid;
}

.head-sbtn {
  color: #010d16d1;
  background-color: transparent;
  border: #05eeffdf solid 3px;
  color: white;
  padding: 10px 50px;
  border-radius: 30px;
  font-weight: bolder;
  transition: all 0.2s ease-in-out;
}

.head-sbtn:hover {
  color: #010d16d1;
  background-color: #05eeff;
  border: none solid 3px;
}

/* About */

.about,
.benifets {
  width: 100%;
  /* height: 700px; */
  background-color: #010d16;
}

.internal-box {
  height: 95%;
  background-color: #041a2b;
  border-radius: 15px;
  transition: all 0.1s ease-in-out;
  color: white;
}

.internal-box:hover {
  box-shadow: 0 5px 5px 1px #01a8b4;
}
.internal-box > h1 {
  font-weight: bolder;
  font-size: 45px;
  color: #54b5c1;
}

/*About img **/
.about-img img {
  object-fit: cover;
  max-width: 75%;
}

/* benift */
.benf-cont {
  height: 70%;
}

.benf-img img {
  max-width: 100%;
}
.ben-list ul li {
  margin-bottom: 8px;
}

/*Cards */
.cards {
  width: 100%;
  /* height: 850px; */
}
.card-cards {
  background-color: #031726;
  border-radius: 10px;
  height: 15em;
  transition: all 0.2s ease-in-out;
}
.card-cards:hover {
  padding: 20px;
  box-shadow: 0px 5px 5px #01a8b4;
}

.card-cards > h2 {
  font-weight: 700;
}

/* footer */

footer {
  border-top: #04bdcb 1px solid;
  /* height: 290px; */
  width: 100%;
  background-image: linear-gradient(
    to left,
    #000000,
    #040b11,
    rgb(4, 13, 21),
    #041a2b
  );
}

footer li {
  list-style: none;
}
footer li a {
  color: #bcbcbcd5;
  transition: all 0.2s ease-in-out;
}
footer li a:hover {
  color: #01a8b4;
}
footer svg {
  height: 30px;
  border-radius: 100%;
  transition: all 0.2s ease-in-out;
}
footer svg:hover {
  transform: scale(1.2);
}

.links-list {
  margin-right: 100px;
}

/* second navbar */
.logo-back-second {
  width: auto;
  height: 100%;
  max-width: 50%;
}

.nav-second-list a {
  text-decoration: none;
  color: white;
  transition: all 0.1s ease-in-out;
}

.nav-second-list li a:hover {
  color: #05eeff !important;
}

.nav-second {
  position: fixed;
  box-shadow: 0px 3px 5px #05eeffe3;
  width: 100%;
  z-index: 1;
  left: 0;
  background-color: black;
  top: -100%;
  transition: top 1s ease;
}

.nav-button {
  background-color: transparent;
  color: #05eeff;
  outline: none;
  border: none;
}

/* mobile menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  background-color: #041a2b;
  width: 80vw;
  height: 100vh;
  z-index: 2;
  transition: left 1s ease;
}

.logo-mobile {
  width: 50px;
}

.logo-mobile img {
  width: 100%;
  height: auto;
}

#closeBtn {
  position: absolute;
  font-size: 20px;
  top: 10px;
  right: 10px;
  background-color: transparent;
  color: white;
  outline: none;
  border: none;
}

/* meadia queries */
@media (min-width: 768px) {
  .header-text h1 {
    font-weight: bolder;
    font-size: 70px;
  }
}