@font-face {
    font-family: Optima, Arial, sans-serif;
    src: url("/assets/fonts/Optima_Normal.TTF")format("opentype");
    font-weight: 400;
  }

  @font-face {
    font-family: Optima, Arial, sans-serif;
    src: url("/assets/fonts/Optima_Medium.ttf")format("opentype");
    font-weight: 500;
  }


  @font-face {
    font-family: Optima, Arial, sans-serif;
    src: url("/assets/fonts/Optima_Bold.TTF")format("opentype");
    font-weight: 700;

  }

  @font-face {
    font-family: Optima, Arial, sans-serif;
    src: url("/assets/fonts/Optima_Italic.ttf")format("opentype");
    font-weight: 400;
    font-style: italic;

  }



  body{

    font-family: Optima, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.5;
    min-height: 100vh ;
    text-align: center;
    background-image: linear-gradient(to bottom right,#C61422 0%, #BE1420 19%, #A9161E 49%, #93191B 70%);


}

.container{
    margin-right: auto;
    margin-left: auto;
    width:100%;
    max-width: 760px;
}

.hero-banner{
    background-image: linear-gradient(to right, #b49347, #d2b86a, #e9d18f, #d2b86a, #b49347);
    background-position: center 0px;
    background-repeat: no-repeat;
    margin-left: 6px;
    margin-right: 6px;
    position: relative;
    padding: 20px 1rem;
    min-height: 258px;
}

.pralines {
    background-image: url(/assets/img/Pralines_Mob_Right.webp), url(/assets/img/Pralines_Mob_Left.webp);
    background-size: 186px 332px, 143px 364px;
    background-position: 135% 17%, -17% 18%;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    min-height: 100vh;
    overflow: visible;
    z-index: 3;
    pointer-events: none;
    left:0
}

.pralines-org{
    background-image: url(/assets/img/Pralines_Mob_Right.webp), url(/assets/img/Pralines_Mob_Left.webp);
    background-size: 186px 332px, 143px 364px;
    background-position: 144% 17%, -17% 18%;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    min-height: 100vh;
    overflow: visible;
    z-index: 3;
    pointer-events: none;
    left:0

}



h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}

/* .h1-XL */

.h1{
    font-family: Optima, Arial, sans-serif;
    font-size: 62px;
    font-weight: 700;
    color: #aa2533;
    line-height: 38px;
    letter-spacing: -2px;
    
    }
    

/* .h2 */
.h2{
    font-size: 42px;
    font-weight: 700;
    color: #aa2533;
    line-height: 32px;
    letter-spacing: -1px;
    
    }

/* .h3 RED */
    .h3-red{
        font-size: 34px;
        font-weight: 700;
        color: #aa2533;
        line-height: 34px;
        letter-spacing: -1px;
        }
   



/* .h3 WHITE */
.h3-white{
    font-size: 34px;
    font-weight: 700;
    color: #ffffff;
    line-height: 28px;
    letter-spacing: -1px;
    }

/* .h3 small*/
.h3-small{
    font-size: 27px;
    font-weight: 700;
    color: #ffffff;
    line-height: 19px;
    letter-spacing: -1px;
    
    }    
    
 /* .h4 WHITE SMALL TITLE*/   
.h4-small{
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    
    }   
    
  .red-title{
    font-size: 42px;
    font-weight: 700;
    color: #aa2533;
    line-height: 38px;
    letter-spacing: -1px;
    
  }  

  .red-title-sml{
    font-size: 27px;
    font-weight: 700;
    color: #aa2533;
    line-height: 27px;
    letter-spacing: -1px;
    
  } 

.p-white{
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
}


.p-red{

    font-size: 13px;
    font-weight: 700;
    color: #aa2533;
    line-height: 19px;
}

.title-early{
    letter-spacing: 2px;
    line-height: normal;  
}

.heading-small{
    max-width: 233px;
    margin-left: auto;
    margin-right: auto;
}
.heading-win{
    max-width: 254px;
    margin-left: auto;
    margin-right: auto;
}

.paragraph-win{
max-width: 193px;
margin-left: auto;
margin-right: auto;

}

.heading-terms {
    max-width: 267px;
    margin-left: auto;
    margin-right: auto;
}

.p-terms{
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    max-width: 721px;
    margin-left: auto;
    margin-right: auto;

}

.p-body{
    font-size: 12px;
    color: #ffffff;
    font-weight: 700;
    
}

.text-checkbx{
letter-spacing: 1px;
}

.form-floating>.form-control-plaintext:focus, 
.form-floating>.form-control-plaintext:not(:placeholder-shown), 
.form-floating>.form-control:focus, 
.form-floating>.form-control:not(:placeholder-shown) {

    font-family: Optima, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;

}

.form-check-label {
    float: left;
    padding-left: 1em;
    font-weight: 700;
    text-align: left;
    line-height: 18px;
    padding-top: 0.25em;
}


.menu{
    text-align: left;
    font-size: 22px;
    padding: 20px; 
    line-height: 50px;
    
    }

  .notes{
    font-size: 12px;
    padding-left: 1em;
    font-weight: 700;
    letter-spacing: 1px;
    
}

.terms-notes{
    font-size: 9px;
    font-weight: 300;
}

.form-notes{
    font-size: 9px;
}

    .btn-outline-warning,
    .btn-outline-warning:link,
    .btn-outline-warning:hover,
    .btn-outline-warning:active,
    .btn-outline-warning:visited,
    .btn-outline-warning:focus
    
    {
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #ffffff;
        border-radius: 35px;
        border:  2px solid #b49347;
        width: 250px;
        height: 51px;
        padding-top: 3px;
        padding-right: 1rem;
        padding-left: 1rem;
    } 

    .btn-outline-warning {

        --bs-btn-hover-color: #ffffff;
        --bs-btn-hover-bg: transparent;
        border:  2px solid #b49347;

    }
    

.footer-custom{
    background-color: #8f1d23;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;

}

    .nav-bar{
        font-size: 13px;
        text-align: center;
    }

    .terms-text{
       font-size: 11px;
        font-weight: 400;
        line-height: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }


  main{
    position: relative;
    z-index: 2;
}

.container-fluid{
    max-width: 1440px;

}


.nav-link, .nav-link:link, .nav-link:hover, .nav-link:visited, .nav-link:active{

    text-decoration: none!important;
    color: #ffffff !important;
}


  .logo-lindor{

    max-height: 154px;
    text-align: center;
    margin-top: -11px;
    max-width: 90%;
    height: auto;
  }


  .form-check-input
{
    width: 18px;
    height: 18px;
    border-radius: 1.25em !important;
    border: solid 2px #b49347;
    background-color: transparent;
    
}

.form-control{
    border-radius: 35px;
    border: solid 2px #b49347;
    height: 49px;
    color: rgba(255,255,255, 0.4);
    background-color: transparent;
    text-align: center;
  

}
.form-control:focus{
    background-color: transparent;
   
}

/* αυτο που γράφω στο label */
    .form-floating>.form-control-plaintext:focus, .form-floating>.form-control-plaintext:not(:placeholder-shown), .form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
        padding-top: 0.625rem;
        
    }
  
  .form-check-input:checked {
    appearance: auto;
  }

  
