/*  
  -------------------------------------------
  -----      CSS for the font used      -----
  -------------------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root,
[data-bs-theme="light"] {
    --bs-body-bg: #f7faff;
    --bs-body-bg-rgb: 247, 250, 255;
    --bs-body-color: #0f172a;
    --bs-body-color-rgb: 15, 23, 42;
    --bs-emphasis-color: #111c31;
    --bs-emphasis-color-rgb: 17, 28, 49;
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-text-emphasis: #1d4ed8;
    --bs-primary-bg-subtle: #dbeafe;
    --bs-primary-border-subtle: #bfdbfe;
    --bs-info: #38bdf8;
    --bs-info-rgb: 56, 189, 248;
    --bs-info-text-emphasis: #0ea5e9;
    --bs-info-bg-subtle: #e0f2fe;
    --bs-info-border-subtle: #bae6fd;
    --bs-secondary-color: #475569;
    --bs-secondary-color-rgb: 71, 85, 105;
    --bs-secondary-bg: #e9efff;
    --bs-secondary-bg-rgb: 233, 239, 255;
    --bs-tertiary-color: #64748b;
    --bs-tertiary-color-rgb: 100, 116, 139;
    --bs-tertiary-bg: #f1f5ff;
    --bs-tertiary-bg-rgb: 241, 245, 255;
    --bs-link-color: #1d4ed8;
    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: #1e3a8a;
    --bs-link-hover-color-rgb: 30, 58, 138;
    --bs-border-color: #d2ddfb;
    --bs-border-color-translucent: rgba(37, 99, 235, 0.15);
    --bs-focus-ring-color: rgba(37, 99, 235, 0.3);
    --bs-focus-ring-opacity: 0.3;
    --bs-font-sans-serif: 'Roboto', sans-serif;
    --bs-body-font-family: 'Roboto', sans-serif;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0b1120;
    --bs-body-bg-rgb: 11, 17, 32;
    --bs-body-color: #e2e8f0;
    --bs-body-color-rgb: 226, 232, 240;
    --bs-emphasis-color: #f8fafc;
    --bs-emphasis-color-rgb: 248, 250, 252;
    --bs-primary: #60a5fa;
    --bs-primary-rgb: 96, 165, 250;
    --bs-primary-text-emphasis: #bfdbfe;
    --bs-primary-bg-subtle: #1d3a76;
    --bs-primary-border-subtle: #23468f;
    --bs-info: #38bdf8;
    --bs-info-rgb: 56, 189, 248;
    --bs-info-text-emphasis: #e0f2fe;
    --bs-info-bg-subtle: #0b2847;
    --bs-info-border-subtle: #134b7a;
    --bs-secondary-color: #cbd5f5;
    --bs-secondary-color-rgb: 203, 213, 245;
    --bs-secondary-bg: #111a33;
    --bs-secondary-bg-rgb: 17, 26, 51;
    --bs-tertiary-color: #94a3c9;
    --bs-tertiary-color-rgb: 148, 163, 201;
    --bs-tertiary-bg: #182544;
    --bs-tertiary-bg-rgb: 24, 37, 68;
    --bs-link-color: #93c5fd;
    --bs-link-color-rgb: 147, 197, 253;
    --bs-link-hover-color: #bfdbfe;
    --bs-link-hover-color-rgb: 191, 219, 254;
    --bs-border-color: #1e2a49;
    --bs-border-color-translucent: rgba(148, 163, 201, 0.18);
    --bs-focus-ring-color: rgba(96, 165, 250, 0.4);
    --bs-focus-ring-opacity: 0.35;
    --bs-font-sans-serif: 'Roboto', sans-serif;
    --bs-body-font-family: 'Roboto', sans-serif;
}

html[data-bs-theme="light"] body {
    background: linear-gradient(125deg, #dbeafe 0%, #eff6ff 50%, #ffffff 100%);
}

html[data-bs-theme="dark"] body {
    background: radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.18), transparent 60%), #0b1120;
}

html[data-bs-theme="light"] .loader-wrapper {
    background: linear-gradient(140deg, rgba(219, 234, 254, 0.95), rgba(255, 255, 255, 0.98)) !important;
}

body {
    font-family: 'Roboto', sans-serif;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #1e4ed3;
    --bs-btn-hover-border-color: #1d46bf;
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
    --bs-btn-active-bg: #1a3faa;
    --bs-btn-active-border-color: #193a9a;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
    --bs-btn-active-bg: #1a3faa;
    --bs-btn-active-border-color: #193a9a;
}

/* Dark mode button fixes for better text contrast */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #1e40af;
    --bs-btn-border-color: #1e40af;
    --bs-btn-hover-bg: #1e3a8a;
    --bs-btn-hover-border-color: #1e3a8a;
    --bs-btn-active-bg: #1e3a8a;
    --bs-btn-active-border-color: #1e3a8a;
}

[data-bs-theme="dark"] .btn-primary.text-white {
    color: #ffffff !important;
}

