/*=============================================================
 KloudSky Technologies
 Enterprise Cloud & Infrastructure Consulting
 Global Stylesheet
 Version : 1.0
 Author  : KloudSky Technologies

 Theme Colors
 --------------------------------------------------------------
 Primary Blue  : #0066FF
 Dark Navy     : #071C3F
 Sky Blue      : #32B6FF
 Green         : #20C997
 Orange        : #F59E0B
 White         : #FFFFFF
 Light Gray    : #F6F8FC
 Text Gray     : #6B7280
==============================================================*/


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

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


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

:root{

    --primary:#0066FF;
    --secondary:#32B6FF;
    --dark:#071C3F;
    --green:#20C997;
    --orange:#F59E0B;
    --white:#ffffff;
    --light:#F6F8FC;
    --gray:#6B7280;
    --border:#E6EAF0;

    --shadow-sm:0 5px 20px rgba(0,0,0,.08);

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

    --shadow-lg:0 18px 50px rgba(0,0,0,.18);

    --radius:18px;

    --transition:.35s ease;

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--white);

    color:#222;

    overflow-x:hidden;

    line-height:1.7;

}


/*==============================================================
    Common
==============================================================*/

img{

    max-width:100%;

    display:block;

    border-radius:20px;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

    padding:0;

    margin:0;

}

.section-padding{

    padding:70px 0;

}

.bg-white{

    background:#fff;

}

.bg-dark{

    background:var(--dark);

}

.section-light{

    background:var(--light);

}

.section-tag{

    color:var(--primary);

    font-size:15px;

    text-transform:uppercase;

    font-weight:700;

    letter-spacing:2px;

}

.section-title{

    font-size:46px;

    font-weight:700;

    margin:20px 0;

    color:var(--dark);

}

.section-subtitle{

    max-width:720px;

    margin:auto;

    color:var(--gray);

    font-size:18px;

}


/*==============================================================
    Loader
==============================================================*/

#loader{

    position:fixed;

    inset:0;

    background:#071C3F;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader-content{

    text-align:center;

    color:#fff;

}

.loader-logo{

    width:140px;

    margin:auto;

    animation:floatLogo 2s infinite ease-in-out;

}

.loader-content h3{

    margin-top:25px;

    font-weight:700;

}

.loader-content p{

    opacity:.8;

}


/*==============================================================
    Navigation
==============================================================*/

.navbar{

    background:rgba(7,28,63,.96);

    backdrop-filter:blur(18px);

    padding:16px 0;

    min-height:92px;

    transition:.35s;

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

}

.navbar .container{

    max-width:1440px;

    width:100%;

}

.navbar-brand{

    display:flex;

    align-items:center;

    gap:12px;

    margin-right:18px;

    color:#fff;

    font-weight:700;

    white-space:nowrap;

    flex-shrink:0;

}

.navbar-brand img{

    height:58px;

    width:auto;

    transition:.3s;

}

.navbar-brand{

    display:flex;

    align-items:center;

    gap:18px;

}

.navbar-brand span{

    font-size:18px;

    font-weight:700;

    color:#fff;

    letter-spacing:.3px;

}

.navbar-brand:hover img{

    transform:scale(1.05);

}

/* Brand Name */

.brand-text{

    color:#ffffff;

    font-size:30px;

    font-weight:800;

    letter-spacing:.4px;

    line-height:1;

}

.navbar-collapse{

    justify-content:space-between;

}

.navbar-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    flex:1;

    min-width:0;

}

.nav-link{

    color:#fff;

    margin-left:10px;

    margin-right:10px;

    padding:10px 0;

    font-size:18px;

    font-weight:600;

    letter-spacing:.2px;

    white-space:nowrap;

    position:relative;

    transition:.3s;

}

.nav-link:hover,

.nav-link.active{

    color:var(--secondary);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:14px;

    bottom:6px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.3s;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:calc(100% - 28px);

}

