@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Licorice&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
    --light:    #F5F5F5;
    --primary:  #FCD9E2;
    --secondary:#D08A9F;
    --terciary: #F6EDF1;
    --accent:   #D15180;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

* {
    padding: 0;
    margin: 0;
}

body {
    color: var(--secondary);
    text-align: center;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

/* ? Header */

.header {
    position: relative;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 10rem;
}

@media screen and (max-width: 760px) {
    .header {
        padding-bottom: 1.25rem;
    }
}


.container-background {
    background-image: url(../images/background.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    display: flex; 
    flex-direction: column; 
    align-items: center;  
    justify-content: center;
}

@media screen and (max-width: 760px) {
    .container-background {
        background-position: 81% center;
    }
}


.header-h1 {
    color: #FFF;
    text-align: center;
    font-family: 'Licorice', cursive;
    font-size: 8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: initial;
    /* margin-bottom: -1.625rem; */
    margin-top: 5rem;
}

@media screen and (max-width: 760px) {
    .header-h1 {
        font-size: 4.375rem;
        margin-top: 1.25rem;
        margin-bottom: 0.63rem;
    }
}

.header-h2 {
    color: #FFF;
    text-align: center;
    font-size: 2.75rem;
    font-style: normal;
    font-weight: 900;
    line-height: 3rem;
    text-transform: uppercase;
    max-width: 52rem;
}

@media screen and (max-width: 760px) {
    .header-h2 {
        font-size: 1.625rem;
        line-height: 1.625rem;
        max-width: 22.31rem;
    }
}


.dot {
    color: #FFF;
    font-size: 6rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media screen and (max-width: 760px) {
    .dot {
        font-size: 4.375rem;
        font-weight: 400;
    }
}


.header-p {
    color: #1E1E1E;
    text-align: center;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    margin: 2.5rem 0rem 5rem 0rem;
    max-width: 52rem;
}

@media screen and (max-width: 760px) {
    .header-p {
        color: #1E1E1E;
        font-size: 1rem;
        line-height: normal;
        margin: 3.75rem 0rem 3.75rem 0rem;
        max-width: 21.31rem;
    }
}


.btn-1 {
    color: #FFF;
    text-align: center;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    display: flex;
    width: 23.25rem;
    height: 4.5625rem;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 1.25rem;
    background: #D15180;
    border: none;
}

@media screen and (max-width: 760px) {
    .btn-1 {
        font-size: 1rem;
        width: 16.3125rem;
        height: 3.125rem;
    }
}


.btn-1:hover {
    cursor: pointer;
}

.logo {
    max-width: 16rem;
    margin: 0 auto;
    padding-top: 5.44rem;
}

@media screen and (max-width: 760px) {
    .logo {
        max-width: 12rem;
        margin: 0 auto;
        padding-top: 5.94rem;
    } 
}


/* ? Section 2 */
.section-2 {
    max-width: 100%;
    padding: 15.63rem 0rem 0rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #F6F6F6;
    margin-top: 0.62rem;
}

@media screen and (max-width: 760px) {
    .section-2 {
        padding: 0rem;
    }
}

.percentage-wrap {
    width: 100%;
    margin: 0rem 0rem -5.625rem -28.625rem;
}

@media screen and (max-width: 760px) {
    .percentage-wrap {
        margin: 6.29rem 0rem 0rem 0rem;
    }
}

.percentage-img-desk {
    width: 100%;
    height: 23rem;
    display: block;
    margin: 0 auto;
    text-align: center;
}

@media screen and (max-width: 760px) {
    .percentage-img-desk {
        display: none;
    }
}

.percentage-img-mob {
    height: 13.39rem;
    display: block;
    text-align: left;
}

@media screen and (min-width: 450px) {
    .percentage-img-mob {
        height: 13.39rem;
        display: inline;
    }
}

@media screen and (min-width: 760px) {
    .percentage-img-mob {
        display: none;
    }
}

.section-2-h2 {
    color: #D15180;
    text-align: center;
    font-size: 2.75rem;
    font-style: normal;
    font-weight: 900;
    line-height: 2.75rem;
    text-transform: uppercase;
    line-height: 3rem;
    max-width: 52rem;
    margin-bottom: 3.75rem;
}

@media screen and (max-width: 760px) {
    .section-2-h2 {
        font-size: 1.625rem;
        line-height: 1.625rem;
        max-width: 20rem;
        margin-bottom: 1.88rem;    
    }
}

.section-2-p {
    color: #1E1E1E;
    text-align: center;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    max-width: 53.4375rem;
    height: 100%;
}

@media screen and (max-width: 760px) {
    .section-2-p {
        font-size: 1rem;
        line-height: normal;
        max-width: 21.4375rem;
        height: 100%;    
    }
}

.tag {
    color: #D15180;
    text-align: center;
    font-size: 1.875rem;;
    font-style: normal;
    font-weight: 900;
    line-height: 1.875rem;
    text-transform: uppercase;
    margin: 6rem 0rem 3.75rem 0rem;
}

@media screen and (max-width: 760px) {
    .tag {
        font-size: 1.625rem;
        line-height: 5.75rem;
        margin: 1.06rem 0rem 1.69rem 0rem;
    }
}


/*  ? Section 3 */
.section-3 {
    max-width: 100%;
    padding-bottom: 11.87rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #F6F6F6;
    margin-bottom: 0.62rem;
}

@media screen and (max-width: 760px) {
    .section-3 {
        padding-bottom: 5.31rem;
    }
}

.section-3-p {
    color: #1E1E1E;
    text-align: center;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    margin-bottom: 5rem;
    max-width: 50rem;
}

@media screen and (max-width: 760px) {
    .section-3-p {
        font-size: 1rem;
        line-height: 1.125rem;
        max-width: 21.4275rem;
        margin-bottom: 2.5rem;
    }
}

.forma2 {
    position: relative;
    padding-left: 0.5rem;
    transition: all .4s linear;
    max-width: 33rem;
    margin: 0 auto;
    text-align: left;
}

@media screen and (max-width: 760px) {
    .forma2 {
        padding: 1rem;
    }
}

#forma2 input {
    margin-bottom: 1.88rem;
}

@media screen and (max-width: 760px) {
    #forma2 input {
        margin-bottom: 1.38rem;
    }
}


.forma2 p {
    padding-top: 0;
    font-size: 0.88rem;
    font-weight: 500;
    font-size: 0.88rem;
    color: #4A4A4A;
    padding-left: 15px;
}

.forma2 input,
.forma2 .block {
    width: 100%;
    border-radius: 1.25rem;
    border: 0.5px solid #FCD9E2;
    background: #FFF;
    margin-bottom: 1.87rem;
    width: 100%;
    border-radius: 0.9rem;
    padding: 1.5rem;
}

@media screen and (max-width: 760px) {
    .forma2 input,
    .forma2 .block {
        margin-bottom: 1.38rem;
    }
}

textarea:focus, input:focus{
    outline: 1px solid #D08A9F;
}

.forma2 label {
    color: #1E1E1E;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media screen and (max-width: 760px) {
    .forma2 label {
        font-size: 1rem;
    }
}

.gdpry label {
    color: #1E1E1E;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
}

@media screen and (max-width: 760px) {
    .gdpry label {
        font-size: 0.75rem;
        line-height: 0.875rem;
    }
}

label {
    display: inline-block;
    margin-bottom: 0.94rem;
}

@media screen and (max-width: 760px) {
    label {
        margin-bottom: 0.25rem;
    }
}


.forma2 input#okgo,
#send,
#grudaj {
    display: flex;
    width: 100%;
    height: 4.5625rem;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    color: #FFF;
    text-align: center;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 1.25rem;
    background: #D15180;
    margin-top: 5rem;
    border: none;
    text-transform: uppercase;
}

