/**************************\
  Basic Modal Styles
\**************************/

.modal {
    position: relative;
    z-index: 50;
}
  
  .modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal__container {
    background-color: #fff;
    padding: 30px;
    max-width: 500px;
    max-height: 100vh;
    border-radius: 4px;
    overflow-y: auto;
    box-sizing: border-box;
  }
  
  .modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal__title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    color: #00449e;
    box-sizing: border-box;
  }
  
  .modal__close {
    background: transparent;
    border: 0;
  }
  
  .modal__header .modal__close:before { content: "\2715"; }
  
  .modal__content {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 1.5;
    color: rgba(0,0,0,.8);
  }
  
  .modal__btn {
    font-size: .875rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background-color: #e6e6e6;
    color: rgba(0,0,0,.8);
    border-radius: .25rem;
    border-style: none;
    border-width: 0;
    cursor: pointer;
    -webkit-appearance: button;
    text-transform: none;
    overflow: visible;
    line-height: 1.15;
    margin: 0;
    will-change: transform;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
    transition: transform .25s ease-out,-webkit-transform .25s ease-out;
  }
  
  .modal__btn:focus, .modal__btn:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  
  .modal__btn-primary {
    background-color: #00449e;
    color: #fff;
  }
  
  
  
  /**************************\
    Demo Animation Style
  \**************************/
  @keyframes mmfadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  
  @keyframes mmfadeOut {
      from { opacity: 1; }
        to { opacity: 0; }
  }
  
  @keyframes mmslideIn {
    from { transform: translateY(15%); }
      to { transform: translateY(0); }
  }
  
  @keyframes mmslideOut {
      from { transform: translateY(0); }
      to { transform: translateY(-10%); }
  }
  
  .micromodal-slide {
    display: none;
  }
  
  .micromodal-slide.is-open {
    display: block;
  }
  
  .micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
  }
  
  .micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
  }
  
  .micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
  }
  
  .micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
  }
  
  .micromodal-slide .modal__container,
  .micromodal-slide .modal__overlay {
    /*will-change: transform;*/
  }

