/* Font face for custom fonts */
@font-face {
    font-family: 'Gilroy-Regular';
    src: url(../fonts/gilroy-regular-webfont.woff);
}

@font-face {
    font-family: 'Gilroy-Bold';
    src: url(../fonts/gilroy-bold-webfont.woff);
}






body, .container-fluid, .row {
    margin: 0;
    padding: 0;
    margin-bottom: 200px;
    margin-top: 100px;

   
}



body, .container-fluid-order, .row {
    margin: 0;
    padding: 0;
    margin-bottom: 200px;
    margin-top: 56px;

   
}


body, .container-fluid-lookup, .row {
    margin: 0;
    padding: 0;
   /* margin-bottom: 400px; */
}




/* Mobile Styles */
/*
@media (max-width: 768px) {
    .form-container {
        width: 100%;          
        max-width: 100%;      
        height: 100vh;
        margin: 0;
        border-radius: 0;
        padding: 15px;
        box-sizing: border-box;   
        border: none; 
    }
}
*/

body {
    background-color: black;
    font-family: 'Gilroy-Regular', sans-serif;
    color: #777;
    overflow-x: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}



.content-wrapper {
    display: flex; /* Use flex to make them side by side */
    flex-wrap: wrap; /* This ensures they stack on smaller screens */
    max-width: 1100px; /* Adjust this value based on the maximum width you desire for the combined containers */
    margin: 0 auto; /* Centers the wrapper */
}

.full-height {
   /* height: 100vh; */
}

.form-group {
    position: relative;
}



.form-container {
    width: 100% !important;
    max-width: 640px; !important;
    flex-shrink: 0;
    margin: auto;
    background-color: #F9F9F9;
    padding: 30px;
    border-radius: 15px;
    position: relative;
    border: 1px solid #3A3A3A;
    z-index: 10;
    /*transform: scale(0.8); 
    transform-origin: top;*/
    
}




.form-container-order {
    width: 100% !important;
    max-width: 540px; !important;
    min-width: 540px;
    margin: auto;
    background-color: #F9F9F9;
    padding: 30px;
    border-radius: 15px;
    position: relative;
    border: 1px solid #3A3A3A;
    z-index: 10;

    /*transform: scale(0.8); 
    transform-origin: top;*/
    
}



.left-column, .right-column {
    flex: 1; /* Each column will take up half of the wrapper */
    max-width: 50%; /* Ensures they don't exceed half the space */
    box-sizing: border-box; /* Makes sure padding and border are included in the width */
}



.left-column {
    padding: 20px 80px; /* Space around the text content */
    color: #F9F9F9;    /* Text color for the left column */
    padding-right: 50px; /* Adjust this value to your needs */
    margin-top: 150px;
}

.right-column {
    padding: 20px 40px; /* Space around the form */
    padding-left: 50px; /* Increase this from 15px for added space */
    
}

@media (max-width: 460px) { /* Typical breakpoint for mobile devices */
   
    .left-column {
        padding: 20px 40px; /* Space around the text content */
       
    }

}





@media (max-width: 992px) { 
    .left-column, .right-column {
        max-width: 100%; /* On smaller screens, they take full width */
        margin-top: 20px;
    }



    .form-container-order {
        width: 100% !important;
        max-width: 540px; !important;
        min-width: 400px;
        margin: auto;
        background-color: #F9F9F9;
        padding: 30px;
        border-radius: 15px;
        position: relative;
        border: 1px solid #3A3A3A;
        z-index: 10;
    
        /*transform: scale(0.8); 
        transform-origin: top;*/
        
    }

   
    
}



@media (max-width: 768px) {
  /*  #logoOrder {
        display: none; 
    }
    */
    /* Hide the original logo on mobile */

/*
    .form-container-order::before {
        content: ""; 
        display: block;
        position: absolute;
        top: -65px; 
        left: 0; 
        width: 250px; 
        height: 55.95px;
        background-image: url('../assets/RapCapReportlogo.svg');
        background-repeat: no-repeat;
        background-size: contain; 
    }
*/
    .form-container-order {
        position: relative; 
        margin-top: -20px; 
    }



    .form-container {
        
       /* min-width: 540px;*/
       
        
    }
    


    


}











.left-container-order {
    max-width: 640px; /* Matches the .form-container-order */
    margin: auto;
    padding: 30px;    /* Matches the .form-container-order */
}

.orderlogo{
    padding-right: 48px;
    margin-top: 36px;
    margin-bottom: 36px;
    
  }

.storeHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    
}

.storeHeader span {
    font-family: 'Gilroy-Bold', sans-serif;
    font-size: 1.5rem;
    margin-top: 14px; /* Added this line */
}



/* For the headers */
.left-column .section {
    display: flex;
    flex-direction: column;
    margin-left: -50px;
    
}
.h3-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.left-column h3 {
    font-size: 16px;
    font-family: 'Gilroy-Bold', sans-serif;
    margin: 0;  /* remove any default margins */
    
}

.left-column p {
    font-size: 14px;
    font-family: 'Gilroy-Regular', sans-serif;
    margin: 0;  /* remove any default margins */
    margin-left: 26px;
    margin-bottom: 20px;
    margin-top: 4px;
}

.left-column #logoOrder {
    
    margin-bottom: 40px;
    width: 250px; /* Adjust this value to your preference */
    height: auto; /* Ensures the logo maintains its aspect ratio */
}

.icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

/*
#logoOrder {
    display: block;
    margin-bottom: 20px;
}
*/




