:root {
    --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Raleway",  sans-serif;
    --nav-font: "Poppins",  sans-serif;
  }
  :root { 
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #272829; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #050d18; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #149ddd; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
  }
  :root {
    --nav-color: #a8a9b4;  /* The default color of the main navmenu links */
    --nav-hover-color: #ffffff; /* Applied to main navmenu links when they are hovered over or active */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #149ddd; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  }
  
  /* Template Custom Colors */
  :root {
    --header-background-color: #040b14;
    --header-color: #ffffff;
  }
.logo{
    width: 120px;
    border: 8px solid rgb(73, 70, 70);
    display: block;
    margin: 15px auto;
}
.navbar{
    width: 300px;
    height: 100vh;
    padding: 0 15px;
    position: fixed;
    background-color: #040b14;
    transition: all ease-in-out 0.3s;
  overflow-y: auto;
  z-index: 997;
  border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.nav-link{
    margin-left: 0;
}
.profile-name a{
   text-decoration: none;
}
.name{
    line-height: 1.5;
    margin-bottom: 15px;
    
}
.name h1{
font-size: 24px;
font-weight: 700;
margin: 0;
color: #fff;
font-family: "Raleway" "sans-serif";
}
 @media (min-width: 1200px) {
  .navbar~main,
  .navbar~#footer {
    margin-left: 300px;
  }
}

@media (max-width: 1199px) {
  .navbar {
    left: -100%;
  }

  .navbar.navbar-show {
    left: 0;
  }
}

.navbar .navbar-show {
  left: 0;
} 
.navbar .header-toggle{
  color: var(--contrast-color);
  background-color: var(--accent-color);
  display: flex;
  font-size: 22px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 999;
  transition: background-color 0.3s;
}
.navbar .header-toggle:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}
.navmenu{
  padding: 0;
  z-index: 9997;
}
.navmenu ul{
  list-style: none;
  padding: 0 0 20px 0;
  margin: 0;
}
.navmenu a,
.navmenu a:focus{
  color: var(--nav-color);
  padding: 15px 10px;
font-family: var(--nav-font);
font-size: 16px;
font-weight: 400;
display: flex;
align-items: center;
white-space: nowrap;
transition: 0.3s;
width: 100%;
}
.navmenu a .navicon,
.navmenu a:focus .navicon{
  font-size: 20px;
  margin-right: 10px;
}
.navmenu a .toggle-dropdown,
.navmenu a:focus .toggle-dropdown{
  font-size: 20px;
  line-height: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
flex-shrink: 0;
background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  margin-left: auto;
}
.navmenu a .toggle-dropdown:hover,
.navmenu a:focus .toggle-dropdown:hover{
  color: var(--contrast-color);
  background-color: var(--accent-color);
}
.navmenu a:hover .navicon,
.navmenu .active .navicon,
.navmenu .active:focus .navicon{
  color: var(--accent-color);
}
.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
  color: var(--nav-hover-color);
}
.navmenu .active .toggle-dropdown,
.navmenu .active:focus .toggle-dropdown{
  color: var(--contrast-color);
  background-color: var(--accent-color);
  transform: rotate(180deg);
}
.navmenu .dropdown{
  display: block;
}
.navmenu .dropdown a,
.navmenu .dropdown a:focus{
  color: --nav-dropdown-color;
}
.navmenu .dropdown a:hover,
.navmenu .dropdown .active,
.navmenu .dropdown .active:focus{
  color: var(--nav-dropdown-hover-color);
}
.navmenu .dropdown ul{
  position: static;
  display: none;
  z-index: 99;
  padding: 5px 10px;
  margin: 5px 10px;
  background-color: var(--nav-dropdown-background-color);
  box-shadow: none;
  transition: all 0.5 ease-in-out;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
/* .navmenu .dropdown:hover > ul,
.navmenu .dropdown ul:hover {
  display: block;
  /* Other styles (e.g., opacity, transition) 
} */
.navmenu .dropdown ul ul{
  background-color: rgba(33, 37, 41, 0.1);
}
.navmenu .dropdown>.dropdown-active{
  display: block;
  background-color: rgba(33, 37, 41, 0.03);
}
.navmenu ul li a{
  text-decoration: none;
}

section,
.section {
  /* color: var(--default-color); */
  background-color: var(--background-color);
  padding: 60px 0;
  overflow: clip;
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  --default-color: #ffffff;
  --background-color: #000000;
  --heading-color: #ffffff;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden ;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 70%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  color: var(--default-color);
}

.hero p {
  margin: 5px 0 0 0;
  font-size: 26px;
  color: var(--default-color);
}

.hero p span {
  letter-spacing: 1px;
  border-bottom: 2px solid var(--accent-color);
 
}

.hero .social-links {
  margin-top: 25px;
}

.hero .social-links a {
  font-size: 24px;
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  line-height: 1;
  margin-right: 20px;
  transition: 0.3s;
}

.hero .social-links a:hover {
  color: var(--accent-color);
}
@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 20px;
  }
}
.about .content h2{
  font-weight: 700;
  font-size: 24px;
  color: #040b14;
}
/* .about .content ul{
  list-style: none;
  padding: 0;

} */
.about .content li{
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  /* list-style: none; */
}
.about .content li strong{
  margin-right: 10px;
}
.about .content li i{
  font-size: 16px;
  margin-right: 5px;
  color: var(--accent-color);
  line-height: 0;
}
.about .row.gy-4 {
  margin-top: 20px;
}

