/* ===================================
    form modal
    ====================================== */
    .landing-modal{
        position: fixed;
        z-index: -100;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3rem 0;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s opacity , 0s z-index , 0.3s visibility , 0.3s transform;
    }
    .landing-modal.active{
        opacity: 1;
        visibility: visible;
        z-index: 100;
        transition: 0.3s;
    }
    .landing-modal.active.hide{
        opacity: 0;
        visibility: hidden;
    }
    .landing-modal .modal-cont{
        width: 100%;
        position: relative;
    }

    .landing-modal .modal-content{
        position: relative;
        max-width: 880px;
        overflow-y: auto;
        width: 80%;
        max-height: 75vh;
        padding: 3rem 4.5rem;
        margin: 5rem auto;
        border-radius: 0;
        border: none;
        outline: none;
        transform: translateY(-100px);
        box-shadow: 0 0 30px #00000040;
        transition: 0.3s;
    }
    /* Larger modal for press/creator form with more fields */
    #contactModal .modal-content {
        max-height: 85vh;
    }
    .landing-modal.active .modal-content{
        transform: translateY(0);
    }
    .landing-modal.active.hide .modal-content{
        transform: translateY(-100px);
        opacity: 0.2;
    }
    .landing-modal .contact-form .form-control{
        border: none;
        outline: none;
        box-shadow: none;
        border-bottom: 1px solid #d4d4d4;
        border-radius: 0;
        padding: 0;
    }
    .landing-modal .contact-form .form-control.error{
        border-color: #d5402c;
        color: #d5402c;
    }
    .landing-modal .contact-form .form-control.error.animate{
        animation: 0.5s error;
    }



    @keyframes error {
        0%{
            transform: translateX(-3px);
        }
        20%{
            transform: translateX(2px);
        }
        40%{
            transform: translateX(-5px);
        }
        60%{
            transform: translateX(4px);
        }
        80%{
            transform: translateX(-6px);
        }
        100%{
            transform: translateX(0);
        }
    }

    .landing-modal textarea.form-control {
        min-height: 130px;
        resize: none;
        margin-bottom: 0;
    }

    .defaultcolor{
        color: #3e56b6;
    }
    .heading-area .title{
        font-size: 2.5rem;
    }


    /*check box*/
    /*CheckBox*/

    .quote-content .form-check{
        padding: 50px 0 0 0;
        text-align: center;
        margin-bottom: -15px;
    }


    .checkbox-label {
        display: inline-block;
        position: relative;
        padding-left: 35px;
        cursor: pointer;
        font-size: 14px;
        line-height: 25px;
        font-weight: 400;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .checkbox-label input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .check-mark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        border: 1px solid #999999;
    }



    .check-mark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .checkbox-label input:checked ~ .check-mark:after {
        display: block;
    }

    .checkbox-label .check-mark:after {
        left: 9px;
        top: 5px;
        width: 7px;
        height: 11px;
        border: solid #999999;
        border-width: 0 3px 4px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .btn-modal-fixed{
        border: none;
        outline: none;
        background-color: #1ebd9f;
        color: #ffffff !important;
        border-radius: 25px;
        padding: 0.65rem 1.75rem;
        font-size: 14px;
        position: absolute;
        bottom: 0;
        transform: translate(-50% , 50%);
        left: 50%;
        box-shadow: 0 3px 8px #00000044 !important;
        -webkit-transition: 0.3s all;
        -moz-transition: 0.3s all;
        -o-transition: 0.3s all;
        transition: 0.3s all;
    }
    .landing-modal.active.hide .btn-modal-fixed{
        bottom: 2rem;
    }
    .landing-modal.active .btn-modal-fixed{
        bottom: 5rem;
    }


    .btn-modal-fixed:hover{
        background-color: #3e56b6;
    }

    #close{
        position: absolute;
        right: 15px;
        top: 15px;
        border-radius: 50%;
        background-color: #676767;
        color: #ffffff;
        border: none;
        outline: none;
        box-shadow: none;
        width: 31px;
        height: 31px;
        line-height: 1;
        font-size: 25px;
        font-weight: 100;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #close-info{
        position: absolute;
        right: 15px;
        top: 15px;
        border-radius: 50%;
        background-color: #676767;
        color: #ffffff;
        border: none;
        outline: none;
        box-shadow: none;
        width: 31px;
        height: 31px;
        line-height: 1;
        font-size: 25px;
        font-weight: 100;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .close span{
        display: block;
        transform: scaleX(1.2) translate(0px, -2px);
    }


    /*thanks box*/
    #thanks{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
        background: rgba(0, 0, 0, 0.4);
        z-index: 110;
        width: 100vw;
        height: 100vh;
        display: none;
    }
    .thanks-body{
        background: #ffffff;
        padding: 4rem;
        max-width: 350px;
        max-height: 320px;
        text-align: center;
        transform: translateY(-70px);
        transition: 0.3s;
    }
    #thanks.active .thanks-body{
        transform: translateY(0);
    }
    .icon i{
        font-size: 3rem;
        color: #1ebd9f;
    }

    #thanks-text{
        line-height: 1.3;
    }

    .btn-close{
        background-color: #1dbd9e;
        color: #ffffff;
        border: 1px solid #1dbd9e;
        padding: 5px 25px !important;
    }
    .btn-close:hover{
        background-color: #3e56b6;
        color: #ffffff;
        border: 1px solid #3e56b6;
    }
    .typewriter-cursor {
        display: inline-block;
        animation: blink 1s steps(1) infinite;
    }
    
    @keyframes blink {
        50% {
            opacity: 0;
        }
    }
    
    /* Close button for QR Modal */
#close-qr-modal {
    position: absolute;
    top: 10px; /* Adjusts vertical position */
    right: 10px; /* Adjusts horizontal position */
    background-color: #676767; /* Background color */
    color: #ffffff; /* Text color */
    border: none; /* No border */
    border-radius: 50%; /* Round shape */
    width: 30px;
    height: 30px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}

#close-qr-modal:hover {
    background-color: #3e56b6; /* Changes color on hover */
}

/* Centers the CTA buttons and adds spacing when they wrap */
.press-cta{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:.75rem 1rem;     /* row x column gap */
    text-align:center;   /* keeps inline text centered on narrow screens */
  }
  
  /* Centers the badges and spaces them nicely when they wrap */
  .press-badges{
    margin-top:1rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.5rem .75rem;
    text-align:center;
  }
  
  /* Fallback for browsers that don't support flex gap in flexbox */
  @supports not (gap: 1rem){
    .press-cta > *{ margin:.375rem .5rem; }
    .press-badges > *{ margin:.25rem .5rem; }
  }

/* Make social icons white in hamburger menu */
.side-footer .social-icons-simple a {
    color: #ffffff !important;
}
.side-footer .social-icons-simple a:hover {
    opacity: 0.8;
}

/* Ensure Font Awesome icons load properly everywhere */
.social-icons-simple i.fab,
.social-icons-simple .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
}