/*=========================================================
    CCT PAGLINGAP FOUNDATION
    VMC SECTION
    Version 4 - Professional Edition
==========================================================*/

/*=========================================================
    ROOT VARIABLES
==========================================================*/

:root{

    --vmc-primary:#1595D3;
    --vmc-primary-dark:#0B84D8;
    --vmc-green:#8CB63E;

    --vmc-text:#404040;
    --vmc-title:#0B84D8;

    --vmc-card-bg:rgba(255,255,255,.92);

    --vmc-border:rgba(225,230,236,.90);

    --vmc-shadow:
        0 12px 35px rgba(0,0,0,.10);

    --vmc-shadow-hover:
        0 20px 50px rgba(0,0,0,.16);

    --vmc-radius:18px;

    --vmc-transition:.35s ease;

}


/*=========================================================
    VMC SECTION
==========================================================*/

.vmc-section{

    position:relative;

    overflow:hidden;

    padding:110px 0;

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

    background-repeat:no-repeat;

    background-position:left center;

    background-size:cover;

}


/*=========================================================
    WHITE FADE OVERLAY
==========================================================*/

.vmc-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(

        90deg,

        rgba(255,255,255,.03) 0%,

        rgba(255,255,255,.15) 30%,

        rgba(255,255,255,.72) 62%,

        rgba(255,255,255,.96) 100%

    );

}


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

.vmc-overlay{

    position:relative;

    z-index:5;

}


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

.vmc-section .container{

    max-width:1500px;

}

.vmc-section .container-fluid{

    max-width:1500px;

}


/*=========================================================
    RIGHT SIDE POSITION
==========================================================*/
.vmc-overlay .row{

    justify-content:flex-end;

    align-items:flex-start;

    row-gap:18px;

    column-gap:18px;

}

/*
|--------------------------------------------------------------------------
| Move the cards slightly LEFT
|--------------------------------------------------------------------------
|
| This allows the "Aming Pangarap"
| text in the background to become
| more visible.
|
*/
@media(min-width:1400px){

.vmc-overlay .col-xl-8{

    transform:translateX(-20px);

    max-width:760px;

}

}
/*=========================================================
    GLOBAL TRANSITIONS
==========================================================*/

.vmc-section *{

    transition:var(--vmc-transition);

}
/*=========================================================
    LEFT IMAGE
==========================================================*/

.vmc-image{

    display:flex;

    align-items:center;

    justify-content:center;

    height:100%;

    text-align:center;

}

.vmc-image img{

    width:100%;

    max-width:650px;

    height:auto;

    object-fit:contain;

    transition:.45s ease;

    filter:drop-shadow(0 18px 30px rgba(0,0,0,.18));

}

.vmc-image img:hover{

    transform:scale(1.03);

}


/*=========================================================
    RIGHT COLUMN
==========================================================*/

.vmc-section .row.row-cols-1{

    align-items:stretch;

}


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

.vmc-item{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    width:100%;

    height:100%;

        min-height:255px;

   padding:22px;

    overflow:hidden;

    
    border-radius:16px;

    background:var(--vmc-card-bg);

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

    backdrop-filter:blur(8px);

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

    box-shadow:var(--vmc-shadow);

    transition:all .35s ease;

}


/*=========================================================
    GLASS HIGHLIGHT
==========================================================*/

.vmc-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(

        90deg,

        var(--vmc-primary),

        var(--vmc-green)

    );

}


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

.vmc-item:hover{

    transform:translateY(-8px);

    box-shadow:var(--vmc-shadow-hover);

    border-color:rgba(21,149,211,.25);

}


/*=========================================================
    HOVER SHINE EFFECT
==========================================================*/

.vmc-item::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:55%;

    height:260%;

    background:

        linear-gradient(

            rgba(255,255,255,0),

            rgba(255,255,255,.35),

            rgba(255,255,255,0)

        );

    transform:rotate(25deg);

    transition:.8s;

    pointer-events:none;

}

.vmc-item:hover::after{

    left:140%;

}


/*=========================================================
    EQUAL HEIGHT
==========================================================*/

.vmc-item.h-100{

    height:100%;

}

.row>[class*="col"]{

    display:flex;

}

.row>[class*="col"]>.vmc-item{

    width:100%;

}


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

.vmc-overlay .row{

    row-gap:30px;

}

.vmc-overlay .col{

    margin-bottom:0;

}
/*=========================================================
    CARD TITLE
==========================================================*/

.vmc-item h3{

    position:relative;

    display:inline-block;

    margin:0 0 22px;

    padding-bottom:14px;

    color:var(--vmc-title);

       font-size:22px;
        margin-bottom:14px;

    padding-bottom:10px;

    font-weight:700;

    line-height:1.2;

    letter-spacing:.3px;

}


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

