/*=========================================================
    Andcytron Systems Pvt Ltd
    Global Stylesheet
    File : style.css
=========================================================*/

@import url("variables.css");

/*=========================================================
    RESET
=========================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body{

    font-family:var(--font-primary);

    background:var(--body-bg);

    color:var(--text-dark);

    font-size:16px;

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

/*=========================================================
    GLOBAL
=========================================================*/

section{

    position:relative;

    width:100%;

}

.container{

    max-width:1420px;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

}

input,
textarea{

    outline:none;

}

/*=========================================================
    TYPOGRAPHY
=========================================================*/

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

    font-weight:700;

    color:var(--text-dark);

    line-height:1.2;

}

h1{

    font-size:4rem;

}

h2{

    font-size:2.8rem;

}

h3{

    font-size:2rem;

}

h4{

    font-size:1.5rem;

}

h5{

    font-size:1.2rem;

}

p{

    color:var(--text-light);

    margin-bottom:1rem;

}

.section-title{

    margin-bottom:60px;

}

.section-title span{

    color:var(--secondary);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

}

.section-title h2{

    margin:15px 0;

}

.section-padding{

    padding:100px 0;

}

/*=========================================================
    BUTTONS
=========================================================*/

.btn{

    border-radius:50px;

    padding:14px 36px;

    font-weight:600;

    transition:all .35s ease;

}

.btn-primary{

    background:var(--gradient-primary);

    color:#fff;

    border:none;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}

.btn-outline-light{

    border:2px solid #fff;

    color:#fff;

    background:transparent;

}

.btn-outline-light:hover{

    background:#fff;

    color:var(--primary);

}

/*=========================================================
    UTILITY CLASSES
=========================================================*/

.text-gradient{

    background:var(--gradient-primary);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.glass-card{

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

    backdrop-filter:blur(20px);

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

    border-radius:20px;

    box-shadow:var(--shadow-md);

}

.shadow{

    box-shadow:var(--shadow-lg);

}

.rounded-xl{

    border-radius:30px;

}

.bg-light{

    background:#f7f9fc;

}

.text-center{

    text-align:center;

}

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

.navbar{

    height:82px;

    transition:.35s;

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

    backdrop-filter:blur(18px);

    box-shadow:0 6px 24px rgba(0,0,0,.06);

}

.navbar.scrolled{

    background:#fff;

    box-shadow:var(--shadow-md);

}

.logo{

    height:170px;

}

.nav-link{

    color:var(--text-dark);

    font-weight:500;

    margin:0 10px;

    position:relative;

}

.nav-link:hover{

    color:var(--primary);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:var(--secondary);

    transition:.3s;

}

.nav-link:hover::after{

    width:100%;

}

/*=========================================================
    MEGA MENU
=========================================================*/

.mega-dropdown{

    position:static;

}

.mega-menu{

    width:100%;

    left:0;

    right:0;

    padding:40px;

    border:none;

    border-radius:0;

    background:#fff;

    box-shadow:var(--shadow-lg);

    display:none;

}

.dropdown:hover .mega-menu{

    display:block;

}

.mega-menu h5{

    margin-bottom:20px;

    color:var(--primary);

}

.mega-menu a{

    display:block;

    color:var(--text-light);

    padding:8px 0;

}

.mega-menu a:hover{

    color:var(--secondary);

    padding-left:8px;

}

/*=========================================================
    HERO
=========================================================*/

#hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    color:#fff;

}
#hero1{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    color:#FAFAE8;

}

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-3;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,35,75,.80),
        rgba(0,65,150,.60)
    );

    z-index:-2;

}

#particles-js{

    position:absolute;

    inset:0;

    z-index:-1;

}

.hero-tag1{

    display:inline-block;

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

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

    padding:20px 25px;

    border-radius:50px;

    margin-bottom:25px;

    font-weight:500;

}

#hero1 h1{

    color:#FAFAE8;

    font-size:4.5rem;

    line-height:1.15;

    font-weight:800;

}

