/* Base styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f3ec;
    overflow-x: hidden; /* Prevents vertical scrolling */
}

.navbar {
    background-color: rgba(33, 33, 33, 0.55); /* Grey with 15% opacity */
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center; /* Adjusted for alignment */
    align-items: center;
    z-index: 24; /* Ensure navbar is above the video and overlay */
    font-weight: bold;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
    padding: 10px 20px;
}

#top-left-item-blank {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px; /* Small square size */
    height: 50px;
    z-index: 26; /* Ensure it's clickable */
    opacity: 0; /* Make it invisible */
}

.top-left-item {
    position: absolute;
    display: flex;
    align-items: center; /* This will vertically center the text with the image */
    gap: 10px; /* Adjust the space between the image and the text */
    left: 0px;
    top: 0px;
    padding: 12px 12px; /* Adjust as necessary */
    margin: 0;
    text-decoration: none;
    color: white;
    align-content: center;
    font-size: 12px;
}

.logout-link {
    display: none;
    position: absolute;
    top: 100%; /* Position right below the .top-left-item */
    left: 12px;
    background-color: white; /* Or any color you prefer */
    color: black; /* Or any color you prefer */
    padding: 5px;
    border: 1px solid #ddd; /* Just a simple border */
    border-radius: 4px; /* Optional: for rounded corners */
    white-space: nowrap; /* Ensures the text does not wrap */
    z-index: 25; /* Ensure it's above other content */
}

.top-left-item:hover .logout-link {
    display: block;
}


.top-left-item img {
    border-radius: 50%;
    margin: 5;
}

.nav-menu {
    list-style-type: none;
    display: flex;
    flex-direction: row; /* Align children vertically */
    padding: 0;
    margin: 0;
}

.nav-menu li {
    margin: 0; /* Adjust spacing between menu items as needed */
    display: flex; /* Use flexbox for menu items */
    align-content: center;
    align-items: center; /* Center-align items vertically */
    justify-content: center; /* Center-align items horizontally */
}

.nav-menu li a {
    text-decoration: none;
    color: white;
    padding: 10px 35px;
    display: block;
    text-transform: uppercase; 
    transition: color 1.5s ease; /* Smooth transition for color change */
}

.nav-menu li a:hover {
    color: #4b9b5e; /* Change to your preferred shade of blue */
}

.nav-menu li:not(:last-child) { /* Add vertical line to all but the last item */
    border-right: 1px solid #fff; 
}


.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 40px;
}

@media (max-width: 600px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 55px;
        left: 0;
        background-color: rgba(33, 33, 33, 0.75); /* Grey with 15% opacity */
    }

    .nav-menu li a {
        padding: 15px;
        border-bottom: 1px solid #444;
    }

    .hamburger {
        display: block;
    }

    .navbar {
        justify-content: flex-end; /* Align items to the right in mobile view */
    }
}
@media (min-width: 601px) and (max-width: 800px) {
    .nav-menu li a {
        padding: 10px 5px; /* Adjusted padding for smaller screens */
        font-size: 15px;
    }
    .nav-menu {
        flex-direction: row;
    }
}
@media (min-width: 801px) and (max-width: 1100px) {
    .nav-menu li a {
        padding: 10px 10px; /* Adjusted padding for smaller screens */
    }
    .nav-menu {
        flex-direction: row;
    }
}
@media (min-width: 1101px) {
    .nav-menu li a {
        padding: 10px 35px;
    }
    .nav-menu {
        flex-direction: row;
    }
}


.header-section {
    display: none;
    margin: 0;
}

.video-container {
    position: relative;
    overflow: hidden;
    top: 0;
    left: 0; 
}

#bg-video {
    position: absolute;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
}

#video-overlay, #mobile-overlay, #banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
    z-index: 0; /* Ensure it's above the video but below everything else */
}

.banners {
    position: absolute;
    overflow: hidden; /* This hides any overflow */
}

.banner-image {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    animation: slideBackground 30s linear infinite;
    opacity: 0; /* Make all backgrounds transparent initially */
    transition: opacity 3s ease; /* Smooth transition for the opacity */
}

@keyframes slideBackground {
    0% {
        background-position: 0% 40%;
    }
    50% {
        background-position: 100% 60%;
    }
    100% {
        background-position: 0% 40%;
    }
}

.banner-image:first-child {
    display: block; /* Show only the first background initially */
}

.teaser-statement {
    position: absolute;
    display: flex;
    flex-direction: column; /* Align children vertically */
    width: 100%;
    height: 100%; 
    justify-content: center; 
    align-items: center; 
    text-align: center;
    box-sizing: border-box;
    z-index: 3; /* Ensure navbar is above the video and overlay */
}

.teaser-statement .logo {
    display: block;
    margin: 0;
    padding: 0;
    color: #fff; /* Or any color you prefer */
    margin-bottom: 30px;
}
.logo img {
    max-width: 150px;
    width: 100%;
}

.teaser-statement .intro {
    display: block;
    margin: 0;
    padding: 0;
    color: #fff; /* Or any color you prefer */
    font-size: 20px; /* Adjust size as needed */
    /* font-weight: bold; */
    font-family: 'Cinzel', sans-serif; /* Apply Sebastian Bobby Slanted font */
    width: 85%;
}

