/*@import url(../css/clash-display.css);*/
@import url(animate.css);

:root {

    /*COLORS.  2A2B26*/
    --c-body: #3D3F41;
    --c-dark: #1E1F22;
    --c-brand: #ED2156;
    --c-brand-grn: #FEE000;
    --c-brand-dark: #141213;
    --c-brand-light: #ffffff;
    --c-brand-rgb: 237, 33, 86; /*rgb(237, 33, 86)Check where its used*/
    --c-bg-dark-1: #141213;
    --c-bg-dark-2: #2A2B26;
    --c-bg-dark-3: #ECEEF4;
    /*--btn-brand-grad: linear-gradient(to right, #9cfe4e 6%, #ff7f00 50%); !* Example gradient from orange to green *!*/
    --txt-grad-1: linear-gradient(90deg, #FEE000, #ED2156);
    --txt-grad-2: linear-gradient(90deg, #FEE000, #FFFFFF);
    --hero-soft-spot-gradient: radial-gradient(circle at left, rgba(254, 224, 0, 0.8) 0%, rgba(156, 254, 78, 0) 60%);

    /*FONTS*/
    --font-base: "Clash Display", sans-serif;
    --font-hero: "bebas-neue-pro", sans-serif;

    /*SHADOWS*/
    --c-font-shadow: 0px 15px 24px rgba(0, 0, 0, 0.25);
    --s-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

    /*FX*/
    --transition: all 0.5s ease;
}

/* Enable smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base), sans-serif;
    line-height: 1.5;
    color: var(--c-body);
}

h1 h2 h3 h4 h5 h6,
.h1 .h2 .h2 .h3 .h4 .h5 .h6 {
    font-family: var(--font-base), serif;
    font-weight: 700;
    color: var(--c-dark);
}

.hero-title h1 {
    /*border: solid 3px dodgerblue;*/
    font-size: 60px;
    font-weight: 300;
    color: var(--c-brand-light);
    text-transform: uppercase;
    margin-bottom: 16px;
    line-height: 1.2;
}

.hero-title h3 {
    /*border: solid 3px mediumpurple;*/
    font-size: 60px;
    font-weight: 300;
    color: var(--c-brand-light);
    text-transform: uppercase;
    margin-bottom: 16px;
    line-height: 1.2;
}

/*LINKS*/
a {
    text-decoration: none;
    color: var(--c-brand);
    transition: var(--transition);
}

a:hover {
    color: var(--c-brand-light);
}

/*TOP NAVIGATION LOGO*/
img {
    max-width: 100%;
    height: 40px;
}

/*SECTION PADDINGS*/
.section-padding {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
}

.section-padding-top {
    padding-top: 150px !important;
}

.section-padding-btm {
    padding-bottom: 150px !important;
}

/*NAVIGATION*/
.navbar {
    box-shadow: var(--c-font-shadow);
}

.navbar-nav .nav-link {
    /*padding: 0 1rem;*/
    /*font-size: 1.2rem;*/
    font-weight: 500;
    color: var(--c-brand);
    transition: var(--transition);
}

.navbar-nav .nav-link.active {
    color: var(--c-brand-grn);
}

.navbar-nav .nav-link:hover {
    color: var(--c-brand-dark); /* Replace with hover color */
}

/*BUTTONS*/
.buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 3px;
    margin-bottom: 3px;
    border-style: none;
    border-width: 1px;
    padding-top: 16px;
    /*border-color: var(--c-brand-light);*/
}

.btn {
    padding: 10px 50px;
    font-size: 16px;
    font-weight: 500;
    border: 0;
    /*border-color: var(--c-dark);*/
    border-radius: 9px;
    transition: var(--transition);
    text-transform: uppercase;
    /* Additional styling for the button can go here */
    /* Ensure button fits within parent */
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

/*BUTTON BRAND*/
.btn-brand {
    /* Define background and text color */
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand);
    background-blend-mode: overlay;
    color: var(--c-brand-light);

    /* Initially, make the border invisible */
    border: 1px solid transparent;
}

.btn-brand:hover {
    /* Change border color on hover to make it visible */
    border-color: var(--c-brand);
    /* Optionally, adjust other button styles like color */
    background-color: var(--c-brand-light);
    color: var(--c-dark);
    background-blend-mode: overlay;
}

/*BUTTON WRAPPERS*/
.btn-wrapper {
    /*border: 3px solid dodgerblue;*/
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center the button horizontally */
    align-items: center; /* Center the button vertically */
    width: 100%; /* Ensure it utilizes available width */
    height: 60px; /* Define a height that fits the button */
    overflow: hidden; /* Prevent overflow if the button exceeds size */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    position: relative; /* In case further positioning needed */
    /* Optionally set a fixed width */
    /* width: 200px; */
}

