@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Manrope:wght@200..800&display=swap');

.top-horo {
    background-image: url(../../img/v2/four-planets-combination.webp);
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    width: 100%;
    padding: 40px 0px; min-height: 750px;
    margin-bottom: 30px;
}

.top-horo h1 {font-size: 2.5rem; color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-size: 600; line-height: 1.2; padding: 0px 0px 10px;}
.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
    display: flex;
}

.user-name strong {

    font-size: 1.5rem; font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; position: relative; color: #fff;
}

/* line before */
.user-name strong:before{
    content:"";
    position:absolute;
    left:-120px;
    top:50%;
    transform:translateY(-50%);
    width:100px;
    height:1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.50));
}

/* line after */
.user-name strong:after{
    content:"";
    position:absolute;
    right:-120px;
    top:50%;
    transform:translateY(-50%);
    width:100px;
    height:1px;
    background: linear-gradient(to left, transparent, rgba(255,255,255,0.50));
}


/* card */
.planet-card{
    background:#f5f6f8;
    padding:35px 40px; overflow: hidden;
    border-radius:6px;
    position:relative; width: 80%; margin: 0px 10%;
    margin-top:-625px;
    box-shadow:0 5px 25px rgba(0,0,0,.15); float: left; margin-bottom: 30px;
}

.planet-card p, .planet-card h3{font-family: "Manrope", sans-serif;}


.planet-card h3{
    font-weight:600;
    margin-bottom:15px; font-family: "Manrope", sans-serif; color: #224373; font-size: 20px;
}
.planet-card h4{font-size: 20px;  color: #224373; font-family: "Manrope", sans-serif;  font-weight:600; padding: 20px 0 5px;}
.planet-card .date{
    color:#3a5a8f;
    font-weight:600;
    display:block;
    margin-bottom:20px;
}

.planet-card p{
    color:#3f3c59; font-size: 1.125rem; font-weight: 300;
    line-height:1.3; 
}

/* dropcap */
.dropcap:first-letter{
    font-size:42px;
    float:left;
    line-height:1;
    padding-right:8px;
    font-weight:400;
    color:#333;
}

/* decorative images */
.decor{
    position:absolute; right: 0;
    width:60px;

}

.decor-top{
    top:-15px;
    right:-15px;
}

.decor-bottom{
    bottom:-15px;
    left:-15px;
}

.col {
    border: 0px solid rgba(0, 0, 0, 0);
    float: left;
}
.m-menubar{display: none;}
@media screen and (max-width: 1080px){
.planet-card{width: 100%; margin-left: 0; margin-right: 0; padding: 20px;}
}

@media screen and (max-width: 767px){
.top-horo h1{font-size: 2rem;}
.planet-card{margin-top: -580px;}
.user-name strong{font-size: 1.25rem;}
.user-name strong::after, .user-name strong::before{display: none;}
.planet-card p{font-size: 1rem;}
.top-horo{padding: 20px 0;}
.planet-card h3{font-size: 22px;}
.planet-card h4{font-size: 18px;}
}

@media screen and (max-width: 480px){
    .modal-body{padding: 5px;}
}