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

:root{

    --doctor-bg-margin:35px;
    --doctor-bg-padding:70px 25px 30px;
    --doctor-bg-radius:22px;

    --doctor-card-width:92%;
    --doctor-card-max-width:1100px;
    --doctor-card-height:440px;
    --doctor-card-padding:40px 35px;
    --doctor-card-radius:20px;
    --doctor-card-top:-45px;

    --doctor-title-size:2.35rem;

    --doctor-icon-size:120px;

    --doctor-magnifier-size:160px;
    --doctor-magnifier-top:80px;
    --doctor-magnifier-left:8px;

}


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

.cf-Doctor-Back-card{

    position:relative;

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

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

    background:linear-gradient(
        135deg,
        #eef8fb,
        #f8fcfd
    );

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

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

    overflow:visible;

}


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

.cf-placeholder-card{

    position:relative;

    width:var(--doctor-card-width);

    max-width:var(--doctor-card-max-width);

    min-height:var(--doctor-card-height);

    margin:var(--doctor-card-top) auto 0;

    padding:var(--doctor-card-padding);

    background:#fff;

    border-radius:var(--doctor-card-radius);

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

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}


/* ==========================================
   Title Area
========================================== */

.cf-placeholder-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    position:relative;

    z-index:2;

}


/* ==========================================
   Doctor Icon
========================================== */

.cf-placeholder-icon{

    width:180px;

    height:180px;

    object-fit:contain;

    animation:doctorBounce 2s ease-in-out infinite;

}


/* ==========================================
   Title
========================================== */

.cf-placeholder-text{

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

    font-weight:800;

    color:#6B7280;

    line-height:1.3;

    letter-spacing:.3px;

}


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

.cf-placeholder-magnifier{

    position:absolute;

    top:150px;

    left:50%;

    width:200px;

    z-index:10;

    pointer-events:none;

    filter:drop-shadow(0 6px 14px rgba(0,0,0,.22));

    animation:doctorScan 5s ease-in-out infinite;

}


/* ==========================================
   Animations
========================================== */

@keyframes doctorBounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

@keyframes doctorScan{

    0%{

        transform:translateX(-220px) rotate(-8deg);

    }

    50%{

        transform:translateX(120px) rotate(8deg);

    }

    100%{

        transform:translateX(-220px) rotate(-8deg);

    }

}


/* ==========================================
   Desktop 1400+
========================================== */

@media (min-width:1400px){

    .cf-placeholder-card{

        min-height:440px;

    }

}


/* ==========================================
   1200-1399
========================================== */

@media (min-width:1200px) and (max-width:1399.98px){

    .cf-placeholder-card{

        min-height:390px;

    }

}


/* ==========================================
   992-1199
========================================== */

@media (max-width:1199.98px){

    :root{

        --doctor-bg-margin:25px;
        --doctor-bg-padding:55px 20px 25px;

        --doctor-card-width:96%;
        --doctor-card-max-width:760px;
        --doctor-card-height:340px;
        --doctor-card-padding:28px 22px;
        --doctor-card-top:-30px;

        --doctor-title-size:1.9rem;

    }

    .cf-placeholder-icon{

        width:145px;
        height:145px;

    }

    .cf-placeholder-magnifier{

        width:150px;
        top:120px;

        animation:doctorScanTablet 5s ease-in-out infinite;

    }

}


@keyframes doctorScanTablet{

    0%{

        transform:translateX(-170px) rotate(-8deg);

    }

    50%{

        transform:translateX(95px) rotate(8deg);

    }

    100%{

        transform:translateX(-170px) rotate(-8deg);

    }

}

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

:root{

    /* Background */

    --doctor-bg-margin:35px;
    --doctor-bg-padding:70px 25px 30px;
    --doctor-bg-radius:22px;

    /* Card */

    --doctor-card-width:92%;
    --doctor-card-max-width:1100px;
    --doctor-card-height:440px;
    --doctor-card-padding:40px 35px;
    --doctor-card-radius:20px;
    --doctor-card-top:-45px;

    /* Text */

    --doctor-title-size:2.1rem;

    /* Icon */

    --doctor-icon-size:180px;

    /* Magnifier */

    --doctor-magnifier-size:200px;
    --doctor-magnifier-top:150px;

    /* Scan Distance */

    --doctor-scan-start:-220px;
    --doctor-scan-end:120px;

}


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