.form-floating>.form-control {

    min-height: calc(44px + calc(var(--bs-border-width)* 2))
}


.form-floating>.form-control, .form-floating>.form-select {
    height: 46px;
    line-height: 1.25;
}

a, a:link, a:hover, a:visited, a:active{
    color: #FFF;
    text-decoration: none;
}


 .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label,
.form-floating>.form-control:focus~label{
    transform: scale(.85) translateY(-.85rem) translateX(9%);
    color: #ffffff !important;
    opacity: 0.4 !important;
}

.form-floating label{
    width: 100%;
    padding: 16px 0.75rem 1rem 1rem;
    text-align: center;
    background-color: transparent;
    border: 0;
}

.form-control:focus,
 .form-control:not(:placeholder-shown),
.form-control-plaintext,
.form-select {
  ~ label {
    color: rgba(255, 255, 255, 0.4);
  }
}


@media  (min-width:768px) {

body{
    font-size: 14px;
}
    .logo-lindor{

        max-height: 200px;
   }

.p-red{
    font-size: 15px;
    font-weight: 700;
    color: #aa2533;
    line-height: 19px;
}


.h1{
    font-size: 69px; 
    line-height: 42px;      
}

.h2{
    font-size: 50px;
    line-height: 40px;
}

.h3-red {
    font-size: 39px;
    line-height: 37px;
}

.h3-white{
    font-size: 39px;
    line-height: 39px;

}

.title-entry{
    max-width: 463px;
    margin-left: auto;
    margin-right: auto;
}

.container-entry{
    width: 569px;
    margin-left: auto;
    margin-right: auto;

}

.heading-small {
    max-width: 381px;
    margin-top: 40px;

}

.paragraph-win{
    max-width: 381px;

}

.heading-terms{
    margin-top: 40px;
}

.heading-win{
    max-width: 446px;
    margin-top: 50px;
}

.space{
    min-height: 50px;
}

.terms-text{

    max-width: 721px;
    margin-left: auto;
    margin-right: auto;
}

.form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label, 
.form-floating>.form-control:focus~label {
    transform: scale(0.85) translateX(29px) translateY(-9px);
    scale:(0.85) translateX(46px) translateY(-9px);
}


.h3-small {
    font-size: 33px;
    line-height: 25px;
}

.h4-small {
    font-size: 23px;
    line-height: 27px;

}


.notes{

    font-size: 13px;
}

.btn-outline-warning,
.btn-outline-warning:link,
.btn-outline-warning:hover,
.btn-outline-warning:active,
.btn-outline-warning:visited,
.btn-outline-warning:focus

{
    text-align: center;
    font-size: 16px;
}

.form-floating>.form-control-plaintext:focus, .form-floating>.form-control-plaintext:not(:placeholder-shown), .form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
 
    font-size: 14px;

}

  
  form label
  form input{
      text-align: center;
  }