#hero1 h1 span{

    color:var(--secondary);

}

#hero1 p{

    color:#ED0E33;

    font-size:1.0rem;

    max-width:650px;

    margin:30px 0;

}

.page-hero-content h1{
    color:rgba(255,255,255,0.9);
}

.page-hero-content p{
    color:rgba(255,255,255,0.75);
}

.hero-tag{

    display:inline-block;

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

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

    padding:20px 25px;

    border-radius:50px;

    margin-bottom:25px;

    font-weight:500;

}

#hero h1{

    color:#fff;

    font-size:4.5rem;

    line-height:1.15;

    font-weight:800;

}

#hero h1 span{

    color:var(--secondary);

}

#hero p{

    color:#fff;

    font-size:1.0rem;

    max-width:650px;

    margin:30px 0;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:40px;

}

.hero-highlights{

    display:flex;

    gap:60px;

    margin-top:70px;

}

.hero-highlights h3{

    color:#fff;

    font-size:2.5rem;

    margin-bottom:5px;

}

.hero-highlights p{

    margin:0;

    font-size:.95rem;

}

.hero-image{

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

}

.scroll-down{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    font-size:30px;

    animation:bounce 2s infinite;

}

/*=========================================================
    SERVICES SECTION
=========================================================*/

.services{
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    position:relative;
    overflow:hidden;
}

.services::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:320px;
    height:320px;
    background:rgba(0,87,217,.05);
    border-radius:50%;
}

.services::after{
    content:"";
    position:absolute;
    bottom:-150px;
    left:-120px;
    width:380px;
    height:380px;
    background:rgba(255,122,0,.05);
    border-radius:50%;
}

.service-card{

    position:relative;

    background:#ffffff;

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

    transition:all .4s ease;

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

    height:100%;

    overflow:hidden;

    z-index:1;

}

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:var(--gradient-primary);

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 55px rgba(0,87,217,.18);

}

.service-card .icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient-primary);

    color:#ffffff;

    font-size:38px;

    transition:.4s;

}

.service-card:hover .icon{

    transform:rotate(12deg) scale(1.08);

    background:var(--gradient-secondary);

}

.service-card h4{

    margin-bottom:18px;

    color:var(--primary);

    font-weight:700;

}

.service-card p{

    color:var(--gray-600);

    font-size:.96rem;

    min-height:90px;

}

.service-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    font-weight:600;

    color:var(--primary);

}

.service-card a:hover{

    color:var(--secondary);

}

.service-card a i{

    transition:.3s;

}

.service-card:hover a i{

    transform:translateX(6px);

}

/*=========================================================
    STATISTICS
=========================================================*/

.statistics{

    background:var(--gradient-dark);

    color:#ffffff;

    padding:90px 0;

}

.counter-box{

    padding:25px;

}

.counter{

    font-size:4rem;

    font-weight:800;

    color:var(--secondary);

    margin-bottom:10px;

}

.counter::after{

    content:"+";

}

.counter-box p{

    color:#ffffff;

    font-size:1.05rem;

    letter-spacing:.5px;

    margin:0;

}

.counter-box:hover{

    transform:translateY(-6px);

    transition:.35s;

}

/*=========================================================
    CLIENT LOGOS
=========================================================*/

.clients{

    background:#ffffff;

}

.logo-slider{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:35px;

}

.logo-item{

    flex:1 1 140px;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:120px;

    padding:20px;

    background:#ffffff;

    border-radius:16px;

    transition:.35s;

    border:1px solid rgba(0,0,0,.06);

}

.logo-item img{

    max-width:140px;

    max-height:60px;

    opacity:.60;

    transition:.4s;

    filter:grayscale(100%);

}

.logo-item:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.10);

}

.logo-item:hover img{

    opacity:1;

    filter:none;

    transform:scale(1.08);

}

