@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}


   /*==================================================
            CLOUD VARIABLES
==================================================*/

:root{

      --cloud-primary:#3b82f6;

    --cloud-secondary:#2563eb;

    --cloud-accent:#60a5fa;

    --cloud-dark:#05070d;

    --cloud-card:#0b1020;

    --cloud-text:#b8c4d6;

    --cloud-white:#ffffff;

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

    --cloud-gradient:linear-gradient(135deg,#3b82f6,#2563eb);

    --cloud-shadow:0 20px 50px rgba(59,130,246,.30);

    --cloud-transition:.35s ease;

}


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

.container{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding:0 20px;

}

.cloud-hero{

    position: relative;

    overflow: hidden;

    padding: 110px 0 100px;

    background: var(--cloud-dark);

}

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

.cloud-hero::before{

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    top: -220px;

    left: -220px;

    border-radius: 50%;

    background: rgba(59,130,246,.18);

    filter: blur(170px);

}

.cloud-hero::after{

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    bottom: -220px;

    right: -220px;

    border-radius: 50%;

    background: rgba(59,130,246,.12);

    filter: blur(160px);

}

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

.cloud-hero-content{

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    gap: 70px;

}

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

.cloud-hero .hero-badge{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 22px;

    border-radius: 50px;

    background: rgba(59,130,246,.10);

    border: 1px solid rgba(59,130,246,.25);

    color: var(--cloud-primary);

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}
/*=========================
        HERO TEXT
==========================*/

.cloud-hero-text h1{

    margin:25px 0;

    color:var(--cloud-white);

    font-size:49px;

    font-weight:700;

    line-height:1.15;

    letter-spacing:-1px;

}

.cloud-hero-text h1 span{

    color:var(--cloud-primary);

}

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

.cloud-hero-text p{

    max-width:620px;

    margin-bottom:40px;

    color:var(--cloud-text);

    font-size:17px;

    line-height:1.9;

}

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

.cloud-hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

/*=========================
        COMMON BUTTON
==========================*/

.cloud-hero-buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    height:58px;

    padding:0 32px;

    border-radius:14px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:var(--cloud-transition);

}

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

.cloud-hero-buttons .btn-primary{

    color:var(--cloud-white);

    background:var(--cloud-gradient);

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

}

.cloud-hero-buttons .btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 25px 50px rgba(59,130,246,.45);

}

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

.cloud-hero-buttons .btn-secondary{

    color:var(--cloud-white);

    border:1px solid rgba(59,130,246,.30);

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

}

.cloud-hero-buttons .btn-secondary:hover{

    background:rgba(59,130,246,.10);

    border-color:var(--cloud-primary);

    transform:translateY(-5px);

} 
/*=========================
        HERO IMAGE
==========================*/

.cloud-hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.cloud-hero-image::before{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    border-radius:50%;

    background:rgba(59,130,246,.22);

    filter:blur(120px);

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

}

.cloud-hero-image img{

     width: 111%;
    max-width: 808px;
    height: 393px;
    border-radius: 28px;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .45),
        0 0 40px rgba(65, 105, 255, .25);
    position: relative;
    z-index: 2;
    left: 26px;
    border: 3px solid rgba(255, 255, 255, .08);
    animation:cloudFloat 5s ease-in-out infinite;

}

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

@keyframes cloudFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

@keyframes cloudGlow{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

}

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

@media (max-width:992px){

    .cloud-hero{

        padding:150px 0 80px;

    }

    .cloud-hero-content{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .cloud-hero-text p{

        margin-left:auto;

        margin-right:auto;

    }

    .cloud-hero-buttons{

        justify-content:center;

    }

}

@media (max-width:768px){

    .cloud-hero{

        padding:130px 0 60px;

    }

    .cloud-hero-text h1{

        font-size:42px;

    }

    .cloud-hero-text p{

        font-size:16px;

    }

    .cloud-hero-buttons{

        flex-direction:column;

    }

    .cloud-hero-buttons a{

        width:100%;

        max-width:320px;

    }

    .cloud-hero-image img{

        max-width:420px;

    }

}

@media (max-width:480px){

    .cloud-hero{

        padding:120px 0 50px;

    }

    .cloud-hero-text h1{

        font-size:34px;

        line-height:1.3;

    }

    .cloud-hero-text p{

        font-size:15px;

        line-height:1.8;

    }

    .cloud-hero-image::before{

        width:320px;

        height:320px;

    }

    .cloud-hero-image img{

        max-width:300px;

    }

    /*==================================================
            CLOUD SERVICES
==================================================*/

.cloud-services{

    padding:90px 0;

    background:var(--cloud-dark);

    position:relative;

    overflow:hidden;

}

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

.cloud-services::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-220px;

    right:-220px;

    border-radius:50%;

    background:rgba(59,130,246,.08);

    filter:blur(170px);

}

.cloud-services::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    bottom:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(59,130,246,.06);

    filter:blur(150px);

}

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

