:root {
    --purple: #5A4D9F;
    --dark-grey: #2B2B2B;
    --light-grey: #9B9B9B;
}

/*Header Banner*/
#header-banner {
    background-color: #F8F7FF;
    margin-top: 40px;
    padding: 170px 0;
}

#header-banner .header-banner-title h2 {
    margin-bottom: 30px;
    font-size: 64px;
    font-family: 'o-semibold', sans-serif;
    font-weight: 600;
    color: var(--dark-grey);
}

#header-banner .header-banner-title p {
    font-family: 'o-regular', sans-serif;
    font-size: 20px;
    color: var(--light-grey);
    line-height: 25.2px;
}
#header-banner .header-banner-title{margin-bottom: 30px !important;}

#header-banner .header-banner-buttons .header-button {
    width: 250px;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 16px;
    font-family: 'l-bold', sans-serif;
    color: var(--dark-grey);
    border: none;
    border-radius: 100px;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

#header-banner .header-banner-buttons .header-banner-button:not(:last-of-type) .header-button {
    background: linear-gradient(to left, #FFC65A 50%, var(--dark-grey) 50%) right;
    background-size: 200% 100%;
}

#header-banner .header-banner-buttons .header-banner-button:last-of-type .header-button {
    background: linear-gradient(to left, #FFFFFF 50%, var(--dark-grey) 50%) right;
    background-size: 200% 100%;
    border: 1px solid var(--purple);
}

#header-banner .header-banner-buttons .header-banner-button .header-button:hover {
    background-position: left;
    color: #ffffff;
}

#header-banner .change-button-text {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 44px;
}

#header-banner .change-button-text span {
    display: inline-block;
    position: absolute;
    transform: translateX(-50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    white-space: nowrap;
}

#header-banner .change-button-text .initial-text {
    color: var(--dark-grey);
    opacity: 1;
}

#header-banner .change-button-text .hover-text {
    opacity: 0;
    transform: translateX(-50%);
    color: #ffffff;
}
#header-banner .header-button:hover .hover-text{opacity: 100%;}

#header-banner .change-button-text.hover .initial-text {
    opacity: 0;
    transform: translateX(-40%);
}

#header-banner .change-button-text.hover .hover-text {
    opacity: 1;
}

/*Integration Cards*/
#integration-cards {
    margin-top: 150px;
}

#integration-cards .integration-cards-title h2 {
    font-family: 'o-semibold', sans-serif;
    font-size: 48px;
    color: var(--dark-grey);
}

#integration-cards .card {
    border-radius: 8px;
    padding: 1px;
    border: double 1px transparent;
    background-image: linear-gradient(white, white),
    linear-gradient(180deg, #DF99F7 0%, #FFDBB0 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    transition: box-shadow .3s ease;
    
}

#integration-cards .card img {
    display: inline;
}

#integration-cards .card .card-body {
    padding: calc(24px + 0.5vw);
}

#integration-cards .card .card-text {
    font-family: 'l-regular', sans-serif;
    font-size: 16px;
    color: var(--light-grey);
}

#integration-cards .card .card-title {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#integration-cards .card .card-title h5 {
    margin: 20px 0;
    flex: 1 1 100%;
    font-family: 'l-bold', sans-serif;
    font-size: calc(18px + 0.2vw);
    color: #2B2B2B;
}

/*Experience*/
#experience {
    margin-top: 140px;
}

#experience .container-fluid {
    max-width: 1600px;
    padding: 0px 30px;
}

#experience .experience-wrapper {
    padding: 70px 0;
    border-radius: 24px;
    background-color: #CDE2E0;
}

#experience .experience-wrapper h1 {
    margin-bottom: 70px;
    font-family: 'o-semibold', sans-serif;
    font-size: 40px;
    color: var(--dark-grey);
    line-height: 60.48px;
}

/*Performance management*/

.degree-content .goal-text h3 {
    margin-bottom: 30px;
    font-family: 'o-semibold', sans-serif;
    font-size: 35px;
    color: var(--purple);
    line-height: 50.4px;
}

.degree-content .goal-text p {
    font-family: 'l-regular', sans-serif;
    font-size: 21px;
    color: var(--light-grey);
    line-height: 28.8px;
}
/*degree-content*/
.degree-pr1,.degree-pr2,.degree-pr3{margin-top:80px;}
.degree-content img{border-radius: 24px;width:100%;height: auto;}
.degree-content h2,.degree-content h3{color: #5A4D9F;font-size: 24px;line-height: 30.24px;font-family: o-medium;margin-bottom: 20px;}
.degree-content p{color: #9B9B9B;font-size: 16px;line-height: 22.2px;}
.degree-pr1 .dpr1,.degree-pr2 .dpr2,.degree-pr3 .dpr3{align-content: center;display: grid;}
.degree-pr1 .col-md-6,.degree-pr2 .col-md-6,.degree-pr3 .col-md-6{padding-left: 60px;}
.degree-pr2 .col-md-6:first-child{padding-left: 10px;}
/* .degree-content .dpr-content{width: 80%;} */
/* .degree-content .degree-pr2 img{}
.degree-content .degree-pr3 img{} */

/*Ready*/
#ready {
    margin-top: 70px;
    margin-bottom: 78px;
}

#ready .container-fluid {
    max-width: 1600px;
    padding: 0px 30px;
}