/*=========================================================
    TECHNOLOGY STACK
=========================================================*/

.technology{

    background:#f7f9fc;

}

.tech-card{

    background:#ffffff;

    border-radius:20px;

    padding:35px 20px;

    text-align:center;

    transition:.35s;

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

    height:100%;

}

.tech-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,87,217,.15);

}

.tech-card img{

    width:70px;

    height:70px;

    object-fit:contain;

    margin:0 auto 20px;

    transition:.35s;

}

.tech-card:hover img{

    transform:scale(1.12) rotate(5deg);

}

.tech-card h5{

    margin:0;

    color:var(--primary);

    font-weight:600;

}

/*=========================================================
    TECHNOLOGY BADGES
=========================================================*/

.tech-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:50px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:.85rem;

    font-weight:600;

    margin:5px;

}

.tech-badge:hover{

    background:var(--secondary);

    color:#ffffff;

}

/*=========================================================
    SECTION DECORATION
=========================================================*/

.section-title h2 span{

    color:var(--secondary);

}

.section-title p{

    max-width:760px;

    margin:20px auto 0;

    font-size:1.05rem;

}

.section-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:rgba(0,87,217,.08);

    color:var(--primary);

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:20px;

}

/*=========================================================
    COMMON HOVER EFFECTS
=========================================================*/

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.glow{

    transition:.35s;

}

.glow:hover{

    box-shadow:0 0 35px rgba(0,87,217,.25);

}
/*=========================================================
    FEATURED PRODUCTS
=========================================================*/

.products{
    background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%);
    position:relative;
    overflow:hidden;
}

.products::before{
    content:"";
    position:absolute;
    top:-180px;
    right:-180px;
    width:420px;
    height:420px;
    background:rgba(0,87,217,.05);
    border-radius:50%;
}

.product-card{

    position:relative;

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

    backdrop-filter:blur(20px);

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

    border-radius:24px;

    padding:40px 30px;

    overflow:hidden;

    transition:.4s;

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

    height:100%;

}

.product-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,87,217,.03),
        rgba(255,122,0,.03)
    );

    z-index:-1;

}

.product-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,87,217,.18);

}

.product-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    margin-bottom:25px;

    transition:.4s;

}

.product-card:hover .product-icon{

    background:var(--gradient-secondary);

    transform:rotate(12deg) scale(1.1);

}

.product-card h4{

    color:var(--primary);

    margin-bottom:15px;

    font-weight:700;

}

.product-card p{

    color:var(--gray-600);

    margin-bottom:20px;

}

.product-card ul{

    margin-bottom:25px;

}

.product-card ul li{

    padding:8px 0;

    color:var(--gray-700);

    font-size:.95rem;

}

.product-card ul li::before{

    content:"✓";

    color:var(--secondary);

    font-weight:bold;

    margin-right:10px;

}

/*=========================================================
    AI INNOVATION LAB
=========================================================*/

.innovation{

    background:var(--gradient-dark);

    color:#ffffff;

    position:relative;

    overflow:hidden;

}

.innovation::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top left,
    rgba(255,255,255,.06),transparent 45%);

}

.innovation h2{

    color:#ffffff;

}

.innovation p{

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

}

.innovation img{

    border-radius:24px;

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

}

.innovation-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin:18px 0;

    padding:18px;

    border-radius:18px;

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

    backdrop-filter:blur(16px);

    transition:.35s;

}

.innovation-item:hover{

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

    transform:translateX(10px);

}

.innovation-item i{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--gradient-secondary);

    color:#ffffff;

    font-size:26px;

}

.innovation-item h5{

    color:#ffffff;

    margin:0;

}

/*=========================================================
    TESTIMONIALS
=========================================================*/

.testimonials{

    background:#f8fbff;

}

