@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap");

* {
    box-sizing               : border-box;
    font-family              : "Montserrat", sans-serif;
    line-height              : 1.15; /* 1 */
    -webkit-text-size-adjust : 100%; /* 2 */
    margin                   : 0;
    padding                  : 0;
}

:root {
    --primary-red    : #ee2e25;
    --secondary-gray : #565656;
    --light-gray     : #f5f5f5;
}

a {
    text-decoration : none;
    color           : white;

    font-style      : normal;
    font-weight     : 500;
    font-size       : 24.058px;
    line-height     : 61px;
}

a:hover {
    color           : white;
    text-decoration : none;
}

h2 {
    margin-bottom : 2rem;
}

.container {
    min-width : 1790px;
}

@media (max-width : 1790px) {
    .container {
        min-width: 0;
    }
}

/* hero section*/

.hero {
    background-image    : url("/assets/images/hero-background.svg");
    background-color    : var(--primary-red);
    background-size     : cover;
    background-position : center;
    min-height          : 100vh;

    display             : flex;
    align-items         : center;
    justify-content     : center;
}

.hero .box {
    text-align  : center;
    line-height : 5rem;
    color       : white;
    padding     : 6rem 0 6rem 0;
}

#w-logo {
    width         : 378px;
}

h1 {
    font-weight    : 400;
    font-size      : 75px; /*75.0252px */
    line-height    : 91px;
    letter-spacing : 0.04em;
    margin-bottom  : 1rem;
}

@media (max-width : 768px) {
    .container {
        min-width: 0;
    }
    .hero {
        height : 700px;
    }
    h1 {
        font-size   : 28px;
        line-height : 150%;
    }
    #w-logo {
        width         : 50%;
    }
}

/*@media (max-width : 1510px) and (min-width : 1000px) {
    h1 {
        font-size     : 60px;
        margin-bottom : 2rem;
    }

    .hero p {
        font-size : 25px;
        padding   : 0 2rem;
    }

    #w-logo {
        width : 40vw;
    }

    #dali-logo {
        width : 15vh;
    }
}*/

/*second section*/

.section-2 {
    background-color : var(--light-gray);
    color            : var(--secondary-gray);

    padding          : 120px 0 120px 0;
}

.section-2 h2 {
    font-family : "Montserrat";
    font-style  : normal;
    font-weight : 500;
    font-size   : 54px;
    line-height : 150%;
}

.section-2 .box h3 {
    margin-bottom : 2rem;

    font-style    : normal;
    font-weight   : 500;
    line-height   : 150%;
}

.section-2 p {
    font-style  : normal;
    font-weight : 300;
    font-size   : 22px;
    line-height : 33px;
}

@media only screen and (max-width : 768px) {
    .section-2{
        padding: 5rem 5% 5rem 5%;
    }

    .section-2 h2{
        margin-bottom: 0;
    }

    .section-2 .container{
        min-width: 0;
    }

    .section-2 .box h3{
        font-size     : 16px;
    }
}

/*dark grey section*/

.dark-grey-section {
    color : white;
}

.right-side {
    background: var(--secondary-gray);
    background-image    : url(assets/images/dotted-line.png);
    background-position : right 0 bottom 100%;
    background-size: 30%;
    background-repeat: no-repeat;
    min-height: 300px;

    display             : flex;
    justify-content     : center;
    align-items         : left;
    font-weight         : 300;
    font-size           : 22px;
    line-height         : 32px;
}

@media only screen and (max-width : 768px) {
    .right-side {
        background-size:100%;
        background-position : right -70px bottom -90px;
        margin-top: 0;
        margin-bottom: 0;
    }
    .right-side p{
        line-height: 150%;
    }
}
@media only screen and (max-width : 300px) {
   .right-side{
    padding-top: 2rem;
    padding-bottom: 2rem;
   }
}

/* red section - section-3 */
/** /////////////////////
------- red section
 */

