/* font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* variable */
:root {     
    --base-color: #A37657;  
    --dark-gray: #333333;
    --darkest-gray: #1D2121;
    --medium-gray: #898d95;
    --very-light-gray: #f6f3ef;
    --cream-color: #C7A48E;
    --light-cream: #F0E9E5;
    --alt-font: 'Montserrat', sans-serif;
    --primary-font: "Josefin Sans", sans-serif;
    --secondary-font: 'Montserrat', sans-serif;
}  
::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.4) !important ;
    text-overflow: ellipsis;
  }
body {
    font-size: 17px;
    line-height: 32px;
    overflow-x: hidden;
}

/* custom cursor */
.custom-cursor .circle-cursor-inner {
    background-color: var(--base-color);
    width: 10px;
    height: 10px;
}
.custom-cursor .circle-cursor-inner.cursor-link-hover {
    background-color: var(--base-color);
}
.custom-cursor .circle-cursor-outer {
    border: 1px solid transparent;
}
/* header */
header .navbar-brand img {
    max-height: 50px;
}
header .left-nav .navbar-nav:before {
    background-color: var(--white);
    opacity: 0.2; 
    transform: translate(-28px, 0px);
    -webkit-transform: translate(-28px, 0px);
    transition: 0s;
}
header.sticky .left-nav .navbar-nav:before {
    transform: translate(-28px, 0px);
    -webkit-transform: translate(-28px, 0px);
}
.navbar .navbar-nav .nav-link { 
    font-size: 16px;
    font-weight: 400; 
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    border-bottom: 1px solid #f6f3ef;
    padding: 16px 20px;
    font-weight: 500;
    font-size: 16px;
    color: var(--dark-gray);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(502%) contrast(502%);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active:hover > a{
    background-color: var(--base-color);
    color: var(--white);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active > a {
    color: var(--medium-gray);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu {
    width: 330px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a {
    color: var(--dark-gray);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a p {
    line-height: 22px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a img {
    width: 65px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li.active > a,
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a:hover {
    color: var(--medium-gray);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a img {
    width: 40px;
    margin-right: 10px;
}
/* pagination */
.pagination-style-01 .page-item.active .page-link,
.pagination-style-01 .page-item .page-link:hover {
    background: var(--dark-gray);
    color: var(--white);
}
.pagination-style-01 .page-item:first-child .page-link,
.pagination-style-01 .page-item:last-child .page-link {
    background: transparent;
    box-shadow: none !important;
}
.pagination-style-01 .page-item:first-child .page-link:hover,
.pagination-style-01 .page-item:last-child .page-link:hover {
    color: var(--dark-gray);
}
/* input */
.input-small, .textarea-small {
    font-size: 14px;
}
/* bg color */
.bg-blue-whale {
    background-color: #152833;
}
.bg-blue-licorice {
    background-color: #374b57;
}
/* bg gradient transparent */
.bg-gradient-dark-transparent {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(7%, #0a171e), to(transparent));
    background: linear-gradient(to top, #0a171e 7%, transparent 70%);
}
.transition-hover {
    -webkit-transition: all 300ms ease-in-out !important;
    transition: all 300ms ease-in-out !important;
}

/* btn */
.btn.btn-blue-whale {
    background-color:#152833; 
    color: var(--white);
}
.btn.btn-blue-whale:hover {
    background-color: transparent;
    border-color: #152833;
    color: #152833;
}
.btn {
    font-family: var(--primary-font);
    font-weight:500;
    text-transform: inherit;
    letter-spacing: 0px;
}
.btn.btn-link {
    padding: 0 0 2px; 
}
.btn.btn-rounded.btn-extra-large {
    padding: 18px 66px 18px 40px;
    font-size: 17px;
}
.btn.btn-rounded.btn-large {
    padding: 16px 55px 16px 38px;
    font-size: 16px;
}
.btn.btn-large {
    font-size: 15px;
}
/* number pagination style 01 */
.swiper-number-pagination-style-01 .swiper-number .swiper-pagination-bullet {
    font-size: 14px;
}
.process-step-style-02:hover .process-step-icon .number {
    color: var(--white);
}
/* page title */
.page-title-large h1 {
    font-size: 4rem;
    line-height: 3.9rem;
}
/* process step style 03 */
.process-step-style-03:hover .process-step-icon-box .progress-image {
    -webkit-transform: scale(1.3); 
    transform: scale(1.3);
}
/* social icon style 02 */
.social-icon-style-02 .small-icon li {
    margin: 0;
}
/* opacity */
.opacity-05 {
    opacity: 0.05;
}
/* top right bottom left */
.top-minus-35px {
    top: -35px;
}
.left-minus-35px {
    left: -35px;
}
.bottom-minus-35px {
    bottom: -35px;
}
/* footer */
footer .footer-logo img {
    max-height: 36px;
}
.footer-dark {
    color: #768086;
}
.footer-dark p, .footer-dark a {
    color: #768086;
}
.is-touchable .cursor-page-inner {
    display: none !important;
}
/* media query responsive */
@media (max-width: 1400px) {
    .xl-min-h-270px {
        min-height: 270px !important;
    }
}
@media (max-width: 1300px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (max-width: 1199px) {
    header .left-nav .navbar-nav:before {
        transform: translate(-10px, 0px);
        -webkit-transform: translate(-10px, 0px);
    }
    header.sticky .left-nav .navbar-nav:before {
        transform: translate(-10px, 0px);
        -webkit-transform: translate(-10px, 0px);
    }
    .elements-social .large-icon li {
        margin: 0 5px;
    }
    footer .nav-link {
        padding-left: .6rem;
        padding-right: .6rem;
    }
    .navbar .navbar-nav .nav-link {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media (max-width: 1024px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 8px;
        padding-right: 8px;
    }
}
@media (max-width: 991px) {
    header .widget-text {
        color: var(--dark-gray);
    }
    header .widget-text i {
        color: var(--white);
    }
    .md-bottom-minus-15px {
        bottom: -15px;
    }
    .elements-social.social-icon-style-04 .large-icon a {
        font-size: 21px;
        width: 50px;
        height: 50px;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
        padding-left: 0;
        padding-right: 0;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover,
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover img{
        background-color: transparent;
        color: var(--dark-gray);
        filter: inherit;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover,
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active:hover > a {
        background-color: transparent;
        color: var(--medium-gray);        
    }
}
@media (max-width: 767px) {
    .sm-top-minus-25px {
        top: -25px;
    }
    .process-step-style-02 .progress-step-separator,
    .process-step-style-03 .progress-step-separator,
    .process-step-style-04 .progress-step-separator {
        display: block;
    }
}
@media (max-width: 575px) {
    .process-step-style-02 .progress-step-separator,
    .process-step-style-03 .progress-step-separator,
    .process-step-style-04 .progress-step-separator {
        display: none;
    }
}

/* Location */

#location .map,
#location .map iframe {
    height: 100%;
    min-height: 520px;
}

#location .advantages {
    height: 100%;
    min-height: 520px; /* Ensures a minimum height */
}
#location .padding
{
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--base-color);
    padding: 40px;
}

/* Ensure the accordion stays within the screen width */
#location .accordion {
    max-width: 100%;
    margin: 0 auto; /* Center the accordion */
    padding-left: 15px; /* Add left padding */
    padding-right: 15px; /* Add right padding */
}

/* Media query to handle mobile view */
@media (max-width: 767px) {
    #location .padding
{
    padding: 40px 20px;
}

    #location .accordion {
        padding-left: 15px; /* Ensure left padding */
        padding-right: 15px; /* Ensure right padding */
    }
}

#location .row {
    min-height: 500px; /* Set a minimum height if needed */
}

#location .map, 
#location .advantages {
    display: flex;
    flex-direction: column;
}

#location .advantages > div {
    flex: 1; /* Makes the content div fill available space */
}

/* Challenges */




/* CTA */

#cta {
    position: relative;
    background-color: var(--dark-gray);
    overflow: hidden;
}

/* Overlay for darkening the background */
#cta .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* semi-transparent black */
    z-index: 1;
}

#cta .container {
    position: relative;
    z-index: 2; /* Content should appear above the overlay */
}

#cta {
    background-size: cover;
    background-position: center center;
}

/* Table */

.grid-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; /* Slightly increase the width of the first column */
    gap: 20px; /* Adjust spacing between grid items if needed */
}

/* Styling for each grid item (column) */
#table .grid-item {
    padding: 20px;
    text-align: center;
}

