.animatable {
  
  /* initially hide animatable objects */
  visibility: hidden;
  
  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;     
  animation-play-state: paused; 
}

/* show objects being animated */
.animated {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  animation-play-state: running;
}


        /* AI Builder Animation */

.apps-node {background:#1E1F24; border-radius:5px; width:387px; border: solid 1px #4C4C4E; margin-top:24px; height: 60px; padding:16px 24px 0px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); z-index:1;}

@media (max-width: 1199px) { .apps-node {margin-left:85px;}}

.apps-node p {letter-spacing: 1px; font-weight:200; font-size:16px; margin-bottom:0px; display:inline-block; color:#fff; vertical-align: middle;}

.apps-node2 {background:#1E1F24; border-radius:5px; width:387px; border: solid 1px #4C4C4E; height: 60px; padding:16px 24px 0px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); opacity:0;}

@media (max-width: 1199px) { .apps-node2 {margin-left:85px;}}

.apps-node2 p {letter-spacing: 1px; font-weight:200; font-size:16px; margin-bottom:0px; display:inline-block; color:#fff; vertical-align: middle;}

.plus {background:#00B7FF; border-radius:25px; width: 19px; color:#fff; height:20px; padding:0px 4px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); z-index:3;}

@media (max-width: 1199px) { .plus {margin-left:270px;}}

.plus2 {background:#00B7FF; border-radius:25px; width: 19px; color:#fff; height:20px; padding:0px 4px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); opacity:0;}

@media (max-width: 1199px) { .plus2 {margin-left:270px;}}

.line {height:8px; background:#4C4C4E; width:1px; margin-left:194px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); z-index:1;}
@media (max-width: 1199px) { .line {margin-left:279px;}}

.line2 {height:8px; background:#4C4C4E; width:1px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); opacity:0; z-index:11;}

@media (max-width: 1199px) { .line2 {margin-left:279px;}}

.line3 {height:8px; background:#4C4C4E; width:1px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); opacity:0;}

@media (max-width: 1199px) { .line3 {margin-left:279px;}}

.apps-block {background:#1E1F24; border: solid 1px #4C4C4E; position: absolute; right: 0; left: 0; margin-left: auto; margin-right: auto; border-radius:5px; width:387px; padding:16px 24px 16px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); opacity:0;}

.apps-blocks-int {border-radius:5px; background:#1E1F24; width:60px; height:60px; display:inline-block; padding-top:8px; position:relative; z-index:-1111;}

.apps-blocks-int-circle {width:26px; height:26px; border-radius:25px; background:#394C65; margin-left:auto; margin-right:auto;}

.apps-blocks-int-mark {width:21px; height:21px; margin-left:auto; margin-right:auto;}

.apps-blocks-int-text {letter-spacing: 1px; font-size:11px; color:#fff; text-align:center; margin-top:6px; font-weight:200;}

.apps-blocks-int-line {width:39px; height:8px; border-radius:5px; background:#394C65; margin-top:6px; margin-left:auto; margin-right:auto;}

.a-b-p {margin-left:4.5px;}

.a-mark {width:25px!important; border-radius: 0px!important; margin-right:16px!important; display: inline-block!important}

.s-mark {width:27px!important; border-radius: 0px!important; margin-right:16px!important; display: inline-block!important}

.node-plus {margin-top:-7px; display: inline-block!important}

.node-ellipsis {width:16px!important; padding-top:12px; float:right}

.click {border:solid 1px #00B7FF; width:20px; margin-top: -20px; height:20px; border-radius:50px; z-index:1;}

@media (max-width: 1199px) { .click {margin-left:270px;}}

.inner {background-image: radial-gradient(#051224, #00B7FF); width:100%; height:auto; opacity:.5; width:19px; height:19px; border-radius:50px;}

.boom {border:solid 1px #00B7FF; width:58px; height:58px; border-radius:5px; margin-left:139px; position:absolute; top:17px; z-index:-111; right: 0; left: 0; margin-left: auto; margin-right: auto;}

.boom-bg {background-image: radial-gradient(#051224, #00B7FF); width:100%; height:auto; opacity:.5; width:57px; height:57px; border-radius:5px;}

@media (max-width: 476px)  { 
  .apps-node, .apps-node2, .app-block {width:100%;}
}

@media (max-width: 476px)  {
.apps-block {width:255px;}
.block-1 {display: none;}
.block-5 {display: none}
}


.animated.fade-out {
  -webkit-animation-name: fade-out;
  animation-name: fade-out;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-duration:.7s;
  animation-duration:.7s;
}

.animated.fadeInLine {
  -webkit-animation-name: fadeInLine;
  animation-name: fadeInLine;
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-duration:1s;
  animation-duration:1s;
}

.animated.fadeInBlock {
  -webkit-animation-name: fadeInBlock;
  animation-name: fadeInBlock;
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-duration:3s;
  animation-duration:3s;
}

.animated.blockClick {
  -webkit-animation-name: blockClick;
  animation-name: blockClick;
  -webkit-animation-delay: 2.7s;
  animation-delay: 2.7s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-duration:.7s;
  animation-duration:.7s;
}

.animated.fadeInNode {
  -webkit-animation-name: fadeInLine;
  animation-name: fadeInLine;
  -webkit-animation-delay: 3.7s;
  animation-delay: 3.7s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-duration:1s;
  animation-duration:1s;
}


@-webkit-keyframes fade-out {
100% {-webkit-transform: scale(6); opacity: 0;}
}

@keyframes fade-out {
100% {transform: scale(6); opacity: 0;}
}

@-webkit-keyframes fadeInLine {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInLine {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeInBlock {
  0% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeInBlock {
  0% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes blockClick {
100% {-webkit-transform: scale(3); opacity: 0;}
}

@keyframes blockClick {
100% {transform: scale(3); opacity: 0;}
}

/* End AI Builder Animation */

/* Integrations Animation */

.integration-card-3 {background:#1E1F24; border-radius:5px; width:265px; border: solid 1px #4C4C4E; position:absolute; height: 237px; margin-left:80px; padding:16px 24px 0px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); z-index:1;}

.integration-card-2 {background:#1E1F24; border-radius:5px; width:265px; border: solid 1px #4C4C4E; position:absolute; margin-top:50px; height: 237px; margin-left:125px; padding:16px 24px 0px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); z-index:1;}

.integration-card {background:#1E1F24; border-radius:5px; width:265px; border: solid 1px #4C4C4E; position:absolute; margin-top:100px; height: 237px; margin-left:170px; padding:16px 24px 0px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); z-index:1;}

@media only screen and (max-width: 767px) { 
  .integration-card {margin-left:110px;}
  .integration-card-2 {margin-left:65px;}
  .integration-card-3 {margin-left:10px;}
}
@media only screen and (max-width: 575px) { 
  .integration-card {margin-left:150px;}
  .integration-card-2 {margin-left:105px;}
  .integration-card-3 {margin-left:60px;}
}

@media only screen and (max-width: 530px) { 
  .integration-card {margin-left:110px;}
  .integration-card-2 {margin-left:65px;}
  .integration-card-3 {margin-left:10px;}
}

@media (max-width: 476px)  { 
  .integration-card-3 {display: none;}
  .integration-card-2 {margin-left: auto; margin-right: auto; left: 0px; right: 0px; margin-top: 0px;}
  .integration-card {margin-left: 22px; margin-top: 50px;}
}

@media (max-width: 400px)  { 
  .integration-card-2 {display: none;}
  .integration-card {margin-left: auto; margin-right: auto; left: 0px; right: 0px;margin-top: 0px;}
}

.integration-card h4 {letter-spacing: 1px; font-size:20px; font-weight:200; color:#ffffff; margin-top:12px; margin-bottom:8px;}

.integration-card p {letter-spacing: 1px; font-size:14px; color:#a1a2a6; font-weight:200; line-height:1.4; margin-bottom: 1.3rem;}

.integration-btn {background:#00B7FF; height:36px; font-size:16px; text-align:center; font-weight:500; color:#081F3F; border-radius:5px; padding-top:5px;}

.integration-click {position:absolute; right: 24px; color: #fff; border-radius:5px;}

.integration-click-bg {background-image: radial-gradient(#1E1F24, #00B7FF); width:100%; height:auto; opacity:.5; width:215px; height:36px; border-radius:5px; z-index:-1;}

.integration-slack-icon {width:22px!important;}

.integration-aws-icon {width:27px!important;}

.integration-integration-icon {float:right; width: 22px!important;}

.integration-integration-green-icon {position:absolute; width: 22px!important; margin-left:166px!important; opacity:0;}

.btnClick {animation-name:btnClick; animation-duration:1.7s; animation-delay:1s;}

.grnLight {animation-name:grnLight; animation-delay:2s; animation-duration:7s; animation-fill-mode: forwards; animation-timing-function:step-start;}

.grnLight-2 {animation-name:grnLight; animation-delay:2.7s; animation-duration:7s; animation-fill-mode: forwards; animation-timing-function:step-start;}

.grnLight-3 {animation-name:grnLight; animation-delay:3.4s; animation-duration:7s;  animation-fill-mode: forwards; animation-timing-function:step-start;}

@keyframes btnClick {
100% {transform: scale(2.2); opacity: 0;}
}

@keyframes grnLight {
0% {opacity: 0;}
100% {opacity: 1;}
}

.int-height {height:355px;}

@media (max-width: 476px)  { 
  .int-height {height:290px;}
}

@media (max-width: 400px)  { 
  .int-height {height:240px;
  }
}

/* Dashboard Animation */


.dash-apps-votes { background:#1E1F24; border: solid 1px #4C4C4E; border-radius:5px; width:400px; position:absolute; right: 38px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}

.dash-apps-heading {color:#fff; padding:14px 24px; border-bottom: solid 1px #4C4C4E}

.dash-apps-heading h2 {font-size:20px; font-weight:200; margin-top:12px; vertical-align: middle; color:#fff; display:inline-block;}

.dash-icon-box-vote {width:40px; height:40px; border:solid 1px #4C4C4E; display:inline-block; border-radius:3px; margin-right:16px; padding:6px 12px;}

.dash-apps-content {letter-spacing: 1px; padding:24px; color:#fff; font-size:12px; font-weight:200;}

.dash.apps-content span {font-size:15px;}

.dash-grn-badge {background:#69CC00; color:#051224; font-weight:500; font-size:12px; display:inline-block; border-radius:3px; padding:0px 4px; float:right;}

.dash-red-badge {background:#F03D3E; color:#fff; font-weight:500; font-size:12px; display:inline-block; border-radius:3px; padding:0px 4px; float:right;}

.dash-count {font-size:12px; color:#A1A2A6; float:right; margin-right:16px;}

.dash-apps {background:#1E1F24; border: solid 1px #4C4C4E; border-radius:5px; width:400px; position:absolute; left: 38px; margin-top:73px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}

@media only screen and (max-width: 767px) { 
  .dash-apps {left: 0px;}
  .dash-apps-votes {right: 0px;}
}

.dash-height {height: 395px}

@media (max-width: 490px)  { 
  .dash-height {height: 320px}
}

.dash-icon-box {width:40px; height:40px; border:solid 1px #4C4C4E; display:inline-block; border-radius:3px; margin-right:16px; padding:6px 9px;}

.dash-blue-link {float:right; margin-top:12px; width: 20px!important;}

.dash-active {position:absolute; top:185px; left:178px;}

.dash-small {font-size:15px; font-weight:200; margin-top:-8px; text-align:center;}

.dash-center-donut {margin-bottom:21px; margin-left:auto; margin-right:auto; position:relative}

.dash-color-boxes {width:14px; height:14px; border-radius:3px; display:inline-block; margin-right:4px;}

.dash-blue {background:#00B7FF; vertical-align: middle; margin-top:-2px;}

.dash-bluegrey {background:#394C65; vertical-align: middle; margin-left:8px; margin-top:-2px;}

.dash-warning {background:#F03D3E; vertical-align: middle; margin-left:8px; margin-top:-2px;}

.dash-tooltipper {background:#00B7FF; border-radius:3px; color:#010205; padding:4px 4px; font-size:10px; font-weight:400; width:107px; position:absolute; top:100px; right:24px;}

.dash-tooltipper:before {
content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid #00B7FF;
  border-top: 5px solid #00B7FF;
  border-bottom: 5px solid transparent;
  left: -3px;
  top: 5px;
  transform: rotate(230deg);
}

.dash-num {position:absolute; top:140px; left:170px; font-size:28px;}

.dash-num::before {
  font-size:32px; font-weight:700; margin-bottom:0px; color:#fff;
    animation: counter 2s linear;
  content: counter(count);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@media only screen and (max-width: 490px) { 
  .dash-apps {width:390px; margin-top:0px; right: 0px; margin-left: auto; margin-right:  auto;}
  .dash-apps-votes {display: none;}
  .dash-num {left: 170px;}
  .dash-active {left: 178px;}
}

@media only screen and (max-width: 476px) { 
  .dash-apps {width:300px; margin-top:0px; right: 0px; margin-left: auto; margin-right:  auto;}
    .dash-num {left: 130px;}
  .dash-active {left: 138px;}
}

@media only screen and (max-width: 400px) { 
  .dash-apps {width:265px; margin-top:0px; right: 0px; margin-left: auto; margin-right:  auto;}
      .dash-num {left: 110px;}
  .dash-active {left: 118px;}
}

@keyframes counter {
  0% {
    counter-increment: count 0;
  }
  4% {
    counter-increment: count 1;
  }
  8% {
    counter-increment: count 2;
  }
  12% {
    counter-increment: count 3;
  }
  14% {
    counter-increment: count 4;
  }
  20% {
    counter-increment: count 5;
  }
  24% {
    counter-increment: count 6;
  }
  28% {
    counter-increment: count 7;
  }
  32% {
    counter-increment: count 8;
  }
  36% {
    counter-increment: count 9;
  }
  40% {
    counter-increment: count 10;
  }
  44% {
    counter-increment: count 11;
  }
  48% {
    counter-increment: count 12;
  }
  52% {
    counter-increment: count 13;
  }
  56% {
    counter-increment: count 14;
  }
  60% {
    counter-increment: count 15;
  }
  64% {
    counter-increment: count 16;
  }
  68% {
    counter-increment: count 17;
  }
  72% {
    counter-increment: count 18;
  }
  76% {
    counter-increment: count 19;
  }
  80% {
    counter-increment: count 20;
  }
  84% {
    counter-increment: count 21;
  }
  88% {
    counter-increment: count 22;
  }
  92% {
    counter-increment: count 23;
  }
  96% {
    counter-increment: count 24;
  }
  100% {
    counter-increment: count 25;
  }
}

.circle-chart__circle {
  animation: circle-chart-fill 2s reverse;
  transform: rotate(-90deg);
  transform-origin: center;
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated.counter {
  animation-name: counter;
  animation-duration:2s;
}
.animated.circle-chart-fill {
  animation-name: circle-chart-fill;
    animation: circle-chart-fill 2s reverse ease-in-out;
  transform: rotate(-90deg);
  transform-origin: center;
}

.animated.fadeIn {
  animation-name: fadeIn;
  animation-duration:2s;
  animation-delay:2s;
}

/* End Dashboard Animation */

.figma-wrap {
  overflow: hidden;
  height: 1024px;        /* your desired visible height */
  position: relative;
}

.figma-wrap iframe {
  position: absolute;
  top: 0px;           /* push toolbar up and out of view */
  left: 0px;
  right: 0px;
  width: 100%;
  height: calc(100% + 48px);   /* compensate for the negative offset */
  border: none;
  display: block;
}


/* Notifications */

.notification-card {background:#1E1F24; border: solid 1px #4C4C4E; position:absolute; right: 0px; left: 0px; margin-left:auto; margin-right: auto; opacity:0; padding:16px 24px 16px; border-radius:5px; width:400px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}

.notification-card h4 {font-size:16px; font-weight:300; color:#fff; margin-bottom:3px!important;}

.notification-card h5 {font-size:16px; font-weight:300; color:#a1a2a6; margin-bottom:5px!important; display:inline-block;}

.notification-card p {font-size:12px; font-weight:200; color:#a1a2a6; margin-bottom:3px!important;}

.notif-yell-badge {background:#F6E017; color:#051224; font-weight:500; font-size:12px; display:inline-block; border-radius:3px; padding:0px 4px;}

.notification-card-time {display:inline-block; float:right; font-size:13px; font-weight:200; color:#a1a2a6;}

.notification-card-second {background:#1E1F24; opacity:0; border: solid 1px #4C4C4E; position:absolute; right: 0px; left: 0px; margin-left:auto; margin-right: auto; padding:16px 24px 16px; border-radius:5px; width:400px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}

.notification-card-second h4 {font-size:16px; font-weight:300; color:#fff; margin-bottom:3px!important;}

.notification-card-second h5 {font-size:16px; font-weight:300; color:#a1a2a6; margin-bottom:5px!important; display:inline-block;}

.notification-card-second p {font-size:12px; font-weight:200; color:#a1a2a6; margin-bottom:3px!important; line-height:16px;}

.notification-card-third {background:#1E1F24; opacity:0; border: solid 1px #4C4C4E; position:absolute; right: 0px; left: 0px; margin-left:auto; margin-right: auto; padding:16px 24px 16px; border-radius:5px; width:400px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}

.notification-card-third h4 {font-size:16px; font-weight:300; color:#fff; margin-bottom:3px!important;}

.notification-card-third h5 {font-size:16px; font-weight:300; color:#a1a2a6; margin-bottom:5px!important; display:inline-block;}

.notification-card-third p {font-size:12px; font-weight:200; color:#a1a2a6; margin-bottom:3px!important; line-height:16px;}

.notification-card-third ul {font-size:12px!important; font-weight:200; color:#a1a2a6; margin-bottom:3px!important; line-height:16px; padding-left: 16px!important}

.notification-card-third ul li {font-size:12px!important; font-weight:200; color:#a1a2a6; margin-bottom:3px!important; line-height:16px; padding-left: 16px!important}

.not-cards {height:420px;}

@media only screen and (max-width: 476px) { 
  .notification-card, .notification-card-second, .notification-card-third {width:300px;}
  .not-cards {height:475px;}
}

@media only screen and (max-width: 400px) { 
  .notification-card, .notification-card-second, .notification-card-third {width:265px;}
}

.notification-blue {color:#00B7FF;}


.notifications, .notifications-second, .notifications-third {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  /* Start hidden and scaled down */
  transform: scale(0) translateY(0);
  opacity: 0;
}

.notifications {
  animation-name: notifications;
}

.notifications-second {
  animation-name: notifications-second;
  animation-delay: .8s;
}

.notifications-third {
  animation-name: notifications-third;
  animation-delay: 2s;
}

@keyframes notifications {
  0% { transform: scale(0) translateY(0); opacity: 0; }
  30% { transform: scale(1.1) translateY(0); opacity: 1; }
  39% { transform: scale(1.0) translateY(0); }
  40% { transform: translateY(0); }
  100% { transform: translateY(253px); opacity: 1; } /* -215 to 38 = 253px shift */
}

@keyframes notifications-second {
  0% { transform: scale(0) translateY(0); opacity: 0; }
  30% { transform: scale(1.1) translateY(0); opacity: 1; }
  39% { transform: scale(1.0) translateY(0); }
  40% { transform: translateY(0); }
  100% { transform: translateY(135px); opacity: 1; } /* -215 to -80 = 135px shift */
}

@keyframes notifications-third {
  0% { transform: scale(0) translateY(0); opacity: 0; }
  30% { transform: scale(1.1) translateY(0); opacity: 1; }
  39% { transform: scale(1.0) translateY(0); }
  40% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(3px); opacity: 1; } /* Moved 2px lower */
}

@media only screen and (max-width: 476px) { 
@keyframes notifications {
    0% { transform: scale(0) translateY(0); opacity: 0; }
  30% { transform: scale(1.1) translateY(0); opacity: 1; }
  39% { transform: scale(1.0) translateY(0); }
  40% { transform: translateY(0); }
  100% { transform: translateY(306px); opacity: 1; } /* -215 to 38 = 253px shift */
}

@keyframes notifications-second {
    0% { transform: scale(0) translateY(0); opacity: 0; }
  30% { transform: scale(1.1) translateY(0); opacity: 1; }
  39% { transform: scale(1.0) translateY(0); }
  40% { transform: translateY(0); }
  100% { transform: translateY(152px); opacity: 1; } /* -215 to -80 = 135px shift */
}

@keyframes notifications-third {
    0% { transform: scale(0) translateY(0); opacity: 0; }
  30% { transform: scale(1.1) translateY(0); opacity: 1; }
  39% { transform: scale(1.0) translateY(0); }
  40% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0px); opacity: 1; } /* Moved 2px lower */
}