.cloud-services-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.cloud-service-card{

    background:var(--cloud-card);

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

    border-radius:22px;

    padding:35px 30px;

    transition:var(--cloud-transition);

}

.cloud-service-card:hover{

    transform:translateY(-10px);

    border-color:rgba(59,130,246,.35);

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

}

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

.cloud-service-card .service-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    border-radius:18px;

    background:rgba(59,130,246,.10);

    border:1px solid rgba(59,130,246,.25);

    transition:var(--cloud-transition);

}

.cloud-service-card .service-icon i{

    font-size:30px;

    color:var(--cloud-primary);

}

.cloud-service-card:hover .service-icon{

    background:var(--cloud-gradient);
/* 
    transform:rotate(-8deg) scale(1.08); */

}

.cloud-service-card:hover .service-icon i{

    color:var(--cloud-white);

}

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

.cloud-service-card h3{

    color:var(--cloud-white);

    font-size:22px;

    margin-bottom:16px;

    line-height:1.4;

}

.cloud-service-card p{

    color:var(--cloud-text);

    font-size:15px;

    line-height:1.8;

}

}
/*==================================================
            CLOUD SERVICES
==================================================*/

.cloud-services{

    padding:90px 0;

    background:var(--cloud-dark);

    position:relative;

    overflow:hidden;

}

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

.cloud-services::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-220px;

    right:-220px;

    border-radius:50%;

    background:rgba(59,130,246,.08);

    filter:blur(170px);

}

.cloud-services::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    bottom:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(59,130,246,.06);

    filter:blur(150px);

}

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

.section-title{

    max-width:760px;

    margin:0 auto;

    text-align:center;

    position:relative;

    z-index:2;

}

.section-title .section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(59,130,246,.10);

    border:1px solid rgba(59,130,246,.25);

    color:var(--cloud-primary);

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.section-title h2{

    margin:22px 0 18px;

    color:var(--cloud-white);

    font-size:46px;

    font-weight:700;

    line-height:1.25;

}

.section-title h2 span{

    color:var(--cloud-primary);

}

.section-title p{

    color:var(--cloud-text);

    font-size:17px;

    line-height:1.9;

    max-width:700px;

    margin:0 auto;

}

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

.cloud-services-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.cloud-service-card{

    background:var(--cloud-card);

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

    border-radius:22px;

    padding:35px 30px;

    transition:var(--cloud-transition);

}

.cloud-service-card:hover{

    transform:translateY(-10px);

    border-color:rgba(59,130,246,.35);

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

}

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

.cloud-service-card .service-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    border-radius:18px;

    background:rgba(59,130,246,.10);

    border:1px solid rgba(59,130,246,.25);

    transition:var(--cloud-transition);

}

.cloud-service-card .service-icon i{

    font-size:30px;

    color:var(--cloud-primary);

}

.cloud-service-card:hover .service-icon{

    background:var(--cloud-gradient);

    /* transform:rotate(-8deg) scale(1.08); */

}

.cloud-service-card:hover .service-icon i{

    color:var(--cloud-white);

}

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

.cloud-service-card h3{

    color:var(--cloud-white);

    font-size:22px;

    margin-bottom:16px;

    line-height:1.4;

}

.cloud-service-card p{

    color:var(--cloud-text);

    font-size:15px;

    line-height:1.8;

}

/*==================================================
        CLOUD SERVICES RESPONSIVE
==================================================*/

/* Laptop */

@media (max-width:1200px){

    .cloud-services-grid{

        gap:24px;

    }

}

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

@media (max-width:992px){

    .cloud-services{

        padding:70px 0;

    }

    .cloud-services-grid{

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

        gap:24px;

        margin-top:50px;

    }

}

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

