@import "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";

body {
    font-family: merriweather, "sans-serif"
}

p {
    font-size: 18px !important
}

h1,
h2,
h3,
h4 {
    font-family: lora, serif
}

.header {
    background: #fff;
    width: 100%;
    padding: 10px 0
}

.logo {
    margin: 0 auto;
    display: block;
    max-height: 90px
}

img {
    max-width: 100%
}

.message {
    padding: 60px 0
}

.message h3 {
    margin-bottom: 20px;
    text-align: center
}

.message .image {
    margin-bottom: 20px
}

.message .image img {
    height: 180px
}

.btn-rev {
    padding: 20px 40px;
    border-radius: 50px;
    border: none;
    color: #fff
}

.intro {
    text-align: center;
    padding: 60px 0;
    background: #000
}

.intro .col-md-7 {
    padding-left: 80px;
    padding-right: 80px
}

.intro .image {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center
}

.intro .image img {
    height: 320px
}

.intro .btn {
    text-transform: uppercase
}

.angels-category {
    padding: 60px 0
}

.angels-category h3,
.angels-category h4 {
    margin-bottom: 10px;
    text-align: center
}

.angel-icon {
    width: 150px;
    padding: 0 10px;
    display: inline;
    margin-bottom: 20px
}

.angels {
    padding: 20px 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

.popular-article {
    background: #160c03;
    padding: 60px 0
}

.popular-article h3 {
    text-align: center;
    color: #fff;
    margin-bottom: 20px
}

.popular-article .box h4 {
    margin: 7px 0;
    color: #160c03;
    text-align: left
}

.popular-article .box img {
    height: 250px;
    width: 100%;
    background-size: cover
}

.popular-article .col-md-4 .box {
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    height: 100%
}


.base {
    min-height: 800px
}

.headline {
    font-family: lora, serif;
    font-weight: 600;
    text-align: center;
    color: #160c03;
    padding: 20px 0;
    margin-left: auto;
    margin-right: auto;
    line-height: normal
}

.angel-card {
    padding: 40px 0 20px;
    background-size: 600px;
    text-align: center
}

.card {
    width: 250px;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    border: 0
}

.margin-block {
    margin-block-start: 0;
    margin-block-end: 0
}

.message-h3 i {
    color: #d7d7d7
}

.message-h3 {
    padding: 20px 0;
    position: relative;
    font-family: lora, serif;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: #160c03;
    margin-bottom: 20px
}

.main-article {
    text-align: justify
}

.main-article h3,
.main-article h2,
.main-article h2,
.main-article h4 {
    color: #160c03
}

a.side-title {
    color: #fff;
    font-family: lora, serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    line-height: normal;
    padding: 10px;
    max-width: 100%;
    display: block;
    background-color: #160c03;
    margin-bottom: 30px
}

.article {
    position: relative;
    margin-bottom: 20px
}

.article .container {
    max-width: 980px;
    margin: 0 auto
}

.article .side {
    background: #deeffd;
    border: 1px solid #160c03;
    padding: 20px
}

.article .col-side {
    margin-bottom: 20px
}

.article .side h4 {
    text-align: center;
    color: #160c03
}

.angel-side {
    max-width: 80px;
    margin: 0 5px;
    display: inline;
    margin-bottom: 10px
}

.angel-col-side {
    text-align: center
}

.laptop {
    display: block !important
}

.mob {
    display: none !important
}

@media only screen and (max-width:769px) {
    .intro .col-md-7 {
        padding-left: 0;
        padding-right: 0
    }

    .btn-rev {
        padding: 10px
    }

    .col-side .col-md-4 {
        width: 47%
    }
}

@media only screen and (max-width:559px) {
    .angels {
        padding: 10px 0
    }

    .intro .col-md-7 {
        padding-left: 0;
        padding-right: 0
    }

    .btn-rev {
        padding: 10px
    }

    .heading-2 {
        font-size: 31px
    }

    .laptop {
        display: none !important
    }

    .mob {
        display: block !important
    }

    #card .col-md-2 {
        width: 33.33%
    }

    .col-side .col-md-4 {
        width: 33.33%
    }
}

@media only screen and (max-width:559px) {
    .angel-icon {
        max-width: 100px;
        padding: 0 5px
    }
}

@media only screen and (max-width:420px) {
    .angel-icon {
        max-width: 90px;
        padding: 0 5px
    }
}

@media only screen and (max-width:1359px) {

    .left-ads,
    .right-ads {
        display: none
    }
}

.heading-2 {
    font-family: merriweather, sans-serif;
    color: #fbc260;
    font-size: 45px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px
}

.text-span-2 {
    color: #f40
}

.flip-container {
    margin-bottom: 10px
}

.flip-container img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.flip-box {
    background-color: transparent
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform .8s;
    transform-style: preserve-3d
}

.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg)
}

.flip-box-front,
.flip-box-back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.flip-box-back {
    top: 0;
    left: 0;
    position: absolute;
    transform: rotateY(180deg);
    width: 100%;
    height: 100%
}