.teaser-statement .quote {
    display: block;
    margin: 30px 0;
    padding: 0;
    color: #fff; /* Or any color you prefer */
    line-height: 72%;
    font-family: 'Clicker Script', sans-serif; /* Apply Sebastian Bobby Slanted font */
    width: 85%;
}


.teaser-statement .signature, .slide .signature {
    display: block;
    margin: 0;
    padding: 0;
    color: #fff; /* Or any color you prefer */
    line-height: 60%;
    font-family: 'Clicker Script', sans-serif; /* Apply Sebastian Bobby Slanted font */
}

@media (max-width: 600px) {
    .teaser-statement .quote {
        font-size: 55px; /* Adjust size as needed */  
    }
    .teaser-statement .signature {
        font-size: 30px; /* Adjust size as needed */
    }
}
@media (min-width: 601px) and (max-width: 800px) {
    .teaser-statement .quote {
        font-size: 65px; /* Adjust size as needed */  
    }
    .teaser-statement .signature {
        font-size: 30px; /* Adjust size as needed */
    }
}
@media (min-width: 801px) and (max-width: 1100px) {
    .teaser-statement .quote {
        font-size: 75px; /* Adjust size as needed */  
    }
    .teaser-statement .signature {
        font-size: 35px; /* Adjust size as needed */
    }
}
@media (min-width: 1101px) {
    .teaser-statement .quote {
        font-size: 75px; /* Adjust size as needed */  
    }
    .teaser-statement .signature {
        font-size: 35px; /* Adjust size as needed */
    }
}


.explore-cta {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 10px; /* Distance from the bottom of the video container */
    left: 0;
    z-index: 3; /* Ensure navbar is above the video and overlay */
}

.explore-cta p {
    margin: 0;
    padding: 0;
    color: #fff; /* Or any color you prefer */
    font-size: 15px; /* Adjust size as needed */
    font-weight: bold;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}

.down-arrow {
    font-size: 20px; /* Size of the arrow */
    color: white; /* Arrow color */
    text-align: center;
    line-height: 40px; /* Adjust line height to control vertical alignment */
}

.main-content-1, .footer {
    position: relative;
    margin-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    background-color: #f9f3ec;
}

.main-content-2 {
    position: relative;
    margin-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    background-color: #e2cba9;
}

.main-content-3 {
    position: relative;
    margin-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    background-color: #d2ae7a;
}

.main-content-4 {
    position: relative;
    margin-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    background-color: #fff;
}

.main-content-5 {
    position: relative;
    margin-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #fff;
}

.main-content-6 {
    position: relative;
    margin-top: 0px;
    padding: 10%;
    text-align: center;
    /* background-color: #d2ae7a; */
    background-image: url('../images/japan.jpg');
    background-size: cover;
    background-position: center;
    box-sizing: border-box; /* Ensures padding is included in the total width and height */
}

.main-content-6-container {
    background-color: #ecdcc6; /* Inner box color */
    padding: 20px; /* Padding inside the content box */
    /* Additional styling for the content container */
    height: auto; /* Adjust based on content */
    width: auto; /* Adjust based on content, or set to 100% to fill the outer container */
}

.main-content-form {
    position: relative;
    margin-top: 0px;
    padding: 50px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #e2cba9;
    box-sizing: border-box; /* Ensures padding is included in the total width and height */
}

.main-content-form-container {
    border: 10px solid #1b3822;
    background-color: #ecdcc6; /* Inner box color */
    padding: 20px; /* Padding inside the content box */
    /* Additional styling for the content container */
    height: auto; /* Adjust based on content */
    text-align: left;
    width: 80%; 
    margin-left: auto;
    margin-right: auto; /* These ensure the element is centered horizontally */
}

h1 {
    font-weight: bold;
    font-family: 'Cinzel', sans-serif; /* Apply Montserrat font */
    font-size: 42px;
} 

h2 {
    font-weight: bold;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
    font-size: 24px;
} 

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 30; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    align-items: center; /* Aligns vertically center */
    justify-content: center; /* Aligns horizontally center */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #e2cba9;
    margin: 7% auto; /* 7% from the top and centered */
    padding: 20px;
    border: 1px solid #1b3822;
    width: 80%; /* Could be more or less, depending on screen size */
    border-radius: 20px; /* Rounded edges */
}

.close:hover, .close:focus, .close2:hover, .close2:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}    

.modal-content ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 70%;  
}

.modal-content li {
    display: inline-block;
    margin-right: 20px;
    padding-bottom: 10px;
}

.modal-content li:last-child {
    margin-right: 0;
}

.divider {
    height: 1px; /* Thickness of the divider */
    width: 30%; /* Width of the divider */
    background-color: #1b3822; /* Color of the divider */
    margin: 20px auto; /* Centering the divider */
} 
/* Adjust vertical margin to 15px for screens below 1100px wide */
@media (max-width: 1100px) {
    .divider {
        margin: 15px auto; /* Vertical margin of 15px, horizontally centered */
    }
}

/* Adjust vertical margin to 10px for screens below 800px wide */
@media (max-width: 800px) {
    .divider {
        margin: 10px auto; /* Vertical margin of 10px, horizontally centered */
    }
}  

