/* Banner  */
.subscribe-banner {
   background-color: #262626;
   color: #c0b8c6;
   padding: 12px 20px;
   margin-bottom: 0 !important;
   border: none;
   border-radius: 0;
   /* width: 100%; */
   z-index: 9999;
}

.banner-text {
   font-size: 25px;
}

.flex-container-custom {
   display: flex;
   justify-content: center;
   flex-direction: row;
   align-items: center;
}

[class^="item"] {
   text-decoration: none;
   margin-right: 20px;
   background: transparent;
   box-shadow: none;
   border: none;
   box-sizing: border-box;
   cursor: pointer;
}

[class^="item"]:last-child {
   margin-right: 0;
}

/* close button  */
.item-5 {
   position: relative;
   width: 20px;
   height: 20px;
}

.item-5:before,
.item-5:after {
   content: "";
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   background-color: #fff;
   width: 100%;
   height: 2px;
   transition: height 0.2s ease-out;
   border-radius: 3px;
}

.item-5:before {
   transform: translate(-50%, -50%) rotate(45deg);
   background: #fff;
}

.item-5:after {
   transform: translate(-50%, -50%) rotate(-45deg);
   background: #fff;

}

.item-5:hover:before,
.item-5:focus:before,
.item-5:hover:after,
.item-5:focus:after {
   height: 4px;
}

/* white close button */


.item-6 {
   position: relative;
   width: 20px;
   height: 20px;
}

.item-6:before,
.item-6:after {
   content: "";
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   background-color: #fff;
   width: 100%;
   height: 2px;
   transition: height 0.2s ease-out;
   border-radius: 3px;
}

.item-6:before {
   transform: translate(-50%, -50%) rotate(45deg);
   background: #fff;
}

.item-6:after {
   transform: translate(-50%, -50%) rotate(-45deg);
   background: #fff;

}

.item-6:hover:before,
.item-6:focus:before,
.item-6:hover:after,
.item-6:focus:after {
   height: 4px;
}




/*  */


.padding-modal {
   padding: 0 13% 9% 13%;
}

#mauticform_wrapper_newsletterform .mauticform_wrapper {
   margin: 0;
}

#mauticform_wrapper_newsletterform .mauticform-innerform {}

#mauticform_wrapper_newsletterform .mauticform-post-success {}

#mauticform_wrapper_newsletterform .mauticform-name {
   font-weight: bold;
   font-size: 1.5em;
   margin-bottom: 3px;
}

#mauticform_wrapper_newsletterform .mauticform-description {
   margin-top: 2px;
   margin-bottom: 10px;
}

#mauticform_wrapper_newsletterform .mauticform-error {
   margin-bottom: 10px;
   color: red;
}

#mauticform_wrapper_newsletterform .mauticform-message {
   margin-bottom: 10px;
   color: green;
}

#mauticform_wrapper_newsletterform .mauticform-row {
   display: block;
   margin-bottom: 20px;
}

#mauticform_wrapper_newsletterform .mauticform-label {
   font-size: 1.1em;
   display: block;
   font-weight: bold;
   margin-bottom: 5px;
}

#mauticform_wrapper_newsletterform .mauticform-row.mauticform-required .mauticform-label:after {
   color: #e32;
   content: " *";
   display: inline;
}

#mauticform_wrapper_newsletterform .mauticform-helpmessage {
   display: block;
   font-size: 0.9em;
   margin-bottom: 3px;
}

#mauticform_wrapper_newsletterform .mauticform-errormsg {
   display: block;
   color: #e2709c;
   margin-top: 2px;
   font-size: 0.8rem;
   text-align: left;
}



#mauticform_wrapper_newsletterform .mauticform-selectbox,
#mauticform_wrapper_newsletterform .mauticform-input,
#mauticform_wrapper_newsletterform .mauticform-textarea {
   width: 100%;
padding: 0.8rem;
   border: 2px solid #CCC;
   background: #fff;
   box-shadow: 0px 0px 0px #fff inset;
   border-radius: 7px;
   background-color: #262626;
   box-sizing: border-box;
   font-style: italic;
}



/* input#mauticform_input_newsletterform_f_name {
        color: #c0b8c6;
      }
      input#mauticform_input_newsletterform_f_name::placeholder {
        color: #c0b8c6;
      } */

#mauticform_wrapper_newsletterform input.mauticform-input {
   color: #ec709a!important;
   font-family: proxima-nova, sans-serif;
   font-size: initial;
   line-height: initial;
}



