body {
     background-color: rgb(251 249 244);
     background: rgb(225 225 220) url(../img/repeating_pattern_grey.png) repeat center center fixed;
     background-size: 200px 200px;
}


.hm-main {
     max-width: 1150px;
     margin: 0 auto 40px auto;
}

.hm-im-cont, .hm-im-cont-supp {
     position: relative;
     width: 100%;
     height: 950px;
}

.hm-im-cont-supp {
     height: 700px;
}

.hm-top-img {
     height: 100%;
     width: 100%;
     object-position: center;
     object-fit: cover;
}

.hm-info {
     width: 50%;
     position: relative;
}

.hm-intro-bg {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 40%;
     background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
     display: flex;
     flex-direction: column;
     color: #4d4d4d;
     justify-content: center;
     align-items: center;
     text-align: center;
     border-radius: 8px 8px 0 0;
   }

.hm-socials-cont {
     display: flex;
     justify-content: flex-end;
     padding: 0 32px 24px 0;
     position: absolute;
     bottom: 40%;
     right: 0;
}

.hm-socials-cont a {
     background-color: white;
     color: var(--lr);
     padding: 8px;
     display: flex;
     width: 30px;
     height: 30px;
     margin: 0 8px;
     border-radius: 50%;
     align-items: center;
     justify-content: center;
}

body img.hm-top-logo {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 150px !important;
     height: 150px;
}

.hm-title {
    font-size: 1.6rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    color: var(--lr);
    padding-block: 32px;
    padding-inline: 8px;
}


.hm-intro-text-cont {
     display: flex;
     justify-content: center;
     align-items: flex-start;
}

.hm-intro-text-left, .hm-intro-text-right {
     width: 50%;
     text-align: justify;
     padding: 0 10px 0 10px;
}

.hm-intro-text-left {
     padding-left: 100px;
     padding-right: 20px;
}

.hm-intro-text-right {
     padding-right: 100px;
     padding-left: 20px;
}

.hm-signup {
     display: flex;
    justify-content: center;
    padding-block: 32px;
}

.hm-card-row-double {
     display: flex;
     justify-content: space-between;
}

.hm-card {
     background-color: white;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 32px;
     width: 50%;
}

.hm-card-left {
     padding-right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
}

.hm-card-right {
     padding-left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
}

.hm-card .hm-title {
     padding: 12px 0 0 0;
}

.hm-card-badge {
     display: flex;
    justify-content: center;
    align-items: center;
}

.hm-card-badge-img {
     position: relative;
     height: 110px;
     width: 110px;
}

.hm-badge-i {
     position: absolute;
     color: white;
     font-size: 2.2rem;
}

.hm-card-text {
     padding: 14px 32px;
}

.hm-main .hm-img1 { 
     height: 210px;
     position: absolute;
     left: 30px;
     top: 74px;
}

.hm-info-img { 
     width: 575px;
}

.hm-img-sc1 {
     position: absolute;
     bottom: 88px;
     right: 33px;
     width: 260px;
     box-shadow: 0 20px 50px 0px #4f0909;
}

.hm-img-gradient1 {
     height: 100%;
     width: 100%;
     position: absolute;
     background-image: linear-gradient(to top left, rgba(193,52,87,0.82), rgba(211,88,122,0.15));
 }

.hm-main .hm-img2 { 
     height: 200px;
     position: absolute;
     right: 10px;
     top: 74px;
}

.hm-img-sc2 {
     position: absolute;
     bottom: 68px;
     left: 35px;
     width: 220px;
     box-shadow: 0 20px 50px 0px #4f0909;
}

.hm-img-gradient2 {
     height: 100%;
     width: 100%;
     position: absolute;
     background-image: linear-gradient(to top right, rgba(193,52,87,0.82), rgba(211,88,122,0.15));
 }

.supp-info-text {
     padding: 16px 12px 0 32px;
}

.hm-supp-main.hm-info-img {
     max-width: 575px;
}

.hm-supp-main img:not(.hm-card-badge-img):not(.hm-top-logo){
     height: 100%;
}

.hm-supp-main .hm-card {
     padding: 24px 32px;
}