.emphasis {
    width: 60%;
    margin: 0 auto; /* This centers the paragraph block */
    text-align: center; /* This centers the text within the paragraph */  
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
    font-size: 22px;
}
.emphasis-small {
    width: 90%;
    margin: 0 auto; /* This centers the paragraph block */
    margin-top: 10px;
    text-align: center; /* This centers the text within the paragraph */  
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
    font-size: 20px;
}
/* Media query for screens less than 800px wide */
@media (max-width: 800px) {
    .emphasis, .emphasis-small {
        width: 80%; /* Adjust width to 80% for screens less than 800px wide */
        font-size: 18px;

    }
}
/* Media query for screens less than 600px wide */
@media (max-width: 600px) {
    .emphasis, .emphasis-small {
        width: 90%; /* Adjust width to 90% for screens less than 600px wide */
        font-size: 15px;
    }
}

.footer .emphasis {
    width: 60%;
    margin: 0 auto; /* This centers the paragraph block */
    text-align: center; /* This centers the text within the paragraph */  
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
    font-size: 16px;
}


.tagline {
    text-align: center; /* This centers the text within the paragraph */  
    color: #1b3822; /* Or any color you prefer */
    font-size: 85px; /* Adjust size as needed */
    line-height: 60%;
    font-family: 'Clicker Script', sans-serif; /* Apply Sebastian Bobby Slanted font */
    margin: 30px 0;
}
@media (max-width: 800px) {
    .tagline {
        font-size: 55px; /* Reduce font size to 55px for smaller screens */
    }
}

label, .sst-form-question {
    display: block;
    max-width: 100%;
    margin-top: 10px;
    margin-bottom: 3px;
    font-size: 14px; /* Set the font size */
    font-weight: bold;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
    text-align: left;
}

.sst-required {
    color: #a00000;
}

.subscription_form {
    text-align: center; /* This centers the text within the paragraph */  
}

.sst-btn, .close, .close2 {
    width: 250px; /* Set the width of the button */
    height: 50px; /* Set the height of the button */
    background-color: #1b3822; /* Set the background color of the button */
    color: white; /* Set the text color */
    border: none; /* Remove the default border */
    font-size: 16px; /* Set the font size */
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
    cursor: pointer; /* Change the cursor to a pointer when hovering over the button */
    text-align: center; /* Center the text inside the button */
    line-height: 50px; /* Center the text vertically */
    display: inline-block; /* Allow width and height to be set */
    border-radius: 0; /* Optional: Adjust for rounded corners */   
}

.grecaptcha-badge {
    visibility: hidden;
}

.sst-btn.g-recaptcha {
    margin: 5px;
}

.spinner {
    border: 4px solid rgba(27, 56, 34, 0.3); /* Light white border */
    border-top: 4px solid rgb(27, 56, 34); /* Solid white top border */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

.spinner-white {
    border: 4px solid rgba(255, 255, 255, 0.3); /* Light white border */
    border-top: 4px solid rgb(165, 165, 165); /* Solid white top border */
    border-radius: 50%;
    width: 12px;
    height: 12px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

.spinner[hidden], .spinner-white[hidden] {
    display: none !important;
}

.sst-disabled {
    cursor: default;
    background-color: #D2AE7A;
    color: #000000;
    border: 2px solid #1b3822;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sst-input, .sst-input-wide, .sst-input-tight {
    background-color: transparent; /* Make the background transparent */
    color: #1b3822; /* Use the same color for the text as the button's outline */
    font-size: 16px !important; /* Match the font size */
    font-family: 'Montserrat', sans-serif !important; /* Match the font family */
    padding-left: 10px; /* Add some padding to the left for the text */
    border-radius: 0; /* Optional: Adjust for rounded corners to match the button */
    box-sizing: border-box; /* Include the padding and border in the element's total width and height */
}

.sst-input {
    height: 50px; /* Match the height of the button */
    line-height: 46px; /* Adjust the line height for input text vertical centering, considering the border */
    width: 250px; /* Match the width of the button */
    border: 2px solid #1b3822; /* Set the border color to match the button's background */
}

.sst-input-wide {
    height: 40px; /* Match the height of the button */
    line-height: 36px; /* Adjust the line height for input text vertical centering, considering the border */
    width: 100%; /* Match the width of the button */
    border: 1px solid #1b3822; /* Set the border color to match the button's background */
}

.sst-input-tight {
    height: 25px; /* Match the height of the button */
    line-height: 22px; /* Adjust the line height for input text vertical centering, considering the border */
    width: 100%; /* Match the width of the button */
    border: 1px solid #1b3822; /* Set the border color to match the button's background */
    margin-bottom: 2px;
}

.sst-multiple-tight {
    line-height: 22px; /* Adjust the line height for input text vertical centering, considering the border */
    width: 100%; /* Match the width of the button */
    border: 1px solid #1b3822; /* Set the border color to match the button's background */
    margin-bottom: 2px;
    background-color: transparent; /* Make the background transparent */
    color: #1b3822; /* Use the same color for the text as the button's outline */
    font-size: 16px; /* Match the font size */
    font-family: 'Montserrat', sans-serif; /* Match the font family */
    padding-left: 10px; /* Add some padding to the left for the text */
    border-radius: 0; /* Optional: Adjust for rounded corners to match the button */
    box-sizing: border-box; /* Include the padding and border in the element's total width and height */
}

#newPromotionForm label {
    margin-top: 3px;
    margin-bottom: 0px;
    font-size: 12px; /* Set the font size */
}

.sst-invalid {
    border: 2px solid red !important;
}

.sst-radio-input {
    display: none;
}

/* Style the label */
.sst-radio-label {
    display: inline-block;
    background-color: #e2cba9; /* Background color */
    color: #1b3822; /* Text color */
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    margin: 5px 0; /* Spacing for visual separation */
    padding: 10px;
    border: 1px solid #1b3822; /* Border to match your input style */
    border-radius: 0; /* Adjust for rounded corners if needed */
    cursor: pointer; /* Change cursor to pointer to indicate clickable area */
}

/* Change label appearance when the radio button is checked */
.sst-radio-input:checked + .sst-radio-label {
    background-color: #1b3822; /* Change background color */
    color: #e2cba9; /* Change text color */
}

.sst-checkbox {
    display: none;
}

.checkbox-label {
    display: inline-block;
    background-color: #e2cba9; /* Background color */
    color: #1b3822; /* Text color */
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    margin: 5px 0; /* Spacing for visual separation */
    padding: 10px;
    border: 1px solid #1b3822; /* Border color */
    border-radius: 0;
    cursor: pointer;
}

.sst-checkbox:checked + .checkbox-label {
    background-color: #1b3822; /* Change background color for selected */
    color: #e2cba9; /* Change text color for selected */
}

.sst-slider {
    -webkit-appearance: none; /* Override default appearance */
    width: 450px;
    max-width: 60%;
    margin: 15px 0;
    outline: none;
}

.sst-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    background: #e2cba9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}

.sst-slider::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #000000;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #1b3822;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -14px;
}