@media (max-width:768px){

    .cloud-services{

        padding:60px 0;

    }

    .cloud-services-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:40px;

    }

    .cloud-service-card{

        padding:30px 24px;

    }

    .cloud-service-card .service-icon{

        width:65px;

        height:65px;

        margin-bottom:20px;

    }

    .cloud-service-card .service-icon i{

        font-size:28px;

    }
        .section-title h2{

        font-size:34px;

    }

    .section-title p{

        font-size:15px;

    }

    .cloud-service-card h3{

        font-size:20px;

    }

    .cloud-service-card p{

        font-size:14px;

        line-height:1.8;

    }

}

/*=========================
        iQOO 13
==========================*/

@media (max-width:480px){

    .cloud-services{

        padding:50px 0;

    }

    .cloud-services-grid{

        gap:18px;

    }
    .section-title h2{

        font-size:28px;

        line-height:1.35;

    }

    .section-title p{

        font-size:14px;

        line-height:1.8;

    }


    .cloud-service-card{

        padding:25px 20px;

        border-radius:18px;

    }

    .cloud-service-card .service-icon{

        width:60px;

        height:60px;

        border-radius:16px;

        margin-bottom:18px;

    }

    .cloud-service-card .service-icon i{

        font-size:24px;

    }

    .cloud-service-card h3{

        font-size:18px;

        margin-bottom:12px;

    }

    .cloud-service-card p{

        font-size:14px;

        line-height:1.7;

    }

}
/*==================================================
            WHY CHOOSE CLOUD
==================================================*/

.cloud-why{

    padding:90px 0;

    background:var(--cloud-dark);

    position:relative;

    overflow:hidden;

}

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

.cloud-why::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:rgba(59,130,246,.08);

    filter:blur(170px);

}

.cloud-why::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    bottom:-180px;

    right:-180px;

    border-radius:50%;

    background:rgba(59,130,246,.06);

    filter:blur(150px);

}

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

.cloud-why-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.cloud-why-card{

    background:var(--cloud-card);

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

    border-radius:22px;

    padding:35px 30px;

    transition:var(--cloud-transition);

}

.cloud-why-card:hover{

    transform:translateY(-10px);

    border-color:rgba(59,130,246,.35);

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

}

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

.cloud-why-card .why-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:24px;

    border-radius:18px;

    background:rgba(59,130,246,.10);

    border:1px solid rgba(59,130,246,.25);

    transition:var(--cloud-transition);

}

.cloud-why-card .why-icon i{

    font-size:30px;

    color:var(--cloud-primary);

}

.cloud-why-card:hover .why-icon{

    background:var(--cloud-gradient);

    /* transform:rotate(-8deg) scale(1.08); */

}

.cloud-why-card:hover .why-icon i{

    color:var(--cloud-white);

}

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

.cloud-why-card h3{

    color:var(--cloud-white);

    font-size:22px;

    margin-bottom:15px;

    line-height:1.4;

}

.cloud-why-card p{

    color:var(--cloud-text);

    font-size:15px;

    line-height:1.8;

}
/*==================================================
        CLOUD WHY RESPONSIVE
==================================================*/

/* Laptop */

@media (max-width:1200px){

    .cloud-why-grid{

        gap:24px;

    }

}

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

@media (max-width:992px){

    .cloud-why{

        padding:70px 0;

    }

    .cloud-why-grid{

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

        gap:24px;

        margin-top:50px;

    }

}

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

@media (max-width:768px){

    .cloud-why{

        padding:60px 0;

    }

    .cloud-why-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:40px;

    }

    .cloud-why-card{

        padding:30px 24px;

    }

    .cloud-why-card .why-icon{

        width:65px;

        height:65px;

        margin-bottom:20px;

    }

    .cloud-why-card .why-icon i{

        font-size:28px;

    }

    .cloud-why-card h3{

        font-size:20px;

    }

    .cloud-why-card p{

        font-size:14px;

        line-height:1.8;

    }

}

/*=========================
        iQOO 13
==========================*/

@media (max-width:480px){

    .cloud-why{

        padding:50px 0;

    }

    .cloud-why-grid{

        gap:18px;

    }

    .cloud-why-card{

        padding:25px 20px;

        border-radius:18px;

    }

    .cloud-why-card .why-icon{

        width:60px;

        height:60px;

        border-radius:16px;

        margin-bottom:18px;

    }

    .cloud-why-card .why-icon i{

        font-size:24px;

    }

    .cloud-why-card h3{

        font-size:18px;

        margin-bottom:12px;

    }

    .cloud-why-card p{

        font-size:14px;

        line-height:1.7;

    }

}
/*==================================================
        CLOUD DEPLOYMENT PROCESS
==================================================*/