.btn-wrapper-contact {
    /*border: 3px solid dodgerblue;*/
    display: flex; /* Enable flexbox */
    justify-content: right; /* Center the button horizontally */
    align-items: center; /* Center the button vertically */
    width: 100%; /* Ensure it utilizes available width */
    height: 60px; /* Define a height that fits the button */
    overflow: hidden; /* Prevent overflow if the button exceeds size */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    position: relative; /* In case further positioning needed */
    /* Optionally set a fixed width */
    /* width: 200px; */
}

.btn-wrapper-contact-calendly {
    /*border: 3px solid dodgerblue;*/
    display: flex; /* Enable flexbox */
    justify-content: left; /* Center the button horizontally */
    align-items: center; /* Center the button vertically */
    width: 100%; /* Ensure it utilizes available width */
    height: 60px; /* Define a height that fits the button */
    overflow: hidden; /* Prevent overflow if the button exceeds size */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    position: relative; /* In case further positioning needed */
    /* Optionally set a fixed width */
    /* width: 200px; */
}

/*CONTACT FORM WITH CALENDLY*/
.buttons-frame {
    /*border: 1px solid yellowgreen;*/
    width: 100%; /* Stay within the parent container */
    height: auto; /* Adapt height based on child content */
    display: flex; /* Make the container a flexbox */
    justify-content: space-between; /* Spread buttons side by side */
    align-items: center; /* Vertically center content if needed */
    box-sizing: border-box; /* Ensure borders/padding are included in sizing */
    overflow: hidden; /* Prevent any overflow issues */
}

.buttons-wrapper {
    /*border: 1px solid mediumvioletred;*/
    height: auto;
    width: 50%; /* Ensure each wrapper takes up half the available space */
    box-sizing: border-box; /* Include border in the wrapper size */
}

/*BUTTONS*/
.btn-light {
    /* Define background and text color */
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand);
    background-blend-mode: overlay;
    color: var(--c-brand-light);

    /* Initially, make the border invisible */
    border: 1px solid transparent;
}

.btn-light:hover {
    /* Change border color on hover to make it visible */
    border-color: var(--c-brand);
    /* Optionally, adjust other button styles like color */
    background-color: var(--c-brand-light);
    color: var(--c-dark);
    background-blend-mode: overlay;
}

/*SECTIONS IDs* BG BASIC STYLES/
/* BASE STYLES HERO */
#hero {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh; /* Adjust based on your content */
    /*background: linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)), url(../images/carl-cup-space.jpg) no-repeat center;*/
    /*background: var(--bg-brand-grad);*/
    /*border: solid 3px red;*/
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand); /* Existing background color or image */
    background-blend-mode: overlay;
}

/*SECTION BG DESCRIPTION BELOW HERO*/
#description {
    background-color: var(--c-brand-light);
    padding: 0;
}

#machine {
    background-size: cover;
    /*background-color: var(--c-brand);*/
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand); /* Existing background color or image */
    background-blend-mode: overlay;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
}

#get {
    background-size: cover;
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand-light); /* existing color */
    background-blend-mode: overlay;
    height: 100%; /* Full container height */
    width: 100%;
    position: relative; /* Needed for child positioning */
    z-index: 1; /* Ensure #industry's stacking context */
    overflow: hidden; /* Ensure any overflowing elements are clipped */

}

#industry {
    background-size: cover;
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand); /* existing color */
    background-blend-mode: overlay;
    height: 100%; /* Full container height */
    width: 100%;
    position: relative; /* Needed for child positioning */
    z-index: 1; /* Ensure #industry's stacking context */
    overflow: hidden; /* Ensure any overflowing elements are clipped */
}

#ui {
    background-size: cover;
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand-light); /* existing color */
    background-blend-mode: overlay;
    height: 100%; /* Full container height */
    width: 100%;
    position: relative; /* Needed for child positioning */
    z-index: 1; /* Ensure #industry's stacking context */
    overflow: hidden; /* Ensure any overflowing elements are clipped */
}

#direct-mail {
    background-size: cover;
    /*background-color: var(--c-brand);*/
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-bg-dark-3); /* Existing background color or image */
    background-blend-mode: overlay;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
}

#pricing {
    background-size: cover;
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand-dark); /* existing color */
    background-blend-mode: overlay;
    height: 100%; /* Full container height */
    width: 100%;
    position: relative; /* Needed for child positioning */
    z-index: 1; /* Ensure #industry's stacking context */
    overflow: hidden; /* Ensure any overflowing elements are clipped */
}