/* Styles for other browsers */
.sst-slider::-moz-range-track {
    background: #e2cba9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}

.sst-slider::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #1b3822;
    cursor: pointer;
}

.sst-slider::-ms-thumb {
    box-shadow: 1px 1px 1px #000000;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #1b3822;
    cursor: pointer;
}

.sst-slider::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.sst-slider-display-value {
    display: inline;
    margin-left: 10px;
    font-weight: bold;
}

.sst-textarea {
    width: 100%; /* Full width */
    padding: 10px; /* Padding for text inside */
    margin-top: 8px; /* Space above the textarea */
    margin-bottom: 16px; /* Space below the textarea */
    border: 1px solid #1b3822; /* Border color to match the slider */
    border-radius: 4px; /* Slightly rounded corners */
    box-sizing: border-box; /* Border and padding included in width */
    font-family: 'Montserrat', sans-serif; /* Matching font family */
    font-size: 16px; /* Matching font size */
    color: #1b3822; /* Text color */
    background-color: #e2cba9; /* Background color */
    resize: vertical; /* Allow only vertical resizing */
}

.sst-switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 34px;
}

.sst-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.sst-toggle {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F2E7D7;
    transition: .4s;
    border-radius: 34px;
}

.sst-toggle:before {
    position: absolute;
    content: "Domestic";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    text-align: left;
    line-height: 26px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
}

.sst-switch input:checked + .sst-toggle {
    background-color: #1b3822;
}

.sst-switch input:checked + .sst-toggle:before {
    transform: translateX(46px);
    content: "Int'l";
}

.sst-toggle:active:before {
    width: 30px;
}

.onoff-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
}

.onoff-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.onoff-toggle {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F2E7D7;
    transition: .4s;
    border-radius: 28px;
}

.onoff-toggle:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.onoff-switch input:checked + .onoff-toggle {
    background-color: #1b3822;
}

.onoff-switch input:checked + .onoff-toggle:before {
    transform: translateX(32px);
}

.onoff-toggle:active:before {
    width: 24px;
}

.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
  
.services-box {
    position: relative;
    border-top: 12px solid #1b3822; 
    border-bottom: 12px solid #1b3822; 
}

.services-box-wide {
    position: relative;
    border-top: 12px solid #1b3822; 
}

.service-image-container {
    position: relative;
    display: inline-block; /* Or 'block', depending on your layout needs */
}
  
.services-box img, .services-box-wide img {
    width: 100%;
    height: auto;
    display: block; /* Removes bottom margin/gap under images */
}

.services-title-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: #FFF; /* White text for visibility */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  padding: 5px 0; /* Some padding */
  font-size: 16px; /* Set the font size */
  font-weight: bold;
  font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}


.services-title, .services-title-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #FFF; /* White text for visibility */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    padding: 5px 0; /* Some padding */
    font-size: 16px; /* Set the font size */
    /* font-weight: bold; */
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}
  

.services-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0; /* Overlay is initially invisible */
  transition: opacity 0.5s; /* Smooth transition for the overlay */
  display: flex;
  justify-content: center;
  align-items: center;
}

.services-overlay-text {
  color: white;
  text-align: center;
  font-size: 20px; /* Adjust based on your preference */
  padding: 15px;
  display: none; /* Initially, the text is not displayed */
  font-size: 16px; /* Set the font size */
  font-weight: normal;
  font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}

.services-box:hover .services-overlay, .sst-promo-graphic-box:hover .services-overlay {
  opacity: 1; /* Make overlay visible on hover */
}