/* First grid item (Features) specific styling */
.grid-container .grid-item:first-child {
    white-space: nowrap; /* Prevent text wrapping */
}

/* General styling for the grid items */
#table .grid-item p {
    color: var(--dark-gray);
    font-size: 17px;
}

/* Hover effect for grid items with the 'grid-hover' class */
#table .grid-item.grid-hover:hover {
    border: 1px solid var(--base-color);
    border-radius: 120px;
}

/* Change text color of all <p> tags within the hovered grid column */
#table .grid-item.grid-hover:hover p {
    color: var(--base-color);
}

/* General hover effect for applicable grid items */
#table .grid-item.grid-hover:not(:first-child):hover .grid-image {
    content: attr(data-hover-image); /* Dynamically load hover image */
    transition: transform 0.3s ease-in-out, content 0.3s ease-in-out;
    transform: scale(1.1); /* Optional zoom effect */
}


/* Styling for images inside grid items */
#table .grid-item img {
    max-height: 50px; /* Controls the height of the image */
    margin-bottom: 15px; /* Adds space below the image */
}

/* Styling for paragraphs inside grid items */
#table .grid-item p {
    margin: 5px 0; /* Adds space between paragraphs */
}

/* Carousel */

#carousel .outlined-text {
    color: transparent; 
    -webkit-text-stroke: 1px var(--base-color); 
    text-stroke: 1px var(--base-color); 
}

