/*======================================================
SECTION 5 : LOOK INSIDE THE GUIDE
======================================================*/


.guide-preview-section{

    background:var(--white);

    padding:100px 0;

}



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

.guide-preview-container{

    max-width:1100px;

    margin:0 auto;

    text-align:center;

}



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

.guide-preview-header{

    max-width:760px;

    margin:0 auto 35px;

}


.guide-preview-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:999px;

    background:#EEF3F8;

    color:var(--secondary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:24px;

}


.guide-preview-header h2{

    font-size:48px;

    line-height:1.15;

    color:var(--dark);

    margin-bottom:22px;

}


.guide-preview-header h2 span{

    color:var(--secondary);

}


.guide-preview-header p{

    font-size:18px;

    line-height:1.7;

    color:var(--text);

}



/*======================================================
DOODLE ARROW
(Placed between description and video)
======================================================*/


.guide-arrow{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    margin:30px auto 25px;

}


.guide-arrow img{

    display:block;

    width:75px;

    height:auto;

}



/*======================================================
VIDEO WRAPPER
======================================================*/


.guide-video-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

}



/*======================================================
A4 VIDEO FRAME
======================================================*/

/*======================================================
TABLET STYLE VIDEO FRAME
======================================================*/


.guide-video-card{

    width:100%;

    max-width:430px;

    background:#1C2430;

    border-radius:32px;

    padding:14px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);

    position:relative;

}



/* TOP CAMERA / SPEAKER DETAIL */

.guide-video-card::before{

    content:"";

    position:absolute;

    top:8px;

    left:50%;

    transform:translateX(-50%);

    width:55px;

    height:5px;

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

    border-radius:20px;

    z-index:2;

}



/* SCREEN */

.guide-video{

    display:block;

    width:100%;

    aspect-ratio:1 / 1.414;

    object-fit:cover;

    border-radius:20px;

    overflow:hidden;

}



/* OPTIONAL HOME BUTTON */

.guide-video-card::after{

    content:"";

    position:absolute;

    bottom:8px;

    left:50%;

    transform:translateX(-50%);

    width:14px;

    height:14px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.35);

}



/*======================================================
VIDEO
A4 PORTRAIT FORMAT
======================================================*/


.guide-video{

    display:block;

    width:100%;

    height:auto;

    aspect-ratio:1 / 1.414;

    object-fit:cover;

    border-radius:var(--radius);

}



/*======================================================
FOOT NOTE
======================================================*/


.guide-preview-note{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:30px;

    font-size:15px;

    color:var(--text);

}


.guide-preview-note i{

    color:var(--secondary);

}



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

@media(max-width:991px){


    .guide-preview-section{

        padding:80px 0;

    }


    .guide-preview-header h2{

        font-size:40px;

    }


    .guide-video-card{

        max-width:380px;

    }


}



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

@media(max-width:600px){


    .guide-preview-section{

        padding:70px 0;

    }


    .guide-preview-header h2{

        font-size:32px;

    }


    .guide-preview-header p{

        font-size:16px;

    }


    .guide-arrow{

        margin:25px auto 20px;

    }


    .guide-arrow img{

        width:60px;

    }


    .guide-video-card{

        max-width:300px;

        padding:10px;

        border-radius:var(--radius);

    }


    .guide-preview-note{

        font-size:14px;

        text-align:left;

        align-items:flex-start;

    }

}