/*
    Theme Name: Scroll Video Elementor Landing Page
    Author: Franklin/ChatGTP
    Description: A simple and clean WordPress theme
   */

:root {
    --sv-bg: #09111d;
    --sv-panel: #111c2b;
    --sv-panel-light: #182638;
    --sv-text: #ffffff;
    --sv-muted: #b8c1d1;
    --sv-pink: #ec2b86;
    --sv-pink-light: #ff5ca8;
    --sv-border: rgba(255,255,255,.12);
}


/* Main page background */

.scroll-video-page {
    background:
    radial-gradient(circle at top left,
    rgba(236,43,134,.18),
    transparent 35%),
    var(--sv-bg);

    color:var(--sv-text);
}


/* Typography */

.scroll-video-page h1,
.scroll-video-page h2,
.scroll-video-page h3 {
    color:white;
    font-weight:700;
    letter-spacing:-1px;
}


.scroll-video-page p {
    color:var(--sv-muted);
    line-height:1.7;
}


/* Logo circle */

.sv-logo {
    width:120px;
    height:120px;

    border-radius:50%;

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

    background:
    linear-gradient(
        145deg,
        var(--sv-pink),
        #b51667
    );

    box-shadow:
    0 15px 40px rgba(236,43,134,.35);
}


/* Hero columns */

.sv-hero {
    padding:80px 50px;
}


.sv-column {
    padding:35px;
}


/* Main video container */

.sv-video-container {

    min-height:520px;

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

    background:
    linear-gradient(
        145deg,
        #202c3d,
        #101923
    );

    border-radius:28px;

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

    box-shadow:
    0 30px 80px rgba(0,0,0,.45);

    overflow:hidden;
}


/* Elementor Scroll Video widget area */

.scroll-video-placeholder {

    width:100%;
    height:100%;

    min-height:520px;

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

    color:#8994a7;

    font-size:18px;

    letter-spacing:.5px;

}


/* Feature list */


.sv-feature {

    display:flex;

    gap:25px;

    margin-bottom:35px;

}


.sv-feature-icon {

    width:55px;
    height:55px;

    flex:none;

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

    color:var(--sv-pink);

    border:2px solid var(--sv-pink);

    border-radius:50%;

    font-size:22px;

}


.sv-feature h3 {

    margin:0 0 8px;

    font-size:22px;

}


.sv-feature p {

    margin:0;

}



/* Elementor UI mockup panel */

.sv-editor-panel {

    background:#1c2635;

    border-radius:18px;

    overflow:hidden;

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

    box-shadow:
    0 25px 70px rgba(0,0,0,.4);

}


.sv-editor-header {

    height:45px;

    background:#263446;

    display:flex;

    align-items:center;

    padding-left:20px;

}


.sv-editor-dot {

    width:12px;
    height:12px;

    border-radius:50%;

    background:#8793a5;

    margin-right:10px;

}



/* Settings cards */

.sv-setting {

    background:#263446;

    padding:15px;

    margin:15px;

    border-radius:12px;

}


.sv-setting label {

    display:block;

    color:#dce3ed;

    font-size:14px;

    margin-bottom:10px;

}



.sv-slider {

    height:5px;

    background:#526176;

    border-radius:10px;

}


.sv-slider span {

    display:block;

    height:100%;

    width:60%;

    background:var(--sv-pink);

    border-radius:10px;

}



/* Bottom feature bar */

.sv-feature-bar {

    display:grid;

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

    gap:20px;

    padding:35px;

    background:#101927;

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

}



.sv-feature-card {

    text-align:center;

    padding:20px;

}


.sv-feature-card svg {

    color:var(--sv-pink);

}



.sv-feature-card h4 {

    margin-top:15px;

    color:white;

}


.sv-feature-card p {

    font-size:14px;

}



/* CTA section */

.sv-cta {

    margin-top:40px;

    padding:45px;

    background:

    linear-gradient(
    145deg,
    #121e30,
    #0c1521
    );

    border-radius:25px;

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

}


.sv-cta h2 {

    color:var(--sv-pink);

}


/* Pink buttons */

.sv-button {

    display:inline-block;

    padding:14px 35px;

    border-radius:50px;

    background:var(--sv-pink);

    color:white!important;

    font-weight:600;

    transition:.3s;

}


.sv-button:hover {

    background:var(--sv-pink-light);

    transform:translateY(-3px);

}



/* Responsive */

@media(max-width:1024px){

    .sv-feature-bar {

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

    }


    .sv-hero {

        padding:40px 20px;

    }

}


@media(max-width:767px){

    .sv-feature-bar {

        grid-template-columns:1fr;

    }


    .sv-video-container,
    .scroll-video-placeholder {

        min-height:300px;

    }


    .sv-feature {

        gap:15px;

    }


    .sv-column {

        padding:15px;

    }

}