/* ==========================================================
   SECTION 2 - INDUSTRIES WE SERVE
   Advanced CSS
   Part 1
   Rajat Adhikari
========================================================== */


/*=========================================================
Root Section
=========================================================*/

.ra-industry-section{

    position:relative;
    width:100%;
    padding:120px 0;
    background:#f7f9fc;
    overflow:hidden;

}


/*=========================================================
Container
=========================================================*/

.ra-industry-container{

    width:100%;
    max-width:1320px;
    margin:auto;
    padding:0 20px;

}


/*=========================================================
Heading
=========================================================*/

.ra-industry-heading{

    max-width:850px;
    margin:0 auto 70px;
    text-align:center;

}


/*=========================================================
Badge
=========================================================*/

.ra-industry-tag{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 22px;

    border-radius:50px;

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

    color:#0066ff;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:22px;

}


/*=========================================================
Heading
=========================================================*/

.ra-industry-heading h2{

    margin:0;

    font-size:46px;

    font-weight:800;

    line-height:1.2;

    color:#111827;

}


/*=========================================================
Description
=========================================================*/

.ra-industry-heading p{

    margin-top:24px;

    font-size:18px;

    line-height:1.9;

    color:#5b6474;

}


/*=========================================================
Industry Grid
=========================================================*/

.ra-industry-grid{

    display:grid;

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

    gap:35px;

    align-items:stretch;

}


/*=========================================================
Background Decorative Shape
=========================================================*/

.ra-industry-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:linear-gradient(135deg,
    rgba(0,102,255,.08),
    rgba(0,180,255,.04));

    top:-180px;

    left:-160px;

    filter:blur(10px);

}


.ra-industry-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:linear-gradient(135deg,
    rgba(0,102,255,.05),
    rgba(0,102,255,.02));

    bottom:-250px;

    right:-220px;

    filter:blur(10px);

}


/*=========================================================
Large Desktop
=========================================================*/

@media (max-width:1200px){

.ra-industry-heading h2{

    font-size:40px;

}

.ra-industry-heading{

    margin-bottom:60px;

}

.ra-industry-grid{

    gap:28px;

}

}


/*=========================================================
Small Laptop
=========================================================*/

@media (max-width:992px){

.ra-industry-section{

    padding:90px 0;

}

.ra-industry-heading h2{

    font-size:36px;

}

.ra-industry-heading p{

    font-size:17px;

}

.ra-industry-grid{

    grid-template-columns:1fr;

    gap:25px;

}

}


/* ==========================================================
   SECTION 2 - INDUSTRIES WE SERVE
   Advanced CSS
   Part 2
   Industry Cards
==========================================================*/


/*=========================================================
Industry Card
=========================================================*/

.ra-industry-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    height:100%;

    padding:38px;

    background:#ffffff;

    border-radius:22px;

    border:1px solid #e7edf5;

    box-shadow:0 12px 35px rgba(17,24,39,.06);

    overflow:hidden;

    transition:all .45s ease;

    z-index:1;

}


/*=========================================================
Hover Gradient
=========================================================*/

.ra-industry-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    135deg,
    rgba(0,102,255,.04),
    rgba(0,174,255,.02));

    opacity:0;

    transition:.45s;

    z-index:-1;

}


.ra-industry-card:hover::before{

    opacity:1;

}


/*=========================================================
Top Border Animation
=========================================================*/

.ra-industry-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(90deg,#0066ff,#00b8ff);

    transition:.45s;

}


.ra-industry-card:hover::after{

    width:100%;

}


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

.ra-industry-card:hover{

    transform:translateY(-10px);

    border-color:#0066ff;

    box-shadow:0 25px 60px rgba(0,102,255,.15);

}


/*=========================================================
Card Top
=========================================================*/

.ra-card-top{

    margin-bottom:25px;

}


/*=========================================================
Number
=========================================================*/

.ra-card-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    margin-bottom:22px;

    border-radius:50%;

    background:linear-gradient(135deg,#0066ff,#00b6ff);

    color:#ffffff;

    font-size:20px;

    font-weight:800;

    box-shadow:0 10px 25px rgba(0,102,255,.30);

}


/*=========================================================
Industry Name
=========================================================*/

.ra-card-top h3{

    margin:0 0 14px;

    font-size:28px;

    line-height:1.3;

    font-weight:700;

    color:#111827;

    transition:.35s;

}


.ra-industry-card:hover h3{

    color:#0066ff;

}


/*=========================================================
Subtitle
=========================================================*/

.ra-card-subtitle{

    margin:0 0 18px;

    font-size:15px;

    line-height:1.8;

    font-weight:600;

    color:#0066ff;

}


/*=========================================================
Description
=========================================================*/

.ra-card-description{

    margin:0;

    font-size:16px;

    line-height:1.9;

    color:#606b7d;

}


/*=========================================================
Service List
=========================================================*/