.about .col-lg-4 img {
  max-width: 100%; /* Ensure image does not exceed the column width */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Prevents extra space beneath image */
  margin-top: 1px;
}

.wrapper {
  display: inline-flex;
  list-style: none;
  height: 55px;
  width: auto;
  /* padding-top: 10px; */
  font-family: "Poppins", sans-serif;
  justify-content: center;
}

.wrapper .icon {
  position: relative;
  background: #fff;
  border-radius: 50%;
  margin: 10px 20px 10px 0;
  width: 35px;
  height: 35px;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #fff;
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #fff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
/* .wrapper .facebook{
  margin-left: -5px;
} */
.wrapper .facebook1:hover,
.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1da1f2;
  color: #fff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
  background: #1da1f2;
  color: #fff;
}

.wrapper .instagram1:hover,
.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #e4405f;
  color: #fff;
}
.wrapper .LinkedIn1:hover,
.wrapper .LinkedIn:hover,
.wrapper .LinkedIn:hover .tooltip,
.wrapper .LinkedIn:hover .tooltip::before {
  background: #e4405f;
  color: #fff;
}
.stats .stats-item{
  padding: 30px;
  width: 100%;
}
.stats .stats-items i{
  font-size: 44px;
  color: var(--accent-color);
  display: block;
 line-height: 0;
float: left;
}
.stats .stats-items .purecounter{
  display: block;
  color: var(--heading-color);
  font-weight: 700;
  line-height: 40px;
  font-size: 44px;
  margin-left: 60px;
}
.stats .stats-items p{
  color: color-mix(in srgb, var(--heading-color), transparent 40%);
  font-size: 14px;
  margin: 0 0 0 60px;
  padding: 15px 0 0 0;
  font-family: var(--heading-font);
}
.skills{
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}
.skills .progress{
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}
.skills .progress .skill{
  color: var(--heading-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}
.skills .progress .skill .val{
  float: right;
  font-style: normal;
}
.skills .progress-bar-wrap {
  background: #dfe0e2;
  height: 10px;
}
.skills .progress-bar{
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}
.resume .resume-title{
  font-weight: 700;
  font-size: 26px;
  color: var(--heading-color);
  margin-top: 20px;
  margin-bottom: 20px;
}
.resume .resume-item {
padding: 0 0 20px 20px;
border-left: 2px solid var(--accent-color);
position: relative;
margin-top: -2px;
}
.resume .resume-item h4{
  line-height: 18px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: #383737;
margin-bottom: 10px;
}
.resume .resume-item h5{
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 600;
  display: inline-block;
  padding: 5px 15px;
}
.resume .resume-title ul{
  padding-left: 20px;
}
.resume .resume-item ul li{
  padding-bottom: 10px;
}
.resume .resume-item:last-child{
  padding-bottom: 0;
}
.resume .resume-item::before{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  left: -9px;
  top: 0;
  background: var(--background-color);
  border: 2px solid var(--accent-color);
}
.services .services-item{
  position: relative;
}
.services-item .icon{
  width: 54px;
  height: 54px;
  background-color: var(--accent-color);
  color: var(--default-color);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  display: flex;
  transition: 0.3s;
  border: 2px solid var(--accent-color);
}
.services .services-item .icon i{
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}
.services .services-item:hover .icon {
  background: var(--contrast-color);
}

.services .services-item:hover .icon i {
  color: var(--accent-color);
}
.services .title{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}
.services .title a{
  color: var(--heading-color);
  text-decoration: none;
}
.services .title a:hover{
  color: var(--accent-color);
}
.services .title p{
  font-size: 14px;
  line-height: 24px;
}



/* .testimonials {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider{
  overflow: hidden;
}
.testimonials .testimonial-item{
  box-sizing: content-box;
  min-height: 320px;
text-align: center;
}
.testimonials .testimonial-item .testimonials-img{
  width: 90px;
  border-radius: 50%;
  margin: 0 auto;
}
.testimonials .testimonial-item h3{
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 40%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}
.testimonials .testimonial-item p{
  font-style: italic;
  margin: 0 15px 15px 15px;
  padding: 20px;
  background-color: var(--contrast-color);
  margin-bottom: 35px;
  border-radius: 6px;
  position: relative;
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);

}
.testimonials .testimonial-item p::after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 20px solid var(--contrast-color);
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  bottom: -20px;
  left: calc(50% - 20px);
}
.testimonials .swiper-wrapper{
  height: auto;
}
.testimonials .swiper-pagination {
  margin-top: 40px;
  position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
} */

.testimonials {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  text-align: center;
  min-height: 320px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #333;
  margin: 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 40%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}
  
.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 15px 15px;
  padding: 20px;
  background-color: var(--contrast-color);
  position: relative;
  margin-bottom: 35px;
  border-radius: 6px;
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
}