.form-floating>.form-control {

    min-height: calc(49px + calc(var(--bs-border-width)* 2))
}

.form-floating>.form-control, .form-floating>.form-select {
    
    line-height: 1.25;
}

.form-control {
    border-radius: 78px;

}


.form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label,
    .form-floating>.form-control:focus~label{
        transform:scale(.85) translateY(-.5rem) translateX(.15rem);
    }


    select.form-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('/assets/img/select_icon.svg');
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
        padding-right: 2.25rem;
      }



    .form-check,
    .form-check-input{
        float: center;
        padding-left: 1em;
        margin-left: 0.75em;
    }

    .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label, 
    .form-floating>.form-control:focus~label {
        transform: scale(0.85) translateX(-100px) translateY(-9px);
        color: #ffffff;
        opacity: 0.4;
    }

.top-container{
    position: relative;
}

.modal-header{

    padding-top:21px;
    color: #ffffff;
}

.modal-footer{
    letter-spacing: 0.3px;

}

.modal-footer{

    padding-top: 21px;

}

.modal-body{

    font-size: 13px;
}

.modal-content {

    background-image: linear-gradient(to bottom right,#C61422 0%, #BE1420 19%, #A9161E 49%, #93191B 70%);

}

.btn-close {
    --bs-btn-close-color: #ffffff;
}

.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-control~label::after,
.form-floating>.form-control:focus~label::after {
    background: transparent;

}
}

@media  (min-width:420px) {

    .pralines {
    
        background-position: 120% 17%, -5% 18%;
    }

    .pralines-org{
    background-position: 129% 17%, -5% 18%;
}
}



 @media  (min-width:520px) {

    .pralines {
        background-position: 103% 17%, 3% 18%;
        }

        .pralines-org{
            background-position: 108% 17%, 6% 18%;
        }
    }



@media  (min-width:768px) {
      .pralines {
        background-image: url(/assets/img/Pralines_Right.webp), url(/assets/img/Pralines_Left.webp);
        background-size: 205px 435px, 222px 457px;
        background-position: 96% 10%, 6% 12%;
       
       }

.pralines-org{

    background-image: url(/assets/img/Pralines_Right.webp), url(/assets/img/orange_praline.webp), url(/assets/img/Pralines_Left_v2.webp);
    background-size: 205px 435px, 123px 120px, 202px 457px;
    background-position: 96% 10%, 63% 47%, 6% 12%;
}

    }

