/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 1A-1
VARIABLES + RESET + BASE STYLES
==================================================*/

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

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

    /* Brand Colors */
    --primary:#0056b3;
    --secondary:#00bcd4;
    --accent:#ff9800;

    /* Aliases (Compatibility) */
    --primary-color:var(--primary);
    --secondary-color:var(--secondary);

    /* Neutral Colors */
    --dark:#0f172a;
    --light:#ffffff;
    --gray:#64748b;
    --bg:#f8fafc;
    --border:#e5e7eb;

    /* Effects */
    --shadow:0 10px 35px rgba(0,0,0,.08);
    --shadow-lg:0 18px 45px rgba(0,0,0,.12);

    /* Radius */
    --radius:12px;
    --radius-lg:20px;

    /* Layout */
    --container:1200px;
    --header-height:90px;

    /* Animation */
    --transition:.35s ease;
}

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

/*====================================
HTML
====================================*/
html{
    scroll-behavior:smooth;
    scroll-padding-top:var(--header-height);
}

/*====================================
BODY
====================================*/
body{

    font-family:'Poppins',sans-serif;
    font-size:16px;
    line-height:1.8;

    color:var(--dark);

    background:var(--light);

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;

    padding-top:var(--header-height);
}

/*====================================
MEDIA
====================================*/
img,
picture,
video,
canvas,
svg{
    display:block;
    max-width:100%;
}

img{
    height:auto;
}

/*====================================
LINKS
====================================*/
a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

/*====================================
LISTS
====================================*/
ul,
ol{
    list-style:none;
}

/*====================================
BUTTONS
====================================*/
button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

/*====================================
FORM ELEMENTS
====================================*/
input,
textarea,
select{

    font:inherit;

    outline:none;

}

/*====================================
SELECTION
====================================*/
::selection{

    background:var(--primary);

    color:#fff;

}

/*====================================
SCROLLBAR
====================================*/
::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#003f86;

}

/*====================================
CONTAINER
====================================*/
.container{

    width:min(90%, var(--container));

    margin-inline:auto;

}

/*====================================
SECTIONS
====================================*/
section{

    position:relative;

    padding:100px 0;

}

.bg-light{

    background:var(--bg);

}

/*====================================
FOCUS ACCESSIBILITY
====================================*/
:focus-visible{

    outline:3px solid rgba(0,188,212,.35);

    outline-offset:3px;

}

/*====================================
UTILITY
====================================*/
.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.w-100{

    width:100%;

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 1A-2
TYPOGRAPHY + BUTTONS + CARDS + UTILITIES
==================================================*/


/*====================================
HEADINGS
====================================*/

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

    color:var(--dark);

    font-weight:700;

    line-height:1.25;

    margin-bottom:18px;

}

h1{

    font-size:clamp(2.8rem,5vw,4rem);

    font-weight:800;

}

h2{

    font-size:clamp(2.1rem,4vw,3rem);

}

h3{

    font-size:1.5rem;

}

h4{

    font-size:1.25rem;

}

h5{

    font-size:.95rem;

    font-weight:600;

    color:var(--secondary);

    letter-spacing:2px;

    text-transform:uppercase;

}

h6{

    font-size:.85rem;

    font-weight:600;

}


/*====================================
PARAGRAPH
====================================*/

p{

    font-size:1rem;

    color:var(--gray);

    line-height:1.8;

    margin-bottom:20px;

}


/*====================================
SECTION TITLE
====================================*/

.section-title{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

}

.section-title h5{

    display:inline-block;

    margin-bottom:16px;

    padding:8px 20px;

    border-radius:50px;

    background:rgba(0,86,179,.08);

    color:var(--primary);

}

.section-title h2{

    margin-bottom:18px;

}

.section-title p{

    max-width:720px;

    margin:auto;

}


/*====================================
PRIMARY BUTTON
====================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 36px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-weight:600;

    transition:var(--transition);

    box-shadow:0 12px 28px rgba(0,86,179,.25);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(0,86,179,.30);

}


/*====================================
SECONDARY BUTTON
====================================*/

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 36px;

    border-radius:50px;

    border:2px solid currentColor;

    color:inherit;

    background:transparent;

    font-weight:600;

    transition:var(--transition);

}

.btn-secondary:hover{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

}


/*====================================
PRODUCT BUTTON
====================================*/

.product-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

}

.product-btn:hover{

    background:var(--secondary);

    transform:translateY(-3px);

}


/*====================================
COMMON CARD
====================================*/

.card,

.intro-card,

.why-card,

.product-card,

.expertise-card,

.counter-card{

    background:#fff;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

    transition:var(--transition);

    overflow:hidden;

}

.card:hover,

.intro-card:hover,

.why-card:hover,

.product-card:hover,

.expertise-card:hover{

    transform:translateY(-10px);

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

}


/*====================================
GRID HELPERS
====================================*/

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:40px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:30px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:30px;

}


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

.icon-circle{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:30px;

    box-shadow:0 10px 25px rgba(0,86,179,.20);

}


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

.text-white{

    color:#fff !important;

}

.text-primary{

    color:var(--primary);

}

.text-secondary{

    color:var(--secondary);

}

.text-gray{

    color:var(--gray);

}


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

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}


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

.pt-5{padding-top:50px;}
.pb-5{padding-bottom:50px;}
.py-5{

    padding-top:50px;

    padding-bottom:50px;

}


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

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.space-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}


/*====================================
BORDER RADIUS
====================================*/

.rounded{

    border-radius:var(--radius);

}

.rounded-lg{

    border-radius:var(--radius-lg);

}


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

.shadow{

    box-shadow:var(--shadow);

}

.shadow-lg{

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

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 1A-3
ANIMATIONS + PRELOADER + UTILITIES
==================================================*/


/*====================================
SCROLL REVEAL
====================================*/

.fade-up,
.fade-left,
.fade-right,
.zoom-in{

    opacity:0;

    transition:all .8s ease;

    will-change:transform,opacity;

}

.fade-up{

    transform:translateY(40px);

}

.fade-left{

    transform:translateX(-40px);

}

.fade-right{

    transform:translateX(40px);

}

.zoom-in{

    transform:scale(.9);

}

/* JS adds .active */

.fade-up.active,
.fade-left.active,
.fade-right.active,
.zoom-in.active{

    opacity:1;

    transform:none;

}


/*====================================
COMMON TRANSITIONS
====================================*/

a,
button,
.card,
.product-card,
.intro-card,
.why-card,
.expertise-card,
.counter-card,
img{

    transition:all .35s ease;

}


/*====================================
IMAGE HOVER
====================================*/

.img-hover{

    overflow:hidden;

    border-radius:inherit;

}

.img-hover img{

    transition:transform .6s ease;

}

.img-hover:hover img{

    transform:scale(1.08);

}


/*====================================
PRELOADER
====================================*/

#preloader{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#ffffff;

    z-index:99999;

    transition:opacity .45s ease,
               visibility .45s ease;

}

#preloader.loaded{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


/*====================================
LOADER
====================================*/

.loader{

    display:flex;

    gap:12px;

}

.loader span{

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    animation:loaderBounce .8s ease infinite alternate;

}

.loader span:nth-child(2){

    animation-delay:.2s;

}

.loader span:nth-child(3){

    animation-delay:.4s;

}


/*====================================
KEYFRAMES
====================================*/

@keyframes loaderBounce{

    from{

        transform:translateY(0);

        opacity:.4;

    }

    to{

        transform:translateY(-18px);

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}


/*====================================
FLOATING ELEMENT
====================================*/

.float{

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

}


/*====================================
ROTATION
====================================*/

.rotate{

    animation:rotate 20s linear infinite;

}


/*====================================
PULSE
====================================*/

.pulse{

    animation:pulse 2.5s ease infinite;

}


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

#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:#fff;

    box-shadow:0 12px 30px rgba(0,86,179,.25);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:all .35s ease;

    z-index:999;

}

/* keep .show for JS compatibility */

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:none;

}

#backToTop:hover{

    background:var(--secondary);

}


/*====================================
SCROLL PROGRESS
====================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    z-index:100000;

}


/*====================================
REDUCED MOTION
====================================*/

@media(prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*====================================
PRINT
====================================*/

@media print{

    #preloader,
    #backToTop,
    .scroll-progress{

        display:none !important;

    }

}


/*====================================
GPU OPTIMIZATION
====================================*/

.fade-up,
.fade-left,
.fade-right,
.zoom-in,
.float,
.rotate{

    transform:translateZ(0);

    backface-visibility:hidden;

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 1B-1
HEADER + DESKTOP NAVIGATION
==================================================*/


/*====================================
HEADER
====================================*/

#header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:var(--header-height);

    display:flex;
    align-items:center;

    z-index:9999;

    transition:all .35s ease;

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

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(255,255,255,.15);

}


/*====================================
STICKY HEADER
====================================*/

#header.sticky{

    background:#ffffff;

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

    border-bottom:1px solid rgba(229,231,235,.8);

}


/*====================================
HEADER CONTAINER
====================================*/

#header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

}


/*====================================
LOGO
====================================*/

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    width:180px;

    height:auto;

    transition:transform .35s ease,
               width .35s ease;

}

#header.sticky .logo img{

    width:165px;

}

.logo:hover img{

    transform:scale(1.03);

}


/*====================================
NAVIGATION
====================================*/

#navbar{

    display:flex;

    align-items:center;

    margin-left:auto;

}

#navbar ul{

    display:flex;

    align-items:center;

    gap:34px;

}

#navbar li{

    position:relative;

}


/*====================================
NAV LINKS
====================================*/

#navbar a{

    position:relative;

    display:flex;

    align-items:center;

    font-size:16px;

    font-weight:600;

    color:#ffffff;

    transition:color .3s ease;

}


/* Sticky Navigation */

#header.sticky #navbar a{

    color:var(--dark);

}


/*====================================
HOVER
====================================*/

#navbar a:hover{

    color:var(--secondary);

}

#navbar a.active{

    color:var(--secondary);

    font-weight:700;

}


/*====================================
UNDERLINE
====================================*/

#navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    border-radius:20px;

    background:var(--secondary);

    transition:width .35s ease;

}

#navbar a:hover::after,

#navbar a.active::after{

    width:100%;

}


/*====================================
CTA BUTTON
====================================*/

.quote-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-left:35px;

    padding:13px 30px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--secondary),
        var(--primary)
    );

    color:#ffffff;

    font-weight:600;

    box-shadow:0 12px 28px rgba(0,188,212,.28);

    transition:all .35s ease;

}

.quote-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 38px rgba(0,188,212,.35);

}


/* Sticky Button */

#header.sticky .quote-btn{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

}


/*====================================
HEADER SHADOW CLASS
(JS SUPPORT)
====================================*/

.header-shadow{

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

}


/*====================================
DESKTOP ONLY
====================================*/

@media(min-width:992px){

    #navbar{

        display:flex !important;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 1B-2
MOBILE NAVIGATION + RESPONSIVE HEADER
==================================================*/


/*====================================
HAMBURGER MENU BUTTON
====================================*/

#menu-btn{

    display:none;

    width:48px;
    height:48px;

    align-items:center;
    justify-content:center;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

    color:#ffffff;

    font-size:24px;

    cursor:pointer;

    transition:all .35s ease;

}

#header.sticky #menu-btn{

    background:#f4f6f9;

    color:var(--dark);

}

#menu-btn:hover{

    background:var(--secondary);

    color:#ffffff;

    transform:rotate(90deg);

}


/*====================================
MENU ICON ANIMATION
====================================*/

#menu-btn i{

    transition:transform .35s ease;

}

#menu-btn.active i{

    transform:rotate(180deg);

}


/*====================================
OVERLAY
====================================*/

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:all .35s ease;

    z-index:9998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}


/*====================================
MOBILE NAVIGATION
====================================*/

@media (max-width:991px){

    #menu-btn{

        display:flex;

    }

    .quote-btn{

        display:none;

    }

    #navbar{

        position:fixed;

        top:0;
        right:-100%;

        width:320px;

        max-width:85%;

        height:100vh;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:flex-start;

        background:#ffffff;

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

        transition:right .40s ease;

        z-index:9999;

        overflow-y:auto;

    }

    #navbar.active{

        right:0;

    }

    #navbar ul{

        width:100%;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:100px 35px 50px;

    }

    #navbar li{

        width:100%;

    }

    #navbar a{

        display:flex;

        align-items:center;

        width:100%;

        padding:18px 0;

        font-size:17px;

        font-weight:600;

        color:var(--dark);

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

    }

    #navbar a::after{

        display:none;

    }

    #navbar a:hover{

        color:var(--primary);

        padding-left:10px;

    }

    #navbar a.active{

        color:var(--primary);

    }

}


/*====================================
TABLET
====================================*/

@media (max-width:768px){

    :root{

        --header-height:80px;

    }

    .logo img{

        width:155px;

    }

    section{

        padding:80px 0;

    }

    .container{

        width:92%;

    }

}


/*====================================
MOBILE
====================================*/

@media (max-width:576px){

    :root{

        --header-height:75px;

    }

    .logo img{

        width:140px;

    }

    #navbar{

        width:100%;

        max-width:100%;

    }

    #navbar ul{

        padding:90px 25px 40px;

    }

    #navbar a{

        font-size:16px;

        padding:16px 0;

    }

    #menu-btn{

        width:44px;

        height:44px;

        font-size:22px;

    }

}


/*====================================
SMALL MOBILE
====================================*/

@media (max-width:400px){

    .logo img{

        width:125px;

    }

    #navbar ul{

        padding:80px 20px 35px;

    }

}


/*====================================
ACCESSIBILITY
====================================*/

#navbar a:focus-visible,
#menu-btn:focus-visible,
.quote-btn:focus-visible{

    outline:3px solid rgba(0,188,212,.35);

    outline-offset:3px;

}