.storeHeader span {
    font-family: 'Gilroy-Bold', sans-serif;
    font-size: 1.4rem;
}


.radio-options {
    margin-bottom: 46px;
}

.radio-option {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the start (left) */
    text-align: left;
    font-family: 'Gilroy-Bold', sans-serif;
    color: #777;
    margin-bottom: 15px;
}

.radio-label {
    display: flex;
    align-items: center; /* Center items vertically */
    font-size: 20px;
    position: relative;
    padding-left: 35px; /* Adjusted for better spacing with radio button */
}

.radio-subtext {
    font-family: 'Gilroy-Regular', sans-serif;
    color: #979797;
    text-align: left;
    font-size: 16px;
    margin-left: 35px;
}

.coming-soon-text {
    font-size: 0.9rem;  /* You can adjust this size as per your requirements */
    color: #979797;    /* You can adjust this color as per your requirements */
    margin-left: 8px;
    margin-top: 5px;
    width: 140px;
}

input[type="radio"] {
   /* transform: scale(10.5); *//* Adjust the scale value as needed */
   width: 16px;
   height: 16px;
   
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}



/*
.radio-option input[type="radio"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
*/

.lookupHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}


.lookupHeader span {
    font-family: 'Gilroy-Bold', sans-serif;
    font-size: 1.5rem;
    margin-top: 14px; /* Added this line */
}

.lookupHeader span {
    font-family: 'Gilroy-Bold', sans-serif;
    font-size: 1.5rem;
}

.coming-soon input[type="radio"] {
    cursor: not-allowed;
}



.form-control {
    background-color: #FFFFFF;
    border: 1px solid #979797;
    color: #111111;
    margin-bottom: 15px;
    height: 60px; /* adjust this value to your preference */
}

#stripe-form input.form-control {
    
    font-family: 'Gilroy-Regular', sans-serif;
    font-size: 18px; /* Adjust this value to your desired font size */
}

.artist-notice {
   /* font-size: 0.9rem;*/
    margin-top: 40px;
    margin-bottom: 10px;

    font-family: 'Gilroy-Regular', sans-serif;
    color: #6A6A6A;
    text-align: left;
    font-size: 16px;
    margin-left: 0px;
    line-height: 8px;
}

.artist-notice a {
    color: #009BF0;
    text-decoration: none;
}

.btn-stripe {
    
    background-color: #1798E9;
    color: #FFFFFF;

    
    border: none;
    font-family: 'Gilroy-Regular', sans-serif;
    font-size: 1.2rem;
    padding: 10px 20px;
    border-radius: 40px;
    width: 220px;  /* Adjust to your preferred value */
    height: 60px;
    margin: 0 auto;
    display: block;
    transition: background-color 0.3s;
    margin-top: 60px;  /* Adjust to your preferred value */
    margin-bottom: 20px;  /* Adjust to your preferred value */
}


.btn-stripe:hover {
    
    background-color: #0077CC;
    color: #FFFFFF;
}

.footer-text {
    /*font-size: 0.9rem;*/
    margin-top: 0px;

    font-family: 'Gilroy-Regular', sans-serif;
    color: #6A6A6A;
    text-align: left;
    font-size: 16px;
    margin-left: 0px;
}

.footer-text a {
    color: #009BF0;
    text-decoration: none;
}



/* Background circles */
.circle {
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}


.overlay {
   
    position: absolute;
    border-radius: 50%;
    z-index: 0; /* or 1 to ensure they are above the circles */

}



.circle1 {
    left: -460px;
    top: -400px;
    width: 750px;
    height: 750px;
    background: #009BF0;
   
}

.circle2 {
    right: -140px;
    top: -140px;
    width: 300px;
    height: 300px;
    background: #009BF0;
}

.circle3 {
    right: 340px;
    top:460px;
    width: 160px;
    height: 160px;
    
    background: #8D67AB;

    
}


.circle4 {
    left: 90%;
    top:400px;
    width: 60px;
    height: 60px;
    transform: translateX(-50%);
    background: #248167; 
}


.circle5 {
    left: 20%;
    top:570px;
    width: 60px;
    height: 60px;
    transform: translateX(-50%);
    background: #15A043; 
}


.circle6 {
    right: 23%;
    bottom: 30%;
    width: 20px;
    height: 20px;
    transform: translateX(-50%);
    background: #A0C3D2; 
}




.circle7 {
    left: 28%;
    top:760px;
    width: 230px;
    height: 230px;
    transform: translateX(-50%);
    background: #477D96; 
}



.circle8 {
    left: 12%;
    top:960px;
    width: 47px;
    height: 47px;
    transform: translateX(-50%);
    background: #907255;   
}




.suggestions-box {
    display: none; /* Hide by default */
    position: absolute;  /* This will now position the suggestionsBox relative to its parent container */
    /*width: 300px;*/
    max-height: 150px;
    overflow-y: auto;
    background-color: #FFFFFF;
    /*border: 1px solid #979797;*/
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.suggestions-box div {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.suggestions-box div:hover {
    background-color: #F9F9F9;
}



.circleArtistContainer {
    position: relative;
    width: 100%;
    height: 100px; /* You can adjust the height as required */
    overflow: hidden;
}

.circleArtist {
   
    position: relative;
    background-repeat: no-repeat !important;
    background-size: cover !important; 
    background-position: center !important; 
    border-radius: 50% !important; 
    overflow: hidden !important; 
    z-index: -1; /* This ensures circles are behind your content */
}

.circleArtist::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5); /* This is the overlay */
    z-index: 2;
}