body { overflow:hidden; }
body.pageloaded { overflow:inherit; background:-webkit-linear-gradient(left, rgba(22, 43, 50,1) 0%, rgba(11, 47, 71,1) 100%); }

#skip-anime { z-index:1111; }
#skip-anime a { position:relative; width:auto; display:inline-block; }
.animation-wrap { background: -moz-linear-gradient(left, rgba(22, 43, 50,1) 0%, rgba(11, 47, 71,1) 100%); background: -webkit-linear-gradient(left, rgba(22, 43, 50,1) 0%, rgba(11, 47, 71,1) 100%); background: linear-gradient(left, rgba(22, 43, 50,1) 0%, rgba(11, 47, 71,1) 100%); overflow: hidden; width:100%; min-height:100vh; }
.animation-wrap .second-animation { z-index:111; }
.first-animation { position: relative;  z-index: 1; }

 
 
/* .first-animation { 
  background: -moz-linear-gradient(left, rgba(22, 43, 50,1) 0%, rgba(11, 47, 71,1) 100%);
  background: -webkit-linear-gradient(left, rgba(22, 43, 50,1) 0%, rgba(11, 47, 71,1) 100%);
  background: linear-gradient(left, rgba(22, 43, 50,1) 0%, rgba(11, 47, 71,1) 100%);
} */

