*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

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

    background:
    linear-gradient(
        135deg,
        #050505 0%,
        #18072f 45%,
        #000000 100%
    );

    color:white;

    min-height:100vh;

}



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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background-image:url("images/hero-desktop.png");

    background-size:cover;

    background-repeat:no-repeat;

    /* شخصیت سمت راست */
    background-position:75% center;

}



/* لایه تیره */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(5,5,10,.88) 0%,
        rgba(28,10,55,.72) 35%,
        rgba(0,0,0,.45) 70%,
        rgba(0,0,0,.15) 100%
    );

    z-index:1;

}



/* متن */

.hero .container{

    position:relative;

    z-index:2;

    width:1200px;

    max-width:90%;

    margin:auto;

}



.text{

    max-width:620px;

}



.about{

    display:inline-block;

    color:#B47CFF;

    letter-spacing:5px;

    font-size:15px;

    font-weight:600;

    margin-bottom:25px;

}



.text h1{

    color:white;

    font-size:86px;

    line-height:.95;

    margin-bottom:25px;

}



.text h2{

    color:#ddd;

    font-size:30px;

    line-height:1.5;

    font-weight:500;

    margin-bottom:30px;

}



.text p{

    color:#d2d2d2;

    font-size:18px;

    line-height:2;

    max-width:580px;

    margin-bottom:45px;

}



/* دکمه */

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    border:2px solid #8B5CF6;

    border-radius:12px;

    color:white;

    text-decoration:none;

    transition:.35s;

}



.button:hover{

    background:#8B5CF6;

    box-shadow:

    0 0 30px rgba(139,92,246,.45);

}



/* حذف عکس قدیمی */

.photo,

.photo-box{

    display:none;

}



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

@media (max-width:1024px){

.hero{

    background-position:80% center;

}

.text h1{

    font-size:68px;

}

}



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

@media (max-width:768px){

.hero{

    background-image:url("images/hero-mobile.png");

    background-position:center top;

    background-size:cover;

    text-align:center;

    align-items:flex-end;

    padding-bottom:70px;

}



.hero .container{

    display:flex;

    justify-content:center;

}



.text{

    max-width:100%;

}



.text h1{

    font-size:48px;

}



.text h2{

    font-size:22px;

}



.text p{

    font-size:16px;

    margin-left:auto;

    margin-right:auto;

}



.button{

    margin:auto;

}

}



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

@media (max-width:480px){

.text h1{

    font-size:40px;

}



.text h2{

    font-size:20px;

}



.text p{

    font-size:15px;

    line-height:1.8;

}

}


/* =====================
   PHOTO
===================== */


.photo{

    flex:1;

    display:flex;

    justify-content:center;

}



.photo-box{

    width:380px;

    height:500px;

    border-radius:35px;

    border:2px dashed rgba(255,255,255,.25);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#aaa;

    font-size:25px;

    letter-spacing:6px;

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

    backdrop-filter:blur(15px);

}



/* =====================
 AUDIO PORTFOLIO
===================== */


.portfolio{

    padding:100px 0;

    width:1200px;

    max-width:90%;

    margin:auto;

}



.portfolio-title{

    text-align:center;

    margin-bottom:60px;

}



.portfolio-title h2{

    font-size:42px;

    margin-bottom:15px;

}



.portfolio-title p{

    color:#aaa;

    font-size:18px;

}



.players{

    display:flex;

    flex-direction:column;

    gap:30px;

}



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


.audio-card{

    display:flex;

    gap:30px;

    padding:30px;

    border-radius:25px;

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

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

    backdrop-filter:blur(15px);

    transition:.4s;

}



.audio-card:hover{

    transform:translateY(-8px);

    border-color:#9b6cff;

    box-shadow:
    0 15px 40px rgba(139,92,246,.25);

}



.cover{

    width:120px;

    height:120px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #8b5cf6,
        #25004d
    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    font-weight:600;

}



.audio-info{

    flex:1;

}



.audio-info h3{

    font-size:25px;

    margin-bottom:8px;

}



.audio-info span{

    color:#b47cff;

}



.audio-info p{

    color:#aaa;

    margin-top:10px;

    margin-bottom:20px;

}



