/*==================================================
TRUEEXT WEB SOLUTIONS

Website : https://trueext.in

Author : TrueExt Web Solutions

===================================================*/


/*==================================================
Google Font
===================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');


/*==================================================
Variables
===================================================*/

:root {

    --primary: #1E40FF;

    --primary-dark: #0B1F4D;

    --secondary: #3B82F6;

    --accent: #FF7A00;

    --dark: #081326;

    --white: #ffffff;

    --light: #F7FAFC;

    --text: #1F2937;

    --gray: #6B7280;

    --border: #E5E7EB;

    --shadow: 0 15px 45px rgba(0, 0, 0, .08);

    --radius: 20px;

    --transition: .35s ease;

}


/*==================================================
Reset
===================================================*/

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Inter', sans-serif;

    background: #fff;

    color: var(--text);

    overflow-x: hidden;

    line-height: 1.7;

}

img {

    max-width: 100%;

    display: block;

}

a {

    text-decoration: none;

    transition: var(--transition);

}

ul {

    padding: 0;

    margin: 0;

    list-style: none;

}

section {

    padding: 100px 0;

}

.container {

    max-width: 1320px;

}


/*==================================================
Typography
===================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: 'Sora', sans-serif;

    font-weight: 700;

    color: var(--dark);

}

.section-title {

    text-align: center;

    margin-bottom: 70px;

}

.section-title span {

    display: inline-block;

    padding: 8px 20px;

    background: #EEF3FF;

    color: var(--primary);

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 15px;

}

.section-title h2 {

    font-size: 48px;

    margin-bottom: 15px;

}

.section-title p {

    font-size: 18px;

    color: var(--gray);

    max-width: 720px;

    margin: auto;

}


/*==================================================
Buttons
===================================================*/

.btn-main {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 36px;

    background: linear-gradient(135deg, var(--primary), #4F46E5);

    color: #fff;

    border-radius: 60px;

    font-weight: 600;

    border: none;

    transition: .35s;

    box-shadow: 0 15px 35px rgba(30, 64, 255, .25);

}

.btn-main:hover {

    transform: translateY(-4px);

    color: #fff;

    box-shadow: 0 20px 40px rgba(30, 64, 255, .35);

}

.btn-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 36px;

    border-radius: 60px;

    border: 2px solid var(--primary);

    color: var(--primary);

    font-weight: 600;

    margin-left: 15px;

}

.btn-outline:hover {

    background: var(--primary);

    color: #fff;

}


/*==================================================
Header
===================================================*/

.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background: #fff;

    z-index: 999;

    box-shadow: 0 2px 15px rgba(0, 0, 0, .05);

    transition: .35s;

}

.navbar {

    padding: 20px 0;

}

.navbar-brand img {

    height: 48px;

}

.navbar-nav {

    gap: 30px;

}

.navbar-nav a {

    font-size: 15px;

    font-weight: 600;

    color: var(--dark);

    position: relative;

}

.navbar-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--primary);

    transition: .3s;

}

.navbar-nav a:hover::after,

.navbar-nav .active::after {

    width: 100%;

}

.navbar-nav a:hover {

    color: var(--primary);

}

.navbar .btn-primary {

    background: linear-gradient(135deg, var(--primary), #4F46E5);

    border: none;

    padding: 12px 28px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
Hero
===================================================*/

.hero {

    padding-top: 180px;

    padding-bottom: 120px;

    background:

        linear-gradient(180deg, #F9FBFF 0%, #FFFFFF 100%);

    position: relative;

    overflow: hidden;

}

.hero::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    background: #EAF1FF;

    border-radius: 50%;

    right: -200px;

    top: -250px;

    filter: blur(120px);

}

.hero-tag {

    display: inline-block;

    padding: 10px 22px;

    background: #EEF3FF;

    color: var(--primary);

    border-radius: 50px;

    font-weight: 600;

    margin-bottom: 25px;

}

.hero h1 {

    font-size: 68px;

    line-height: 1.15;

    margin-bottom: 25px;

}

.hero h1 span {

    color: var(--primary);

}

.hero p {

    font-size: 19px;

    color: var(--gray);

    margin-bottom: 35px;

    max-width: 560px;

}

.hero-btn {

    display: flex;

    align-items: center;

    margin-bottom: 55px;

}

.hero-counter {

    display: flex;

    gap: 50px;

    margin-top: 20px;

}

.hero-counter h2 {

    font-size: 42px;

    color: var(--primary);

    margin-bottom: 5px;

}

.hero-counter span {

    color: var(--gray);

    font-size: 15px;

}

.hero-image {

    position: relative;

}

.hero-image img {

    border-radius: 25px;

    box-shadow: 0 40px 80px rgba(0, 0, 0, .12);

}


/* Floating Effect */

.hero-image {

    animation: float 5s ease-in-out infinite;

}

@keyframes float {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-15px);

    }

    100% {

        transform: translateY(0);

    }

}

