@font-face{
    font-family: Manrope;
    src: url("assets/fonts/Manrope-VariableFont_wght.ttf");
}

.html, body{
    margin: 0;
    padding: 0;
    font-family: Manrope, Verdana, sans-serif;
}




/* -------- Hero section style -------- */

.hero {
    padding-top: 12vh;
    width: 100%;
    height: 100vh;
    display: block;
    align-items: center;
    background-image: url(assets/Backgrounds/LightWaves_Filtered.png);
    background-size: 100%,100%;
    transition: all 0.3s ease;
    position: sticky;
    top: 0;
    
}

.hero-left{
    width: 42%;
    padding-left: 6%;
    padding-right: 2%;
    max-height: 100%;
}

.hero-head{ 
    padding-top: 5%;
    padding-bottom: 3%;
    text-decoration: none;
    font-weight: 800;
    font-size: 5vh;
    color: #273270;
    transition: color 0.2s ease;
    text-align: left;
}

.hero-body{
    text-decoration: none;
    font-weight: 400;
    font-size: 2.7vh;
    color: #273270;
    transition: color 0.2s ease;
    text-align: left;
    padding-bottom: 10%;
    width: 70%;
}

.hero-buttons{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 12%;
    width: 50%;
    padding-left: 0;
    padding-right: 25%;
    font-size: 3vh;
}

.solutions-btn{
    height: 12%;
    width: auto;
    padding: 0.7rem;
    color:#f1f1f5;
    background-color: #273270;
    border-radius: 999px;
}

.solutions-btn:hover{
    background-color: #093da5;
    color: #d2e4ff;
}

/* -------- Intro section style -------- */

.intro{
    padding-top: 0;
    padding-bottom: 3vh;
    width: 100%;
    height: 120vh;
    display: flex;
    align-items: center;
    background-image: url(assets/Backgrounds/DarkFlow.png);
    background-size: 100%,100%;
    transition: all 0.3s ease;
    position: sticky;
    top: 0;
}

.intro-left{
    width: 45%;
    padding-left: 5%;
    gap: 5%;
    display: grid;
    align-items: center;
    margin: auto;
    place-items: center;
}

.intro-right{
    width: 45%;
    padding-right: 5%;
    align-items: right;
    align-self: right;
    color: #000000;
    text-align: center;
}

.intro h4{ 
    color: #2c69b9;
    font-size: 2vh;
}

.ai-blurb{
    color: #2dceff;
    font-weight: 200;
    font-size: 3.5vh;
    margin-bottom: 0;
}

.intro h2{
    color: #f1f1f5;
    font-weight: 600;
    font-size: 7vh;
    margin-top: 0;
}

.intro-subtitle{
    font-size: 3vh;
}

.intro-right ul{
    display: table;
    margin: 0 auto;
    text-align: left;
    font-size: 2vh;
}

.intro-right li{
    padding-top: 1.5%;
}

.intro .card{
    position: absolute;
    width: 9vw;
    height: 25vh;
    border-radius: 20px;
    transition: all 0.4s ease;
    padding: 0.7rem;
    text-align: center;
}

.intro .card p{
    font-size: 1.7vh;
}

.card-center {
    transform: translateX(0) scale(1);
    z-index: 3;
    background-color: #f1f1f5;
}

.card-left {
    transform: translateX(-7vw) translateY(-6vh) scale(0.85);
    z-index: 2;
    background-color: #999;
    color: #222222;
}

.card-right {
    transform: translateX(7vw) translateY(-6vh) scale(0.85);
    z-index: 2;
    background-color: #999;
    color: #222222;
}

.card:hover{
    background-color: #f1f1f5;
}

