/* =========================
   ROOT VARIABLES
========================= */
:root {

    --color-red-50: #fef2f2;
    --color-red-100: #ffe2e2;
    --color-red-500: #fb2c36;
    --color-red-600: #e7000b;
    --color-red-700: #c10007;
    --color-red-800: #9f0712;
    --color-orange-50: #f3f1eee1;
    --color-orange-100: #ffedd4;
    --color-orange-500: #ff6900;
    --color-orange-600: #f54900;
    --color-orange-800: #9f2d00;
    --color-yellow-50: #fefce8;
    --color-yellow-100: #fef9c2;
    --color-yellow-400: #fdc700;
    --color-yellow-600: #d08700;
    --color-yellow-800: #894b00;
    --color-green-50: #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-500: #00c950;
    --color-green-600: #00a63e;
    --color-green-700: #008235;
    --color-green-800: #026630;
    --color-teal-50: #f0fdfa;
    --color-teal-100: #cbfbf1;
    --color-teal-600: #009689;
    --color-teal-800: #005f5a;
    --color-cyan-50: #ecfeff;
    --color-cyan-100: #cefafe;
    --color-cyan-500: #00b8db;
    --color-cyan-800: #005f78;
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-500: #2b7fff;
    --color-blue-600: #155dfb;
    --color-blue-700: #1447e6;
    --color-blue-800: #193cb8;
    --color-indigo-50: #eef2ff;
    --color-indigo-100: #e0e7ff;
    --color-indigo-600: #4f39f6;
    --color-indigo-800: #372aac;
    --color-purple-50: #faf5ff;
    --color-purple-100: #f3e8ff;
    --color-purple-500: #ad46ff;
    --color-purple-600: #9810fa;
    --color-purple-800: #6e11b0;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #99a1af;
    --color-gray-500: #6a7282;
    --color-gray-600: #4a5565;
    --color-gray-700: #364153;
    --color-gray-800: #1e2939;
    --color-gray-900: #101828;
    --color-hover: #fcf5f2;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --default-transition: all 500ms;
    --color-primary: #ea580c;
    --color-secondary: #c2410c;
    --color-accent: rgb(251, 146, 60);
    --color-dark: #7c2d12;
    --color-light: #fff7ed;
}

/* =========================
   BASE RESET
========================= */
html {
    scroll-behavior: smooth;

}

@font-face {
    font-family: inter-bold;
    src: url(../Inter/static/Inter_28pt-Bold.ttf)
}

@font-face {
    font-family: inter-medium;
    src: url(../Inter/static/Inter_18pt-Medium.ttf)
}

@font-face {
    font-family: inter-regular;
    src: url(../Inter/static/Inter_18pt-Regular.ttf)
}

@font-face {
    font-family: inter-light;
    src: url(../Inter/static/Inter_24pt-Light.ttf)
}

body {
    font-family: inter-regular;
}

a,
span {
    display: inline-block;
}

a {
    text-decoration: none;
    color: inherit;
}

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

/* =========================
   UTILITIES
========================= */

.w-80 {
    width: 80%;
}

.w-93 {
    width: 93%;
}

.max-w-100 {
    width: 100%;
}

.max-w-72 {
    width: 72%;
}

.max-w-672 {
    max-width: 42rem;
}

.ms-100 {
    margin-left: 100px;
}

.text-muted-custom {
    color: var(--color-gray-600);
}

.fw-33 {
    font-weight: 400;
    font-size: 20px;
    line-height: 33px;
}

.fs-30 {
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
}

.fs-14 {
    font-size: .875rem;
    font-weight: 700;
    line-height: 20px;
}

.fs-16 {
    font-size: 1rem;
    line-height: 24px;
    font-weight: 600;
}