/*SECTION BG COLOR */
#distribution {
    background-size: cover;
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand-light); /* existing color */
    background-blend-mode: overlay;
    height: 100%; /* Full container height */
    width: 100%;
    position: relative; /* Needed for child positioning */
    z-index: 1; /* Ensure #industry's stacking context */
    overflow: hidden; /* Ensure any overflowing elements are clipped */
}

#contact {
    /*border: 1px solid dodgerblue;*/
    background-size: cover;
    /*background-color: var(--c-brand);*/
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand); /* Existing background color or image */
    background-blend-mode: overlay;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
}

#faq {
    background-size: cover;
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand-light); /* existing color */
    background-blend-mode: overlay;
    height: 100%; /* Full container height */
    width: 100%;
    position: relative; /* Needed for child positioning */
    z-index: 1; /* Ensure #industry's stacking context */
    overflow: hidden; /* Ensure any overflowing elements are clipped */
}

footer {
    background-size: cover;
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.1), rgba(0, 0, 0, 1.0)),
    var(--c-brand-dark); /* existing color */
    background-blend-mode: overlay;
    height: 100%; /* Full container height */
    width: 100%;
    position: relative; /* Needed for child positioning */
    z-index: 1; /* Ensure #industry's stacking context */
    overflow: hidden; /* Ensure any overflowing elements are clipped */
    color: var(--c-brand-light);
    padding-top: 0;
}
/*HIGHLIGHTED WORDS OF HERO SECTION*/
.highlight-text {
    color: var(--c-brand-grn);
    font-style: normal;
}

/*TEXT BLOCKS FRO SECTIONS*/
/*TEXT BLOCK 3 -- PRICING -- SECTION*/
.section-text-block-3 {
    flex: 1; /* Allow to take up available space */
    max-width: 100%; /* Adjust based on desired size */
    margin-right: 20px; /* Spacing between blocks */
    box-sizing: border-box;
}

.section-text-block-3 h1 {
    color: var(--c-brand);
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.2;
}

.section-text-block-3 h5 {
    margin: 0; /* Removes default margin for compact layout */
    font-weight: normal; /* Optional: adjust text weight */
    color: var(--c-brand-light);
}

/*TEXT BLOCK 2-- DESCRIPTION, GET, INDUSTRY, UI, DIRECT, DISTRIBUTION, CONTACT , FAQ -- SECTIONS */
.section-text-block-2 {
    flex: 1; /* Allow to take up available space */
    max-width: 100%; /* Adjust based on desired size */
    /*margin-right: 20px; !* Spacing between blocks *!*/
    box-sizing: border-box;
}


/*TEXT BLOCK 2 -- INDUSTRIES SECTION*/
.section-text-block-2 ul {
    list-style-type: none; /* Removes bullet points */
    padding-left: 0; /* Remove default padding */
    margin: 0; /* Optional: Align with surrounding content */
}

.section-text-block-2 ul h5 {
    color: var(--c-brand-light);
}

/*ICONS OF LS ON THE INDUSTRIES SECTION*/
.section-text-block-2 ul i {
    font-size: 60px;
    color: var(--c-brand-light);

}

/*LIST WITH ICON ON SIDE ON MACHINE SECTION*/
.section-text-block-2 li {
    display: flex; /* Enables flexbox for the list items */
    align-items: center; /* Vertically centers items */
}

.section-text-block-2 h1 {
    color: var(--c-brand);
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.2;
}

/*TEXT BLOCK UNDER CONSTRUCTION PAGE*/
.section-text-block-construction {
    flex: 1; /* Allow to take up available space */
    max-width: 60%; /* Adjust based on desired size */
    /*margin-right: 20px; !* Spacing between blocks *!*/
    margin: 0 auto;
    box-sizing: border-box;

}

/*MAHINE SECTION*/
.section-text-block {
    flex: 1; /* Allow to take up available space */
    max-width: 60%; /* Adjust based on desired size */
    margin-right: 20px; /* Spacing between blocks */
    box-sizing: border-box;
}

/*LIST WITH ICON ON SIDE ONMACHINE SECTION*/
.section-text-block li {
    display: flex; /* Enables flexbox for the list items */
    align-items: center; /* Vertically centers items */
}

.section-text-block i {
    margin-right: 10px; /* Adds spacing between icon and text */
}

/* Optional: Additional styling for better presentation */
.section-text-block h5 {
    margin: 0; /* Removes default margin for compact layout */
    font-weight: normal; /* Optional: adjust text weight */
}

.section-text-block h1 {
    color: var(--c-brand);
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.2;
}

/*POSITIONING MACHINE ON RIGHT SIDE OF COL 12*/
.section-text-block ul {
    list-style-type: none; /* Removes bullet points */
    padding-left: 0; /* Remove default padding */
    margin: 0; /* Optional: Align with surrounding content */
}

