/*====================================================
 RAJAT ADHIKARI - PORTFOLIO HERO
 CSS PART 1
====================================================*/

/*==============================
RESET
==============================*/

.ra-portfolio-hero *,
.ra-portfolio-hero *::before,
.ra-portfolio-hero *::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.ra-portfolio-hero{
    position:relative;
    overflow:hidden;
    background:#ffffff;
    padding:110px 0;
    font-family:Inter,sans-serif;
}

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

.ra-hero-container{

    width:92%;
    max-width:1400px;

    margin:auto;

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

    gap:80px;

    position:relative;
    z-index:2;

}

/*==============================
LEFT SIDE
==============================*/

.ra-hero-left{

    flex:1;

}

.ra-hero-right{

    flex:1;

    position:relative;

    min-height:650px;

}


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

.ra-hero-badge{

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

    gap:12px;

    padding:12px 22px;

    border-radius:100px;

    background:#eef6ff;

    color:#0056d6;

    font-size:15px;

    font-weight:600;

    margin-bottom:35px;

    box-shadow:

    0 12px 30px rgba(0,0,0,.05);

}

.ra-hero-badge span{

    width:12px;

    height:12px;

    background:#2ecc71;

    border-radius:50%;

}


/*==============================
TITLE
==============================*/

.ra-hero-title{

    font-size:56px;

    line-height:1.15;

    color:#111;

    font-weight:800;

    margin-bottom:30px;

}

.ra-hero-title span{

    color:#0066ff;

    display:block;

}


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

.ra-hero-description{

    font-size:18px;

    color:#5d6678;

    line-height:1.9;

    max-width:700px;

    margin-bottom:45px;

}


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

.ra-hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:55px;

}

.ra-btn-primary{

    text-decoration:none;

    background:#0066ff;

    color:#fff;

    padding:18px 42px;

    border-radius:60px;

    font-size:16px;

    font-weight:700;

    transition:.35s;

    box-shadow:

    0 18px 40px rgba(0,102,255,.25);

}

.ra-btn-primary:hover{

    transform:translateY(-6px);

}

.ra-btn-secondary{

    text-decoration:none;

    color:#0066ff;

    border:2px solid #0066ff;

    padding:18px 42px;

    border-radius:60px;

    font-size:16px;

    font-weight:700;

    transition:.35s;

}

.ra-btn-secondary:hover{

    background:#0066ff;

    color:#fff;

}


/*==============================
HIGHLIGHT GRID
==============================*/

.ra-highlight-grid{

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:25px;

}


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

.ra-highlight-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:

    0 18px 45px rgba(0,0,0,.06);

    transition:.4s;

    border:1px solid rgba(0,0,0,.05);

}

.ra-highlight-card:hover{

    transform:translateY(-10px);

}

.ra-highlight-card h2{

    font-size:44px;

    color:#0066ff;

    margin-bottom:12px;

}

.ra-highlight-card p{

    font-size:17px;

    color:#555;

    line-height:1.6;

}


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

.ra-bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(60px);

    opacity:.35;

}

.ra-bg-circle-1{

    width:380px;

    height:380px;

    background:#5aa8ff;

    top:-120px;

    left:-120px;

}

.ra-bg-circle-2{

    width:420px;

    height:420px;

    background:#7cc8ff;

    bottom:-180px;

    right:-150px;

}

.ra-bg-circle-3{

    width:250px;

    height:250px;

    background:#0066ff;

    top:50%;

    left:45%;

    transform:translateY(-50%);

}


/*==============================
DESKTOP FRAME
==============================*/

.ra-desktop-frame{

    width:100%;

    max-width:620px;

    margin:auto;

    background:#ffffff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:

    0 35px 80px rgba(0,0,0,.12);

    border:1px solid rgba(0,0,0,.06);

}


/*==============================
TOP BAR
==============================*/

.ra-browser-top{

    background:#f7f9fb;

    padding:18px 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #ececec;

}

.ra-browser-dots{

    display:flex;

    gap:8px;

}

.ra-browser-dots span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#d8d8d8;

}

.ra-browser-url{

    font-size:14px;

    color:#666;

    font-weight:600;

}


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

.ra-browser-body{

    display:flex;

    min-height:420px;

}


/*==============================
SIDEBAR
==============================*/