.modal-big{
    .modal__container{
        border-radius: 32px;
        background: #FFFCF7;
        display: inline-flex;
        padding: 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        max-width: 880px;
        position: relative;
        .modal_head{
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
            gap: 8px;
            align-self: stretch;
            .modal__close{
                
                width: 56px;
                height: 56px;
                padding: 4px;
                justify-content: center;
                align-items: center;
                gap: 8px;
                border-radius: 16px;
                background: #FFFCF7;
                position: relative;
                &::after{
                    display: inline-flex;
                    content:'';
                    width: 48px;
                    height: 48px;
                    flex-shrink: 0;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Crect x='11' y='34.1104' width='32.6838' height='4.08547' rx='2.04274' transform='rotate(-45 11 34.1104)' fill='%23FF9E3D'/%3E%3Crect x='13.8887' y='11' width='32.6838' height='4.08547' rx='2.04274' transform='rotate(45 13.8887 11)' fill='%23FF9E3D'/%3E%3C/svg%3E");
                }
                &:hover{
                    &::after{
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Crect x='11' y='34.1113' width='32.6838' height='4.08547' rx='2.04274' transform='rotate(-45 11 34.1113)' fill='%23FF7F00'/%3E%3Crect x='13.8887' y='11.001' width='32.6838' height='4.08547' rx='2.04274' transform='rotate(45 13.8887 11.001)' fill='%23FF7F00'/%3E%3C/svg%3E");
                    }
                }
            }
        }
        .items-wrap{
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            margin-left: -12px;
            margin-right: -12px;
            .item-wrap{
                width: 50%;
                max-width: 50%;
                display: flex;
                flex-wrap: wrap;
                flex: 0 0 50%;
                padding-left: 12px;
                padding-right: 12px;
                .info{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 24px;
                    .title{
                        color: #3A5551;
                        font-family: Nunito Sans;
                        font-size: 32px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 115%; /* 36.8px */
                        letter-spacing: -0.64px;
                    }
                    .description{
                        color: #3A5551;
                        font-family: Nunito;
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 125%; /* 25px */
                    }
                }
    
                .ajax-form{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 32px;
                    align-self: stretch;
                    .groups{
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 32px;
                        align-self: stretch;
                        .group-input{
                            width: 100%;
                            input{
                                background-color: #FFFCF7;
                                border:none;
                                display: flex;
                                padding: 14px 16px;
                                align-items: center;
                                gap: 8px;
                                align-self: stretch;
                                border-bottom: 1px solid #7d9491;
                                color: #3A5551;
                                font-family: Nunito;
                                font-size: 16px;
                                font-style: normal;
                                font-weight: 500;
                                line-height: 125%; /* 20px */
                                width: 100%;
                                &::placeholder { 
                                    color: #7E9693;
                                    font-family: Nunito;
                                    font-size: 16px;
                                    font-style: normal;
                                    font-weight: 500;
                                    line-height: 125%; /* 20px */
                                }
                                &:focus-visible {
                                    border-bottom: 2px solid #000000;
                                    outline: none;
                                }
                            }
                        }
                    }
                    .buttons{
                        width: 100%;
                        button{
                            border:none;
                            display: flex;
                            padding: 16px 32px;
                            justify-content: center;
                            align-items: center;
                            gap: 8px;
                            align-self: stretch;
                            border-radius: 24px;
                            background: #FF9E3D;

                            color: #FFF;
                            font-family: Nunito Sans;
                            font-size: 32px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 125%; /* 40px */
                            letter-spacing: -0.64px;

                            width: 100%;
                            z-index: 1;
                            position: relative;
                            span {
                                position: relative;
                                z-index: 3;
                            }
                            &:after {
                                position: absolute;
                                content: '';
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 24px;
                                background-image: linear-gradient(108deg, #FF6B2C 0%, #FF9E3D 100%);
                                transition: opacity 0.5s ease-out;
                                z-index: 2;
                                opacity: 0;
                            }
                            &:hover{
                                &:after {
                                    opacity: 1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.modal-small{
    .modal__container{
        border-radius: 32px;
        background: #FFFCF7;
        display: inline-flex;
        padding: 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        max-width: 488px;
        position: relative;
        .modal_head{
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
            gap: 8px;
            align-self: stretch;
            .header-name{
                color: #3A5551;
                font-family: Nunito Sans;
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: 125%; /* 40px */
                letter-spacing: -0.64px; 
            }
            .modal__close{
                
                width: 56px;
                height: 56px;
                padding: 4px;
                justify-content: center;
                align-items: center;
                gap: 8px;
                border-radius: 16px;
                background: #FFFCF7;
                position: relative;
                &::after{
                    display: inline-flex;
                    content:'';
                    width: 48px;
                    height: 48px;
                    flex-shrink: 0;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Crect x='11' y='34.1104' width='32.6838' height='4.08547' rx='2.04274' transform='rotate(-45 11 34.1104)' fill='%23FF9E3D'/%3E%3Crect x='13.8887' y='11' width='32.6838' height='4.08547' rx='2.04274' transform='rotate(45 13.8887 11)' fill='%23FF9E3D'/%3E%3C/svg%3E");
                }
                &:hover{
                    &::after{
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Crect x='11' y='34.1113' width='32.6838' height='4.08547' rx='2.04274' transform='rotate(-45 11 34.1113)' fill='%23FF7F00'/%3E%3Crect x='13.8887' y='11.001' width='32.6838' height='4.08547' rx='2.04274' transform='rotate(45 13.8887 11.001)' fill='%23FF7F00'/%3E%3C/svg%3E");
                    }
                }
            }
        }
        .items-wrap{
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            margin-left: -12px;
            margin-right: -12px;
            .item-wrap{
                width: 100%;
                max-width: 100%;
                display: flex;
                flex-wrap: wrap;
                flex: 0 0 100%;
                padding-left: 12px;
                padding-right: 12px;
                .info{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 24px;
                    .title{
                        color: #3A5551;
                        font-family: Nunito Sans;
                        font-size: 32px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 115%; /* 36.8px */
                        letter-spacing: -0.64px;
                    }
                    .description{
                        color: #3A5551;
                        font-family: Nunito;
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 125%; /* 25px */
                    }
                }
    
                .ajax-form{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 32px;
                    align-self: stretch;
                    .groups{
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 32px;
                        align-self: stretch;
                        margin-top: 32px;
                        .group-input{
                            width: 100%;
                            input{
                                background-color: #FFFCF7;
                                border:none;
                                display: flex;
                                padding: 14px 16px;
                                align-items: center;
                                gap: 8px;
                                align-self: stretch;
                                border-bottom: 1px solid #7d9491;
                                color: #3A5551;
                                font-family: Nunito;
                                font-size: 16px;
                                font-style: normal;
                                font-weight: 500;
                                line-height: 125%; /* 20px */
                                width: 100%;
                                &::placeholder { 
                                    color: #7E9693;
                                    font-family: Nunito;
                                    font-size: 16px;
                                    font-style: normal;
                                    font-weight: 500;
                                    line-height: 125%; /* 20px */
                                }
                                &:focus-visible {
                                    border-bottom: 2px solid #000000;
                                    outline: none;
                                }
                            }
                        }
                    }
                    .buttons{
                        width: 100%;
                        button{
                            border:none;
                            display: flex;
                            padding: 16px 32px;
                            justify-content: center;
                            align-items: center;
                            gap: 8px;
                            align-self: stretch;
                            border-radius: 24px;
                            background: #FF9E3D;

                            color: #FFF;
                            font-family: Nunito Sans;
                            font-size: 32px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 125%; /* 40px */
                            letter-spacing: -0.64px;

                            width: 100%;
                            z-index: 1;
                            position: relative;
                            span {
                                position: relative;
                                z-index: 3;
                            }
                            &:after {
                                position: absolute;
                                content: '';
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 24px;
                                background-image: linear-gradient(108deg, #FF6B2C 0%, #FF9E3D 100%);
                                transition: opacity 0.5s ease-out;
                                z-index: 2;
                                opacity: 0;
                            }
                            &:hover{
                                &:after {
                                    opacity: 1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


.modal-thank{
    .modal__container {
        position: relative;
        border-radius: 32px;
        background: #3A5551;
        display: inline-flex;
        padding: 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        max-width: 816px;
        display: inline-flex;
        padding: 58.5px 372px 58.5px 48px;
        align-items: center;
        overflow: visible;
        .info-wrap{
            display: flex;
            /* width: 408px; */
            flex-direction: column;
            align-items: flex-start;
            gap: 48px;
            .info {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 24px;
                .title {
                    color: #FFF;
                    font-family: Nunito Sans;
                    font-size: 28px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 115%; /* 32.2px */
                    letter-spacing: -0.56px;
                }
                .description {
                    color: #FFF;
                    font-family: Nunito;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 125%; /* 22.5px */
                }
                .desc-info{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 8px;
                    align-self: stretch;
                    p{
                        color: #FFF;
                        font-family: Nunito;
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 125%; /* 22.5px */
                    }
                }
            }
            .buttons {
                display: flex;
                justify-content: center;
                width: 100%;
                a {
                    border-radius: 24px;
                    background: #FF9E3D;
                    color: #FFF;
                    font-family: Nunito Sans;
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 125%; /* 30px */
                    letter-spacing: -0.48px;
                    display: inline-flex;
                    display: flex;
                    padding: 12px 32px;
                    justify-content: center;
                    align-items: center;
                    gap: 8px;
                    i.play {
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M16 37.8496V9.84961L38 23.8496L16 37.8496ZM19 32.3996L32.45 23.8496L19 15.2996V32.3996Z' fill='white'/%3E%3C/svg%3E");
                        width: 48px;
                        height: 48px;
                    }
                }
            }  
        }
        .image {
            position: absolute;
            z-index: 10;
            overflow-y: visible;
            right: -5%;
            top: -5%;
            height: 110%;
            .image-desktop{
                height: 100%;
            }
            .image-mobile{
                display: none;
            }
        }
    }
}


.styled-checkbox {
    position: absolute; // take it out of document flow
    opacity: 0; // hide it
  
    & + label {
      position: relative;
      cursor: pointer;
      padding: 0;

        color: #3A5551;
        font-family: Nunito;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%; /* 13.75px */

        display: flex;
        align-items: center;
        a{
            color: #3A5551;
            text-decoration: underline;
        }
    }
    & + label i {
        position: relative;
        cursor: pointer;
        padding: 0;

          display: flex;
          align-items: center;
      }
    // Box.
    & + label i:before {
        content: '';
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #FFFCF7;
        display: inline-flex;
        border: 4px solid #FF9B39;

        margin-right: 16px;
        flex: 0 0 32px;
    }
  
    // Box hover
    &:hover + label i:before {
      background: #FF9B39;
    }
    
    // Box focus
    &:focus + label i:before {
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
    }
  
    // Box checked
    &:checked + label i:before {
      background: #FF9B39;
    }
    
    // Disabled state label.
    &:disabled + label i {
      color: #b8b8b8;
      cursor: auto;
    }
  
    // Disabled box.
    &:disabled + label i:before {
      box-shadow: none;
      background: #ddd;
    }
  
    // Checkmark. Could be replaced with an image
    &:checked + label i:after {
        content: '';
        position: absolute;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg filter='url(%23filter0_d_1601_138)'%3E%3Cpath d='M4 12.5L7.58579 16.0858C8.36684 16.8668 9.63316 16.8668 10.4142 16.0858L20.5 6' stroke='white' stroke-width='2'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_1601_138' x='-2' y='-1' width='28' height='28' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_1601_138'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_1601_138' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: inline-flex;
        filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.15));
        left: 4px;
        top: 4px;
    }
}



@media (max-width: 992px) {
   
    .modal-big .modal__container .items-wrap {
        flex-wrap: wrap;
        gap: 15px;
    }
    .modal-big .modal__container .modal_head .modal__close {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .modal-big .modal__container .items-wrap .item-wrap {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .modal-big .modal__container .items-wrap .item-wrap .info .title {
        font-size: 24px;
    }
    .modal-big .modal__container .items-wrap .item-wrap .info .description {
        font-size: 18px;
    }
    .modal-big .modal__container .items-wrap .item-wrap .info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .modal-big .modal__container .items-wrap .item-wrap .ajax-form .groups {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        align-self: stretch;
    }
    .modal-small .modal__container .modal_head .modal__close {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .modal-small .modal__container .modal_head .header-name {
        font-size: 24px;
        margin-top: 10px;
    }
    .modal-thank .modal__container{
        padding: 0px;
        background-color: rgb(58 85 81);
        display: flex;
        max-width: 400px;
    }
    .modal-big .modal__container{
        max-width: 400px;
    }
    .modal-small .modal__container{
        max-width: 400px;
    }
    .modal-small .modal__container .items-wrap .item-wrap .ajax-form .groups {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        align-self: stretch;
        margin-top: 14px;
    }
    .modal-thank .modal__container .image {
        .image-desktop{
            display: none;
        }
        .image-mobile{
            display: flex;
            border-radius: 32px;
            width: 100%;
            height: 100%;
            max-width: 100%;
            object-fit: cover;
            object-position: bottom;
        }
    }
    .modal-thank .modal__container .image {
        position: relative;
        z-index: 10;
        overflow-y: visible;
        right: 0;
        top: 0;
        order: 0;
        width: 100%;
        height: 250px;
        border-radius: 32px;
    }
    .modal-thank .modal__container .info-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 25px;
        order: 1;
    }
    .modal-thank .modal__container .info-wrap .info .title {
        color: #FFF;
        font-family: Nunito Sans;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 115%;
        letter-spacing: -0.56px;
    }
    .modal-thank .modal__container .info-wrap .info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .modal-thank .modal__container .info-wrap .info .desc-info p {
        color: #FFF;
        font-family: Nunito;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%;
    }
}