.red-block {
    /*background-color: var(--primary-red);*/
    /*background-image    : url(assets/images/red-bg.svg);*/
    background-color : var(--primary-red);
    color            : white;
    padding          : 120px 0 120px 0;
}
.red-block .icon {
    max-width : 86px;
}
.red-block .box {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    align-items     : stretch;
    max-width       : 100rem;
    margin          : 0 auto;
    margin-bottom   : 210px;
}
.red-block .icon-dash {
    position : absolute;
    bottom   : -60px;
    right    : -80px;
}
.red-block h2 {
    font-style     : normal;
    font-weight    : 500;
    font-size      : 54px;
    text-transform : uppercase;
    padding        : 0;
    padding-bottom : 85px;
}

.red-block .box .cards {
    margin-bottom : 2rem;
    padding-right : 1.5rem;
}

.red-block .box .cards ul {
    padding-left : 1.1rem;

    font-style   : normal;
    font-weight  : 300;
    font-size    : 22px;
}

.red-block p, .red-block li {
    font-style  : normal;
    font-weight : 300;
    font-size   : 22px;
    max-width   : 95%;

    margin-bottom: 0.5rem;
}
.red-block li {
    list-style : none;
    position   : relative;
}
.red-block li:before {
    content       : '';
    width         : 3px;
    height        : 3px;
    position      : absolute;
    left          : -20px;
    top           : 11px;
    background    : white;
    border-radius : 25px;
}
.red-block .card-title-box {
    display        : flex;
    align-items    : center;
    margin-bottom  : 2rem;

    letter-spacing : 0.1rem;
}

.red-block .card-title-box h3 {
    margin-bottom : 0;

    font-style    : normal;
    font-weight   : 400;
    font-size     : 32px;
}

.red-block .red-block .icon {
    width        : 92px;
    height       : 92px;
    margin-right : 1rem;
}

@media only screen and (max-width : 768px) {
    .red-block {
        padding: 60px 0;
    }

    .red-block .box .cards {
        flex-basis    : 100%;
        padding-right : 0;
    }

    .red-block .box {
        margin-bottom : 2rem;
    }

    .red-block h3 {
        font-size : 20px;
    }

    .red-block p {
        font-size : 18px;
    }

    .red-block h2 {
        font-size     : 24px;
        margin-bottom : 2rem;
        /*margin-top    : 2rem;*/
        padding-bottom: 0;
    }
    .red-block .icon {
        width        : 72px;
        height       : 72px;
        margin-right : 1rem;
    }
    .red-block .box .cards ul {
        font-size : 18px;
    }
    .red-block li{
        line-height: 150%;
        margin-left: 2rem;
    }
}

@media only screen and (max-width : 300px) {
    .red-block p {
        margin-right : 2rem;
    }

    .red-block .icon {
        margin-bottom : 2rem;
    }

    .red-block h3 {
        font-size : 16px;
    }
}

@media (max-width : 1700px) {
    .red-block {
        background-size : auto;
    }
}

/*////*/

.section-3 {
    /*background-color: var(--primary-red);*/
    background-image    : url(assets/images/red-bg.svg);
    background-size     : cover;
    background-position : center;
    padding             : 5rem 15% 5rem 15%;
    /*min-height          : 1183px;*/
    height              : auto;
    color               : white;
    display             : flex;
    flex-wrap           : wrap;
    justify-content     : space-between;
    align-items         : center;
}

.section-3 .box {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    align-items     : stretch;
    max-width       : 100rem;
    margin          : 0 auto;
    /*margin-bottom   : 210px;*/
}

.section-3 h2 {
    font-style     : normal;
    font-weight    : 500;
    font-size      : 54px;
    line-height    : 150%;
    text-transform : uppercase;

    margin-bottom  : 85px;
    margin-top     : 117px;
    padding        : 0;
}

.section-3 .box .cards {
    margin-bottom : 2rem;
    padding-right : 1.5rem;
}