#ready .ready-wrapper {
    padding: 147px 0 131px 0;
    background:  no-repeat url("../img/ready-bg.png") center/cover;
    border-radius: 24px;
}

#ready .ready-wrapper h2 {
    margin-bottom: 24px;
    font-family: 'o-semibold', sans-serif;
    font-size: 40px;
    color: var(--dark-grey);
    text-align: center;
}

#ready .ready-wrapper .book-a-demo {
    padding: 12px 32px;
    font-family: 'l-bold', sans-serif;
    font-size: 16px;
    color: var(--dark-grey);
    background-color: #FFFFFF;
    border-radius: 100px;
    text-decoration: none;
}

@media (min-width: 320px) and (max-width: 767px) {
    #header-banner .container, #experience .container, #integration-cards .container, #degree-content .container{width: 100%;max-width: 100%;padding: 0px 30px;}
    /*Header Banner*/
    #header-banner .header-banner-title h2 {
        font-size: 48px;
    }

    #header-banner .header-banner-title p {
        font-size: 20px;
    }

    #header-banner .header-banner-buttons .header-button {
        width: 250px;
        padding: 10px 10px;
        font-size: 16px;
    }

    #header-banner .header-banner-buttons .header-banner-button p {
        font-size: 16px;
    }

    #header-banner .header-banner-row {
        flex-direction: column-reverse;
        align-items: center;
    }
    #header-banner .container, #integration-cards .container, #experience .container-fluid, #performance-management .container, #ready .container-fluid{width: 100%;max-width: 100%;padding: 0px 30px;}
    #header-banner {padding: 90px 0;margin-top: 30px;}
    #integration-cards, #performance-management {margin-top: 80px;}
    #performance-management .performance-management-goal {margin-bottom: 50px;}
    #experience { margin-top: 80px;}

    /*Integration Cards*/
    #integration-cards .integration-cards-title h2 {
        font-size: 34px;
    }

    #integration-cards .integration-cards-title img {
        width: 15%;
    }

    #integration-cards .card .card-text {
        font-family: 'l-regular', sans-serif;
        font-size: 16px;
        color: var(--dark-grey);
    }

    #integration-cards .card .card-title {
        margin: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    #integration-cards .card .card-title h5 {
        font-size: 18px;
    }

    /*Experience*/
    #experience .experience-wrapper h2 {
        font-size: 28px;
    }

    .degree-pr1,.degree-pr2,.degree-pr3{margin-top:60px;}
    .degree-pr2 .col-md-6:first-child{order: 2;}
    .degree-content img{margin-top: 20px;}
    .degree-content .col-sm-6{width: 100%;}
    .degree-pr1 .col-md-6,.degree-pr2 .col-md-6,.degree-pr3 .col-md-6,.degree-pr2 .col-md-6:first-child{padding-left: 10px;}
    .degree-content .dpr-content{width: 100%;}

    /*Ready*/
    #ready .ready-wrapper {
        padding: 100px 0;
    }

    #ready .ready-wrapper h2 {
        margin-bottom: 24px;
        font-size: 28px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /*Header banner*/
    #header-banner {
        padding: 90px 0;
        margin-top: 30px;
      }
    #header-banner .header-banner-title h2 {
        font-size: 42px;
    }

    #header-banner .header-banner-title p {
        font-size: 17px;
    }

    #header-banner .header-banner-buttons .header-button {
        width: 200px;
        padding: 10px 6px;
        font-size: 13px;
    }

    #header-banner .header-banner-buttons .header-banner-button p {
        font-size: 13px;
    }

    #header-banner .change-button-text {
        height: 39px;
    }

    /*Experience*/
    #experience .experience-wrapper h2 {
        font-size: 34px;
    }

    /*Performance Management*/
    .degree-pr1,.degree-pr2,.degree-pr3{margin-top:60px;}
    .degree-pr1,.degree-pr2,.degree-pr3{margin-top:60px;}
    .degree-pr2 .col-md-6:first-child{order: 2;}
    .degree-content img{margin-top: 20px;}
    .degree-content .col-sm-6{width: 100%;}
    .degree-pr1 .col-md-6,.degree-pr2 .col-md-6,.degree-pr3 .col-md-6,.degree-pr2 .col-md-6:first-child{padding-left: 10px;}
    .degree-content .dpr-content{width: 100%;}
    /*Ready*/
    #ready .ready-wrapper h2 {
        font-size: 34px;
    }
    /* Integration */
    #integration-cards .col{width: 100%;}
    #integration-cards {margin-top: 80px;}
}

@media (min-width: 992px) and (max-width: 1199px) {
    /*Header banner*/
    #header-banner .header-banner-title h2 {
        font-size: 52px;
    }

    #header-banner .header-banner-title p {
        font-size: 18px;
    }

    #header-banner .header-banner-buttons .header-button {
        width: 220px;
        padding: 10px 10px;
        font-size: 14px;
    }

    #header-banner .header-banner-buttons .header-banner-button p {
        font-size: 14px;
    }
}