.navbar-toggler{

    border:none;

    color:#fff;

    font-size:28px;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.nav-btn{

    margin-left:25px;

    min-width:220px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50px;

    font-weight:600;

    white-space:nowrap;

}

.nav-btn:hover{

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

}

@media(max-width:991px){

.navbar{

    min-height:78px;

    padding:12px 0;

}

.navbar-brand{

    gap:12px;

    margin-right:0;

}

.navbar-brand img{

    height:48px;

}

.brand-text{

    font-size:24px;

}

.navbar-collapse{

    margin-top:18px;

}

.navbar-nav{

    gap:0;

}

.nav-link{

    padding:14px 0 !important;

}

.nav-link::after{

    display:none;

}

.nav-btn{

    width:100%;

    margin:20px 0 0;

}

}

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

.btn{

    border-radius:50px;

    padding:15px 32px;

    min-height:58px;

    font-size:18px;

    font-weight:600;

    transition:.35s;

}

.btn-primary{

    background:linear-gradient(135deg,#0066FF,#32B6FF);

    border:none;

}

.btn-primary:hover{

    transform:translateY(-4px);

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

}

.btn-outline-light{

    border:2px solid #fff;

}

.btn-outline-light:hover{

    background:#fff;

    color:#0066FF;

}

.btn-warning{

    background:#F59E0B;

    border:none;

    color:#fff;

}

.btn-warning:hover{

    background:#e58f05;

}


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

.hero-section{

    position:relative;

    min-height:90px;

    display:flex;

    align-items:center;

    background:linear-gradient(135deg,#071C3F,#0A53BE);

    overflow:hidden;

    color:#fff;

    padding-top:120px;

    padding-bottom:70px;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:url('../images/cloud-pattern.png');

    opacity:.06;

}

.hero-section .container{

    position:relative;

    z-index:2;

}

.hero-section .row{

    align-items:center;
   
}

.hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.hero-tag{

    display:inline-block;

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

    padding:11px 22px;

    border-radius:40px;

    margin-bottom:18px;

    font-size:15px;

    font-weight:600;

    backdrop-filter:blur(15px);

}

.hero-section h1{

    font-size:68px;

    line-height:1.08;

    font-weight:800;

    letter-spacing:-1px;

    margin-bottom:18px;

}

.hero-section h1 span{

    color:var(--secondary);

}

.hero-section p{

    margin:24px 0;

    font-size:20px;

    line-height:1.85;

    max-width:670px;

    color:#E8EDF8;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:30px;

    margin-bottom:35px;

    flex-wrap:wrap;

}

.hero-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.hero-highlights div{

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

    backdrop-filter:blur(10px);

    border-radius:40px;

    padding:14px 24px;

}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:650px;

    height:430px;

    object-fit:cover;

    border-radius:24px;

    display:block;

    margin:auto;

}

.hero-card{

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

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

    border-radius:28px;

    padding:42px;

    backdrop-filter:blur(18px);

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

    height:100%;

}

.hero-card h4{

    margin-bottom:24px;

}

.hero-card li{

    padding:10px 0;

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

}

.hero-image{

    width:100%;

    max-width:620px;

    margin-left:auto;

}

.hero-image img{

    width:100%;

    max-width:650px;

    height:430px;

    object-fit:cover;

    border-radius:24px;

    display:block;

    margin:auto;

}

.scroll-down{

    position:absolute;

    left:50%;

    bottom:24px;

    transform:translateX(-50%);

    font-size:30px;

    animation:bounce 2s infinite;

}

/*==============================================================
    Company Overview
==============================================================*/

.mini-card{

    background:#ffffff;

    border-radius:18px;

    padding:30px;

    margin-top:20px;

    text-align:center;

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

    transition:var(--transition);

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

}

.mini-card:hover{

    transform:translateY(-10px);

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

}

.mini-card h3{

    color:var(--primary);

    font-size:42px;

    font-weight:700;

}

.mini-card p{

    margin-top:10px;

    color:var(--gray);

    font-weight:500;

}


/*==============================================================
    Feature Cards
==============================================================*/

.feature-card{

    background:#fff;

    border-radius:28px;

    padding:48px;

    text-align:left;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

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

}

.feature-card:hover{

    transform:translateY(-12px);

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

}

.feature-card i{

    width:94px;

    height:94px;

    border-radius:50%;

    background:linear-gradient(135deg,#1F7BFF,#39B8FF);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    margin-bottom:28px;

    margin-left:0;


}

.feature-card h4{

    font-size:38px;

    font-weight:700;

    color:#071C3F;

    margin-bottom:18px;

    text-align:left;

}

.feature-card p{

    color:#5D6778;

    line-height:1.8;

    margin-bottom:0;

    text-align:left;

}


/*==============================================================
    Service Cards
==============================================================*/

.service-card{

    background:#ffffff;

    padding:40px 30px;

    border-radius:22px;

    text-align:center;

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

    transition:var(--transition);

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

    height:100%;

}

.service-card:hover{

    transform:translateY(-12px);

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

}

.service-card i{

    width:90px;

    height:90px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(135deg,#0066FF,#32B6FF);

    color:#fff;

    font-size:36px;

    margin-bottom:30px;

}

.service-card h4{

    font-size:24px;

    color:var(--dark);

    font-weight:700;

    margin-bottom:20px;

}

.service-card p{

    color:var(--gray);

    line-height:1.8;

}


/*==============================================================
    Technology Cards
==============================================================*/

.tech-card{

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

    border-radius:18px;

    padding:35px 20px;

    transition:.35s;

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

    height:100%;

}

.tech-card:hover{

    background:linear-gradient(135deg,#0066FF,#32B6FF);

    transform:translateY(-10px);

}

.tech-card i{

    margin-bottom:20px;

}

.tech-card h5{

    margin-top:20px;

    font-weight:600;

}


/*==============================================================
    Counter Section
==============================================================*/

.counter-box{

    background:#fff;

    padding:40px;

    border-radius:20px;

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

    transition:.35s;

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

}

.counter-box:hover{

    transform:translateY(-10px);

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

}

.counter-box h2{

    font-size:52px;

    color:var(--primary);

    font-weight:800;

}

.counter-box p{

    color:var(--gray);

    margin-top:10px;

    font-weight:500;

}


/*==============================================================
    CTA Section
==============================================================*/

.cta-section{

    background:linear-gradient(135deg,#0066FF,#0A53BE);

    color:#fff;

    padding:90px 0;

}

.cta-section h2{

    font-size:44px;

    font-weight:700;

}

.cta-section p{

    font-size:18px;

    opacity:.95;

    margin-top:20px;

}


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

.footer{

    background:#071C3F;

    color:#fff;

    padding-top:70px;

}

.footer h5{

    margin-bottom:25px;

    font-weight:700;

}

.footer p{

    color:#D7DDEA;

}

.footer-logo{

    width:190px;

    max-width:320%;

    height:auto;

    border-radius:16px;

    margin-bottom:22px;

}

.footer-links li{

    margin-bottom:14px;

}

.footer-links a{

    color:#D7DDEA;

    transition:.3s;

}

.footer-links a:hover{

    color:#32B6FF;

    padding-left:6px;

}

.footer hr{

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

    margin:50px 0 25px;

}

.footer i{

    color:#32B6FF;

    margin-right:10px;

}

.footer .fab{

    color:#fff;

    transition:.3s;

}

.footer .fab:hover{

    color:#32B6FF;

}


/*==============================================================
    Back To Top
==============================================================*/

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:linear-gradient(135deg,#0066FF,#32B6FF);

    color:#fff;

    cursor:pointer;

    display:none;

    z-index:999;

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

    transition:.35s;

}

#backToTop:hover{

    transform:translateY(-6px);

}


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

@keyframes floatLogo{

    0%{transform:translateY(0);}

    50%{transform:translateY(-10px);}

    100%{transform:translateY(0);}

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translate(-50%,0);

    }

    40%{

        transform:translate(-50%,-12px);

    }

    60%{

        transform:translate(-50%,-6px);

    }

}

.footer .fab:hover{

    color:#32B6FF;

}


/*==============================================================
    Back To Top
==============================================================*/

#backToTop{

    ...
}


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

@keyframes floatLogo{

    ...
}

@keyframes bounce{

    ...
}


/*==============================================================
Hero Page Consistency
==============================================================*/

.page-hero{

    padding-top:140px;

    padding-bottom:70px;

}

.page-hero .container{

    align-items:center;

}

.page-hero .hero-tag{

    margin-bottom:16px;

}

.page-hero h1{

    margin-top:0;

}

.page-hero img{

    width:100%;

    max-width:650px;

    height:430px;

    object-fit:cover;

    border-radius:24px;

    display:block;

    margin:auto;

}

.page-hero .breadcrumb{

    margin-top:35px;

    font-size:15px;

}

.page-hero .breadcrumb a{

    color:#32B6FF;

}

.page-hero .breadcrumb-item{

    color:#b9c7dd;

}

/*==============================================================
    Professional Journey Timeline
==============================================================*/

.timeline{

    position:relative;

    max-width:1000px;

    margin:70px auto 0;

}

.timeline::before{

    content:"";

    position:absolute;

    left:120px;

    top:0;

    bottom:0;

    width:4px;

    background:linear-gradient(180deg,#32B6FF,#0A53BE);

    border-radius:10px;

}

.timeline-item{

    display:flex;

    align-items:flex-start;

    gap:40px;

    margin-bottom:60px;

    position:relative;

}

.timeline-year{

    width:90px;

    min-width:90px;

    height:90px;

    background:linear-gradient(135deg,#32B6FF,#0A53BE);

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:700;

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

    position:relative;

    z-index:2;

}

.timeline-content{

    flex:1;

    background:#fff;

    padding:30px;

    border-radius:20px;

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

    transition:.3s;

}

.timeline-content:hover{

    transform:translateY(-6px);

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

}

.timeline-content h4{

    margin-bottom:15px;

    color:#071C3F;

    font-weight:700;

}

.timeline-content p{

    margin:0;

    color:#5B6575;

    line-height:1.8;

}

/*==============================================================
    Responsive
==============================================================*/

@media(max-width:992px){

.hero-section{

    padding:120px 0 80px;

    text-align:center;

}

.hero-section h1{

    font-size:48px;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-highlights{

    justify-content:center;

}

.hero-card{

    margin-top:50px;

}

.section-title{

    font-size:36px;

}

}

@media(max-width:768px){

.section-padding{

    padding:70px 0;

}

.hero-section h1{

    font-size:36px;

}

.hero-section p{

    font-size:17px;

}

.hero-buttons .btn{

    width:100%;

}

.counter-box{

    margin-bottom:25px;

}

.footer{

    text-align:center;

}

.feature-card{

    padding:35px;

}

.feature-icon{

    margin-left:0;

    margin-right:0;

}

.feature-card h4,

.feature-card p{

    text-align:left;

}

}

/*==============================================================
    Internal Page Hero Images
==============================================================*/

.page-hero .col-lg-6:last-child{

    display:flex;

    justify-content:center;

    align-items:center;

}

.page-hero img{

    width:100%;

    max-width:650px;

    height:420px;

    object-fit:cover;

    border-radius:24px;

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

}

/* =====================================================
   VERSION 1.1 FINAL
   Mobile Overflow Fix
===================================================== */

html,
body{
    overflow-x:hidden;
    width:100%;
}

.container,
.container-fluid{
    max-width:100%;
}

.row{
    margin-left:0;
    margin-right:0;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

.hero-section,
.page-hero{
    overflow:hidden;
}

/* Professional Journey Responsive */

.timeline{

    margin-top:50px;

}

.timeline::before{

    display:none;

}

.timeline-item{

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:20px;

}

.timeline-year{

    width:80px;

    height:80px;

    font-size:18px;

}

.timeline-content{

    width:100%;

    padding:25px;

}