@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";body {
    margin: 0;
    padding: 0;
    background: #222020;
    color: #fff;
    font-family: Poppins,sans-serif
}

a {
    text-decoration: none;
    color: #fff
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-track {
    background: inherit
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.05);
    border-radius: 99px
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.1)
}

.fade-animation-left {
    transition: .3s transform ease,.3s opacity ease;
    position: relative
}

section:not(.in-view) .fade-animation-left {
    transform: translate(-50px);
    opacity: 0
}

section:not(.in-view) .fade-animation-down {
    transform: translateY(50px);
    opacity: 0
}

.delay-250 {
    transition-delay: .25s
}

.delay-750 {
    transition-delay: .75s
}

.delay-1250 {
    transition-delay: 1.25s
}

.delay-1500 {
    transition-delay: 1.5s
}

.container,.container-sm,.container-lg {
    margin: 0 auto;
    padding: 0 16px
}

.container {
    max-width: 1200px
}

.container-sm {
    max-width: 656px
}

.container-lg {
    max-width: 1720px
}

.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.hero:before {
    content: "";
    background: linear-gradient(180deg,rgba(34,32,32,.9) 0%,#222020 96.6%);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1
}

.hero-background-image {
    width: 100%;
    position: absolute;
    left: 0;
    z-index: -1;
    pointer-events: none;
    top: 0;
    height: 100%
}

.hero-content {
    position: relative;
    z-index: 5;
    text-align: center
}

.hero-subtitle {
    font-weight: 500;
    font-size: 32px;
    line-height: 27px;
    background: linear-gradient(90deg,#ffc2c4 3.72%,#ff989c 96.81%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: hero-text-animation infinite 5s forwards;
    position: relative;
    width: max-content;
    margin: 0 auto;
    padding-bottom: 4px;
    padding-top: 1rem;
    
}

.hero-subtitle:before {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    animation: hero-before-animation infinite 5s;
    bottom: 0;
    left: 0;
    transition: .15s all ease;
    background: linear-gradient(90deg,#ffc2c4 3.72%,#ff989c 96.81%)
}

.hero-subtitle-wrapper {
    overflow: hidden
}

.hero-title {
    font-weight: 600;
    font-size: 62px;
    line-height: 48px;
    background: linear-gradient(180deg,rgba(248,244,254,.48) 0%,#f7f3fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-top: .5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem
}

.hero-description {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #ffffff80;
    max-width: 480px;
    margin: 0 auto
}

@keyframes hero-text-animation {
    0% {
        transform: translateY(80px);
        opacity: 0
    }

    19% {
        transform: translateY(0);
        opacity: 1
    }

    79% {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(80px);
        opacity: 1
    }
}

@keyframes hero-before-animation {
    0% {
        width: 0
    }

    to {
        width: 100%
    }
}

.scroll-down {
    position: absolute;
    bottom: 2rem;
    color: #fff;
    left: calc(50% - 54.22px);
    z-index: 100;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .5rem;
    transition: .3s all ease;
    font-size: 14px;
    letter-spacing: 1.5px
}

.scroll-down-icon {
    animation: fadeInDown 1s infinite
}

section:not(.in-view) .scroll-down {
    transition-delay: 1.5s
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.insurance {
    height: 791px;
    position: relative
}

.insurance .container {
    width: 100%
}

.insurance-car-content {
    height: 100%;
    position: relative;
    z-index: -1
}

.insurance-red-car-wrapper {
    text-align: right;
    margin-left: auto;
    position: sticky;
    bottom: 0rem;
    opacity: 0
}

.insurance-red-car-wrapper .car {
    margin-top: 100%
}

.insurance-white-car-wrapper {
    text-align: right;
    position: sticky;
    top: -5rem;
    opacity: 0
}

.insurance-white-car-wrapper img {
    position: relative;
    top: -1rem;
    height: 200px
}

.insurance-image {
    position: absolute;
    left: 50%;
    bottom: -80px;
    transform: translate(-50%);
    opacity: 0;
    pointer-events: none
}

.insurance-image-icon {
    position: absolute;
    left: calc(50% - 194.25px);
    bottom: -35%;
    transition: .6s opacity ease,.6s transform ease;
    opacity: 0;
    transform: translateY(20px);
    z-index: -1;
    height: 300px;
    width: 388.5px
}

.insurance-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20rem;
    margin-top: -30%
}

.insurance-details:last-child {
    margin-top: 5%
}

.insurance-details-item {
    background: rgba(0,0,0,.1411764706);
    border: 1px solid rgba(255,255,255,.2);
    text-align: center;
    border-radius: 30px;
    position: relative;
    z-index: 10;
    width: 402px;
    transition: .3s transform ease,.3s background ease,.3s opacity ease
}

.insurance-details-item-content{
    padding: 2rem 1rem;
}

.insurance-details-item:hover {
    transform: translateY(-10px);
    background: #000
}

.insurance-details-item-title {
    margin: 1rem 0 .5rem;
    font-size: 18px;
    font-weight: 600;
}

.insurance-details-item-description {
    font-size: 13px;
    line-height: 20px;
    opacity: .5;
}

.insurance-details-item img {
    height: 100px;
    width: 100px
}

.insurance:not(.insurance-active) .insurance-details-item {
    transform: translate(-50px);
    opacity: 0
}

.insurance:not(.insurance-active) .insurance-details-item:last-child {
    transform: translate(50px)
}

.car {
    height: 180px;
    width: auto;
    pointer-events: none
}

.insurance-home {
    background: #0f0f0f;
    margin-top: 30rem;
    height: 350vh
}

.insurance-home-active .match {
    opacity: 0;
    transform: scale(0)
}

.insurance-details-home{
    padding-bottom: 18%;
}

.insurance-home .container {
    display: flex;
    height: 100%
}

.insurance-home-content {
    transition: .6s transform ease,.6s opacity ease;
    opacity: 0;
    transform: scale(0)
}

.insurance-home-image {
    height: 550px
}

.insurance-home-image-wrapper {
    position: sticky;
    top: 50%;
    transform: translateY(-50%)
}

.insurance-home-animation-fire {
    transform: scale(0);
    opacity: 0;
    transition: .5s transform ease,.5s opacity ease
}

.insurance-home-animation-fire-wrapper {
    position: sticky;
    animation: flicker 1s infinite linear;
    top: 5rem
}

.insurance-home-fire {
    position: absolute;
    height: 80px;
    left: 24.8%;
    z-index: 2;
    bottom: 7.5rem;
    animation: flicker linear 2s infinite
}

.insurance-home-fire:nth-child(2) {
    left: 39.5%;
    z-index: 2;
    bottom: 9rem
}

.insurance-home-fire:nth-child(3) {
    left: 56%;
    z-index: 2;
    bottom: 8rem
}

.insurance-home-fire:last-child {
    left: 64%;
    z-index: 2;
    bottom: 8rem
}

.insurance-home-texts {
    position: sticky;
    top: 50%;
    transform: translateY(-50%)
}

.insurance-home-subtitle {
    font-size: 4rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    color: #8f1111
}

.insurance-home-subtitle span {
    width: max-content;
    margin: 0 auto
}

.insurance-home-subtitle span:last-child {
    position: relative;
    margin-top: -1.5rem;
    transform: translate(50%)
}

@keyframes fireAnimation {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-25%)
    }
}

.match {
    position: sticky;
    top: 10rem;
    display: flex;
    align-items: end;
    justify-content: center;
    transition: .5s transform ease,.5s opacity ease
}

.match-box {
    height: 400px
}

.match-wrapper {
    margin-top: 10rem;
    width: 100%;
    text-align: center
}

.match-image {
    height: 200px
}

.match-stick {
    transform: rotate(200deg);
    position: relative;
    left: -12rem
}

.match-fire {
    height: 40px;
    animation: flicker 1s infinite linear;
    opacity: 0
}

.match-fire-wrapper {
    transform: rotate(90deg);
    position: absolute;
    left: 11.5rem;
    bottom: 10.5rem
}

@keyframes flicker {
    0% {
        transform: rotate(-1deg)
    }

    20% {
        transform: rotate(1deg)
    }

    40% {
        transform: rotate(-1deg)
    }

    60% {
        transform: rotate(1deg) scaleY(1.04)
    }

    80% {
        transform: rotate(-2deg) scaleY(.92)
    }

    to {
        transform: rotate(1deg)
    }
}

.header {
    transition: all .3s ease;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0
}

.header-active {
    background: #000
}

.header-logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%
}

.header-logo img {
    height: 50px;
    width: auto
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 0;
    list-style: none
}

.header-nav-item {
    position: relative
}

.header-nav-item:before {
    content: "";
    height: 1px;
    left: 50%;
    transform: translate(-50%);
    bottom: -8px;
    width: 100%;
    position: absolute;
    background: #fff;
    transition: .3s width ease
}

.header-nav-item:not(.header-nav-item:hover,.header-nav-item-active):before {
    width: 0
}

.footer {
    background: #020005;
    position: relative;
    padding: 1rem 0
}

.footer:before {
    background: radial-gradient(32.81% 53.93% at 50% 0%,rgba(133,102,255,.04) 0%,rgba(133,102,255,0) 100%,rgba(133,102,255,0) 100%);
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    pointer-events: none;
    top: 0
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0;
    position: relative
}

.footer-top-subtitle {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    background: linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,.07) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent
}

