/* Temp */

@font-face {
    font-family: 'Averta CY';
    src: url('../fonts/Averta_Cyrillic_Regular.otf') format('opentype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
 
@font-face {
    font-family: 'Circe';
    src: url("../fonts/CirceRounded-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
/* Temp */ 

/* Root */

:root {
    /* Colors */
    --b2b-primary_color: #00b400;
    --b2b-tile_color: #f7f7fcff;
    --b2b-heading_color: #1f1f1f;
    --b2b-paragraph_color: #717171;
    --b2b-svg_color: #1f1f1f;
    /* Colors */

    /* Shadows */
    --b2b-tile_shadow: drop-shadow(0 2px 3px #ABBED133);
    /* Shadows */
}

/* Root */

/* Global */

.b2b {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 5rem;
    max-width: 100%;
    width: 100%;
}

.b2b h2 {
    text-align: left;
    color: var(--b2b-heading_color);
    font-weight: 700;
    font-size: 2rem;
    line-height: calc(2 / 1.75);
    letter-spacing: 0.5px;
}

.b2b .b2b-heading {
    font-family: 'Averta CY', sans-serif;
    text-align: left;
    color: var(--b2b-heading_color);
    font-weight: 700;
    font-size: 2rem;
    line-height: calc(2 / 1.75);
    letter-spacing: 0.5px;
}

.b2b p {
    text-align: left;
    color: var(--b2b-paragraph_color);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25;
}

.b2b .b2b-paragraph {
    text-align: left;
    color: var(--b2b-paragraph_color);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25;
}

.b2b span {
    display: block;
    overflow: hidden;
    color: var(--b2b-primary_color);
}

.b2b strong {
    color: var(--b2b-paragraph_color);
}

.b2b .b2b-primary {
    color: var(--b2b-primary_color);
}

.b2b .b2b-bg-primary {
    background-color: var(--b2b-primary_color);
}

.b2b .b2b-bg-tile {
    background-color: var(--b2b-tile_color);
}

.b2b-split-line {
    display: block;
}

/* Global */

/* Hero */

.b2b-hero-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 8rem 0;
    gap: 0rem;
    opacity: 0;
}

.b2b-hero-wrapper h1 {
    color: #2c2c2d;
    letter-spacing: 0.85px;
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

.b2b-hero-wrapper h1 span {
    color: var(--b2b-heading_color);
}

.b2b-hero-wrapper h1 .b2b-primary {
    letter-spacing: 0;
}

.b2b-hero-wrapper h2 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    gap: 0.75rem;
    color: #4d4d4d;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
    margin-bottom: 2rem;
}

.b2b-hero-wrapper h2 span {
    color: var(--b2b-paragraph_color);
    white-space: normal;
}

.b2b-hero-wrapper h2 span .b2b-split-char {
    color: var(--b2b-paragraph_color);
}

.b2b-hero-wrapper .__btn {
    font-weight: 500;
    background-color: var(--b2b-primary_color);
    padding: 0 2rem;
    opacity: 0;
}

.b2b-hero-wrapper .__btn:not(._line):hover {
  background-color: var(--btn_bg);
}

.b2b-hero-wrapper .__btn:not(._line):active {
  transform: translateY(1px);
}

.b2b-hero-wrapper svg {
    display: block;
    width: auto;
    height: 20.5rem;
}

@media screen and (min-width: 1024px) and (max-width: 1249px) {
    .b2b-hero-wrapper {
        padding: 8rem 0;
    }

    .b2b-hero-wrapper h1 {
        letter-spacing: 0.75px;
        font-size: 2.85rem;
    }

    .b2b-hero-wrapper h2 {
        font-size: 1.25rem;
    }

    .b2b-hero-wrapper svg {
        height: 18rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .b2b-hero-wrapper {
        flex-direction: column-reverse;
        text-align: center;
        padding: 2.5rem 0;
        gap: 3rem;
    }

    .b2b-hero-wrapper h1 {
        font-size: 2.5rem;
        white-space: normal;
        margin-bottom: 1.2rem;
    }

    .b2b-hero-wrapper h1 span {
        white-space: pre-wrap;
        margin-bottom: 0.25rem;
    }

    .b2b-hero-wrapper h2 {  
        flex-direction: column;
        gap: 0rem;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        text-align: center;
        margin: 0 5rem;
        margin-bottom: 2rem;
    }

    .b2b-hero-wrapper svg {
        height: 20rem;
    }
}

@media screen and (max-width: 767px) {
    .b2b-hero-wrapper {
        flex-direction: column-reverse;
        align-items: center;
        padding: 1rem 0;
        gap: 3rem;
        min-height: calc(100vh - var(--header));
    }

    .b2b-hero-wrapper h1 {
        letter-spacing: 0.5px;
        font-size: 2rem;
        white-space: normal;
        margin: 0 0.5rem;
        margin-bottom: 1.2rem;
        text-align: center;
        white-space: pre-wrap;
    }

    .b2b-hero-wrapper h1 span {
        white-space: pre-wrap;
        margin-bottom: 0.25rem;
    }

    .b2b-hero-wrapper h2 {
        flex-direction: column;
        gap: 0rem;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        text-align: center;
        margin: 0 5rem;
        margin-bottom: 2rem;
        white-space: pre-wrap;
    }

    .b2b-hero-wrapper svg {
        height: auto;
        width: 100%;
    }

    .b2b-hero-wrapper .b2b-about {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

/* Hero */

/* Clients */

.b2b-clients-wrapper {
    opacity: 0;
}

.b2b-clients-wrapper h2 {
    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 1.25rem;
    white-space: pre-wrap;
}

.b2b-clients-wrapper p {
    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 3.5rem;    
}

.b2b-clients-wrapper .b2b-list {
    display: flex;
    position: relative;
    width: 70%;
    margin: 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1rem;
}

.b2b-clients-wrapper .b2b-list img {
    display: block;
    height: auto;
    width: 40px;
    object-fit: contain;
    object-position: center;
    color: var(--b2b-svg_color);
}

.b2b-clients-wrapper .b2b-list .b2b-product-air-conditioner {
    width: 70px;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .b2b-clients-wrapper h2 {
        padding: 0 1.5rem;
        white-space: normal;
    }

    .b2b-clients-wrapper p {
        padding: 0 2rem;   
    }

    .b2b-clients-wrapper .b2b-list {
        width: 75%;
        gap: 2rem;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 767px) {
    .b2b-clients-wrapper h2 {
        font-size: 1.85rem;
        padding: 0 0.5rem;
        white-space: normal;
    }

    .b2b-clients-wrapper p {
        padding: 0 1rem;   
        
    }

    .b2b-clients-wrapper .b2b-list {
        width: 90%;
        gap: 2rem;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Clients */

/* Community */

.b2b-community-wrapper {
    opacity: 0;
}

.b2b-community-wrapper h2 {
    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
    color: var(--b2b-primary_color);
}

.b2b-community-wrapper p {
    text-align: center;
    display: block;
    width: 100%;    
    margin-bottom: 1.5rem;
}

.b2b-community-wrapper .b2b-list {
    display: flex;
    position: relative;
    width: 100%;
    margin: 0 auto;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 3rem;
    padding: 0 0.5rem;
}

.b2b-community-wrapper .b2b-list .b2b-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--b2b-tile_color);
    border-radius: 5px; 
    padding: 1.5rem 2rem;   
    filter: var(--b2b-tile_shadow);
    overflow: hidden;
    will-change: transform; 
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.b2b-community-wrapper .b2b-list .b2b-item .b2b-icon-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: var(--b2b-primary_color);
    border-radius: 12px 4px 7px 4px;
    margin-bottom: 1rem;
}

.b2b-community-wrapper .b2b-list .b2b-item .b2b-icon-frame svg {
    display: block;
    height: 40px;
    width: 40px;
    color: var(--b2b-svg_color);
}

.b2b-community-wrapper .b2b-list .b2b-item .b2b-heading {
    color: var(--b2b-heading_color);
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0.75rem;
}

.b2b-community-wrapper .b2b-list .b2b-item p {
    margin-bottom: 0;
    text-wrap: balance;
    max-width: 15rem;
}

@media screen and (min-width: 1024px) and (max-width: 1249px) {
    .b2b-community-wrapper .b2b-list {
        gap: 2rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .b2b-community-wrapper .b2b-list {
        gap: 2rem;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 767px) {
    .b2b-community-wrapper .b2b-list {
        gap: 2rem;
        flex-wrap: wrap;
    }

    .b2b-community-wrapper .b2b-list .b2b-item p {
        margin-bottom: 0;
        text-wrap: pretty;
        max-width: 18rem;
    }
}

/* Community */

/* Supply */

.b2b-supply-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    opacity: 0;
}

.b2b-supply-wrapper .b2b-frame img {
    width: 30rem;
    height: auto;
}

.b2b-supply-wrapper .b2b-about h2 {
    margin-bottom: 1rem;
}

.b2b-supply-wrapper .b2b-about .__btn {
    font-weight: 500;
    background-color: var(--b2b-primary_color);
    padding: 0 2rem;
    opacity: 0;
}

.b2b-supply-wrapper .b2b-about .__btn:not(._line):hover {
    background-color: var(--btn_bg);
}

.b2b-supply-wrapper .b2b-about .__btn:not(._line):active {
    transform: translateY(1px);
}

.b2b-supply-wrapper .b2b-about ul {
    padding-left: 1.6em;
    margin-bottom: 2rem;
}

.b2b-supply-wrapper .b2b-about li {
    margin-bottom: 0.5em;
    list-style-type: disc;
    color: var(--b2b-paragraph_color);
}

@media screen and (min-width: 1024px) and (max-width: 1249px) {
    .b2b-supply-wrapper .b2b-frame img {
        width: 25rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .b2b-supply-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        margin-top: 3rem;
        margin-bottom: 1rem;
    }

    .b2b-supply-wrapper .b2b-frame img {
        width: 35rem;
    }

    .b2b-supply-wrapper .b2b-about h2 {
        margin-bottom: 1rem;
    }

    .b2b-supply-wrapper .b2b-about {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .b2b-supply-wrapper .b2b-about > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

@media screen and (max-width: 767px) {
    .b2b-supply-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        margin-top: 3rem;
        margin-bottom: 1rem;
    }

    .b2b-supply-wrapper .b2b-frame {
        max-width: 35rem;
        width: 100%;
        height: auto;
        padding: 0 1rem;
    }

    .b2b-supply-wrapper .b2b-frame img {
        width: 100%;
        height: 100%;
    }

    .b2b-supply-wrapper .b2b-about h2 {
        margin-bottom: 1.5rem;
    }

    .b2b-supply-wrapper .b2b-about {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .b2b-supply-wrapper .b2b-about ul {
        padding: 0 2.5rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .b2b-supply-wrapper .b2b-about ul li {
        max-width: 90%;
        width: 90%;
        text-wrap: pretty;
    }   

    .b2b-supply-wrapper .b2b-about > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

/* Supply */

/* Achievements */

.b2b-achievements-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 2.5rem 0;
    opacity: 0;
}

.b2b-achievements-wrapper .b2b-frame img {
    width: 30rem;
    height: auto;
}

.b2b-achievements-wrapper .b2b-about h2 {
    margin-bottom: 1rem;
}

.b2b-achievements-wrapper .b2b-about .__btn {
    font-weight: 500;
    background-color: var(--b2b-primary_color);
    padding: 0 2rem;
    opacity: 0;
}

.b2b-achievements-wrapper .b2b-about .__btn:not(._line):hover {
    background-color: var(--btn_bg);
}

.b2b-achievements-wrapper .b2b-about .__btn:not(._line):active {
    transform: translateY(1px);
}

.b2b-achievements-wrapper .b2b-about ul {
    padding-left: 1.6em;
    margin-bottom: 2rem;
}

.b2b-achievements-wrapper .b2b-about li {
    margin-bottom: 0.5em;
    list-style-type: disc;
    color: var(--b2b-paragraph_color);
}

@media screen and (min-width: 1024px) and (max-width: 1249px) {
    .b2b-achievements-wrapper .b2b-frame img {
        width: 25rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .b2b-achievements-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        margin-top: 0rem;
        margin-bottom: 1rem;
    }

    .b2b-achievements-wrapper .b2b-frame img {
        width: 30rem;
    }

    .b2b-achievements-wrapper .b2b-about h2 {
        margin-bottom: 1rem;
    }

    .b2b-achievements-wrapper .b2b-about {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .b2b-achievements-wrapper .b2b-about > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

@media screen and (max-width: 767px) {
    .b2b-achievements-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        margin-top: 0rem;
        margin-bottom: 1rem;
    }

    .b2b-achievements-wrapper .b2b-frame {
        max-width: 30rem;
        width: 100%;
        height: auto;
        padding: 0 1rem;
    }

    .b2b-achievements-wrapper .b2b-frame img {
        width: 100%;
        height: 100%;
    }

    .b2b-achievements-wrapper .b2b-about h2 {
        margin-bottom: 1.5rem;
    }

    .b2b-achievements-wrapper .b2b-about {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .b2b-achievements-wrapper .b2b-about ul {
        padding: 0 2.5rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .b2b-achievements-wrapper .b2b-about ul li {
        max-width: 90%;
        width: 90%;
        text-wrap: pretty;
    }   

    .b2b-achievements-wrapper .b2b-about > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

/* Achievements */

/* Features */

.b2b-features-wrapper {
    opacity: 0;
}

.b2b-features-wrapper h2 {
    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 1.5rem;
}

.b2b-features-wrapper p {
    text-align: center;
    display: block;
    width: 100%;    
    margin-bottom: 1.5rem;
}

.b2b-features-wrapper .b2b-list {
    display: flex;
    flex: 1 1 100%;
    position: relative;
    width: 100%;
    margin: 0 auto;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.b2b-features-wrapper .b2b-list .b2b-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--b2b-tile_color);
    border-radius: 5px; 
    padding: 1.5rem 1rem;   
    filter: var(--b2b-tile_shadow);
    width: 14rem;
    overflow: hidden;
    will-change: transform; 
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.b2b-features-wrapper .b2b-list .b2b-item img {
    display: block;
    height: 40px;
    width: 40px;
    object-fit: contain;
    object-position: center;
    margin-bottom: 0.75rem;
}

.b2b-features-wrapper .b2b-list .b2b-item .b2b-heading {
    color: var(--b2b-primary_color);
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0.75rem;
}

.b2b-features-wrapper .b2b-list .b2b-item p {
    margin-bottom: 0;
    flex-wrap: balance;
}

@media screen and (max-width: 767px) {
    .b2b-features-wrapper .b2b-list .b2b-item {
        width: 90%;  
    }
}

/* Features */

/* Benefits */

.b2b-benefits-wrapper {
    padding: 2.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
    gap: 2.5rem;
    opacity: 0;
}

.b2b-benefits-wrapper .b2b-list {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 0.25rem;
    justify-content: center;
}

.b2b-benefits-wrapper .b2b-list ul {
    padding-left: 1.6em;
    width: fit-content;
}

.b2b-benefits-wrapper .b2b-list li {
    margin-bottom: 0.5em;
    list-style-type: disc;
    color: var(--b2b-paragraph_color);
    width: fit-content;
}

.b2b-benefits-wrapper .b2b-list li p {
    display: block;
    width: fit-content;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .b2b-benefits-wrapper h2 {
        text-align: center;
    }

    .b2b-benefits-wrapper .b2b-list {
        gap: 0.25rem;
        grid-template-rows: 1fr;
        grid-auto-flow: row;
    }
}

@media screen and (max-width: 767px) {
    .b2b-benefits-wrapper h2 {
        text-align: center;
    }

    .b2b-benefits-wrapper .b2b-list {
        gap: 0.25rem;
        grid-template-rows: 1fr;
        grid-auto-flow: row;
        padding: 0 2rem;
    }
}

/* Benefits */

/* Contacts */

.b2b-contacts-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
    gap: 2rem;
    padding: 2.5rem 0;
    opacity: 0;
}

.b2b-contacts-wrapper h2 {
    color: var(--white);
}

.b2b-contacts-wrapper a {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    
}

.b2b-contacts-wrapper svg {
    display: block;
    height: 32px;   
    width: 32px;
    color: red;
    --b2b-svg_dynamic_color: var(--white);
}

.b2b-contacts-wrapper svg path {
    transition: all 0.43s ease;
}

.b2b-contacts-wrapper .b2b-heading {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--white);
    transition: all 0.43s ease;
}

.b2b-contacts-wrapper a:hover svg {
    --b2b-svg_dynamic_color: var(--accent);
}

.b2b-contacts-wrapper a:hover .b2b-heading {
    color: var(--accent);
}

/* Contacts */

/* Form */

.b2b-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1.5rem;
    max-width: 640px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 5rem;
    opacity: 0;
}

.b2b-form-wrapper h1 {
    color: #00b000;
    font-size: 2.25rem;
}

.b2b-form-wrapper p {
    text-align: center;
    white-space: normal;
}

.b2b-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1rem;
}

.b2b-form-wrapper input, 
.b2b-form-wrapper textarea {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background: #f9fafb;
    border: solid 1px #dbdee28f;
    border-radius: 10px;
    box-sizing: border-box;
    resize: none;
}

.b2b-form-wrapper textarea {
    padding-top: 0.75rem;
}

.b2b-form input:hover,
.b2b-form textarea:hover {
    border-color: #4b4b4b80;
}

.b2b-form input:focus,
.b2b-form textarea:focus {
    border-color: #4b4b4b80;
    box-shadow: 0 0 3px #4b4b4b30;
}

.b2b-form-wrapper .__btn {
    font-weight: 500;
    background-color: var(--b2b-primary_color);
    padding: 0 2rem;
    width: fit-content;
    margin: 0 auto;
}

.b2b-form-wrapper .__btn:not(._line):hover {
    background-color: var(--btn_bg);
}

.b2b-form-wrapper .__btn:not(._line):active {
    transform: translateY(1px);
}

.b2b-form-wrapper .b2b-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

.b2b-form-wrapper .b2b-button svg {
    width: 24px;
    height: auto;
    transform: translateY(1px);
}

.b2b-error {
    border: 1px solid #f4433681 !important;
}

.b2b-text-danger {
	text-align: center;
    display: block;
    width: 100%;
    color: #f44336b7 !important;
    transform: translateY(-0.45rem);
}

@media screen and (max-width: 767px) {
    .b2b-form-wrapper p {
        white-space: pre-wrap;
    }
} 

/* Form */

/* Loader */

.b2b-loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000075;
    z-index: 9999;
    display: none;
}

.b2b-loader-wrapper .b2b-loader {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.b2b-loader-wrapper .b2b-loader-spinner {
    display: block;
    width: 60px;
    height: 60px;
    border: 6px solid #e0e0e0;
    border-top: 6px solid var(--b2b-primary_color);
    border-radius: 50%;
    animation: b2b-spin-loader 1s linear infinite;
}

@keyframes b2b-spin-loader {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Loader */