@font-face {
    font-family: 'rawlinelight';
    src: url('../fonts/rawline-300.woff2') format('woff2'),
        url('../fonts/rawline-300.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rawlineregular';
    src: url('../fonts/rawline-400.woff2') format('woff2'),
        url('../fonts/rawline-400.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rawlineblack';
    src: url('../fonts/rawline-900.woff2') format('woff2'),
        url('../fonts/rawline-900.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    font-family: 'rawlineregular';
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'rawlineblack';
}

h2 {
    text-transform: uppercase;
    margin-bottom: 30px;
    font-size: 40px;
    line-height: normal;
}

h3 {
    margin-bottom: 20px;
    font-size: 35px;
    line-height: normal;
}

p {
    font-size: 18px;
}

p strong {
    font-family: 'rawlineblack';
}

.btn {
    font-family: 'rawlineblack';
    font-size: 25px;
    padding: 22px 15px 24px 15px;
    background: #1D2462;
    color: #fff;
    border-radius: 0;
    border: 2px solid #1D2462;
    line-height: 1;
}

.btn:hover,
.btn:focus {
    background: transparent;
    color: #1D2462;
    border: 2px solid #1D2462;

}

.btn.small {
    padding: 9px 15px 12px 15px;
    background: #D70366;
    border: 2px solid #D70366;
}

.btn.small:hover,
.btn.small:focus {
    background: transparent;
    color: #D70366;
    border: 2px solid #D70366;

}

section#header {
    padding: 0 0 100px 0;
    overflow-x: hidden;
    position: relative;
}

section#header::before {
    display: block;
    content: "";
    position: absolute;
    top: 50px;
    right: 0;
    width: 820px;
    bottom: 0;
    background: url("../img/butterfly-hand.svg") no-repeat;
    background-size: 115vh;
}

section#header .logo {
    padding: 50px;
}

section#header .colored-title>div span {
    color: #fff;
    font-size: 15vh;
    line-height: 1;
    margin-bottom: 18px;
    display: inline-block;
    position: relative;
    padding: 0 40px 16px 0;
}

section#header .colored-title>div span strong {
    font-family: 'rawlineblack';
}

section#header .colored-title>div.one span {
    background: #1D2462;
}

section#header .colored-title>div.two span {
    background: #39A8E5;
}

section#header .colored-title>div.three span {
    background: #D70366;
}

section#header .colored-title>div span::before {
    display: block;
    content: "";
    width: 2001px;
    left: -2000px;
    position: absolute;
    top: 0;
    bottom: 0;
}

section#header .colored-title>div.one span::before {
    background: #1D2462;
}

section#header .colored-title>div.two span::before {
    background: #39A8E5;
}

section#header .colored-title>div.three span::before {
    background: #D70366;
}

section#header .subtitle {
    font-size: 70px;
    line-height: 1.1;
    color: #1D2462;
    font-family: 'rawlineblack';
    margin-top: 10px;
    margin-bottom: 80px;
}

section#header .paragraph {
    font-size: 20px;
    line-height: 1.32;
    color: #1D2462;
    font-family: 'rawlinelight';
    margin-bottom: 80px;
}

section#header .paragraph strong {
    font-family: 'rawlineblack';
}

section#intro {
    text-align: center;
    padding: 150px 0;
    background: #39A8E5;
    color: #fff;
    position: relative;
}

section#intro::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 120px;
    background: #fff;
    display: block;
    top: 0;
    left: 50%;
}

section#intro::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 120px;
    background: #fff;
    display: block;
    bottom: 0;
    left: 50%;
}

section#history {
    text-align: center;
    padding: 120px 0 120px 0;
    background: #fff;
    color: #1D2462;
    position: relative;
    overflow: hidden;
}

/* section#history::after {
    content: "";
    position: absolute;
    height: 194.36px;
    width: 792.88px;
    background: url("../img/bow.svg");
    background-size: 100%;
    display: block;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}*/

section#offer {
    text-align: center;
    padding: 150px 0;
    background: #CBD3DF;
    color: #1D2462;
    position: relative;
}

section#offer::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 120px;
    background: #1D2462;
    display: block;
    top: 0;
    left: 50%;
}

section#offer::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 120px;
    background: #1D2462;
    display: block;
    bottom: 0;
    left: 50%;
}

section#values {
    padding: 80px 0;
    color: #1D2462;
}

section#values h2 {
    text-align: center;
    margin-bottom: 60px;
}

.value-card {
    margin-bottom: 80px;
}

.value-card-header {
    padding: 0px 30px 0px 60px;
    position: relative;
}

.value-card-content {
    padding: 0px 30px 30px 60px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    border-radius: 0 0 0 15px;
    min-height: 175px;
}

.value-card-header h3 {
    padding: 5px 20px;
    background: #000;
    color: #fff;
    display: inline-block;
}

.value-card .value-card-header::before {
    content: "";
    display: block;
    position: absolute;
    height: 80px;
    width: 90px;
    bottom: 20px;
    transform: translateX(-50%);
    left: 0;
}

.value-card.one .value-card-header::before {
    background: url("../img/hands.svg");
}

.value-card.one .value-card-header h3 {
    background: #D70366;
}

.value-card.one .value-card-content {
    border-color: #D70366;
}

.value-card.two .value-card-header::before {
    background: url("../img/light.svg");
}

.value-card.two .value-card-header h3 {
    background: #1D2462;
}

.value-card.two .value-card-content {
    border-color: #1D2462;
}

.value-card.three .value-card-header::before {
    background: url("../img/people.svg");
}

.value-card.three .value-card-header h3 {
    background: #39A8E5;
}

.value-card.three .value-card-content {
    border-color: #39A8E5;
}

