/* =========================================================
   SERVICES.CSS
   WHAT I DO
   VIDEO PORTFOLIO
   PRODUCT PORTFOLIO
   SERVICE PACKAGES
   ========================================================= */


/* =========================================================
   GLOBAL SECTION SETTINGS
   ========================================================= */

.services,
.portfolio,
.visuals,
.packages{
    width:100%;
    box-sizing:border-box;
    background:#0B0B0F;
    color:#fff;
}

.services .container,
.portfolio .container,
.visuals .container,
.packages .container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 30px;
    box-sizing:border-box;
}


/* =========================================================
   SHARED SECTION TITLE
   ========================================================= */

.services .section-title,
.portfolio .section-title,
.visuals .section-title,
.packages .section-title{
    width:100%;
    max-width:820px;
    margin:0 auto 70px;
    text-align:center;
}

.services .section-title > span,
.portfolio .section-title > span,
.visuals .section-title > span,
.packages .section-title > span{
    display:inline-block;

    padding:9px 20px;
    margin-bottom:18px;

    color:#ED4C84;
    background:rgba(237,76,132,.10);

    border:1px solid rgba(237,76,132,.35);
    border-radius:999px;

    font-size:11px;
    font-weight:700;

    letter-spacing:1.5px;
    text-transform:uppercase;
}

.services .section-title h2,
.portfolio .section-title h2,
.visuals .section-title h2,
.packages .section-title h2{
    margin:0 0 18px;

    color:#fff;

    font-size:52px;
    font-weight:800;

    line-height:1.1;
    letter-spacing:-1.5px;
}