.services-box:hover .services-overlay-text, .sst-promo-graphic-box:hover .services-overlay-text {
  display: block; /* Show text on hover */
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    .about-left, .about-right, .services-box, .services-box-wide {
        width: 80%; /* Makes each box take full width on smaller screens */
        margin: 2px 0; /* Adds vertical margin for spacing */
        padding: 0px;
  }
}
@media (min-width: 601px) {
    .services-box {
        width: 27%; /* Adjusts to slightly less than 33% to allow for margins/padding */
        margin: 3%; /* Spacing between boxes */
    }
    .services-box-wide {
        width: 42%; /* Adjusts to slightly less than 25% to allow for margins/padding */
        margin: 4%; /* Spacing between boxes */
    }
    .about-right {
        width: 56%; /* Adjusts to slightly less than 25% to allow for margins/padding */
        margin: 2%; /* Spacing between boxes */
        padding: 5px;
    }
    .about-left {
        width: 40%; /* Adjusts to slightly less than 25% to allow for margins/padding */
        margin: 0%; /* Spacing between boxes */
        text-align: right;
        padding: 5px;
    }
}

#sst-promo-detail-image {
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure image does not exceed its container's width */
}

@media (max-width: 600px) {
    #sst-promo-detail-image {
        width: 100%; /* Make the image take up 100% of the container's width */
    }
}

.about-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.about-left, .about-right {
    box-sizing: border-box;
    padding: 10px;
}

.about-right {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 1.5s ease;
}

.slide {
    min-width: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 700px;
}

/* For screens above 600px and up to 800px */
@media (min-width: 601px) and (max-width: 800px) {
    .slide {
        height: 550px; /* Adjusted height */
    }
}

/* For screens above 600px and up to 800px */
@media (min-width: 801px) and (max-width: 1200px) {
    .slide {
        height: 450px; /* Adjusted height */
    }
}

/* For screens above 800px */
@media (min-width: 1201px) {
    .slide {
        height: 350px; /* Adjusted height for larger screens */
    }
}

.slide-overlay {
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 20px;
    font-size: 16px; /* Set the font size */
    font-weight: normal;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}

.left-arrow, .right-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff; /* White background */
    color: black; /* Color of the arrow icons */
    border: 3px solid black; /* Thicker black border for a bolder look */
    border-radius: 50%; /* Keeps the arrow buttons circular */
    cursor: pointer;
    font-size: 30px; /* Larger font size for the arrow icons */
    z-index: 10;
    width: 60px; /* Increased width for a fatter appearance */
    height: 60px; /* Increased height to maintain the circle shape */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px; /* Increased padding to make the arrows fatter */
}

/* Optional: Ensure compatibility with icon fonts or SVGs */
.left-arrow:before, .right-arrow:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.left-arrow {
    left: 10px;
}

.right-arrow {
    right: 10px;
}

#current-year {
    display: inline;
}

.sst-promo, .sst-passenger, .sst-review-edit {
    width: 95%;
    margin: 0 auto; /* Center table on the page */
    background-color: white;
    border-collapse: collapse; /* Remove space between borders */
    font-size: 12px;
    table-layout: fixed; /* Add this to ensure the table respects your width settings */
}

.sst-promo, .sst-promo th, .sst-promo td, .sst-passenger, .sst-passenger th, .sst-passenger td, .sst-review-edit, .sst-review-edit td, .sst-review-edit th {
    border: 2px solid #f9f3ec; /* Light grey border */
    padding: 8px; /* White padding */
}

.sst-promo th:nth-child(1), .sst-passenger th:nth-child(1) {
    width: 80px; /* Adjust the percentage based on your layout needs */
}

/* Set specific widths for the three columns in the .sst-promo table */
.sst-review-edito th:nth-child(1) {
    width: 50%; /* Comment column: 50% width */
}
.sst-review-edit th:nth-child(2) {
    width: 40%; /* Feedback column: 40% width */
}
.sst-review-edit th:nth-child(3) {
    width: 80px; /* Actions column: about 10% width */
}

/* Alternating row background colors */
.sst-promo tr:nth-child(even), .sst-passenger tr:nth-child(even), .sst-review-edit tr:nth-child(even) {
    background-color: #e2cba9;
}
.sst-promo tr:nth-child(odd), .sst-passenger tr:nth-child(odd), .sst-review-edit tr:nth-child(odd) {
    background-color: #fff;
}

.sst-promo th, .sst-promo td, .sst-passenger th, .sst-passenger td, .sst-review-edit th .sst-review-edit td {
    text-align: left; /* Left align text in cells */
}

/* Styling the first header row */
.sst-promo thead tr:first-child th, .sst-passenger thead tr:first-child th, .sst-review-edit thead tr:first-child th {
    background-color: #1b3822; /* Dark green background for first header row */
    color: white; /* White text color */
}

/* Optional: if the second header row needs specific styling for filter criteria */
.sst-promo thead tr:nth-child(2) th {
    width: 100%; /* Make input and select fill the cell */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    border: 0; /* Eliminate borders */
    padding: 0; /* Eliminate padding */
    background-color: #f2f2f2; /* Example background color for filter row */
    height: auto; /* Adjust height to fit the cell, might need fine-tuning */
}