.testimonial-card{

    background:#ffffff;

    border-radius:24px;

    padding:45px;

    text-align:left;

    box-shadow:0 18px 40px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.testimonial-card:hover{

    transform:translateY(-8px);

}

.quote{

    font-size:42px;

    color:var(--secondary);

    margin-bottom:20px;

}

.testimonial-card p{

    color:var(--gray-700);

    font-style:italic;

    line-height:1.9;

}

.client{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:30px;

}

.client img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

}

.client h5{

    margin:0;

    color:var(--primary);

}

.client span{

    color:var(--gray-500);

    font-size:.9rem;

}

/*=========================================================
    SWIPER CUSTOMIZATION
=========================================================*/

.swiper{

    padding-bottom:70px;

}

.swiper-slide{

    height:auto;

}

.swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#d1d5db;

    opacity:1;

}

.swiper-pagination-bullet-active{

    width:34px;

    border-radius:25px;

    background:var(--secondary);

}

.swiper-button-next,
.swiper-button-prev{

    color:var(--primary);

}

.swiper-button-next:hover,
.swiper-button-prev:hover{

    color:var(--secondary);

}

/*=========================================================
    PREMIUM GLASS EFFECTS
=========================================================*/

.glass-premium{

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

    backdrop-filter:blur(22px);

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

    border-radius:24px;

    box-shadow:
        0 25px 55px rgba(0,0,0,.15);

}

.glass-dark{

    background:rgba(10,20,40,.45);

    backdrop-filter:blur(20px);

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

}

/*=========================================================
    AI VISUAL EFFECTS
=========================================================*/

.ai-glow{

    position:relative;

}

.ai-glow::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(0,194,255,.18);

    filter:blur(80px);

    top:-80px;

    right:-80px;

    z-index:-1;

}

.neon-border{

    position:relative;

}

.neon-border::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:linear-gradient(
        135deg,
        #00C2FF,
        #0057D9,
        #FF7A00
    );

    z-index:-2;

}

.gradient-text{

    background:linear-gradient(
        90deg,
        #0057D9,
        #00C2FF,
        #FF7A00
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.floating{

    animation:floating 6s ease-in-out infinite;

}

.rotate-slow{

    animation:rotate360 18s linear infinite;

}

.blur-circle{

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(0,87,217,.10);

    border-radius:50%;

    filter:blur(120px);

    z-index:-1;

}

.blur-circle.orange{

    background:rgba(255,122,0,.12);

}

/*=========================================================
    PRODUCT TAGS
=========================================================*/

.product-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:.82rem;

    font-weight:600;

    margin-bottom:18px;

}

.product-tag.ai{

    background:#eef7ff;

    color:#0057D9;

}

.product-tag.new{

    background:#fff4e8;

    color:#ff7a00;

}

/*=========================================================
    FEATURE HIGHLIGHTS
=========================================================*/

.feature-list{

    margin-top:25px;

}

.feature-list li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    color:var(--gray-700);

}

.feature-list li i{

    color:var(--secondary);

    font-size:18px;

}
/*=========================================================
    CONTACT SECTION
=========================================================*/

.contact{
    background:#ffffff;
    position:relative;
}

.contact-info,
.contact-form{
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(20px);
    border-radius:24px;
    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    height:100%;
}

.contact-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:28px;
}

.contact-item i{
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--gradient-primary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
}

.contact-item h5{
    margin-bottom:6px;
    color:var(--primary);
}

.contact-form .form-control{
    border-radius:12px;
    border:1px solid #dfe5ef;
    padding:15px 18px;
    margin-bottom:18px;
    transition:.3s;
}

.contact-form .form-control:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 .2rem rgba(0,87,217,.15);
}

/*=========================================================
    GOOGLE MAP
=========================================================*/

.map-section iframe{
    width:100%;
    height:420px;
    border:0;
    display:block;
}

/*=========================================================
    NEWSLETTER
=========================================================*/

.newsletter{
    background:var(--gradient-primary);
    color:#fff;
    padding:70px 0;
}

.newsletter h2,
.newsletter p{
    color:#fff;
}