/*====================================
REDUCED MOTION
====================================*/

@media (prefers-reduced-motion:reduce){

    #navbar,
    #menu-btn,
    .menu-overlay{

        transition:none !important;

    }

}


/*====================================
PRINT
====================================*/

@media print{

    #header,
    #navbar,
    #menu-btn,
    .menu-overlay{

        display:none !important;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2A-1a
HERO SECTION
BACKGROUND + LAYOUT + CONTENT
==================================================*/


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

.hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:150px 0 100px;

    overflow:hidden;

    background:#081c3b;

    isolation:isolate;

}


/*====================================
BACKGROUND IMAGE
====================================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        url("../image/hero-bg.jpg")
        center center/cover
        no-repeat;

    z-index:-2;

    transform:scale(1.02);

}


/*====================================
GRADIENT OVERLAY
====================================*/

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(

        110deg,

        rgba(8,28,59,.88) 5%,

        rgba(8,28,59,.72) 45%,

        rgba(0,86,179,.45) 100%

    );

    z-index:-1;

}


/*====================================
OPTIONAL PATTERN
====================================*/

.hero-pattern{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.08;

    background-image:

    radial-gradient(circle at 25% 25%,
    rgba(255,255,255,.35) 1px,
    transparent 1px),

    radial-gradient(circle at 75% 70%,
    rgba(255,255,255,.35) 1px,
    transparent 1px);

    background-size:120px 120px;

    z-index:0;

}


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

.hero .container{

    position:relative;

    z-index:2;

}


.hero-wrapper{

    display:grid;

    grid-template-columns:

        1.1fr
        .9fr;

    align-items:center;

    gap:70px;

}


/*====================================
LEFT CONTENT
====================================*/

.hero-content{

    max-width:680px;

}


.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    margin-bottom:28px;

    border-radius:50px;

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

    backdrop-filter:blur(12px);

    color:#ffffff;

    font-size:.92rem;

    font-weight:600;

    letter-spacing:.5px;

}


.hero-tag i{

    color:var(--secondary);

}


/*====================================
TITLE
====================================*/

.hero-title{

    margin-bottom:28px;

    color:#ffffff;

    font-size:clamp(2.9rem,5vw,4.6rem);

    font-weight:800;

    line-height:1.15;

    letter-spacing:-1px;

}


.hero-title span{

    color:var(--secondary);

}


/*====================================
DESCRIPTION
====================================*/

.hero-description{

    max-width:620px;

    margin-bottom:40px;

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

    font-size:1.08rem;

    line-height:1.9;

}


/*====================================
FEATURE LIST
====================================*/

.hero-features{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:18px;

    margin-bottom:42px;

}


.hero-feature{

    display:flex;

    align-items:center;

    gap:14px;

    color:#ffffff;

    font-weight:500;

}


.hero-feature i{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--secondary);

    font-size:16px;

}


/*====================================
TEXT ANIMATION
====================================*/

.hero-title,
.hero-description,
.hero-feature{

    animation:fadeUp .9s ease forwards;

}

.hero-description{

    animation-delay:.2s;

}

.hero-feature:nth-child(1){

    animation-delay:.35s;

}

.hero-feature:nth-child(2){

    animation-delay:.45s;

}

.hero-feature:nth-child(3){

    animation-delay:.55s;

}

.hero-feature:nth-child(4){

    animation-delay:.65s;

}


/*====================================
GRADIENT LIGHT
====================================*/

.hero-light{

    position:absolute;

    width:520px;

    height:520px;

    left:-140px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(0,188,212,.22),

        transparent 70%

    );

    filter:blur(30px);

    pointer-events:none;

    z-index:0;

}


/*====================================
BOTTOM FADE
====================================*/

.hero-bottom-fade{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:140px;

    background:

    linear-gradient(

        to bottom,

        transparent,

        #ffffff

    );

    z-index:1;

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2A-1b
HERO BUTTONS + IMAGE + FLOATING ELEMENTS
==================================================*/


/*====================================
HERO BUTTON GROUP
====================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:45px;

}

.hero-buttons .btn-primary{

    min-width:190px;

}

.hero-buttons .btn-secondary{

    min-width:190px;

    color:#ffffff;

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

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

    backdrop-filter:blur(12px);

}

.hero-buttons .btn-secondary:hover{

    background:#ffffff;

    color:var(--primary);

    border-color:#ffffff;

}


/*====================================
RIGHT SIDE
====================================*/

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:560px;

    border-radius:24px;

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

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

}


/*====================================
IMAGE GLOW
====================================*/

.hero-image::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.28),
        transparent 72%
    );

    filter:blur(30px);

    z-index:-1;

}


/*====================================
FLOATING CARD
====================================*/

.hero-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

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

    border-radius:18px;

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

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

}

.hero-card i{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    font-size:22px;

}

.hero-card h4{

    margin:0;

    font-size:18px;

}

.hero-card span{

    display:block;

    font-size:14px;

    color:var(--gray);

}


/* Top Card */

.hero-card.card-top{

    top:35px;

    left:-45px;

}


/* Bottom Card */

.hero-card.card-bottom{

    right:-35px;

    bottom:45px;

    animation-delay:1.5s;

}


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

.hero-stats{

    display:flex;

    gap:35px;

    margin-top:20px;

    flex-wrap:wrap;

}

.hero-stat{

    display:flex;

    flex-direction:column;

}

.hero-stat h2{

    margin:0;

    color:#ffffff;

    font-size:2rem;

    font-weight:800;

}

.hero-stat span{

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

    font-size:.95rem;

}


/*====================================
DECORATIVE SHAPES
====================================*/

.hero-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

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

}

.hero-shape.one{

    width:110px;

    height:110px;

    right:6%;

    top:18%;

    background:rgba(0,188,212,.18);

}

.hero-shape.two{

    width:70px;

    height:70px;

    left:48%;

    bottom:12%;

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

    animation-delay:2s;

}

.hero-shape.three{

    width:32px;

    height:32px;

    right:18%;

    bottom:22%;

    background:var(--secondary);

    animation-delay:1s;

}


/*====================================
SCROLL INDICATOR
====================================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#ffffff;

    z-index:5;

}

.scroll-indicator span{

    margin-bottom:10px;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.8;

}

.scroll-indicator .mouse{

    width:30px;

    height:52px;

    border:2px solid rgba(255,255,255,.7);

    border-radius:25px;

    position:relative;

}

.scroll-indicator .mouse::before{

    content:"";

    position:absolute;

    left:50%;

    top:10px;

    width:6px;

    height:10px;

    margin-left:-3px;

    border-radius:20px;

    background:#ffffff;

    animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    30%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(16px);

    }

}


/*====================================
RESPONSIVE HERO IMAGE
====================================*/

@media(max-width:991px){

    .hero-image{

        margin-top:60px;

    }

    .hero-card{

        transform:scale(.9);

    }

}