.vmc-item h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:65px;

    height:4px;

    border-radius:50px;

    background:linear-gradient(

        90deg,

        var(--vmc-primary),

        var(--vmc-green)

    );

}


/*=========================================================
    PARAGRAPH
==========================================================*/
.vmc-item p{

    font-size:14px;

    line-height:1.65;

}

.vmc-item li{

    font-size:14px;

    line-height:1.6;

}


/*=========================================================
    SPACING BETWEEN PARAGRAPHS
==========================================================*/

.vmc-item p+p{

    margin-top:14px;

}


/*=========================================================
    LIST
==========================================================*/

.vmc-item ul{

    margin:0;

    padding-left:22px;

}


/*=========================================================
    LIST ITEMS
==========================================================*/

.vmc-item li{

    margin-bottom:10px;

    color:var(--vmc-text);

    font-size:15px;

    line-height:1.8;

}


.vmc-item li:last-child{

    margin-bottom:0;

}


/*=========================================================
    LIST BULLET
==========================================================*/

.vmc-item li::marker{

    color:var(--vmc-primary);

}


/*=========================================================
    HIGHLIGHT TEXT
==========================================================*/

.vmc-item strong{

    color:var(--vmc-primary-dark);

    font-weight:700;

}


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

.vmc-number{

    display:block;

    margin:10px 0 18px;

     font-size:58px;
    line-height:1;

    font-weight:800;

    color:var(--vmc-primary);

    letter-spacing:2px;

}


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

.vmc-number + p{

    font-size:16px;

    font-weight:500;

}


/*=========================================================
    CARD CONTENT ALIGNMENT
==========================================================*/

.vmc-item>*{

    position:relative;

    z-index:2;

}


/*=========================================================
    LAST ELEMENT PUSH
==========================================================*/

.vmc-item .mt-auto{

    margin-top:auto;

}


/*=========================================================
    READABILITY
==========================================================*/

.vmc-item{

    word-break:normal;

    overflow-wrap:break-word;

}
/*=========================================================
    PART 4
    PREMIUM EFFECTS & POLISH
==========================================================*/


/*=========================================================
    CARD BORDER GLOW
==========================================================*/

.vmc-item:hover{

    border-color:rgba(21,149,211,.35);

}


/*=========================================================
    TOP GRADIENT BAR ANIMATION
==========================================================*/

.vmc-item::before{

    background-size:200% 100%;

    animation:vmcGradient 8s linear infinite;

}


@keyframes vmcGradient{

    0%{

        background-position:0% 50%;

    }

    100%{

        background-position:100% 50%;

    }

}


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

.vmc-item:hover{

    transform:translateY(-10px);

    box-shadow:

        0 10px 22px rgba(0,0,0,.08);

}


/*=========================================================
    CARD SHADOW TRANSITION
==========================================================*/

.vmc-item{

    will-change:transform;

}


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

.vmc-item:hover h3{

    color:var(--vmc-primary-dark);

}


/*=========================================================
    TITLE UNDERLINE ANIMATION
==========================================================*/

.vmc-item h3::after{

    transition:.35s ease;

}


.vmc-item:hover h3::after{

    width:95px;

}


/*=========================================================
    NUMBER EFFECT
==========================================================*/

.vmc-number{

    transition:.35s ease;

}


.vmc-item:hover .vmc-number{

    transform:scale(1.05);

}


/*=========================================================
    LIST HOVER
==========================================================*/

.vmc-item li{

    transition:.25s ease;

}


.vmc-item li:hover{

    color:var(--vmc-primary);

    transform:translateX(4px);

}


/*=========================================================
    PARAGRAPH
==========================================================*/

.vmc-item p{

    transition:.25s ease;

}


.vmc-item:hover p{

    color:#333;

}


/*=========================================================
    IMAGE EFFECT
==========================================================*/

.vmc-image{

    position:relative;

}


.vmc-image::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:

        radial-gradient(

            rgba(21,149,211,.12),

            transparent 70%

        );

    border-radius:50%;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    z-index:-1;

}


.vmc-image img{

    position:relative;

    z-index:2;

}


/*=========================================================
    CARD CONTENT SPACING
==========================================================*/

.vmc-item>*{

    margin-bottom:14px;

}


.vmc-item>*:last-child{

    margin-bottom:0;

}


/*=========================================================
    GLASS LIGHT
==========================================================*/

.vmc-item{

    overflow:hidden;

}


.vmc-item span.glass-light{

    display:none;

}


/*=========================================================
    FOCUS EFFECT
==========================================================*/

