.page-index {
    .jumbotron {
        background: linear-gradient(102.01deg, #093F7B 0.3%, #6A6CF7 106.31%);
        padding-bottom: 0;
        position: relative;
        overflow: hidden;
        z-index: 1;

        &:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 186px;
            background-image: url('../../images/waves/header-wave.svg');
            background-repeat: repeat-x;
            z-index: 1;
            bottom: -1px;
        }

        > .container {
            position: relative;
            z-index: 2;
        }

        /* Decorations */
        .jumbotron-decoration-1,
        .jumbotron-decoration-2 {
            content: '';
            border-radius: 100%;
            background-color: #F4F7F8;
            display: block;
            position: absolute;
            z-index: -1;
        }

        .jumbotron-decoration-1 {
            width: 524px;
            height: 524px;
            left: -10px;
            top: -84px;
            opacity: .04;
        }

        .jumbotron-decoration-2 {
            width: 524px;
            height: 524px;
            left: 648px;
            top: 260px;
            opacity: .05;
        }

        .jumbotron-intro {
            padding: 70px 100px;

            h1 {
                color: #fff;
                font-weight: 700;
              
            }
            p {
                color: #fff;
               
            }
            .btn {
                &:not(:hover):not(:active) {
                    border-color: transparent;
                    background: rgba(255, 216, 170, 0.46);
                }
            }
        }

        .jumbotron-product {
            padding: 90px 0 35px 0;
            margin-right: -40px;
            margin-left: -100px;
          

            img {
                position: relative;
                  border-radius: 30px;
                z-index: 2;
            }
        }

        @media (max-width: 1399px) {
            .jumbotron-intro {
                h1 { font-size: 45px; }
            }
        }

        @media (max-width: 1199px) {
            .jumbotron-intro {
                padding-left: 0;
                h1 { font-size: 45px; }
            }
        }

        @media (max-width: 991px) {
            .jumbotron-intro {
                h1 { font-size: 35px; }
            }
            .jumbotron-product {
                padding-top: 5px;
                border-radius: 30px;
            }
        }
    }
  

    .intro {
        background-image: url('../../images/homepage/about-page.png');
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: 1427px auto;
        padding: 10px 0 60px;

        .img-leaf {
            width: 49px;
            margin: 35px 0;
        }

        h2 {
            font-weight: 700;
            font-size: 40px;
            margin: 0;
            padding-bottom: 40px;
        }

        p.lead {
            max-width: 850px;
            margin: 0 auto;
            display: block;
            font-weight: 400;
            font-size: 20px;
        }
    }

    .feature {
        .feature-content {
            padding: 50px 0 0;
        }

        .feature-pill {
            display: inline-block;
            background: #FFE9B4;
            border-radius: 100px;
            padding: 3px 20px;
            > span {
                opacity: 0.45;
                color: #000;
                font-weight: 400;
                font-size: 16px;
                line-height: 28px;
            }
        }

        .feature-image {
            padding: 0 20px;
        }

        h3 {
            font-weight: 700;
            font-size: 26px;
            margin-bottom: 30px;
        }

        p {
            line-height: 28px;
            margin-bottom: 30px;
        }

        @media (max-width: 1199px) {
            .feature-content {
                padding-top: 0;
                padding-bottom: 50px;
            }
        }

        @media (max-width: 991px) {
            .feature-image {
                display: none;
            }
        }
    }

    .actioncall {
        text-align: center;
        background: linear-gradient(102.01deg, #eff4fd 0.3%, #f6f2ff 106.31%);
        padding: 70px 0;
        position: relative;
        overflow: hidden;
        z-index: 1;

        > .container {
            position: relative;
        }

        h3 {
            font-weight: 700;
            font-size: 60px;
            margin-bottom: 45px;
        }

        p.lead {
            font-weight: 400;
            font-size: 20px;
            margin-bottom: 40px;
            color: #586667;
        }

        /* Decorations */
        .actioncall-decoration-1,
        .actioncall-decoration-2,
        .actioncall-decoration-3 {
            content: '';
            border-radius: 100%;
            background-color: #F4F7F8;
            display: block;
            position: absolute;
            z-index: -1;
        }

        .actioncall-decoration-1 {
            background-color: #fff;
            width: 321px;
            height: 321px;
            left: -140px;
            top: -140px;
            opacity: .5;
        }

        .actioncall-decoration-2 {
            background-color: #fff;
            width: 380px;
            height: 380px;
            right: -165px;
            top: -180px;
            opacity: .5;
        }

        .actioncall-decoration-3 {
            background-color: #fff;
            width: 493px;
            height: 493px;
            left: 235px;
            bottom: -380px;
            opacity: .3;
        }

        @media (max-width: 1199px) {
            h3 { font-size: 50px; }
        }

        @media (max-width: 991px) {
            h3 { font-size: 40px; }
        }
    }

    .latestnews {
        h3 {
            margin: 50px 0;
            text-align: center;
            color: #000;
            font-weight: 700;
            font-size: 40px;
        }
    }
}
.nav-layout{
    background: linear-gradient(102.01deg, #093F7B 0.3%, #6A6CF7 106.31%);
   
}

.colab{
    border-radius: 30px;
    height: 400px;
    transition: all 0.3s ease-in-out;
}
.colab:hover{
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
    border: solid 2px #6A6CF7;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.card:hover{
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
    border: solid 2px #6A6CF7;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}