.value-card.four .value-card-header::before {
    background: url("../img/leaves.svg");
}

.value-card.four .value-card-header h3 {
    background: #D70366;
}

.value-card.four .value-card-content {
    border-color: #D70366;
}

section#values .row {
    --bs-gutter-x: 160px;
}

footer {
    background: #1D2462;
}

.footer-logo {
    padding: 50px 30px;
    border-bottom: 2px solid #fff;
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 20px 20px;
}

.footer-content a {
    color: #fff;
}







/* MEDIAQUERIES*/

@media only screen and (min-width : 1024px) {
    section#header .colored-title>div span {
        font-size: 14vh;
    }
    section#header::before {
        right: -280px;
    }
    section#header .container {
        padding-left: 110px;
    }
}

@media only screen and (min-width : 1200px) {
    section#intro .container {
        padding-left: 70px;
        padding-right: 70px;
    }

    section#history .container {
        padding-left: 70px;
        padding-right: 70px;
    }

    section#offer .container {
        padding-left: 70px;
        padding-right: 70px;
    }

    section#header .container {
        padding-left: 110px;
    }

    section#header::before {
        right: -220px;
    }
}

@media only screen and (min-width : 1300px) {
    section#header .colored-title>div span {
        font-size: 14vh;
    }
    section#header::before {
        right: -200px;
    }
}

@media only screen and (min-width : 1400px) {
    section#header .colored-title>div span {
        font-size: 17vh;
    }
    section#header::before {
        background-size: 114vh;
        right: -140px;
        top: 60px;
    }
}

@media only screen and (min-width : 1600px) {
    section#header .colored-title>div span {
        font-size: 20vh;
    }
    section#header::before {
        right: 0px;
    }
}

@media only screen and (min-width : 1900px) {
    section#header .colored-title>div span {
        font-size: 19vh;
    }
    section#header::before {
        right: 0px;
    }
}

@media only screen and (min-width : 2500px) {
    section#header .colored-title>div span {
        font-size: 22vh;
    }
    section#header::before {
        right: 0px;
        width: 1100px;
    }
    
    section#header .container {
        padding-left: 0px;
    }
}

/*Retina displays*/

@media all and (-webkit-min-device-pixel-ratio:2) {

    #sampleImage {
        /*background-image:url('logo@2x.png');
		-webkit-background-size:1000px 100px;	*/
    }

}

/* Since IE does not support device-pixel-ratio media query  */

/* 1.25 dpr */
@media (-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
    /* Styling Goes here */
}

/* 1.3 dpr */
@media (-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi) {
    /* Styling Goes here */
}

/* 1.5 dpr */
@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi) {
    /* Styling Goes here */
}

/*2.0 dpr */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    /* Styling Goes here */
}

/* ----------------------------------------------------------*/

/* iPad */
@media all and (device-width: 768px) and (device-height: 1024px) {}

/* iPad ~ Portrait */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    section#header::before {
        top: 110px;
        right: -50%;
        width: 100%;
        background-size: 100%;
    }

    .value-card {
        padding-left: 20px;
    }

    .row {
        --bs-gutter-x: 0 !important;
    }
}

/* iPad ~ Landscape */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    section#header::before {
        top: 110px;
        right: -50%;
        width: 100%;
        background-size: 100%;
    }

    .value-card {
        padding-left: 20px;
    }

    .row {
        --bs-gutter-x: 0 !important;
    }
}

/* ----------------------------------------------------------*/

/* iPhone/Smartphone ~ Portrait */
@media only screen and (max-width: 767px) {
    h2 {
        margin-bottom: 20px;
        font-size: 30px;
    }

    h3 {
        margin-bottom: 10px;
        font-size: 25px;
    }

    .btn {
        font-size: 20px;
    }

    section#header {
        padding: 0 0 60px 0;
    }

    section#header .logo {
        padding: 12px 40px 60px 12px;
    }

    section#header::before {
        top: 150px;
        right: -50%;
        width: 100%;
        background-size: 100%;
    }

    section#header .colored-title>div span {
        font-size: 60px;
        margin-bottom: 10px;
    }

    section#header .subtitle {
        font-size: 30px;
        margin-bottom: 60px;
    }

    section#header .paragraph {
        font-size: 20px;
        line-height: 1.3;
        margin-bottom: 60px;
    }

    section#intro {
        padding: 90px 0;
    }

    section#intro::before {
        height: 60px;
    }

    section#intro::after {
        height: 60px;
    }

    section#history {
        padding: 60px 0 60px 0;
    }

    /*section#history::after {
        height: 110px;
        width: 90%;
        bottom: -30px;
        background-repeat: no-repeat;
    }*/

    section#offer {
        padding: 90px 0;
    }

    section#offer::before {
        height: 60px;
    }

    section#offer::after {
        height: 60px;
    }

    section#values {
        padding: 60px 0;
    }

    .value-card {
        padding-left: 40px;
    }

    .row {
        --bs-gutter-x: 0 !important;
    }
}

/* iPhone/Smartphone ~ Landscape */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    section#header::before {
        top: 110px;
        right: -60%;
        width: 100%;
        background-size: 100%;
    }

    .value-card {
        padding-left: 20px;
    }

    .row {
        --bs-gutter-x: 0 !important;
    }
}


/* ----------------------------------------------------------*/


/* Other Smartphones / Small Screen ~ Portrait and Landscape */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    #sampleDiv {
        /* Your styling goes here */
    }
}

/* Other Smartphones / Small Screen ~  Landscape */
@media only screen and (min-width : 321px) {
    #sampleDiv {
        /* Your styling goes here */
    }
}

/* Other Smartphones / Small Screen ~  Portrait */
@media only screen and (max-width : 320px) {
    #sampleDiv {
        /* Your styling goes here */
    }
}