.ra-browser-sidebar{

    width:90px;

    background:#fafafa;

    padding:22px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.ra-side-item{

    width:100%;

    height:18px;

    background:#e9eef6;

    border-radius:20px;

}


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

.ra-browser-content{

    flex:1;

    padding:25px;

}

.ra-content-banner{

    width:100%;

    height:120px;

    border-radius:20px;

    background:linear-gradient(135deg,#0066ff,#53b2ff);

    margin-bottom:22px;

}

.ra-content-row{

    display:grid;

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

    gap:18px;

    margin-bottom:18px;

}

.ra-content-box{

    height:130px;

    background:#eef4fb;

    border-radius:20px;

}

/*====================================================
   CSS PART 2A-1
   Tablet • Mobile • Glass Cards
====================================================*/

/* ==========================================
   RIGHT SIDE CONTAINER
========================================== */

.ra-hero-right{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:700px;
}

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

.ra-tablet-frame{

    position:absolute;

    width:220px;

    height:300px;

    right:-25px;

    bottom:70px;

    background:#ffffff;

    border-radius:28px;

    border:10px solid #222;

    overflow:hidden;

    box-shadow:
    0 30px 70px rgba(0,0,0,.18);

    transition:.45s ease;

    z-index:5;

}

.ra-tablet-frame:hover{

    transform:
    translateY(-12px)
    rotate(-2deg)
    scale(1.03);

}

.ra-tablet-screen{

    width:100%;

    height:100%;

    background:#f7f9fc;

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.ra-tablet-box{

    flex:1;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #0066ff,
        #63b5ff
    );

    opacity:.95;

}

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

.ra-mobile-frame{

    position:absolute;

    width:120px;

    height:245px;

    left:-18px;

    bottom:25px;

    background:#ffffff;

    border:8px solid #222;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
    0 22px 60px rgba(0,0,0,.18);

    transition:.45s;

    z-index:6;

}

.ra-mobile-frame:hover{

    transform:
    translateY(-10px)
    rotate(4deg)
    scale(1.05);

}

.ra-mobile-screen{

    width:100%;

    height:100%;

    background:#f5f8fc;

    padding:16px;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.ra-mobile-line{

    height:16px;

    border-radius:50px;

    background:#dce8f8;

}

.ra-mobile-line:nth-child(1){

    width:85%;

}

.ra-mobile-line:nth-child(2){

    width:100%;

}

.ra-mobile-line:nth-child(3){

    width:72%;

}

.ra-mobile-line:nth-child(4){

    width:92%;

}

/* ==========================================
   GLASS CARDS
========================================== */

.ra-glass-card{

    position:absolute;

    width:180px;

    padding:20px;

    border-radius:22px;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    background:
    rgba(255,255,255,.55);

    border:
    1px solid rgba(255,255,255,.45);

    box-shadow:
    0 20px 45px rgba(0,0,0,.10);

    transition:
    transform .45s,
    box-shadow .45s;

    z-index:8;

}

.ra-glass-card:hover{

    transform:
    translateY(-10px)
    scale(1.04);

    box-shadow:
    0 28px 60px rgba(0,102,255,.18);

}

.ra-glass-card h3{

    font-size:22px;

    color:#0066ff;

    margin-bottom:8px;

    font-weight:700;

}

.ra-glass-card p{

    font-size:15px;

    color:#5d6678;

    line-height:1.7;

}

/* ==========================================
   CARD POSITIONS
========================================== */

.ra-glass-1{

    top:20px;

    left:-40px;

}

.ra-glass-2{

    right:-50px;

    top:180px;

}

.ra-glass-3{

    bottom:-10px;

    left:110px;

}

/* ==========================================
   EXTRA SHADOW EFFECT
========================================== */

.ra-glass-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.45),
        rgba(255,255,255,0)
    );

    pointer-events:none;

}

/* ==========================================
   TABLET + MOBILE DEPTH
========================================== */

.ra-tablet-frame::after,
.ra-mobile-frame::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    box-shadow:
    inset 0 0 25px rgba(255,255,255,.18);

    pointer-events:none;

}


/*====================================================
  CSS PART 2A-2
  Floating Icons • Hover Effects • Animations
====================================================*/

/*=========================================
  FLOATING ICON BASE
=========================================*/

.ra-floating-icon{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:90px;
    height:48px;
    padding:0 18px;

    border-radius:50px;

    background:#ffffff;

    color:#0f62fe;

    font-size:14px;
    font-weight:700;
    letter-spacing:.3px;

    border:1px solid rgba(15,98,254,.10);

    box-shadow:
        0 18px 45px rgba(0,0,0,.10);

    cursor:default;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        color .35s ease;

    z-index:20;
}