.vmc-item:focus-within{

    border-color:var(--vmc-primary);

}


/*=========================================================
    PREMIUM LOOK
==========================================================*/

.vmc-item{

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.96),

            rgba(255,255,255,.90)

        );

}


/*=========================================================
    SOFT CORNER HIGHLIGHT
==========================================================*/

.vmc-item::selection{

    background:rgba(21,149,211,.15);

}


/*=========================================================
    IMAGE SMOOTH
==========================================================*/

.vmc-image img{

    image-rendering:auto;

}

/*=========================================================
    PART 4
    PREMIUM EFFECTS & ANIMATIONS
==========================================================*/


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

.vmc-item:hover{

    transform:translateY(-10px);

    box-shadow:

        0 25px 55px rgba(0,0,0,.16);

}


/*=========================================================
    ANIMATED TOP BORDER
==========================================================*/

.vmc-item::before{

    background-size:200% 100%;

    animation:vmcBorderMove 8s linear infinite;

}

@keyframes vmcBorderMove{

    from{

        background-position:0%;

    }

    to{

        background-position:200%;

    }

}


/*=========================================================
    SHINE EFFECT
==========================================================*/

.vmc-item::after{

    content:"";

    position:absolute;

    top:-140%;

    left:-70%;

    width:60%;

    height:300%;

    background:

        linear-gradient(

            rgba(255,255,255,0),

            rgba(255,255,255,.45),

            rgba(255,255,255,0)

        );

    transform:rotate(25deg);

    transition:.9s;

    pointer-events:none;

}

.vmc-item:hover::after{

    left:150%;

}


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

.vmc-item h3{

    transition:.30s ease;

}

.vmc-item:hover h3{

    color:var(--vmc-primary-dark);

}


/*=========================================================
    UNDERLINE ANIMATION
==========================================================*/

.vmc-item h3::after{

    transition:.35s ease;

}

.vmc-item:hover h3::after{

    width:95px;

}


/*=========================================================
    NUMBER ANIMATION
==========================================================*/

.vmc-number{

    transition:.35s ease;

}

.vmc-item:hover .vmc-number{

    transform:scale(1.08);

}


/*=========================================================
    LIST ANIMATION
==========================================================*/

.vmc-item li{

    transition:.25s ease;

}

.vmc-item:hover li{

    color:#333;

}

.vmc-item li:hover{

    color:var(--vmc-primary);

    padding-left:4px;

}


/*=========================================================
    PARAGRAPH ANIMATION
==========================================================*/

.vmc-item p{

    transition:.30s ease;

}

.vmc-item:hover p{

    color:#2f2f2f;

}


/*=========================================================
    IMAGE GLOW
==========================================================*/

.vmc-image{

    position:relative;

}

.vmc-image::before{

    content:"";

    position:absolute;

    width:460px;

    height:460px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(

            rgba(21,149,211,.15),

            transparent 70%

        );

    z-index:0;

}

.vmc-image img{

    position:relative;

    z-index:2;

}


/*=========================================================
    SMOOTH CONTENT SPACING
==========================================================*/

.vmc-item>*{

    margin-bottom:15px;

}

.vmc-item>*:last-child{

    margin-bottom:0;

}


/*=========================================================
    BETTER TEXT SELECTION
==========================================================*/

.vmc-item::selection{

    background:rgba(21,149,211,.18);

}


/*=========================================================
    PERFORMANCE
==========================================================*/

.vmc-item,

.vmc-image img,

.vmc-number,

.vmc-item h3{

    will-change:transform;

}
/*=========================================================
    PART 5
    RESPONSIVE OPTIMIZATION
==========================================================*/


/*=========================================================
    LARGE DESKTOP (1600px+)
==========================================================*/

@media (min-width:1600px){

    .vmc-section{

        padding:130px 0;

    }

    .vmc-section .container{

        max-width:880px;

    }

    .vmc-overlay .col-xl-8{

        transform:translateX(90px);

    }

    .vmc-item{

        min-height:350px;

        padding:34px;

    }

    .vmc-item h3{

        font-size:32px;

    }

    .vmc-number{

        font-size:82px;

    }

}


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

@media (max-width:1400px){

    .vmc-section{

        padding:100px 0;

    }

    .vmc-overlay .col-xl-8{

        transform:translateX(-90px);

    }

    .vmc-item{

        min-height:320px;

    }

}


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

@media (max-width:1200px){

    .vmc-section{

        padding:85px 0;

    }

    .vmc-overlay .col-xl-8{

        transform:none;

        padding-left:15px;

    }

    .vmc-item{

        min-height:290px;

        padding:26px;

    }

    .vmc-item h3{

        font-size:26px;

    }

    .vmc-number{

        font-size:64px;

    }

}


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

