/*Fonts*/
@font-face {
    font-family: Cabolafe;
    src: url("../fonts/cabolafe_font.otf") format("opentype");
}


/*Main Code*/
.header-container{
    width:100%;
    height:68px;
    background-color:rgba(17,20,39,0.65);
    backdrop-filter: blur(9px);
}
.header-row{
    width:100%;
}
.header-logo{
    margin-left:15px;
    max-width:160px;
}
.header-logo-offcanvas{
  max-width:160px;
}
body{
    background-color:#111427;
}
.offcanvas-menu{
  background-image:linear-gradient(to bottom, rgba(17, 20, 39, 0.80), rgba(17, 20, 39, 0.80)), url('../images/patterns/pattern-offcanvas.png');
}


/*First Section CSS*/
.first-section{
    overflow: hidden;
    width: 100vw;
    height:800px;
}
/* .first-section-content{
    width:100%;
    position:absolute;
    margin-top:-800px;
} */
.gradient-container{
  z-index:800;
  width:100%;
}
.first-section-image-container{
  z-index:900;
  position:relative !important;
  max-height:700px;
  margin-top:-410px;
}
.first-section-content h1{
    color:white;
    font-weight:bold;
}
@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .gradient-background{
    /* position:relative; */
    margin-top:400px;
    --size: 1000px;
    --speed: 6s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
    width: var(--size);
    height: var(--size);
    filter: blur(calc(var(--size) / 5));
    background-image: linear-gradient(rgba(32, 175, 246, 0.85), #910ee8);
    animation: rotate var(--speed) var(--easing) alternate infinite;
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  }
  @media (min-width: 720px) {
    .gradient-background{
      --size: 800px;
    }
    .first-section-content{
        width:100%;
        position:absolute;
        margin-top:-1050px;
    }
    .first-section-image-container{
      z-index:900;
      position:relative !important;
      max-height:700px;
      margin-top:-350px;
    }
  }
  * {
    transition: all 0.25s ease-out;
  }
  @media (max-width: 900px) {

    .first-section-content{
        width:100%;
        position:absolute;
        margin-top:-900px;
    }
  }
  * {
    transition: all 0.25s ease-out;
  }
  @media (max-width: 800px) {

    .first-section-content{
        width:100%;
        position:absolute;
        margin-top:-850px;
    }
  }
  * {
    transition: all 0.25s ease-out;
  }
  @media (max-width: 600px) {

    .first-section-content{
        width:100%;
        position:absolute;
        margin-top:-750px;
    }
  }
  * {
    transition: all 0.25s ease-out;
  }



/*Second Section*/
.second-section{
    overflow: hidden;
    width: 100vw;
    /* min-height:590px; */
    padding-top:100px;
    background-image:linear-gradient(to bottom, rgba(38, 29, 100, 0.7), rgba(38, 29, 100, 0.7)), url('http://assets.iceable.com/img/noise-transparent.png');
}

/*Third Section*/
.third-section{
  overflow: hidden;
  width: 100vw;
  padding-top:130px;
  padding-bottom:130px;
  background-image:linear-gradient(to bottom, rgba(17, 20, 39, 0.5), rgba(17, 20, 39, 0.5)), url('http://assets.iceable.com/img/noise-transparent.png');
  
}

/*Fifth Section*/
.fifth-section{
  overflow: hidden;
  width: 100vw;
  padding-top:100px;
  padding-bottom:60px;
  background-image:linear-gradient(to bottom, rgb(247, 154, 92, 0.75), rgba(247, 154, 92, 0.75)), url('http://assets.iceable.com/img/noise-transparent.png');
  
}

/*Sixth Section*/
.sixth-section{
  overflow: hidden;
  width: 100vw;
  padding-top:90px;
  padding-bottom:90px;
  background-image:linear-gradient(to bottom, rgba(17, 20, 39, 0.50), rgba(17, 20, 39, 0.50)), url('http://assets.iceable.com/img/noise-transparent.png');
}


/*Fourth Section*/
.fourth-section{
  overflow: hidden;
  width: 100vw;
  padding-top:100px;
  padding-bottom:60px;
  background-image:linear-gradient(to bottom, rgb(247, 154, 92, 1), rgba(247, 154, 92, 1)), url('../images/patterns/pattern-fourth-section.png');
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Prevent the background from repeating */
  background-size: cover;
}




.icon-image{
width:100px;
}

.custom-card {
  background-color: #2D3748; /* Dark gray/blue background */
  color: #FFF; /* White text */
  border: none;
  border-radius: 10px; /* Rounded corners */
}

.custom-card .card-title {
  font-size: 1.25rem; /* Larger title font */
}

.custom-card .card-body {
  padding: 30px; /* Spacious padding around the content */
}

/* Additional media query for responsiveness (optional) */
@media (max-width: 576px) {
  .custom-card .card-body {
    padding: 1rem;
  }
}







/*Text Classes*/
  .menu-text {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-decoration:none;
    color:rgb(220, 220, 220);
    font-size:14px;
    margin-right:10px;
    margin-left:10px;
    margin-top:2px;
  }

  .menu-text-offcanvas {
    font-family: "Roboto", sans-serif;
    font-weight: 540;
    font-style: normal;
    text-decoration:none;
    color:rgb(220, 220, 220);
    font-size:18.5px;
    margin-bottom:15px;
    margin-top:15px;
    margin-left:15px;
  }

  .menu-text-offcanvas {
    cursor: pointer;
  }
  
  .menu-text {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .special-text {
    font-family: "Cabolafe", "opentype";
    letter-spacing: 2px;
  }
  
  .menu-text::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: #F79A5D;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow:
      0 2px 1px rgba(0,0,0,0.1),
      0 4px 1px rgba(0,0,0,0.1),
      0 6px 1px rgba(0,0,0,0.1),
      0 8px 1px rgba(0,0,0,0.1);
  }
  
  .menu-text:hover::after {
    opacity: 1;
  }

  .title-text {
    font-family: 'Ubuntu', sans-serif;
    font-size: calc(2.375rem + 1.5vw);
  }
  .subtitle-text-color {
    font-family: 'Ubuntu', sans-serif;
    font-size: calc(2rem);
    color:#9BB1C2;
  }
  .subtitle-text {
    font-family: 'Ubuntu', sans-serif;
    font-size: calc(2rem);
  }
  .button-text {
    font-family: 'Ubuntu', sans-serif;
  }
  .description-text {
    margin-top:20px;
    color:#B2B3CC;
  }


/*Custom responsive*/
.lg-nav-custom{
  display:block;
}
.sm-nav-custom{
  display:none;
}
@media (max-width: 991px) {
  .lg-nav-custom{
    display:none;
  }
  .sm-nav-custom{
    display:block;
  }
}







/*Stars*/
#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
}

.star {
  position: absolute;
  width: 2px; /* Ancho de la cola en su punto más fino */
  height: 200px; /* Longitud máxima de la cola */
  background: linear-gradient(to top, white, rgba(255,255,255,0)); /* Gradiente de blanco a transparente */
  transform-origin: bottom; /* Asegúrate de que la estrella se escala desde la parte inferior */
  animation: fall linear forwards;
}

@keyframes fall {
  0% {
      transform: translateY(-100vh) scaleY(0); /* La cola empieza comprimida y fuera de la pantalla */
      opacity: 1;
  }
  100% {
      transform: translateY(100vh) scaleY(1); /* La cola se estira y desciende por la pantalla */
      opacity: 0;
  }
}