.footer-top-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #efedfd40
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 1rem
}

.footer-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .9rem;
    padding: .75rem 1.25rem;
    border: 1px solid rgba(255,255,255,.137254902);
    border-radius: 50px;
    transition: .3s background ease,.3s border ease,.3s color ease
}

.footer-button:hover {
    background: rgba(255,255,255,.8);
    color: #000
}


.header-menu-toggle{
    display: none;
}

.header-menu{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.glowing-box-button {
    font-feature-settings: "cv06" on,"calt" off,"liga" off;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 24px;
    display: block;
    width: max-content;
    margin: 0 auto;
}

.hero .glowing-box-button{
    margin-top: 2.5rem;
    font-size: 24px;
}

.glowing-box-button {
    background: radial-gradient(107.5% 107.5% at 50% 215%,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 100%),rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    cursor: pointer;
    padding: 13px 24px;
    position: relative;
    z-index: 1;
}

.glowing-box-button svg{
    color: rgba(255,255,255, .6);
}

.glowing-box-button:after {
    background: radial-gradient(85% 120% at 50% 120%,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 100%);
    border-radius: 999px;
    content: "";
    height: calc(100% + 3px);
    left: -2px;
    opacity: 0;
    position: absolute;
    top: -2px;
    transition: 1s all;
    width: calc(100% + 4px)
}

.glowing-box-button:hover:after {
    opacity: .7
}

.glowing-box-button span {
    background: linear-gradient(180deg,rgba(255,255,255,.3) 8.85%,#FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: center;
}

.contact{
    margin-top: 87.6px;
    background: #1d1d20;
    padding: 2rem 0;
    padding-bottom: 110px;
}

.contact-title{
    font-size: 21px;
    position: relative;
    padding-bottom: 8px;
    width: max-content;
}

.contact-title::before{
    content: "";
    background: linear-gradient(90deg,#ffc2c4 3.72%,#ff989c 96.81%);
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.contact-details{
    margin-top: 2rem;
    max-width: 250px;
}

.contact-details-item{
    padding: 1rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: 14px;
}

.contact-address-toggle{
    gap: .5rem;
    color: #ffc2c4;
    font-size: 14px;
    font-weight: 300;
    align-items: center;
    display: flex;
}

.contact-social{
    color: #ffc2c4;
}

.contact .container{
    display: flex;
    justify-content: space-between;
}

.contact-form{
    background: #202023;
    padding: 64px;
}

.contact-form-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.contact-form-item{
    margin: 1.5rem 0;
    position: relative;
}

.contact-form-item label{
    position: absolute;
    left: 1rem;
    top: 0;
    transform: translateY(-50%);
    background: #202023;
    padding: .5rem 1rem;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #d9d9d94d;
}

.input{
    border: 1px solid #d9d9d926;
    background: transparent;
    padding: 24px;
    outline: 0;
    color: #eee;
    width: 100%;
}

.contact-form-item:focus-within .input-label{
    color: #ff989c;
}

.input:focus{
    border: 1px solid #ffc2c4;
}

@media only screen and (max-width:991px) {
    .header .container{
        height: 89px;
        z-index: 100;
    }
    .header{
        z-index: 20;
    }
    .header-menu-toggle{
        display: block;
        position: relative;
        z-index: 100;
    }

    body.menu-active{
        overflow-y: hidden;
    }

    .hero-subtitle{
        font-size: 21px;
    }

    .hero-title{
        font-size: 42px;
        line-height: 51px;
    }

    .insurance-details-item{
        width: 100%;
    }

    .header-menu{
        transform: translateX(-100%);
        opacity: 0;
        transition: .3s opacity ease, .3s transform ease;
        pointer-events: none;
        flex-direction: column;
        width: 60%;
        height: calc(100% - 121px);
        left: 0;
        bottom: 0;
        background: #222020;
        justify-content: start !important;
        position: fixed;
    }

    .header-nav{
        flex-direction: column;
    }

    .header-menu-active{
        pointer-events: unset !important;
        display: flex !important;
        opacity: 1;
        transform: translateX(0);

    }

    .mobile-hidden{
        display: none !important;
    }

    .insurance{
        height: max-content;
    }

    .insurance-details{
        flex-direction: column;
        gap: 1rem;
        margin: 1rem 0 !important;
    }

    .insurance-details-item{
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    .hero{
        height: 100vh;
        margin-top: 121px;
        margin-bottom: 6rem;
    }

    .insurance-home{
        margin: 0;
    }

    .insurance-image{
        opacity: 1;
        position: relative;
        transform: translateX(-50%);
        bottom: 0;
    }

    .insurance-home-content{
        opacity: 1;
        transform: scale(1);
        width: 100%;
    }

    .insurance-home-image-wrapper, .insurance-home-texts{
        position: relative;
        transform: translate(0);
        top: 0;
    }

    .insurance-home-texts{
        margin-top: 4rem;
    }

    .insurance-home-image{
        width: 100%;
        height: 298px;
    }

    .match-wrapper{
        margin-top: 2.5rem;
    }

    .insurance .container{
        width: unset !important;
    }
    
    .hero-background-image{
        object-fit: cover;
    }

    .footer-top{
        flex-direction: column;
        text-align: center;
    }

    .footer-right{
        flex-direction: column;
        margin-top: 2rem;
    }

    .header-nav{
        padding-left: 0;
    }

    .insurance-home-fire{
        height: 47px;
        bottom: 4.5rem;
        left: 13.5%;
    }

    .insurance-home-fire:nth-child(2){
        bottom: 5.5rem;
        left: 35%;
    }

    .insurance-home-fire:nth-child(3){
        bottom: 4.5rem;
        left: 58.5%;
    }

    .insurance-home-fire:last-child{
        bottom: 4.5rem;
        left: 70%;
    }

    .insurance-image{
        width: 100%;
    }
}