.bg-body-secondary-hover {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.bg-body-secondary-hover:hover {
    background-color: #dbeafe !important;
    box-shadow: 0 18px 35px -25px rgba(37, 99, 235, 0.6);
}

html[data-bs-theme="light"] .bg-body-tertiary {
    background: linear-gradient(160deg, rgba(219, 234, 254, 0.9), rgba(255, 255, 255, 0.85)) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 12px 30px -28px rgba(30, 64, 175, 0.55);
    backdrop-filter: blur(6px);
}

html[data-bs-theme="light"] .dropdown-menu {
    background: linear-gradient(155deg, rgba(237, 242, 255, 0.94), rgba(248, 250, 255, 0.98));
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 18px 32px -30px rgba(30, 64, 175, 0.75);
}

html[data-bs-theme="light"] .alert {
    background: linear-gradient(170deg, rgba(224, 242, 254, 0.96), rgba(219, 234, 254, 0.9));
    border-color: rgba(14, 165, 233, 0.35);
    color: #0f172a;
}

.expectation-card .badge {
    background: rgba(37, 99, 235, 0.15);
}

[data-bs-theme="dark"] .expectation-card {
    background: radial-gradient(circle at 30% 20%, rgba(30, 64, 175, 0.45), rgba(15, 23, 42, 0.92)) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

[data-bs-theme="dark"] .expectation-card,
[data-bs-theme="dark"] .expectation-card .text-body-secondary {
    color: #e5edff !important;
}

[data-bs-theme="dark"] .expectation-card .badge {
    background: rgba(96, 165, 250, 0.2);
    color: #dbeafe;
}

/* Dark mode fixes for service cards */
[data-bs-theme="dark"] .bg-white {
    background: rgba(30, 41, 59, 0.6) !important;
}

[data-bs-theme="dark"] .bg-white .text-body-emphasis {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .bg-white .text-body-secondary {
    color: #cbd5e1 !important;
}

/* Dark mode fixes for contact section */
[data-bs-theme="dark"] .bg-body-tertiary {
    background: rgba(15, 23, 42, 0.8) !important;
}

[data-bs-theme="dark"] .bg-body-tertiary .text-body-emphasis {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .bg-body-tertiary .text-body-secondary {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .bg-body-tertiary .form-label {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .bg-body-tertiary a {
    color: #93c5fd !important;
}

[data-bs-theme="dark"] .bg-body-tertiary a:hover {
    color: #bfdbfe !important;
}



/*  
  ------------------------------------------- 
  -----      CSS for the preloader      -----
  -------------------------------------------
*/

.loader-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    background-color: rgba(var(--bs-body-bg-rgb), 1) !important;
    display:flex;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2000 !important;
}



/*  
  -------------------------------------------------------------------------------- 
  -----      CSS for the default styles for both directions RTL and LTR      -----
  --------------------------------------------------------------------------------
*/

.left-to-right {
    display: none !important;
}
.right-to-left {
    display: none !important;
}
[dir="ltr"] .left-to-right {
    display: inline !important;
}
[dir="rtl"] .right-to-left {
    display: inline !important;
}

[dir="rtl"] .rtl-flip {
    transform: scaleX(-1) !important;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    transform: scaleX(-1);
}



/*  
  -------------------------------------------  
  -----      CSS for the AOS's RTL      -----
  -------------------------------------------
*/

[dir="rtl"] [data-aos=fade-left] {
    transform: translate3d(-100px, 0, 0);
}
[dir="rtl"] [data-aos=fade-right] {
    transform: translate3d(100px, 0, 0); 
}

[dir="rtl"] [data-aos=fade-up-left] {
    transform: translate3d(-100px, 100px, 0); 
}
[dir="rtl"] [data-aos=fade-up-right] {
    transform: translate3d(100px, 100px, 0); 
}

[dir="rtl"] [data-aos=fade-down-left] {
    transform: translate3d(-100px,-100px,0); 
}
[dir="rtl"] [data-aos=fade-down-right] {
    transform: translate3d(100px, -100px, 0); 
}

[dir="rtl"] [data-aos=flip-right] {
    transform: perspective(2500px) rotateY(-100deg);
}
[dir="rtl"] [data-aos=flip-left] {
    transform: perspective(2500px) rotateY(100deg);
}
[dir="rtl"] [data-aos=flip-right].aos-animate {
    transform: perspective(2500px) rotateY(0);
}
[dir="rtl"] [data-aos=flip-left].aos-animate {
    transform: perspective(2500px) rotateY(0);
}

[dir="rtl"] [data-aos=slide-left] {
    transform: translate3d(-100%,0,0);
}
[dir="rtl"] [data-aos=slide-right] {
    transform: translate3d(100%,0,0);
}

[dir="rtl"] [data-aos=zoom-in-right] {
    transform: translate3d(100px,0,0) scale(.6);
}
[dir="rtl"] [data-aos=zoom-in-left] {
    transform: translate3d(-100px,0,0) scale(.6);
}

[dir="rtl"] [data-aos=zoom-out-right] {
    transform: translate3d(100px,0,0) scale(1.2);
}
[dir="rtl"] [data-aos=zoom-out-left] {
    transform: translate3d(-100px,0,0) scale(1.2);
}




/*  
  ----------------------------------------------------  
  -----      CSS for the button back to top      -----
  ----------------------------------------------------
*/

.btn-back-to-top {
    position: fixed;
    bottom: 20px;
    display: none;
    z-index: 10;
}

[dir="ltr"] .btn-back-to-top {
    right: 20px;
}

[dir="rtl"] .btn-back-to-top {
    left: 20px;
}






@media (min-width: 1200px) {
    .overflow-xl-hidden {
        overflow: hidden !important;
    }
}