.newsletter-form{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.newsletter-form input{
    flex:1;
    min-width:220px;
    border:none;
    border-radius:50px;
    padding:16px 22px;
}

.newsletter-form button{
    border-radius:50px;
    padding:16px 32px;
    font-weight:600;
}

/*=========================================================
    FOOTER
=========================================================*/

.footer{
    background:var(--footer-bg);
    color:#d8e3f0;
    padding:80px 0 30px;
}

.footer-logo{
    width:380px;
    margin-bottom:20px;
}
.footer-logo-2{
    width:280px;
    margin-bottom:20px;
}

.footer h5{
    color:#fff;
    margin-bottom:22px;
}

.footer ul{
    padding:0;
}

.footer ul li{
    margin-bottom:12px;
}

.footer a{
    color:#cfd8e5;
    transition:.3s;
}

.footer a:hover{
    color:var(--secondary);
    padding-left:6px;
}

.footer hr{
    border-color:rgba(255,255,255,.12);
    margin:40px 0 20px;
}

/*=========================================================
    SOCIAL ICONS
=========================================================*/

.social-icons{
    display:flex;
    gap:15px;
    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:.35s;
}

.social-icons a:hover{
    background:var(--secondary);
    transform:translateY(-5px);
}

/*=========================================================
    WHATSAPP BUTTON
=========================================================*/

.whatsapp{
    position:fixed;
    right:25px;
    bottom:95px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    z-index:999;
    transition:.35s;
}

.whatsapp:hover{
    transform:scale(1.1);
}

/*=========================================================
    BACK TO TOP
=========================================================*/

.back-to-top{
    position:fixed;
    right:25px;
    bottom:25px;
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--gradient-primary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
    transition:.35s;
    z-index:998;
}

.back-to-top:hover{
    transform:translateY(-5px);
}

/*=========================================================
    COOKIE BANNER
=========================================================*/

.cookie-banner{
    position:fixed;
    bottom:20px;
    left:20px;
    max-width:360px;
    background:#fff;
    border-radius:18px;
    padding:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.15);
    z-index:1001;
}

.cookie-banner h6{
    color:var(--primary);
    margin-bottom:10px;
}

.cookie-banner p{
    font-size:.9rem;
    margin-bottom:15px;
}

.cookie-actions{
    display:flex;
    gap:10px;
}

/*=========================================================
    CHATBOT PLACEHOLDER
=========================================================*/

.chatbot-button{
    position:fixed;
    left:25px;
    bottom:25px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--gradient-secondary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    cursor:pointer;
    transition:.35s;
    z-index:999;
}

.chatbot-button:hover{
    transform:scale(1.08);
}

/*=========================================================
    FINAL UTILITY CLASSES
=========================================================*/

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

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

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

.bg-dark-gradient{
    background:var(--gradient-dark);
}

.bg-secondary-gradient{
    background:var(--gradient-secondary);
}

.radius-lg{
    border-radius:24px;
}

.radius-xl{
    border-radius:36px;
}

.shadow-lg{
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.shadow-xl{
    box-shadow:0 30px 70px rgba(0,0,0,.2);
}

.transition{
    transition:.35s ease;
}

.hover-up:hover{
    transform:translateY(-8px);
}

.overflow-hidden{
    overflow:hidden;
}

.position-relative{
    position:relative;
}

.z-top{
    z-index:999;
}

.w-100{
    width:100%;
}

.h-100{
    height:100%;
}

.d-flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.text-white{
    color:#fff!important;
}

.mt-section{
    margin-top:100px;
}

.mb-section{
    margin-bottom:100px;
}

.py-section{
    padding:100px 0;
}

.glass{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.2);
}

.gradient-border{
    position:relative;
}

.gradient-border::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:inherit;
    background:linear-gradient(135deg,#0057D9,#00C2FF,#FF7A00);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    pointer-events:none;
}

/*=========================================================
    END OF STYLE.CSS
=========================================================*/