@media screen and (max-width: 760px) {
    .forma2 input#okgo,
    #send,
    #grudaj {
        width: 100%;
        height: 3.125rem;
        padding: 0.625rem;
        gap: 0.625rem;
        margin-top: 2.8rem;
        font-size: 1rem;
        font-weight: 700;
    }
}

#send:hover, #okgo:hover {
    cursor: pointer;
}

.forma2 input#okgo:hover,
#sendMessage:hover,
#send:hover,
#msg:hover,
#grudaj:hover {
    opacity: .8;
}

.container {
    display: block;
    position: relative;
    padding-left: 2.25rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
  
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.5625rem;
    height: 2.5625rem;
    border-radius: 0.625rem;
    border: 0.5px solid #D15180;
    background: #FFF;
}

@media screen and (max-width: 760px) {
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        width: 1.3125rem;
        height: 1.1875rem;
        border-radius: 0.3125rem;
    }  
}
  
  .container:hover input ~ .checkmark {
    background-color: #fff;
}
  
  .container input:checked ~ .checkmark {
    background-color: #D15180;
}
  
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
  
  .container input:checked ~ .checkmark:after {
    display: block;
}
  
  .container .checkmark:after {
    width: 2.5625rem;
    height: 2.5625rem;
    background: url(../images/checkmark.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    scale: 0.7;
}

@media screen and (max-width: 760px) {
    .container .checkmark:after {
        width: 1.3125rem;
        height: 1.1875rem;
        background-position: left center;
    }
}

a.link--check {
    color: #1E1E1E;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
    text-decoration-line: underline;
}

.d-inline-flex {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.12rem;
    margin-top: 0.75rem;
}

@media screen and (max-width: 760px) {
    .d-inline-flex {
        gap: 0rem;
    }
}


/* ? section video */
.section-video {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(110deg, #FFC9D7 8.1%, #FF9BB6 88.41%);
    padding: 5.94rem 0rem 6.09rem 0rem;
    margin-bottom: 0.62rem;
}

@media screen and (max-width: 992px) {
    .section-video {
        padding: 3.13rem 0rem;
    }
}

.section-video-h2 {
    color: #FFF;
    text-align: center;
    font-size: 3rem;
    font-style: normal;
    font-weight: 900;
    line-height: 3rem;
    text-transform: uppercase;
    max-width: 58rem;
    margin-bottom: 3.75rem;
}

@media screen and (max-width: 992px) {
    .section-video-h2 {
        font-size: 1.625rem;
        line-height: 2rem;
        max-width: 20rem;
        margin-bottom: 1.88rem;
    }
}

.section-video-p {
    color: #1E1E1E;
    text-align: center;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    margin-bottom: 4.88rem;
    max-width: 53rem;
}

@media screen and (max-width: 992px) {
    .section-video-p {
        font-size: 1rem;
        line-height: 1.125rem;
        max-width: 21.4375rem; 
        margin-bottom: 3.25rem;   
    }
}


.video {
    display: flex;
    justify-content: center;
    max-width: 62.5rem;
}

@media screen and (max-width: 992px) {
    .video {
        max-width: 90%;
    }
}

.video-img {
    display: block;
    width: 100%;
}


/* ? Section 4 */
.section-4 {
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(110deg, #FFC9D7 8.1%, #FF9BB6 88.41%);
    margin-bottom: 0.62rem;
    padding-bottom: 8.8rem;
}

@media screen and (max-width: 992px) {
    .section-4 {
        padding-bottom: 4.38rem;
    }
}

.swiper {
    background: linear-gradient(110deg, #FFC9D7 8.1%, #FF9BB6 88.41%); 
    position: relative; 
}

@media screen and (min-width: 2000px) {
    .swiper {
        background: transparent; 
        position: relative;
        max-width: 80%;
    }
}

.slide-wrapper {
    width: 1625px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: left;
}


.swiper-slide {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: left;
    gap: 2.31rem;
    height: fit-content;
    padding: 8.25rem 0 5.44rem 9.44rem;
}

@media screen and (max-width: 992px) {
    .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
        padding: 0rem;
        margin-top: 4.38rem;
        padding-bottom: 100px;
    }
}

.arrow {
    position: absolute;
    bottom: 45px;
    left: 9.44rem;
}

@media screen and (max-width: 992px) {
    .arrow {
        bottom: 20px;
        left: 45%;
    }    
}

@media screen and (max-width: 800px) {
    .arrow {
        bottom: 20px;
        left: 44%;
    }    
}

@media screen and (max-width: 750px) {
    .arrow {
        left: 43%;
    }    
}

@media screen and (max-width: 620px) {
    .arrow {
        left: 41%;
    }    
}

@media screen and (max-width: 500px) {
    .arrow {
        left: 40%;
    }    
}


@media screen and (max-width: 450px) {
    .arrow {
        left: 38%;
    }    
}

.swiper-button-next {
    background: url(../images/arrow2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 4rem !important;
    height: 4rem !important;
    left: 80px;
}

.swiper-button-prev {
    background: url(../images/arrow1.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 4rem !important;
    height: 4rem !important;
    left: 0;
}

@media screen and (max-width: 1400px) {
    .swiper-button-next {
        width: 3rem !important;
        height: 3rem !important;
        left: 60px;
    }
    
    .swiper-button-prev {
        width: 3rem !important;
        height: 3rem !important;
    }
}

@media screen and (max-width: 992px) {
    .swiper-button-next {
        width: 2.5rem !important;
        height: 2.5rem !important;
        left: 50px;
    }
    
    .swiper-button-prev {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

.swiper-button-next::after {
    display: none;
  }
  
.swiper-button-prev::after {
    display: none;
  }


/* .swiper-button-prev {
  background: url(../images/arrow-inactive.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 4.375rem !important;
  height: 4.375rem !important;
  position: absolute;
  top: 94%;
  left: 8%;
}

.swiper-button-next {
    background: url(../images/arrow-active.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 4.375rem !important;
    height: 4.375rem !important;
    position: absolute;
    top: 94%;
    left: 12%;
}

.swiper-button-next::after {
  display: none;
}

.swiper-button-prev::after {
  display: none;
} */



  
.slider-img {
    position: relative;
    width: 779px;
    height: 600px;
    background: url(../images/slider/slide1.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}

@media screen and (max-width: 1600px) {
    .slider-img {
        position: unset;
        max-width: 35rem;
        height: 27rem;
        background: url(../images/slider/slide1.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media screen and (max-width: 1100px) {
    .slider-img {
        max-width: 30rem;
        height: 22rem;
    }
}

@media screen and (max-width: 992px) {
    .slider-img {
        max-width: 21.375rem;
        height: 15.75rem;
    }
}

.slider-text-and-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 6.44rem;
    align-self: flex-end;
}

@media screen and (max-width: 1700px) {
    .slider-text-and-btn {
        margin-bottom: 3.44rem;
    }
}

@media screen and (max-width: 992px) {
    .slider-text-and-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 0rem;
        align-self: center;
    }
}

.slider-h2-desk {
    position: absolute;
    width: 865px;
    color: #FFF;
    font-size: 4.375rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-align: left;
    top: 12px;
    left: 603px;
}

@media screen and (max-width: 1700px) {
    .slider-h2-desk {
        font-size: 3.625rem;
        width: 765px;
        top: 150px;

    }
}

@media screen and (max-width: 1400px) {
    .slider-h2-desk {
        font-size: 3.25rem;
        width: 665px;
    }
}

@media screen and (max-width: 1280px) {
    .slider-h2-desk {
        font-size: 2.75rem;
        width: 565px;
    }
}

@media screen and (max-width: 1180px) {
    .slider-h2-desk {
        font-size: 2.25rem;
        width: 465px;
        left: 503px;
    }
}

@media screen and (max-width: 992px) {
    .slider-h2-desk {
        display: none;
    }
}

.slider-h2-mob {
    color: #FFF;
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    max-width: 21rem;
    height: 8.75rem;
    flex-shrink: 0;
    text-align: left;
    margin-bottom: 2.5rem;
}

@media screen and (min-width: 992px) {
    .slider-h2-mob {
        display: none;
    }
}

.slider-btn {
    display: flex;
    width: 372px;
    height: 73px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 20px;
    background: #D15180;
    color: #FFF;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
}

@media screen and (max-width: 1400px) {
    .slider-btn {
        width: 332px;
        height: 58px;
        padding: 10px;
        gap: 8px;
        border-radius: 15px;
        font-size: 18px;

    }
}

@media screen and (max-width: 1180px) {
    .slider-btn {
        width: 250px;
        height: 50px;
        font-size: 16px;
    }
}

@media screen and (max-width: 992px) {
    .slider-btn {
        width: 21.4375rem;
        height: 3.125rem;
        padding: 0.625rem;
        gap: 0.625rem;
        border-radius: 1.25rem;
        color: #FFF;
        font-size: 1rem;
        font-weight: 400;
        border: none;
    }
}

.slider-btn:hover {
    cursor: pointer;
}
  

/*  ? Section 5 */
.section-5 {
    background: #F6F6F6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 12.25rem;
}

@media screen and (max-width: 992px) {
    .section-5 {
        padding-top: 3.13rem;
    }
}

.korak-0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3.75rem;
    padding-bottom: 1.75rem;
    background: #F6F6F6;
}

@media screen and (max-width: 992px) {
    .korak-0 {
        gap: 1.88rem;
        padding-bottom: 3.25rem;
    }
}

.section-5-h1 {
    color: #D15180;
    text-align: center;
    font-size: 3rem;
    font-style: normal;
    font-weight: 900;
    line-height: 3rem;
    text-transform: uppercase;
}

@media screen and (max-width: 992px) {
    .section-5-h1 {
        color: #D15180;
        text-align: center;
        font-size: 1.625rem;
        font-style: normal;
        font-weight: 900;
        line-height: 2rem;
        text-transform: uppercase;
        max-width: 20rem;
    }
}

.section-5-p {
    color: #1E1E1E;
    text-align: center;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    max-width: 50rem;
}

@media screen and (max-width: 992px) {
    .section-5-p {
        color: #1E1E1E;
        text-align: center;
        font-style: normal;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.125rem;
        max-width: 21.4375rem;
    }
}

.korak-1, .korak-2, .korak-3 {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.korak-1-wrapper, .korak-3-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2.67rem;
    padding: 7.75rem 0rem;
    background: #FAFAFA;
    width: 100%;
}

@media screen and (max-width: 992px) {
    .korak-1-wrapper, .korak-3-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.88rem;
        padding: 3.13rem 0rem;
        background: #FAFAFA;
        width: 100%;
    }
}

@media screen and (max-width: 992px) {
    .korak-3-wrapper {
        gap: 4.37rem;
    }
}


.korak-2-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2.67rem;
    padding: 7.75rem 0rem;
    background: #F6F6F6;
    width: 100%;
}

.bottom-border-1 ,.bottom-border-2, .bottom-border-3 {
    height: 2px;
    width: 0;
    background: #D15180;
    transition: width 0.2s ease;
}

@media screen and (max-width: 1600px) {
    .korak-2-wrapper {
        margin-right: 10%;
    }
}

@media screen and (max-width: 992px) {
    .korak-2-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 2.67rem;
        padding: 1.9rem 0rem;
        background: #F6F6F6;
        width: 100%;
    }
}

.text-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.125rem;
    max-width: 57.5rem;
    text-align: left;
}

@media screen and (max-width: 992px) {
    .text-1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1.125rem;
        max-width: 57.5rem;
        text-align: left;
        padding: 0rem 1rem;
    }
}

.korak-h2 {
    color: #D15180;
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.625rem;
}

@media screen and (max-width: 1400px) {
    .korak-h2 {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 992px) {
    .korak-h2 {
        font-size: 1.375rem;
    }
}

.korak-p {
    color: #1E1E1E;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.625rem;
}

@media screen and (max-width: 1600px) {
    .korak-p {
        max-width: 800px;
        padding-right: 1rem;
    }
}

@media screen and (max-width: 1400px) {
    .korak-p {
        font-size: 1rem;
        line-height: 1.25rem;
        max-width: 800px;
        padding-right: 1rem;
    }
}

@media screen and (max-width: 992px) {
    .korak-p {
        font-size: 1rem;
        line-height: normal;
        padding-right: 0rem;
    }
}

.broj-1 {
    height: 11rem;
    width: 22rem;
    background: url(../images/num1.svg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: -2rem;

}

@media screen and (max-width: 992px) {
    .broj-1 {
        height: 4.6875rem;
        width: 19.5rem;
        background: url(../images/num1mob.svg);
        background-position: right center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 0rem;
        margin-right: 20%;
    }
}

.broj-2 {
    height: 18rem;
    width: 38rem;
    background: url(../images/num2.svg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: -7rem;
}

@media screen and (max-width: 1600px) {
    .broj-2 {
        height: 16rem;
    }
}

@media screen and (max-width: 992px) {
    .broj-2 {
        height: 7.34706rem;
        width: 20.5rem;
        background: url(../images/num2mob.svg);
        background-position: right center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 0rem;
        margin-right: 20%;
    }
}

.broj-3 {
    height: 12rem;
    width: 52rem;
    background: url(../images/num3.svg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}

@media screen and (max-width: 992px) {
    .broj-3 {
        height: 5.5rem;
        width: 20.875rem;
        background: url(../images/num3mob.svg);
        background-position: right center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: 20%;
    }
}



/*  ? Section 6 */
.section-6 {
    background: linear-gradient(110deg, #FFC9D7 8.1%, #FF9BB6 88.41%);
    padding: 5.94rem 0rem 11.12rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6.25rem;
    margin: 0.62rem 0rem;
}

@media screen and (max-width: 992px) {
    .section-6 {
        height: 100%;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin: 0.62rem 0rem;
        gap: 3.13rem;
        padding-bottom: 3.13rem;
    }
}

.section-6-h2 {
    max-width: 50rem;
    color: #FFF;
    text-align: center;
    font-size: 3rem;
    font-style: normal;
    font-weight: 900;
    line-height: 3rem;
    text-transform: uppercase;
}

@media screen and (max-width: 992px) {
    .section-6-h2 {
        max-width: 21rem;
        font-size: 1.625rem;
        line-height: 1.625rem;
        margin-top: 3.31rem;
    }
}

.harmonika {
    width: 82rem;
    height: 37rem;
}

@media screen and (max-width: 1400px) {
    .harmonika {
        width: 100%;
        height: 100%;
    }
}



/* ? Section 7 */
.section-7 {
   margin: 0 auto;
   background: #F6F6F6;
   padding: 11.87rem 0rem 13.13rem 0rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
}

@media screen and (max-width: 760px) {
    .section-7 {
        padding: 4.81rem 0rem 2.12rem 0rem;
     }      
}

.section-7-h2 {
    color: #D15180;
    text-align: center;
    font-size: 3rem;
    font-style: normal;
    font-weight: 900;
    line-height: 3rem;
    text-transform: uppercase;
    max-width: 45rem;
    margin-bottom: 3.75rem;
}

@media screen and (max-width: 760px) {
    .section-7-h2 {
        font-size: 1.625rem;
        line-height: 1.625rem;
        max-width: 21rem;
        margin-bottom: 1.88rem;
    }
}

.section-7-p {
    color: #1E1E1E;
    text-align: center;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    max-width: 50rem;
    margin-bottom: 5rem;
    padding: 0rem 1rem;
}

@media screen and (max-width: 760px) {
    .section-7-p {
        font-size: 1rem;
        font-weight: 400;
        line-height: normal;
        max-width: 23.375rem;
        margin-bottom: 1.5rem;
    }
}


/* ? Footer */
.footer {
    margin: 0 auto;
    background: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 3.13rem 0rem 3.13rem 0rem;
}

@media screen and (max-width: 760px) {
    .footer {
        padding: 0rem;
        padding-bottom: 1.38rem;
    }
}

.footer-partners {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 3.75rem;
}

@media screen and (max-width: 760px) {
    .footer-partners {
        margin-bottom: 5.62rem;
    }
}

.generalni-pokrovitelj {
    color: #D15180;
    text-align: center;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 5.75rem;
    text-transform: uppercase;
}

@media screen and (max-width: 760px) {
    .generalni-pokrovitelj {
        font-size: 0.875rem;
        line-height: normal;
    }
}

.pfizer {
    width: 16.5.rem;
    height: 100%;
}

@media screen and (max-width: 760px) {
    .pfizer {
        width: 14.625rem;
        height: 100%;
    }
}

.footer-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.donose {
    color: #D15180;
    text-align: center;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 5.75rem;
    text-transform: uppercase;
}

@media screen and (max-width: 760px) {
    .donose {
        color: #D15180;
        text-align: center;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;
        margin-bottom: 1.88rem;
    }
}

.footer-middle-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5.81rem;
    margin-bottom: 21.43rem;
}

@media screen and (max-width: 900px) {
    .footer-middle-logos {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 1.25rem;
        margin-bottom: 11.25rem;
    }
}

.legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.legal a {
    color: #D15180;
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

@media screen and (max-width: 900px) {
    .legal a {
        font-size: 0.875rem;
    }
}
















/* 
.reversed {
    display: flex;
    align-items: baseline;
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

@media (min-width: 800px) {
    .reversed {
        align-items: center;
    }   
}

.reversed--remove {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: none;
    -ms-filter: "none";
}


.logo {
    display: block;
    margin: 6rem auto 0;
    text-align: center;
}

@media (min-width: 992px) {
    .logo {
        margin: 3rem auto 0;
    }
}

.font-is--pink {
    color: var(--secondary);
}

.flowers {
    display: none;
}

@media (min-width: 800px) {
    .flowers {
        position: absolute;
        display: block;
        z-index: -1;
        max-width: 45rem;
        width: 100%;
    }

    .flowers img {
        width: 100%;
    }
    
    .flower--one {
        right: -20%;
    }
    
    .flower--two {
        left: -20%;
        transform: scaleX(-1);
    }
    
    .flower--three {
        top: -35%;
        left: -90%;
        transform: scaleX(-1);
    }    

    .flower--four {
        top: 90%;
        right: -20%;
    }
}

.steps {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    padding-bottom: 2rem;
    text-align: left;
}

@media (min-width: 992px) {
    .steps {
        flex-direction: row;
    }
}

.steps span {
    display: block;
    margin-top: 1rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 800;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.steps > div {
    margin: 2rem auto 3rem;
    text-align: center;
}

.steps div img {
    width: 80%;
    padding-top: 1rem;
}

@media (min-width: 992px) {
    .steps:nth-child(even) h3 {
        text-align: right;
    }
}

.steps:nth-child(even) {
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .steps:nth-child(even) {
        display: flex;
        flex-direction: row-reverse;
        text-align: right;
    }

    .steps:nth-child(even) p {
        text-align: right;
        margin: 3rem 0 0 7.5rem;
    }
}

.steps div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    padding: 0.5rem 0 2rem;
    text-align: center;
}

@media (min-width: 992px) {
    .steps div:nth-child(2) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 65%;
        padding: 0.5rem 1rem 2rem;
        text-align: left;
    }
}

.steps p {
    margin: 3rem auto 0;
    font-size: 1.15rem;
}

@media (min-width: 992px) {
    .steps p {
        margin: 3rem 7.5rem 0 0;
        font-size: 1.15rem;
    }    
}

.steps ul {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.15rem;
    line-height: 1.2;
    margin: 3rem 0 0;
    text-align: right;
}

.steps ul li {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.15rem;
    line-height: 1.2;
    list-style-type: none;
}

.more {
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .more {
        flex-direction: row;
    }      
}

.more > div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
}

@media (min-width: 992px) {
    .more > div {
        width: 33.3%;
    }    
}
  
.more > div > div {
    flex-grow: 1;
    width: 33%;
    height: 100px;
}
  
.more img {
    width: 100%;
}

.more p {
    min-height: 5rem;
    margin-top: 1rem;
}

@media (min-width: 992px) {
    .more p {
        margin: 2rem 0;
    }
}
 */