:root{

    --primary:#0f172a;
    --secondary:#1e293b;

    --accent:#2563eb;

    --text:#475569;

    --white:#ffffff;

    --bg:#f8fafc;

    --glass:rgba(255,255,255,0.65);

    --border:rgba(255,255,255,0.4);

    --shadow:
        0 10px 40px rgba(0,0,0,0.08);

    --transition:0.4s ease;
}

/* ======================================
   BODY
====================================== */

body{

    font-family:'Poppins',sans-serif;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #eef2ff
        );

    color:var(--primary);

    position:relative;

    overflow-x:hidden;
}

/* ======================================
   BACKGROUND CIRCLES
====================================== */

.gradient-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:0.5;

    z-index:0;

    animation:float 10s infinite ease-in-out;
}

.gradient-circle.one{

    width:350px;
    height:350px;

    background:#dbeafe;

    top:-120px;
    left:-120px;
}

.gradient-circle.two{

    width:300px;
    height:300px;

    background:#e0f2fe;

    right:-100px;
    bottom:-100px;

    animation-duration:13s;
}

.gradient-circle.three{

    width:200px;
    height:200px;

    background:#ede9fe;

    top:40%;
    right:10%;

    animation-duration:8s;
}

/* ======================================
   FLOAT
====================================== */

@keyframes float{

    0%{
        transform:
            translateY(0px)
            rotate(0deg);
    }

    50%{
        transform:
            translateY(-25px)
            rotate(180deg);
    }

    100%{
        transform:
            translateY(0px)
            rotate(360deg);
    }
}

/* ======================================
   PARTICLES
====================================== */

.particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;
}

.particles span{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#cbd5e1;

    animation:particles 12s linear infinite;

    opacity:0.7;
}

.particles span:nth-child(1){
    left:10%;
    animation-delay:0s;
}

.particles span:nth-child(2){
    left:25%;
    animation-delay:2s;
}

.particles span:nth-child(3){
    left:40%;
    animation-delay:4s;
}

.particles span:nth-child(4){
    left:60%;
    animation-delay:6s;
}

.particles span:nth-child(5){
    left:75%;
    animation-delay:8s;
}

.particles span:nth-child(6){
    left:90%;
    animation-delay:10s;
}

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

@keyframes particles{

    0%{
        transform:translateY(0);
        bottom:-20px;
    }

    100%{
        transform:
            translateY(-105vh)
            translateX(30px);

        bottom:100%;
    }
}

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

.principal-section{

    width:100%;

    min-height:100vh;

    padding:100px 20px;

    display:flex;

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

    position:relative;

    z-index:2;
}

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

.principal-container{

    width:100%;

    max-width:1250px;

    display:grid;

    grid-template-columns:
        420px 1fr;

    gap:60px;

    align-items:center;
}

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

.principal-left{

    background:var(--glass);

    backdrop-filter:blur(18px);

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

    border-radius:35px;

    padding:40px 30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

    position:relative;

    overflow:hidden;
}

.principal-left:hover{

    transform:translateY(-10px);
}

/* ======================================
   IMAGE
====================================== */

.principal-image-wrapper{

    position:relative;

    width:260px;
    height:260px;

    margin:auto;
}

.image-border{

    position:absolute;

    inset:-10px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    animation:rotate 8s linear infinite;
}

@keyframes rotate{

    100%{
        transform:rotate(360deg);
    }
}

.principal-image-wrapper img{

    position:relative;

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

    border:8px solid #fff;

    z-index:2;
}

/* ======================================
   INFO
====================================== */

.principal-info{

    margin-top:30px;
}

.designation{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:#dbeafe;

    color:#1d4ed8;

    font-size:13px;

    font-weight:600;

    margin-bottom:15px;
}

.principal-info h2{

    font-size:32px;

    margin-bottom:10px;
}

.principal-info p{

    color:var(--text);

    font-size:15px;
}

/* ======================================
   SOCIAL ICONS
====================================== */

.social-icons{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:30px;
}

.social-icons a{

    width:45px;
    height:45px;

    display:flex;

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

    border-radius:50%;

    background:#fff;

    color:#1e293b;

    text-decoration:none;

    transition:var(--transition);

    box-shadow:
        0 5px 15px rgba(0,0,0,0.08);
}

.social-icons a:hover{

    transform:translateY(-5px);

    background:#2563eb;

    color:#fff;
}

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

.principal-right{

    background:var(--glass);

    backdrop-filter:blur(18px);

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

    border-radius:35px;

    padding:60px;

    box-shadow:var(--shadow);

    position:relative;

    overflow:hidden;
}

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

.top-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:#ffffff;

    color:#1e293b;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.05);
}

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

.principal-right h1{

    font-size:60px;

    line-height:1.1;

    margin-bottom:25px;

    font-weight:800;

    background:
        linear-gradient(
            to right,
            #0f172a,
            #2563eb
        );

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

/* ======================================
   LINE
====================================== */

.line{

    width:100px;
    height:5px;

    border-radius:50px;

    background:
        linear-gradient(
            to right,
            #2563eb,
            #7c3aed
        );

    margin-bottom:30px;
}

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

.principal-right p{

    font-size:17px;

    line-height:2;

    color:var(--text);

    margin-bottom:18px;
}

/* ======================================
   SIGNATURE BOX
====================================== */

.signature-box{

    margin-top:40px;

    padding-top:30px;

    border-top:1px solid rgba(0,0,0,0.08);

    display:flex;

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

    gap:20px;

    flex-wrap:wrap;
}

.signature-box h3{

    font-size:28px;

    margin-bottom:5px;
}

.signature-box span{

    color:var(--text);
}

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

.cta-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 30px;

    border-radius:60px;

    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color:#fff;

    font-weight:600;

    transition:var(--transition);
}

.cta-btn:hover{

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 30px rgba(37,99,235,0.3);
}

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

.reveal-left,
.reveal-right{

    opacity:0;

    transition:1s ease;
}

.reveal-left{

    transform:translateX(-60px);
}

.reveal-right{

    transform:translateX(60px);
}

.reveal-active{

    opacity:1;

    transform:translateX(0);
}

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

@media(max-width:1100px){

    .principal-container{

        grid-template-columns:1fr;

        gap:40px;
    }

    .principal-right h1{

        font-size:48px;
    }
}

@media(max-width:768px){

    .principal-section{

        padding:70px 15px;
    }

    .principal-right{

        padding:40px 25px;
    }

    .principal-right h1{

        font-size:38px;
    }

    .principal-right p{

        font-size:15px;
    }

    .signature-box{

        flex-direction:column;

        align-items:flex-start;
    }
}

@media(max-width:500px){

    .principal-image-wrapper{

        width:220px;
        height:220px;
    }

    .principal-info h2{

        font-size:26px;
    }

    .principal-right h1{

        font-size:32px;
    }

    .cta-btn{

        width:100%;

        justify-content:center;
    }
}