/* Position carousel overlay on text */
#carousel .swiper {
    position: relative;
    z-index: 2; 
}

/* Make inactive slides smaller */
#carousel .swiper-slide {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Make inactive slides smaller */
#carousel .swiper-slide:not(.swiper-slide) {
    transform: scale(0.4) !important; 
    transition: transform 0.3s ease !important; 
}

/* footer */
footer .footer-logo img {
    max-height: 43px;
    width: auto;
}
footer a:hover {
    color: var(--white);
}
footer ul li {
    margin-bottom: 2px;
}

/* Footer Styles */
#footer table {
    margin: 0 auto; /* Centers the table horizontally */
  }

  #footer table td {
    text-align: center; /* Centers the content inside each cell horizontally */
    vertical-align: middle; /* Centers the content vertically inside each cell */
    padding: 10px; /* Optional: adds some space inside each cell */
  }

  #footer .col-lg-5 {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the content in the first column */
    align-items: center; /* Ensures that content is centered horizontally within the column */
    height: 100%; /* Ensures the column takes the full height of the container */
  }

  #footer .col-lg-5 p,
  #footer .col-lg-5 table {
    margin-bottom: 15px; /* Adds space between paragraphs and table */
  }

  /* Footer Form Style */
  .border-bottom-only {
    border: none;
    border-bottom: 1px solid var(--medium-gray) !important; /* Adjust the color as needed */
    padding-bottom: 8px; /* Optional padding */
    border-radius: 0; /* Ensures no rounded corners */
    box-shadow: none; /* Removes any default box shadows */
}

.form-group {
    margin-bottom: 20px;
}

#footer .row {
    margin-bottom: 15px;
}

#footer form select option 
{
    color: white; 
    background-color: var(--darkest-gray);
}

#footer form select:focus, 
#footer form select:active, 
#footer form select option:checked {
    color: white; /* Keep the selected text white */
}

@media (max-width: 767px) {
    #footer .row .col-md-6 {
        margin-bottom: 20px;
    }
}


