:root {
    --primary: #003F5B;
    --hover: #c84644;
    --blue: #287889;
    --lblue: #CCF8EC;
    --mplum: #ECDAFF;
}

.how-banner, .sur-banner {
    display: flex;
    display: -webkit-flex;
    height: 100vh;
    justify-content: space-between;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../img/1215.jpg')
}

.how-banner {
    background-position: center
}

.findb, .findb i, .surb, .surb i {
    padding-right: 10%;
    color: #fff
}

.surb {
    color: var(--primary)
}

.sur-banner {
    align-items: flex-start;
    justify-content: start;
    padding: 80px 0 0 6%;
    background-image: url('../img/pregnant-woman.jpg')
}
.surrb{
    justify-content: end
}

.egg-banner {
    background-image: url('../img/donors.jpg')
}

.search-banner {
    background-image: url('../img/surrogacy-volunteer.jpg')
}

.cta {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 70vh;
    background-image: url('../img/cta2.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.cta h3 {
    font-size: 32px;
    font-weight: bold;
    margin-top: -30px;
    color: var(--primary)
}

.btncu, .btns {
    display: inline-block;
    border-radius: 30px;
    padding: 10px 36px;
    background: #25356F;
    color: #fff
}

.btnhbs {
    padding: 10px 60px;
    margin-top: 30px;
    transition: all 0.2s
}

.btnhbs:hover, .btns:hover, .vmore:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2)
}

.conbar {
    background: var(--lblue);
    padding: 40px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    flex-direction: column;
    margin: 50px 0;
    align-items: center
}

.conbar p {
    padding: 0 6%;
    margin-bottom: 30px
}

.ocon {
    padding: 0 6%
}

.obligs {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.oitem {
    width: 32%
}

.oitem h4 {
    color: var(--primary);
    font-size: 24px
}

.oitem img {
    width: 100%;
    height: 255px;
    object-fit: cover;
    object-position: 0 top;
    border-radius: 3px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1)
}

.otitle {
    font-size: 28px;
    color: var(--primary)
}

.about {
    padding: 60px 6% 30px 6%
}

.bgs {
    background: var(--lblue)
}

.sur-con {
    padding: 0 6%;
    min-height: 85vh;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center
}

.abcon, .surr1 {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.abtxt, .abimg {
    width: 44%
}

.abimg {
    margin: auto 0
}

.stxt1 {
    width: 55%
}

.simg1 {
    position: relative;
    width: 41%
}

.simg1::before {
    content: '';
    position: absolute;
    display: block;
    width: 120%;
    height: 120%;
    top: -40px;
    right: -45px;
    z-index: -1;
    border-radius: 34% 90% 29% 58% / 30% 68% 28% 85%;
    background: var(--mplum)
}

.stxt1 h2 {
    color: var(--primary);
}

.stxt1 a {
    display: inline-block;
    margin-top: 24px;
    margin-right: 16px;
    margin-bottom: 8px;
    color: var(--primary);
    border-bottom: 2px solid var(--primary)
}

.stxt1 a:hover {
    color: green
}

.stb1 {
    padding: 2px 12px 2px 12px;
    border-right: 5px solid var(--primary)
}

.simg1 img {
    border-radius: 17px;
    width: 100%
}

.abimg img {
    width: 100%;
    border-radius: 100% 0% 100% 0% / 27% 85% 15% 73%
}

.step-con {
    padding: 30px 6%;
    text-align: center
}

.steps {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
}

.steps div {
    text-align: start;
    width: 49%
}

.steps li {
    margin: 8px 0;
    background: var(--lblue)
}

.snum {
    display: inline-block;
    line-height: 50px;
    width: 50px;
    text-align: center;
    margin-left: 8px;
    background: var(--mplum)
}

.escon, .es-con {
    text-align: center;
    padding: 40px 6%
}

.escon h2 {
    color: var(--primary)
}

.es-con {
    text-align: center
}

.es-con h2 {
    color: var(--primary)
}

.esci {
    background: #eee2fc;
    border-radius: 5px
}

.esci img {
    width: 100px;
    height: 100px
}

.esteps, .escreening, .quals {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.esitem, .esci, .qitem {
    padding: 12px;
    text-align: center;
    width: 32%
}

.esitem:not(.esitem:last-child) {
    border-left: 1px solid #bbb
}

.esitem img, .qitem img {
    width: 80px;
    height: 80px;
}

.hbs-con {
    padding: 30px 6%;
    text-align: center;
    min-height: 60vh;
    background: var(--lblue)
}

.cul li ,.upul li{
    padding: 6px
}
.upul li{
    font-size: 17px;
    margin: 12px
}

.cul li::before ,.upul li::before{
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 20px;
    margin-left: 8px;
    margin-bottom: -4px;
    background: var(--lblue);
}

.cul2 {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2
}

.cul2 li::before, .cul3 li::before ,.upul li::before{
    background: var(--blue)
}

.qual {
    text-align: center;
    padding: 30px 6%;
    min-height: 70vh
}

.doncon {
    padding: 30px 6%
}

.doncont {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap
}

.doncont h2, .qual h2, .hbs-con h2 {
    color: var(--primary)
}

.vmore {
    background: var(--primary);
    color: #fff;
    border-radius: 7px;
    padding: 9px 36px
}

.upgrade-con {
    padding: 97px 12px 60px 12px;
    text-align: center
}

.upgrade {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: auto;
    border-radius: 15px;
    align-items: center
}

.up-txt, .up-img {
    width: 48%
}

.up-txt p {
    text-align: start;
    font-size: 24px;
    padding: 12px 24px
}

.up-img img {
    border-radius: 15px;
    width: 100%
}
.upul{
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

.btnup {
    margin: 12px;
}
.nextcon{
    padding: 12px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center
}
.next1{
    max-width: 1400px;
    margin: auto
}
.next1 h2{
    text-align: center
}
.collegue img{
    width: 130px;
    height: 130px;
    object-fit: contain;
    margin: 2px
}
.ctpay{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    height: 250px;
    background: aliceblue
}
.btnpay{
    border-radius: 5px;
    width: 200px;
    padding: 14px 0;
    text-align: center
}

.art-txt {
    overflow: hidden;
    transition: all 0s ease-out
}

.art-section {
    padding: 40px 6%;
    background-color: rgb(252, 252, 252)
}
.rmore {
    cursor: pointer;
    margin-top: 12px;
    outline: auto
}
.truncated-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 5
  }

@media (max-width:800px) {
    .revcol{
        flex-direction: column-reverse
    }
    .cta {
        background-image: url('../img/cta.svg');
        height: 40vh
    }

    .cta h3 {
        font-size: 22px;
    }

    .abtxt, .abimg, .simg1, .stxt1 {
        width: 100%
    }

    .oitem, .esitem, .esci, .qitem {
        width: 49%
    }

    .steps div, .simg1::before {
        width: 100%
    }
    .sres{flex-direction: column-reverse;margin-top: 18px}
}

@media (max-width:600px) {
    .oitem, .esitem, .esci, .qitem {
        width: 100%
    }

    .how-banner, .sur-banner {
        background-position: bottom
    }

    .search-banner {
        align-items: center
    }

    .surb {
        font-size: 15px
    }
}

@media (max-width:500px) {
    .findb, .findb i {
        color: var(--hover);
    }

    .esitem:not(.esitem:last-child) {
        border-left: none;
        border-bottom: 1px solid #bbb
    }

    .cul2, .cul3 {
        text-align: start;
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1
    }
    .upgrade{
        flex-direction: column
    }
    .up-txt, .up-img{
        width: 98%
    }
    .up-txt p{
        font-size: 20px
    }
}