@media(max-width:768px){

    .hero-card{

        display:none;

    }

    .hero-stats{

        justify-content:center;

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .scroll-indicator{

        display:none;

    }

}

@media(max-width:576px){

    .hero-image img{

        max-width:100%;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn-primary,

    .hero-buttons .btn-secondary{

        width:100%;

    }

    .hero-stats{

        gap:25px;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2B-1a
ABOUT SECTION
LAYOUT + IMAGE + EXPERIENCE BADGE
==================================================*/


/*====================================
ABOUT SECTION
====================================*/

.about{

    position:relative;

    padding:120px 0;

    background:#ffffff;

    overflow:hidden;

}

.about::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(0,188,212,.05);

    filter:blur(30px);

    pointer-events:none;

}


/*====================================
ABOUT WRAPPER
====================================*/

.about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}


/*====================================
IMAGE AREA
====================================*/

.about-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}


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

.about-image img{

    width:100%;

    max-width:520px;

    border-radius:24px;

    object-fit:cover;

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

}


/*====================================
SECONDARY IMAGE
====================================*/

.about-image-small{

    position:absolute;

    right:-40px;

    bottom:-35px;

    width:220px;

    border-radius:18px;

    overflow:hidden;

    background:#ffffff;

    padding:8px;

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

}

.about-image-small img{

    width:100%;

    border-radius:12px;

}


/*====================================
EXPERIENCE BADGE
====================================*/

.experience-badge{

    position:absolute;

    top:30px;

    left:-35px;

    width:150px;

    height:150px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    box-shadow:0 18px 40px rgba(0,86,179,.25);

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

}

.experience-badge h2{

    margin:0;

    color:#ffffff;

    font-size:2.4rem;

    font-weight:800;

    line-height:1;

}

.experience-badge span{

    margin-top:8px;

    font-size:.9rem;

    font-weight:600;

    line-height:1.4;

}


/*====================================
DECORATIVE DOTS
====================================*/

.about-dots{

    position:absolute;

    left:-25px;

    bottom:80px;

    width:120px;

    height:120px;

    opacity:.15;

    background-image:radial-gradient(
        var(--primary) 2px,
        transparent 2px
    );

    background-size:18px 18px;

}


/*====================================
BORDER FRAME
====================================*/

.about-frame{

    position:absolute;

    top:40px;

    left:40px;

    width:100%;

    height:100%;

    border:3px solid rgba(0,86,179,.12);

    border-radius:24px;

    z-index:-1;

}


/*====================================
BACKGROUND SHAPE
====================================*/

.about-shape{

    position:absolute;

    right:-80px;

    top:120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(0,86,179,.05);

    filter:blur(25px);

    pointer-events:none;

}


/*====================================
IMAGE HOVER EFFECT
====================================*/

.about-image:hover img{

    transform:scale(1.02);

}

.about-image img,

.about-image-small{

    transition:all .45s ease;

}

.about-image:hover .about-image-small{

    transform:translateY(-8px);

}


/*====================================
RESPONSIVE IMAGE LAYOUT
====================================*/

@media(max-width:991px){

    .about-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-image{

        order:-1;

    }

    .experience-badge{

        left:10px;

        top:10px;

    }

}

@media(max-width:768px){

    .about-image-small{

        display:none;

    }

    .about-frame{

        display:none;

    }

    .experience-badge{

        width:120px;

        height:120px;

    }

    .experience-badge h2{

        font-size:2rem;

    }

}

@media(max-width:576px){

    .about{

        padding:90px 0;

    }

    .about-image img{

        border-radius:18px;

    }

    .experience-badge{

        width:100px;

        height:100px;

    }

    .experience-badge h2{

        font-size:1.7rem;

    }

    .experience-badge span{

        font-size:.75rem;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2B-1b-1
ABOUT CONTENT + FEATURES
==================================================*/


/*====================================
ABOUT CONTENT
====================================*/

.about-content{

    position:relative;

}

.about-content .section-title{

    margin:0 0 30px;

    text-align:left;

}

.about-content h2{

    margin-bottom:22px;

    color:var(--dark);

}

.about-content p{

    margin-bottom:22px;

    color:var(--gray);

    line-height:1.9;

}


/*====================================
FEATURE GRID
====================================*/

.about-features{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:24px;

    margin:45px 0;

}


/*====================================
FEATURE CARD
====================================*/

.about-feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:22px;

    background:#ffffff;

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

    border-radius:18px;

    transition:all .35s ease;

    box-shadow:0 8px 20px rgba(0,0,0,.04);

}

.about-feature:hover{

    transform:translateY(-8px);

    border-color:rgba(0,86,179,.20);

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

}


/*====================================
FEATURE ICON
====================================*/

.about-feature-icon{

    flex-shrink:0;

    width:64px;

    height:64px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    font-size:26px;

    box-shadow:0 12px 25px rgba(0,86,179,.18);

}

.about-feature:hover .about-feature-icon{

    transform:rotate(8deg) scale(1.05);

}


/*====================================
FEATURE CONTENT
====================================*/

.about-feature-content{

    flex:1;

}

.about-feature-content h4{

    margin-bottom:10px;

    font-size:1.15rem;

    color:var(--dark);

}

.about-feature-content p{

    margin:0;

    font-size:.96rem;

    color:var(--gray);

    line-height:1.7;

}


/*====================================
CHECK LIST
====================================*/

.about-list{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:16px 28px;

    margin-top:35px;

}

.about-list li{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:var(--dark);

}

.about-list li i{

    width:32px;

    height:32px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(0,188,212,.12);

    color:var(--secondary);

    font-size:14px;

}


/*====================================
WHY AVATT BOX
====================================*/

.why-avatt{

    margin-top:45px;

    padding:30px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        rgba(0,86,179,.05),
        rgba(0,188,212,.05)
    );

    border:1px solid rgba(0,86,179,.08);

}

.why-avatt h3{

    margin-bottom:15px;

}

.why-avatt p{

    margin-bottom:0;

}


/*====================================
CONTENT ANIMATION
====================================*/

.about-content>*{

    animation:fadeUp .8s ease both;

}

.about-content>*:nth-child(2){

    animation-delay:.15s;

}

.about-content>*:nth-child(3){

    animation-delay:.30s;

}

.about-content>*:nth-child(4){

    animation-delay:.45s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

    .about-content{

        text-align:center;

    }

    .about-content .section-title{

        text-align:center;

    }

    .about-features{

        grid-template-columns:1fr;

    }

    .about-list{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .about-feature{

        padding:18px;

    }

    .about-feature-icon{

        width:56px;

        height:56px;

        font-size:22px;

    }

}

@media(max-width:576px){

    .why-avatt{

        padding:22px;

    }

    .about-feature{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .about-list li{

        justify-content:center;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2B-1b-2
ABOUT STATISTICS + CTA + RESPONSIVE
==================================================*/


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

.about-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

    margin:60px 0 45px;

}

.about-stat{

    text-align:center;

    padding:30px 20px;

    background:#ffffff;

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

    border-radius:20px;

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

    transition:all .35s ease;

}

.about-stat:hover{

    transform:translateY(-8px);

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

    border-color:rgba(0,86,179,.20);

}

.about-stat h2{

    margin:0 0 10px;

    color:var(--primary);

    font-size:2.4rem;

    font-weight:800;

    line-height:1;

}

.about-stat p{

    margin:0;

    color:var(--gray);

    font-size:.95rem;

    font-weight:600;

}


/*====================================
COUNTER ICON
====================================*/

.about-stat i{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:64px;

    height:64px;

    margin-bottom:18px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    font-size:24px;

    box-shadow:0 12px 28px rgba(0,86,179,.18);

}


/*====================================
ABOUT CTA
====================================*/

.about-cta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:35px;

    padding:35px 40px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    overflow:hidden;

    position:relative;

}

.about-cta::before{

    content:"";

    position:absolute;

    top:-80px;

    right:-80px;

    width:220px;

    height:220px;

    border-radius:50%;

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

}

.about-cta-content{

    position:relative;

    z-index:2;

}

.about-cta-content h3{

    margin-bottom:10px;

    color:#ffffff;

    font-size:2rem;

}

.about-cta-content p{

    margin:0;

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

}


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

.about-cta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    position:relative;

    z-index:2;

}

.about-cta-buttons .btn-primary{

    background:#ffffff;

    color:var(--primary);

    box-shadow:none;

}

.about-cta-buttons .btn-primary:hover{

    background:#f8fafc;

    transform:translateY(-3px);

}

.about-cta-buttons .btn-secondary{

    border:2px solid rgba(255,255,255,.45);

    color:#ffffff;

    background:transparent;

}

.about-cta-buttons .btn-secondary:hover{

    background:#ffffff;

    color:var(--primary);

    border-color:#ffffff;

}


/*====================================
ABOUT DIVIDER
====================================*/

.about-divider{

    width:100%;

    height:1px;

    margin:60px 0;

    background:linear-gradient(
        to right,
        transparent,
        rgba(0,86,179,.18),
        transparent
    );

}


/*====================================
ANIMATION DELAYS
====================================*/

.about-stat:nth-child(1){

    animation:fadeUp .8s ease both;
    animation-delay:.10s;

}

.about-stat:nth-child(2){

    animation:fadeUp .8s ease both;
    animation-delay:.20s;

}

.about-stat:nth-child(3){

    animation:fadeUp .8s ease both;
    animation-delay:.30s;

}

.about-stat:nth-child(4){

    animation:fadeUp .8s ease both;
    animation-delay:.40s;

}

.about-cta{

    animation:fadeUp .9s ease both;
    animation-delay:.45s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

    .about-stats{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:991px){

    .about-cta{

        flex-direction:column;

        text-align:center;

    }

    .about-cta-buttons{

        justify-content:center;

    }

}

@media(max-width:768px){

    .about-stats{

        gap:18px;

    }

    .about-stat{

        padding:25px 18px;

    }

    .about-stat h2{

        font-size:2rem;

    }

    .about-cta{

        padding:30px;

    }

    .about-cta-content h3{

        font-size:1.7rem;

    }

}

@media(max-width:576px){

    .about-stats{

        grid-template-columns:1fr;

    }

    .about-cta{

        padding:24px;

        border-radius:18px;

    }

    .about-cta-buttons{

        flex-direction:column;

        width:100%;

    }

    .about-cta-buttons .btn-primary,

    .about-cta-buttons .btn-secondary{

        width:100%;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2C-1a
WHY AVATT
SECTION LAYOUT + BACKGROUND + GRID
==================================================*/


/*====================================
WHY AVATT SECTION
====================================*/

.why-avatt-section{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 100%
    );

    overflow:hidden;

    isolation:isolate;

}


/*====================================
BACKGROUND SHAPES
====================================*/

.why-avatt-section::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(0,86,179,.05);

    filter:blur(40px);

    z-index:-2;

}

.why-avatt-section::after{

    content:"";

    position:absolute;

    right:-120px;

    bottom:-140px;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(0,188,212,.05);

    filter:blur(35px);

    z-index:-2;

}


/*====================================
DECORATIVE PATTERN
====================================*/

.why-pattern{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.05;

    background-image:

        radial-gradient(
            circle,
            var(--primary) 1.5px,
            transparent 1.5px
        );

    background-size:34px 34px;

    z-index:-1;

}


/*====================================
SECTION CONTAINER
====================================*/

.why-avatt-section .container{

    position:relative;

    z-index:2;

}


/*====================================
SECTION HEADER
====================================*/

.why-header{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

}

.why-header .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:22px;

    border-radius:50px;

    background:rgba(0,86,179,.08);

    color:var(--primary);

    font-size:.92rem;

    font-weight:600;

}

.why-header .section-tag i{

    color:var(--secondary);

}

.why-header h2{

    margin-bottom:20px;

    font-size:clamp(2.3rem,4vw,3.3rem);

    color:var(--dark);

}

.why-header h2 span{

    color:var(--primary);

}

.why-header p{

    max-width:720px;

    margin:0 auto;

    font-size:1.05rem;

    color:var(--gray);

    line-height:1.9;

}


/*====================================
SECTION DIVIDER
====================================*/

.why-divider{

    width:100px;

    height:4px;

    margin:28px auto;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}


/*====================================
FEATURE GRID
====================================*/

.why-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:30px;

    align-items:stretch;

}


/*====================================
GRID VARIANTS
====================================*/

.why-grid.two-column{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.why-grid.four-column{

    grid-template-columns:repeat(4,minmax(0,1fr));

}


/*====================================
CONTENT WRAPPER
====================================*/

.why-content{

    position:relative;

    z-index:2;

}


/*====================================
SECTION FOOTNOTE
====================================*/

.why-note{

    max-width:760px;

    margin:55px auto 0;

    text-align:center;

    color:var(--gray);

    line-height:1.8;

}


/*====================================
ENTRANCE ANIMATION
====================================*/

.why-header{

    animation:fadeUp .8s ease both;

}

.why-grid{

    animation:fadeUp .9s ease both;

    animation-delay:.15s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

    .why-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:991px){

    .why-avatt-section{

        padding:100px 0;

    }

    .why-header{

        margin-bottom:55px;

    }

}

@media(max-width:768px){

    .why-grid,

    .why-grid.two-column,

    .why-grid.four-column{

        grid-template-columns:1fr;

    }

    .why-header h2{

        font-size:2.2rem;

    }

}

@media(max-width:576px){

    .why-avatt-section{

        padding:80px 0;

    }

    .why-header{

        margin-bottom:45px;

    }

    .why-header .section-tag{

        font-size:.85rem;

        padding:8px 18px;

    }

    .why-divider{

        width:70px;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2C-1b
WHY AVATT
FEATURE CARDS + ICONS + HOVER EFFECTS
==================================================*/


/*====================================
FEATURE CARD
====================================*/

.why-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:40px 32px;

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

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(0,86,179,.08);

    border-radius:24px;

    overflow:hidden;

    transition:all .4s ease;

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

}

.why-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,86,179,.18);

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

}


/*====================================
TOP BORDER
====================================*/

.why-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .4s ease;

}

.why-card:hover::before{

    transform:scaleX(1);

}


/*====================================
BACKGROUND GLOW
====================================*/

.why-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:rgba(0,188,212,.08);

    transition:all .45s ease;

}

.why-card:hover::after{

    transform:scale(1.25);

}


/*====================================
CARD BADGE
====================================*/

.why-badge{

    position:absolute;

    top:22px;

    right:22px;

    padding:6px 14px;

    border-radius:50px;

    background:rgba(0,86,179,.08);

    color:var(--primary);

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

}


/*====================================
ICON CONTAINER
====================================*/

.why-icon{

    width:82px;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:26px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    font-size:34px;

    box-shadow:0 16px 35px rgba(0,86,179,.18);

    transition:all .4s ease;

}

.why-card:hover .why-icon{

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

}


/*====================================
CONTENT
====================================*/

.why-card h3{

    margin-bottom:18px;

    color:var(--dark);

    font-size:1.35rem;

}

.why-card p{

    margin:0;

    color:var(--gray);

    line-height:1.8;

}


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

.why-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:auto;

    padding-top:28px;

    font-weight:600;

    color:var(--primary);

    transition:all .3s ease;

}

.why-link i{

    transition:transform .3s ease;

}

.why-link:hover{

    color:var(--secondary);

}

.why-link:hover i{

    transform:translateX(6px);

}


/*====================================
STAGGER ANIMATION
====================================*/

.why-card{

    animation:fadeUp .8s ease both;

}

.why-card:nth-child(2){

    animation-delay:.12s;

}

.why-card:nth-child(3){

    animation-delay:.24s;

}

.why-card:nth-child(4){

    animation-delay:.36s;

}

.why-card:nth-child(5){

    animation-delay:.48s;

}

.why-card:nth-child(6){

    animation-delay:.60s;

}


/*====================================
ACTIVE CARD
====================================*/

.why-card.active{

    border-color:rgba(0,86,179,.20);

    box-shadow:0 22px 48px rgba(0,86,179,.14);

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

    .why-card{

        padding:34px 28px;

    }

}

@media(max-width:768px){

    .why-card{

        text-align:center;

        align-items:center;

    }

    .why-link{

        justify-content:center;

    }

}

@media(max-width:576px){

    .why-card{

        padding:28px 22px;

        border-radius:20px;

    }

    .why-icon{

        width:72px;

        height:72px;

        font-size:30px;

        margin-bottom:22px;

    }

    .why-card h3{

        font-size:1.2rem;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2D-1a
FEATURED PRODUCTS
SECTION LAYOUT + BACKGROUND + GRID
==================================================*/


/*====================================
PRODUCTS SECTION
====================================*/

.products-section{

    position:relative;

    padding:120px 0;

    background:#f8fbff;

    overflow:hidden;

    isolation:isolate;

}


/*====================================
BACKGROUND EFFECTS
====================================*/

.products-section::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-150px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(0,86,179,.05);

    filter:blur(45px);

    z-index:-2;

}

.products-section::after{

    content:"";

    position:absolute;

    left:-180px;

    bottom:-150px;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(0,188,212,.05);

    filter:blur(35px);

    z-index:-2;

}


/*====================================
DECORATIVE PATTERN
====================================*/

.products-pattern{

    position:absolute;

    inset:0;

    opacity:.05;

    pointer-events:none;

    background-image:

    radial-gradient(

        circle,

        var(--primary) 1.5px,

        transparent 1.5px

    );

    background-size:36px 36px;

    z-index:-1;

}


/*====================================
SECTION CONTAINER
====================================*/

.products-section .container{

    position:relative;

    z-index:2;

}


/*====================================
SECTION HEADER
====================================*/

.products-header{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.products-header .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:22px;

    border-radius:50px;

    background:rgba(0,86,179,.08);

    color:var(--primary);

    font-weight:600;

}

.products-header .section-tag i{

    color:var(--secondary);

}

.products-header h2{

    margin-bottom:20px;

    font-size:clamp(2.3rem,4vw,3.3rem);

}

.products-header h2 span{

    color:var(--primary);

}

.products-header p{

    max-width:720px;

    margin:auto;

    color:var(--gray);

    line-height:1.9;

}


/*====================================
HEADER DIVIDER
====================================*/

.products-divider{

    width:90px;

    height:4px;

    margin:28px auto;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--secondary)

    );

}


/*====================================
CATEGORY FILTER
====================================*/

.product-filter{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:55px;

}

.product-filter button{

    padding:13px 28px;

    border:none;

    border-radius:50px;

    background:#ffffff;

    color:var(--dark);

    font-weight:600;

    cursor:pointer;

    box-shadow:0 8px 22px rgba(0,0,0,.05);

    transition:all .35s ease;

}

.product-filter button:hover{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-3px);

}

.product-filter button.active{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:#ffffff;

}


/*====================================
PRODUCT GRID
====================================*/

.products-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:32px;

    align-items:stretch;

}


/*====================================
GRID VARIANTS
====================================*/

.products-grid.two-column{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.products-grid.four-column{

    grid-template-columns:repeat(4,minmax(0,1fr));

}


/*====================================
PRODUCT WRAPPER
====================================*/

.product-item{

    display:flex;

    height:100%;

}


/*====================================
LOADING PLACEHOLDER
====================================*/

.product-loading{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:220px;

    color:var(--gray);

    font-weight:600;

}


/*====================================
EMPTY STATE
====================================*/

.no-products{

    grid-column:1/-1;

    padding:60px 20px;

    text-align:center;

    color:var(--gray);

    background:#ffffff;

    border-radius:20px;

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

}


/*====================================
ENTRANCE ANIMATION
====================================*/

.products-header{

    animation:fadeUp .8s ease both;

}

.product-filter{

    animation:fadeUp .9s ease both;

    animation-delay:.1s;

}

.products-grid{

    animation:fadeUp 1s ease both;

    animation-delay:.2s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

    .products-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:991px){

    .products-section{

        padding:100px 0;

    }

}

@media(max-width:768px){

    .products-grid,

    .products-grid.two-column,

    .products-grid.four-column{

        grid-template-columns:1fr;

    }

    .product-filter{

        gap:12px;

    }

    .product-filter button{

        padding:11px 22px;

        font-size:.95rem;

    }

}

@media(max-width:576px){

    .products-section{

        padding:80px 0;

    }

    .products-header{

        margin-bottom:50px;

    }

    .products-header h2{

        font-size:2rem;

    }

    .product-filter{

        margin-bottom:40px;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2D-1b-1
PRODUCT CARDS + IMAGES + BADGES
==================================================*/


/*====================================
PRODUCT CARD
====================================*/

.product-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    background:#ffffff;

    border:1px solid rgba(0,86,179,.08);

    border-radius:24px;

    overflow:hidden;

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

    transition:all .4s ease;

}

.product-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,86,179,.20);

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

}


