/* public/css/style.css */

/* General Styles */

:root {
    --color-green: #37b349;
    --color-orange: #FF8C00;
    --v-shadow-key-umbra-color: 47, 43, 61;
    --v-shadow-xs-opacity: 0.1;
    --v-shadow-sm-opacity: 0.12;
    --v-shadow-md-opacity: 0.14;
    --v-shadow-lg-opacity: 0.16;
    --v-shadow-xl-opacity: 0.18;
}
.g{
    color: var(--color-green)
}
.or{
    color: var(--color-orange)
}
.bg-g{
    background: var(--color-green);
    color: #fff;
}
.bg-or{
    background: var(--color-orange) !important;
    color: #fff;
}
.shadow{
    box-shadow: 0 3px 12px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity)), 0 0 transparent, 0 0 transparent;
}
.bg-card{
    border-radius: 10px;
    background-color: #fff;
    padding: 20px;
}
.bg-card > h2{
    color: rgb(67 64 80);
}
.bg-card  h5{
    color: rgb(169 169 169);
    font-weight: 300;
    font-size: 0.8em;
}
.bg-card-orange-green{
    background: #c3e864;
    background: linear-gradient(306deg, rgba(195, 232, 100, 1) 0%, rgba(137, 230, 94, 1) 100%);}
.bg-card-green{
    background: #ffffff;
background: linear-gradient(317deg,rgba(217, 250, 200, 1)  0%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 100%);
}
.bg-card-orange{
    background: #ffffff;
    background: linear-gradient(317deg,rgba(250, 232, 200, 1)  0%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 100%);}

    .bg-card-purble{
        background: #ffffff;
        background: linear-gradient(139deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 45%, rgba(230, 230, 230, 1) 100%);}
      
        .bg-card-blue{
            background: #ffffff;
            background: linear-gradient(139deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 45%, rgba(202, 239, 250, 1) 100%);}
          
