/* CSS Swicher */
.swich-box {
    top: 50%;
    left: 0;
    transform: translate(-75%, -50%);
    z-index: 999999;
    background: #ededed;
    position: fixed;
    border-radius: 0 5px 5px 0;
    transition: .3s ease-in-out;
}

.swich-box:hover{
    transform: translate(0%, -50%);
}
.swich-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 10px;
}

.swich-text span{margin: 0 15px;}
.swich-box i {
    margin-left: 16px;
    font-size: 20px;
    color: #333;
    cursor: pointer;
}

.switcher {
    width: 48px;
    height: 24px;
    background-color: #EBEBEB;
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.07);
    border-radius: 12px;
    cursor: pointer;
}

.switcher label {
    width: 24px;
    height: 24px;
    background-color: #FFC107;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.3s, background-color 0.2s;
}

.switcher input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.switcher input:checked+label {
    background-color: #313336;
    animation: grow 0.3s;
    transform: translate(24px, 0);
}

.switcher input:not(:checked)+label {
    animation: grow-reverse 0.3s;
}

@keyframes grow {
    0% {
        width: 24px;
    }

    50% {
        width: 28.8px;
    }

    100% {
        width: 24px;
    }
}

@keyframes grow-reverse {
    0% {
        width: 24px;
    }

    50% {
        width: 28.8px;
    }

    100% {
        width: 24px;
    }
}


/* Light Theme */
.white-bg {
    background: #ffffff;
}

.gray-bg {
    background: #f6f6f6;
}


/* Dark Theme */
body.dark-bg {
    background: #1b1a1b;
}

section.dark-gray-bg {
    background: #313336;

}

.white-text {
    color: #f8f8f8 !important;
}

p.white-text-color {
    color: #f8f8f8;
}

/* Index Page */
.hero-gretting.white-text-color {
    color: #f8f8f8;
}

.hero-name.white-text-color {
    color: #f8f8f8 !important;
}

.hero-name.dark-mode::after {
    background: #323337;
}

.hero-title.white-text-color {
    color: #f8f8f8 !important;
}

.title-area h1.white-text-color {
    color: #f8f8f8;
}

.title-area h2.white-text-color {
    color: #f8f8f8;
}

.contact-me.white-text-color {
    color: #f8f8f8;
}

.contact-me span.white-text-color {
    color: #f8f8f8;
}

.single-service-box .front-side.dark-side {
    background: #1b1a1b;
    border: 1px solid #313336;
}

.service-line-black.white-text-color {
    color: #f8f8f8;
}

.service-line-black.white-line::after {
    background: #f8f8f8;
}

.title-border.white-line::after {
    background: #f8f8f8;
}

.scroll-down span.white-text-color {
    color: #f8f8f8;
}

.skill-div h5.white-text-color{
    color: #f8f8f8;
}

.skill-div h5.white-sm-box::after{
    background: #1616db;
}

.year-duration.white-text-color{
    color: #f8f8f8;
}

.skill-progressbar h5.white-text-color,
.line-progressbar.white-text-color {
    color: #f8f8f8 !important;
}

.price-details.white-text-color {
    background: #1b1a1b !important;
    color: #f8f8f8 !important;
}

.contact-form-box.dark-gray-bg {
    background: #323337;
}

.contact-form-box input.dark-bg,
.contact-form-box textarea.dark-bg {
    background: #1a1a1a;
    color: #f8f8f8;
}

.contact-form-box input.dark-placeholder::placeholder,
.contact-form-box textarea.dark-placeholder::placeholder {
    color: #575757 !important;
}

.footer-header h4.white-text-color {
    color: #f8f8f8;
}

.footer-nav ul li a.white-text-color {
    color: #f8f8f8;
}

.footer-contact li.white-text-color {
    color: #f8f8f8;
}

/* Portfolio Page */
.portfolio-info-box.dark-gray-bg{
    background: #323337;
}
.portfolio-section-text h3.white-text-color{
    color: #f8f8f8;
}

.portfolio-title.white-line::after{
    background: #f8f8f8;
}

.feature-text h5.white-color-text{
    color: #f8f8f8;
    background: #323337;
}

.single-portfolio-service-box.dark-gray-bg{
    background: #1a1a1a;
}

.single-portfolio-service-box h4.white-color-text{
    color: #f8f8f8;
}
.single-portfolio-service-box h4.white-line::after{
    background: #f8f8f8;
}


/* Blog Page */
.blog-author-post-info span.white-color-text{
    color: #fdfdfd;
}
.blog-author-post-info hr.white-line{
    background: #fdfdfd;
}

.blog-details-title.white-color-text{
    color: #f8f8f8;
}

.quote-reviewer h3.white-color-text,
.reviewer-name-id.white-color-text{
    color: #f8f8f8;
}

.mini-blog-title h4.white-color-text{
    color: #f8f8f8;
}

.blog-tag-catagory-and-share-link span.white-color-text{
    color: #f8f8f8;
}

.post-like-title h2.white-color-text{
    color: #f8f8f8;
}

.post-date span.white-color-text{
    color: #f8f8f8;
}

.post-like-title h4 a.white-color-text{
    color: #f8f8f8;
}

.comment-author h5.white-text-color,
.comment-author span.white-text-color{
    color: #f8f8f8 !important;
}