/*====================================
IMAGE WRAPPER
====================================*/

.product-image{

    position:relative;

    overflow:hidden;

    background:#f7f9fc;

    aspect-ratio:4/3;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}

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

    transform:scale(1.08);

}


/*====================================
IMAGE OVERLAY
====================================*/

.product-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(8,28,59,.18),

        transparent 60%

    );

    opacity:0;

    transition:opacity .35s ease;

}

.product-card:hover .product-image::after{

    opacity:1;

}


/*====================================
CATEGORY BADGE
====================================*/

.product-category{

    position:absolute;

    top:18px;

    left:18px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:50px;

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

    backdrop-filter:blur(10px);

    color:var(--primary);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

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

    z-index:2;

}

.product-category i{

    color:var(--secondary);

}


/*====================================
FEATURED RIBBON
====================================*/

.product-ribbon{

    position:absolute;

    top:18px;

    right:-42px;

    width:160px;

    padding:10px 0;

    text-align:center;

    background:linear-gradient(

        135deg,

        var(--secondary),

        var(--primary)

    );

    color:#ffffff;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    transform:rotate(45deg);

    box-shadow:0 8px 20px rgba(0,86,179,.20);

    z-index:3;

}


/*====================================
IMAGE ACTIONS
====================================*/

.product-actions{

    position:absolute;

    right:18px;

    bottom:18px;

    display:flex;

    flex-direction:column;

    gap:12px;

    opacity:0;

    transform:translateY(15px);

    transition:all .35s ease;

    z-index:4;

}

.product-card:hover .product-actions{

    opacity:1;

    transform:translateY(0);

}

.product-actions a{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#ffffff;

    color:var(--primary);

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

    transition:all .3s ease;

}

.product-actions a:hover{

    background:var(--primary);

    color:#ffffff;

}


/*====================================
STATUS BADGE
====================================*/

.product-status{

    position:absolute;

    bottom:18px;

    left:18px;

    padding:7px 14px;

    border-radius:50px;

    background:rgba(0,188,212,.95);

    color:#ffffff;

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    z-index:3;

}


/*====================================
IMAGE PLACEHOLDER
====================================*/

.product-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #eef4fb,
        #f8fbff
    );

    color:var(--primary);

    font-size:60px;

}


/*====================================
CARD SHINE EFFECT
====================================*/

.product-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:left .8s ease;

    z-index:5;

    pointer-events:none;

}

.product-card:hover::before{

    left:140%;

}


/*====================================
PRODUCT LABEL
====================================*/

.product-label{

    position:absolute;

    top:65px;

    left:18px;

    padding:6px 14px;

    border-radius:50px;

    background:rgba(8,28,59,.82);

    color:#ffffff;

    font-size:.72rem;

    font-weight:600;

    backdrop-filter:blur(10px);

    z-index:3;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:768px){

    .product-actions{

        opacity:1;

        transform:none;

        flex-direction:row;

    }

    .product-ribbon{

        width:145px;

        font-size:.68rem;

    }

}

@media(max-width:576px){

    .product-card{

        border-radius:20px;

    }

    .product-category{

        font-size:.70rem;

        padding:7px 13px;

    }

    .product-label{

        display:none;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2D-1b-2
PRODUCT CONTENT + BUTTONS + RESPONSIVE
==================================================*/


/*====================================
PRODUCT CONTENT
====================================*/

.product-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:28px;

}


/*====================================
PRODUCT TITLE
====================================*/

.product-title{

    margin-bottom:14px;

    font-size:1.4rem;

    font-weight:700;

    color:var(--dark);

    line-height:1.35;

    transition:color .3s ease;

}

.product-card:hover .product-title{

    color:var(--primary);

}


/*====================================
PRODUCT DESCRIPTION
====================================*/

.product-description{

    margin-bottom:24px;

    color:var(--gray);

    font-size:.97rem;

    line-height:1.8;

    flex-grow:1;

}


/*====================================
SPECIFICATIONS
====================================*/

.product-specs{

    display:grid;

    grid-template-columns:1fr;

    gap:12px;

    margin-bottom:24px;

}

.product-spec{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--dark);

    font-size:.92rem;

    font-weight:500;

}

.product-spec i{

    width:34px;

    height:34px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(0,188,212,.10);

    color:var(--secondary);

    font-size:14px;

}


/*====================================
FEATURE LIST
====================================*/

.product-features{

    margin-bottom:24px;

}

.product-features li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:8px 0;

    color:var(--gray);

    font-size:.92rem;

}

.product-features li i{

    color:var(--secondary);

    font-size:14px;

}


/*====================================
DIVIDER
====================================*/

.product-divider{

    width:100%;

    height:1px;

    margin:22px 0;

    background:rgba(0,86,179,.10);

}


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

.product-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    margin-top:auto;

}


/*====================================
PRODUCT META
====================================*/

.product-meta{

    display:flex;

    flex-direction:column;

}

.product-meta span{

    font-size:.82rem;

    color:var(--gray);

}

.product-meta strong{

    color:var(--primary);

    font-size:1rem;

    font-weight:700;

}


/*====================================
VIEW BUTTON
====================================*/

.product-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 26px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    font-weight:600;

    transition:all .35s ease;

    box-shadow:0 12px 25px rgba(0,86,179,.18);

}

.product-btn i{

    transition:transform .3s ease;

}

.product-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(0,86,179,.28);

}

.product-btn:hover i{

    transform:translateX(5px);

}


/*====================================
SECONDARY BUTTON
====================================*/

.product-btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:13px 24px;

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

    border-radius:50px;

    background:transparent;

    color:var(--primary);

    font-weight:600;

    transition:all .35s ease;

}

.product-btn-outline:hover{

    background:var(--primary);

    color:#ffffff;

}


/*====================================
CARD HOVER EFFECT
====================================*/

.product-card:hover .product-content{

    transform:translateY(-2px);

}

.product-content{

    transition:transform .35s ease;

}


/*====================================
ANIMATION
====================================*/

.product-card{

    animation:fadeUp .8s ease both;

}

.product-card:nth-child(2){

    animation-delay:.10s;

}

.product-card:nth-child(3){

    animation-delay:.20s;

}

.product-card:nth-child(4){

    animation-delay:.30s;

}

.product-card:nth-child(5){

    animation-delay:.40s;

}

.product-card:nth-child(6){

    animation-delay:.50s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

    .product-content{

        padding:24px;

    }

}

@media(max-width:768px){

    .product-footer{

        flex-direction:column;

        align-items:stretch;

    }

    .product-btn,

    .product-btn-outline{

        width:100%;

    }

}

@media(max-width:576px){

    .product-content{

        padding:20px;

    }

    .product-title{

        font-size:1.2rem;

    }

    .product-description{

        font-size:.92rem;

    }

    .product-spec{

        font-size:.88rem;

    }

    .product-btn,

    .product-btn-outline{

        padding:13px 20px;

        font-size:.95rem;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2E-1a-1
COMPANY EXPERTISE
SECTION + BACKGROUND + HEADER
==================================================*/


/*====================================
EXPERTISE SECTION
====================================*/

.expertise-section{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f7fbff 100%
    );

    overflow:hidden;

    isolation:isolate;

}


/*====================================
BACKGROUND GLOW
====================================*/

.expertise-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:rgba(0,86,179,.05);

    filter:blur(55px);

    z-index:-2;

}

.expertise-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(0,188,212,.05);

    filter:blur(45px);

    z-index:-2;

}


/*====================================
BACKGROUND PATTERN
====================================*/

.expertise-pattern{

    position:absolute;

    inset:0;

    opacity:.05;

    pointer-events:none;

    background-image:

        radial-gradient(
            circle,
            var(--primary) 1.5px,
            transparent 1.5px
        );

    background-size:38px 38px;

    z-index:-1;

}


/*====================================
DECORATIVE SHAPES
====================================*/

.expertise-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

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

}

.expertise-shape.one{

    width:90px;

    height:90px;

    top:12%;

    right:10%;

    background:rgba(0,188,212,.12);

}

.expertise-shape.two{

    width:42px;

    height:42px;

    left:8%;

    bottom:20%;

    background:rgba(0,86,179,.14);

    animation-delay:2s;

}

.expertise-shape.three{

    width:150px;

    height:150px;

    right:18%;

    bottom:8%;

    background:rgba(0,86,179,.05);

    animation-delay:1s;

}


/*====================================
SECTION CONTAINER
====================================*/

.expertise-section .container{

    position:relative;

    z-index:2;

}


/*====================================
SECTION HEADER
====================================*/

.expertise-header{

    max-width:860px;

    margin:0 auto 70px;

    text-align:center;

}


/*====================================
SECTION TAG
====================================*/

.expertise-header .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:22px;

    border-radius:50px;

    background:rgba(0,86,179,.08);

    color:var(--primary);

    font-size:.92rem;

    font-weight:600;

}

.expertise-header .section-tag i{

    color:var(--secondary);

}


/*====================================
HEADING
====================================*/

.expertise-header h2{

    margin-bottom:20px;

    font-size:clamp(2.3rem,4vw,3.3rem);

    color:var(--dark);

}

.expertise-header h2 span{

    color:var(--primary);

}


/*====================================
DESCRIPTION
====================================*/

.expertise-header p{

    max-width:740px;

    margin:0 auto;

    color:var(--gray);

    font-size:1.05rem;

    line-height:1.9;

}


/*====================================
SECTION DIVIDER
====================================*/

.expertise-divider{

    width:95px;

    height:4px;

    margin:28px auto;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}


/*====================================
INTRO TEXT
====================================*/

.expertise-intro{

    max-width:900px;

    margin:0 auto 60px;

    text-align:center;

}

.expertise-intro p{

    font-size:1.05rem;

    line-height:1.9;

    color:var(--gray);

}


/*====================================
HEADER ANIMATION
====================================*/

.expertise-header{

    animation:fadeUp .8s ease both;

}

.expertise-intro{

    animation:fadeUp .9s ease both;

    animation-delay:.15s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

    .expertise-section{

        padding:100px 0;

    }

    .expertise-header{

        margin-bottom:55px;

    }

}

@media(max-width:768px){

    .expertise-header h2{

        font-size:2.2rem;

    }

    .expertise-intro{

        margin-bottom:45px;

    }

}

@media(max-width:576px){

    .expertise-section{

        padding:80px 0;

    }

    .expertise-header{

        margin-bottom:45px;

    }

    .expertise-header .section-tag{

        padding:8px 18px;

        font-size:.85rem;

    }

    .expertise-divider{

        width:70px;

    }

    .expertise-intro p{

        font-size:1rem;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2E-1a-2
EXPERTISE GRID + LAYOUT HELPERS
==================================================*/


/*====================================
EXPERTISE WRAPPER
====================================*/

.expertise-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:flex-start;

}


/*====================================
LEFT COLUMN
====================================*/

.expertise-left{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:30px;

}


/*====================================
RIGHT COLUMN
====================================*/

.expertise-right{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:30px;

}


/*====================================
PROCESS WRAPPER
====================================*/

.expertise-process{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:32px;

}


/*====================================
TIMELINE
====================================*/

.expertise-process::before{

    content:"";

    position:absolute;

    left:36px;

    top:10px;

    bottom:10px;

    width:3px;

    border-radius:20px;

    background:linear-gradient(

        to bottom,

        var(--primary),

        var(--secondary)

    );

    opacity:.15;

}


/*====================================
GRID HELPERS
====================================*/

.expertise-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:30px;

}

.expertise-grid.three-column{

    grid-template-columns:repeat(3,minmax(0,1fr));

}

.expertise-grid.four-column{

    grid-template-columns:repeat(4,minmax(0,1fr));

}


/*====================================
INTRO PANEL
====================================*/

.expertise-panel{

    padding:36px;

    background:#ffffff;

    border:1px solid rgba(0,86,179,.08);

    border-radius:24px;

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

}

.expertise-panel h3{

    margin-bottom:18px;

    color:var(--dark);

}

.expertise-panel p{

    margin-bottom:0;

    color:var(--gray);

    line-height:1.8;

}


/*====================================
HIGHLIGHT BOX
====================================*/

.expertise-highlight{

    display:flex;

    align-items:center;

    gap:18px;

    padding:24px;

    border-radius:20px;

    background:linear-gradient(

        135deg,

        rgba(0,86,179,.05),

        rgba(0,188,212,.05)

    );

    border:1px solid rgba(0,86,179,.08);

}

.expertise-highlight i{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:#ffffff;

    font-size:26px;

}

.expertise-highlight h4{

    margin-bottom:8px;

}

.expertise-highlight p{

    margin:0;

}


/*====================================
SECTION FOOTNOTE
====================================*/

.expertise-note{

    max-width:820px;

    margin:60px auto 0;

    text-align:center;

    color:var(--gray);

    line-height:1.8;

}


/*====================================
ANIMATIONS
====================================*/

.expertise-wrapper{

    animation:fadeUp .9s ease both;

    animation-delay:.2s;

}

.expertise-panel{

    animation:fadeUp .8s ease both;

}

.expertise-highlight{

    animation:fadeUp .8s ease both;

    animation-delay:.15s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

    .expertise-grid.four-column{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:991px){

    .expertise-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }

    .expertise-grid,

    .expertise-grid.three-column{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .expertise-process::before{

        display:none;

    }

    .expertise-grid,

    .expertise-grid.three-column,

    .expertise-grid.four-column{

        grid-template-columns:1fr;

    }

    .expertise-panel{

        padding:28px;

    }

}

@media(max-width:576px){

    .expertise-highlight{

        flex-direction:column;

        text-align:center;

    }

    .expertise-panel{

        padding:22px;

        border-radius:20px;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2E-1b-1
EXPERTISE CARDS + PROCESS ITEMS
==================================================*/


/*====================================
EXPERTISE CARD
====================================*/

.expertise-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:36px 32px;

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

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(0,86,179,.08);

    border-radius:24px;

    overflow:hidden;

    transition:all .4s ease;

    box-shadow:0 12px 32px rgba(0,0,0,.05);

}

.expertise-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,86,179,.18);

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

}