/* Style for input elements in the filter row */
.sst-promo thead tr:nth-child(2) th input {
    border: 0; /* Eliminate borders */
    width: 100%; /* Make input and select fill the cell */
    font-size: 12px; /* Small font size */
    line-height: normal; /* Reset to normal to avoid tall appearance */
    height: auto; /* Reset to auto to avoid tall appearance */
    padding: 4px; /* Padding inside the input box */
    box-sizing: border-box; /* To include padding and border in the element's total width and height */
}

/* Matching style for select elements in the filter row */
.sst-promo thead tr:nth-child(2) th select {
    border: 0; /* Eliminate borders */
    width: 100%; /* Ensure select fills the cell */
    font-size: 12px; /* Small font size */
    line-height: normal; /* Reset to normal */
    height: auto; /* Adjust height as needed */
    padding: 4px; /* Padding inside the select box */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    background-color: #f2f2f2; /* Background color */
    color: black; /* Text color */
    margin: 0; /* Ensure no additional space is added outside the select */
}

.sst-promo-controls {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
}

.sst-promo-recordsInfo, .sst-promo-limitSelect, .sst-promo-prevPage, .sst-promo-nextPage {
    margin: 0;
    padding: 2px 4px;
}

.sst-promo-limitSelect {
    border: 1px solid #ddd;
    background-color: white;
    color: black;
}

.sst-promo-prevPage, .sst-promo-nextPage, .sst-promo-add-cancel, .sst-promo-add-submit, .sst-promo-add, .sst-promo-delete, .sst-review-delete, .sst-promo-edit, .sst-proposal-view, .sst-person-decrypt, .sst-template-cancel, .sst-template-submit, .sst-template, .sst-review-save-feedback-btn  {
    background-color: #1b3822; /* Set the background color of the button */
    color: white; /* Set the text color */
    border: none; /* Remove the default border */
    font-family: 'Montserrat', sans-serif !important; /* Apply Montserrat font */
    cursor: pointer; /* Change the cursor to a pointer when hovering over the button */
    text-align: center; /* Center the text inside the button */
    display: inline-flex; /* Use inline-flex for better alignment control */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Center content horizontally */
    border-radius: 0; /* No rounded corners */
    width: auto; /* Allow button to adjust width based on content */
    padding: 0 20px; /* Add extra space on the left and right sides */
    height: 25px; /* Smaller height */
    font-size: 12px !important; /* Smaller font size */
    font-weight: bold; /* Make text bold */
}

.sst-promo-clickable tbody tr:hover {
    background-color: #a9d6b4;
    cursor: pointer;
}

/* Adding left and right arrows */
.sst-promo-prevPage:before {
    content: "\2190"; /* Left arrow */
    margin-right: 5px;
}

.sst-promo-nextPage:after {
    content: "\2192"; /* Right arrow */
    margin-left: 5px;
}

.trash-icon, .pen-icon {
    font-size: 18px; /* Adjust the size as needed */
    font-weight: normal;
}

.sst-promo-delete, s.sst-review-delete, .sst-promo-edit, .sst-proposal-view, .sst-person-decrypt {
    padding: 2px;
}

.sst-promo-graphic-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    justify-items: center; /* Center items in their grid cell */
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
  
.sst-promo-graphic-box {
    flex: 0 0 300px; /* This prevents the box from growing or shrinking */
    width: 300px;
    min-height: 200px;
    cursor: pointer;
    background-color: #7C7975;
    border-top: 12px solid #1b3822; 
    border-bottom: 12px solid #1b3822; 
    position: relative;
}

.drop-zone {
    border: 2px dashed #000;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden; /* Ensure the image doesn't overflow the boundaries of the drop zone */
}

.drop-zone p {
    margin: 0;
}

/* Style for the tabs container */
#tabs, #proposalTabs {
    /* font-family: Arial, sans-serif; /* Adjust the font family as per the website's design */
    margin-top: 0px; 
    padding: 0px;
    border: 0px;
} 
#proposalTabs {
    background-color: #E2CBA9;
}  

/* Style for the navigation tabs */
#tabs ul#tabs-nav, #proposalTabs ul#tabs-nav {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    width: 100% !important;
}
#tabs ul#tabs-nav {
    background-color: #F9F3EC;
}
#proposalTabs ul#tabs-nav {
    background-color: #E2CBA9;
}

#tabs ul#tabs-nav li, #proposalTabs ul#tabs-nav li  {
    border: 0px; /* Remove the default border */
    font-size: 16px; /* Set the font size */
    font-weight: bold;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
    display: inline-block;
    margin-right: 4px; /* Space between tabs */
    white-space: nowrap; /* Prevent text wrapping by default */
}
/* When the screen width is 800px or less */
@media (max-width: 1100px) {
    #tabs ul#tabs-nav li, #proposalTabs ul#tabs-nav li {
        font-size: 14px; /* Smaller font size for smaller screens */
        white-space: nowrap; /* Prevent text wrapping by default */
    }
}
/* When the screen width is 600px or less */
@media (max-width: 800px) {
    #tabs ul#tabs-nav li, #proposalTabs ul#tabs-nav li {
        font-size: 12px; /* Even smaller font size for very small screens */
        white-space: normal;
    }
}

#tabs ul#tabs-nav li a, #proposalTabs ul#tabs-nav li a {
    text-decoration: none;
    color: #1b3822; /* Text color */
    display: inline-block;
    border-radius: 8px 8px 0 0; /* Rounded corners on the top */
    border: 0px;
}
#tabs ul#tabs-nav li a {
    background-color: #f2e7d7; /* Background color */
}
#proposalTabs ul#tabs-nav li a {
    background-color: #f2e7d7; /* Background color for inactive tabs */  
}