/*ICONS OF LS ON THE MACHINE SECTION */
.io-icon-wrap i {
    border: 1px solid transparent;
    font-size: 24px;
    color: var(--c-brand-light);
    border-radius: 50%;
    background: var(--c-brand);
    box-shadow: var(--s-box-shadow);
}

.section-text-block h1 i {
    font-size: 36px;
}

ul.io-icon-wrap {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove extra padding */
    margin: 0; /* Remove extra margin */
}

ul.io-icon-wrap li {
    display: flex; /* Align the icon and text horizontally */
    align-items: center; /* Vertically center align the items */
    margin: 0; /* Remove any default margin from the `<li>` */
    padding: 0; /* Remove any padding from the `<li>` */
}

ul.io-icon-wrap li i {
    line-height: 1; /* Set line height to avoid extra space */
    margin: 0; /* Remove any extra margins */
    padding: 3px; /* Remove padding */
    display: inline-block; /* Ensure predictable rendering */
}

ul.io-icon-wrap li h5 {
    margin: 0; /* Remove default margin */
    /* Remove default padding */
    /* Add spacing between the icon and the text */
    padding: 0 0 0 0.5rem;
    font-size: 21px; /* Adjust text size as needed */
    line-height: 1.2; /* Adjust line height for better text layout */
}

.content-wrap {
    border: 1px solid transparent;
    border-radius: 15px;
    background-color: var(--c-brand-light);
    display: flex; /* Enables flexbox layout */
    justify-content: flex-start; /* Align items at the start on horizontal */
    align-items: center; /* Vertically center items within the container */
    /*height: 100vh; !* Full viewport height to allow centering *!*/
    padding: 40px; /* Add padding if necessary */
    box-sizing: border-box; /* Include padding within total dimensions */
    box-shadow: var(--s-box-shadow);
}

.machine-box {
    flex: 0 0 auto; /* Prevents growing/shrinking, keeps width */
    max-width: 100%; /* Adjust width to fit design */
    box-sizing: border-box;
}

/*LINES*/
.line-frame-start {
    /*border: 1px solid #FF0000;*/
    display: flex;
    justify-content: flex-start;
    padding: 0;

}

.line-frame-end {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    /*border: 1px solid #FF0000;*/
}

.line-prices {
    width: 100%;
    height: 3px;
    background-color: var(--c-brand);
    margin: 16px auto 24px auto;
}

.line-get {
    width: 100%;
    height: 3px;
    background-color: var(--c-brand);
    margin: 16px auto 24px auto;
}

.line-footer-logo {
    width: 120px;
    height: 3px;
    background-color: var(--c-brand);
    margin: 9px 0 9px 0;
}

.ft-line-footer {
    width: 120px;
    height: 3px;
    background-color: var(--c-brand);
    margin: 16px 0 24px 10px;
}

/*WRAPPERS FOOTER*/
.ft-content-box {
    display: flex;
    float: left;
    justify-content: flex-end; /* Aligns items to the right */
    /* Optionally, use space-between/space-around for different distributions */
    flex-wrap: wrap; /* Ensures items wrap if necessary */
    gap: 16px; /* Optional: adds space between items */
    text-align: right;
    /*border: 1px solid #fd7e14;*/
}

.ft-content-box .ft-content-box-wrapper {
    /* Ensure these items are flex items */
    flex: 1 1 auto;
    /* Widths already defined by the Classes or adjust as needed */
}

.footer-content-wrapper {
    display: flex;
    justify-content: flex-end; /* Aligns all child flex items to the end of the row */
    flex-wrap: wrap; /* Ensures items wrap to the next line if necessary */
    gap: 16px; /* Optional: add spacing between flex items */
}

.ft-content-box-wrapper {
    flex: 0 0 auto; /* Prevent the column from stretching, maintains its size */
    width: auto; /* Ensure the column retains its default behavior */
}

/* SECTION FOOTER */
.footer-top {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-top .ft-logo {
    margin-bottom: 0;
    height: 40px;
    width: auto;
}

.ft-content-box {
    flex: 1; /* Allow the ft-content-box to take the remaining space */
    max-width: 75%; /* Optional: to prevent it from becoming too large */
    align-self: flex-end; /* Align this specific item to the end of the flex container */
}

.footer-bottom {
    background-color: var(--c-dark);
    color: var(--c-brand-light);
}

.footer-bottom p {
    color: var(--c-brand-light);
    font-size: 9px;
    font-weight: 100;
    margin-bottom: 0;
}

footer li,
footer a,
footer p {
    /*list-style: none;*/
    /*margin-bottom: 10px;*/
    /*font-size: 14px;*/
    /*font-weight: 300;*/
    color: var(--c-brand-light);
    transition: var(--transition);
}

footer li:hover,
footer a:hover,
footer p:hover {
    color: var(--c-brand);
    transition: var(--transition);
    font-size: 14px;
    font-weight: 300;
    text-decoration: none;
}

footer ul {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 90;
    color: var(--c-brand-light);
    transition: var(--transition);
}

/* END OF SECTION FOOTER*/


/*SECTION DISRIBUTION */
#distribution h2 {
    color: var(--c-brand-dark);
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 1px;
    transition: var(--transition);
}