/*====================================
TOP ACCENT
====================================*/

.expertise-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .4s ease;

}

.expertise-card:hover::before{

    transform:scaleX(1);

}


/*====================================
BACKGROUND GLOW
====================================*/

.expertise-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:rgba(0,188,212,.08);

    transition:.4s ease;

}

.expertise-card:hover::after{

    transform:scale(1.25);

}


/*====================================
STEP NUMBER
====================================*/

.expertise-number{

    position:absolute;

    top:22px;

    right:22px;

    width:44px;

    height:44px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(0,86,179,.08);

    color:var(--primary);

    font-size:.95rem;

    font-weight:700;

}


/*====================================
ICON
====================================*/

.expertise-icon{

    width:84px;

    height:84px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:26px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    font-size:34px;

    box-shadow:0 16px 35px rgba(0,86,179,.18);

    transition:all .35s ease;

}

.expertise-card:hover .expertise-icon{

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

}


/*====================================
TITLE
====================================*/

.expertise-card h3{

    margin-bottom:18px;

    color:var(--dark);

    font-size:1.35rem;

}

.expertise-card p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:22px;

}


/*====================================
PROCESS ITEM
====================================*/

.process-item{

    position:relative;

    padding-left:95px;

}

.process-item:not(:last-child){

    margin-bottom:34px;

}

.process-item::before{

    content:"";

    position:absolute;

    left:22px;

    top:16px;

    width:32px;

    height:32px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:0 8px 20px rgba(0,86,179,.18);

}

.process-item::after{

    content:"";

    position:absolute;

    left:37px;

    top:48px;

    width:2px;

    bottom:-34px;

    background:rgba(0,86,179,.15);

}

.process-item:last-child::after{

    display:none;

}


/*====================================
PROCESS CONTENT
====================================*/

.process-content{

    padding:24px;

    border-radius:20px;

    background:#ffffff;

    border:1px solid rgba(0,86,179,.08);

    transition:.35s ease;

}

.process-item:hover .process-content{

    border-color:rgba(0,86,179,.18);

    box-shadow:0 16px 35px rgba(0,0,0,.08);

}

.process-content h4{

    margin-bottom:10px;

}

.process-content p{

    margin:0;

}


/*====================================
CARD TAG
====================================*/

.expertise-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:7px 14px;

    margin-bottom:18px;

    border-radius:50px;

    background:rgba(0,188,212,.08);

    color:var(--secondary);

    font-size:.75rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}


/*====================================
FEATURE LIST
====================================*/

.expertise-list{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:auto;

}

.expertise-list li{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--gray);

    font-size:.95rem;

}

.expertise-list i{

    color:var(--secondary);

}


/*====================================
STAGGER ANIMATION
====================================*/

.expertise-card{

    animation:fadeUp .8s ease both;

}

.expertise-card:nth-child(2){

    animation-delay:.10s;

}

.expertise-card:nth-child(3){

    animation-delay:.20s;

}

.expertise-card:nth-child(4){

    animation-delay:.30s;

}

.process-item{

    animation:fadeUp .8s ease both;

}

.process-item:nth-child(2){

    animation-delay:.15s;

}

.process-item:nth-child(3){

    animation-delay:.30s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:768px){

    .process-item{

        padding-left:0;

    }

    .process-item::before,

    .process-item::after{

        display:none;

    }

    .expertise-card{

        text-align:center;

        align-items:center;

    }

}

@media(max-width:576px){

    .expertise-card{

        padding:28px 22px;

        border-radius:20px;

    }

    .expertise-icon{

        width:72px;

        height:72px;

        font-size:30px;

    }

    .expertise-card h3{

        font-size:1.2rem;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2E-1b-2
EXPERTISE STATS + CTA + RESPONSIVE
==================================================*/


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

.expertise-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

    margin:60px 0;

}

.expertise-stat{

    text-align:center;

    padding:30px 22px;

    background:#ffffff;

    border:1px solid rgba(0,86,179,.08);

    border-radius:22px;

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

    transition:all .35s ease;

}

.expertise-stat:hover{

    transform:translateY(-8px);

    border-color:rgba(0,86,179,.18);

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

}

.expertise-stat i{

    width:68px;

    height:68px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-bottom:18px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    font-size:26px;

    box-shadow:0 12px 28px rgba(0,86,179,.18);

}

.expertise-stat h2{

    margin:0 0 10px;

    color:var(--primary);

    font-size:2.4rem;

    font-weight:800;

}

.expertise-stat p{

    margin:0;

    color:var(--gray);

    font-weight:600;

}


/*====================================
PROGRESS BARS
====================================*/

.expertise-progress{

    margin-top:28px;

}

.progress-item{

    margin-bottom:22px;

}

.progress-item:last-child{

    margin-bottom:0;

}

.progress-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.progress-header span{

    font-size:.95rem;

    font-weight:600;

    color:var(--dark);

}

.progress-track{

    height:8px;

    border-radius:50px;

    overflow:hidden;

    background:#e7edf5;

}

.progress-bar{

    width:0;

    height:100%;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transition:width 1.5s ease;

}


/*====================================
CTA BLOCK
====================================*/

.expertise-cta{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:35px;

    margin-top:60px;

    padding:40px;

    border-radius:26px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    overflow:hidden;

}

.expertise-cta::before{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    top:-100px;

    right:-80px;

    border-radius:50%;

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

}

.expertise-cta-content{

    position:relative;

    z-index:2;

    max-width:620px;

}

.expertise-cta-content h3{

    margin-bottom:12px;

    color:#ffffff;

    font-size:2rem;

}

.expertise-cta-content p{

    margin:0;

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

}


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

.expertise-actions{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    position:relative;

    z-index:2;

}

.expertise-actions .btn-primary{

    background:#ffffff;

    color:var(--primary);

    box-shadow:none;

}

.expertise-actions .btn-primary:hover{

    background:#f4f7fb;

}

.expertise-actions .btn-secondary{

    border:2px solid rgba(255,255,255,.40);

    color:#ffffff;

    background:transparent;

}

.expertise-actions .btn-secondary:hover{

    background:#ffffff;

    color:var(--primary);

}


/*====================================
LEARN MORE LINK
====================================*/

.learn-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:24px;

    color:var(--primary);

    font-weight:600;

    transition:all .3s ease;

}

.learn-more i{

    transition:transform .3s ease;

}

.learn-more:hover{

    color:var(--secondary);

}

.learn-more:hover i{

    transform:translateX(5px);

}


/*====================================
DIVIDER
====================================*/

.expertise-divider-line{

    width:100%;

    height:1px;

    margin:55px 0;

    background:linear-gradient(
        to right,
        transparent,
        rgba(0,86,179,.16),
        transparent
    );

}


/*====================================
ANIMATION
====================================*/

.expertise-stat{

    animation:fadeUp .8s ease both;

}

.expertise-stat:nth-child(2){

    animation-delay:.10s;

}

.expertise-stat:nth-child(3){

    animation-delay:.20s;

}

.expertise-stat:nth-child(4){

    animation-delay:.30s;

}

.expertise-cta{

    animation:fadeUp .9s ease both;

    animation-delay:.35s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

    .expertise-stats{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:991px){

    .expertise-cta{

        flex-direction:column;

        text-align:center;

    }

    .expertise-actions{

        justify-content:center;

    }

}

@media(max-width:768px){

    .expertise-cta{

        padding:30px;

    }

    .expertise-cta-content h3{

        font-size:1.7rem;

    }

}

@media(max-width:576px){

    .expertise-stats{

        grid-template-columns:1fr;

    }

    .expertise-stat{

        padding:24px 20px;

    }

    .expertise-stat h2{

        font-size:2rem;

    }

    .expertise-cta{

        padding:24px;

        border-radius:20px;

    }

    .expertise-actions{

        flex-direction:column;

        width:100%;

    }

    .expertise-actions .btn-primary,

    .expertise-actions .btn-secondary{

        width:100%;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2F-1a
CUSTOMER LOGO CAROUSEL
SECTION + BACKGROUND + WRAPPER
==================================================*/


/*====================================
TRUSTED BY SECTION
====================================*/

.clients-section{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 100%
    );

    overflow:hidden;

    isolation:isolate;

}


/*====================================
BACKGROUND GLOW
====================================*/

.clients-section::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(0,86,179,.05);

    filter:blur(45px);

    z-index:-2;

}

.clients-section::after{

    content:"";

    position:absolute;

    right:-160px;

    bottom:-180px;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(0,188,212,.05);

    filter:blur(35px);

    z-index:-2;

}


/*====================================
DOT PATTERN
====================================*/

.clients-pattern{

    position:absolute;

    inset:0;

    opacity:.05;

    pointer-events:none;

    background-image:

    radial-gradient(

        circle,

        var(--primary) 1.5px,

        transparent 1.5px

    );

    background-size:36px 36px;

    z-index:-1;

}


/*====================================
CONTAINER
====================================*/

.clients-section .container{

    position:relative;

    z-index:2;

}


/*====================================
HEADER
====================================*/

.clients-header{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

}

.clients-header .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:22px;

    border-radius:50px;

    background:rgba(0,86,179,.08);

    color:var(--primary);

    font-size:.92rem;

    font-weight:600;

}

.clients-header .section-tag i{

    color:var(--secondary);

}

.clients-header h2{

    margin-bottom:20px;

    font-size:clamp(2.3rem,4vw,3.3rem);

    color:var(--dark);

}

.clients-header h2 span{

    color:var(--primary);

}

.clients-header p{

    max-width:720px;

    margin:auto;

    color:var(--gray);

    line-height:1.9;

}


/*====================================
DIVIDER
====================================*/

.clients-divider{

    width:90px;

    height:4px;

    margin:28px auto;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}


/*====================================
CAROUSEL WRAPPER
====================================*/

.clients-carousel{

    position:relative;

    overflow:hidden;

    width:100%;

    padding:18px 0;

}


/* Fade Edges */

.clients-carousel::before,

.clients-carousel::after{

    content:"";

    position:absolute;

    top:0;

    width:140px;

    height:100%;

    z-index:5;

    pointer-events:none;

}

.clients-carousel::before{

    left:0;

    background:linear-gradient(
        to right,
        #f8fbff,
        transparent
    );

}

.clients-carousel::after{

    right:0;

    background:linear-gradient(
        to left,
        #f8fbff,
        transparent
    );

}


/*====================================
TRACK
====================================*/

.clients-track{

    display:flex;

    align-items:center;

    gap:28px;

    width:max-content;

    will-change:transform;

}


/*====================================
ROW VARIANTS
====================================*/

.clients-row{

    display:flex;

    gap:28px;

    align-items:center;

}

.clients-row.reverse{

    flex-direction:row-reverse;

}


/*====================================
LOADING STATE
====================================*/

.clients-loading{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:180px;

    color:var(--gray);

    font-weight:600;

}


/*====================================
HEADER ANIMATION
====================================*/

.clients-header{

    animation:fadeUp .8s ease both;

}

.clients-carousel{

    animation:fadeUp .9s ease both;

    animation-delay:.15s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

    .clients-section{

        padding:100px 0;

    }

}

@media(max-width:768px){

    .clients-header{

        margin-bottom:50px;

    }

    .clients-carousel::before,

    .clients-carousel::after{

        width:70px;

    }

}

@media(max-width:576px){

    .clients-section{

        padding:80px 0;

    }

    .clients-header h2{

        font-size:2rem;

    }

    .clients-header .section-tag{

        padding:8px 18px;

        font-size:.85rem;

    }

    .clients-divider{

        width:70px;

    }

    .clients-track{

        gap:18px;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2F-1b
LOGO CARDS + AUTO SCROLL
==================================================*/


/*====================================
LOGO CARD
====================================*/

.client-logo{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    width:210px;

    height:110px;

    padding:22px;

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

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(0,86,179,.08);

    border-radius:22px;

    overflow:hidden;

    transition:all .35s ease;

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

}


/*====================================
BACKGROUND GLOW
====================================*/

.client-logo::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,86,179,.04),
        rgba(0,188,212,.05)
    );

    opacity:0;

    transition:opacity .35s ease;

}

.client-logo:hover::before{

    opacity:1;

}


/*====================================
TOP BORDER
====================================*/

.client-logo::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

.client-logo:hover::after{

    transform:scaleX(1);

}


/*====================================
LOGO IMAGE
====================================*/

.client-logo img{

    position:relative;

    z-index:2;

    max-width:150px;

    max-height:58px;

    width:auto;

    height:auto;

    object-fit:contain;

    filter:grayscale(100%) opacity(.70);

    transition:all .35s ease;

}

.client-logo:hover img{

    filter:none;

    transform:scale(1.08);

}


/*====================================
HOVER
====================================*/

.client-logo:hover{

    transform:translateY(-8px);

    border-color:rgba(0,86,179,.16);

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

}


/*====================================
INFINITE SCROLL
====================================*/

.clients-track{

    animation:clientsScroll 34s linear infinite;

}

.clients-carousel:hover .clients-track{

    animation-play-state:paused;

}


/*====================================
OPTIONAL SPEEDS
====================================*/

.clients-track.fast{

    animation-duration:22s;

}

.clients-track.slow{

    animation-duration:46s;

}


/*====================================
REVERSE
====================================*/

.clients-track.reverse{

    animation-name:clientsReverse;

}


/*====================================
KEYFRAMES
====================================*/

@keyframes clientsScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@keyframes clientsReverse{

    from{

        transform:translateX(-50%);

    }

    to{

        transform:translateX(0);

    }

}