.services .section-title p,
.portfolio .section-title p,
.visuals .section-title p,
.packages .section-title p{
    max-width:700px;
    margin:0 auto;

    color:#B8BCC7;

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


/* =========================================================
   01. WHAT I DO / SERVICES
   ========================================================= */

.services{
    padding:120px 0;
}


/* ---------------------------------------------------------
   SERVICES GRID
   --------------------------------------------------------- */

.services-grid{
    width:100%;

    display:grid;

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

    gap:28px;

    align-items:stretch;
}


/* ---------------------------------------------------------
   SERVICE CARD
   --------------------------------------------------------- */

.service-card{
    position:relative;

    display:flex;
    flex-direction:column;

    width:100%;
    min-width:0;
    min-height:300px;

    padding:38px 32px;

    box-sizing:border-box;

    background:
        linear-gradient(
            180deg,
            #17171C 0%,
            #121216 100%
        );

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

    overflow:hidden;

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


/* Top Pink Line */

.service-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:#ED4C84;

    opacity:.8;
}


/* Glow */

.service-card::after{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    top:-100px;
    right:-80px;

    background:rgba(237,76,132,.08);

    border-radius:50%;

    filter:blur(50px);

    pointer-events:none;
}


/* Hover */

.service-card:hover{
    transform:translateY(-8px);

    border-color:rgba(237,76,132,.55);

    background:
        linear-gradient(
            180deg,
            #1A1A20 0%,
            #141419 100%
        );

    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        0 0 30px rgba(237,76,132,.10);
}


/* ---------------------------------------------------------
   SERVICE ICON
   --------------------------------------------------------- */

.service-icon{
    position:relative;
    z-index:1;

    display:flex;

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

    width:64px;
    height:64px;

    margin-bottom:24px;

    background:rgba(237,76,132,.10);

    border:1px solid rgba(237,76,132,.25);

    border-radius:16px;

    font-size:30px;

    transition:
        transform .3s ease,
        background .3s ease;
}

.service-card:hover .service-icon{
    transform:translateY(-3px) scale(1.05);

    background:rgba(237,76,132,.16);
}


/* ---------------------------------------------------------
   SERVICE TITLE
   --------------------------------------------------------- */

.service-card h3{
    position:relative;
    z-index:1;

    margin:0 0 13px;

    color:#fff;

    font-size:22px;
    font-weight:700;

    line-height:1.3;
}


/* ---------------------------------------------------------
   SERVICE DESCRIPTION
   --------------------------------------------------------- */

.service-card p{
    position:relative;
    z-index:1;

    margin:0;

    color:#B8BCC7;

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   02. VIDEO PORTFOLIO
   ========================================================= */

.portfolio{
    padding:120px 0;
}


/* ---------------------------------------------------------
   PORTFOLIO GRID
   --------------------------------------------------------- */

.portfolio-grid{
    width:100%;

    display:grid;

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

    gap:24px;
}


/* ---------------------------------------------------------
   VIDEO CARD
   --------------------------------------------------------- */

.portfolio-grid .portfolio-card{
    position:relative;

    width:100%;

    aspect-ratio:9 / 16;

    background:#15151A;

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

    border-radius:20px;

    overflow:hidden;

    box-sizing:border-box;

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


/* ---------------------------------------------------------
   VIDEO
   --------------------------------------------------------- */

.portfolio-grid .portfolio-card video{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    background:#0B0B0F;
}


/* ---------------------------------------------------------
   VIDEO CARD HOVER
   --------------------------------------------------------- */

.portfolio-grid .portfolio-card:hover{
    transform:translateY(-7px);

    border-color:rgba(237,76,132,.50);

    box-shadow:
        0 20px 40px rgba(0,0,0,.35),
        0 0 25px rgba(237,76,132,.08);
}


/* =========================================================
   03. PRODUCT PORTFOLIO
   ========================================================= */

.visuals{
    padding:120px 0;
}


/* ---------------------------------------------------------
   PORTFOLIO GROUP
   --------------------------------------------------------- */

.portfolio-group{
    width:100%;
}


/* ---------------------------------------------------------
   GROUP HEADER
   --------------------------------------------------------- */

.group-header{
    margin-bottom:35px;
}

.group-header h3{
    margin:0 0 10px;

    color:#fff;

    font-size:28px;
    font-weight:800;

    line-height:1.3;
}

.group-header p{
    max-width:700px;

    margin:0;

    color:#B8BCC7;

    font-size:15px;

    line-height:1.7;
}


/* ---------------------------------------------------------
   PACKAGING GRID
   --------------------------------------------------------- */

.packaging-grid{
    width:100%;

    display:grid;

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

    gap:24px;
}


/* ---------------------------------------------------------
   MARKETPLACE VISUAL GRID
   --------------------------------------------------------- */

.visual-grid{
    width:100%;

    display:grid;

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

    gap:24px;
}


/* ---------------------------------------------------------
   PRODUCT PORTFOLIO CARD
   --------------------------------------------------------- */

.packaging-grid .portfolio-card,
.visual-grid .portfolio-card{
    position:relative;

    width:100%;

    background:#15151A;

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

    border-radius:20px;

    overflow:hidden;

    box-sizing:border-box;

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


/* ---------------------------------------------------------
   PRODUCT IMAGE
   --------------------------------------------------------- */

.packaging-grid .portfolio-card img,
.visual-grid .portfolio-card img{
    display:block;

    width:100%;
    height:auto;

    aspect-ratio:1 / 1;

    object-fit:cover;

    transition:
        transform .5s ease;
}


/* ---------------------------------------------------------
   PRODUCT HOVER
   --------------------------------------------------------- */

.packaging-grid .portfolio-card:hover,
.visual-grid .portfolio-card:hover{
    transform:translateY(-7px);

    border-color:rgba(237,76,132,.50);

    box-shadow:
        0 20px 40px rgba(0,0,0,.35),
        0 0 28px rgba(237,76,132,.08);
}

.packaging-grid .portfolio-card:hover img,
.visual-grid .portfolio-card:hover img{
    transform:scale(1.04);
}


/* ---------------------------------------------------------
   PRODUCT OVERLAY
   --------------------------------------------------------- */

.portfolio-overlay{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:20px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.80),
            rgba(0,0,0,0)
        );

    pointer-events:none;
}

.portfolio-overlay span{
    color:#fff;

    font-size:15px;
    font-weight:700;

    letter-spacing:.3px;
}


/* ---------------------------------------------------------
   SECTION DIVIDER
   --------------------------------------------------------- */

.section-divider{
    width:100%;

    height:1px;

    margin:80px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(237,76,132,.35),
            transparent
        );
}


/* =========================================================
   04. SERVICE PACKAGES
   ========================================================= */

.packages{
    padding:120px 0;
}


/* ---------------------------------------------------------
   PACKAGES GRID
   --------------------------------------------------------- */

.packages-grid{
    width:100%;

    display:grid;

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

    gap:28px;

    align-items:stretch;
}


/* ---------------------------------------------------------
   PACKAGE CARD
   --------------------------------------------------------- */

.package-card{
    position:relative;

    display:flex;
    flex-direction:column;

    width:100%;
    min-width:0;
    min-height:520px;

    padding:42px 34px 34px;

    box-sizing:border-box;

    background:
        linear-gradient(
            180deg,
            #17171C 0%,
            #121216 100%
        );

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

    border-radius:24px;

    overflow:hidden;

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


/* Top Accent */

.package-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:#ED4C84;

    opacity:.8;
}


/* Glow */

.package-card::after{
    content:"";

    position:absolute;

    top:-120px;
    right:-100px;

    width:220px;
    height:220px;

    background:rgba(237,76,132,.08);

    border-radius:50%;

    filter:blur(60px);

    pointer-events:none;
}


/* ---------------------------------------------------------
   PACKAGE HOVER
   --------------------------------------------------------- */

.package-card:hover{
    transform:translateY(-8px);

    border-color:rgba(237,76,132,.55);

    background:
        linear-gradient(
            180deg,
            #1A1A20 0%,
            #141419 100%
        );

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        0 0 35px rgba(237,76,132,.10);
}


/* ---------------------------------------------------------
   PACKAGE TITLE
   --------------------------------------------------------- */

.package-card h3{
    position:relative;
    z-index:1;

    margin:0 0 10px;

    color:#fff;

    font-size:24px;
    font-weight:800;

    line-height:1.3;

    letter-spacing:.3px;
}

.package-label{
    position:relative;
    z-index:1;

    margin:0;

    color:#B8BCC7;

    font-size:14px;

    line-height:1.6;
}


/* ---------------------------------------------------------
   PACKAGE PRICE
   --------------------------------------------------------- */

.package-price{
    position:relative;
    z-index:1;

    margin-top:30px;

    color:#fff;

    font-size:58px;
    font-weight:800;

    line-height:1;

    letter-spacing:-2px;
}

.package-price span{
    color:#ED4C84;

    font-size:28px;

    vertical-align:top;

    margin-right:3px;
}

.package-note{
    position:relative;
    z-index:1;

    margin-top:10px;

    color:#7F8490;

    font-size:13px;
}


/* ---------------------------------------------------------
   PACKAGE FEATURES
   --------------------------------------------------------- */

.package-card ul{
    position:relative;
    z-index:1;

    flex:1;

    list-style:none;

    margin:30px 0 28px;
    padding:0;
}

.package-card li{
    display:flex;

    align-items:center;

    min-height:44px;

    color:#CBD5E1;

    font-size:15px;

    line-height:1.5;

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

.package-card li:last-child{
    border-bottom:0;
}


/* ---------------------------------------------------------
   PACKAGE BUTTON
   --------------------------------------------------------- */

.package-btn{
    position:relative;
    z-index:1;

    display:block;

    width:100%;

    padding:15px 20px;

    box-sizing:border-box;

    text-align:center;

    text-decoration:none;

    color:#fff;

    background:#1E1E23;

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

    border-radius:12px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.3px;

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

.package-btn:hover{
    color:#fff;

    background:#ED4C84;

    border-color:#ED4C84;

    box-shadow:
        0 8px 25px rgba(237,76,132,.25);

    transform:translateY(-2px);
}


/* =========================================================
   MOST POPULAR PACKAGE
   ========================================================= */

.package-card.popular{
    z-index:2;

    border:2px solid #ED4C84;

    background:
        linear-gradient(
            180deg,
            rgba(237,76,132,.15) 0%,
            #17171C 35%,
            #121216 100%
        );

    box-shadow:
        0 15px 45px rgba(237,76,132,.12),
        0 0 35px rgba(237,76,132,.06);

    transform:translateY(-10px);
}

.package-card.popular:hover{
    transform:translateY(-18px);

    border-color:#ED4C84;

    box-shadow:
        0 25px 55px rgba(0,0,0,.40),
        0 0 45px rgba(237,76,132,.16);
}


/* ---------------------------------------------------------
   POPULAR BADGE
   --------------------------------------------------------- */

.popular-badge{
    position:absolute;

    top:18px;
    right:20px;

    padding:7px 13px;

    color:#fff;

    background:#ED4C84;

    border-radius:999px;

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

    box-shadow:
        0 6px 18px rgba(237,76,132,.20);
}


/* ---------------------------------------------------------
   POPULAR BUTTON
   --------------------------------------------------------- */

.package-card.popular .package-btn{
    background:#ED4C84;

    border-color:#ED4C84;

    box-shadow:
        0 8px 25px rgba(237,76,132,.18);
}

.package-card.popular .package-btn:hover{
    background:#F15A8E;

    border-color:#F15A8E;

    box-shadow:
        0 10px 30px rgba(237,76,132,.30);
}


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

@media (max-width:992px){

    /* GLOBAL */

    .services,
    .portfolio,
    .visuals,
    .packages{
        padding:100px 0;
    }

    .services .container,
    .portfolio .container,
    .visuals .container,
    .packages .container{
        padding:0 25px;
    }


    /* SECTION TITLES */

    .services .section-title h2,
    .portfolio .section-title h2,
    .visuals .section-title h2,
    .packages .section-title h2{
        font-size:42px;
    }


    /* SERVICES */

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

        gap:24px;
    }


    /* VIDEO PORTFOLIO */

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

        gap:22px;
    }


    /* PRODUCT PORTFOLIO */

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

        gap:22px;
    }

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

        gap:22px;
    }


    /* PACKAGES */

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

        gap:24px;
    }

    .package-card{
        min-height:500px;
    }

    .package-card.popular{
        transform:none;
    }

    .package-card.popular:hover{
        transform:translateY(-8px);
    }

}


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

