@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
    box-sizing: border-box;
}


html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-padding, 85px);
}
body {
    padding: 0;
    margin: 0;
    font-family: "Montserrat", sans-serif;
}
.hero {
    background-image: url("../images/background.png");
    background-size: cover;
    background-position: center center;
}
.bgbackground {
    background-image: url("../images/bgLine.png");
    background-size: cover;
    background-position: center center;
}
.footerBg {
    background-image: url("../images/Footer.png");
    background-size: cover;
    background-position: center center;
}

.blurr {
    backdrop-filter: blur(0.5rem);
}

.linearBg {
    background: linear-gradient(45deg, #1cc3ff, #f1e4ca 30%, #7ec9e4 100%);
}

.scale {
    transition: scale 0.3s linear;
}
.move {
    transition: transform 0.3s linear;
}

.card:hover .scale {
    scale: 1.2;
}
.card:hover .move {
    transform: translateX(1rem);
}

.outside {
    transition: transform 0.5s linear;
}

.overlay-cards .outside {
    transform: translateY(var(--paragraph-height));
}

/* .overlay-cards:nth-child(2) .outside {
    transform: translateY(115%);
}

.overlay-cards:nth-child(3) .outside {
    transform: translateY(125%);
}

.overlay-cards:nth-child(4) .outside {
    transform: translateY(107%);
} */

.scaleDown {
    scale: 1.1;
    transition: scale 0.5s linear;
}

.overlay-cards:hover .outside {
    height: 100%;
    transform: translateY(0%);
}

.overlay-cards:nth-child(1):hover .outside {
    background: #aa101099;
}

.overlay-cards:nth-child(2):hover .outside {
    background: #9e6d0c66;
}

.overlay-cards:nth-child(3):hover .outside {
    background: #1310aa66;
}

.overlay-cards:nth-child(4):hover .outside {
    background: #10aa7366;
}

.path.active path {
    fill: #fefefe;
}

.overlay-cards:hover .scaleDown {
    scale: 1;
}

.overlay-cards::after {
    content: "";
    position: absolute;
    inset: 0;
}

.overlay-cards:nth-child(1)::after {
    background-color: #aa101066;
    box-shadow: inset 0 -250px 90px -140px #aa1010;
}
.overlay-cards:nth-child(2)::after {
    background-color: #9e6d0c66;
    box-shadow: inset 0 -250px 90px -140px #9e6d0c;
}
.overlay-cards:nth-child(3)::after {
    background-color: #1310aa66;
    box-shadow: inset 0 -250px 90px -140px #1310aa;
}
.overlay-cards:nth-child(4)::after {
    background-color: #10aa7366;
    box-shadow: inset 0 -250px 90px -140px #10aa73;
}

.sliding-text {
    transition: transform 0.5s ease-in-out;
}

.glow-cards svg path {
    transition: fill 0.2s linear;
}

.glow-cards {
    transition: box-shadow 0.2s linear, border-color 0.2s linear;
}

.glow-cards:hover {
    border-color: #1cc3ff;
    box-shadow: 0px 0px 24px 0px #1cc3ff;
}

.glow-cards:hover .sliding-text {
    transform: translateX(var(--h1Length));
}

.glow-cards:hover svg path {
    fill: #1cc3ff;
}

#submitBtn svg path {
    transition: fill 0.2s linear;
}

#submitBtn:hover svg path {
    fill: #1cc3ff;
}

.bounce-up {
    display: inline-block;
    animation: bounceUp 3s forwards;
}

.bounce-down {
    display: inline-block;
    animation: bounceDown 3s forwards;
}


#svgg.bounce-up .path1{
  animation: animatePath1short 2s forwards;
}
#svgg.bounce-down .path1{
  animation: animatePath1Long 2s forwards;
}


#svgg.bounce-up .path2{
  animation: animatePath2short 2s forwards;
}

#svgg.bounce-down .path2{
  animation: animatePath2Long 2s forwards;
}





@keyframes bounceUp {
    0% {
        transform: translate(-40px, -40px);
    }
    20%,
    50%,
    80%,
    100% {
        transform: translate(40px, 40px);
    }
    40% {
        transform: translate(20px, 20px);
    }
    60% {
        transform: translate(25px, 25px);
    }
}

@keyframes bounceDown {
    0% {
        transform: translate(40px, 40px);
    }
    20%, 50%, 80%, 100% {
        transform: translate(-50px, -50px);
    }
    40% {
        transform: translate(-30px, -30px);
    }
    60% {
        transform: translate(-40px, -40px);
    }
}



@keyframes animatePath1short {
  0% { d: path("M136.742 90.7319L326.742 155.481"); }
  20% { d: path("M136.742 90.7319L200 110"); }
  50% { d: path("M136.742 90.7319L326.742 155.481"); }
  60% { d: path("M136.742 90.7319L230 120"); }
  75% { d: path("M136.742 90.7319L270 135"); }
  85% { d: path("M136.742 90.7319L250 125"); }
  100% { d: path("M136.742 90.7319L270 135"); }
}
@keyframes animatePath1Long {
  0% { d: path("M136.742 90.7319L270 135"); }
  30% {d: path("M136.742 90.7319L400 180");}
  50% {d: path("M136.742 90.7319L300 145");}
  70% {d: path("M136.742 90.7319L350 165");}
  90% {d: path("M136.742 90.7319L320 150");}
  100% { d: path("M136.742 90.7319L326.742 155.481"); }
}




@keyframes animatePath2short {
  0% { d: path("M131.984 104.687L227.452 137.22"); }
  20% { d: path("M131.984 104.687L190 124"); }
  50% { d: path("M131.984 104.687L227.452 137.22"); }
  60% { d: path("M131.984 104.687L200 125"); }
  75% { d: path("M131.984 104.687L210 130"); }
  85% { d: path("M131.984 104.687L205 127"); }
  100% { d: path("M131.984 104.687L200 127"); }
}
@keyframes animatePath2Long {
  0% { d: path("M131.984 104.687L200 127"); }
  30% { d: path("M131.984 104.687L300 160"); }
  50% { d: path("M131.984 104.687L250 143"); }
  70% { d: path("M131.984 104.687L270 155"); }
  90% { d: path("M131.984 104.687L240 140"); }
  100% { d: path("M131.984 104.687L227.452 137.22"); }
}





/* ========================================== */
/* =============== SCROLL==================== */
/* ========================================== */
::-webkit-scrollbar {
    width: 2px;
}

::-webkit-scrollbar-track {
    border: none;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background: #1cc3ff;
    height: 1rem;
}

.hideScroller::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.hideScroller::-webkit-scrollbar-thumb {
    background-color: transparent;
}