/*====================================
SHINE EFFECT
====================================*/

.client-logo .shine{

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    background:linear-gradient(

        to right,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

}

.client-logo:hover .shine{

    animation:logoShine .9s ease;

}

@keyframes logoShine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}


/*====================================
ACTIVE STATE
====================================*/

.client-logo.active{

    border-color:rgba(0,188,212,.25);

    box-shadow:0 20px 45px rgba(0,188,212,.12);

}

.client-logo.active img{

    filter:none;

}


/*====================================
ACCESSIBILITY
====================================*/

.client-logo:focus-visible{

    outline:3px solid rgba(0,188,212,.45);

    outline-offset:4px;

}


/*====================================
PERFORMANCE
====================================*/

.clients-track,

.client-logo,

.client-logo img{

    will-change:transform;

    transform:translateZ(0);

    backface-visibility:hidden;

}


/*====================================
REDUCED MOTION
====================================*/

@media(prefers-reduced-motion:reduce){

    .clients-track{

        animation:none;

    }

    .client-logo,

    .client-logo img{

        transition:none;

    }

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

    .client-logo{

        width:180px;

        height:95px;

    }

}

@media(max-width:768px){

    .clients-track{

        gap:18px;

    }

    .client-logo{

        width:160px;

        height:88px;

        border-radius:18px;

    }

    .client-logo img{

        max-width:120px;

        max-height:45px;

    }

}

@media(max-width:576px){

    .client-logo{

        width:135px;

        height:75px;

        padding:16px;

    }

    .client-logo img{

        max-width:95px;

        max-height:36px;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2G-1a
CALL TO ACTION
SECTION + LAYOUT + BACKGROUND
==================================================*/


/*====================================
CTA SECTION
====================================*/

.cta-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #0056b3 0%,
        #0078d4 45%,
        #00bcd4 100%
    );

    isolation:isolate;

}


/*====================================
BACKGROUND OVERLAY
====================================*/

.cta-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at 15% 20%,
        rgba(255,255,255,.12),
        transparent 35%),

        radial-gradient(circle at 85% 80%,
        rgba(255,255,255,.08),
        transparent 40%);

    z-index:-2;

}


/*====================================
GRID PATTERN
====================================*/

.cta-pattern{

    position:absolute;

    inset:0;

    opacity:.08;

    background-image:

        linear-gradient(
            rgba(255,255,255,.18) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.18) 1px,
            transparent 1px
        );

    background-size:45px 45px;

    pointer-events:none;

    z-index:-1;

}


/*====================================
DECORATIVE CIRCLES
====================================*/

.cta-circle{

    position:absolute;

    border-radius:50%;

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

    filter:blur(2px);

}

.cta-circle.one{

    width:280px;

    height:280px;

    top:-120px;

    right:-80px;

}

.cta-circle.two{

    width:200px;

    height:200px;

    bottom:-80px;

    left:-60px;

}

.cta-circle.three{

    width:120px;

    height:120px;

    top:45%;

    right:18%;

}


/*====================================
CONTAINER
====================================*/

.cta-section .container{

    position:relative;

    z-index:5;

}


/*====================================
CTA WRAPPER
====================================*/

.cta-wrapper{

    display:grid;

    grid-template-columns:1.3fr .7fr;

    align-items:center;

    gap:70px;

}


/*====================================
CONTENT
====================================*/

.cta-content{

    color:#ffffff;

}

.cta-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:24px;

    border-radius:50px;

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

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

    backdrop-filter:blur(12px);

    color:#ffffff;

    font-size:.92rem;

    font-weight:600;

}

.cta-tag i{

    color:#ffe082;

}

.cta-content h2{

    margin-bottom:22px;

    color:#ffffff;

    font-size:clamp(2.5rem,5vw,3.8rem);

    line-height:1.15;

    font-weight:800;

}

.cta-content p{

    max-width:700px;

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

    font-size:1.08rem;

    line-height:1.9;

}


/*====================================
BUTTON WRAPPER
====================================*/

.cta-actions{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:40px;

}


/*====================================
RIGHT PANEL
====================================*/

.cta-side{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}


/*====================================
GLASS CARD
====================================*/

.cta-card{

    position:relative;

    width:100%;

    max-width:360px;

    padding:40px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

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

    color:#ffffff;

}


/*====================================
FLOATING SHAPES
====================================*/

.cta-float{

    position:absolute;

    border-radius:50%;

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

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

}

.cta-float.small{

    width:20px;

    height:20px;

    top:30px;

    left:20px;

}

.cta-float.medium{

    width:32px;

    height:32px;

    right:30px;

    bottom:40px;

    animation-delay:1.5s;

}

.cta-float.large{

    width:48px;

    height:48px;

    top:50%;

    left:-24px;

    animation-delay:3s;

}


/*====================================
ENTRANCE ANIMATION
====================================*/

.cta-content{

    animation:fadeLeft .9s ease both;

}

.cta-side{

    animation:fadeRight .9s ease both;

    animation-delay:.2s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

    .cta-wrapper{

        gap:50px;

    }

}

@media(max-width:991px){

    .cta-wrapper{

        grid-template-columns:1fr;

        text-align:center;

    }

    .cta-content p{

        margin:0 auto;

    }

    .cta-actions{

        justify-content:center;

    }

    .cta-side{

        margin-top:20px;

    }

}

@media(max-width:768px){

    .cta-section{

        padding:90px 0;

    }

    .cta-card{

        padding:32px;

    }

}

@media(max-width:576px){

    .cta-section{

        padding:75px 0;

    }

    .cta-content h2{

        font-size:2rem;

    }

    .cta-card{

        padding:26px;

        border-radius:22px;

    }

    .cta-actions{

        flex-direction:column;

    }

    .cta-actions .btn-primary,

    .cta-actions .btn-secondary{

        width:100%;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2G-1b
CTA BUTTONS + FEATURES + CONTACT
==================================================*/


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

.cta-actions .btn-primary{

    background:#ffffff;

    color:var(--primary);

    border:2px solid #ffffff;

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

}

.cta-actions .btn-primary:hover{

    background:#f5f9ff;

    color:var(--primary);

    transform:translateY(-4px);

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

}

.cta-actions .btn-secondary{

    background:transparent;

    color:#ffffff;

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

}

.cta-actions .btn-secondary:hover{

    background:#ffffff;

    color:var(--primary);

    border-color:#ffffff;

    transform:translateY(-4px);

}


/*====================================
CTA CARD ICON
====================================*/

.cta-card-icon{

    width:78px;

    height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    border-radius:22px;

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

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

    color:#ffffff;

    font-size:32px;

}

.cta-card h3{

    margin-bottom:14px;

    color:#ffffff;

}

.cta-card p{

    margin-bottom:28px;

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

    line-height:1.8;

}


/*====================================
FEATURE LIST
====================================*/

.cta-features{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin:0;

    padding:0;

    list-style:none;

}

.cta-features li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    color:#ffffff;

    line-height:1.7;

}

.cta-features i{

    width:28px;

    height:28px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#ffe082;

    font-size:.85rem;

}


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

.cta-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-top:36px;

}

.cta-stat{

    text-align:center;

    padding:20px 16px;

    border-radius:18px;

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

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

    transition:all .35s ease;

}

.cta-stat:hover{

    transform:translateY(-6px);

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

}

.cta-stat h4{

    margin-bottom:6px;

    color:#ffffff;

    font-size:1.8rem;

    font-weight:800;

}

.cta-stat span{

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

    font-size:.92rem;

}


/*====================================
CONTACT BOX
====================================*/

.cta-contact{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-top:36px;

    padding-top:28px;

    border-top:1px solid rgba(255,255,255,.18);

}

.cta-contact-item{

    display:flex;

    align-items:center;

    gap:16px;

}

.cta-contact-icon{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

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

    color:#ffe082;

    font-size:20px;

}

.cta-contact-content{

    display:flex;

    flex-direction:column;

}

.cta-contact-content small{

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

    margin-bottom:3px;

}

.cta-contact-content a,

.cta-contact-content span{

    color:#ffffff;

    font-weight:600;

    text-decoration:none;

}

.cta-contact-content a:hover{

    color:#ffe082;

}


/*====================================
GLOW EFFECT
====================================*/

.cta-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        transparent,
        rgba(255,255,255,.08)
    );

    opacity:0;

    transition:opacity .35s ease;

    z-index:-1;

}

.cta-card:hover::before{

    opacity:1;

}

.cta-card:hover{

    transform:translateY(-10px);

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

}


/*====================================
SHINE EFFECT
====================================*/

.cta-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:50%;

    height:100%;

    background:linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transform:skewX(-25deg);

}

.cta-card:hover::after{

    animation:ctaShine .9s ease;

}

@keyframes ctaShine{

    from{

        left:-130%;

    }

    to{

        left:150%;

    }

}


/*====================================
ANIMATION STAGGER
====================================*/

.cta-features li{

    animation:fadeUp .8s ease both;

}

.cta-features li:nth-child(2){

    animation-delay:.10s;

}

.cta-features li:nth-child(3){

    animation-delay:.20s;

}

.cta-features li:nth-child(4){

    animation-delay:.30s;

}

.cta-stat{

    animation:fadeUp .8s ease both;

}

.cta-stat:nth-child(2){

    animation-delay:.15s;

}

.cta-stat:nth-child(3){

    animation-delay:.30s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

    .cta-stats{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:768px){

    .cta-stats{

        grid-template-columns:1fr;

    }

    .cta-contact-item{

        align-items:flex-start;

    }

}

@media(max-width:576px){

    .cta-card-icon{

        width:64px;

        height:64px;

        font-size:28px;

    }

    .cta-stat{

        padding:18px;

    }

    .cta-contact-icon{

        width:46px;

        height:46px;

        border-radius:14px;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2H-1a
CONTACT PREVIEW
SECTION + LAYOUT + BACKGROUND
==================================================*/


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

.contact-section{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbff 100%
    );

    overflow:hidden;

    isolation:isolate;

}


/*====================================
BACKGROUND DECORATION
====================================*/

.contact-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(0,86,179,.05);

    filter:blur(45px);

    z-index:-2;

}

.contact-section::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    right:-140px;

    bottom:-140px;

    border-radius:50%;

    background:rgba(0,188,212,.05);

    filter:blur(35px);

    z-index:-2;

}


/*====================================
PATTERN
====================================*/

.contact-pattern{

    position:absolute;

    inset:0;

    opacity:.04;

    pointer-events:none;

    background-image:

    radial-gradient(

        rgba(0,86,179,.25) 1px,

        transparent 1px

    );

    background-size:34px 34px;

    z-index:-1;

}


/*====================================
CONTAINER
====================================*/

.contact-section .container{

    position:relative;

    z-index:2;

}


/*====================================
HEADER
====================================*/

.contact-header{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

}

.contact-header .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:22px;

    border-radius:50px;

    background:rgba(0,86,179,.08);

    color:var(--primary);

    font-size:.92rem;

    font-weight:600;

}

.contact-header .section-tag i{

    color:var(--secondary);

}

.contact-header h2{

    margin-bottom:20px;

    font-size:clamp(2.3rem,4vw,3.3rem);

    color:var(--dark);

}

.contact-header h2 span{

    color:var(--primary);

}

.contact-header p{

    max-width:720px;

    margin:auto;

    color:var(--gray);

    line-height:1.9;

}


/*====================================
DIVIDER
====================================*/

.contact-divider{

    width:90px;

    height:4px;

    margin:28px auto;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--secondary)

    );

}


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

.contact-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:stretch;

}


/*====================================
LEFT PANEL
====================================*/

.contact-info{

    position:relative;

    padding:50px;

    border-radius:30px;

    background:#ffffff;

    border:1px solid rgba(0,86,179,.08);

    box-shadow:0 18px 45px rgba(0,0,0,.06);

    overflow:hidden;

}

.contact-info::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(0,86,179,.02),

        rgba(0,188,212,.04)

    );

    pointer-events:none;

}

.contact-info>*{

    position:relative;

    z-index:2;

}


/*====================================
RIGHT PANEL
====================================*/

.contact-map{

    position:relative;

    min-height:520px;

    border-radius:30px;

    overflow:hidden;

    border:1px solid rgba(0,86,179,.08);

    box-shadow:0 18px 45px rgba(0,0,0,.06);

    background:#eef5fb;

}

.contact-map iframe{

    width:100%;

    height:100%;

    border:none;

}


/*====================================
DECORATIVE FLOATING SHAPES
====================================*/

.contact-float{

    position:absolute;

    border-radius:50%;

    background:rgba(0,188,212,.10);

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

}

.contact-float.one{

    width:60px;

    height:60px;

    top:50px;

    right:-20px;

}

.contact-float.two{

    width:36px;

    height:36px;

    bottom:90px;

    left:-18px;

    animation-delay:2s;

}

.contact-float.three{

    width:22px;

    height:22px;

    top:55%;

    right:60px;

    animation-delay:4s;

}


/*====================================
ENTRANCE ANIMATION
====================================*/

.contact-info{

    animation:fadeLeft .9s ease both;

}

.contact-map{

    animation:fadeRight .9s ease both;

    animation-delay:.15s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

    .contact-wrapper{

        gap:45px;

    }

}

@media(max-width:991px){

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .contact-map{

        min-height:420px;

    }

}

@media(max-width:768px){

    .contact-section{

        padding:90px 0;

    }

    .contact-header{

        margin-bottom:50px;

    }

    .contact-info{

        padding:36px;

    }

}