.li-fs {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.h2-custom {
    font-size: 48px;
    font-weight: 900;
    line-height: 48px;
}

.fs-20 {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

.heading-card {
    color: var(--color-dark);
}

.text-primary-custom {
    color: var(--color-primary) !important;
}

.text-gray-600 {
    color: var(--color-gray-600);
}

.bg-blue-500 {
    background-color: var(--color-blue-500);
}

.bg-green-500 {
    background-color: var(--color-green-500)
}

.bg-orange-500 {
    background-color: var(--color-orange-500);
}

.bg-cyan-500 {
    background-color: var(--color-cyan-500);
}

.bg-purple-500 {
    background-color: var(--color-purple-500);
}

.bg-red-500 {
    background-color: var(--color-red-500);
}

.bg-indigo-600 {
    background-color: var(--color-indigo-600);
}

.bg-teal-600 {
    background-color: var(--color-teal-600);
}

.bg-yellow-600 {
    background-color: var(--color-yellow-600);
}

.bg-i-primary {
    background-color: var(--color-primary);
}

.w-45 {
    width: 45%;
}

.w-15 {
    width: 15%;
}

.py-8 {
    padding-block: 5rem;
}

/* ============================
             START===NAVBAR
============================= */
.navbar-brand span {

    background: linear-gradient(30deg, var(--color-primary), var(--color-secondary));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 32px;
}

.icon-mega {
    transition: var(--default-transition);
}

.icon-mega .fa-solid {

    color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
}

.help-box {
    background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
}

.hover-bg {
    transition: var(--default-transition);
}

.bg_hover:hover {
    background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
    border-radius: 7px;
}

.bg_hover:hover .icon-mega {
    transform: scale(1.2);
}

.navbar .dropdown-menu {
    border: none;
}

.navbar__logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(90deg, #e95709, #ab4b2b);
}
.navbar__logo-icon i {
    color: #fff;
}
.navbar-nav .nav-link.active {
    color: #ea580c;
    position: relative;
}
.navbar-nav .nav-link.active::after {
    content: "";
    width: 40px;
    height: 2px;
    position: absolute;
    background-color: #C5430C;
    bottom: -5px;
    left: -1px;
}
.nav-link {
    transition: var(--default-transition);
    margin-left: 15px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-gray-700);
}

.nav-link:hover,
.btn-sign:hover {
    color: #ea580c;
}
.btn-start {
    background: linear-gradient(90deg, var(--color-primary), #c75b37);
    padding-inline: 32px;
    padding-block: 12px;
    margin-right: 16px;
    transition: var(--default-transition);
}
.btn-start:hover {
    font-weight: 500;
    box-shadow: 0 15px 20px -10px var(--color-accent);
}
.btn-sign {
    transition: var(--default-transition);
    font-weight: 500;
    color: var(--color-gray-700)
}
.link-hover:hover {
    color: #C2410C !important;
}

/* =========================
          END=== NAVBAR
========================= */

/*============================== 
            START HERO-SEC
===============================*/
.hero-section {


    padding-top: 96px;
    padding-bottom: 64px;
    background: linear-gradient(to bottom right, #e8dcce, #f8f9fa, #ffffff, );

    background: linear-gradient(70deg, var(--color-orange-50), var(--color-light));
}



header .badge {
    background-color:
        color-mix(in oklab, var(--color-secondary) 10%, transparent);
    color: var(--color-primary);
    /* width: 40%; */

}


.heading-gradient {
    background: linear-gradient(30deg, var(--color-dark), var(--color-secondary), var(--color-accent));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-accent {
    color: var(--color-dark);
}

.heading-highlight {
    background: linear-gradient(100deg, var(--color-primary), var(--color-secondary), var(--color-accent));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


.btn-play {
    transition: var(--default-transition);
    border: 2px solid var(--color-gray-300);
    color: var(--color-gray-700);
    padding-inline: 32px;
    padding-block: 12px;
}

.btn-play:hover {
    color: #D64D0C;
    border: 2px solid #D64D0C;
    border-radius: 15px;

}


.img {

    transform: rotate(5deg);
    width: 590px;
    height: 610px;
    background-color:
        color-mix(in oklab, var(--color-secondary) 20%, transparent);
}



header .floating-badge {
    position: absolute;

    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    font-size: 25px;
    box-shadow: 0 20px 35px rgba(224, 8, 8, 0.15);
}

header .top-badge {
    top: -35px;
    right: -10px;
    width: 90px;
    height: 90px;
    background: linear-gradient(180deg, #F98936, #EC5F14);
}

.bottom-badge {
    bottom: -30px;
    left: -35px;
    width: 80px;
    height: 80px;
    background: linear-gradient(180deg, #D64D0C, #E6560C);
}

/*============================== 
            END HERO-SEC
===============================*/



/* =====================MAIN ======================== */

/* ========================================
                 start---servies---section
============================================*/

.badge {
    /* max-width: 25%; */
    padding: 5px;
    font-weight: 500;
    background-color:
        color-mix(in oklab, var(--color-secondary) 10%, transparent);
    color: var(--color-primary);
    ;
}

.services-sec .floating-badge {
    margin-left: 20px;
    margin-top: 5px;
    color: hsl(0, 0%, 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 25px;
    box-shadow: 0 20px 35px rgba(21, 16, 16, 0.15);
    width: 60px;
    height: 60px;
    background: linear-gradient(180deg, #F98936, #cd5b1d);
    transition: var(--default-transition);
}

.services-sec .service-card:hover .floating-badge {
    transform: scale(1.05);

}

.services-sec .service-card a {
    transition: var(--default-transition);
}

.services-sec .service-card:hover a i {
    transform: translatex(5px);

}

.service-card {
    transition: var(--default-transition);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(240, 117, 17, 0.08), 0 5px 10px rgba(240, 117, 17, 0.05);
}

/* ======================================
             end---servies---sectio
========================================*/


/* =====================================
            START techology-sec
========================================= */

.icons-technology-card .floating-badge {
    width: 55px;
    height: 55px;
}

.technology-card {
    border: none;
    transition: all 0.3s ease;
}

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

.blue-card {
    background: linear-gradient(to bottom right, #eff6ff, #dbeafe);
    /* blue-50 → blue-100 */
    /* border-radius: 1.5rem; rounded-2xl */

}

.badge-blue {
    background-color: #dbeafe;
    color: #1e40af;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;


}


.card-gray {
    background: linear-gradient(to bottom right, #f9fafb, #f3f4f6);
}

.badge-gray {
    background-color: #f3f4f6;
    color: #1f2937;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;

}

.card-green {

    background: linear-gradient(to bottom right, #f0fdf4, #dcfce7);

}

.badge-green {
    background-color: #dcfce7;
    color: #166534;
    padding: 4px 12px;

    font-size: 12px;
    font-weight: 500;


}

.card-orange {
    background: linear-gradient(to bottom right, #fff7ed, #ffedd5);
}

.badge-orange {
    background-color: #ffedd5;
    color: #9a3412;

    padding: 4px 12px;


    font-size: 12px;
    font-weight: 500;


}

.card-cyan {
    background: linear-gradient(to bottom right, var(--color-cyan-50), var(--color-cyan-100));
}

.badge-cyan {
    background-color: #cffafe;
    color: #155e75;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;


}

.card-purple {
    background: linear-gradient(to bottom right, var(--color-purple-50), var(--color-purple-100));
}

.badge-purple {
    background-color: var(--color-purple-100);
    color: var(--color-purple-800);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
}

.card-red {
    background: linear-gradient(to bottom right, #fef2f2, #fee2e2);
}

.badge-red {
    background-color: #fee2e2;
    color: #991b1b;

    padding: 4px 12px;
    border-radius: 9999px;

    font-size: 12px;
    font-weight: 500;


}

.card-indigo {
    background: linear-gradient(to bottom right, var(--color-indigo-50), var(--color-indigo-100));
}

.badge-indigo {
    background-color: var(--color-indigo-100);
    color: var(--color-indigo-800);
    padding: 4px 12px;
    border-radius: 9999px;

    font-size: 12px;
    font-weight: 500;

}

.card-teal {
    background: linear-gradient(to bottom right, var(--color-teal-50), var(--color-teal-100));
}

.badge-teal {
    background-color: var(--color-teal-100);
    color: var(--color-teal-800);
    padding: 4px 12px;
    border-radius: 9999px;

    font-size: 12px;
    font-weight: 500;

}

.card-yallow {
    background: linear-gradient(to bottom right, var(--color-yellow-50), var(--color-yellow-100));

}

.badge-yellow {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
    padding: 4px 12px;
    border-radius: 9999px;

    font-size: 12px;
    font-weight: 500;

}


/* ========================================
                  END  techology-sec
========================================== */



/* =================================================
                                START    client
 ==================================================== */
.img-thumbnail {
    border-color: var(--color-primary);
    border: 3px solid var(--color-red-100);
}

.client-sec .fa-solid {

    color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
}


.w-10 {
    width: 10%;
}


.img-holder-carssol i {
    top: 60%;
    right: 45%;
    border: 3px solid white;
    border-radius: 50%;
}



.testimonial-footer {
    border-top: 1px solid #eee;
    padding-top: 20px;

    display: flex;
    flex-direction: column;
    gap: 25px;
}

.avatar {
    position: relative;
}

.avatar img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #ff6a00;
}

.avatar .check {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    border-radius: 50%;
    font-size: 14px;
}

.person-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.person-text h3 {
    margin: 0;
    font-size: 18px;
}

.role {
    margin: 0;
    color: #777;
}

.linkedin {
    margin: 0;
    font-size: 14px;
    color: #777;
}

.stat {
    text-align: center;
}

.number {
    font-size: 28px;
    font-weight: bold;
    color: #ff6a00;
    display: block;
}

.label {
    color: #777;
}

/* ==================
     END clients-sec
=============== */



/* ========================
          START  FAQ
=========================== */
.bg-linear-sec {


    background: linear-gradient(to bottom right, #f9fafb, #fff7ed);
}

.accordion-button {

    transition: all .5s;
    border-radius: 5px;
    border: rgb(197, 191, 191) 1px solid;
    padding: 25px;
}

.accordion-button:hover {
    background-color: rgba(235, 232, 232, 0.616);
}

.accordion-item {
    margin: 15px;
    border-radius: 5px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.accordion-button:not(.collapsed) {
    background-color: #fff;

}
.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--color-dark);

}

.accordion-button:hover {
    background-color: rgba(235, 232, 232, 0.616);

}


.accordion-button:focus {
    box-shadow: none;
}



/* =======================
             End   FAQ
=========================== */

/* ==================================
             START CONTACT-SEC
==================================== */



.custom-input:focus {
    transform: scale(1.02);
}

.custom-input:hover {
    border-color: #ced4da;
}


.select-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    pointer-events: none;
}

.budget-card {
    cursor: pointer;
    display: block;
}

.budget-card input {
    display: none;
}

.card-box {
    padding: 16px;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    transition: 0.3s;
}


.budget-card input:checked+.card-box {
    border-color: var(--color-primary);
    background-color: var(--color-red-50);
    color: var(--color-primary);
}

.custom-textarea:hover {
    border-color: #ced4da;
}

.custom-input,
.custom-select,
.custom-textarea {
    padding: 16px 20px;
    background-color: #f1f3f5;
    border: 2px solid transparent;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.custom-input:focus,
.custom-select:focus,
.custom-textarea:focus {
  background-color: #fff;
  border-color: var(--color-primary);
}

.custom-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.custom-checkbox:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.gradient-bg {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary), var(--color-accent));

}
.custom-btn {
    padding: 20px;
    border: none;
    border-radius: 16px;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary), var(--color-accent));
    transition: all 0.3s ease;
}

.custom-btn:hover {
    transform: translateY(-5px);
    color: #fff;
}
.custom-btn .icon {
    transition: transform 0.2s ease;
}
.custom-btn:hover .icon {
    transform: translateX(2px);
}
.why-choose-box {
    color: #fff;
}

.icon-box {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-item {
    margin-bottom: 15px;
}
.text-white-75 {
    color: rgba(255, 255, 255, 0.75);
}
.feature-item:hover .icon-box {
    background: rgba(255, 255, 255, 0.3);
    transition: 0.3s;
}
/* ==================================
             END CONTACT-SEC
==================================== */

/* =====================MAIN ======================== */







/*start footer section */

.desc-footer {
    border-top: 1px solid #8875a390;
}

p .fa-heart {
    color: red;
}

.bg-gray-100 {
    color: var(--color-gray-100);
}

.footer-icon .fa-stack {
    transition: var(--default-transition);
}

.footer-icon .fa-stack:hover .fa-square {
    color: var(--color-primary);
}

.footer-icon .fa-stack:hover .fab {
    color: #fff;
}