/* =====================
 AUDIO PLAYER
===================== */


.simple-player{

    width:100%;

    margin-top:25px;

}



.simple-player audio{

    width:100%;

    height:45px;

}



/* Chrome Audio Style */


audio::-webkit-media-controls-panel{

    background:
    linear-gradient(
        135deg,
        #241035,
        #3b176d
    );

}



audio::-webkit-media-controls-play-button{

    background-color:#a855f7;

    border-radius:50%;

}



audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display{

    color:white;

}



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


@media(max-width:950px){


.container{

    flex-direction:column-reverse;

    text-align:center;

    padding:80px 0;

}



.text h1{

    font-size:50px;

}



.text h2{

    font-size:22px;

}



.photo-box{

    width:280px;

    height:360px;

}



.audio-card{

    flex-direction:column;

    align-items:center;

    text-align:center;

}



.portfolio-title h2{

    font-size:32px;

}


}

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


.social-footer{

    margin-top:100px;

    padding:40px 0 60px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.social-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}



.social-icon{

    width:38px;

    height:38px;

    border-radius:50%;


    display:flex;

    justify-content:center;

    align-items:center;


    color:white;

    text-decoration:none;


    font-size:18px;


    background:

    rgba(255,255,255,.08);


    border:

    1px solid rgba(255,255,255,.15);


    transition:.3s ease;

}





.social-icon:hover{


    transform:

    translateY(-6px)
    scale(1.12);


    box-shadow:

    0 10px 25px rgba(139,92,246,.35);


}
/* ==========================
 BOOK PROJECT
========================== */


.book-project{

    text-align:center;

}



.book-cover{

    width:260px;

    height:360px;

    margin:0 auto 35px;


    border-radius:25px;


    background:

    linear-gradient(
        135deg,
        #8b5cf6,
        #16002e
    );


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:22px;

    font-weight:700;

    line-height:1.5;

    letter-spacing:2px;


    box-shadow:

    0 20px 50px rgba(139,92,246,.4);

}




.book-title{

    font-size:32px;

    margin-bottom:10px;

}



.book-author{

    color:#b47cff;

    margin-bottom:50px;

    font-size:18px;

}





.sample-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}





.sample-card{

    text-align:left;


    padding:25px;


    border-radius:20px;


    background:

    rgba(255,255,255,.06);


    border:

    1px solid rgba(255,255,255,.1);


    backdrop-filter:blur(15px);


}




.sample-card h3{

    font-size:22px;

    margin-bottom:8px;

}



.sample-card p{

    color:#aaa;

    margin-bottom:20px;

}





.sample-card audio{

    width:100%;

    height:45px;

}



.sample-card audio::-webkit-media-controls-panel{

    background:

    linear-gradient(
        135deg,
        #241035,
        #4c1d95
    );

}

.book-cover{

    width:260px;

    height:360px;

    margin:0 auto 35px;

    border-radius:25px;

    overflow:hidden;

    box-shadow:
    0 20px 50px rgba(139,92,246,.4);

}


.book-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ===================================
            NAVBAR
=================================== */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    padding:22px 0;

    backdrop-filter:blur(14px);

    background:rgba(8,8,12,.20);

    border-bottom:1px solid rgba(255,255,255,.08);

}