@media(max-width:576px){

    .contact-section{

        padding:75px 0;

    }

    .contact-header h2{

        font-size:2rem;

    }

    .contact-info{

        padding:28px 24px;

        border-radius:22px;

    }

    .contact-map{

        min-height:320px;

        border-radius:22px;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2H-1b
CONTACT INFO + SOCIAL + ACTIONS
==================================================*/


/*====================================
SECTION TITLE
====================================*/

.contact-info h3{

    margin-bottom:16px;

    color:var(--dark);

    font-size:2rem;

}

.contact-info>p{

    margin-bottom:36px;

    color:var(--gray);

    line-height:1.8;

}


/*====================================
CONTACT LIST
====================================*/

.contact-list{

    display:flex;

    flex-direction:column;

    gap:22px;

}


/*====================================
CONTACT CARD
====================================*/

.contact-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:24px;

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

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(0,86,179,.08);

    border-radius:22px;

    transition:all .35s ease;

    overflow:hidden;

}

.contact-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,86,179,.03),
        rgba(0,188,212,.04)
    );

    opacity:0;

    transition:opacity .35s ease;

}

.contact-card:hover::before{

    opacity:1;

}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,86,179,.16);

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

}


/*====================================
ICON
====================================*/

.contact-icon{

    position:relative;

    z-index:2;

    width:64px;

    height:64px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    font-size:24px;

    box-shadow:0 14px 30px rgba(0,86,179,.18);

    transition:transform .35s ease;

}

.contact-card:hover .contact-icon{

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

}


/*====================================
CONTENT
====================================*/

.contact-content{

    position:relative;

    z-index:2;

    flex:1;

}

.contact-content h4{

    margin-bottom:8px;

    color:var(--dark);

    font-size:1.15rem;

}

.contact-content p,

.contact-content span{

    margin:0;

    color:var(--gray);

    line-height:1.7;

}

.contact-content a{

    color:var(--primary);

    text-decoration:none;

    transition:.3s ease;

}

.contact-content a:hover{

    color:var(--secondary);

}


/*====================================
WORKING HOURS
====================================*/

.office-hours{

    margin-top:36px;

    padding:28px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        rgba(0,86,179,.05),
        rgba(0,188,212,.05)
    );

    border:1px solid rgba(0,86,179,.08);

}

.office-hours h4{

    margin-bottom:18px;

    color:var(--dark);

}

.office-hours ul{

    list-style:none;

    margin:0;

    padding:0;

}

.office-hours li{

    display:flex;

    justify-content:space-between;

    padding:10px 0;

    border-bottom:1px dashed rgba(0,86,179,.12);

}

.office-hours li:last-child{

    border-bottom:none;

}


/*====================================
SOCIAL LINKS
====================================*/

.contact-social{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:36px;

}

.contact-social a{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    border:1px solid rgba(0,86,179,.08);

    color:var(--primary);

    font-size:20px;

    transition:all .35s ease;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.contact-social a:hover{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    transform:translateY(-6px);

    box-shadow:0 16px 35px rgba(0,86,179,.18);

}


/*====================================
QUICK ACTION BUTTONS
====================================*/

.contact-actions{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-top:36px;

}

.contact-actions .btn-primary,

.contact-actions .btn-secondary{

    min-width:180px;

}


/*====================================
MAP OVERLAY
====================================*/

.map-overlay{

    position:absolute;

    left:24px;

    bottom:24px;

    z-index:5;

    padding:18px 22px;

    border-radius:18px;

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(0,86,179,.08);

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

}

.map-overlay h5{

    margin-bottom:6px;

    color:var(--dark);

}

.map-overlay p{

    margin:0;

    color:var(--gray);

    font-size:.92rem;

}


/*====================================
ACCESSIBILITY
====================================*/

.contact-card:focus-within,

.contact-social a:focus-visible{

    outline:3px solid rgba(0,188,212,.35);

    outline-offset:3px;

}


/*====================================
ANIMATION
====================================*/

.contact-card{

    animation:fadeUp .8s ease both;

}

.contact-card:nth-child(2){

    animation-delay:.10s;

}

.contact-card:nth-child(3){

    animation-delay:.20s;

}

.contact-card:nth-child(4){

    animation-delay:.30s;

}

.office-hours{

    animation:fadeUp .9s ease both;

    animation-delay:.35s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:768px){

    .contact-card{

        padding:20px;

    }

    .office-hours{

        padding:22px;

    }

    .contact-actions{

        justify-content:center;

    }

}

@media(max-width:576px){

    .contact-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .contact-content{

        text-align:center;

    }

    .office-hours li{

        flex-direction:column;

        gap:4px;

    }

    .contact-social{

        justify-content:center;

    }

    .contact-actions{

        flex-direction:column;

    }

    .contact-actions .btn-primary,

    .contact-actions .btn-secondary{

        width:100%;

        min-width:100%;

    }

    .map-overlay{

        position:static;

        margin:16px;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2I-1a
PREMIUM FOOTER
SECTION + LAYOUT + BACKGROUND
==================================================*/


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

.footer{

    position:relative;

    padding:100px 0 0;

    overflow:hidden;

    isolation:isolate;

    background:linear-gradient(
        135deg,
        #0b1f35 0%,
        #133b67 55%,
        #0056b3 100%
    );

    color:#ffffff;

}


/*====================================
BACKGROUND GLOW
====================================*/

.footer::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(0,188,212,.08);

    filter:blur(60px);

    z-index:-2;

}

.footer::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    right:-140px;

    bottom:-140px;

    border-radius:50%;

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

    filter:blur(45px);

    z-index:-2;

}


/*====================================
PATTERN
====================================*/

.footer-pattern{

    position:absolute;

    inset:0;

    opacity:.06;

    pointer-events:none;

    background-image:

        radial-gradient(

            rgba(255,255,255,.22) 1px,

            transparent 1px

        );

    background-size:36px 36px;

    z-index:-1;

}


/*====================================
CONTAINER
====================================*/

.footer .container{

    position:relative;

    z-index:2;

}


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

.footer-wrapper{

    display:grid;

    grid-template-columns:1.4fr 1fr 1fr 1.2fr;

    gap:55px;

    align-items:flex-start;

}


/*====================================
COMPANY INFO
====================================*/

.footer-brand{

    position:relative;

}

.footer-logo{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-bottom:26px;

    text-decoration:none;

}

.footer-logo img{

    max-height:58px;

    width:auto;

}

.footer-brand h3{

    margin-bottom:18px;

    color:#ffffff;

    font-size:1.7rem;

}

.footer-brand p{

    margin-bottom:28px;

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

    line-height:1.9;

}


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

.footer-column{

    position:relative;

}

.footer-column h4{

    position:relative;

    margin-bottom:28px;

    padding-bottom:12px;

    color:#ffffff;

    font-size:1.2rem;

}

.footer-column h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        #ffffff
    );

}


/*====================================
LINK LIST
====================================*/