@media (max-width:991px){

    .vmc-section{

        padding:75px 0;

        background-position:left top;

    }

    .vmc-overlay .row{

        justify-content:center;

    }

    .vmc-overlay .col-xl-8{

        transform:none;

        padding-left:12px;

    }

    .vmc-image{

        margin-bottom:45px;

    }

    .vmc-image img{

        max-width:600px;

    }

    .vmc-item{

        min-height:auto;

    }

}


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

@media (max-width:767px){

    .vmc-section{

        padding:60px 0;

        background-position:center top;

        background-size:cover;

    }

    .vmc-item{

        padding:22px;

        border-radius:16px;

    }

    .vmc-item h3{

        font-size:22px;

    }

    .vmc-item p,

    .vmc-item li{

        font-size:15px;

        line-height:1.75;

    }

    .vmc-number{

        font-size:50px;

    }

}


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

@media (max-width:575px){

    .vmc-section{

        padding:45px 15px;

    }

    .vmc-image img{

        max-width:100%;

    }

    .vmc-item{

        padding:20px;

        border-radius:15px;

    }

    .vmc-item h3{

        font-size:20px;

    }

    .vmc-item p,

    .vmc-item li{

        font-size:14px;

    }

    .vmc-number{

        font-size:42px;

    }

}


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

@media (max-width:400px){

    .vmc-item{

        padding:18px;

    }

    .vmc-item h3{

        font-size:18px;

    }

    .vmc-item p,

    .vmc-item li{

        font-size:13px;

    }

    .vmc-number{

        font-size:36px;

    }

}
/*=========================================================
    PART 6
    FINAL PROFESSIONAL POLISH
==========================================================*/


/*=========================================================
    FADE-IN ANIMATION
==========================================================*/

@keyframes vmcFadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.vmc-item{

    animation:vmcFadeUp .7s ease both;

}

.vmc-overlay .row>.col:nth-child(1) .vmc-item{

    animation-delay:.10s;

}

.vmc-overlay .row>.col:nth-child(2) .vmc-item{

    animation-delay:.20s;

}

.vmc-overlay .row>.col:nth-child(3) .vmc-item{

    animation-delay:.30s;

}

.vmc-overlay .row>.col:nth-child(4) .vmc-item{

    animation-delay:.40s;

}

.vmc-overlay .row>.col:nth-child(5) .vmc-item{

    animation-delay:.50s;

}

.vmc-overlay .row>.col:nth-child(6) .vmc-item{

    animation-delay:.60s;

}


/*=========================================================
    IMAGE ENTRANCE
==========================================================*/

.vmc-image{

    animation:vmcFadeUp .9s ease;

}


/*=========================================================
    PREMIUM GLASS
==========================================================*/

.vmc-item{

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.97),

            rgba(255,255,255,.90)

        );

}


/*=========================================================
    BORDER SHINE
==========================================================*/

.vmc-item{

    border:

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

}


/*=========================================================
    SMOOTH TEXT
==========================================================*/

.vmc-item,

.vmc-item h3,

.vmc-item p,

.vmc-item li{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/*=========================================================
    BETTER LINK STYLE
==========================================================*/

.vmc-item a{

    color:var(--vmc-primary);

    text-decoration:none;

    transition:.30s;

}

.vmc-item a:hover{

    color:var(--vmc-primary-dark);

    text-decoration:underline;

}


/*=========================================================
    IMAGE QUALITY
==========================================================*/

.vmc-image img{

    display:block;

    margin:auto;

    image-rendering:auto;

}


/*=========================================================
    BETTER SPACING
==========================================================*/

.vmc-item>*{

    margin-bottom:15px;

}

.vmc-item>*:last-child{

    margin-bottom:0;

}


/*=========================================================
    ACCESSIBILITY
==========================================================*/

.vmc-item:focus-within{

    outline:3px solid rgba(21,149,211,.18);

    outline-offset:3px;

}


/*=========================================================
    REDUCE MOTION SUPPORT
==========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*=========================================================
    FINAL PERFORMANCE
==========================================================*/

.vmc-item,

.vmc-item::before,

.vmc-item::after,

.vmc-image img{

    backface-visibility:hidden;

    transform-style:preserve-3d;

}


/*=========================================================
    PRINT MODE
==========================================================*/

@media print{

    .vmc-section{

        background:#fff !important;

        padding:30px 0;

    }

    .vmc-section::before{

        display:none;

    }

    .vmc-item{

        background:#fff;

        box-shadow:none;

        border:1px solid #ddd;

        animation:none;

        transform:none;

    }

}


/*=========================================================
    END OF FILE
==========================================================*/