@media  (min-width:880px) {


    .pralines {
        background-size: 240px 510px, 252px 518px;
        background-position: 96% 5%, 6% 10%;

        }
    .pralines-org{

        background-size: 240px 510px, 153px 150px, 225px 518px;
        background-position: 97% 2%, 63% 47%, 6% 10%;
        }
    

    }

    @media  (min-width:990px) {


        .pralines {
            background-position: 89% 8%, 10% 10%;
    
            }

            .pralines-org{

                background-position: 91% 2%, 63% 47%, 14% 10%;
                }
        }

    

    @media  (min-width:1100px) {


        .pralines {

            background-position: 85% 8%, 16% 10%;
            }

            .pralines-org{

                background-position: 91% 2%, 63% 47%, 14% 10%;
                }
        }


        @media  (min-width:1200px) {


            .pralines {
    
                background-position: 81% 8%, 21% 10%;
                }
                .pralines-org{

                    background-position: 82% 2%, 58% 47%, 22% 10%;
                    }

                

            }

        @media  (min-width:1400px) {


            .pralines {
    
                background-position: 78% 8%, 25% 10%;
                
                }
            }
       


@media (min-width:1500px){
    .umb-shadow{
        box-shadow: var(--bs-box-shadow) !important;

    }

}


/* .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label, .form-floating>.form-control:focus~label {
    transform: scale(.85) translateY(-0.3rem) translateX(.12px) !important;
} */

.form-floating>label {
    height: 2.5em;
}

.form-floating>.form-control, .form-floating>.form-select {
    height: 60px;
    padding-left: 19px;
    line-height: 1.25;
}
/* Base styles for form controls */
/* Base styles for form controls */
.form-floating {
    position: relative;
}

.form-floating > .form-control,
.form-floating > .form-select {
    height: 60px;
    padding: 1.625rem 0.75rem 0.625rem;
    line-height: 1.25;
}

/* Label styles - centered initially */
.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column !important;
}

@media (min-width: 768px) {

/* Focused and filled states - move up within input */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(1.35rem);
    /* align-items: flex-start; */
    padding-top: 0.5rem;
}
}

@media (min-width: 768px) {
    .form-floating > .form-control.big-inp:focus ~ label,
    .form-floating > .form-control.big-inp:not(:placeholder-shown) ~ label,
    .form-floating > .form-select.big-inp ~ label {
        transform: scale(0.85) translateY(-0.5rem) translateX(3.15rem); /* Increased translateY value */
    }
    
    
}

/* Ensure transparent background */
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control ~ label::after,
.form-floating > .form-control:focus ~ label::after {
    background: transparent;
    color: #ffffff !important;
    opacity: 0.4;
}

/* Adjustments for select elements */
.form-floating > select.form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

/* Custom styles for your form */
.form-floating input.form-control,
.form-floating select.form-select {
    background-color: transparent;
    /* border: 1px solid #ffffff; */
    border:2px solid #b49347;
    color: #ffffff;
}

.form-floating label {
    color: #ffffff !important;
}

/* Placeholder color */
.form-floating input::placeholder {
    color: transparent;
}

/* Focus styles */
.form-floating input:focus,
.form-floating select:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    border-color: #ffffff;
}


.form-floating > .form-control:focus ~ label span,
.form-floating > .form-control:not(:placeholder-shown) ~ label span,
.form-floating > .form-select ~ label span {
    display: none;
}

select.form-select {
    background-color: #8f1d23;
    color: white; /* Assuming you want white text for contrast */
}

/* Style for the options */
select.form-select option {
    background-color: #8f1d23;
    color: white;
}

/* Hover style for options */
select.form-select option:hover,
select.form-select option:focus,
select.form-select option:active {
    background-color: #651418;
    outline: none;
}

/* Style for the select element */
select.form-select {
    background-color: #8f1d23;
    color: white;
    border: 1px solid #8f1d23;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important; /* Remove the default outline */
}

 
/* Style for the options */
select.form-select option {
    background-color: #8f1d23;
    color: white;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important; /* Remove the default outline */

    
}

/* Aggressive styling for options on hover and selection */
select.form-select option:hover,
select.form-select option:focus,
select.form-select option:active,
select.form-select option:checked {
    background: #651418 !important;
    background-color: #651418 !important;
    color: white !important;
    box-shadow: 0 0 10px 100px #651418 inset !important;
    -webkit-text-fill-color: white !important;
}

/* Attempt to remove blue highlight */
select.form-select::-ms-value {
    background-color: #8f1d23;
    color: white;
}

select.form-select::-moz-focus-inner {
    border: 0;
}

/* Additional attempt to override hover styles */
select.form-select option:hover {
    filter: brightness(90%);
}