.nav-container{

    width:1200px;

    max-width:90%;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



/* LOGO */

.logo{

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    letter-spacing:2px;

    transition:.3s;

}



.logo:hover{

    color:#c084fc;

}



/* MENU */

.nav-menu{

    display:flex;

    align-items:center;

    gap:45px;

}



.nav-menu a{

    text-decoration:none;

    color:#dddddd;

    font-size:14px;

    font-weight:500;

    letter-spacing:2px;

    transition:.3s;

}



.nav-menu a:hover{

    color:#b47cff;

}



/* فاصله برای اینکه منو روی Hero نیفتد */

.hero{

    padding-top:110px;

}



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

@media(max-width:768px){

.nav-container{

    flex-direction:column;

    gap:20px;

}

.nav-menu{

    gap:25px;

}

.logo{

    font-size:16px;

}

}

/* =====================
   FOOTER CONTACT
===================== */

.social-footer{

    flex-direction:column;

}

.footer-contact{

    margin-top:35px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

}

.footer-contact a{

    display:flex;

    align-items:center;

    gap:10px;

    color:#d6d6d6;

    text-decoration:none;

    font-size:16px;

    transition:.3s ease;

}

.footer-contact a:hover{

    color:#b47cff;

}

.footer-contact i{

    color:#b47cff;

    font-size:17px;

}

/* ===================================
        AUDIOBOOK GRID
=================================== */

.portfolio-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.portfolio-card{

    text-decoration:none;

    color:white;

    transition:.35s;

}

.portfolio-card:hover{

    transform:translateY(-10px);

}

.portfolio-card .book-cover{

    width:100%;

    aspect-ratio:2/3;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 20px 45px rgba(139,92,246,.25);

}

.portfolio-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.portfolio-card:hover img{

    transform:scale(1.05);

}

.portfolio-card h3{

    margin-top:18px;

    font-size:18px;

    line-height:1.4;

}

.portfolio-card span{

    display:block;

    margin-top:8px;

    color:#B47CFF;

    font-size:15px;

}

.placeholder{

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(
        135deg,
        #2c1149,
        #12051d
    );

}

.placeholder i{

    font-size:42px;

    color:#ffffff55;

}

.more-button{

    display:inline-block;

    margin-top:60px;

    padding:16px 36px;

    border:2px solid #8B5CF6;

    border-radius:12px;

    text-decoration:none;

    color:white;

    transition:.3s;

}

.more-button:hover{

    background:#8B5CF6;

    box-shadow:0 0 25px rgba(139,92,246,.35);

}

@media(max-width:1100px){

.portfolio-grid{

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

}

}

@media(max-width:700px){@media(max-width:700px){

    .portfolio-grid{

        grid-template-columns:1fr;

        gap:45px;

        width:100%;

    }

    .portfolio-card{

        width:100%;

    }

    .portfolio-card .book-cover{

        width:100%;

        aspect-ratio:2 / 3;

        border-radius:18px;

    }

    .portfolio-card h3{

        font-size:20px;

        margin-top:18px;

    }

    .portfolio-card span{

        font-size:15px;

    }

}

.portfolio-grid{

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

}

}

/* ===================================
        PROJECT PAGE
=================================== */

.project-page{

padding:180px 0 100px;

}

.project-container{

width:1200px;

max-width:90%;

margin:auto;

display:flex;

align-items:center;

gap:70px;

}

.project-cover{

width:320px;

flex-shrink:0;

}

.project-cover img{

width:100%;

border-radius:25px;

box-shadow:0 20px 50px rgba(139,92,246,.35);

}

.project-info{

flex:1;

}

.project-info h1{

font-size:52px;

margin-bottom:15px;

}

.project-info h2{

color:#B47CFF;

font-size:24px;

margin-bottom:40px;

font-weight:500;

}

.role-box{

margin-bottom:40px;

padding:25px;

border-radius:20px;

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

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

}

.role-box h3{

margin-bottom:15px;

}

.role-box p{

line-height:2;

color:#d5d5d5;

}

.description h3{

margin-bottom:20px;

}

.description p{

line-height:2;

color:#cccccc;

font-size:17px;

max-width:700px;

}

.samples-section{

width:1200px;

max-width:90%;

margin:100px auto;

}

.samples-section h2{

text-align:center;

font-size:42px;

margin-bottom:60px;

}

/* ===================================
        PROJECT LAYOUT
=================================== */

.project-content{

    display:flex;

    gap:60px;

    margin-top:45px;

    margin-bottom:50px;

}

.left-column{

    width:220px;

    flex-shrink:0;

}

.right-column{

    flex:1;

}

.samples-box h3{

    margin-bottom:25px;

}

.project-player{

    margin-bottom:20px;

}

.project-player span{

    display:block;

    margin-bottom:8px;

    color:#B47CFF;

    font-size:15px;

}

.project-player audio{

    width:100%;

    max-width:420px;

    height:38px;

}



.description{

    margin-top:40px;

}

.description p{

    max-width:800px;

}

@media(max-width:900px){

.project-content{

    flex-direction:column;

    gap:35px;

}

.left-column{

    width:100%;

}

.project-player audio{

    max-width:100%;

}

}

/* ===================================
        PROJECT PAGE RESPONSIVE
=================================== */

@media (max-width: 992px){

    .project-container{

        flex-direction: column;

        align-items: center;

        text-align: center;

        gap:40px;

    }

    .project-cover{

        width:280px;

    }

    .project-info{

        width:100%;

    }

    .project-info h1{

        font-size:38px;

        line-height:1.2;

    }

    .project-info h2{

        font-size:20px;

        margin-bottom:30px;

    }

    .project-content{

        flex-direction:column;

        gap:30px;

        align-items:center;

    }

    .left-column{

        width:100%;

    }

    .right-column{

        width:100%;

    }

    .role-box{

        max-width:450px;

        margin:auto;

    }

    .samples-box{

        width:100%;

        max-width:600px;

        margin:auto;

        text-align:left;

    }

    .project-player audio{

        width:100%;

        max-width:100%;

    }

    .description{

        text-align:left;

        margin-top:40px;

    }

    .description p{

        max-width:100%;

    }

}

@media (max-width:576px){

    .project-page{

        padding:140px 0 60px;

    }

    .project-cover{

        width:220px;

    }

    .project-info h1{

        font-size:30px;

    }

    .project-info h2{

        font-size:18px;

    }

    .role-box{

        padding:20px;

    }

    .description p{

        font-size:15px;

        line-height:1.8;

    }

    .project-player span{

        font-size:14px;

    }

    .project-player audio{

        height:36px;

    }

}

/* =========================
        MUSIC PORTFOLIO
========================= */

.music-portfolio{

    padding:100px 0;

    width:1200px;

    max-width:90%;

    margin:auto;

}


/* =========================
        MUSIC GRID
========================= */

.music-grid{

    display:grid;

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

    gap:30px;

    justify-content:center;

    align-items:start;

    max-width:1100px;

    margin:0 auto;

}


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

.music-card{

    text-decoration:none;

    color:white;

    text-align:center;

    transition:.35s ease;

    min-width:0;

}


.music-card:hover{

    transform:translateY(-8px);

}


/* =========================
        SQUARE COVER
========================= */

.music-cover{

    width:100%;

    aspect-ratio:1 / 1;

    border-radius:20px;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        #8b5cf6,
        #16002e
    );

    box-shadow:

    0 20px 40px
    rgba(139,92,246,.25);

    border:

    1px solid
    rgba(255,255,255,.12);

    transition:.35s ease;

}


