/* ==========================
   ABOUT PAGE
========================== */

.about-page {
    padding-top: 100px;
    color: #f5f7ff;
}

/* ==========================
   CONTAINER
========================== */

.about-page .container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

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

.about-hero {
    text-align: center;
    padding: 80px 0;
}

.section-tag {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.3);
    color: #7c6cff;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .05em;
}

.about-hero h1{
    margin:25px 0;
    font-size: clamp(2.3rem,5vw,4rem);
    line-height:1.15;
    font-weight:800;

    background:linear-gradient(
        90deg,
        #ffffff,
        #8a7dff,
        #4da3ff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-text{
    max-width: 900px;
    margin: auto;
    font-size: 1.2rem;
    line-height: 2;
    color: #d6ddff;
}

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

.about-section,
.about-vision{

    margin:70px 0;

    padding:40px;

    background:rgba(18,24,47,.72);

    border:1px solid rgba(120,140,255,.15);

    border-radius:28px;

    backdrop-filter:blur(18px);

   overflow: hidden;
   position: relative;

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

.about-section:hover,
.about-vision:hover{

    transform:
translateY(-8px)
scale(1.01);

    border-color:#675bff;

    box-shadow:
    0 20px 60px rgba(76,99,255,.18);

}
.about-section::before,
.about-vision::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #6b63ff,
        transparent
    );

}

/* ==========================
   HEADINGS
========================== */

.about-section h2,
.about-vision h2{

    font-size:2rem;

    margin-bottom:20px;

    background:linear-gradient(
90deg,
#8f84ff,
#5ca9ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.about-section h3{

    margin-top:35px;

    margin-bottom:15px;

    color:#ffffff;

    font-size:1.35rem;

}

/* ==========================
   TEXT
========================== */

.about-page .about-section p,
.about-page .about-vision p{

    font-size:1.12rem !important;
    line-height:2 !important;
   
    color:#cfd5ec;

    line-height:2;

    margin-bottom:24px;

    font-size:1.12rem;

    max-width:760px;

}

/* ==========================
   LISTS
========================== */

.about-section ul,
.about-vision ul{

    margin-top:15px;

    padding-left:25px;

}

.about-page .about-section li,
.about-page .about-vision li{

    font-size:1.08rem !important;

    margin:12px 0;

    color:#dfe5ff;
   font-size:1.08rem;

line-height:1.9;

padding-left:8px;

}

/* ==========================
   BLOCKQUOTE
========================== */

blockquote{

    margin-top:35px;

    padding:24px;

    border-left:5px solid #695cff;

    border-radius:16px;

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

    font-size:1.1rem;

    font-style:italic;

    color:#ffffff;
   box-shadow:
0 0 30px rgba(107,99,255,.15);

}

/* ==========================
   LINKS
========================== */

.about-page a{

    color:#7c6cff;

    text-decoration:none;

}

.about-page a:hover{

    color:#9d92ff;

}

/* ==========================
   SPACING
========================== */

.about-section>*:last-child,
.about-vision>*:last-child{

    margin-bottom:0;

}

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

@media (max-width:768px){

.about-section,
.about-vision{

padding:28px;

border-radius:22px;

}
   .about-page .about-section li,
.about-page .about-vision li{

    font-size:1.08rem !important;
}

.about-section h2{

font-size:1.7rem;

}

.about-section h3{

font-size:1.2rem;

}

.about-page .about-section p,
.about-page .about-vision p{

    font-size:1.12rem !important;
    line-height:2 !important;
}

  }