@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --black: #2a2a2a;
    --textclr: #555555;
    --primary: rgb(34, 147, 235);
    --primary50: rgba(34, 147, 235, 0.5);
    --primary20: rgba(34, 147, 235, 0.2);
    --primary10: rgba(34, 147, 235, 0.1);
    --second: #4fb757;
    --second50: rgba(243, 56, 56, 0.5);
    --second20: rgba(243, 56, 56, 0.2);
    --second10: rgba(243, 56, 56, 0.1);
    --white: #f0f9ff;
    --gradient: linear-gradient(120deg, #f33838 0%, #2293eb 100%);
    --grad1: linear-gradient(120deg, #ff595e 0%, #d70006 100%);
    --grad2: linear-gradient(120deg, #ff924c 0%, #cc5000 100%);
    --grad3: linear-gradient(120deg, #ffca3a 0%, #cb7a00 100%);
    --grad4: linear-gradient(120deg, #8ac926 0%, #5a9300 100%);
    --grad5: linear-gradient(120deg, #1982c4 0%, #005a93 100%);
    --grad6: linear-gradient(120deg, #6a4c93 0%, #370082 100%);
    --trans30: all 0.3s ease;
    --font12: 0.75rem;
    --font13: 0.813rem;
    --font14: 0.875rem;
    --font16: 1rem;
    --font18: 1.125rem;
    --font20: 1.25rem;
    --font28: 1.75rem;
    --font30: 1.875rem;
    --font32: 2rem;
}

html {
    scroll-behavior: smooth;
}

body {
    font-size: var(--font16);
    /* font-family: "Montserrat", sans-serif; */
    font-family: "Inter", sans-serif;
    color: var(--black);
    font-weight: 500;
    background-color: rgb(77 153 83 / 5%);
    background-image: url(../img/images/footbag.svg);
}

a {
    color: var(--black);
    text-decoration: none !important;
    transition: var(--trans30);
    -webkit-transition: var(--trans30);
}

p {
    color: var(--textclr);
    font-size: 0.95rem;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    color: var(--primary);
}

ul {
    padding-left: 0px;
    list-style-type: none;
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
    transition: var(--trans30);
    -webkit-transition: var(--trans30);
}

.btn-group {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    gap: 10px;
}

.btn-group .btn {
    flex: none;
}

.btn {
    /* padding: 10px 20px;
    min-height: 44px; */
    font-size: 0.9rem;
    font-weight: 500;
    min-width: 44px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    background-color: transparent;
    transition: var(--trans30);
    -webkit-transition: var(--trans30);
}

.active
{
    background-color: #113304 !important;
    border: 1px solid #6abe49 !important;
    color: var(--white) !important;
}

.btn-lg {
    padding: 12px 25px;
}

.btn-gradient {
    background-color: var(--primary);
    background: var(--gradient);
    color: #fff;
    background-size: 100%;
}

.btn-gradient:hover {
    background-size: 250%;
    box-shadow: 4px 6px 20px rgb(35 159 95 / 40%);
}

.btn-gradient img {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

.btn-primary {
    background-color: #6abe49;
    border: 1px solid #6abe49;
    color: var(--white);
}

.btn-primary:hover {
    background-color: #437e48;
    border: 1px solid #437e48;
}


.btn-danger {
    background-color: #6abe49;
    border: 1px solid #6abe49;
    color: var(--white);
}

.btn-danger:hover {
    background-color: #437e48;
    border: 1px solid #437e48;
}

.btn-secondary {
    background-color: #26610e;
    border: 1px solid #26610e;
    color: var(--white);
}

.btn-secondary:hover {
    background-color: #023606;
    border: 1px solid #023606;
}


.image-snipet-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 9;
    width: 800px;
    opacity: 0.5;
}


.image-snipet-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 500px;
    opacity: 0.5;
}

.sticky-column {
    position: sticky;
    top: 0;
    height: 100vh; /* Ensures it takes full viewport height */
    overflow-y: auto; /* Allows content inside to be scrollable if needed */
}


/* Default: Fixed column for desktops */
.fixed-column {
    position: fixed;
    top: 0;
    left: 0;
    width: 40%; /* Adjust based on layout */
    height: 100vh;
    overflow-y: auto;
    background: white; /* Prevent overlap issues */
    z-index: 1000;
}
.content-column {
    margin-left: 42%; /* Adjust to match fixed column */
    width: 58%;
}

/* Responsive: Adjust for tablets and mobile */
@media (max-width: 991px) { /* Bootstrap's md breakpoint */
    .fixed-column {
        position: relative;
        width: 100%;
        height: auto;
    }
    .content-column {
        margin-left: 0;
        width: 100%;
    }
    .btn-100-p
    {
        width: 100% !important;
    }
}

.qr-area
{
    background-color: white;
    /* padding: 30px; */
}


.btn-100
{
    width: 100% !important;
}

.button-c {
    border: none;
    color: rgb(255, 255, 255);
    padding: 5px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    border-radius: 5px;
    margin: 1px;
  }

.backround-success
{
    background-color: #437e48; 
}
.backround-primary
{
    background-color: #033307; 
}
.backround-danger
{
    background-color: #7e4343; 
}
.backround-share
{
    background-color: #075E54; 
}
.backround-download
{
    background-color: #555e07; 
}
.btn-login
{
    background-color: #033307; 
    border: none;
    color: rgb(255, 255, 255);
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    border-radius: 5px;
    margin: 1px;
}