/* Banner */

#banner form .form-group input::placeholder
{
    font-style: var(--alt-font) !important;
    font-size: 11px;
}

#banner form .form-group span {
    display: block; /* Ensure span remains on a new line */
    margin-bottom: -5px; /* Reduce the space between the label and input */
}

#banner form .form-group input {
    margin-top: 0; /* Remove any default margin applied to the input */
}

/* Container for the background image */
#banner .swiper-slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0; /* Ensure the image stays behind the overlay */
}

/* Transparent black overlay */
#banner .overlay-black-transparent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Transparent black */
    z-index: 1; /* Ensure the overlay is on top of the image, but behind text */
}

/* Ensure that the content is above the overlay and image */
#banner .swiper-slide .container {
    position: relative;
    z-index: 2; /* This keeps the content above both the background image and the overlay */
}

#banner .underline-heading {
    position: relative;
    display: inline-block;
}

#banner .underline-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30%;
    height: 1px; /* You can adjust the thickness of the underline */
    background-color: #fff; /* Color of the underline */
}

/* Add a max-width to the form container to prevent it from stretching too wide */
#banner .contact-form-style-03 {
    max-width: 600px; /* Adjust this value based on your design */
}

/* Field background */

#banner form .form-control {
    background:  rgba(0, 0, 0, 0.4);
    border: none; 
    border-radius: 4px; 
    padding: 10px; 
    width: 100%; 
    font-size: 14px;
}

#banner form select {
    font-size: 11px !important;
}

#banner form select option 
{
    font-size: 11px !important;
    color: white; 
    background-color: var(--darkest-gray);
}

#banner form select:focus, 
#banner form select:active, 
#banner form select option:checked {
    color: white; /* Keep the selected text white */
}

@media (max-width: 768px) {
    #banner .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%; /* Ensure the container fills the available height */
    }
    #banner .row {
        align-items: center; /* Center the content within the row */
        margin-top: 0; /* Remove top margin */
    }
    #banner .col-lg-6 {
        margin-top: 0; /* Remove custom margin for the column */
    }
    #banner .mobile-section {
        margin: 0 auto; /* Center the mobile section */
    }
}


/* Ensure the form container has proper padding and margin on smaller screens */
@media (max-width: 1200px) {
    #banner .contact-form-style-03 {
        margin: 0 20px; /* Adds padding to prevent the form from touching the edges */
    }
}

/* Ensure the form is responsive on mobile and smaller desktops */
@media (max-width: 992px) {
    #banner .contact-form-style-03 {
        margin-top: 0; /* Remove margin on smaller screens */
    }
}

/* Nav */

/* Button styles when navbar is sticky */
.sticky-nav .header-button .btn {
    background-color: var(--cream-color) !important;
    color: white;  /* Change to your desired text color */
}

html {
    scroll-behavior: smooth;
}

/* Carousel */

#carousel .list-item {
    display: flex;
    align-items: flex-start; /* Aligns icon to the start of multi-line text */
    color: rgba(255, 255, 255, 0.6);
    padding-left: 10px; /* Adjust as needed */
}

#carousel .icon {
    margin-right: 8px; /* Adds space between the icon and the text */
    display: flex;
    align-items: flex-start; /* Ensures icon is aligned to the top */
}

#carousel .list-item i {
    padding-top: 5px;
    vertical-align: top; /* Aligns icon to the top of the text */
}

/* Tab */

#tab .list-item {
    display: flex;
    align-items: flex-start; /* Aligns bullet to the start of multi-line text */
    margin-bottom: 8px; /* Optional: adds space between list items */
}

#tab .bullet {
    margin-right: 8px; /* Space between bullet and text */
    line-height: 22px; /* Matches line-height of text */
    font-size: 16px; /* Adjust size if needed */
    flex-shrink: 0; /* Prevents bullet from shrinking */
}

#tab .lh-22 {
    line-height: 22px;
}