#tabs ul#tabs-nav li a:hover, #tabs ul#tabs-nav li.ui-tabs-active a {
    border: 0px;
    border-radius: 8px 8px 0 0; /* Rounded corners on the top */
    background-color: #E2CBA9; /* Darker background color on hover/active */
    color: #1b3822;
}
#proposalTabs ul#tabs-nav li a:hover, #proposalTabs ul#tabs-nav li.ui-tabs-active a {
    border: 0px;
    background-color: #F9F3EC; /* Darker background color on hover/active */
    color: #1b3822;
}

/* Style for the tab content */
#tabs .tab-content, #proposalTabs .tab-content {
    border: 0px; /* Border color to match the tabs */
    border-radius: 0 5px 5px 5px; /* Rounded corners */
    padding: 10px; /* Space inside the content area */
}
#tabs .tab-content {
    background-color: #E2CBA9; /* Light background color for the content */
}
#proposalTabs .tab-content {
    background-color: #F9F3EC; /* Light background color for the content */
}

#tabs .ui-state-active {
    background-color: #E2CBA9; /* Light background color for the content */
    border-radius: 8px 8px 0 0; /* Rounded corners on the top */
}
#proposalTabs .ui-state-active {
    background-color: #F9F3EC; /* Light background color for the content */
    border-radius: 8px 8px 0 0; /* Rounded corners on the top */
}


#proposalTabs .tab-content {
    height: 200px; /* Set the height of the tab content area */
    overflow-y: scroll; /* Enable vertical scrolling */
}
#proposalTabs .tab-content::-webkit-scrollbar {
    width: 16px;
}
#proposalTabs .tab-content::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #F9F3EC; /* Adjusted to match your requested background color */
    border: 1px solid #000;
}
#proposalTabs .tab-content::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: #aa9f8f; /* You can adjust this color as well if needed */
}

.ui-widget {
    font-size: 16px; /* Match the font size */
    font-family: 'Montserrat', sans-serif; /* Match the font family */
}

#proposalTabs .ui-tabs-tab {
    background-color: #E2CBA9 !important;
}

.card-input-container {
    display: flex;
    justify-content: space-between; /* Align items evenly */
    margin: 0px !important;
    padding: 0px !important;
    margin-bottom: 10px; /* Add spacing between input containers */
}
   
.card-input-with-icon {
    display: flex;
    margin: 0px !important;
    padding: 0px !important;
    align-items: center; /* Align items vertically in the center */
    width: 100%;
}

.card-input-with-icon input {
    flex: 1; /* Allow input to fill the available space */
    margin-right: 8px; /* Optional: Adjust spacing between input and image */
    width: 100%;
}

.card-type {
    display: flex;
    align-items: center; /* Ensure the image is centered with the input */
}

/* Optional: Adjust the size of the card type image */
.card-type img {
    width: 30px; /* Example size, adjust as needed */
    height: auto; /* Maintain aspect ratio */
}

.passengerForm .sst-input-tight, .cardForm .sst-input-tight {
    height: 35px;
}

.passengerLabel label:not(.sst-radio-label), .passengerForm .sst-form-question {
    box-sizing: content-box;
    margin:0; 
    padding: 0; 
    text-align: right;
}

.passengerForm .passengerLabel {
    display: flex;
    align-items: center; /* Ensures vertical alignment in flex mode */
    margin-bottom: 3px; /* Adds some space below each form group */
}
  
.passengerForm .passengerLabel label:not(.sst-radio-label), .passengerForm .passengerLabel .sst-form-question {
    width: 170px; /* Fixed width for the label */
    margin-right: 10px; /* Space between the label and the input */
    flex-shrink: 0; /* Prevents the div from shrinking */    
}

.passengerForm .passengerLabel input {
    flex-grow: 1; /* Allows the div to grow and fill the remaining space */
}
  
/* Media query for screens less than 600px wide */
@media (max-width: 1100px) {
    .passengerForm .passengerLabel {
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align items to the start of the flex container */
        text-align: left;
    }
    
    .passengerForm .passengerLabel label:not(.sst-radio-label), .passengerForm .passengerLabel .sst-form-question {
        width: auto; /* Allow the label to take the necessary width */
        margin-right: 0; /* Remove the margin to the right of the label */
        text-align: left;
    }
}
  
.passengerForm .container {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}
  
.passengerForm .item {
    box-sizing: border-box;
    margin: 2px 10px; /* Vertical (top & bottom) margin of 2px and horizontal (left & right) margin of 20px */
    flex: 1 1 calc(50% - 20px); /* Adjust flex-basis to account for the horizontal margin */
}
  
/* This class will only effectively apply on screens wider than 800px */
.passengerForm .item-span-2 {
    box-sizing: border-box;
    margin: 2px 10px; /* Vertical (top & bottom) margin of 2px and horizontal (left & right) margin of 20px */
    flex: 1 1 100%; /* On small screens, it takes full width */
    /* text-align: left; */
}
  
