.banner_sec {
    padding: 100px 0px 140px 0px;
    background-color: var(--bg_secondary);
}

.banner_sec .fade_effect {
    background: linear-gradient(to bottom, var(--bg_secondary_transparent) 0%, var(--bg_secondary_transparent) 75%, var(--bg_secondary) 90%, var(--bg_secondary) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.mb_1 {
    margin-bottom: 1em;
}
.c_tripSec {
    background-image: url("../img/about/c_trip_bg.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% contain;
}

.om_card {
    border-radius: 15px;
    background: -o-linear-gradient(left, transparent, var(--bg_white));
    background: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--bg_white)));
    background: linear-gradient(to right, transparent, var(--bg_white));
    margin-bottom: 60px;
}

.om_card:nth-child(2n) {
    background: -o-linear-gradient(right, transparent, var(--bg_white));
    background: -webkit-gradient(linear, right top, left top, from(transparent), to(var(--bg_white)));
    background: linear-gradient(to left, transparent, var(--bg_white));
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.om_cardImg {
    max-height: 160px;
}


/*  */

.flip-card {
    background-color: transparent;
    -webkit-perspective: 1000px;
            perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: -webkit-transform 0.6s;
    transition: -webkit-transform 0.6s;
    -o-transition: transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    border-radius: 10px;
    overflow: hidden;
}

.flip-card-image {
    width: 100%;
    aspect-ratio: 9/8;
    object-fit: cover;
}

.flip-card-back {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-box-shadow: 0px 0px 30px #6B9AEB;
            box-shadow: 0px 0px 30px #6B9AEB;
}

.flip-card-front {
    background-color: #FDFDFF;
    -webkit-box-shadow: 0px 3px 6px #00000014;
            box-shadow: 0px 3px 6px #00000014;
}

.flip-card-front_content {
    padding: 26px 20px;
}

.flip-card-back {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--bg_secondary);
}

.flip-card-back_content {
    height: 100%;
    background: -o-linear-gradient(top, #6b9aebbf, #5A5CA8);
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9aebbf), to(#5A5CA8));
    background: linear-gradient(to bottom, #6b9aebbf, #5A5CA8);
    padding: 26px 20px;
    color: var(--c_white);
}

.jot_card {
    background-color: rgba(255, 255, 255, 0.08);
    padding-left: 110px;
    padding-right: 110px;
}

.jot_sec {
    padding-top: 250px;
    background: -o-linear-gradient(top, #7980DB, #4A4E9B, #2E2B62);
    background: -webkit-gradient(linear, left top, left bottom, from(#7980DB), color-stop(#4A4E9B), to(#2E2B62));
    background: linear-gradient(to bottom, #7980DB, #4A4E9B, #2E2B62)
}

.jot_shapeDivider {
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.jot_shapeDivider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

.jot_shapeDivider .shape-fill {
    fill: #FFFFFF;
}
.btn_hover_success:hover {
    -webkit-animation: blink_green 3s linear infinite;
            animation: blink_green 3s linear infinite;
}

/*  */
.banner_shapeDivider {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.banner_shapeDivider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

.banner_shapeDivider .shape-fill {
    fill: #FFFFFF;
}

@-webkit-keyframes blink_green {
    0% {
        -webkit-box-shadow: 0 0 20px #00e900;
        box-shadow: 0 0 20px #00e900;
    }
    50% {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    100% {
        -webkit-box-shadow: 0 0 20px #00e900;
        box-shadow: 0 0 20px #00e900;
    }
}

@keyframes blink_green {
    0% {
        -webkit-box-shadow: 0 0 20px #00e900;
        box-shadow: 0 0 20px #00e900;
    }
    50% {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    100% {
        -webkit-box-shadow: 0 0 20px #00e900;
        box-shadow: 0 0 20px #00e900;
    }
}


@media(max-width:1899.98px) {
    .banner_sec {
        padding: 60px 0px 120px 0px;
    }
    .c_tripSec {
        background-size: contain;
    }
    .om_card {
        margin-bottom: 50px;
    }
    .om_cardImg {
        max-height: 141px;
    }
    .jot_sec {
        padding-top: 220px;
    }
}

@media(max-width:1199.98px) {
    .flip-card-front_content,
    .flip-card-back_content {
        padding: 20px 16px;
    }
    .jot_sec {
        padding-top: 180px;
    }
}

@media(max-width:767.98px) {
    .jot_card {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media(max-width:575.98px) {
    .banner_sec {
        padding: 30px 0px 120px 0px;
    }
    .c_tripSec {
        background-size: 200%;
    }
    .om_card {
        margin-bottom: 40px;
    }
    .jot_card {
        padding-left: 24px;
        padding-right: 25px;
    }
}