/* Hover Effect for Investment Section */
#investment .testimonials-box {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* On Hover: Change background to black and text to white */
#investment .col-lg-6:hover .testimonials-box {
    background-color: var(--darkest-gray) !important;
    color: white;
}

#investment .col-lg-6:hover .testimonials-box .testimonials-box-content .fs-16,
#investment .col-lg-6:hover .testimonials-box .testimonials-box-content p {
    color: white; /* Ensure all text inside the testimonials box changes color */
}

#investment .col-lg-6:hover .cover-background {
    opacity: 0.7; /* Optional: Darken the image on hover */
}



/* Investors */

/* General styling for the button */
#investors .feature-box:hover .btn {
    background-color: var(--darkest-gray) !important; /* Set the background to black */
    color: white !important;           /* Set text color to white */
}

/* Optional transition for smooth effect */
#investors .feature-box:hover .btn {
    transition: all 0.3s ease-in-out; /* Add smooth transition effect */
}

/* Ensure consistent heights for paragraphs */
#investors .feature-box-content p {
    min-height: 50px; /* Adjust based on your design */
}

/* Spacing adjustments for dividers */
#investors .divider-style-03 {
    border-width: 1px;
    margin: 15px 0;
}

/* Alignment fixes */
#investors .feature-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#investors .number {
    position: relative;
}

#investors .col-xl-3, .col-md-4 {
    margin: 0 !important;  /* Remove any margin */
    padding: 0 !important; /* Remove any padding */
}

#investors .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;  /* Align items to the start */
}

/* location */

#location iframe {
    width: 100%; /* Make iframe take up full width */
    height: 620px; /* Make iframe take up full height of the column */
    border-radius: 10px; /* Optional: to match styling */
}

#banner .full-width-btn {
    width: 100%;
}

/* investment */
#investment {
    position: relative;
    overflow: hidden;
    clip-path: inset(0 0 0 0); /* Clips the overflowing content */
}


/* Investors */

#investors .vertical-text {
    writing-mode: vertical-rl; /* Rotate text vertically */
    transform: rotate(180deg); /* Flip direction */
    white-space: nowrap; /* Prevent wrapping */
}

@media (max-width: 768px) { /* Mobile view */
    #investors .vertical-text {
        padding-top: 50px;
        writing-mode: horizontal-tb; /* Default horizontal text */
        transform: rotate(0deg); /* Remove rotation */
        
    }
   
}


#investors h2 {
    font-size: 100px;
}


  /*  Media query to display mobile section */
  @media screen and (max-width: 767px) {
    #investors .desktop-section {
        display: none; /* Hide desktop section on mobile */
    }
  
    #investors .mobile-section {
        display: block; /* Display mobile section */
    }
    #investors h2 {
        font-size: 70px;
    }
  }
  /* Ensure the text is centered on mobile */
@media (max-width: 768px) {
    .mobile-section .mobile-text-center {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .mobile-section h2 {
        margin: 0; /* Adjust as needed */
    }
}



/* Media query to handle mobile view */
@media (max-width: 767px) {
    .desktop-section {
        display: none;
    }
    .mobile-section {
        display: block;
    }
}

/* Mobile CTA Buttons */

.button-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    z-index: 1000;
}

.cta-button {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    color: white;
    transition: background-color 0.3s ease;
}

.enquire {
    background-color: var(--base-color); 
}

.call {
    background-color: var(--dark-gray); 
}

.enquire:active,
.call:active {
    color: white; 
}
/* Default style: hide the section */
.mobile-section {
    display: none; /* Hide by default */
}

/* Media query for mobile devices: display the section */
@media screen and (max-width: 767px) {
    .mobile-section {
        display: flex; /* Display on mobile */
    }
}

/* Contact form Pop-up */

#subscribe-popup form select {
    font-size: 11px !important;
}

#subscribe-popup form select option 
{
    font-size: 11px !important;
    color: white;
    background-color: var(--darkest-gray);
}

#subscribe-popup form select:focus, 
#subscribe-popup form select:active, 
#subscribe-popup form select option:checked {
    color:var(--dark-gray); /* Keep the selected text white */
}
/* table */