body {
    font-family: 'Geologica', sans-serif !important;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #faf8f7;
}
.fa-circle-check{
    color: var(--color-green);
}
.img-profile {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}
.head-color-small {
    color: var(--color-orange);
    font-size: 1.3em;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Override container for homepage specific behavior */
[data-page="homepage"] .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

p {
    line-height: 1.6;
    font-size: 15px;
    color: #555;
}
.dropdown-toggle::after {
    display: none !important}
.btno {
  
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    
}

.bg-orange-qr{
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23ffffff' stroke-width='.5' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cuse fill='%23fcfcfc' href='%23s' y='2'/%3E%3Cuse fill='%23fcfcfc' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='2'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23f2f2f2'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23ffffff'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23efefef'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
   
}
.btn-orange{
    background-color: var(--color-orange); /* Orange */
    color: #fff;
}

.btno:hover {
    background-color: #008000 !important;
    color: #FFF;

}

.btn-login{
    background-color: var(--color-orange) !important;
    background-color: #ffaa00;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb100' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffb800' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffbe00' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffc500' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23ffcc00' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffb80d' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffa719' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ff9726' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ff8b32' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FF803F' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}
.btn-outline-login{
    border: 2px solid var(--color-green) !important;
    color: var(--color-green);
    background-color: #ebfce6;
}

.btn-outline-login:hover{
    color: #FFF;
    background-color: #edfdec;

}
 #faq-section{
    background-color: #FFC936;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffd45e' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffdf86' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffe9af' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23fff4d7' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFFFFF' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23f9ffec' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23f3ffd9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ecffc6' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23e6ffb3' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23E0FFA0' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}

/* =========================
   COMPREHENSIVE DARK MODE STYLES
   ========================= */

/* Dark theme body and global styles */
body.dark-theme {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Dark theme navigation and headers */
body.dark-theme #navbar-header {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-theme .navbar {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-theme .navbar-nav .nav-link {
    color: #e2e8f0 !important;
}

body.dark-theme .navbar-nav .nav-link:hover {
    color: #10b981 !important;
}

/* Dark theme cards and containers */
body.dark-theme .bg-card {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-theme .bg-card > h2 {
    color: #e2e8f0 !important;
}

body.dark-theme .bg-card h5 {
    color: #94a3b8 !important;
}

body.dark-theme .card {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-theme .card-header {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

body.dark-theme .card-body {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.dark-theme .card-footer {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

/* Dark theme tables */
body.dark-theme .table {
    color: #e2e8f0 !important;
    background-color: #1e293b !important;
}

body.dark-theme .table-light {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.dark-theme .table thead th {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

body.dark-theme .table tbody tr {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-theme .table-hover tbody tr:hover {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .table th, 
body.dark-theme .table td {
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: #334155 !important;
}

/* Dark theme buttons */
body.dark-theme .btn {
    border-color: #475569 !important;
}

body.dark-theme .btn-outline-secondary {
    background-color: transparent !important;
    border-color: #6b7280 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .btn-outline-secondary:hover {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
}

body.dark-theme .btn-outline-warning {
    background-color: transparent !important;
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

body.dark-theme .btn-outline-warning:hover {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

body.dark-theme .btn-outline-success {
    background-color: transparent !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
}

body.dark-theme .btn-outline-success:hover {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

body.dark-theme .btn-secondary {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
}

body.dark-theme .btn-light {
    background-color: #374151 !important;
    border-color: #374151 !important;
    color: #e2e8f0 !important;
}

/* Dark theme dropdowns */
body.dark-theme .dropdown-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .dropdown-item {
    color: #e2e8f0 !important;
    background-color: transparent !important;
}

body.dark-theme .dropdown-item:hover {
    opacity: 1;
}

.plan-recommanded {
    position: relative;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(55, 179, 73, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(55, 179, 73, 0); }
    100% { box-shadow: 0 0 0 0 rgba(55, 179, 73, 0); }
}

/* Advanced scroll animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-up {
    animation: slideInUp 0.8s ease-out;
}

.animate-left {
    animation: slideInLeft 0.8s ease-out;
}

.animate-right {
    animation: slideInRight 0.8s ease-out;
}

.animate-scale {
    animation: fadeInScale 0.8s ease-out;
}

/* Enhanced navbar with glass effect */
.navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(55, 179, 73, 0.1);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Enhanced work steps with gradient backgrounds */
.work-step {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid rgba(55, 179, 73, 0.1);
    position: relative;
    overflow: hidden;
}

.work-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(55, 179, 73, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.work-step:hover::before {
    opacity: 1;
}

.work-step i {
    background: linear-gradient(135deg, var(--color-green), #2e8b57);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.work-step:hover i {
    transform: scale(1.2) rotate(5deg);
}

/* Enhanced FAQ section */
.faq-item {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(55, 179, 73, 0.1);
    position: relative;
    overflow: hidden;
}

.faq-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-green), var(--color-orange));
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.faq-item.active::before,
.faq-item:hover::before {
    transform: scaleY(1);
}

/* Advanced image hover effects */
img.img-fluid {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

img.img-fluid:hover {
    transform: scale(1.05) rotate(1deg);
    filter: brightness(1.1) contrast(1.1);
}

/* Floating action button for scroll to top */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-green), #2e8b57);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(55, 179, 73, 0.3);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(55, 179, 73, 0.4);
}

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
    .hero::after {
        background-size: 100px 100px, 120px 120px, 80px 80px;
    }
    
    .feature-card {
        margin-bottom: 30px;
    }
    
    .animate-left,
    .animate-right {
        animation: slideInUp 0.8s ease-out;
    }
    
    .btn:hover {
        transform: none;
    }
    
    .price-box:hover {
        transform: none;
    }
}

/* Dark theme enhancements */
.dark-theme section:nth-child(odd) {
    background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 50%, #2d2d2d 100%);
}

.dark-theme section:nth-child(even) {
    background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 50%, #3a3a3a 100%);
}

.dark-theme .feature-card {
    background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .work-step {
    background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .testimonial-box {
    background: rgba(58, 58, 58, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .price-box {
    background: rgba(58, 58, 58, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .faq-item {
    background: rgba(58, 58, 58, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Container responsive behavior for homepage */
@media (max-width: 768px) {
    [data-page="homepage"] .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    [data-page="homepage"] section .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Hero section responsive adjustments */
    [data-page="homepage"] .hero .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Navbar container responsive */
    [data-page="homepage"] .navbar .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Ensure proper container behavior on desktop */
@media (min-width: 769px) {
    [data-page="homepage"] .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Navbar should also respect container limits */
    [data-page="homepage"] .navbar .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Mobile-specific homepage improvements */
@media (max-width: 576px) {
    [data-page="homepage"] .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    [data-page="homepage"] .hero h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }
    
    [data-page="homepage"] .hero .lead {
        font-size: 1rem !important;
    }
    
    [data-page="homepage"] .feature-card {
        margin-bottom: 2rem;
        padding: 20px !important;
    }
    
    [data-page="homepage"] .work-step {
        margin-bottom: 2rem;
        padding: 20px !important;
    }
    
    [data-page="homepage"] .testimonial-box {
        margin-bottom: 2rem;
        padding: 20px !important;
    }
    
    [data-page="homepage"] .price-box {
        margin-bottom: 2rem;
    }
}

/* Tablet responsive improvements */
@media (min-width: 577px) and (max-width: 768px) {
    [data-page="homepage"] .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    [data-page="homepage"] .hero h1 {
        font-size: 2.5rem !important;
    }
}

/* Input Field Styles - Remove dark gray border and border-radius */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="color"],
textarea,
select,
.form-control {
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Focus state for input fields */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--color-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(55, 179, 73, 0.25) !important;
    outline: 0 !important;
}

/* Dark theme input adjustments */
.dark-theme input[type="text"],
.dark-theme input[type="email"],
.dark-theme input[type="password"],
.dark-theme input[type="number"],
.dark-theme input[type="tel"],
.dark-theme input[type="url"],
.dark-theme input[type="search"],
.dark-theme input[type="date"],
.dark-theme input[type="datetime-local"],
.dark-theme input[type="month"],
.dark-theme input[type="time"],
.dark-theme input[type="week"],
.dark-theme input[type="color"],
.dark-theme textarea,
.dark-theme select,
.dark-theme .form-control {
    background-color: #2d2d2d !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

.dark-theme input[type="text"]:focus,
.dark-theme input[type="email"]:focus,
.dark-theme input[type="password"]:focus,
.dark-theme input[type="number"]:focus,
.dark-theme input[type="tel"]:focus,
.dark-theme input[type="url"]:focus,
.dark-theme input[type="search"]:focus,
.dark-theme input[type="date"]:focus,
.dark-theme input[type="datetime-local"]:focus,
.dark-theme input[type="month"]:focus,
.dark-theme input[type="time"]:focus,
.dark-theme input[type="week"]:focus,
.dark-theme input[type="color"]:focus,
.dark-theme textarea:focus,
.dark-theme select:focus,
.dark-theme .form-control:focus {
    border-color: var(--color-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(55, 179, 73, 0.25) !important;
}

/* Special input fields styling */
.quantity-input,
.search-input,
#searchInput,
#customer-name,
#table-number,
#remarks {
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.quantity-input:focus,
.search-input:focus,
#searchInput:focus,
#customer-name:focus,
#table-number:focus,
#remarks:focus {
    border-color: var(--color-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(55, 179, 73, 0.25) !important;
    outline: 0 !important;
}

/* Dark theme for special input fields */
.dark-theme .quantity-input,
.dark-theme .search-input,
.dark-theme #searchInput,
.dark-theme #customer-name,
.dark-theme #table-number,
.dark-theme #remarks {
    background-color: #2d2d2d !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

.dark-theme .quantity-input:focus,
.dark-theme .search-input:focus,
.dark-theme #searchInput:focus,
.dark-theme #customer-name:focus,
.dark-theme #table-number:focus,
.dark-theme #remarks:focus {
    border-color: var(--color-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(55, 179, 73, 0.25) !important;
}

/* Override for tokenize plugin and other third-party input styles */
.tokenize .tokens-container,
.tokenize .tokens-container .token,
.tokenize .tokens-container .token-search input {
    border-radius: 0 !important;
    border-color: #e0e0e0 !important;
}

.tokenize.focus .tokens-container,
.tokenize .tokens-container .token:focus,
.tokenize .tokens-container .token-search input:focus {
    border-color: var(--color-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(55, 179, 73, 0.25) !important;
}

/* Override for any other input-related elements */
.input-group .form-control,
.input-group input {
    border-radius: 0 !important;
    border-color: #e0e0e0 !important;
}

.input-group .form-control:focus,
.input-group input:focus {
    border-color: var(--color-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(55, 179, 73, 0.25) !important;
}

/* Fix for order management page container issue */
.content .container.mx-auto {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure proper spacing for order management */
[data-page="orders"] {
    width: 100%;
    max-width: 100%;
}

[data-page="orders"] .container.mx-auto {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix for dashboard content area */
.content {
    padding: 1rem !important;
}

/* Ensure main body content flows properly */
#mainBody .container {
    width: 100% !important;
    max-width: 100% !important;
}

#mainBody .content {
    width: 100% !important;
    max-width: 100% !important;
}

/* Fix for responsive layout */
@media (min-width: 768px) {
    #mainBody .content {
        padding: 1.5rem !important;
    }
}

/* Order management page specific fixes */
[data-page="orders"] .badge,
[data-page="orders"] .label {
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

/* Badge styles for order management tabs */
.badge-all {
    background-color: #6c757d !important;
    color: white !important;
}

.badge-paid {
    background-color: #28a745 !important;
    color: white !important;
}

.badge-preparing {
    background-color: #007bff !important;
    color: white !important;
}

.badge-pending {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.badge-served {
    background-color: #17a2b8 !important;
    color: white !important;
}

.badge-rejected {
    background-color: #dc3545 !important;
    color: white !important;
}

.badge-closed {
    background-color: #6c757d !important;
    color: white !important;
}

.badge-canceled {
    background-color: #fd7e14 !important;
    color: white !important;
}

/* Tab badges (smaller, different styling) */
.nav-tabs .badge {
    min-width: auto !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}

/* Ensure badges are visible on tabs */
.nav-tabs .nav-link .badge {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
}

/* Ensure order management tabs display properly */
[data-page="orders"] .nav-tabs {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1rem;
}

[data-page="orders"] .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 0.375rem 0.375rem 0 0;
    color: #6c757d;
    background-color: transparent;
    padding: 0.5rem 1rem;
}

[data-page="orders"] .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

/* Fix for order management cards */
[data-page="orders"] .card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #fff;
}

[data-page="orders"] .card-body {
    padding: 1rem;
}

/* Fix for order management table */
[data-page="orders"] .table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
}

[data-page="orders"] .table th,
[data-page="orders"] .table td {
    padding: 0.5rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

[data-page="orders"] .table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    background-color: #f8f9fa;
}

/* Fix for order management filters */
[data-page="orders"] .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

[data-page="orders"] .input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6c757d;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

/* Fix for order management notification controls positioning */
[data-page="orders"] .notification-controls {
    position: fixed;
    bottom: 20px;
    left: 95px; /* Adjust for sidebar width */
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px;
    border-radius: 10px;
    z-index: 1000;
    max-width: 300px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Adjust when sidebar is collapsed */
.sidebar-collapsed + #mainBody [data-page="orders"] .notification-controls {
    left: 20px;
}

/* Fix for order management offcanvas */
[data-page="orders"] .offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    transition: transform 0.3s ease-in-out;
}

/* Fix for order management responsive issues */
@media (max-width: 768px) {
    [data-page="orders"] .notification-controls {
        left: 20px;
        bottom: 80px; /* Adjust for mobile */
    }
}

/* Sidebar styles */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 75px;
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.sidebar-collapsed {
    width: 0px !important;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
}

/* Main content area */
.main-collapsed {
    margin-left: 0px !important;
    width: 100% !important;
}

/* Default main content area */
#mainBody {
    margin-left: 75px;
    width: calc(100% - 75px);
    transition: all 0.3s ease;
    min-height: 100vh;
}

/* Screen layout */
#screenwidth {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
}

/* Navbar header fixes */
#navbar-header {
    position: sticky;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(10px);
}

/* Sidebar toggle button */
#sidebar-toggle {
    cursor: pointer;
    color: #333;
    font-size: 1.2em;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
}

#sidebar-toggle:hover {
    color: var(--color-green);
    background-color: rgba(55, 179, 73, 0.1);
    transform: scale(1.05);
}

/* Menu item hover effects */
.mi-hover {
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 2px 0;
    text-decoration: none;
    position: relative;
}

.mi-hover:hover {
    background-color: rgba(55, 179, 73, 0.1);
    color: var(--color-green);
    transform: translateX(2px);
}

.mi-hover:hover i {
    color: var(--color-green);
    transform: scale(1.1);
}

.mi-active {
    color: var(--color-green);
}

/* Sidebar logo */
.sidebar .p-1 {
    padding: 1rem 0.5rem;
    margin-bottom: 1rem;
}

.sidebar .p-1 img {
    transition: transform 0.3s ease;
}

.sidebar .p-1 img:hover {
    transform: scale(1.05);
}

/* Sidebar navigation */
.sidebar nav {
    padding: 0 0.5rem;
}

.sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar nav li {
    margin-bottom: 0.5rem;
}

/* Tooltip adjustments for sidebar */
.tooltip {
    z-index: 1100;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sidebar {
        width: 60px;
    }
    
    #mainBody {
        margin-left: 60px;
        width: calc(100% - 60px);
    }
    
    .main-collapsed {
        margin-left: 0px !important;
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .sidebar {
        width: 50px;
    }
    
    #mainBody {
        margin-left: 50px;
        width: calc(100% - 50px);
    }
    
    .sidebar .p-1 {
        padding: 0.5rem 0.25rem;
    }
    
    .mi-hover {
        padding: 0.5rem 0.25rem;
    }
    
    .mi-hover i {
        font-size: 1.2em !important;
    }
}

/* Dark mode adjustments */
.dark-theme .sidebar {
    background: linear-gradient(317deg, rgba(30, 30, 30, 1) 0%, rgba(50, 70, 50, 1) 100%) !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}

.dark-theme .mi-hover {
    color: #e0e0e0;
}

.dark-theme .mi-hover:hover {
    background-color: rgba(55, 179, 73, 0.2);
    color: var(--color-green);
}

.dark-theme #sidebar-toggle {
    color: #e0e0e0;
}

.dark-theme #sidebar-toggle:hover {
    color: var(--color-green);
}

/* Order Status Label Classes */
.label-all {
    background-color: #6c757d !important;
    color: white !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

.label-pending {
    background-color: #ffc107 !important;
    color: #212529 !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

.label-preparing {
    background-color: #007bff !important;
    color: white !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

.label-paid {
    background-color: #28a745 !important;
    color: white !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

.label-served {
    background-color: #17a2b8 !important;
    color: white !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

.label-rejected {
    background-color: #dc3545 !important;
    color: white !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

.label-canceled {
    background-color: #fd7e14 !important;
    color: white !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

.label-closed {
    background-color: #6c757d !important;
    color: white !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

.label-completed {
    background-color: #28a745 !important;
    color: white !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

.label-processing {
    background-color: #6f42c1 !important;
    color: white !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

.label-on-hold {
    background-color: #e83e8c !important;
    color: white !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

.label-ready {
    background-color: #20c997 !important;
    color: white !important;
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
}

/* Generic label base styles */
.label {
    min-width: 75px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    text-align: center !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    border: none !important;
    white-space: nowrap;
}

/* Homepage Specific Styles */

/* Hero Section */
.hero {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 70vh;
    position: relative;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #2c3e50;
}

.hero .lead {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: #6c757d;
    line-height: 1.6;
}

.hero-btn {
    background: linear-gradient(135deg, var(--color-green) 0%, #2e8b57 100%);
    color: white;
    padding: 15px 35px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(55, 179, 73, 0.3);
    text-decoration: none;
    display: inline-block;
}

.hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(55, 179, 73, 0.4);
    background: linear-gradient(135deg, #2e8b57 0%, var(--color-green) 100%);
}

/* Section Spacing */
section {
    padding: 60px 0;
}

section h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2c3e50;
}

section h3 {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 2rem;
    color: #495057;
}

/* Feature Cards */
.feature-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.feature-card img {
    border-radius: 10px;
    width: 100%;
    height: auto;
}

.feature-card h2 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.feature-card p {
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.feature-card .btn {
    background: var(--color-green);
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.feature-card .btn:hover {
    background: #2e8b57;
    transform: translateY(-2px);
}

/* Work Process Steps */
.work-step {
    text-align: center;
    padding: 30px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.work-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.work-step i {
    color: var(--color-green);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.work-step:hover i {
    transform: scale(1.1);
    color: #2e8b57;
}

.work-step h4 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2c3e50;
}

.work-step p {
    color: #6c757d;
    line-height: 1.6;
}

/* Testimonials */
.testimonial-box {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    margin: 15px 0;
}

.testimonial-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.testimonial-box img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-bottom: 20px;
}

.testimonial-box h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #2c3e50;
}

.star-rating {
    color: #ffc107;
    margin: 10px 0;
}

.star-rating i {
    font-size: 1rem;
    margin-right: 2px;
}

/* Pricing Cards */
.price-box {
    border-radius: 15px !important;
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
    border: 2px solid #e9ecef !important;
}

.price-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.plan-recommanded {
    background: linear-gradient(135deg, var(--color-green) 0%, #2e8b57 100%) !important;
    border: 2px solid var(--color-green) !important;
    position: relative;
}

.plan-recommanded::before {
    content: "RECOMMENDED";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-orange);
    color: white;
    padding: 5px 20px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.price-box .card-title {
    font-weight: 600;
    margin-bottom: 10px;
}

.price-box h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 15px 0;
}

.price-box h5 del {
    color: #999;
    font-size: 1.2rem;
}

.price-box ul li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.price-box ul li:last-child {
    border-bottom: none;
}

.btn-red {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight:  600;
    transition: all 0.3s ease;
}

.btn-red:hover {
    background: linear-gradient(135deg, #c82333 0%, #dc3545 100%);
    transform: translateY(-2px);
    color: white;
}

/* FAQ Section */
.faq-item {
    margin-bottom: 15px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.faq-item .d-flex {
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-item .d-flex:hover {
    background-color: #f8f9fa !important;
}

.faq-item.active .d-flex {
    background-color: #f8f9fa !important;
}

.faq-item i {
    transition: all 0.3s ease;
}

.faq-item.active i {
    transform: rotate(180deg);
}

.faq-item p {
    padding: 0 20px 20px;
    margin: 0;
    background: white;
    border-top: 1px solid #f0f0f0;
}

/* Footer */
footer {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 50px 0 20px;
}

footer h6 {
    font-weight: 600;
    margin-bottom: 20px;
    color: white;
    font-size: 1.1rem;
}

footer p {
    color: #bdc3c7;
    line-height: 1.7;
    margin-bottom: 10px;
}

footer p:hover {
    color: white;
    cursor: pointer;
}

/* Social Icons */
.social-icons a {
    display: inline-block;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.social-icons a i {
    font-size: 1.8rem;
    color: #bdc3c7;
    padding: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.social-icons a:hover i {
    color: var(--color-orange);
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero {
        padding: 50px 0;
        text-align: center;
    }
    
    section {
        padding: 40px 0;
    }
    
    section h2 {
        font-size: 2rem;
    }
    
    section h3 {
        font-size: 1.6rem;
    }
    
    .feature-card h2 {
        font-size: 1.8rem;
    }
    
    .feature-card {
        margin-bottom: 30px;
    }
    
    .work-step {
        margin-bottom: 30px;
    }
    
    .testimonial-box {
        margin-bottom: 30px;
    }
    
    .price-box {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero .lead {
        font-size: 1.1rem;
    }
    
    .hero-btn {
        padding: 12px 25px;
        font-size: 1rem;
    }
    
    section h2 {
        font-size: 1.8rem;
    }
    
    .feature-card h2 {
        font-size: 1.6rem;
    }
}

/* Utility Classes */
.pd-50 {
    padding: 50px;
}

.pd-30-t {
    padding-top: 30px;
}

@media (max-width: 768px) {
    .pd-50 {
        padding: 20px;
    }
    
    .pd-30-t {
        padding-top: 20px;
    }
}

/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    opacity: 0.8;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

.carousel-indicators button {
    background-color: var(--color-green);
    opacity: 0.5;
}

.carousel-indicators button.active {
    opacity: 1;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Navbar improvements */
.navbar {
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.nav-link {
    font-weight: 500;
    color: #2c3e50 !important;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: var(--color-green) !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-green);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Button hover animations */
.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

/* Image hover effects */
.img-fluid {
    transition: transform 0.3s ease;
}

.img-fluid:hover {
    transform: scale(1.02);
}

/* Loading animation for images */
img {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Scroll-triggered animations */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-left {
    animation: slideInFromLeft 0.8s ease-out;
}

.animate-right {
    animation: slideInFromRight 0.8s ease-out;
}

.animate-bottom {
    animation: slideInFromBottom 0.8s ease-out;
}

/* Dark theme adjustments for homepage */
.dark-theme .hero {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #e0e0e0;
}

.dark-theme .hero h1 {
    color: #e0e0e0;
}

.dark-theme .feature-card {
    background: #2d2d2d;
    color: #e0e0e0;
}

.dark-theme .work-step {
    background: #2d2d2d;
    color: #e0e0e0;
}

.dark-theme .testimonial-box {
    background: #2d2d2d;
    color: #e0e0e0;
}

.dark-theme .price-box {
    background: #2d2d2d !important;
    color: #e0e0e0;
}

.dark-theme .faq-item .d-flex {
    background-color: #2d2d2d !important;
    color: #e0e0e0;
}

/* Print styles */
@media print {
    .navbar,
    footer,
    .btn,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .hero {
        background: none !important;
        color: black !important;
    }
}

/* =========================
   COMPREHENSIVE DARK MODE STYLES
   ========================= */

/* Dark theme body and global styles */
body.dark-theme {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Dark theme navigation and headers */
body.dark-theme #navbar-header {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-theme .navbar {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-theme .navbar-nav .nav-link {
    color: #e2e8f0 !important;
}

body.dark-theme .navbar-nav .nav-link:hover {
    color: #10b981 !important;
}

/* Dark theme cards and containers */
body.dark-theme .bg-card {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-theme .bg-card > h2 {
    color: #e2e8f0 !important;
}

body.dark-theme .bg-card h5 {
    color: #94a3b8 !important;
}

body.dark-theme .card {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-theme .card-header {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

body.dark-theme .card-body {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.dark-theme .card-footer {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

/* Dark theme tables */
body.dark-theme .table {
    color: #e2e8f0 !important;
    background-color: #1e293b !important;
}

body.dark-theme .table-light {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.dark-theme .table thead th {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

body.dark-theme .table tbody tr {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-theme .table-hover tbody tr:hover {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .table th, 
body.dark-theme .table td {
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: #334155 !important;
}

/* Dark theme buttons */
body.dark-theme .btn {
    border-color: #475569 !important;
}

body.dark-theme .btn-outline-secondary {
    background-color: transparent !important;
    border-color: #6b7280 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .btn-outline-secondary:hover {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
}

body.dark-theme .btn-outline-warning {
    background-color: transparent !important;
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

body.dark-theme .btn-outline-warning:hover {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

body.dark-theme .btn-outline-success {
    background-color: transparent !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
}

body.dark-theme .btn-outline-success:hover {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

body.dark-theme .btn-secondary {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
}

body.dark-theme .btn-light {
    background-color: #374151 !important;
    border-color: #374151 !important;
    color: #e2e8f0 !important;
}

/* Dark theme dropdowns */
body.dark-theme .dropdown-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .dropdown-item {
    color: #e2e8f0 !important;
    background-color: transparent !important;
}

body.dark-theme .dropdown-item:hover {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .dropdown-item:focus {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .dropdown-divider {
    border-color: #334155 !important;
}

/* Dark theme modals */
body.dark-theme .modal-content {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-theme .modal-header {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

body.dark-theme .modal-body {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.dark-theme .modal-footer {
    background-color: #334155 !important;
    border-color: #475569 !important;
}

body.dark-theme .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

body.dark-theme .btn-close {
    filter: invert(1) !important;
}

/* Dark theme offcanvas */
body.dark-theme .offcanvas {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.dark-theme .offcanvas-header {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

body.dark-theme .offcanvas-body {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Dark theme input groups */
body.dark-theme .input-group-text {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .bg-or {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

/* Dark theme text colors */
body.dark-theme .text-muted {
    color: #94a3b8 !important;
}

body.dark-theme .text-secondary {
    color: #94a3b8 !important;
}

body.dark-theme .text-dark {
    color: #e2e8f0 !important;
}

body.dark-theme h1, 
body.dark-theme h2, 
body.dark-theme h3, 
body.dark-theme h4, 
body.dark-theme h5, 
body.dark-theme h6 {
    color: #e2e8f0 !important;
}

body.dark-theme p {
    color: #e2e8f0 !important;
}

body.dark-theme small {
    color: #94a3b8 !important;
}

/* Dark theme background utilities */
body.dark-theme .bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.dark-theme .bg-light {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Dark theme application-specific components */
body.dark-theme .navbar-icon {
    color: #e2e8f0 !important;
}

body.dark-theme .navbar-icon:hover {
    color: #10b981 !important;
}

/* Dark theme for specific layout elements */
body.dark-theme .content {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

body.dark-theme #mainBody {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Dark theme gradients override */
body.dark-theme .bg-card-orange-green,
body.dark-theme .bg-card-green,
body.dark-theme .bg-card-orange,
body.dark-theme .bg-card-purble,
body.dark-theme .bg-card-blue {
    background: linear-gradient(317deg, rgba(30, 41, 59, 1) 0%, rgba(51, 65, 85, 1) 100%) !important;
    color: #e2e8f0 !important;
}

/* Dark theme borders and separators */
body.dark-theme hr {
    border-color: #334155 !important;
}

body.dark-theme .border {
    border-color: #334155 !important;
}

/* Dark theme shadow utilities */
body.dark-theme .shadow {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

body.dark-theme .shadow-lg {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

/* Dark theme transitions */
body.dark-theme * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* =========================
   END DARK MODE STYLES
   ========================= */