/*
========================================================
STIGASOFT HERO
========================================================
*/
.hero{
position:relative;
min-height:100vh;
overflow:hidden;
color:#fff;
background:#04153C
}
/*-----------------------------------
Background
-----------------------------------*/
.hero-bg{
position:absolute;
inset:0;
}
.hero-bg video,
.hero-bg img{
width:100%;
height:100%;
object-fit:cover;
}
.hero-overlay	{ inset: 0;
position:absolute;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.90) 0%,
rgba(0, 0, 0, 0.70) 41%,
rgba(0, 0, 0, 0) 100%
); max-width:55%}	
/*.hero-overlay	{ inset: 0;
position:absolute;
background: linear-gradient(
90deg,
rgba(4, 21, 60, 0.90) 0%,
rgba(2, 33, 86, 0.70) 81%,
rgba(1, 40, 102, 0) 100%
); max-width:55%}	*/
/*.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(5,15,45,.95) 0%,
rgba(5,15,45,.82) 28%,
rgba(5,15,45,.55) 38%,
rgba(5,15,45,.18) 62%,
rgba(5,15,45,.08) 100%
);
}*/
/*-----------------------------------
Layout
-----------------------------------*/
.hero .container{
position:relative;
z-index:5;
min-height:100vh;
display:flex;
align-items:center;
margin-top:30px
}
.hero-content{
width:100%;
max-width:720px;
}
/*-----------------------------------
Heading
-----------------------------------*/
.hero-title{
font-size:clamp(48px,4vw,62px);
line-height:1.5;
font-weight:800;
color:#fff;
margin-bottom:0;
}
.hero-description{
max-width:560px;
font-size:18px;
line-height:1.7;
color:rgba(255,255,255,.88);
margin-bottom:28px;
}
/*-----------------------------------
Stats
-----------------------------------*/
.hero-stats{
display:flex;
gap:20px;
margin-bottom:30px;
}
.hero-stat{
background:#E4ECFF;
border-radius:12px;
padding:15px 15px 8px;
box-shadow:
0 15px 35px rgba(0,0,0,.15);
max-width:195px
}
.hero-stat h3{
color:#3A4351;
font-size:42px;
line-height:1;
margin-bottom:4px;
font-weight:600;
}
.hero-stat h3 small{
font-size:20px;
font-weight:600;
margin-left: -7px;
}
.hero-stat .line{
max-width:90px;
height:4px;
background:#2ea3ff;
display:block;
margin-bottom:14px;
}
.hero-stat p{
font-size:13px;
line-height:1.5;
color:#3A4351;
font-weight:500;
margin-bottom:0!important
}
/*-----------------------------------
Certification
-----------------------------------*/
.hero-certification{
position:absolute;
right:25px;
bottom:35px;
z-index:6;
}
.hero-certification img{
width:290px;
display:block;
}
/*====================================================
Laptop
====================================================*/
/*@media (max-width:1200px){
.hero-title{
font-size:60px;
}
.hero-description{
font-size:18px;
}
.hero-stat{
width:170px;
}
.hero-stat h3{
font-size:46px;
}
.hero-certification img{
width:240px;
}
}*/
/*====================================================
Tablet
====================================================*/
@media (max-width:991px){
.hero{
min-height:100vh;
}
.hero .container{
align-items:center;
min-height: 85vh;
margin-top: 30px;
padding: 60px 25px;
}
.hero-content{
max-width:100%;
}
.hero-title{
font-size:52px;
}
.hero-description{
font-size:18px;
}
.hero-stats{
gap:16px;
}
.hero-certification img{
width:220px;
}
.modal-overlay.active .modal-box{ max-width: 700px;}
}
/*====================================================
Mobile
====================================================*/
@media (max-width:767px){
.hero-content h1{
font-size:35px;
margin-bottom:18px;
}
.hero-description{
font-size:15px;
line-height:1.6;
margin-bottom:35px;
}
.hero-stats{
flex-direction:row;
gap:15px;
margin-bottom:35px;
}
.hero-stat{
width:115px;
padding:12px;
}
.hero-stat h3{
font-size:32px;
margin-bottom:8px
}
.hero-stat p {
font-size: 14px;
line-height: 1.2;}
.hero-stat h3 small{ font-size:16px}
.hero-btn{
width:100%;
justify-content:center;
height:56px;
}
.hero-certification{
position:static;
left:0;
transform:none;
bottom:0;
width:100%; text-align:center; margin-top:-50px; margin-bottom:20px
}
.hero-certification img{
width:200px;
display:inline-block
}
}
@media (max-width:425px){
.hero .container{
min-height: 95vh;
}	
.hero-stat{
width:100px;
padding:10px;
border-radius:5px;
}
.hero-stat h3{
font-size:23px;
margin-bottom:8px
}
.hero-stat p {
font-size: 12px;
line-height: 1.2;}
.hero-stat h3 small{ font-size:12px}	
}
.hero-highlight{
position:relative;
display:inline-block;
font-weight:800;
background:linear-gradient(
90deg,
#ffffff 0%,
#ffffff 44%,
#6fd8ff 49%,
#ffffff 54%,
#ffffff 100%
);
background-size:350% 100%;
background-position:-300% 0;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
color:transparent;
animation:
textShine 8s cubic-bezier(.4,0,.2,1) infinite,
textGlow 3.8s ease-in-out infinite;
}
/* Premium breathing glow */
@keyframes textGlow{
0%{
filter:
drop-shadow(0 0 6px rgba(74,190,255,.15))
drop-shadow(0 0 12px rgba(74,190,255,.08));
}
50%{
filter:
drop-shadow(0 0 12px rgba(74,190,255,.55))
drop-shadow(0 0 26px rgba(74,190,255,.35))
drop-shadow(0 0 42px rgba(74,190,255,.20));
}
100%{
filter:
drop-shadow(0 0 6px rgba(74,190,255,.15))
drop-shadow(0 0 12px rgba(74,190,255,.08));
}
}
/* Slow moving light */
@keyframes textShine{
0%{
background-position:-320% 0;
}
25%{
background-position:-320% 0;
}
70%{
background-position:320% 0;
}
100%{
background-position:320% 0;
}
}