.section-3 .box .cards ul {
    padding-left : 1.1rem;

    font-style   : normal;
    font-weight  : 300;
    font-size    : 22px;
    line-height  : 120%;
}

/*.section-3 p {
    font-style  : normal;
    font-weight : 300;
    font-size   : 22px;
    line-height : 27px;
}*/

.card-title-box {
    display        : flex;
    align-items    : center;
    margin-bottom  : 2rem;

    letter-spacing : 0.1rem;
}

.card-title-box h3 {
    margin-bottom : 0;

    font-style    : normal;
    font-weight   : 400;
    font-size     : 32px;
    line-height   : 150%;
}

.section-3 .icon {
    width        : 92px;
    height       : 92px;
    margin-right : 1rem;
}

@media only screen and (max-width : 768px) {
    .section-3 {
        padding: 2rem 5% 2rem 5%;
        height: 170vh;
    }

    .section-3 .box .cards {
        flex-basis    : 100%;
        padding-right : 0;
    }

    .section-3 .box {
        margin-bottom : 1rem;
    }

    .section-3 h3 {
        font-size   : 22px;
        line-height : 140%;
        font-weight: 400;
    }

    .section-3 p {
        font-size : 18px;
    }

    .section-3 h2 {
        font-size     : 24px;
        margin-bottom : 2rem;
        line-height   : 150%;
        margin-top    : 2rem;
    }
    .section-3 .icon {
        width        : 72px;
        height       : 72px;
        margin-right : 1rem;
    }
    .section-3 .box .cards ul {
        font-size : 18px;
    }
}

@media only screen and (max-width : 300px) {
    .section-3 p {
        margin-right : 2rem;
    }

    .section-3 .icon {
        margin-bottom : 2rem;
    }

    .section-3 h3 {
        font-size : 16px;
    }
}

@media (max-width : 1700px) {
    .section-3 {
        background-size : auto;
    }
}

/* section-4 */

.section-4 {
    padding          : 5rem 5% 5rem 5%;
    background-color : var(--light-gray);
}

.section-4 h2 {
    font-style    : normal;
    font-weight   : 500;
    font-size     : 54px;
    line-height   : 117%;

    text-align    : center;
    margin-bottom : 2rem;
    color         : var(--secondary-gray);
}

.section-4 h3{
    margin-bottom: 2rem;
    margin-left: -1rem;
}

#section-4-main {
    text-align : center;
    padding    : 2rem 15%;
}

.section-4 li {
    font-style    : normal;
    font-weight   : 300;
    font-size     : 22px;
    line-height   : 150%;

    margin-bottom : 0.5rem;
    color         : var(--secondary-gray);

    list-style: none;
    position: relative;
}
.section-4 li:before {
    content       : '';
    width         : 3px;
    height        : 3px;
    position      : absolute;
    left          : -20px;
    top           : 11px;
    background    : black;
    border-radius : 25px;
}

.cards-container {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-around;
}

.cards-container .cards {
    flex-basis : 50%;
}

.card-img {
    width           : 100%;
    object-fit      : cover;
    object-position : center;
    margin-bottom   : 2rem;
}

.cards-container .cards h3 {
    margin-bottom : 2rem;
    color         : var(--secondary-gray);

    font-style    : normal;
    font-weight   : 400;
    font-size     : 32px;
    line-height   : 39px;
}

.cards-container .cards p {
    font-style  : normal;
    font-weight : 300;
    font-size   : 22px;
    line-height : 27px;
}

@media only screen and (max-width : 768px) {
    .section-4 {
        padding : 5rem 10% 5rem 10%;
    }

    .section-4 h2 {
        text-align : left;
        font-size  : 28px;
    }

    .section-4 h3{
        margin-bottom: 0;
    }

    .section-4 p {
        margin-bottom : 2rem;
        font-size     : 18px;
    }

    .cards-container .cards {
        flex-basis : 100%;
        justify-content: center;
    }

    .cards-container .cards p {
        font-size : 18px;
    }
    .cards-container .cards ul {
        font-size : 18px;
    }

    #section-4-main {
        text-align : left;
        padding    : 0;
    }
}