.music-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.music-card:hover .music-cover{

    box-shadow:

    0 25px 50px
    rgba(139,92,246,.40);

    border-color:#9b6cff;

}


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

.music-card h3{

    font-size:18px;

    font-weight:500;

    margin-top:20px;

    margin-bottom:7px;

    line-height:1.4;

}


.music-card span{

    color:#b47cff;

    font-size:14px;

}


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

@media(max-width:1000px){

    .music-grid{

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

        max-width:650px;

    }

}


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

@media(max-width:600px){

    .music-grid{

        grid-template-columns:1fr;

        max-width:350px;

        gap:45px;

    }

}

/* ===================================
        WORK DROPDOWN
=================================== */

.work-dropdown{

    position:relative;

}


/* WORK BUTTON */

.work-button{

    background:none;

    border:none;

    color:#dddddd;

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

    font-size:14px;

    font-weight:500;

    letter-spacing:2px;

    cursor:pointer;

    padding:0;

    transition:.3s;

}


.work-button:hover{

    color:#b47cff;

}




/* DROPDOWN */

.work-menu{

    position:absolute;

    top:35px;

    right:0;

    min-width:170px;

    padding:10px;

    border-radius:14px;

    background:

    rgba(15,10,25,.92);

    border:

    1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    box-shadow:

    0 15px 40px rgba(0,0,0,.4);

    opacity:0;

    visibility:hidden;

    transform:translateY(-10px);

    transition:

    opacity .3s ease,

    transform .3s ease,

    visibility .3s ease;

}


/* OPEN */