/*==========================================
AI LABS
==========================================*/
.ai-labs{
position:relative;
overflow:hidden;
background:url(../../images/ai-bg-image.png) no-repeat right top;
background-size:cover;
min-height:100vh;
background-attachment:fixed;
}
.ai-labs:before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at left,#284cb52b 0%,transparent 40%);
pointer-events:none;
}

.ai-labs-wrapper{
max-width:590px
}
.ai-content{
position:relative;
z-index:2;
padding:50px 0; margin:0; text-align:left
}
.ai-logo{
margin-bottom:35px;
justify-content: flex-start;
}
.ai-logo h5{
font-size:52px;
font-weight:700;
color:#fff;
line-height:1;
margin-bottom:8px;
}
.ai-logo span{
background:linear-gradient(90deg,#2f9dff,#ff1570);
-webkit-background-clip:text;
color:transparent;
}
.ai-logo p{
color:#fff;
opacity:.8;
font-size:16px;
}
.ai-logo strong{
color:#3da8ff;
font-weight:600;
}
.ai-content h2{
color:#fff;
font-size:54px;
line-height:1.15;
font-weight:700;
margin-bottom:18px;
}
.ai-content h2 span{background:linear-gradient(90deg,#2f9dff,#ff1570);
-webkit-background-clip:text;
color:transparent;}
.ai-desc, .ai-desc p, .ai-desc li{
color:rgba(255,255,255,.82);
font-size:14px;
line-height:1.6;
max-width:620px;
}
.ai-features{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin:25px 0 30px;
}
.feature-card{
background:rgba(255,255,255,.03);
border:1px solid rgba(70,130,255,.45);
border-radius:16px;
padding:20px;
text-align:center;
transition:.35s;
}
.feature-card:hover{
transform:translateY(-8px);
background:rgba(255,255,255,.06);
border-color:#45a7ff;
}
.feature-card img{
width:42px;
margin-bottom:18px;
display:inline-block
}
.feature-card span{
color:#fff;
font-size:14px;
line-height:1.2;
display:block;
font-weight:500;
}
.ai-image{
position:relative;
display:flex;
justify-content:flex-end;
}
.ai-image img{
width:100%;
max-width:820px;
display:block;
}
/* =========================================================
   GCC & BOT HERO
   ========================================================= */

.pillars.gcc-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;

    background:
        #f7f7f5
        url("../../images/gcc_home-bg.jpg")
        no-repeat
        center center;

    background-size: cover;
    overflow: hidden;
    padding: 0;

    color: var(--color-primary);

    display: flex;
}


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

.gcc-hero .container {
    width: 100%;
    min-height: 100%;

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

    position: relative;
    z-index: 2;
}


.gcc-hero-content {
    width: 100%;
    max-width: 540px;
    padding: 0;
}


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

.gcc-hero-subtitle {
    display: flex;
    align-items: center;

    gap: var(--space-3);
    margin-bottom: var(--space-5);

    color: var(--color-primary);

    font-size: var(--fs-body-xs);
    line-height: 1.2;
    font-weight: 400;

    text-transform: uppercase;
}


.gcc-hero-subtitle .sub-title-arrow {
    display: flex;
    align-items: center;
}


.gcc-hero-subtitle .sub-title-arrow svg {
    width: 55px;
    height: auto;

    fill: none;
    stroke: var(--color-primary);

    display: block;
}


.gcc-hero-subtitle .sub-title-text {
    white-space: nowrap;
}


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

.gcc-hero-heading {
    margin: 0 0 var(--space-4);

    max-width: 570px;

    color: var(--color-primary);

    font-size: var(--fs-h1);
    line-height: 60px;

    font-weight: 700;

    letter-spacing: -1px;
}




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

.gcc-hero-description {
    max-width: 500px;

    margin: var(--space-6) 0;

    color: var(--color-text);

    font-size: var(--fs-body);
    line-height: var(--lh-body);

    font-weight: 400;
}


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

.gcc-hero-buttons {
    display: flex;
    align-items: center;

    gap: var(--space-2);

    flex-wrap: wrap;
    font-weight: 400;
}


.gcc-btn {
    display: inline-flex;

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

    gap: var(--space-3);

    min-height: 38px;

    padding: var(--space-2) var(--space-4);

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

    text-decoration: none;

    font-size: var(--fs-body-xs);
    line-height: 1;

    font-weight: 600;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.gcc-btn-arrow {
    font-size: var(--fs-body-md);
    line-height: 1;

    transition: transform .3s ease;
}


.gcc-btn:hover {
    transform: translateY(-2px);
}


.gcc-btn:hover .gcc-btn-arrow {
    transform: translate(2px, -2px);
}


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

.gcc-btn-primary {
    background: var(--color-highlight);

    color: var(--color-text-light);

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

    box-shadow: 0 5px 15px rgba(35, 157, 234, .15);
}


.gcc-btn-primary:hover {
    background: var(--color-highlight);

    color: var(--color-text-light);

    border-color: var(--color-highlight);
}


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

.gcc-btn-secondary {
    background: rgba(255, 255, 255, .7);

    color: var(--color-primary);

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


.gcc-btn-secondary:hover {
    background: var(--color-text-light);

    color: var(--color-primary);

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


/* =========================================================
   REMOVE OLD PILLAR STYLES
   ========================================================= */

.pillars.gcc-hero .pillar-grid,
.pillars.gcc-hero .pillar-card {
    display: none;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1440px) {

    .pillars.gcc-hero {
        min-height: 620px;
    }

    .gcc-hero-heading {
        font-size: var(--fs-h1);
    }

}


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

@media (max-width: 1100px) {

    .pillars.gcc-hero {
        min-height: 100vh;
        background-position: center center;
    }

    .gcc-hero .container {
        min-height: 100%;
    }

    .gcc-hero-content {
        width: 52%;
        max-width: 540px;
    }

    .gcc-hero-heading {
        font-size: var(--fs-h1);
    }

    .gcc-hero-description {
        max-width: 460px;
    }

}


/* =========================================================
   SMALL TABLET / LAPTOP
   ========================================================= */

@media (max-width: 991px) {

    .pillars.gcc-hero {
        min-height: 100vh;
        background-position: 58% center;
    }

    .gcc-hero .container {
        min-height: 100%;
    }

    .gcc-hero-content {
        width: 58%;
    }
    .gcc-hero{position: relative;}
.gcc-hero:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;background: rgba(255,255,255,0.6);}


}


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

@media (max-width: 767px) {

    .pillars.gcc-hero {
        height: auto;
        min-height: auto;

        background-size: cover;

        padding-bottom: 20px;
    }


    .gcc-hero .container {
        min-height: auto;

        display: block;
    }


    .gcc-hero-content {
        width: 100%;
        max-width: 100%;

        padding: var(--space-11) 0 ;
    }


    .gcc-hero-subtitle {
        margin-bottom: var(--space-4);

        font-size: var(--fs-body-xs);
    }


    .gcc-hero-subtitle .sub-title-arrow svg {
        width: 42px;
    }


    .gcc-hero-heading {
        max-width: 100%;

        margin-bottom: var(--space-4);

        font-size: var(--fs-h1);

        line-height: var(--lh-heading);

        letter-spacing: -.6px;
    }


    .gcc-hero-description {
        max-width: 100%;

        margin-bottom: var(--space-5);

        font-size: var(--fs-body);

        line-height: var(--lh-body);
    }


    .gcc-hero-buttons {
        gap: var(--space-2);
    }


    .gcc-btn {
        min-height: 40px;

        padding: var(--space-3) var(--space-4);

        font-size: var(--fs-body-xs);
    }

}


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

@media (max-width: 480px) {

    .pillars.gcc-hero {
        padding-bottom: 20px;

        background-position: center bottom;
    }


  

    .gcc-hero-buttons {
        flex-direction: row;
        align-items: flex-start;
    }


    .gcc-btn {
        font-size: var(--fs-body-xs);

        padding:
            var(--space-3)
            var(--space-3);
    }

}


/*=============================
Tablet
==============================*/
@media(max-width:991px){
.ai-labs-wrapper{
grid-template-columns:1fr;
gap:60px;
}

.modal-left, .modal-right{ height: auto;}
.modal-overlay.active .modal-left{ max-height:200px;}

.ai-labs{
background-position: top center;
min-height: auto;

}


}
/*=============================
Mobile
==============================*/
@media(max-width:767px){
.ai-logo{ display:block}
.ai-content{padding:0}
.ai-labs{
padding:70px 0;
background-position:center top
}
.ai-logo h5{
font-size:38px;
}
.ai-logo p{
font-size:16px;
}
.ai-content h2{
font-size:34px;
}
.ai-desc{
font-size:17px;
line-height:1.8;
}
.ai-features{
grid-template-columns:2fr 2fr;
}
.feature-card{
padding:20px 14px;
}
.feature-card img{
width:34px;
}
.feature-card span{
font-size:15px;
}
.ai-btn{
width:100%;
justify-content:center;
}
}
/*=============================
Small Mobile
==============================*/
@media(max-width:480px){
.ai-content h2{
font-size:30px;
}
.ai-image img{
max-width:100%;
}
.hero-stat h3 small{

margin-left: -4px;
}

}
.ai-logo,
.ai-content h2,
.ai-desc,
.ai-btn,
.feature-card{
opacity:0;
}
.ai-logo,
.ai-content h2,
.ai-desc,
.ai-btn{
transform:translateY(40px);
}
.feature-card{
transform:translateY(60px) scale(.92);
}