{#.animation-wrap { background: linear-gradient(to right, #142226 0%, #022A40 50%, #142226 100%); overflow: hidden; min-height:100vh; } #}
.first-animation{ height: fit-content; pointer-events: none;  }
.first-animation-text{ font-size: 80px;  font-weight: 600;         line-height: 1.22;         margin-top: 0;       margin-bottom: 0; height: fit-content; white-space: nowrap; backface-visibility: hidden; transform-style: preserve-3d; -webkit-font-smoothing: antialiased; pointer-events: none; color:#fff; }
.first-animation-text i{ color: #eb5765; font-style: normal;    }
.first-animation-wrapper{   height: 100vh;  width: 100%;  display:flex;    justify-content: center;  align-items: center; -webkit-font-smoothing: antialiased; }
.top-animation-text{ display:flex; flex-direction: row; height: fit-content; position: relative; align-items:center; -webkit-font-smoothing: antialiased; margin-right: -50px; }

.top-animation-text svg{ width: auto; height: 85%; right: 100%; margin-right: 50px; position: absolute; }
.top-text-background{ position: absolute; z-index: -1; left:50%; transform: translateX(-50%); margin-top: 5%; width: 100%; opacity: 0; pointer-events: none; }

#second-animation-svg { height: 640px; width: 640px; flex-shrink: 0; opacity: 0; display: flex; justify-content: flex-end; position: relative; margin-top: 30px;            /* padding-right: 100px; */ box-sizing: border-box; transition: 0.5s ease-out; }
#second-animation-svg.active { opacity: 1; }
.second-animation {  max-width: 1600px; margin: 0 auto; margin-top: -230vh; display: flex; flex-direction: row; justify-content: center; padding-top: 145px; column-gap: 150px; padding-bottom:180px;  }
.second-animation-text h3 { color:#fff; font-size: 86px; font-weight: 600; line-height: 100%; margin-top: 14vh; margin-bottom: 57px; }
.second-animation-text p { font-size: 28px; font-weight: 500; margin-top: 0; margin-left: 6px; color:#fff; }
#second-animation-svg-big-circle { height: 640px; width: 640px; pointer-events: none; transform: rotate(-67deg); }
#second-animation-svg-icon-1 { position: absolute; width: 150px; top: 12%; right: -2%; transform: scale(0.3) rotate(40deg);            /* transform-origin: center; */            /* transform: translate(var(--translateX), var(--translateY)) scale(0.5); */ }
.second-animation-button.active { transform: scale(1); }
@media (min-width:768px) {
    #second-animation-svg-icon-1 { transform: scale(0.5) rotate(60deg); }
    #second-animation-svg-icon-1.active { transform: scale(1) rotate(0deg); }
    #second-animation-svg-icon-2 { transform: scale(0.5) rotate(90deg); }
    #second-animation-svg-icon-3 { transform: scale(0.5) rotate(270deg); }
    .active-button-1 #second-animation-svg-icon-2 { transform: scale(0.5) rotate(90deg); }
    .active-button-1 #second-animation-svg-icon-3 { transform: scale(0.5) rotate(270deg); }
    .active-button-2 #second-animation-svg-icon-1 { transform: scale(0.5) rotate(120deg); }
    .active-button-2 #second-animation-svg-icon-3 { transform: scale(0.5) rotate(300deg); }
    .active-button-3 #second-animation-svg-icon-2 { transform: scale(0.5) rotate(60deg); }
    #second-animation-svg-icon-2.active { transform: scale(1) rotate(120deg); }
    #second-animation-svg-icon-3.active { transform: scale(1) rotate(240deg); }
  
    .second-animation-button.active svg { opacity: 0; }
    .second-animation-button:hover .second-animation-button-not-active { transform: scale(1) !important; }
    .second-animation-button:not(.active) { cursor: pointer; }
    .second-animation-button:not(.active):hover .second-animation-button-not-active-bg { opacity: 1; transform: scale(1); }
    .second-animation-button:not(.active):hover .second-animation-button-plus-icon line { stroke: black; }
}
#second-animation-svg-icon-2 { position: absolute; width: 150px; top: 86%; right: 37%; }
.second-animation-text-1 { opacity: 0; }
#second-animation-svg-icon-3 { position: absolute; width: 150px; top: 17%; right: 80%; }
.second-animation-text { position: absolute; top: 0; left: 0; opacity: 0; margin-left: 50px; }
.second-animation-text-wrapper { position: relative; width: 620px; height: 100%; }
.second-animation-button { transition: 0.5s ease-in-out; border: 1px solid white; height: 150px; width: 150px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, #14262b 0%, #14262b 1%, #002942 52%, #14262d 100%);            /* transform: scale(0.3);
                transform-origin: center; */ }
    .second-animation-button-image { transition: 0.5s ease-out; opacity: 0; }
    .second-animation-button-image-bg { transition: 0.5s ease-out; opacity: 0; }
    @keyframes pulsateBoth {
        0%, 66.67% { transform: scale(0.6); }
        33.34% { transform: scale(1); }
        100% { transform: scale(0.6); /* This keeps it at the starting point during the delay */ }
    }
    .second-animation-button-not-active { width: 100%; height: 100%; position: absolute; background-color: white; animation: pulsateBoth 2.5s infinite; /* Increased to 3s to include the delay */ border-radius: 50%; transition: transform 0.5s ease-out; opacity: 0.5; }
    .second-animation-button-not-active-bg { width: 100%; height: 100%; position: absolute; background-color: white; transform: scale(0.6); border-radius: 50%; transition: 0.3s ease-out; opacity: 0; }
    .second-animation-button.active .second-animation-button-not-active-bg { opacity: 0; }
    .second-animation-button.active .second-animation-button-not-active { opacity: 0 !important; animation: none; }
    .second-animation-button.active .second-animation-button-image { opacity: 1; }
    .second-animation-button.active .second-animation-button-image-bg { opacity: 1; }
    .second-animation-button-1-image { position: absolute; width: 105px; height: 105px; }
    .second-animation-button-1-image-bg { position: absolute; width: 150px; height: 150px; }
    .second-animation-button-2-image { position: absolute; width: 105px; height: 105px; }
    .second-animation-button-2-image-bg { position: absolute; width: 110px; height: 110px; }
    .second-animation-button-3-image { position: absolute; width: 105px; height: 105px; }
    .second-animation-button-3-image-bg { position: absolute; width: 110px; height: 110px; }

    /* .second-animation-button image{
        opacity: 0;
    }


    .second-animation-button.active image{
        opacity: 1;
    } */
    .second-animation-text { transition: 0.5s ease-out; pointer-events: none; z-index: 1; padding-top: 100px; }
    .second-animation-text.active { transform: translateY(-100px); opacity: 1; pointer-events: all; z-index: 20; }
    .second-animation-icon-background { opacity: 0; transition: 0.3s ease-in-out; }
    .second-animation-button.active:hover .second-animation-icon-background { opacity: 0.5; }
    .second-animation-button.active .second-animation-icon-background { opacity: 1; }
    .second-animation-link-button { text-transform: uppercase; font-size: 23px; font-weight: 600; line-height: 1.22; padding: 22px 78px 22px 78px; border-radius: 50px; margin-top: 58px; background: linear-gradient(to right, #2fbce4, #e94269); display: block; width: fit-content; border: 1px solid white; margin-left: 55px; color:#fff; }    #particles-js { width: 760px; height: 760px; /* Or any preferred height */ }
    #particles-wrapper { position: absolute; width: 70%; height: 70%; border-radius: 50%; overflow: hidden; top: 50%; left: 50%; z-index: 50; transform: translate(-50%, -50%); flex-shrink: 0;            /* padding-right: 100px; */ overflow: hidden; -webkit-mask: radial-gradient(circle at calc(50% + 30px) 50%, black, black 16%, transparent 45%, transparent); mask: radial-gradient(circle at calc(50% + 30px) 50%, black, black 40%, transparent 50%, transparent); mix-blend-mode: plus-lighter; opacity: 0.7;            /* margin-right: 100px; */ }

    /* @media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        #particles-wrapper {
            padding-right: 200px;
        }
     }
    } */
    .second-animation-text-1 p { max-width: 620px; }
    .second-animation-text-2 p { max-width: 520px; }
    .second-animation-text-3 p { max-width: 520px; }
    #icon1-coordinate, #icon2-coordinate, #icon3-coordinate { opacity: 0; }
    #second-animation-svg-wrapper { transition: 0.5s ease-out; }
    #second-animation-svg-background { position: absolute; width: 100%; height: 100%; }
    #second-animation-svg-big-circle #gradient-circle { stroke-linecap: round; stroke-width: 0.5; stroke-dashoffset: 317;            /* transition: all 1s ease-in; */ }
    .second-animation-svg-plus-icon-bg { fill: rgba(255, 255, 255, 0.3); opacity: 0; }

    /* #second-animation-svg-icon-2 line{
        opacity: 0;
    } */
    .second-animation-button path { fill: linear-gradient(to right, #14262b 0%, #14262b 1%, #002942 52%, #14262d 100%); }
    .second-animation-button-plus-icon { z-index: 5; width: 50px; height: 50px; }
    .second-animation-button-not-active { opacity: 0; }
    .second-animation-button-not-active-bg { opacity: 0; }
    .second-animation-button-plus-icon { opacity: 0; }
    .second-animation-button-plus-icon line { stroke: white; }
    #second-animation-svg.active .second-animation-button-not-active { opacity: 0.5; }
    #second-animation-svg.active .second-animation-button-plus-icon { opacity: 1; }
    #second-animation-svg.active .second-animation-button.active  .second-animation-button-not-active { opacity: 0; }
    #second-animation-svg.active .second-animation-button.active  .second-animation-button-not-active-bg { opacity: 0; }
    #second-animation-svg.active .second-animation-button.active  .second-animation-button-plus-icon { opacity: 0; }
    @media (max-width:768px) {
        #second-animation-svg-icon-1 { right: -1%; transform: scale(0.35) rotate(0deg); }
        #second-animation-svg-icon-2 { right: -10%; top: 40%; }
        #second-animation-svg-icon-3 { right: 1%; top: 68%; }
        #second-animation-svg-icon-1.active, #second-animation-svg-icon-2.active, #second-animation-svg-icon-3.active { transform: scale(0.6) !important; }
    }
    @media (max-width:1400px) {
        #second-animation-svg-big-circle #gradient-circle { stroke-dashoffset: 210;        /* transition: all 1s ease-in; */ }
        .first-animation-text { font-size: 30px; }
        /*header { padding-bottom: 20px; }*/
        .second-animation { column-gap: 0; }
        .top-animation-text svg { margin-right: 20px; }
        .second-animation-button.active { transform: scale(0.7); }
        #second-animation-svg { padding-right: 0px; transform: scale(0.86); opacity: 0; }
        .second-animation { padding-top: 100px !important; }
        .second-animation { margin-left: -70px; padding-top: 80px !important; }
        .second-animation-link-button { padding: 15px 50px 15px 50px; font-size: 15px; margin-left: 0; }
        .second-animation-text-wrapper { margin-left: -15px; }
        /*.header-inner-wrapper { display: none; }*/
    }
    @media (min-width:550px) and (max-width:600px) {
        #second-animation-svg { margin-left: -400px; }
    }
    @media (min-width:601px) and (max-width:768px) {
        #second-animation-svg { margin-left: -300px; }
    }
    @media (max-width:1400px) {
        #second-animation-svg { margin-left: -400px; }
        .second-animation-button { transform: scale(0.35); }
        .second-animation-text { margin-left: 0; }
    }
    @media (min-width:769px) and (max-width:999px) {
        .second-animation-text-wrapper { margin-right: 1000px; }
        #second-animation-svg { margin-left: 841px !important; }
        .first-animation-text { font-size: 55px; }
        .top-animation-text svg { margin-right: 40px; }
    }
    @media (min-width:1000px) and (max-width:1400px) {
        .second-animation-text-wrapper { margin-right: 800px; }
        .second-animation-link-button { font-size: 18px; font-weight: 400; }
        #second-animation-svg { margin-left: 500px !important; }
        .first-animation-text { font-size: 60px; }
        .second-animation-text h3 { font-size: 64px; margin-bottom: 15px; line-height: 115%; }
        .second-animation-text p { font-size: 20px; font-weight: 500; line-height: 150%; }
    }
    @media (min-width:1300px) and (max-width:1500px) {
        /*.header-inner-wrapper { padding-left: 50px; padding-right: 50px; }*/
    }
    @media (min-width:1401px) {
        /*#header-mobile { display: none; }*/
    }
    @media (min-width:768px) and (max-width:1300px) {
        #second-animation-svg-icon-1.active { transform: scale(0.7) rotate(0deg); }
        #second-animation-svg-icon-2.active { transform: scale(0.7) rotate(120deg); }
        #second-animation-svg-icon-3.active { transform: scale(0.7) rotate(240deg); }
        /*header { padding-bottom: 20px; }*/
    }
    @media (max-width:1400px) {
        /*.header-inner-wrapper { display: none; }*/
    }
    @media (min-width:500px) and (max-width:768px) {
        #second-animation-svg { margin-left: -299px !important; }
    }
    main { height: fit-content; }
    @media (max-width:1000px) {
        .second-animation-text h3 { font-size: 34px; margin-bottom: 35px; line-height: 115%; }
        .second-animation-text p { font-size: 17px; font-weight: 500; line-height: 200%; }
        .second-animation-text-1 p { max-width: 220px; }
        .second-animation-text-2 p { max-width: 220px; }
        .second-animation-text-3 p { max-width: 220px; }
    }
    @media (min-width:768px) {
        #second-animation-svg-wrapper.active-button-1 { transform: rotate(0deg); }
        #second-animation-svg-wrapper.active-button-2 { transform: rotate(-120deg); }
        #second-animation-svg-wrapper.active-button-3 { transform: rotate(-240deg); }
    }

#skip-anime {
  text-align: center;
  position: fixed;
  top: 90%;
  width: 100%;
}

#skip-anime a:hover { text-decoration: none; }

#skip-anime i {
  color: #ffffff;
  font-family: "Font Awesome 5 Free";
  font-size: 2em;
  font-weight: 900;
}

#skip-anime p {
  color: #ffffff;
  margin-bottom: 0;
}


@media(max-width:767px){
   
  #second-animation-svg #particles-wrapper { display:none !important;  }
/*   .animation-wrap { min-height:100%; }  */
  
.second-animation-text {
    transform: translate(100px, -50px);
      transition: 0.5s ease-out , opacity 0ms;
}
.second-animation-text.active {
    transform: translate(12px, -50px);
      transition: 0.5s ease-out , opacity 1000ms;
}
.second-animation-text p {
    font-size: 14px;
    line-height: normal;
    margin-left: 0;
}

.second-animation-text h3 {
    font-size: 30px;
    margin-bottom: 20px;
}

}

@media(max-width:350px){
  .second-animation-text.active {
    transform: translate(-12px, -50px);
}
}