.footer-links{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-links li{

    margin-bottom:16px;

}

.footer-links li:last-child{

    margin-bottom:0;

}

.footer-links a{

    display:inline-flex;

    align-items:center;

    gap:10px;

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

    text-decoration:none;

    transition:all .35s ease;

}

.footer-links a i{

    color:var(--secondary);

    font-size:.8rem;

}

.footer-links a:hover{

    color:#ffffff;

    transform:translateX(6px);

}


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

.footer-newsletter{

    position:relative;

    padding:34px;

    border-radius:26px;

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

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

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

}

.footer-newsletter h4{

    margin-bottom:16px;

    color:#ffffff;

}

.footer-newsletter p{

    margin-bottom:24px;

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

    line-height:1.8;

}


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

.footer-form{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-form input{

    width:100%;

    padding:15px 18px;

    border:none;

    border-radius:14px;

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

    color:#ffffff;

}

.footer-form input::placeholder{

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

}

.footer-form input:focus{

    outline:none;

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

}


/*====================================
ENTRANCE ANIMATION
====================================*/

.footer-brand{

    animation:fadeUp .8s ease both;

}

.footer-column{

    animation:fadeUp .8s ease both;

}

.footer-column:nth-child(2){

    animation-delay:.10s;

}

.footer-column:nth-child(3){

    animation-delay:.20s;

}

.footer-newsletter{

    animation:fadeUp .9s ease both;

    animation-delay:.30s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

    .footer-wrapper{

        grid-template-columns:repeat(2,1fr);

        gap:45px;

    }

}

@media(max-width:991px){

    .footer{

        padding:80px 0 0;

    }

}

@media(max-width:768px){

    .footer-wrapper{

        grid-template-columns:1fr;

        gap:40px;

    }

}

@media(max-width:576px){

    .footer{

        padding:70px 0 0;

    }

    .footer-newsletter{

        padding:26px;

        border-radius:20px;

    }

    .footer-brand h3{

        font-size:1.5rem;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 2I-1b
FOOTER CONTACT + COPYRIGHT
==================================================*/


/*====================================
FOOTER CONTACT LIST
====================================*/

.footer-contact{

    list-style:none;

    margin:30px 0 0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.footer-contact-icon{

    width:46px;

    height:46px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

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

    color:var(--secondary);

    font-size:18px;

    transition:all .35s ease;

}

.footer-contact li:hover .footer-contact-icon{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

}

.footer-contact-content{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.footer-contact-content span{

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

    font-size:.85rem;

}

.footer-contact-content a,

.footer-contact-content p{

    margin:0;

    color:#ffffff;

    text-decoration:none;

    line-height:1.6;

}

.footer-contact-content a:hover{

    color:var(--secondary);

}


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

.footer-social{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:34px;

}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

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

    color:#ffffff;

    text-decoration:none;

    transition:all .35s ease;

}

.footer-social a:hover{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    border-color:transparent;

    transform:translateY(-5px);

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

}


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

.footer-form .btn-primary{

    width:100%;

    justify-content:center;

    background:#ffffff;

    color:var(--primary);

    border:2px solid #ffffff;

    box-shadow:none;

}

.footer-form .btn-primary:hover{

    background:var(--secondary);

    color:#ffffff;

    border-color:var(--secondary);

}


/*====================================
CERTIFICATIONS
====================================*/

.footer-badges{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:28px;

}

.footer-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 16px;

    border-radius:50px;

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

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

    color:#ffffff;

    font-size:.88rem;

    transition:all .35s ease;

}

.footer-badge i{

    color:#ffe082;

}

.footer-badge:hover{

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

    transform:translateY(-3px);

}


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

.footer-divider{

    width:100%;

    height:1px;

    margin:70px 0 28px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

}


/*====================================
BOTTOM BAR
====================================*/

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:0 0 32px;

}

.footer-copy{

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

    line-height:1.7;

}

.footer-copy a{

    color:#ffffff;

    text-decoration:none;

}

.footer-copy a:hover{

    color:var(--secondary);

}

.footer-bottom-links{

    display:flex;

    align-items:center;

    gap:24px;

}

.footer-bottom-links a{

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

    text-decoration:none;

    transition:.3s ease;

}

.footer-bottom-links a:hover{

    color:#ffffff;

}


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

.footer-top{

    display:flex;

    align-items:center;

    justify-content:center;

    width:54px;

    height:54px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

    text-decoration:none;

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

    transition:all .35s ease;

}

.footer-top:hover{

    transform:translateY(-6px);

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

}


/*====================================
ACCESSIBILITY
====================================*/

.footer a:focus-visible{

    outline:3px solid rgba(255,255,255,.45);

    outline-offset:4px;

}


/*====================================
STAGGER ANIMATION
====================================*/

.footer-contact li{

    animation:fadeUp .8s ease both;

}

.footer-contact li:nth-child(2){

    animation-delay:.10s;

}

.footer-contact li:nth-child(3){

    animation-delay:.20s;

}

.footer-social a{

    animation:fadeUp .8s ease both;

}

.footer-social a:nth-child(2){

    animation-delay:.08s;

}

.footer-social a:nth-child(3){

    animation-delay:.16s;

}

.footer-social a:nth-child(4){

    animation-delay:.24s;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-bottom-links{

        justify-content:center;

        flex-wrap:wrap;

    }

}

@media(max-width:768px){

    .footer-social{

        justify-content:center;

    }

    .footer-badges{

        justify-content:center;

    }

}

@media(max-width:576px){

    .footer-contact li{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .footer-bottom-links{

        flex-direction:column;

        gap:14px;

    }

    .footer-divider{

        margin:50px 0 24px;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 3A-1
JAVASCRIPT INTERACTION SUPPORT
==================================================*/


/*====================================
SCROLL REVEAL
====================================*/

.reveal{

    opacity:0;

    visibility:hidden;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s;

    will-change:transform,opacity;

}

.reveal.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/*====================================
REVEAL VARIANTS
====================================*/

.reveal-left{

    opacity:0;

    transform:translateX(-60px);

    transition:all .8s ease;

}

.reveal-left.active{

    opacity:1;

    transform:translateX(0);

}

.reveal-right{

    opacity:0;

    transform:translateX(60px);

    transition:all .8s ease;

}

.reveal-right.active{

    opacity:1;

    transform:translateX(0);

}

.reveal-scale{

    opacity:0;

    transform:scale(.92);

    transition:all .8s ease;

}

.reveal-scale.active{

    opacity:1;

    transform:scale(1);

}

.reveal-rotate{

    opacity:0;

    transform:rotate(5deg) translateY(30px);

    transition:all .8s ease;

}

.reveal-rotate.active{

    opacity:1;

    transform:none;

}


/*====================================
STAGGER DELAYS
====================================*/

.delay-100{

    transition-delay:.1s;

}

.delay-200{

    transition-delay:.2s;

}

.delay-300{

    transition-delay:.3s;

}

.delay-400{

    transition-delay:.4s;

}

.delay-500{

    transition-delay:.5s;

}


/*====================================
ACTIVE NAVIGATION
====================================*/

.navbar a.active,

.mobile-nav a.active{

    color:var(--primary);

    font-weight:700;

}

.navbar a.active::after{

    width:100%;

}


/*====================================
STICKY HEADER STATE
====================================*/

.header.scrolled{

    padding:10px 0;

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

    backdrop-filter:blur(14px);

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

}


/*====================================
COUNTER SUPPORT
====================================*/

.counter{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:70px;

    font-variant-numeric:tabular-nums;

}

.counter.finished{

    color:var(--primary);

}


/*====================================
PROGRESS BAR
====================================*/

.progress-bar.animate{

    transition:width 1.8s ease;

}


/*====================================
FILTER SUPPORT
====================================*/

.filter-item{

    transition:

        opacity .45s ease,

        transform .45s ease,

        visibility .45s ease;

}

.filter-item.hide{

    opacity:0;

    visibility:hidden;

    transform:scale(.92);

    pointer-events:none;

}

.filter-item.show{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}


/*====================================
LOADING STATE
====================================*/

.loading{

    pointer-events:none;

    user-select:none;

    opacity:.7;

}


/*====================================
SKELETON
====================================*/

.skeleton{

    position:relative;

    overflow:hidden;

    background:#edf2f7;

    border-radius:10px;

}

.skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    animation:skeletonLoading 1.3s infinite;

}

@keyframes skeletonLoading{

    to{

        transform:translateX(100%);

    }

}


/*====================================
BUTTON LOADING
====================================*/

.btn.loading{

    position:relative;

    color:transparent!important;

}

.btn.loading::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

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

    border-top-color:#ffffff;

    border-radius:50%;

    animation:spin .7s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


/*====================================
LAZY LOADED IMAGES
====================================*/

img.lazy{

    opacity:0;

    transition:opacity .6s ease;

}

img.lazy.loaded{

    opacity:1;

}


/*====================================
MODAL SUPPORT
====================================*/

.modal-open{

    overflow:hidden;

}

.no-scroll{

    overflow:hidden;

}


/*====================================
DISABLED STATE
====================================*/

.disabled{

    pointer-events:none;

    opacity:.55;

}


/*====================================
SUCCESS / ERROR STATES
====================================*/

.success{

    border-color:#22c55e!important;

}

.error{

    border-color:#ef4444!important;

}

.warning{

    border-color:#f59e0b!important;

}


/*====================================
SMOOTH SHOW/HIDE
====================================*/

.fade-enter{

    opacity:0;

}

.fade-enter.active{

    opacity:1;

    transition:opacity .35s ease;

}

.fade-leave{

    opacity:1;

}

.fade-leave.active{

    opacity:0;

    transition:opacity .35s ease;

}


/*====================================
REDUCED MOTION
====================================*/

@media(prefers-reduced-motion:reduce){

    .reveal,

    .reveal-left,

    .reveal-right,

    .reveal-scale,

    .reveal-rotate,

    .filter-item,

    .progress-bar,

    .counter,

    .btn,

    img.lazy{

        transition:none!important;

        animation:none!important;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 3A-2
ADVANCED JAVASCRIPT UI SUPPORT
==================================================*/


/*====================================
ISOTOPE / MASONRY
====================================*/

.grid-sizer{

    width:33.333%;

}

.grid-item{

    transition:
        transform .45s ease,
        opacity .45s ease;

}

.grid-item.is-hidden{

    opacity:0;

    visibility:hidden;

    transform:scale(.92);

    pointer-events:none;

}

.grid-item.is-visible{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}


/*====================================
SWIPER / CAROUSEL
====================================*/

.swiper{

    width:100%;

    overflow:hidden;

}

.swiper-wrapper{

    align-items:stretch;

}

.swiper-slide{

    height:auto;

}

.swiper-pagination-bullet{

    width:10px;

    height:10px;

    opacity:.45;

    background:var(--primary);

    transition:all .3s ease;

}

.swiper-pagination-bullet-active{

    width:28px;

    border-radius:20px;

    opacity:1;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

.swiper-button-next,

.swiper-button-prev{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#ffffff;

    color:var(--primary);

    box-shadow:0 12px 28px rgba(0,0,0,.10);

    transition:all .3s ease;

}

.swiper-button-next:hover,

.swiper-button-prev:hover{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-3px);

}


/*====================================
ACCORDION
====================================*/

.accordion-item{

    border:1px solid rgba(0,86,179,.08);

    border-radius:18px;

    overflow:hidden;

    margin-bottom:18px;

    background:#ffffff;

}

.accordion-header{

    cursor:pointer;

}

.accordion-button{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 26px;

    background:none;

    border:none;

    color:var(--dark);

    font-weight:600;

    cursor:pointer;

}

.accordion-button i{

    transition:transform .3s ease;

}

.accordion-item.active .accordion-button i{

    transform:rotate(180deg);

}

.accordion-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.accordion-body{

    padding:0 26px 26px;

}


/*====================================
TABS
====================================*/

.tabs-nav{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.tab-btn{

    padding:12px 24px;

    border:none;

    border-radius:50px;

    background:#eef5fb;

    color:var(--dark);

    cursor:pointer;

    transition:all .3s ease;

}

.tab-btn.active{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#ffffff;

}

.tab-panel{

    display:none;

}

.tab-panel.active{

    display:block;

    animation:fadeUp .45s ease;

}


/*====================================
MODAL
====================================*/

.modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

}

.modal.active{

    opacity:1;

    visibility:visible;

}

.modal-dialog{

    width:100%;

    max-width:700px;

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    transform:translateY(30px);

    transition:.35s ease;

}

.modal.active .modal-dialog{

    transform:translateY(0);

}


/*====================================
TOAST
====================================*/

.toast{

    position:fixed;

    right:25px;

    bottom:25px;

    min-width:320px;

    padding:18px 22px;

    border-radius:16px;

    background:#ffffff;

    box-shadow:0 16px 45px rgba(0,0,0,.12);

    border-left:5px solid var(--primary);

    opacity:0;

    visibility:hidden;

    transform:translateY(25px);

    transition:.35s ease;

    z-index:9999;

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.toast.success{

    border-left-color:#22c55e;

}

.toast.error{

    border-left-color:#ef4444;

}

.toast.warning{

    border-left-color:#f59e0b;

}


/*====================================
SEARCH OVERLAY
====================================*/

.search-overlay{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(11,31,53,.92);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9998;

}

.search-overlay.active{

    opacity:1;

    visibility:visible;

}

.search-box{

    width:min(700px,90%);

}

.search-box input{

    width:100%;

    padding:22px 28px;

    border:none;

    border-radius:60px;

    font-size:1.1rem;

}


/*====================================
OFFCANVAS
====================================*/

.offcanvas{

    position:fixed;

    top:0;

    right:-420px;

    width:400px;

    max-width:90vw;

    height:100vh;

    background:#ffffff;

    transition:right .4s ease;

    z-index:9999;

    overflow-y:auto;

}

.offcanvas.active{

    right:0;

}

.offcanvas-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9998;

}

.offcanvas-overlay.active{

    opacity:1;

    visibility:visible;

}


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

.js-hidden{

    display:none!important;

}

.js-visible{

    display:block!important;

}

.pointer-none{

    pointer-events:none!important;

}

.pointer-auto{

    pointer-events:auto!important;

}

.opacity-0{

    opacity:0!important;

}

.opacity-100{

    opacity:1!important;

}


/*====================================
RESPONSIVE
====================================*/

@media(max-width:768px){

    .tabs-nav{

        flex-direction:column;

    }

    .toast{

        right:16px;

        left:16px;

        min-width:auto;

    }

    .modal{

        padding:18px;

    }

    .modal-dialog{

        border-radius:18px;

    }

}

@media(max-width:576px){

    .swiper-button-next,

    .swiper-button-prev{

        width:44px;

        height:44px;

    }

    .accordion-button{

        padding:18px 20px;

    }

    .accordion-body{

        padding:0 20px 20px;

    }

    .search-box input{

        padding:18px 22px;

        font-size:1rem;

    }

}
/*==================================================
AVATT TECHNOLOGIES
STYLE.CSS
PART 3B-1
FINAL UTILITIES + PRINT + ACCESSIBILITY
==================================================*/


/*====================================
PRINT STYLES
====================================*/

@media print{

    *{

        background:transparent!important;

        color:#000!important;

        box-shadow:none!important;

        text-shadow:none!important;

        animation:none!important;

        transition:none!important;

    }

    html{

        scroll-behavior:auto;

    }

    body{

        font-size:12pt;

        line-height:1.5;

    }

    .header,

    .mobile-menu,

    .hamburger,

    .back-to-top,

    .preloader,

    .video-background,

    .hero-video,

    .cta-section,

    .footer-social,

    .footer-newsletter,

    .clients-carousel,

    .contact-actions,

    .scroll-progress{

        display:none!important;

    }

    a{

        color:#000!important;

        text-decoration:underline;

    }

    img{

        max-width:100%!important;

        page-break-inside:avoid;

    }

    section{

        page-break-inside:avoid;

        margin-bottom:24px;

    }

}


/*====================================
HIGH CONTRAST MODE
====================================*/

@media(prefers-contrast:more){

    *{

        text-shadow:none!important;

    }

    .btn,

    .card,

    .product-card,

    .contact-card,

    .expertise-card{

        border-width:2px!important;

    }

    a{

        text-decoration:underline;

    }

}


/*====================================
DARK MODE HELPERS
====================================*/

@media(prefers-color-scheme:dark){

    .dark-auto{

        background:#111827;

        color:#f3f4f6;

    }

    .dark-auto .card{

        background:#1f2937;

        color:#ffffff;

    }

    .dark-auto .section-title,

    .dark-auto h1,

    .dark-auto h2,

    .dark-auto h3,

    .dark-auto h4{

        color:#ffffff;

    }

}


/*====================================
FOCUS VISIBLE
====================================*/

:focus-visible{

    outline:3px solid rgba(0,188,212,.45);

    outline-offset:4px;

}


/*====================================
TEXT SELECTION
====================================*/

::selection{

    background:rgba(0,188,212,.25);

    color:#0b1f35;

}

::-moz-selection{

    background:rgba(0,188,212,.25);

    color:#0b1f35;

}


/*====================================
IMAGE QUALITY
====================================*/

img{

    image-rendering:auto;

}

svg{

    overflow:visible;

}


/*====================================
MEDIA HELPERS
====================================*/

.aspect-video{

    aspect-ratio:16/9;

}

.aspect-square{

    aspect-ratio:1;

}

.object-cover{

    object-fit:cover;

}

.object-contain{

    object-fit:contain;

}


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

.overflow-hidden{

    overflow:hidden!important;

}

.overflow-auto{

    overflow:auto!important;

}

.overflow-x-auto{

    overflow-x:auto!important;

}

.overflow-y-auto{

    overflow-y:auto!important;

}


/*====================================
POSITION HELPERS
====================================*/

.relative{

    position:relative!important;

}

.absolute{

    position:absolute!important;

}

.fixed{

    position:fixed!important;

}

.sticky{

    position:sticky!important;

}


/*====================================
DISPLAY HELPERS
====================================*/

.d-none{

    display:none!important;

}

.d-block{

    display:block!important;

}

.d-inline{

    display:inline!important;

}

.d-inline-block{

    display:inline-block!important;

}

.d-flex{

    display:flex!important;

}

.d-grid{

    display:grid!important;

}


/*====================================
ALIGNMENT HELPERS
====================================*/

.justify-center{

    justify-content:center!important;

}

.justify-between{

    justify-content:space-between!important;

}

.items-center{

    align-items:center!important;

}

.items-start{

    align-items:flex-start!important;

}

.items-end{

    align-items:flex-end!important;

}


/*====================================
WIDTH & HEIGHT
====================================*/

.w-100{

    width:100%!important;

}

.h-100{

    height:100%!important;

}

.min-vh-100{

    min-height:100vh!important;

}


/*====================================
BORDER HELPERS
====================================*/

.border-0{

    border:none!important;

}

.rounded{

    border-radius:12px!important;

}

.rounded-lg{

    border-radius:24px!important;

}

.rounded-full{

    border-radius:9999px!important;

}


/*====================================
SHADOW HELPERS
====================================*/

.shadow-sm{

    box-shadow:0 6px 18px rgba(0,0,0,.08)!important;

}

.shadow{

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

}

.shadow-lg{

    box-shadow:0 24px 60px rgba(0,0,0,.18)!important;

}


/*====================================
Z-INDEX
====================================*/

.z-1{

    z-index:1;

}

.z-10{

    z-index:10;

}

.z-100{

    z-index:100;

}

.z-1000{

    z-index:1000;

}


/*====================================
GPU OPTIMIZATION
====================================*/

.gpu{

    transform:translateZ(0);

    backface-visibility:hidden;

    will-change:transform;

}


/*====================================
BROWSER FIXES
====================================*/

button{

    -webkit-tap-highlight-color:transparent;

}

input,

textarea,

select{

    appearance:none;

    -webkit-appearance:none;

}

iframe{

    border:0;

}


/*====================================
RESPONSIVE HELPERS
====================================*/

@media(max-width:768px){

    .mobile-hidden{

        display:none!important;

    }

    .mobile-full{

        width:100%!important;

    }

}

@media(min-width:769px){

    .desktop-hidden{

        display:none!important;

    }

}


/*====================================
END OF STYLESHEET
====================================*/

/*
--------------------------------------------------
AVATT TECHNOLOGIES WEBSITE
Production Ready Stylesheet

Features Included
✔ Sticky Navigation
✔ Mobile Navigation
✔ Premium Hero
✔ About Section
✔ Why AVATT
✔ Products
✔ Expertise
✔ Client Logo Carousel
✔ Call To Action
✔ Contact Preview
✔ Premium Footer
✔ Responsive Design
✔ Scroll Animations
✔ Accessibility
✔ Print Support
✔ JavaScript Helpers
✔ Browser Compatibility
✔ Performance Optimizations

Version : 1.0
--------------------------------------------------
*/