.ra-service-list{

    list-style:none;

    margin:30px 0;

    padding:0;

}


.ra-service-list li{

    position:relative;

    padding-left:34px;

    margin-bottom:16px;

    font-size:15px;

    line-height:1.8;

    color:#374151;

}


/*=========================================================
Check Icon
=========================================================*/

.ra-service-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:2px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#eaf4ff;

    color:#0066ff;

    font-size:13px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}


/*=========================================================
Button
=========================================================*/

.ra-industry-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:flex-start;

    margin-top:auto;

    padding:14px 28px;

    border-radius:50px;

    background:linear-gradient(135deg,#0066ff,#009dff);

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.35s;

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

}


/*=========================================================
Button Hover
=========================================================*/

.ra-industry-btn:hover{

    transform:translateY(-3px);

    color:#ffffff;

    box-shadow:0 18px 38px rgba(0,102,255,.35);

}


/*=========================================================
Card Entrance Animation
=========================================================*/

.ra-industry-card{

    animation:raIndustryFade .8s ease both;

}


@keyframes raIndustryFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   SECTION 2 - INDUSTRIES WE SERVE
   Advanced CSS
   Part 3
   Responsive CSS
==========================================================*/


/*=========================================================
Tablet Landscape
=========================================================*/

@media (max-width:991px){

.ra-industry-section{

    padding:90px 0;

}

.ra-industry-container{

    padding:0 24px;

}

.ra-industry-heading{

    margin-bottom:55px;

}

.ra-industry-heading h2{

    font-size:38px;

}

.ra-industry-heading p{

    font-size:17px;

    line-height:1.8;

}

.ra-industry-grid{

    grid-template-columns:1fr;

    gap:28px;

}

.ra-industry-card{

    padding:32px;

}

.ra-card-number{

    width:54px;

    height:54px;

    font-size:18px;

}

.ra-card-top h3{

    font-size:26px;

}

.ra-card-subtitle{

    font-size:15px;

}

.ra-card-description{

    font-size:16px;

}

.ra-service-list{

    margin:26px 0;

}

.ra-service-list li{

    font-size:15px;

}

}


/*=========================================================
Mobile Devices
=========================================================*/

@media (max-width:767px){

.ra-industry-section{

    padding:70px 0;

}

.ra-industry-container{

    padding:0 18px;

}

.ra-industry-heading{

    margin-bottom:45px;

}

.ra-industry-tag{

    font-size:11px;

    padding:8px 18px;

    letter-spacing:.8px;

}

.ra-industry-heading h2{

    font-size:30px;

    line-height:1.3;

}

.ra-industry-heading p{

    font-size:16px;

    line-height:1.8;

    margin-top:18px;

}

.ra-industry-grid{

    gap:22px;

}

.ra-industry-card{

    padding:26px 22px;

    border-radius:18px;

}

.ra-card-number{

    width:50px;

    height:50px;

    font-size:17px;

    margin-bottom:18px;

}

.ra-card-top h3{

    font-size:23px;

    margin-bottom:12px;

}

.ra-card-subtitle{

    font-size:14px;

    line-height:1.7;

}

.ra-card-description{

    font-size:15px;

    line-height:1.8;

}

.ra-service-list{

    margin:22px 0;

}

.ra-service-list li{

    padding-left:30px;

    margin-bottom:14px;

    font-size:14px;

    line-height:1.7;

}

.ra-service-list li::before{

    width:20px;

    height:20px;

    font-size:12px;

}

.ra-industry-btn{

    width:100%;

    justify-content:center;

    padding:15px 20px;

    font-size:15px;

}

}


/*=========================================================
Small Mobile
=========================================================*/

@media (max-width:480px){

.ra-industry-section{

    padding:60px 0;

}

.ra-industry-container{

    padding:0 15px;

}

.ra-industry-heading h2{

    font-size:26px;

}

.ra-industry-heading p{

    font-size:15px;

}

.ra-industry-card{

    padding:22px 18px;

}

.ra-card-number{

    width:46px;

    height:46px;

    font-size:16px;

}

.ra-card-top h3{

    font-size:21px;

}

.ra-card-subtitle{

    font-size:13px;

}

.ra-card-description{

    font-size:14px;

}

.ra-service-list li{

    font-size:13.5px;

    margin-bottom:12px;

}

.ra-industry-btn{

    font-size:14px;

    padding:14px 18px;

}

}


/*=========================================================
Accessibility
=========================================================*/

.ra-industry-btn:focus{

    outline:3px solid rgba(0,102,255,.25);

    outline-offset:4px;

}

.ra-industry-card:focus-within{

    border-color:#0066ff;

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

}


/*=========================================================
Reduced Motion Support
=========================================================*/

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

.ra-industry-card,
.ra-industry-btn,
.ra-industry-card::before,
.ra-industry-card::after{

    animation:none;

    transition:none;

}

}