#table-m .row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#table-m .feature-box {
    flex: 1;
}

#table-m .swiper {
    flex: 1;
    max-width: 100%;
}

/* Investors */

@media (max-width: 767px) {
    #investors .desktop {
        visibility: hidden;
    }
}

.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    left: 40px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}
.my-float {
    margin-top: 16px;
}
@media only screen and (max-width: 600px) {
    .float {
        bottom: 70px;
    }
}

#country_code {
    width: 80px !important;  
}

#country_code2 {
    width: 80px !important; 
}

.country-code-select {
    max-width: 120px !important;
    appearance: none; 
    background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center ;
    background-size: 15px;
    padding-right: 30px; 
    cursor: pointer;
}

.country-code-select1 {
    max-width: 120px !important;
    appearance: none;
    background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
    background-size: 15px;
    padding-right: 30px;
    cursor: pointer;
}


.country-code-select2 {
    appearance: none;
    background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
    background-size: 15px;
    padding-right: 30px;
    cursor: pointer;
}


#counter .counter-style-01 .feature-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    text-align: center;
}

#counter .counter-style-01 .feature-box-content {
    min-height: 48px; /* Adjust based on tallest expected content */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5px;
}

/* Add this custom CSS */
#counter .counter-style-01 .col {
    min-width: 150px; /* Set a minimum width for each column */
    padding: 0 10px; /* Add some horizontal padding */
    text-align: center; /* Center align content */
}

#counter .feature-box-content p.head {
    white-space: normal; /* Allow text to wrap */
    word-break: break-word; /* Break long words if needed */
    line-height: 1.3 !important; /* Slightly increase line height */
}


#banner-slider .swiper-container {
    width: 100%;
    overflow: hidden; /* Prevent content from overflowing */
    margin: 0 auto;
    position: relative;
    box-sizing: border-box; /* Includes padding in width */
}

#banner-slider .swiper-slide {
    width: 100%; /* Each slide takes full width */
    display: flex;
    justify-content: center;
    align-items: center
}

#banner-slider .desktop-section {
    display: none;
}

#banner-slider .mobile-section {
    display: block;
}

@media (min-width: 768px) {
    #banner-slider .desktop-section {
        display: block;
    }

    #banner-slider .mobile-section {
        display: none;
    }
}

#banner-slider .swiper-button-next,
#banner-slider .swiper-button-prev {
  color: #ffffff !important; /* Make sure arrow is visible */
  display: block;
  z-index: 10;
}


/* Retail and Office */

#configuration-sec.container {
    padding: 0
}

#configuration-sec table {
    width: 100%;
    border-collapse: collapse
}

#configuration-sec td,
#configuration-sec th {
    border: 1px solid var(--medium-gray);
    padding: 10px;
    text-align: center
}

#configuration-sec th {
    background-color: var(--base-color);
    font-weight: 700;
    color: var(--white)
}

#configuration-sec td {
    background-color: var(--very-light-cream)
}

#configuration-sec .btn {
    margin: 0 auto;
    display: inline-block
}

#configuration-mobile .container {
    padding: 0
}

#configuration-mobile table {
    width: 100%;
    border-collapse: collapse
}

#configuration-mobile td,
#configuration-mobile th {
    border: 1px solid var(--medium-gray) !important;
    padding: 10px;
    text-align: center
}

#configuration-mobile-mobile th {
    background-color: #f4f4f4;
    font-weight: 700
}

#configuration-mobile td {
    background-color: var(--very-light-cream)
}

#configuration-mobile .btn {
    margin: 0 auto;
    display: inline-block
}

.scroll-message {
    text-align: center;
    margin-top: 15px
}

.scroll-message p {
    font-size: 14px;
    color: #555
}

.scroll-message i {
    margin-left: 5px;
    color: #555
}

#configuration-mobile {
    display: none
}

@media (max-width:767px) {
    #configuration-sec {
        display: none
    }
    #configuration-mobile {
        display: block
    }
}