#main {
  padding: 0 !important;
}
@media (min-width:992px) {
	#main {
       padding: 50px 0 0 0 !important;
    }
}

.branding a img, .branding img {
  width: 350px;
}

@media screen and (max-width: 992px) {
  .show-device-logo .branding img.mobile-logo, .show-device-logo .mobile-branding img.mobile-logo {
    width: 180px;
  }
}

.navigation {
	border-top: 1px solid #FFF;
}

.btn-text-link a {
    padding: 0.5rem 1rem !important;
    font-size: 1.1rem!important;
    text-transform: none!important;
    color: var(--black)!important;
    text-decoration: underline!important;
}
.btn-text-link a:hover {
    background-color: var(--cyan)!important;
}

.rotate-2 {
    display: inline-block;
    animation: sway2 2.5s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes sway2 {
    0% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(9deg);
    }
    100% {
        transform: rotate(-5deg);
    }
}

.rotate-1 {
    display: inline-block;
    animation: sway1 3s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes sway1 {
    0% {
        transform: rotate(8deg);
    }
    50% {
        transform: rotate(-13deg);
    }
    100% {
        transform: rotate(8deg);
    }
}

.rotate-3 {
    display: inline-block;
    animation: sway3 3.5s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes sway3 {
    0% {
        transform: rotate(-11deg);
    }
    50% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(-11deg);
    }
}

.animated-bg {
    animation: colorShift 20s linear infinite;
    clip-path: polygon(
        0 40px,   /* top-left */
        100% 0,   /* top-right */
        100% 100%,
        0 100%
    );
}

@keyframes colorShift {
    0%   { background-color: var(--lightgrey); }
    25%  { background-color: var(--cyan); }
    50%  { background-color: var(--magenta); }
    75%  { background-color:var(--orange); }
    100% { background-color: var(--lightgrey); }
}

.arrow-1 {
    transform: rotate(-85deg); /* final position */
}
.arrow-2 {
    transform: rotate(95deg); 
    position: relative; 
    margin-top: -20px;
}

.arrow-wrapper {
    animation: slideInArrow 1s ease-out forwards;
}

@keyframes slideInArrow {
    from {
        transform: translateX(-100vw);
    }
    to {
        transform: translateX(0);
    }
}

.card {
    background-color: var(--lightgrey); 
    padding: 3rem; 
    border-radius: 3rem;
    transition: background-color 0.3s ease;
}

.card:hover {
    background-color: var(--cyan);
}