.card-dots {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

.dot {
    width: 12px;
    height: 12px;
    background: #aaa;
    border-radius: 50%;
    cursor: pointer;
}

/* -------- Features section style -------- */

.features{
    padding-top: 3vh;
    padding-bottom: 3vh;
    width: 100%;
    height: 95vh;
    display: block;
    align-items: center;
    background-image: url(assets/Backgrounds/DarkSwirl.png);
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.3s ease;
    position: sticky;
    top: 0;
    border-top: 1px solid #000a3f;

    text-align: center;
}

.features h4{
    color: #273270;
    background-color: #ffffff50;
    font-size: 4vh;
    margin-bottom: 0;
}

.features h2{
    color: #f1f1f5;
    font-size: 8vh;
    margin-top: 0;
    margin-bottom: 1%;
}

.features p{
    color: #f1f1f5;
    font-size: 2.5vh;
    margin-top: 0;
    width: 45%;
    padding-left: 27.5%;
    padding-right: 27.5%;
}

.feature-cards{ /*THIS IS THE SECTION CONTAINING THE CARDS*/
    display: flex;
    width: 45%;
    padding-left: 27.5%;
    padding-right: 27.5%;
    align-items: center;
}

.features #panel{ /*THIS IS THE *panels* THEMSELVES*/
    background-image: url(assets/images/Illustration1.png);
    background-size: cover;
    border-radius: 20px;
    padding: 0.7rem;
    width: 45%;
    height: max-content;
    min-height: 50vh;
    text-align: center;
    margin: auto;
    color: black;

    transition: all 0.7s ease;
}

.features #panel:hover{
    background-color: #f1f1f5;
    background-image: none;
}

.features #panel:hover p{
    display: block;
}

.features #panel h3{ /*this is just the title of the cards*/
    border-radius: 30px;
    background-color: #f1f1f5;
    font-size: 3.5vh;
}

.features #panel p{
    display: none;
    color: #000000;
    padding-top: 15%;
    font-size: 2.5vh;
}






/* ---------------- MOBILE STYLES ---------------- */

@media screen and (max-width: 800px){



/* -------- Hero section style (Mobile) -------- */

.hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    min-height: 100vh;
    background-image: url("assets/Backgrounds/Mobile/LightWaves_Filtered.png");
}

.hero-left{
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
}

.hero-head{
    font-size: 1.3rem;
    text-align: center;
}

.hero-body{
    font-size: 1rem;
    text-align: center;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
}

.hero-buttons{
    gap: 0.5rem;
    margin: auto;
    display: block;
    padding: 0;
    text-align: center;
}

.hero-buttons .demo-btn{
    margin: auto;
}

.solutions-btn{
    display: none;
}

/* -------- Intro section style (Mobile) -------- */

.intro{
    padding-top: 22vh;
    margin-top: 0;
    top: -11vh;
    
    min-height: 55vh;

    background-image: url("assets/Backgrounds/Mobile/DarkFlow.svg");
    background-repeat: no-repeat;
    background-size: cover;

    display: block;
}

.intro-left{
    display: none;
}

.intro-right{
    width: 90%;
    padding-left: 5%;
}

.intro h4{
    font-size: 0.7rem;
}

.ai-blurb{
    font-weight: 200;
    font-size: 1rem;
    margin-top: 0%;
    margin-bottom: 0;
    padding-bottom: 0;
}

.intro h2{
    color: #f1f1f5;
    font-weight: 300;
    font-size: 2rem;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 5vh;
}

.intro-subtitle{
    font-size: 1rem;  
}

.intro-right{
    color: #f1f1f5;
}

.intro-right #tech-list{
    background-color: #00000040;
    padding: 0.5rem;
    padding-bottom: 1.3rem;
    border-radius: 15px;
}

.intro-right li{
    padding-top: 5%;
}

/* -------- Features section style (Mobile) -------- */

.features{
    min-height: 55vh;
    background-image: url("assets/Backgrounds/Mobile/DarkSwirl.svg");
    background-position: center;
    padding-top: 17vh;
    border-top: none;
}

.features h4{
    font-size: 1.5rem;
}

.features h2{
    font-size: 2.5rem;
}

.features p{
    font-size: 1rem;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
}

.feature-cards{
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    display: block;
}

.features #panel{
    width: 70%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 50%;
    background-position: top;
    background-color: #273270;
    border: 2px solid #000000;
    margin-bottom: 5%;
    min-height: 0;
    height: max-content;
}

.features #panel h3{
    background-color: #f1f1f575;
    padding: 0.5rem;
    margin-top: 2%;
}

.features #panel p{
    display: block;
    color: #f1f1f5;
}


}