:root {
    --bg: #f1f1f1;
    --card-bg: #fff;
    --text-color: #111;
    --blue: blue;
    --opposite-theme-color: #fff;
    --footer-color: radial-gradient(rgb(83, 139, 236) 0%, rgb(16, 88, 214) 100%);
}

.dark-mode {
    --bg: #252525;
    --card-bg: #000000;
    --text-color: #fff;
    --blue: #2222ff;
    --opposite-theme-color: #000000;
    --footer-color: #000000;
    --socials-color: #fff;
}

body {
    background-color: var(--bg);
}

.search {
    position: relative;
    box-shadow: 0 0 40px rgba(51, 51, 51, .1);
}

.search input {
    height: 60px;
    text-indent: 25px;
    border: 2px solid #d6d4d4;
}

.search input:focus {
    box-shadow: none;
    border: 2px solid blue;
}

.search .fa-search {
    position: absolute;
    top: 20px;
    left: 16px;
}

.search button {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 50px;
    width: 110px;
    background: blue;
}

.service-section .single-service {
    background-color: var(--card-bg);
}

.content,
.content h3,
.section-title p,
.single-service p,
.single-service h3,
.hero-content p {
    color: var(--text-color);
}

.section-title h1,
.hero-content h1 {
    color: var(--blue);
}

#dark-btn {
    background-color: transparent;
    border: none;
    color: black;
}

.navbar-area {
    background-color: var(--opposite-theme-color);
}

.sticky .navbar .navbar-nav .nav-item a {
    color: var(--text-color);
}

.theme-icon {
    background-color: #fff;
    border-radius: 50%;
}

.footer {
    background: var(--footer-color);
}

.socials li a img {
    /* color: var(--opposite-theme-color); */
    background-color: var(--socials-color)
}