/* ==========================================
   Placeholder Variables
========================================== */

:root{

    /* Background Card */
    --placeholder-bg-margin:35px;
    --placeholder-bg-padding:70px 25px 30px;
    --placeholder-bg-radius:22px;

    /* White Card */
    --placeholder-width:92%;
    --placeholder-max-width:1100px;
    --placeholder-height:440px;
    --placeholder-padding:40px 35px;
    --placeholder-radius:20px;
    --placeholder-top:-45px;

    /* Heading */
    --placeholder-title-size:2.4rem;
    --placeholder-title-margin:40px;

    /* Icon Area */
    --placeholder-icon-area-height:180px;
    --placeholder-icon-padding-top:70px;

    /* Magnifier */
    --placeholder-magnifier-size:160px;
    --placeholder-magnifier-top:80px;
    --placeholder-magnifier-left:8px;

    /* Icons */
    --placeholder-icon-size:120px;

}


/* ==========================================
   Background Card
========================================== */

.cf-Back-card{

    position:relative;

    margin:var(--placeholder-bg-margin) auto;

    padding:var(--placeholder-bg-padding);

    background:linear-gradient(
        135deg,
        #eef8fb 0%,
        #f7fbfd 100%
    );

    border-radius:var(--placeholder-bg-radius);

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    overflow:visible;

}


/* ==========================================
   White Card
========================================== */

.cf-placeholder-card{

    position:relative;

    width:var(--placeholder-width);

    max-width:var(--placeholder-max-width);

    min-height:var(--placeholder-height);

    margin:var(--placeholder-top) auto 0;

    padding:var(--placeholder-padding);

    background:#fff;

    border-radius:var(--placeholder-radius);

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}




/* ==========================================
   Icon Row
========================================== */

.icon-row{

    position:relative;

    display:flex;

    justify-content:space-evenly;

    align-items:center;

    min-height:var(--placeholder-icon-area-height);

    padding-top:var(--placeholder-icon-padding-top);

}

/* ==========================================
   Magnifier
========================================== */

.magnifier{

    position:absolute;

    top:var(--placeholder-magnifier-top);

    left:var(--placeholder-magnifier-left);

    width:var(--placeholder-magnifier-size);

    z-index:10;

    pointer-events:none;

    filter:drop-shadow(0 5px 15px rgba(0,0,0,.25));

    transition:
        left 1s ease-in-out,
        transform .5s ease;

}

/* ==========================================
   Icons
========================================== */

.icon-item{

     width:var(--placeholder-icon-size);

    height:auto;

}

/* ==========================================
   Premium Search Header
========================================== */

.search-header{

    position:relative;

    display:block;

    width:100%;

    margin:0 auto 40px;

    text-align:center;

    font-size:var(--placeholder-title-size);

    font-weight:800;

    letter-spacing:.8px;

    line-height:1.2;

}

.search-header span{

    position:relative;

    display:inline-block;

    padding:0 8px;

    background:linear-gradient(
        135deg,
        #0F4C75 0%,
        #008080 50%,
        #1AA6B7 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 2px 8px rgba(0,0,0,.08);

}

/* Premium Underline */

.search-header span::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    transform:translateX(-50%);

    width:70%;

    height:4px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        transparent,
        #1AA6B7,
        #008080,
        transparent
    );

}

/* ==========================================
   Desktop (1200px+)
========================================== */

@media (min-width:1200px){

    .icon-row{

        justify-content:center;

        gap:80px;

        min-height:200px;

    }

}




/* ==========================================
   Responsive (1199.98px and Below)
========================================== */

@media (max-width:1199.98px){

    :root{

        /* Background Card */
        --placeholder-bg-margin:25px;
        --placeholder-bg-padding:55px 20px 25px;
        --placeholder-bg-radius:18px;

        /* White Card */
        --placeholder-width:96%;
        --placeholder-max-width:760px;
        --placeholder-height:340px;
        --placeholder-padding:28px 22px;
        --placeholder-radius:16px;
        --placeholder-top:-30px;

        /* Heading */
        --placeholder-title-size:2rem;
        --placeholder-title-margin:28px;

        /* Icon Area */
        --placeholder-icon-area-height:140px;
        --placeholder-icon-padding-top:50px;

        /* Magnifier */
        --placeholder-magnifier-size:120px;
        --placeholder-magnifier-top:52px;
        --placeholder-magnifier-left:5px;

        /* Icons */
        --placeholder-icon-size:90px;

    }

}

/* ==========================================
   Small Mobile (320px - 575.98px)
========================================== */

@media (max-width:575.98px){

    :root{

        /* Background */
        --placeholder-bg-margin:16px;
        --placeholder-bg-padding:40px 12px 18px;
        --placeholder-bg-radius:14px;

        /* White Card */
        --placeholder-width:100%;
        --placeholder-max-width:100%;
        --placeholder-height:240px;
        --placeholder-padding:18px 12px;
        --placeholder-radius:14px;
        --placeholder-top:-18px;

        /* Heading */
        --placeholder-title-size:1.35rem;
        --placeholder-title-margin:20px;

        /* Icon Area */
        --placeholder-icon-area-height:90px;
        --placeholder-icon-padding-top:25px;

        /* Magnifier */
        --placeholder-magnifier-size:70px;
        --placeholder-magnifier-top:32px;
        --placeholder-magnifier-left:0px;

        /* Icons */
        --placeholder-icon-size:56px;

    }

    .search-header{

        font-size:var(--placeholder-title-size);

        margin-bottom:var(--placeholder-title-margin);

        letter-spacing:.2px;

    }

    .icon-row{

        min-height:var(--placeholder-icon-area-height);

        padding-top:var(--placeholder-icon-padding-top);

    }

    .icon-item{

        width:var(--placeholder-icon-size);

    }

    .magnifier{

        width:var(--placeholder-magnifier-size);

        top:var(--placeholder-magnifier-top);

        left:var(--placeholder-magnifier-left);

    }

}