.testimonials .testimonial-item p::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid var(--contrast-color);
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 20px);
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 40px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}
.contact .info-wrap {
  box-shadow: 0px 0px 20px #dddcdc;
  /* box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%); */

  padding: 30px;
}
@media (max-width: 575px) {
  .contact .info-wrap {
    padding: 20px;
  }
}

.contact .info-item {
  margin-bottom: 40px;
}
.contact .info-item i{
  font-size: 20px;
  color: var(--accent-color);
  /* padding: 20px; */
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out;
margin-right: 15px;
}
.contact .info-item h3{
  font-size: 20px;
  padding: 0;
  font-weight: 700;
  margin-bottom: 5px;
}
.contact .info-item p{
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}
.contact .info-item:hover i{
  background: var(--accent-color);
  color: var(--contrast-color);
}
.contact .php-email-form{
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px #dddcdc;
}
@media(max-width: 575px) {
  .contact .php-email-form{
    padding: 20px;
  }
}
.contact .php-email-form .error-message{
  display: none!important;
  background: #059652;
  color: #ffffff;
  text-align:left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}
.contact .php-email-form .sent-message{
  display: none;
  background: #059652;
  color: #ffffff;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
  text-align: center;
}
.contact .php-email-form .loading{
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}
.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

button {
  align-items: center;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 18px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  transition: all .3s;
 }
 
 button:active,
 button:hover {
  outline: 0;
 }
 
 button span {
  background-color: rgb(5, 6, 45);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
 }
 
 button:hover span {
  background: none;
 }
 
 button:active {
  transform: scale(0.9);
 }
 @keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.footer {
  
  color: var(--background-color);
  background-color: var(--header-background-color);
  font-size: 14px;
  padding: 40px 0;
  position: relative;
}



.footer .credits {
  margin-top: 4px;
  font-size: 13px;
  text-align: center;
}
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}
.alert {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to right, #C33764, #1D2671);
  display: flex;
  flex-direction: column; /* Align items in a column */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  color: white;
  text-transform: uppercase;
  position: fixed;
}

.alert h2 {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  /* margin-bottom: 20px;  */
}

.alert h5 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.alert a {
  text-decoration: none;
  color: #149ddd;
}