@media (max-width:768px){

    /* GLOBAL */

    .services,
    .portfolio,
    .visuals,
    .packages{
        padding:80px 0;
    }

    .services .container,
    .portfolio .container,
    .visuals .container,
    .packages .container{
        padding:0 20px;
    }


    /* SECTION TITLE */

    .services .section-title,
    .portfolio .section-title,
    .visuals .section-title,
    .packages .section-title{
        margin-bottom:50px;
    }

    .services .section-title h2,
    .portfolio .section-title h2,
    .visuals .section-title h2,
    .packages .section-title h2{
        font-size:34px;
    }

    .services .section-title p,
    .portfolio .section-title p,
    .visuals .section-title p,
    .packages .section-title p{
        font-size:15px;

        line-height:1.7;
    }


    /* SERVICES */

    .services-grid{
        grid-template-columns:1fr;

        gap:20px;
    }

    .service-card{
        min-height:auto;

        padding:34px 30px;

        border-radius:20px;
    }


    /* VIDEO PORTFOLIO */

    .portfolio-grid{
        grid-template-columns:1fr;

        gap:20px;
    }

    .portfolio-grid .portfolio-card{
        max-width:500px;

        margin:0 auto;
    }


    /* PRODUCT PORTFOLIO */

    .packaging-grid{
        grid-template-columns:1fr;

        gap:20px;
    }

    .visual-grid{
        grid-template-columns:1fr;

        gap:20px;
    }

    .packaging-grid .portfolio-card,
    .visual-grid .portfolio-card{
        max-width:600px;

        margin:0 auto;
    }


    /* GROUP HEADER */

    .group-header{
        margin-bottom:28px;
    }

    .group-header h3{
        font-size:24px;
    }

    .group-header p{
        font-size:14px;
    }


    /* DIVIDER */

    .section-divider{
        margin:60px 0;
    }


    /* PACKAGES */

    .packages-grid{
        grid-template-columns:1fr;

        gap:22px;
    }

    .package-card{
        min-height:auto;

        padding:36px 30px 30px;

        border-radius:20px;
    }

    .package-card.popular{
        order:-1;

        transform:none;
    }

    .package-card.popular:hover{
        transform:translateY(-8px);
    }

    .package-price{
        font-size:54px;
    }

}


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