/* ACCORDION */
.accordion-header {
    /*background-color: var(--c-brand-dark);*/
    color: var(--c-brand-light);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
}

#faq .accordion-header .accordion-button {
    font-size: 21px;
    font-family: var(--font-base), serif;
    font-weight: 500;
}

.accordion-button:not(.collapsed) {
    background-color: var(--c-brand) /* your desired color */;
    color: var(--c-brand-light) /* text color if needed */;
}

/*ICONS MACHINE INPUT and OUTPUT*/
.frame-in-out-machine {
    position: relative;
    width: 120px;
    height: auto; /* Adjust the height to accommodate <h5> and icon box */
    overflow: hidden;
    margin: 0;
    padding: 10px;
    background-color: var(--c-brand-light);
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally */
    justify-content: flex-start; /* Align children at the start of the container */
}

.service-icon-box-machine {
    position: relative;
    /*border: var(--c-brand) 1px solid;*/
    width: 100%;
    height: 40px; /* Reduce the height for visual alignment */
    color: var(--c-brand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--c-brand-rgb), 0.1);
    border-radius: 3px;
    box-shadow: var(--s-box-shadow);
    transition: var(--transition);
    font-size: 40px;
    flex: none;
}

/* TITLE OF MACHINE ICONS INOUT AND OUTPUT */
.title-machine {
    /*border: deeppink 1px solid;*/
    margin: 0; /* Remove default margin */
    padding: 5px; /* Adjust padding if needed */
    /*background-color: blue; !* Optional *!*/
    z-index: 1; /* Ensures it is positioned correctly in the stacking context */
    text-transform: uppercase;
}

/* ICONS COLOR OF MACHINE INOUT AND OUTPUT */
.ri-money-euro-box-line, .ri-group-3-line {
    color: var(--c-brand);
}

/*ICON PRICE PLAN*/
.ri-star-line {
    font-size: 40px;
    color: var(--c-brand);
    margin: 0;
    padding: 0;
}

.ri-star-line:hover {
    color: var(--c-brand-dark);
}

/*ICON PRICE PLAN*/
.ri-sparkling-line {
    font-size: 40px;
    color: var(--c-brand);
    margin: 0;
    padding: 0;
}

.ri-sparkling-line:hover {
    color: var(--c-brand-dark);
}

/*ICON PRICE PLAN*/
.ri-shield-star-line {
    font-size: 40px;
    color: var(--c-brand);
    margin: 0;
    padding: 0;
}

.ri-shield-star-line:hover {
    color: var(--c-brand-dark);
}

/*MACHINE BOX INPUT OUTPUT*/
.machine-box {
    display: flex;
    justify-content: center; /* Center all children within the machine-box */
    align-items: center; /* Align items vertically in the center */
    width: 600px; /* Full width or match your layout */
    height: auto; /* Adjust height based on your content */
    box-sizing: border-box; /* Include padding and border in element’s total width and height */
    padding: 30px;
    border-radius: 15px;
    background-color: var(--c-brand);
    box-shadow: var(--s-box-shadow);
    /*border: solid 3px deeppink;*/
}

/*PRICING TABLES*/
/*.pricing-table {*/
/* Default styles for larger screens */
.pricing-table {
    display: flex; /* Flexbox for horizontal alignment */
    justify-content: space-between; /* Space evenly between plans */
    flex-wrap: wrap; /* Allow wrapping if needed for very small screens */
    margin: 0 auto; /* Center the layout */
    max-width: 1000px; /* Limit max width */
    gap: 20px; /* Add spacing between plans */
    padding: 0;
}

.plan {
    border: 1px solid #ccc; /* Add border */
    border-radius: 8px; /* Rounded corners */
    width: 30%; /* Each plan takes up 30% of container width */
    background-color: var(--c-brand-light); /* Background color */
    padding: 20px; /* Add spacing inside plans */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    box-sizing: border-box; /* Include padding in width */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
}

.plan.popular {
    border: 1px solid var(--c-brand); /* Highlighted border for popular plan */
    background: linear-gradient(rgba(var(--c-brand-rgb), 0.2), rgba(var(--c-brand-dark), 0.9));
    transform: scale(1.05); /* Slightly larger for emphasis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: var(--c-brand-light);
}

.plan:hover {
    transform: scale(1.03); /* Scale on hover to catch attention */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
}

