.erika {
     display: flex;
     flex-wrap: wrap;
     max-width: 1200px;
     margin: 0px 30px 0.5px 40px;
     padding: 20px;
 }

 .erika-left {
     flex: 1;
     min-width: 300px;
     padding: 20px;
 }

 .erika-left button:first-child {
     background: #f0f0ff;
     color: #5e4ac7;
     border: 1px solid #ccc;
     border-radius: 20px;
     padding: 5px 16px;
     font-size: 14px;
     cursor: pointer;
 }

 .erika-left h1 {
     font-family: 'Playfair Display', serif !important;
     font-size: 40px;
     font-weight: bold;
 }

 .erika-left h1 span {
     color: #6101D1;
 }

 .erika-left p {
     font-family: 'Roboto', sans-serif !important;
     line-height: 1.6;
     /* font-weight: 400; */
     font-size: 15px;
     margin-top: 10px;
 }

 .erika-left .cta {
     background: #5e4ac7;
     color: #fff;
     border: none;
     border-radius: 20px;
     padding: 9px 20px;
     font-size: 16px;
     cursor: pointer;
     margin-top: 15px;
 }

 /* Right section  */
 .erika-right {
     flex: 1;
     min-width: 300px;
     position: relative;
     padding: 0px 0px 23px 50px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .circle {
     position: absolute;
     width: 400px;
     height: 400px;
     background: linear-gradient(to bottom, #6101D1, #C7B8FF);
     border-radius: 50%;
     z-index: 0;
 }

 .photo {

     position: relative;
     width: 380px;
     top: 10%;
     right: 5%;
     z-index: 1;
 }

 .badge {
     position: absolute;
     background-color: #D6D3F0;
     font-size: 10px;
     font-weight: 600;
     font-family: 'Roboto', sans-serif;
     color: black;
     padding: 8px 12px;
     border-radius: 8px;
     z-index: 2;
     white-space: nowrap;
     /* line-height: 0.8rem; */
 }

 /* / Badge positions for desktop / */
 .badge1 {
     top: 10px;
     left: 53%;
     transform: translateX(-50%);
 }

 .badge2 {
     top: 80px;
     left: 18%;
 }

 .badge3 {
     top: 190px;
     left: 9%;
 }

 .badge4 {
     bottom: 150px;
     left: 12%;
 }

 .badge5 {
     text-align: center;
     top: 80px;
     right: 8%;
 }

 .badge6 {
     bottom: 245px;
     right: 5%;
 }

 .badge7 {
     bottom: 135px;
     right: 7%;
 }

  /* Large desktops / TV screens */
  @media (min-width: 1440px){
       .erika {
         max-width: 1200px;
         margin: 0px;
         padding: 10px 10px 0px 10px;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }


     .erika-left {
         flex: 1;
         margin: 0 20px 10px;
         padding: 0;
     }

     .erika-right {
         flex: 1;
         text-align: center;
         position: relative;
         margin-top: 139px;
         padding: 0px 20px;
     }

     .circle {
         bottom: 20%;
         position: absolute;
         width: 360px;
         height: 360px;
         background: linear-gradient(to bottom, #6101D1, #C7B8FF);
         border-radius: 50%;
         z-index: 0;
     }

     .photo {

         position: relative;
         width: 360px;
         top: 100%;
         right: 5%;
         z-index: 1;
     }

     .erika-left p {
         font-family: 'Roboto', sans-serif !important;
         line-height: 1.6;
         font-size: 15px;
         margin-top: 10px;

     }

     .badge {
         position: absolute;
         background-color: #D6D3F0;
         font-size: 8px;
         font-weight: 600;
         font-family: 'Roboto', sans-serif;
         color: black;
         padding: 8px 12px;
         border-radius: 8px;
         z-index: 2;
         white-space: nowrap;
     }

     .badge1 {
         top: -8%;
         left: 50%;
         transform: translateX(-50%);
     }

     .badge2 {
         top: 8%;
         left: 18%;
     }

     .badge3 {

         top: 30%;
         left: 8%;
     }

     .badge3 br {
         display: none;
     }

     .badge4 {
         bottom: 38%;
         left: 11%;
     }

     .badge5 {
         line-height: 0.7rem;
         top: 7%;
         right: 14%;
     }

     .badge6 {
         line-height: 0.7rem;
         bottom: 64%;
         right: 10%;
     }

     .badge7 {
         line-height: 0.7rem;
         bottom: 37%;
         right: 14%;
     }
}

 /* Desktops (normal) */
 @media (min-width: 1280px) and (max-width: 1439px) {
      .erika {
         max-width: 1200px;
         margin: 0px;
         padding: 10px 10px 0px 10px;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }


     .erika-left {
         flex: 1;
         margin: 0 20px 10px;
         padding: 0;
     }

     .erika-right {
         flex: 1;
         text-align: center;
         position: relative;
         margin-top: 139px;
         padding: 0px 20px;
     }

     .circle {
         bottom: 20%;
         position: absolute;
         width: 360px;
         height: 360px;
         background: linear-gradient(to bottom, #6101D1, #C7B8FF);
         border-radius: 50%;
         z-index: 0;
     }

     .photo {

         position: relative;
         width: 360px;
         top: 100%;
         right: 5%;
         z-index: 1;
     }

     .erika-left p {
         font-family: 'Roboto', sans-serif !important;
         line-height: 1.6;
         font-size: 15px;
         margin-top: 10px;

     }

     .badge {
         position: absolute;
         background-color: #D6D3F0;
         font-size: 8px;
         font-weight: 600;
         font-family: 'Roboto', sans-serif;
         color: black;
         padding: 8px 12px;
         border-radius: 8px;
         z-index: 2;
         white-space: nowrap;
     }

     .badge1 {
         top: -8%;
         left: 50%;
         transform: translateX(-50%);
     }

     .badge2 {
         top: 8%;
         left: 18%;
     }

     .badge3 {

         top: 30%;
         left: 8%;
     }

     .badge3 br {
         display: none;
     }

     .badge4 {
         bottom: 38%;
         left: 11%;
     }

     .badge5 {
         line-height: 0.7rem;
         top: 7%;
         right: 14%;
     }

     .badge6 {
         line-height: 0.7rem;
         bottom: 64%;
         right: 10%;
     }

     .badge7 {
         line-height: 0.7rem;
         bottom: 37%;
         right: 14%;
     }
 }

 
/* Laptops / iPad Landscape */
@media (min-width: 1024px) and (max-width: 1279px) {
     .erika {
         max-width: 1200px;
         margin: 0px;
         padding: 10px 10px 0px 10px;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }


     .erika-left {
         flex: 1;
         margin: 0 20px 10px;
         padding: 0;
     }

     .erika-right {
         flex: 1;
         text-align: center;
         position: relative;
         margin-top: 139px;
         padding: 0px 20px;
     }

     .circle {
         bottom: 20%;
         position: absolute;
         width: 360px;
         height: 360px;
         background: linear-gradient(to bottom, #6101D1, #C7B8FF);
         border-radius: 50%;
         z-index: 0;
     }

     .photo {

         position: relative;
         width: 360px;
         top: 100%;
         right: 5%;
         z-index: 1;
     }

     .erika-left p {
         font-family: 'Roboto', sans-serif !important;
         line-height: 1.6;
         font-size: 15px;
         margin-top: 10px;

     }

     .badge {
         position: absolute;
         background-color: #D6D3F0;
         font-size: 8px;
         font-weight: 600;
         font-family: 'Roboto', sans-serif;
         color: black;
         padding: 8px 12px;
         border-radius: 8px;
         z-index: 2;
         white-space: nowrap;
     }

     .badge1 {
         top: -8%;
         left: 50%;
         transform: translateX(-50%);
     }

     .badge2 {
         top: 8%;
         left: 18%;
     }

     .badge3 {

         top: 30%;
         left: 8%;
     }

     .badge3 br {
         display: none;
     }

     .badge4 {
         bottom: 38%;
         left: 11%;
     }

     .badge5 {
         line-height: 0.7rem;
         top: 7%;
         right: 14%;
     }

     .badge6 {
         line-height: 0.7rem;
         bottom: 64%;
         right: 10%;
     }

     .badge7 {
         line-height: 0.7rem;
         bottom: 37%;
         right: 14%;
     }
 }

 /* Tablets / iPad Mini / Portrait */
 @media (min-width: 768px) and (max-width: 1024px) {
     .erika {
         max-width: 900px;
         margin: 0px;
         padding: 10px 10px 0px 10px;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }


     .erika-left {
         flex: 1;
         margin: 0 20px 10px;
         padding: 0;
     }

     .erika-right {
         flex: 1;
         text-align: center;
         position: relative;
         margin-top: 139px;
         padding: 0px 20px;
     }

     .circle {
         bottom: 20%;
         position: absolute;
         width: 360px;
         height: 360px;
         background: linear-gradient(to bottom, #6101D1, #C7B8FF);
         border-radius: 50%;
         z-index: 0;
     }

     .photo {

         position: relative;
         width: 360px;
         top: 100%;
         right: 5%;
         z-index: 1;
     }

     .erika-left p {
         font-family: 'Roboto', sans-serif !important;
         line-height: 1.6;
         font-size: 13px;
         margin-top: 10px;

     }

     .badge {
         position: absolute;
         background-color: #D6D3F0;
         font-size: 8px;
         font-weight: 600;
         font-family: 'Roboto', sans-serif;
         color: black;
         padding: 8px 12px;
         border-radius: 8px;
         z-index: 2;
         white-space: nowrap;
     }

     .badge1 {
         top: -8%;
         left: 50%;
         transform: translateX(-50%);
     }

     .badge2 {
         top: 8%;
         left: 30%;
     }

     .badge3 {

         top: 30%;
         left: -13%;
     }

     .badge3 br {
         display: none;
     }

     .badge4 {
         bottom: 38%;
         left: -9%;
     }

     .badge5 {
         line-height: 0.7rem;
         top: 8%;
         right: -3%;
     }

     .badge6 {
         line-height: 0.7rem;
         bottom: 60%;
         right: -3%;
     }

     .badge7 {
         line-height: 0.7rem;
         bottom: 37%;
         right: -2%;
     }
 }

 /* Large Phones / Small tablets */
 @media (min-width: 481px) and (max-width: 767px) {
     .erika {
         max-width: 900px;
         margin: 0px;
         padding: 10px 10px 0px 10px;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }


     .erika-left {
         flex: 1;
         margin: 0 20px 10px;
         padding: 0;
     }

     .erika-right {
         flex: 1;
         text-align: center;
         position: relative;
         margin-top: 139px;
         padding: 0px 20px;
     }

     .circle {
         bottom: 20%;
         position: absolute;
         width: 360px;
         height: 360px;
         background: linear-gradient(to bottom, #6101D1, #C7B8FF);
         border-radius: 50%;
         z-index: 0;
     }

     .photo {

         position: relative;
         width: 360px;
         top: 100%;
         right: 5%;
         z-index: 1;
     }

     .erika-left p {
         font-family: 'Roboto', sans-serif !important;
         line-height: 1.6;
         font-size: 13px;
         margin-top: 10px;

     }

     .badge {
         position: absolute;
         background-color: #D6D3F0;
         font-size: 8px;
         font-weight: 600;
         font-family: 'Roboto', sans-serif;
         color: black;
         padding: 8px 12px;
         border-radius: 8px;
         z-index: 2;
         white-space: nowrap;
     }

     .badge1 {
         top: -8%;
         left: 50%;
         transform: translateX(-50%);
     }

     .badge2 {
         top: 8%;
         left: 4%;
     }

     .badge3 {

         top: 30%;
         left: -13%;
     }

     .badge3 br {
         display: none;
     }

     .badge4 {
         bottom: 38%;
         left: -9%;
     }

     .badge5 {
         line-height: 0.7rem;
         top: 8%;
         right: -3%;
     }

     .badge6 {
         line-height: 0.7rem;
         bottom: 60%;
         right: -3%;
     }

     .badge7 {
         line-height: 0.7rem;
         bottom: 37%;
         right: -2%;
     }

 }

 /* Mobile (small phones) */
 @media(max-width: 481px) {

     .erika {
         max-width: 500px;
         margin: 0px;
         padding: 10px 10px 0px 10px;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }


     .erika-left {
         flex: 1;
         margin: 0 20px 10px;
         padding: 0;
     }

     .erika-right {
         flex: 1;
         text-align: center;
         position: relative;
         margin-top: 100px;
         padding: 0px 20px;
     }

     .circle {
         bottom: 20%;
         position: absolute;
         width: 300px;
         height: 300px;
         background: linear-gradient(to bottom, #6101D1, #C7B8FF);
         border-radius: 50%;
         z-index: 0;
     }

     .photo {

         position: relative;
         width: 300px;
         top: 100%;
         right: 5%;
         z-index: 1;
     }

     .erika-left p {
         font-family: 'Roboto', sans-serif !important;
         font-weight: 600;
         line-height: 1.6;
         font-size: 13px;
         margin-top: 10px;

     }

     .badge {
         position: absolute;
         background-color: #D6D3F0;
         font-size: 8px;
         font-weight: 600;
         font-family: 'Roboto', sans-serif;
         color: black;
         padding: 8px 12px;
         border-radius: 8px;
         z-index: 2;
         white-space: nowrap;
     }

     .badge1 {
         top: -8%;
         left: 50%;
         transform: translateX(-50%);
     }

     .badge2 {
         top: 8%;
         left: 4%;
     }

     .badge3 {
         top: 30%;
         left: 0%;
     }

     .badge4 {
         bottom: 38%;
         left: 0%;
     }

     .badge5 {
         top: 8%;
         right: 0%;
     }

     .badge6 {
         bottom: 60%;
         right: 0%;
     }

     .badge7 {
         bottom: 37%;
         right: 2%;
     }


 }