.cloud-process{

    padding:90px 0;

    background:var(--cloud-dark);

    position:relative;

    overflow:hidden;

}

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

.cloud-process::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    right:-220px;

    border-radius:50%;

    background:rgba(59,130,246,.08);

    filter:blur(170px);

}

.cloud-process::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    bottom:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(59,130,246,.06);

    filter:blur(150px);

}

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

.cloud-process-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.cloud-process-card{

    position:relative;

    padding:35px 30px;

    background:var(--cloud-card);

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

    border-radius:22px;

    transition:var(--cloud-transition);

    overflow:hidden;

}

.cloud-process-card:hover{

    transform:translateY(-10px);

    border-color:rgba(59,130,246,.35);

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

}

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

.process-number{

    position:absolute;

    top:20px;

    right:20px;

    font-size:42px;

    font-weight:700;

    color:rgba(59,130,246,.12);

    user-select:none;

}

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

.process-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    border-radius:18px;

    background:rgba(59,130,246,.10);

    border:1px solid rgba(59,130,246,.25);

    transition:var(--cloud-transition);

}

.process-icon i{

    font-size:30px;

    color:var(--cloud-primary);

}

.cloud-process-card:hover .process-icon{

    background:var(--cloud-gradient);

    /* transform:rotate(-8deg) scale(1.08); */

}

.cloud-process-card:hover .process-icon i{

    color:var(--cloud-white);

}

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

.cloud-process-card h3{

    color:var(--cloud-white);

    font-size:22px;

    margin-bottom:16px;

    line-height:1.4;

}

.cloud-process-card p{

    color:var(--cloud-text);

    font-size:15px;

    line-height:1.8;

}
/*==================================================
        CLOUD PROCESS RESPONSIVE
==================================================*/

@media (max-width:992px){

    .cloud-process{

        padding:70px 0;

    }

    .cloud-process-grid{

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

        gap:24px;

        margin-top:50px;

    }

}

@media (max-width:768px){

    .cloud-process{

        padding:60px 0;

    }

    .cloud-process-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:40px;

    }

    .cloud-process-card{

        padding:30px 24px;

    }

    .process-number{

        font-size:34px;

    }

    .process-icon{

        width:65px;

        height:65px;

    }

    .process-icon i{

        font-size:28px;

    }

    .cloud-process-card h3{

        font-size:20px;

    }

    .cloud-process-card p{

        font-size:14px;

    }

}

@media (max-width:480px){

    .cloud-process{

        padding:50px 0;

    }

    .cloud-process-card{

        padding:25px 20px;

        border-radius:18px;

    }

    .process-number{

        font-size:28px;

    }

    .process-icon{

        width:60px;

        height:60px;

        border-radius:16px;

    }

    .process-icon i{

        font-size:24px;

    }

    .cloud-process-card h3{

        font-size:18px;

    }

    .cloud-process-card p{

        font-size:14px;

        line-height:1.7;

    }

}

/*==================================================
            INDUSTRIES WE SERVE
==================================================*/

.cloud-industries{

    padding:90px 0;

    background:var(--cloud-dark);

    position:relative;

    overflow:hidden;

}

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

.cloud-industries::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:rgba(59,130,246,.08);

    filter:blur(170px);

}

.cloud-industries::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    bottom:-180px;

    right:-180px;

    border-radius:50%;

    background:rgba(59,130,246,.06);

    filter:blur(150px);

}

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

.cloud-industries-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.cloud-industry-card{

    background:var(--cloud-card);

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

    border-radius:22px;

    padding:35px 30px;

    transition:var(--cloud-transition);

}

.cloud-industry-card:hover{

    transform:translateY(-10px);

    border-color:rgba(59,130,246,.35);

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

}

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

.cloud-industry-card .industry-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    border-radius:18px;

    background:rgba(59,130,246,.10);

    border:1px solid rgba(59,130,246,.25);

    transition:var(--cloud-transition);

}

.cloud-industry-card .industry-icon i{

    font-size:30px;

    color:var(--cloud-primary);

}