.title {
    font-size: 1.5em; /* Larger font size for titles */
    margin-bottom: 10px; /* Space between title and description */
    color: var(--c-brand);
    font-weight: 700;
}

.description {
    font-size: 1em; /* Standard font size for description */
    margin-bottom: 15px; /* Space between description and features */
    color: var(--c-brand-dark); /* Slightly subdued text color */
}

.description-light {
    font-size: 1em; /* Standard font size for description */
    margin-bottom: 15px; /* Space between description and features */
    color: var(--c-brand-light); /* Slightly subdued text color */
}

.features {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
}

.features li {
    margin-bottom: 10px; /* Space between feature items */
    padding-left: 20px; /* Padding for text alignment */
    position: relative; /* For pseudo-element */
}

.features li::before {
    content: '✔'; /* Add check mark before each feature */
    position: absolute; /* Position relative to each li */
    left: 0; /* Align to the left */
    color: var(--c-brand); /* Color for check mark */
}

.pricing-table-wrapper { /*FOR FULL SIZE SCREEN*/
    /*border: 3px solid dodgerblue;*/
    padding: 30px;
}

#pricing i {
    color: var(--c-brand);
    font-size: 18px;
    align-items: center;
}

.price {
    /*border: 3px solid dodgerblue;*/
    .currency {
        font-size: 1.5em;
        font-weight: 700;
        color: var(--c-brand);
    }

    .amount {
        font-size: 2.5em;
        font-weight: 700;
        color: var(--c-brand);

    }

    .period {
        font-size: 1.5em;
    }
}

.sub-description {
    font-size: 0.8em;
    color: var(--c-brand-dark);
    margin-bottom: 0;
}

/*COLOR GRADIENT TEXT*/
.grad-text {
    background: var(--txt-grad-1); /* Apply the gradient */
    -webkit-background-clip: text; /* For Safari/Chrome */
    -webkit-text-fill-color: transparent; /* For Safari/Chrome */
    background-clip: text; /* Standard property */
    color: transparent; /* Ensures text color doesn't interfere */
    font-style: normal;
}

.grad-text-2 {
    background: var(--txt-grad-2); /* Apply the gradient */
    -webkit-background-clip: text; /* For Safari/Chrome */
    -webkit-text-fill-color: transparent; /* For Safari/Chrome */
    background-clip: text; /* Standard property */
    color: transparent; /* Ensures text color doesn't interfere */
    font-style: normal;
}

#hero .container {
    position: relative; /* Establishes a positioning context for contained elements */
}

.awesome-word {
    font-family: "bebas-neue-pro", sans-serif; /* Use the specified Adobe Font */
    position: absolute; /* Allows for fine control of its position within the container */
    bottom: 0; /* Ensures it is aligned with the bottom */
    font-weight: 700;
    font-style: normal;
    right: 0; /* Ensures it is aligned with the left */
    max-width: 100%; /* Constrains width to prevent overflow */
    max-height: 100%; /* Constrains height to prevent overflow */
    box-sizing: border-box; /* Includes padding and border in element's total width and height */
    /* Add any additional styling as needed */
    font-size: 6.5em;
    color: var(--c-brand-grn);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}

/*GET BOXES*/
.get-box {
    /*border: 3px solid dodgerblue;*/
    border-radius: 15px;
    width: 50%;
    height: auto;
    position: relative; /* Required for absolute positioning, if considered in another scenario */
    text-align: center; /* Ensure text alignment is centered horizontally */
    padding: 0.5em 2.5em;
    box-shadow: var(--s-box-shadow);
}

.title-get {
    font-size: 1.5em; /* Larger font size for titles */
    margin-bottom: 10px; /* Space between title and description */
    color: var(--c-brand);
    font-weight: 700;
}

.description-get {
    font-size: 1em; /* Standard font size for description */
    margin-bottom: 15px; /* Space between description and features */
    color: var(--c-brand-dark); /* Slightly subdued text color */
}

.icon-get-frame {
    /*border: 3px solid dodgerblue;*/
    border-radius: 50%;
    /*background-color: lightgray; !* Optional: Set a background color *!*/
    text-align: center; /* Centers the text horizontally */
    margin: 10px; /* Adjust as needed */
    display: inline-block; /* Ensures it's treated as a block-like element */
    /*width: auto;*/
    /*height: auto;*/
    line-height: 1; /* Adjust to preserve circle through vertical centering */
    padding: 0.3em; /* Adjust as needed, depends on desired spacing around the icon */
    font-size: 2em; /* Example font size, adjust as needed */
    color: var(--c-brand-light);
}
.check-out-landing h5 {
    font-size: 1.5em;
    font-weight: 300;
}