@media only screen and (max-width : 1150px) {
    .cards-container .cards {
        flex-basis : 100%;
    }
}

/* section-6 */
/** /////////////////////
------- 25 block
 */
 .white-box {
    color               : var(--secondary-gray);
    background-image    : url(/assets/images/25-bg.svg);
    background-size     : cover;
    background-position : top right;
    padding             : 140px 0 140px 0;
}
.white-box img {
    margin-bottom : 2rem;
    width         : 310px;
}
.white-box h3 {
    margin-bottom  : 2rem;
    font-style     : normal;
    font-weight    : 500;
    font-size      : 32px;
    text-transform : uppercase;
}
.white-box h2 {
    font-style  : normal;
    font-weight : 500;
    font-size   : 54px;
}
.white-box p {
    font-style    : normal;
    font-weight   : 300;
    font-size     : 25px;

    /*margin-bottom : 2rem;*/
}

.white-box .button {
    border           : none;
    border-radius    : 40px;
    cursor           : pointer;
    font-size        : 24px;
    padding          : 25px 70px;
    font-weight      : 500;
    background-color : var(--primary-red);
}

@media only screen and (max-width : 768px) {
    .mt-5, .my-5 {
        margin-top: 10px !important;
    }
    .white-box img{
        margin-bottom: 1rem;
    }
    .white-box {
        background-size   : contain;
        background-repeat : no-repeat;
        padding             : 5rem 0 5rem 0;
    }
    a {
        font-size  : 12px;
        text-align : center;
    }

    .section-6 .box {
        padding : 0;
    }

    .section-6 img {
        height : 60px;
        width  : auto;
    }

    button {
        height        : 60px;
        width         : 150px;
        margin-bottom : 2rem;
        margin-top: 2rem;
    }

    .section-6 h2 {
        font-size : 26px;
    }

    .section-6 h3 {
        font-size : 20px;
    }

    .section-6 p {
        font-size : 18px;
    }
}


/**/

.section-6 h3 {
    margin-bottom  : 2rem;
    font-style     : normal;
    font-weight    : 500;
    font-size      : 32px;
    line-height    : 39px;
    text-transform : uppercase;
}

button {
    margin-top: 2rem;

    width            : 433.16px;
    height           : 83px;
    border           : none;

    border-radius    : 40px;
    cursor           : pointer;

    font-weight      : 500;
    background-color : var(--primary-red);
}

@media only screen and (max-width : 768px) {
    a {
        font-size  : 12px;
        text-align : center;
    }
    .section-6 {
        padding : 5rem 5% 2rem 10%;
    }

    .section-6 .box {
        padding : 0;
    }

    .section-6 img {
        height : 60px;
        width  : auto;
    }

    button {
        height        : 60px;
        width         : 300px;
        margin-bottom : 2rem;
    }

    .section-6 h2 {
        font-size   : 26px;
        line-height : 140%;
    }

    .section-6 h3 {
        font-size   : 20px;
        line-height : 140%;
    }

    .section-6 p {
        font-size : 18px;
    }
}

@media only screen and (max-width : 300px) {
    button{
        width: 200px;
    }
    .white-box img{
        width: 200px;
        height: auto;
    }
}


/* footer */

footer {
    background-color : var(--primary-red);
    min-height       : 158px;

    display          : flex;
    justify-content  : center;
    align-items      : center;
}

footer img {
    height : 90px;
}

@media only screen and (max-width : 1300px) {
    h1 {
        font-size : 50px !important;
    }
}
@media only screen and (max-width : 768px) {
    h1 {
        font-size : 28px !important;
    }
    h2 {
        font-size : 25px !important;
    }
    h3 {
        font-size : 20px !important;
    }
    p, li {
        font-size : 16px !important;
    }
    .white-box .button {
        padding   : 20px 35px;
        font-size : 16px;
    }
}