.cloud-industry-card:hover .industry-icon{

    background:var(--cloud-gradient);

    /* transform:rotate(-8deg) scale(1.08); */

}

.cloud-industry-card:hover .industry-icon i{

    color:var(--cloud-white);

}

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

.cloud-industry-card h3{

    color:var(--cloud-white);

    font-size:22px;

    margin-bottom:15px;

    line-height:1.4;

}

.cloud-industry-card p{

    color:var(--cloud-text);

    font-size:15px;

    line-height:1.8;

}
/*==================================================
        INDUSTRIES RESPONSIVE
==================================================*/

/* Laptop */

@media (max-width:1200px){

    .cloud-industries-grid{

        gap:24px;

    }

}

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

@media (max-width:992px){

    .cloud-industries{

        padding:70px 0;

    }

    .cloud-industries-grid{

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

        gap:24px;

        margin-top:50px;

    }

}

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

@media (max-width:768px){

    .cloud-industries{

        padding:60px 0;

    }

    .cloud-industries-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:40px;

    }

    .cloud-industry-card{

        padding:30px 24px;

    }

    .cloud-industry-card .industry-icon{

        width:65px;

        height:65px;

        margin-bottom:20px;

    }

    .cloud-industry-card .industry-icon i{

        font-size:28px;

    }

    .cloud-industry-card h3{

        font-size:20px;

    }

    .cloud-industry-card p{

        font-size:14px;

        line-height:1.8;

    }

}

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

@media (max-width:480px){

    .cloud-industries{

        padding:50px 0;

    }

    .cloud-industries-grid{

        gap:18px;

    }

    .cloud-industry-card{

        padding:25px 20px;

        border-radius:18px;

    }

    .cloud-industry-card .industry-icon{

        width:60px;

        height:60px;

        border-radius:16px;

        margin-bottom:18px;

    }

    .cloud-industry-card .industry-icon i{

        font-size:24px;

    }

    .cloud-industry-card h3{

        font-size:18px;

        margin-bottom:12px;

    }

    .cloud-industry-card p{

        font-size:14px;

        line-height:1.7;

    }

}
/*==================================================
                    CLOUD FAQ
==================================================*/

.cloud-faq{

    padding:90px 0;

    background:var(--cloud-dark);

    position:relative;

    overflow:hidden;

}

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

.cloud-faq::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:rgba(59,130,246,.08);

    filter:blur(170px);

}

.cloud-faq::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    bottom:-180px;

    right:-180px;

    border-radius:50%;

    background:rgba(59,130,246,.06);

    filter:blur(150px);

}

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

.cloud-faq-wrapper{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:60px auto 0;

}

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

.cloud-faq-item{

    background:var(--cloud-card);

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

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

    transition:var(--cloud-transition);

}

.cloud-faq-item:hover{

    border-color:rgba(59,130,246,.35);

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

}

/*=========================
        QUESTION
==========================*/

.cloud-faq-question{

    width:100%;

    padding:24px 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:none;

    border:none;

    cursor:pointer;

    color:var(--cloud-white);

    font-size:18px;

    font-weight:600;

    text-align:left;

}

.cloud-faq-question span{

    flex:1;

    padding-right:20px;

}

.cloud-faq-question i{

    color:var(--cloud-primary);

    font-size:18px;

    transition:var(--cloud-transition);

}

/*=========================
        ANSWER
==========================*/

.cloud-faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.cloud-faq-answer p{

    padding:0 28px 24px;

    color:var(--cloud-text);

    font-size:15px;

    line-height:1.8;

}

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

.cloud-faq-item.active{

    border-color:rgba(59,130,246,.35);

}

.cloud-faq-item.active .cloud-faq-answer{

    max-height:250px;

}

.cloud-faq-item.active .cloud-faq-question i{

    transform:rotate(45deg);

}
/*==================================================
            CLOUD FAQ RESPONSIVE
==================================================*/

@media (max-width:992px){

    .cloud-faq{

        padding:70px 0;

    }

    .cloud-faq-wrapper{

        margin-top:50px;

    }

}

@media (max-width:768px){

    .cloud-faq{

        padding:60px 0;

    }

    .cloud-faq-wrapper{

        margin-top:40px;

    }

    .cloud-faq-question{

        padding:22px 22px;

        font-size:17px;

    }

    .cloud-faq-answer p{

        padding:0 22px 22px;

        font-size:14px;

        line-height:1.8;

    }

}