/*INDUSTRY LIST STYLES*/
.industry-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-start; /* Aligns the list items to the left */
}

.industry-list li {
    display: flex;
    align-items: center; /* Vertically centers the children within each list item */
    flex: 1 1 30%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    justify-content: flex-start; /* Aligns items to the left */
}

.industry-list li i {
    /*border: 3px solid green;*/
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    padding: 0;
    line-height: 1;
    margin: 0;
}

.industry-list li h5 {
    margin: 0;
    padding-left: 3px; /* Adjust left padding to separate text from icon */
    display: flex;
    align-items: center; /* Ensures the text is vertically centered within its flex container */
}

/*PRICE TAB STYLES*/
.price-tab-style {
    font-size: 1.2rem; /* Adjust font size as needed */
    color: #333; /* Set text color */
    /*background-color: #f8f9fa; !* Background for tab *!*/
    border-bottom: 1px solid transparent; /* Border styling */
    margin-bottom: 40px;
}

.price-tab-style .nav-link {
    margin-right: 4px; /* Space between tabs */
    padding: 10px 30px; /* Padding for the tab items */
    border-radius: 5px; /* Rounded corners */
}

.price-tab-style .nav-link.active {
    background: /* Define background and text color */ var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand);
    background-blend-mode: overlay;
    color: var(--c-brand-light);

    /* Initially, make the border invisible */
    border: 1px solid transparent;
}

.nav-tabs .nav-link {
    color: var(--c-brand); /* Change text color to red */
}

.nav-tabs .nav-link:hover {
    color: var(--c-brand-light); /* Ensure hover/active text color is also red */
}

/*POPULAR TAG PRICELIST*/
.popular-tag-price-list {
    display: flex; /* Enables flexbox */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    border-radius: 3px;
    height: 30px;
    width: 100%;
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.5), rgba(0, 0, 0, 0.5)),
    var(--c-brand-grn);
    background-blend-mode: overlay;
    color: var(--c-brand-dark);
    border: 1px solid transparent; /* Initially, make the border invisible */
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0 10px;
    margin: 0;
    text-transform: uppercase;
}


/*TEXT DIRECT MAIL*/
.text-direct-mail h1 {
    font-size: 1.3em;
    font-weight: 600;
    font-family: var(--font-base), sans-serif;
    color: var(--c-brand);
}
.text-direct-mail-2 h1 {
    font-size: 1.3em;
    font-weight: 600;
    font-family: var(--font-base), sans-serif;
    color: var(--c-brand);
}

.text-direct-mail ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/*ENVELOP SECTION*/
.text-direct-mail {
    flex: 1; /* Allow this section to grow and take up remaining horizontal space */
    display: flex; /* Make this a flexbox container */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Vertically center the content */
    align-items: flex-start; /* Align text content to the left */
    padding: 0; /* No padding (reset to avoid interference) */
    margin: 0; /* Overriding Bootstrap margin if needed */
    /*border: 1px solid red; !* Debugging border for visibility *!*/
}
.text-direct-mail-2 {
    flex: 1; /* Allow this section to grow and take up remaining horizontal space */
    display: flex; /* Make this a flexbox container */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Vertically center the content */
    align-items: flex-start; /* Align text content to the left */
    padding: 0 0 0 15px; /* No padding (reset to avoid interference) */
    margin: 0; /* Overriding Bootstrap margin if needed */
    /*border: 1px solid red; !* Debugging border for visibility *!*/
}

.envelop-box-row {
    display: flex; /* Enable Flexbox for horizontal layout */
    align-items: center; /* Vertically center items inside the row */
    height: auto; /* Ensure the height expands based on content */
    /*gap: 15px; !* Add spacing between the two child elements *!*/
    /*border: 1px solid blueviolet; !* Debugging border for visibility *!*/
}

.envelop-box {
    height: 300px; /* Fix height */
    width: 300px; /* Fix width */
    flex-shrink: 0; /* Prevent shrinking */
    /*border: 1px solid blue; !* Debugging border for visibility *!*/
    margin: 0;
}

.envelop {
    height: 100%; /* Match the full height of the .envelop-box */
    width: 100%; /* Match the full width of the .envelop-box */
    background-image: url('../images/envelop.svg'); /* Use your SVG */
    background-size: contain; /* Keep original aspect ratio */
    background-repeat: no-repeat;
    background-position: center;
}

.list-direct-mail {
    list-style-type: none; /* Removes bullet points */
    padding: 0; /* No padding */
    margin: 0; /* No additional margin */
}


/*USER INTERFACE*/
.ui-art-1 {
    /*border: 1px solid green;*/
    height: 100%; /* Utilize full height of the envelop-box */
    width: 100%; /* Full width of the box */
    background-image: url('../images/uia-1.svg'); /* Path to your svg */
    background-size: contain; /* Maintain aspect ratio */
    background-repeat: no-repeat;
    background-position: center;
}