.cf-Doctor-Back-card{

    position:relative;

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

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

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

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

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

}


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

.cf-placeholder-card{

    position:relative;

    width:var(--doctor-card-width);

    max-width:var(--doctor-card-max-width);

    min-height:var(--doctor-card-height);

    margin:var(--doctor-card-top) auto 0;

    padding:var(--doctor-card-padding);

    background:#fff;

    border-radius:var(--doctor-card-radius);

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

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}


/* ==========================================
   Title
========================================== */

.cf-placeholder-title{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    position:relative;

    z-index:2;

}


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

.cf-placeholder-icon{

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

    height:var(--doctor-icon-size);

    object-fit:contain;

    animation:doctorBounce 2s ease-in-out infinite;

}


/* ==========================================
   Text
========================================== */

.cf-placeholder-text{

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

    font-weight:700;

    color:#6B7280;

    line-height:1.3;

}


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

.cf-placeholder-magnifier{

    position:absolute;

    left:50%;

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

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

    z-index:10;

    pointer-events:none;

    filter:drop-shadow(0 6px 14px rgba(0,0,0,.22));

    animation:doctorScan 5s ease-in-out infinite;

}


/* ==========================================
   Bounce
========================================== */

@keyframes doctorBounce{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

}


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

@keyframes doctorScan{

    0%{

        transform:translateX(var(--doctor-scan-start)) rotate(-8deg);

    }

    50%{

        transform:translateX(var(--doctor-scan-end)) rotate(8deg);

    }

    100%{

        transform:translateX(var(--doctor-scan-start)) rotate(-8deg);

    }

}


/* ==========================================
   1199px
========================================== */

@media (max-width:1199.98px){

    :root{

        --doctor-bg-margin:25px;
        --doctor-bg-padding:55px 20px 25px;

        --doctor-card-width:96%;
        --doctor-card-max-width:760px;
        --doctor-card-height:340px;
        --doctor-card-padding:28px 22px;
        --doctor-card-top:-30px;

        --doctor-title-size:1.75rem;

        --doctor-icon-size:145px;

        --doctor-magnifier-size:155px;
        --doctor-magnifier-top:120px;

        --doctor-scan-start:-175px;
        --doctor-scan-end:105px;

    }

}


/* ==========================================
   991px
========================================== */

@media (max-width:991.98px){

    :root{

        --doctor-card-height:280px;

        --doctor-title-size:1.5rem;

        --doctor-icon-size:120px;

        --doctor-magnifier-size:130px;

        --doctor-magnifier-top:95px;

        --doctor-scan-start:-145px;
        --doctor-scan-end:85px;

    }

    .cf-placeholder-title{

        gap:16px;

    }

}


/* ==========================================
   767px
========================================== */

@media (max-width:767.98px){

    :root{

        --doctor-card-height:220px;

        --doctor-title-size:1.2rem;

        --doctor-icon-size:95px;

        --doctor-magnifier-size:95px;

        --doctor-magnifier-top:80px;

        --doctor-scan-start:-105px;
        --doctor-scan-end:65px;

    }

    .cf-placeholder-title{

        gap:12px;

    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width:575.98px){

    :root{

        --doctor-bg-margin:16px;
        --doctor-bg-padding:40px 12px 18px;

        --doctor-card-width:100%;
        --doctor-card-max-width:100%;
        --doctor-card-height:180px;
        --doctor-card-padding:18px 12px;
        --doctor-card-top:-18px;

        --doctor-title-size:1rem;

        --doctor-icon-size:75px;

        --doctor-magnifier-size:70px;

        --doctor-magnifier-top:62px;

        --doctor-scan-start:-80px;
        --doctor-scan-end:50px;

    }

    .cf-placeholder-title{

        gap:10px;

    }

}