/*==================================================
Technology Section
===================================================*/

.technology {

    background: #fff;

}

.tech-box {

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 18px;

    padding: 35px 20px;

    text-align: center;

    transition: .35s;

    margin-bottom: 30px;

    cursor: pointer;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);

}

.tech-box:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 45px rgba(30, 64, 255, .12);

    border-color: var(--primary);

}

.tech-box i {

    font-size: 48px;

    color: var(--primary);

    margin-bottom: 20px;

}

.tech-box h5 {

    font-size: 18px;

    margin: 0;

}



/*==================================================
Services
===================================================*/

.services {

    background: #F8FAFF;

}

.service-card {

    background: #fff;

    border-radius: 22px;

    padding: 45px 35px;

    height: 100%;

    transition: .35s;

    border: 1px solid transparent;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .05);

    position: relative;

    overflow: hidden;

}

.service-card::before {

    content: "";

    position: absolute;

    width: 130px;

    height: 130px;

    right: -50px;

    top: -50px;

    background: rgba(30, 64, 255, .05);

    border-radius: 50%;

    transition: .35s;

}

.service-card:hover::before {

    transform: scale(2);

}

.service-card:hover {

    transform: translateY(-12px);

    border-color: var(--primary);

    box-shadow: 0 30px 60px rgba(30, 64, 255, .12);

}

.service-card .icon {

    width: 80px;

    height: 80px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--primary), #4F46E5);

    color: #fff;

    font-size: 32px;

    margin-bottom: 30px;

}

.service-card h4 {

    font-size: 26px;

    margin-bottom: 15px;

}

.service-card p {

    color: var(--gray);

    margin-bottom: 0;

    font-size: 16px;

}



/*==================================================
Why Choose Us
===================================================*/

.why-us {

    background: #fff;

}

.section-subtitle {

    display: inline-block;

    padding: 8px 20px;

    background: #EEF3FF;

    color: var(--primary);

    border-radius: 40px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 20px;

}

.why-us h2 {

    font-size: 46px;

    margin-bottom: 25px;

}

.why-us p {

    color: var(--gray);

    font-size: 18px;

    margin-bottom: 35px;

}

.feature-box {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 22px;

    border-radius: 18px;

    background: #fff;

    border: 1px solid var(--border);

    margin-bottom: 20px;

    transition: .35s;

}

.feature-box:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);

}

.feature-box i {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, var(--primary), #4F46E5);

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 22px;

}

.feature-box h5 {

    margin: 0;

    font-size: 18px;

}



/*==================================================
Development Process
===================================================*/

.process {

    background: linear-gradient(180deg, #F8FAFF, #FFFFFF);

}

.process-box {

    background: #fff;

    border-radius: 20px;

    padding: 40px 30px;

    text-align: center;

    border: 1px solid var(--border);

    transition: .35s;

    position: relative;

    overflow: hidden;

}

.process-box:hover {

    transform: translateY(-12px);

    border-color: var(--primary);

    box-shadow: 0 30px 60px rgba(30, 64, 255, .12);

}

.process-box span {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

    margin-bottom: 25px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--primary), #4F46E5);

    color: #fff;

    font-size: 26px;

    font-weight: 700;

}

.process-box h4 {

    margin-bottom: 15px;

}

.process-box p {

    color: var(--gray);

    margin: 0;

}



/*==================================================
Portfolio
===================================================*/

.portfolio {

    background: #fff;

}

.portfolio-card {

    background: #fff;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .06);

    transition: .35s;

    height: 100%;

}

.portfolio-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 35px 65px rgba(30, 64, 255, .14);

}

.portfolio-image {

    overflow: hidden;

}

.portfolio-image img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    transition: .5s;

}

.portfolio-card:hover .portfolio-image img {

    transform: scale(1.08);

}

.portfolio-content {

    padding: 30px;

}

.portfolio-content span {

    color: var(--primary);

    font-weight: 600;

    font-size: 14px;

}

.portfolio-content h4 {

    margin: 15px 0;

    font-size: 26px;

}

.portfolio-content p {

    color: var(--gray);

    margin-bottom: 20px;

}

.portfolio-content a {

    color: var(--primary);

    font-weight: 600;

}

.portfolio-content a i {

    margin-left: 8px;

    transition: .3s;

}

.portfolio-content a:hover i {

    transform: translateX(6px);

}

/*==================================================
Statistics
==================================================*/