.ra-floating-icon:hover{

    background:#0f62fe;
    color:#ffffff;

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

    box-shadow:
        0 22px 55px rgba(15,98,254,.28);

}

/*=========================================
  INDIVIDUAL POSITIONS
=========================================*/

.ra-icon-html{

    top:20px;
    right:60px;

    animation:
        raFloatOne 6s ease-in-out infinite;

}

.ra-icon-css{

    top:170px;
    left:-35px;

    animation:
        raFloatTwo 7s ease-in-out infinite;

}

.ra-icon-js{

    top:330px;
    right:-20px;

    animation:
        raFloatThree 6.5s ease-in-out infinite;

}

.ra-icon-wordpress{

    bottom:220px;
    left:20px;

    animation:
        raFloatFour 8s ease-in-out infinite;

}

.ra-icon-seo{

    bottom:80px;
    right:30px;

    animation:
        raFloatFive 7.5s ease-in-out infinite;

}

.ra-icon-ui{

    top:95px;
    left:110px;

    animation:
        raFloatSix 5.8s ease-in-out infinite;

}

/*=========================================
  DESKTOP FRAME EFFECT
=========================================*/

.ra-desktop-frame{

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

.ra-desktop-frame:hover{

    transform:
        translateY(-10px)
        scale(1.02);

    box-shadow:
        0 40px 90px rgba(0,0,0,.18);

}

/*=========================================
  CONTENT BOX EFFECT
=========================================*/

.ra-content-box{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.ra-content-box:hover{

    transform:translateY(-6px);

    box-shadow:
        0 15px 35px rgba(15,98,254,.15);

}

/*=========================================
  BANNER EFFECT
=========================================*/

.ra-content-banner{

    position:relative;
    overflow:hidden;

}

.ra-content-banner::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:45%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    animation:
        raShine 4.5s linear infinite;

}

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

.ra-btn-primary,
.ra-btn-secondary{

    position:relative;
    overflow:hidden;

}

.ra-btn-primary::before,
.ra-btn-secondary::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:45%;
    height:100%;

    background:
        rgba(255,255,255,.30);

    transform:skewX(-25deg);

    transition:.6s;

}

.ra-btn-primary:hover::before,
.ra-btn-secondary:hover::before{

    left:135%;

}

/*=========================================
  CARD EFFECT
=========================================*/

.ra-highlight-card{

    overflow:hidden;
    position:relative;

}

.ra-highlight-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(15,98,254,.04),
            transparent
        );

    opacity:0;

    transition:.35s;

}

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

    opacity:1;

}

/*=========================================
  KEYFRAMES
=========================================*/

@keyframes raFloatOne{

    0%,100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-18px);

    }

}

@keyframes raFloatTwo{

    0%,100%{

        transform:
            translateY(0)
            rotate(0deg);

    }

    50%{

        transform:
            translateY(-15px)
            rotate(-4deg);

    }

}

@keyframes raFloatThree{

    0%,100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(18px);

    }

}

@keyframes raFloatFour{

    0%,100%{

        transform:
            translateX(0);

    }

    50%{

        transform:
            translateX(12px);

    }

}

@keyframes raFloatFive{

    0%,100%{

        transform:
            translateY(0)
            scale(1);

    }

    50%{

        transform:
            translateY(-12px)
            scale(1.06);

    }

}

@keyframes raFloatSix{

    0%,100%{

        transform:
            rotate(0deg);

    }

    50%{

        transform:
            rotate(6deg);

    }

}

@keyframes raShine{

    from{

        left:-120%;

    }

    to{

        left:130%;

    }

}

/*====================================================
  CSS PART 2B
  Responsive Media Queries
====================================================*/

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

@media (max-width:1400px){

    .ra-hero-container{
        max-width:1200px;
        gap:60px;
    }

    .ra-hero-title{
        font-size:50px;
    }

    .ra-desktop-frame{
        max-width:560px;
    }

}

/*=========================================
  LAPTOP
=========================================*/

@media (max-width:1200px){

    .ra-portfolio-hero{
        padding:90px 0;
    }

    .ra-hero-container{
        gap:45px;
    }

    .ra-hero-title{
        font-size:44px;
    }

    .ra-hero-description{
        font-size:17px;
    }

    .ra-desktop-frame{
        max-width:500px;
    }

    .ra-tablet-frame{
        width:190px;
        height:265px;
        right:0;
    }

    .ra-mobile-frame{
        width:105px;
        height:220px;
    }

    .ra-glass-card{
        width:165px;
    }

}

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

