.blog-text h2::after,
.content .about-head::after,
.text-right h2::after {
    content: "";
    height: 4px;
    background-color: #60def7;
    position: absolute
}

.blog-text h2,
.content .about-head,
.supportive {
    position: relative
}

.swiper {
    width: 100%
}

.swiper-slide {
    border-radius: 25px;
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Poppins, sans-serif
}

.swiper-slide img {
    border-radius: 25px;
    border: 1px solid #fff;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.in {
    width: 24%
}

.header__logo img {
    margin-top: 12px
}

.bu {
    margin-left: -37px;
    margin-top: 5px
}

.S {
    margin-left: 12PX
}

button {
    font-size: 12px !important;
    padding: .5em 2em;
    border: transparent;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
    background: #1e90ff;
    color: #fff;
    border-radius: 4px
}

button:hover {
    background: #020024;
    background: linear-gradient(90deg, #1e90ff 0, #00d4ff 100%)
}

button:active {
    transform: translate(0, .2em)
}

.marqueee span {
    color: #fff;
    text-align: center;
    font-weight: 400
}

.marqueee {
    width: 100%;
    background-color: transparent;
    padding: 5px;
    margin: 10px 0
}

:root {
    --Lotus-main: #1e8067;
    --Lotus-sec: #60DEF7
}

.banner-bg {
    background-image: linear-gradient(45deg, #000, transparent), url(/img/2.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-bg .content .con-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.banner-bg .content .con-head img {
    width: 160px;
    padding: 0 8px
}

.banner-bg .content .con-head::after {
    width: 106px;
    height: 6px;
    bottom: 3px;
    background-color: #60def7;
    border-radius: 0 0 28px 28px
}

.banner-bg .content .con-head h1 {
    font-size: 61px;
    font-weight: bolder;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    letter-spacing: 2px
}

span {
    color: #60def7
}

#banner {
    background-color: var(--main-col);
    padding: 20px 0
}

.p-3 {
    padding: 30px
}

.p-10 {
    padding: 10px
}

.b-r {
    border-radius: 21px
}

img {
    height: 100%;
    width: 100%
}

.w-5 {
    width: 50% !important
}

.w-10 {
    width: 10% !important
}

.w-20 {
    width: 20% !important
}

.w-35 {
    width: 35% !important
}

.w-40 {
    width: 70% !important
}

.w-90 {
    max-width: 90% !important
}

.d-f {
    display: flex;
    justify-content: space-around
}

body {
    background: #111;
    color: #fff
}

.w-2-5 {
    width: 25%
}

.w-3-5 {
    width: 35%
}

.w-2 {
    width: 20%
}

.w-7 {
    width: 70%
}

.w-3 {
    width: 30%
}

@media (max-width:700px) {
    h1 {
        font-size: 35px
    }

    .about-text-par p {
        font-size: 12px
    }

    .w-1,
    .w-2,
    .w-2-5,
    .w-3,
    .w-3-5,
    .w-5,
    .w-7,
    .w-8,
    .w-9 {
        width: 100% !important
    }

    .about {
        padding: 21px
    }

    .about-text-par ul li {
        font-size: 10px !important
    }

    .d-b {
        display: block
    }
}

.about-img {
    box-shadow: -8px 7px 0 var(--Lotus-sec);
    padding: 7px 10px 0 0;
    border-radius: 11px
}

.content .about-head h2 {
    font-size: 40px;
    font-weight: 500;
    padding: 11px;
    text-align: left;
    color: #60def7
}

.cont-par p {
    font-size: 17px
}

h1 {
    font-size: 35px
}

.content .about-head::after {
    width: 91px;
    bottom: -2px;
    left: 9%;
    transform: translate(-52%);
    border-radius: 0 0 28px 28px
}

.about {
    padding: 35px
}

.about-text-par {
    text-align: left;
    color: #fff
}

.about-text-list {
    justify-content: space-between
}

.about-text-par ul {
    padding: 0;
    margin: 0
}

.about-text-par ul li {
    padding: 10px 10px 10px 0;
    display: flex;
    align-items: center;
    font-size: 16px
}

.about-text-par ul li i {
    background-color: #60def7;
    padding: 4px 5px;
    font-size: 12px;
    border-radius: 16px;
    margin: 0 5px
}

@media (max-width:450px) {
    .cont-par p {
        text-align: center;
        font-size: 12px
    }

    .content .about-head h2 {
        font-size: 35px;
        font-weight: 600;
        text-align: center
    }

    .content .about-head::after {
        content: "";
        position: absolute;
        width: 130px;
        height: 4px;
        background-color: #60def7;
        bottom: -5px;
        left: 21%;
        transform: translate(-50%);
        border-radius: 0 0 28px 28px
    }

    .about-text-par {
        text-align: left;
        padding: 4px
    }
}

.blog-text a,
.supportive-team .content a {
    font-weight: 700;
    box-shadow: 0 30px 10px -20px rgba(0, 0, 0, .2);
    letter-spacing: 2px
}

.content-blog {
    background: linear-gradient(122deg, #1a1a1a 0, var(--Lotus-main) 48%, var(--Lotus-sec) 48%, #000);
    padding: 17px 19px
}

.blog-img {
    width: 385px;
    height: 268px;
    border-radius: 14px;
    box-shadow: inset -5px 8px 18px 0 #020421;
    padding: 10px
}

.blog-img-text {
    padding: 20px;
    height: 100%
}

.blog-img-left {
    margin: 0 30px
}

.blog-img-right {
    margin: 0 192px;
    width: 400px
}

.blog-text {
    color: #fff;
    padding: 20px;
    width: 570px
}

.blog-text h2 {
    text-shadow: -3px 0 6px #000;
    text-transform: capitalize
}

.blog-text h2::after {
    width: 65px;
    bottom: -5px;
    left: 0
}

.blog-text a {
    font-size: 22px;
    align-items: center;
    padding: 7px 22px;
    border-radius: 7px;
    text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
    background: linear-gradient(15deg, #1a1a1a 0, var(--Lotus-main) 44%, var(--Lotus-sec) 72%, var(--Lotus-sec));
    color: #fff;
    border: none;
    transition: background .7s
}

.blog-text p {
    padding: 10px 0
}

.blog-text a:hover,
.supportive-team .content a:hover {
    background-size: 320%;
    background-position: right center;
    text-shadow: 3px 2px 5px #000
}

.text-right {
    text-align: right;
    padding: 0 40px 0 0
}

.text-right h2::after {
    width: 65px;
    bottom: -3px;
    left: 62.5%
}

.flex-dir-clo {
    flex-direction: column
}

.flex-dir-clo-rev {
    flex-direction: column-reverse
}

.supportive-team {
    background-color: var(--hover-bg-col);
    padding: 55px 0
}

.supportive {
    padding: 50px;
    margin: auto;
    background-image: linear-gradient(0deg, #000000cf, #000000cf), url(img/partners/lotus/bg-footer.png);
    background-size: cover;
    box-shadow: 10px 10px 3px #000
}

.supportive-team .content p {
    padding: 37px 77px
}

.supportive-team .content h2 {
    background-image: linear-gradient(134deg, #150215, #100615, #070e16);
    left: 50%;
    transform: translate(-50%);
    color: #60def7;
    position: absolute;
    top: 18px;
    padding: 12px;
    background-color: #03060c
}

.supportive-team .content {
    border: 1px solid #60def7;
    width: 100%
}

.supportive-team .content a {
    align-items: center;
    padding: 7px 22px;
    border-radius: 7px;
    text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
    background: linear-gradient(15deg, #1a1a1a 0, var(--Lotus-main) 44%, var(--Lotus-sec) 72%, var(--Lotus-sec));
    background-size: 300%;
    color: #fff;
    border: none;
    transition: background .3s
}

@media (max-width:700px) {
    .mt-14 {
        margin-top: 14px
    }

    .content-blog {
        padding: 13px
    }

    .blog-img-text {
        padding: 0
    }

    .blog-img-left,
    .blog-img-right {
        margin: auto
    }

    .blog-img,
    .blog-text {
        width: 100%
    }

    .text-right {
        padding: 13.5px
    }

    .supportive {
        background-position: center
    }

    .supportive-team .content p {
        padding: 15px
    }

    .supportive-team .content h2 {
        background-image: none;
        top: 12px;
        padding: 0 7px;
        background-color: transparent
    }
}