.work-dropdown:hover .work-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/* LINKS */

.work-menu a{

    display:block;

    padding:12px 15px;

    border-radius:9px;

    color:#ddd;

    text-decoration:none;

    font-size:13px;

    letter-spacing:1px;

    transition:.3s;

}


.work-menu a:hover{

    background:rgba(139,92,246,.18);

    color:#b47cff;

}

html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 100px;
}

/* ===================================
        SOUNDCLOUD
=================================== */

.soundcloud-box {

    margin-top: 30px;

    padding: 20px 25px;

    text-align: center;

    border-radius: 16px;

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

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

    backdrop-filter: blur(15px);

}


/* Listen to the Full Album */

.soundcloud-box h3 {

    margin-bottom: 18px;

    font-size: 18px;

    font-weight: 500;

}


/* SoundCloud Logo */

.soundcloud-button {

    width: 60px;

    height: 60px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

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

    color: white;

    text-decoration: none;

    font-size: 32px;

    transition: .3s ease;

}


/* Hover */

.soundcloud-button:hover {

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

    background: #8b5cf6;

    border-color: #8b5cf6;

    box-shadow:
        0 10px 25px rgba(139,92,246,.35);

}


/* SoundCloud text */

.soundcloud-label {

    display: block;

    margin-top: 8px;

    color: #aaa;

    font-size: 13px;

    letter-spacing: 1px;

}

/* ===================================
        MUSIC PLATFORMS
=================================== */

.music-platform-button {

    margin-top:20px;

}


.soundcloud-label {

    margin-bottom:10px;

}
/* ===================================
        MUSIC PLATFORMS
=================================== */

.music-platforms {

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:35px;

    margin-top:5px;

}


.music-platform {

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:80px;

}


.music-platform .soundcloud-button {

    margin:0;

}


.music-platform .soundcloud-label {

    display:block;

    margin-top:10px;

    margin-bottom:0;

    color:#aaa;

    font-size:12px;

    letter-spacing:.5px;

    white-space:nowrap;

}


/* Mobile */

@media(max-width:576px){

    .music-platforms {

        gap:18px;

    }


    .music-platform {

        min-width:70px;

    }


    .music-platform .soundcloud-button {

        width:52px;

        height:52px;

        font-size:27px;

    }


    .music-platform .soundcloud-label {

        font-size:10px;

    }

}

/* ===================================
        AUDIOBOOK PLATFORM LOGOS
=================================== */

.platform-logo {

    width:60px;

    height:60px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    overflow:hidden;

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

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

    text-decoration:none;

    transition:.3s ease;

}


.platform-logo img {

    width:100%;

    height:100%;

    object-fit:contain;

    padding:8px;

    display:block;

}


.platform-logo:hover {

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

    background:rgba(139,92,246,.18);

    border-color:#9b6cff;

    box-shadow:
        0 10px 25px rgba(139,92,246,.35);

}


.audiobook-platform-box .music-platforms {

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:35px;

}


.audiobook-platform-box .music-platform {

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:80px;

}


.audiobook-platform-box .soundcloud-label {

    display:block;

    margin-top:10px;

    color:#aaa;

    font-size:12px;

    letter-spacing:.5px;

    white-space:nowrap;

}


/* MOBILE */

@media(max-width:576px){

    .audiobook-platform-box .music-platforms {

        gap:15px;

    }

    .audiobook-platform-box .music-platform {

        min-width:65px;

    }

    .platform-logo {

        width:52px;

        height:52px;

    }

    .platform-logo img {

        padding:6px;

    }

    .audiobook-platform-box .soundcloud-label {

        font-size:10px;

    }

}

/* =========================================
        HOMEPAGE MOBILE FIX
========================================= */

