/*=========================================
PRELOADER
=========================================*/

#preloader{

    position:fixed;

    inset:0;

    background:#050505;

    z-index:999999;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}

.loader-content{

    position:relative;

    z-index:20;

    text-align:center;

}

.doctor-photo{

     position:relative;

    overflow:hidden;

    isolation:isolate;

    width:140px;

    height:140px;

    margin:auto;

    border-radius:50%;

    padding:6px;

    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );

    animation:photoGlow 2s infinite alternate;

      animation:

        floating 3s ease-in-out infinite,

        photoGlow 2s alternate infinite;

}

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}

.doctor-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #fff;

     position:relative;

    z-index:5;

}

.glow-ring{

    position:absolute;

    inset:-12px;

    border:3px solid rgba(255,255,255,.25);

    border-top-color:var(--secondary-color);

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

    border-radius:50%;

    animation:ringRotate 3s linear infinite;

}

.scan-line{

    position:absolute;

    left:0;

    top:-20%;

    width:100%;

    height:35px;

    background:linear-gradient(

        to bottom,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    z-index:6;

    animation:scanner 2.2s linear infinite;

}

@keyframes ringRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes scanner{

    0%{

        top:-25%;

    }

    100%{

        top:120%;

    }

}

.clinic-name{

    margin-top:28px;

    color:#fff;

    font-size:42px;

    font-family:var(--primary-font);

    letter-spacing:.5px;

    overflow:hidden;

    white-space:nowrap;

    border-right:3px solid #fff;

    width:0;

    animation:
        typing 2.4s steps(30,end) forwards,
        blink .8s infinite;

}

.doctor-name{

    margin-top:18px;

    color:#ffffffcc;

    font-size:20px;

    opacity:0;

    animation:fadeUp .8s ease forwards;

    animation-delay:2.4s;

}

.loading-bar{

    width:320px;

    height:8px;

    margin:35px auto 15px;

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

    border-radius:50px;

    overflow:hidden;

}

.loading-bar span{

    display:block;

    width:0;

    height:100%;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        var(--primary-color),
        var(--secondary-color)
    );

    animation:loading 4.5s linear forwards;

}

.loading-text{

    color:#fff;

    font-size:15px;

    letter-spacing:2px;

    opacity:.85;

    animation:pulseText 1.2s infinite;

}

/*=========================================
DOORS
=========================================*/

/*=========================================
3D Door Animation
=========================================*/

#preloader{

    perspective:2000px;

}

.door{

    position:absolute;

    top:0;

    width:50%;

    height:100%;

    background:linear-gradient(
        135deg,
        #111,
        #050505
    );

    z-index:30;

    transition:1.5s cubic-bezier(.77,0,.18,1);

    backface-visibility:hidden;

    transform-style:preserve-3d;

}

.left-door{

    left:0;

    transform-origin:left center;

    border-right:1px solid rgba(255,255,255,.08);

}

.right-door{

    right:0;

    transform-origin:right center;

    border-left:1px solid rgba(255,255,255,.08);

}
/*=========================================
Loading Info
=========================================*/

.loading-info{

    width:320px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

}

.loading-text{

    color:#ffffff;

    font-size:15px;

    letter-spacing:1px;

    font-weight:500;

}

.loading-percent{

    color:var(--secondary-color);

    font-weight:700;

    font-size:16px;

    min-width:45px;

    text-align:right;

}

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

@keyframes photoGlow{

    from{

        transform:scale(1);

        box-shadow:0 0 10px rgba(255,255,255,.2);

    }

    to{

        transform:scale(1.05);

        box-shadow:
        0 0 40px rgba(240,79,78,.55);

    }

}

@keyframes typing{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes blink{

    50%{

        border-color:transparent;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes loading{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes pulseText{

    50%{

        opacity:.4;

    }

}

@media(max-width:768px){

    .doctor-photo{

        width:110px;

        height:110px;

    }

    .clinic-name{

        font-size:28px;

    }

    .doctor-name{

        font-size:17px;

    }

    .loading-bar{

        width:260px;

    }

}
body{

    overflow:hidden;

}