@media (max-width:480px){

    /* GLOBAL */

    .services,
    .portfolio,
    .visuals,
    .packages{
        padding:70px 0;
    }

    .services .container,
    .portfolio .container,
    .visuals .container,
    .packages .container{
        padding:0 16px;
    }


    /* SECTION TITLE */

    .services .section-title,
    .portfolio .section-title,
    .visuals .section-title,
    .packages .section-title{
        margin-bottom:40px;
    }

    .services .section-title > span,
    .portfolio .section-title > span,
    .visuals .section-title > span,
    .packages .section-title > span{
        padding:8px 15px;

        font-size:9px;

        letter-spacing:1.2px;
    }

    .services .section-title h2,
    .portfolio .section-title h2,
    .visuals .section-title h2,
    .packages .section-title h2{
        font-size:28px;

        letter-spacing:-1px;
    }

    .services .section-title p,
    .portfolio .section-title p,
    .visuals .section-title p,
    .packages .section-title p{
        font-size:14px;
    }


    /* SERVICES */

    .service-card{
        padding:30px 24px;

        border-radius:18px;
    }

    .service-icon{
        width:58px;
        height:58px;

        margin-bottom:20px;

        font-size:27px;
    }

    .service-card h3{
        font-size:20px;
    }

    .service-card p{
        font-size:14px;
    }


    /* VIDEO */

    .portfolio-grid .portfolio-card{
        border-radius:18px;
    }


    /* PRODUCT */

    .packaging-grid .portfolio-card,
    .visual-grid .portfolio-card{
        border-radius:18px;
    }

    .portfolio-overlay{
        padding:16px;
    }

    .portfolio-overlay span{
        font-size:14px;
    }


    /* GROUP */

    .group-header h3{
        font-size:22px;
    }

    .group-header p{
        font-size:14px;
    }


    /* DIVIDER */

    .section-divider{
        margin:50px 0;
    }


    /* PACKAGES */

    .package-card{
        padding:32px 24px 26px;

        border-radius:18px;
    }

    .package-card h3{
        font-size:21px;
    }

    .package-label{
        font-size:13px;
    }

    .package-price{
        font-size:50px;
    }

    .package-price span{
        font-size:24px;
    }

    .package-card li{
        min-height:42px;

        font-size:14px;
    }

    .package-btn{
        padding:14px 18px;

        font-size:13px;
    }

    .popular-badge{
        top:14px;
        right:14px;

        padding:6px 10px;

        font-size:8px;
    }

}