@media (max-width: 768px) {

    /* ---------- NAVBAR ---------- */

    .navbar {
        padding: 14px 0;
    }

    .nav-container {
        width: 100%;
        max-width: none;
        padding: 0 20px;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
    }

    .logo {
        font-size: 13px;
        letter-spacing: 1px;
        white-space: nowrap;
    }

    .nav-menu {
        gap: 14px;
    }

    .nav-menu a,
    .work-button {
        font-size: 11px;
        letter-spacing: 1px;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: 100svh;
        height: auto;

        padding-top: 100px;
        padding-bottom: 55px;

        display: flex;
        align-items: flex-end;

        background-image: url("images/hero-mobile.png");
        background-size: cover;
        background-position: center top;
    }

    .hero .container {
        width: 100%;
        max-width: none;

        padding: 0 22px;

        margin: 0;

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

        text-align: center;
    }

    .text {
        width: 100%;
        max-width: 600px;
    }

    .about {
        font-size: 11px;
        letter-spacing: 3px;
        margin-bottom: 16px;
    }

    .text h1 {
        font-size: clamp(38px, 11vw, 52px);
        line-height: .95;
        margin-bottom: 18px;
    }

    .text h2 {
        font-size: clamp(17px, 5vw, 22px);
        line-height: 1.45;
        margin-bottom: 20px;
    }

    .text p {
        font-size: 14px;
        line-height: 1.8;

        max-width: 500px;

        margin-left: auto;
        margin-right: auto;
        margin-bottom: 28px;
    }

    .button {
        padding: 13px 25px;
        font-size: 13px;
        border-radius: 10px;
    }


    /* ---------- AUDIOBOOKS ---------- */

    .portfolio {
        width: 100%;
        max-width: none;

        padding: 75px 20px;
    }

    .portfolio-title {
        margin-bottom: 40px;
    }

    .portfolio-title h2 {
        font-size: 32px;
    }

    .portfolio-title p {
        font-size: 14px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 15px;

        margin-top: 40px;
    }

    .portfolio-card .book-cover {
        width: 100%;
        aspect-ratio: 2 / 3;
        border-radius: 14px;
    }

    .portfolio-card h3 {
        font-size: 14px;
        line-height: 1.35;

        margin-top: 12px;
    }

    .portfolio-card span {
        font-size: 11px;
        margin-top: 5px;
    }


    /* ---------- MUSIC ---------- */

    .music-portfolio {
        width: 100%;
        max-width: none;

        padding: 75px 20px;
    }

    .music-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        max-width: none;

        gap: 30px 15px;
    }

    .music-cover {
        border-radius: 14px;
    }

    .music-card h3 {
        font-size: 14px;
        margin-top: 12px;
    }

    .music-card span {
        font-size: 11px;
    }


    /* ---------- FOOTER ---------- */

    .social-footer {
        margin-top: 40px;
        padding: 35px 20px 50px;
    }

    .social-links {
        gap: 12px;
    }

    .social-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .footer-contact a {
        font-size: 13px;
    }

}


/* =========================================
        VERY SMALL PHONES
========================================= */

@media (max-width: 480px) {

    .nav-container {
        padding: 0 15px;
    }

    .logo {
        font-size: 11px;
    }

    .nav-menu {
        gap: 10px;
    }

    .nav-menu a,
    .work-button {
        font-size: 9px;
        letter-spacing: .5px;
    }


    .hero {
        padding-top: 90px;
        padding-bottom: 45px;

        background-position: center top;
    }

    .hero .container {
        padding: 0 18px;
    }

    .text h1 {
        font-size: 38px;
    }

    .text h2 {
        font-size: 17px;
    }

    .text p {
        font-size: 13px;
        line-height: 1.75;
    }


    .portfolio {
        padding-left: 15px;
        padding-right: 15px;
    }

    .music-portfolio {
        padding-left: 15px;
        padding-right: 15px;
    }

}

/* ===================================
   MOBILE AUDIOBOOKS - ONE PER ROW
=================================== */

@media (max-width: 700px) {

    .portfolio-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 45px !important;
        width: 100% !important;
    }

    .portfolio-card {
        width: 100% !important;
        display: block !important;
    }

    .portfolio-card .book-cover {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
        margin: 0 auto !important;
    }

    .portfolio-card .book-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

}

@media (max-width: 768px) {

    .work-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 20px;
        line-height: 20px;
        vertical-align: middle;
        margin: 0;
        padding: 0;
    }

    .nav-menu > a,
    .work-dropdown {
        display: flex;
        align-items: center;
        height: 20px;
    }

}