.stats {

    background: linear-gradient(135deg, #0B1F4D, #1E40FF);

    color: #fff;

}

.stat-box {

    padding: 40px 20px;

}

.stat-box h2 {

    font-size: 60px;

    font-weight: 700;

    color: #fff;

    margin-bottom: 10px;

}

.stat-box p {

    color: rgba(255, 255, 255, .8);

    font-size: 18px;

    margin: 0;

}


/*==================================================
Hosting Banner
==================================================*/

.hosting {

    background: #F8FAFF;

}

.hosting span {

    display: inline-block;

    background: #EEF3FF;

    color: var(--primary);

    padding: 8px 18px;

    border-radius: 40px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 20px;

}

.hosting h2 {

    font-size: 48px;

    margin-bottom: 25px;

    line-height: 1.2;

}

.hosting p {

    color: var(--gray);

    font-size: 18px;

    margin-bottom: 35px;

}

.hosting img {

    border-radius: 24px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .10);

}


/*==================================================
Technology Stack
==================================================*/

.stack {

    background: #fff;

}

.stack-grid {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 18px;

    margin-top: 50px;

}

.stack-grid span {

    padding: 14px 28px;

    border-radius: 50px;

    background: #F4F7FF;

    color: var(--primary);

    font-weight: 600;

    border: 1px solid #DCE7FF;

    transition: .3s;

}

.stack-grid span:hover {

    background: var(--primary);

    color: #fff;

    transform: translateY(-5px);

}


/*==================================================
Testimonials
==================================================*/

.testimonials {

    background: #F8FAFF;

}

.testimonial-card {

    background: #fff;

    border-radius: 24px;

    padding: 40px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .05);

    transition: .35s;

    height: 100%;

    position: relative;

}

.testimonial-card::before {

    content: "\201C";

    position: absolute;

    top: 20px;

    right: 30px;

    font-size: 80px;

    color: #EDF2FF;

    font-family: serif;

}

.testimonial-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 30px 60px rgba(30, 64, 255, .12);

}

.testimonial-card p {

    color: var(--gray);

    font-size: 17px;

    margin-bottom: 30px;

}

.testimonial-card h5 {

    margin-bottom: 5px;

}

.testimonial-card span {

    color: var(--primary);

    font-size: 14px;

}


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

.faq {

    background: #fff;

}

.accordion-item {

    border: none;

    margin-bottom: 20px;

    border-radius: 16px !important;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);

}

.accordion-button {

    padding: 22px 28px;

    font-weight: 600;

    font-size: 18px;

    background: #fff;

}

.accordion-button:not(.collapsed) {

    background: #EEF3FF;

    color: var(--primary);

}

.accordion-button:focus {

    box-shadow: none;

}

.accordion-body {

    color: var(--gray);

    padding: 25px 30px;

}


/*==================================================
Call To Action
==================================================*/

.cta {

    padding: 80px 0;

}

.cta-box {

    background: linear-gradient(135deg, #0B1F4D, #1E40FF);

    border-radius: 30px;

    padding: 70px;

    color: #fff;

}

.cta-box h2 {

    color: #fff;

    font-size: 48px;

    margin-bottom: 20px;

}

.cta-box p {

    color: rgba(255, 255, 255, .8);

    font-size: 18px;

}

.cta .btn-light {

    border-radius: 60px;

    padding: 16px 36px;

    font-weight: 600;

}


/*==================================================
Footer
==================================================*/

.footer {

    background: #081326;

    color: #BFC8DD;

    padding: 90px 0 30px;

}

.footer-logo {

    height: 55px;

    margin-bottom: 25px;

}

.footer p {

    color: #BFC8DD;

    line-height: 1.8;

}

.footer h5 {

    color: #fff;

    margin-bottom: 25px;

}

.footer ul li {

    margin-bottom: 14px;

}

.footer ul li a {

    color: #BFC8DD;

    transition: .3s;

}

.footer ul li a:hover {

    color: #fff;

    padding-left: 8px;

}

.social-icons {

    display: flex;

    gap: 12px;

    margin-top: 25px;

}

.social-icons a {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255, 255, 255, .08);

    color: #fff;

    transition: .3s;

}

.social-icons a:hover {

    background: var(--primary);

    transform: translateY(-5px);

}

.footer hr {

    border-color: rgba(255, 255, 255, .08);

    margin: 60px 0 30px;

}

.copyright {

    text-align: center;

    color: #9AA5C0;

    font-size: 15px;

}


/*==================================================
Floating WhatsApp
==================================================*/

.whatsapp-btn {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 62px;

    height: 62px;

    border-radius: 50%;

    background: #25D366;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    z-index: 999;

    box-shadow: 0 15px 35px rgba(37, 211, 102, .35);

    transition: .3s;

}

.whatsapp-btn:hover {

    color: #fff;

    transform: translateY(-6px);

}