@media (max-width:992px){

    .ra-portfolio-hero{
        padding:80px 0;
    }

    .ra-hero-container{

        flex-direction:column;

        text-align:center;

        gap:70px;

    }

    .ra-hero-left,
    .ra-hero-right{

        width:100%;
        max-width:100%;

    }

    .ra-hero-title{

        font-size:40px;

    }

    .ra-hero-description{

        max-width:100%;
        margin-left:auto;
        margin-right:auto;

    }

    .ra-hero-buttons{

        justify-content:center;

    }

    .ra-highlight-grid{

        max-width:700px;
        margin:auto;

    }

    .ra-hero-right{

        min-height:700px;

    }

    .ra-desktop-frame{

        max-width:600px;

    }

}

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

@media (max-width:768px){

    .ra-portfolio-hero{

        padding:70px 0;

    }

    .ra-hero-title{

        font-size:34px;

    }

    .ra-hero-description{

        font-size:16px;
        line-height:1.8;

    }

    .ra-highlight-grid{

        grid-template-columns:1fr;

    }

    .ra-highlight-card{

        padding:28px;

    }

    .ra-btn-primary,
    .ra-btn-secondary{

        width:100%;
        text-align:center;

    }

    .ra-hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .ra-desktop-frame{

        max-width:100%;

    }

    .ra-tablet-frame{

        width:160px;
        height:225px;

        right:0;
        bottom:30px;

    }

    .ra-mobile-frame{

        width:90px;
        height:190px;

        left:0;

    }

    .ra-glass-card{

        width:145px;
        padding:16px;

    }

    .ra-glass-card h3{

        font-size:18px;

    }

    .ra-glass-card p{

        font-size:13px;

    }

}

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

@media (max-width:576px){

    .ra-portfolio-hero{

        padding:60px 0;

    }

    .ra-hero-container{

        width:94%;

    }

    .ra-hero-badge{

        font-size:13px;
        padding:10px 18px;

    }

    .ra-hero-title{

        font-size:28px;

        line-height:1.25;

    }

    .ra-hero-description{

        font-size:15px;

    }

    .ra-highlight-card h2{

        font-size:36px;

    }

    .ra-highlight-card p{

        font-size:15px;

    }

    .ra-browser-sidebar{

        display:none;

    }

    .ra-content-row{

        grid-template-columns:1fr;

    }

    .ra-content-box{

        height:100px;

    }

    .ra-browser-body{

        display:block;

    }

    .ra-browser-content{

        padding:18px;

    }

    .ra-tablet-frame{

        display:none;

    }

    .ra-mobile-frame{

        display:none;

    }

    .ra-glass-card{

        display:none;

    }

    .ra-floating-icon{

        min-width:72px;
        height:40px;

        font-size:12px;
        padding:0 14px;

    }

    .ra-icon-html{

        top:-10px;
        right:20px;

    }

    .ra-icon-css{

        top:120px;
        left:0;

    }

    .ra-icon-js{

        top:240px;
        right:0;

    }

    .ra-icon-wordpress{

        bottom:120px;
        left:0;

    }

    .ra-icon-seo{

        bottom:30px;
        right:10px;

    }

    .ra-icon-ui{

        top:60px;
        left:60px;

    }

}

/*=========================================
  EXTRA SMALL DEVICES
=========================================*/

@media (max-width:400px){

    .ra-hero-title{

        font-size:24px;

    }

    .ra-btn-primary,
    .ra-btn-secondary{

        padding:16px 20px;

        font-size:15px;

    }

    .ra-highlight-card{

        padding:22px;

    }

    .ra-highlight-card h2{

        font-size:32px;

    }

}



.ra-hidden{
    opacity:0;
    transform:translateY(60px);
    transition:all .8s ease;
}

.ra-visible{
    opacity:1;
    transform:translateY(0);
}

.ra-icon-glow{
    box-shadow:0 0 30px rgba(0,102,255,.45);
}

.ra-btn-primary,
.ra-btn-secondary{
    position:relative;
    overflow:hidden;
}

.ra-ripple{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    transform:scale(0);
    animation:raRipple .7s linear;
    pointer-events:none;
}

@keyframes raRipple{
    to{
        transform:scale(4);
        opacity:0;
    }
}