.ui-art-2 {
    /*border: 1px solid green;*/
    height: 100%; /* Utilize full height of the envelop-box */
    width: 100%; /* Full width of the box */
    background-image: url('../images/uia-2.svg'); /* Path to your svg */
    background-size: contain; /* Maintain aspect ratio */
    background-repeat: no-repeat;
    background-position: center;
}

.ui-art-box {
    /*border: 1px solid red;*/
    height: 480px; /* Set desired height */
    width: auto; /* Width of the icon box */
    margin-right: 10px; /* Adds space between the envelope and the list */
    display: flex;
    align-items: center; /* Center image vertically if needed */
    /*box-shadow: var(--s-box-shadow);*/
}

.ui-container {
    display: flex; /* Use flexbox for horizontal alignment */
    width: 100%; /* Full width of the container */
    height: 100%;
    margin: 10px 0;
    padding: 0;
}

.ui-container > div {
    flex: 1; /* Make both .ui-1 and .ui-2 equal in width */
    box-sizing: border-box; /* Include padding/border in element's total width */
    padding: 0; /* Optional: add padding if needed */
}

/*USER INTERFACE*/
.ui-features {
    padding: 0 15px;
}

.ui-features ul h1 {
    font-size: 1.3em;
    font-weight: 600;
    font-family: var(--font-base), sans-serif;
    color: var(--c-brand);
}

.ui-features-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ui-features-box {
    display: flex; /* Enables flexbox */
    justify-content: center; /* Horizontally centers the content */
    align-items: center; /* Vertically centers the content */
    height: 100%; /* Ensure the box takes up the full height of its container */
}

.ui-features ul h5 {
    margin-bottom: 30px;
}

/*CONTACT SECTION*/
.contact-wrapper {
    padding: 0;
    /*border: 1px solid dodgerblue;*/
}

.form-map-container {
    border-radius: 10px;
    background: var(--c-brand-dark);
    display: flex;
    justify-content: space-between;
    align-items: center; /* Aligns items in the center vertically */
    /*align-items: stretch; !* Ensures children elements match heights *!*/
    flex-wrap: nowrap; /* Avoid wrapping to keep form and map aligned horizontally */
    box-shadow: var(--s-box-shadow);
}

.form-container {
    margin-bottom: 0;
    padding: 25px 15px 0 15px;
    border-radius: 10px;
    background: var(--c-brand-light);
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
}

.form-container, .map {
    flex: 0 0 48%; /* Take up about half of the container's width */
    margin-bottom: 0; /* Space at the bottom for small screens */
    margin-right: 20px;
}

.contact-form {
    display: flex; /* Enable flexbox for the buttons and other form elements */
    flex-direction: column; /* Default vertical stacking of form elements */
    width: 100%; /* Ensures form takes full width */
}

.form-group {
    margin-bottom: 15px; /* Space between form fields */
}

.input-group {
    display: flex; /* Aligns country code and phone number field horizontally */
}

.country-code {
    width: 120px; /* Fixed width, corrected from 120px */
    max-width: 120px; /* Ensures it doesn't stretch beyond 60px */
    flex: 0 0 auto; /* Prevents flex-grow or shrink, keeps width fixed */
}

.input-group .form-control {
    flex: 1; /* Allows the phone input to take up remaining space */
}

.form-control {
    padding: 8px;
    margin-top: 5px;
}


/*ARROW SCROLL*/
/* Scroll-to-Top Button Styling */
.icon-arrow-frame {
    position: fixed; /* Fix the button to the viewport */
    bottom: 20px; /* Spacing from the bottom */
    right: 20px; /* Spacing from the right */
    width: 50px; /* Circular size of the button */
    height: 50px;
    background-color: var(--c-brand); /* Background color */
    border-radius: 50%; /* Make it circular */
    display: flex; /* Flexbox for center alignment */
    align-items: center; /* Center the icon vertically */
    justify-content: center; /* Center the icon horizontally */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* Smooth visibility change */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Fully hidden initially */
    z-index: 1000; /* Ensure it's above other items */
    padding: 0;
}

/* Hover effect for the button */
.icon-arrow-frame:hover {
    background-color: #555; /* Lighter background on hover */
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Styling the arrow icon */
.ri-arrow-up-circle-fill {
    font-size: 45px; /* Adjust icon size */
    color: white; /* Color of the arrow icon */
}

/* Button becomes visible when the 'show' class is added */
.icon-arrow-frame.show {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Change visibility */
}

#scrollToTop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

#scrollToTop.show {
    opacity: 1;
    visibility: visible;
}