@media (min-width: 800px) {
    .passengerForm .item-span-2 {
      flex: 2 1 50%; /* Takes up twice the space of .item on wider screens */
      margin: 2px 10px; /* Maintain horizontal margin but adjust if needed */
    }
}  
@media (max-width: 800px) {
    .passengerForm .item, .passengerForm .item-span-2 {
      flex-basis: 100%; /* Change to one item per row on narrow screens */
      margin: 2px 10px; /* Maintain horizontal margin but adjust if needed */
    }
}

.cardForm-container {
    display: flex; 
    flex-wrap: wrap;
}

.cardForm {
    flex: 1; 
    min-width: 300px; 
    padding: 5px;
}

.error-note {
    color: red; 
    font-weight:bold; 
    margin-top: 25px;
}

.error-message-container {
    max-height: 96px; 
    overflow-y: auto; 
    color: red; 
    margin-top: 10px;
    margin-bottom: 25px
}
.error-message-container::-webkit-scrollbar {
    width: 16px;
}
.error-message-container::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #ECDCC6; /* Adjusted to match your requested background color */
    border: 1px solid #000;
}
.error-message-container::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: #aa9f8f; /* You can adjust this color as well if needed */
}

.suggestions-container {
    position: relative; /* Position the container relative to its normal position */
}
.destination-suggestions {
    position: absolute; /* Position the suggestions absolute to the container */
    top: 100%; /* Position the suggestions below the input */
    left: 0;
    width: 100%; /* Take the full width of the container */
    z-index: 1000; /* Ensure it is above other elements */
    background-color: #F9F3EC;
    max-height: 200px; /* Limit the height if needed */
    overflow-y: auto; /* Add vertical scroll if content exceeds height */
}

.destination-suggestions div {
    cursor: pointer;
    padding: 5px;
    text-align: left; /* Left-align the text */
    font-size: 10px; /* Set the font size to 9 pixels */
}

#destination-suggestions .active {
    font-weight: bold; /* Set the text to bold */
}

#downloadMenu, #templateMenu {
    display: none;
    position: absolute;
    background-color: #E2CBA9;
    min-width: 175px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
}
#downloadMenu a, #templateMenu a {
    color: black;
    padding: 2px 2px;
    text-decoration: none;
    display: block;
}
#downloadMenu a:hover, #templateMenu a:hover {
    background-color: #f1f1f1
}
.button-container {
    position: relative;
    display: inline-block;
}
.review-form-group {
    margin-bottom: 15px;
    text-align: left; /* ensures everything inside is left-aligned */
}
.star-rating {
    display: inline-flex; 
    flex-direction: row-reverse;  /* Ensures hover propagates from right to left */
    gap: 5px;                     /* Spacing between stars (optional) */
}
.star-rating input {
    display: none;               /* Hide the default radio circle */
}
.star-rating label {
    font-size: 2rem;             /* Size of the stars */
    color: transparent;          
    -webkit-text-stroke: 1px #1B3822; /* Outline color */
    cursor: pointer;
    user-select: none;
    line-height: 1;              /* Keep stars closely spaced vertically */
}
/* Hovering: fill the hovered star and all stars to its left */
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #1B3822;
}
/* Once a radio is checked, fill that star and all to its left */
.star-rating input:checked ~ label {
    color: #1B3822;
}
.sst-review-graphic-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 10px;
    justify-items: center; /* Center items in their grid cell */
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.sst-review-graphic-box {
    flex: 1 1 450px; /* Allows flexibility while maintaining a minimum width */
    min-width: 450px;
    max-width: 100%; /* Prevents it from growing too large */
    min-height: 200px;
    height: auto; /* Allows it to grow dynamically */
    background-color: #E2CBA9;
    border-top: 12px solid #1b3822; 
    border-bottom: 12px solid #1b3822; 
    position: relative;
    overflow: visible !important;
    overflow-wrap: break-word; /* Ensures text wraps within the box */
    word-break: break-word; /* Helps break long words if needed */
}
.sst-review-comment {
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    word-wrap: break-word; /* Ensures long words break instead of overflowing */
    overflow-wrap: break-word; /* Alternative for better browser support */
}
.sst-review-feedback {
    width: 90%;
    margin: 10px auto;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 16px;
    font-style: italic;
    color: #1B3822; 
}
.sst-review-title-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #FFF; /* White text for visibility */
    background-color: #D2AE7A; 
    padding: 5px 0; /* Some padding */
    font-size: 16px; /* Set the font size */
    font-weight: bold;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}
.sst-review-title-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      color: #000; /* White text for visibility */
      background-color: #D2AE7A; 
      padding: 5px 0; /* Some padding */
      font-size: 16px; /* Set the font size */
      /* font-weight: bold; */
      font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}
.sst-review-feedback-input {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    margin: 0;
    resize: vertical; /* Allow vertical resizing if desired */
}
.sst-review-save-feedback-btn {
    margin-top: auto; /* Pushes the button to the bottom */
    align-self: center; /* Center the button horizontally */
    padding: 4px 8px;
}
.drop-zone {
    border: 2px dashed #1b3822;
    padding: 20px;
    text-align: center;
    color: #1b3822;
    cursor: pointer;
    transition: border 0.2s ease;
    display: inline-block; /* so label is clickable across this area */
}
  
.drop-zone.dragover {
    border-color: #1B3822; /* highlight color when dragging */
    color: #1b3822;
}