@media (max-width:480px){

    .cloud-faq{

        padding:50px 0;

    }

    .cloud-faq-item{

        border-radius:16px;

    }

    .cloud-faq-question{

        padding:20px;

        font-size:16px;

    }

    .cloud-faq-question i{

        font-size:16px;

    }

    .cloud-faq-answer p{

        padding:0 20px 20px;

        font-size:14px;

        line-height:1.7;

    }

}
/*==================================================
                CLOUD FINAL CTA
==================================================*/

.cloud-cta{

    padding:90px 0;

    background:var(--cloud-dark);

    position:relative;

    overflow:hidden;

}

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

.cloud-cta::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:rgba(59,130,246,.12);

    filter:blur(180px);

}

.cloud-cta::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    bottom:-220px;

    right:-220px;

    border-radius:50%;

    background:rgba(59,130,246,.10);

    filter:blur(170px);

}

/*=========================
        CTA BOX
==========================*/

.cloud-cta-box{

    position:relative;

    z-index:2;

    max-width:950px;

    margin:auto;

    padding:70px 60px;

    text-align:center;

    border-radius:28px;

    background:linear-gradient(180deg,
    rgba(11,16,32,.95),
    rgba(7,10,20,.98));

    border:1px solid rgba(59,130,246,.20);

    box-shadow:0 30px 80px rgba(59,130,246,.18);

}

/*=========================
        CTA BADGE
==========================*/

.cloud-cta-box .cta-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(59,130,246,.10);

    border:1px solid rgba(59,130,246,.25);

    color:var(--cloud-primary);

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

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

.cloud-cta-box h2{

    margin:25px 0 20px;

    color:var(--cloud-white);

    font-size:48px;

    font-weight:700;

    line-height:1.25;

}

.cloud-cta-box h2 span{

    color:var(--cloud-primary);

}

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

.cloud-cta-box p{

    max-width:720px;

    margin:0 auto 40px;

    color:var(--cloud-text);

    font-size:17px;

    line-height:1.9;

}

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

.cloud-cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

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

.cloud-cta-buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    height:58px;

    padding:0 34px;

    border-radius:14px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:var(--cloud-transition);

}

/* Primary */

.cloud-cta-buttons .btn-primary{

    color:var(--cloud-white);

    background:var(--cloud-gradient);

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

}

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

    transform:translateY(-5px);

    box-shadow:0 25px 50px rgba(59,130,246,.45);

}

/* Secondary */

.cloud-cta-buttons .btn-secondary{

    color:var(--cloud-white);

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

    border:1px solid rgba(59,130,246,.30);

}

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

    background:rgba(59,130,246,.10);

    border-color:var(--cloud-primary);

    transform:translateY(-5px);

}

/*==================================================
        CLOUD CTA RESPONSIVE
==================================================*/

/* Laptop */

@media (max-width:1200px){

    .cloud-cta-box{

        padding:60px 50px;

    }

}

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

@media (max-width:992px){

    .cloud-cta{

        padding:70px 0;

    }

    .cloud-cta-box{

        padding:55px 40px;

    }

    .cloud-cta-box h2{

        font-size:40px;

    }

}

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

@media (max-width:768px){

    .cloud-cta{

        padding:60px 0;

    }

    .cloud-cta-box{

        padding:45px 28px;

        border-radius:22px;

    }

    .cloud-cta-box h2{

        font-size:34px;

        line-height:1.35;

    }

    .cloud-cta-box p{

        font-size:15px;

        line-height:1.8;

        margin-bottom:35px;

    }

    .cloud-cta-buttons{

        flex-direction:column;

        gap:15px;

    }

    .cloud-cta-buttons a{

        width:100%;

        max-width:320px;

    }

}

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

@media (max-width:480px){

    .cloud-cta{

        padding:50px 0;

    }

    .cloud-cta-box{

        padding:35px 20px;

        border-radius:18px;

    }

    .cloud-cta-box .cta-badge{

        font-size:12px;

        padding:8px 18px;

    }

    .cloud-cta-box h2{

        font-size:28px;

        margin:20px 0 16px;

    }

    .cloud-cta-box p{

        font-size:14px;

        line-height:1.7;

        margin-bottom:30px;

    }

    .cloud-cta-buttons a{

        height:54px;

        font-size:15px;

    }

}