/*==================================================
Scroll Top Button
==================================================*/

.scroll-top {

    position: fixed;

    right: 25px;

    bottom: 100px;

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    cursor: pointer;

    display: none;

    z-index: 998;

    transition: .3s;

    box-shadow: 0 15px 35px rgba(30, 64, 255, .25);

}

.scroll-top:hover {

    transform: translateY(-5px);

    background: var(--primary-dark);

}


/*==================================================
Utilities
==================================================*/

.rounded-20 {

    border-radius: 20px;

}

.shadow-lg {

    box-shadow: 0 25px 60px rgba(0, 0, 0, .12) !important;

}

.bg-light-blue {

    background: #F8FAFF;

}

.text-primary {

    color: var(--primary) !important;

}

/*==================================================
Header Sticky Effect
==================================================*/

.header.sticky {

    padding: 0;

    background: rgba(255, 255, 255, .96);

    backdrop-filter: blur(12px);

    box-shadow: 0 15px 45px rgba(0, 0, 0, .08);

    animation: slideDown .35s ease;

}

@keyframes slideDown {

    from {

        transform: translateY(-100%);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}


/*==================================================
Image Hover Effect
==================================================*/

img {

    transition: .5s;

}

.image-hover {

    overflow: hidden;

    border-radius: 22px;

}

.image-hover img:hover {

    transform: scale(1.08);

}


/*==================================================
Card Hover Animation
==================================================*/

.service-card,
.portfolio-card,
.testimonial-card,
.process-box,
.tech-box,
.feature-box {

    will-change: transform;

}

.service-card:hover,
.portfolio-card:hover,
.testimonial-card:hover,
.process-box:hover,
.tech-box:hover,
.feature-box:hover {

    transform: translateY(-12px);

}


/*==================================================
Button Shine Effect
==================================================*/

.btn-main {

    position: relative;

    overflow: hidden;

}

.btn-main::before {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 60%;

    height: 100%;

    background: rgba(255, 255, 255, .35);

    transform: skewX(-25deg);

    transition: .8s;

}

.btn-main:hover::before {

    left: 140%;

}


/*==================================================
Glass Card Utility
==================================================*/

.glass {

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(16px);

    border: 1px solid rgba(255, 255, 255, .25);

}


/*==================================================
Gradient Text
==================================================*/

.gradient-text {

    background: linear-gradient(90deg, var(--primary), #5B6CFF);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}


/*==================================================
Section Spacing Helpers
==================================================*/

.pt-120 {

    padding-top: 120px;

}

.pb-120 {

    padding-bottom: 120px;

}

.mt-60 {

    margin-top: 60px;

}

.mb-60 {

    margin-bottom: 60px;

}


/*==================================================
Custom Scrollbar
==================================================*/

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #F3F4F6;

}

::-webkit-scrollbar-thumb {

    background: var(--primary);

    border-radius: 30px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--primary-dark);

}


/*==================================================
Selection Color
==================================================*/

::selection {

    background: var(--primary);

    color: #fff;

}

::-moz-selection {

    background: var(--primary);

    color: #fff;

}


/*==================================================
Form Controls
==================================================*/

.form-control {

    height: 58px;

    border-radius: 16px;

    border: 1px solid var(--border);

    padding: 0 20px;

    box-shadow: none;

}

.form-control:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 .2rem rgba(30, 64, 255, .12);

}

textarea.form-control {

    min-height: 180px;

    padding-top: 18px;

}


/*==================================================
Badges
==================================================*/

.badge-primary {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: #EEF3FF;

    color: var(--primary);

    padding: 10px 18px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
Animations
==================================================*/

.fade-up {

    animation: fadeUp .8s ease both;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.zoom-in {

    animation: zoomIn .7s ease both;

}

@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(.9);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}


/*==================================================
Background Utilities
==================================================*/

.bg-gradient {

    background: linear-gradient(135deg, #0B1F4D, #1E40FF);

}

.bg-soft {

    background: #F8FAFF;

}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4 {

    color: #fff;

}


/*==================================================
Border Radius Helpers
==================================================*/

.radius-10 {

    border-radius: 10px;

}

.radius-20 {

    border-radius: 20px;

}

.radius-30 {

    border-radius: 30px;

}


/*==================================================
Shadow Utilities
==================================================*/

.shadow-soft {

    box-shadow: 0 15px 35px rgba(0, 0, 0, .05);

}

.shadow-medium {

    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);

}

.shadow-heavy {

    box-shadow: 0 35px 70px rgba(0, 0, 0, .12);

}


/*==================================================
Transitions
==================================================*/

.transition {

    transition: .35s ease;

}


/*==================================================
End of File
==================================================*/