#mauticform_wrapper_newsletterform input.mauticform-input::placeholder {
   color: #c0b8c6;
   font-size: 14px !important;
}


#mauticform_wrapper_newsletterform .mauticform-checkboxgrp-label {
   font-weight: normal;
}

#mauticform_wrapper_newsletterform .mauticform-checkboxgrp-checkbox {}


#mauticform_wrapper_newsletterform .mauticform-radiogrp-label {
   font-weight: normal;
}


#mauticform_wrapper_newsletterform .mauticform-button-wrapper .mauticform-button.btn-default,
#mauticform_wrapper_newsletterform .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default {
   color: #ffffff;
   background-color: transparent;
   border-color: #ec709a;
   text-transform: uppercase;
   font-size: 20px;

}

#mauticform_wrapper_newsletterform .mauticform-button-wrapper .mauticform-button,
#mauticform_wrapper_newsletterform .mauticform-pagebreak-wrapper .mauticform-pagebreak {
   display: inline-block;
   margin-bottom: 0;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   background-image: none;
   border: 3px solid transparent;
   white-space: nowrap;
   padding: 6px 25px;
   line-height: 1.3856;
   border-radius: 3px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

#mauticform_wrapper_newsletterform .mauticform-button-wrapper .mauticform-button.btn-default[disabled],
#mauticform_wrapper_newsletterform .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default[disabled] {
   background-color: #ffffff;
   border-color: #dddddd;
   opacity: 0.75;
   cursor: not-allowed;
}

#mauticform_wrapper_newsletterform .mauticform-pagebreak-wrapper .mauticform-button-wrapper {
   display: inline;
}

.border-top.border-dotted {
   border-top-style: dotted !important;
}



/* Custom CSS modal Styles  */


.newsletter-modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 10000000;
}

.modal-custom-heading {
   font-size: 3.5rem;
}

.newsletter-modal.active {
   display: flex;
   justify-content: center;
   align-items: center;
}

.newsletter-modal-content {
   background: #262626;
   width: 90%;
   max-width: 600px;
   padding: 1rem 4rem;
   border-radius: 12px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
   position: relative;
}

.newsletter-close-btn {
   position: absolute;
   right: 20px;
   top: 6px;
   background: none;
   border: none;
   font-size: 35px;
   cursor: pointer;
   color: #cf6e94;
   width: 40px;
   cursor: pointer;
}

.newsletter-header {
   margin-bottom: 20px;
   padding-bottom: 15px;
   font-size: 24px;
   color: #333;
}

.newsletter-body {
   margin-bottom: 20px;
}

.newsletter-form {
   display: flex;
   flex-direction: column;
   gap: 15px;
}

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

   .banner-text {
      font-size: 2.5vw;
   }



   .item-6 {
      position: relative;
      width: 15px;
      height: 15px;
   }

   .modal-custom-heading{
      font-size: 2.5rem;
      font-weight: 900;
  }
  
  .newsletter-modal-content {
      padding: 1rem 2rem;
   }
   
   .newsletter-close-btn {
      right: 0px;
   }
   
   .newsletter-body .banner-text{
      font-size: 1rem;
   }
}

@media (min-width:576px) and (max-width:768px)  and (max-height:480px) and (orientation:landscape){
   .banner-text {
      font-size: 16px;
   }
   .subscribe-banner {
      padding: 8px 20px;
   }
   #mauticform_newsletterform_email{
      margin-bottom: 20px!important; 
   }
}


@media (min-width:768px) and (max-width:900px)  and (max-height:480px) and (orientation:landscape){
    .banner-text {
        font-size: 16px;
    }
    .subscribe-banner {
        padding: 8px 20px;
    }
}

@media (min-width:900px) and (max-width:1024px)  and (max-height:480px) and (orientation:landscape){
    .banner-text {
        font-size: 16px;
    }
    .subscribe-banner {
        padding: 8px 20px!important;
    }
}

@media (min-width:900px) and (max-width:1024px)  and (max-height:480px) and (orientation:landscape){
    .banner-text {
        font-size: 16px;
    }
    .subscribe-banner {
        padding: 8px 20px!important;
    }
}

@media (min-width:768px) and (max-width:1024px)  and (orientation:portrait){
    .banner-text {
        font-size: 20px;
    }
}
.pink-header-bar {
   background: linear-gradient(135deg, #ec709a, #ff6b9d);
   height: 20px;
   border-radius: 0 0 20px 20px;
   position: absolute;
   width: 80%;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
}