/*------------------------------------------------------------
    Template name    : Technoit - IT Solutions & Business Services Multipurpose Responsive Website Template
    Author           : ZRTHEMES
    Version          : 2.0
    File Description : Main css file of the template
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html{
        overflow-x: hidden;
    }
    body{
        overflow-x: hidden !important;
    }
:root {
    /* --font-default: 'Poppins', sans-serif;
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Poppins', sans-serif; */
    scroll-behavior: smooth;
    --color-bg: #025add;
    --hero-overlay-color: transparent;
    --menu-color: #ffffff;
    --theme-color: #025add;
    --border-color: #e2e2e2;
    --theme-color-dark: #f8f8f8;
    --text-color: #3a3a3a;
    --hero-text-color: #ffffff;
    --text-white-color: #ffffff;
    --text-grey-color: #3a3a3a;
    --text-theme-color: #025add;
    --light-color: #ffffff;
    --color-default: #3a3a3a;
    --color-primary: #2c346c;
    --color-secondary: #0c6de0;
    --color-start: #3a3a3a;
    --color-end: #3a3a3a;
    --hero-card-bg: rgb(228 227 223 / 17%);
    --box-shadow-color: rgb(82 90 101 / 10%);
}

:root.dark {
    --menu-color-bg: #565656;
    --color-bg: #000000;
    --hero-overlay-color: #000000;
    --menu-color: #ffffff;
    --theme-color: #000000;
    --border-color: #14929a;
    --theme-color-dark: #2c2c2c;
    --text-color: #ffffff;
    --hero-text-color: #ffffff;
    --text-white-color: #ffffff;
    --text-grey-color: #565656;
    --text-theme-color: #14929a;
    --light-color: #000000;
    --color-default: #000000;
    --color-primary: #000000;
    --color-secondary: #000000;
    --color-start: #000000;
    --color-end: #000000;
    --hero-card-bg: rgb(0 0 0 / 83%);
    --box-shadow-color: rgb(20 146 154 / 49%);
}

body {
   
    /* font-family: "Plus Jakarta Sans", sans-serif; */
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--text-color);
    /* background: var(--theme-color); */
    transition: 0.5s background ease;
}

body.dark {
    --menu-color-bg: #ffffff;
    --color-bg: #000000;
    --hero-overlay-color: #000000;
    --menu-color: #ffffff;
    --border-color: #025add;
    --theme-color-dark: #151515;
    --text-color: #ffffff;
    --text-white-color: #ffffff;
    --text-grey-color: #565656;
    --text-theme-color: #025add;
    --light-color: #000000;
    --color-default: #000000;
    --color-secondary: #0c6de0;
    --color-start: #000000;
    --color-end: #000000;
    --hero-card-bg: rgb(0 0 0 / 83%);
    --box-shadow-color: rgb(12 109 224 / 69%);
}

#darkmode-button {
    border-radius: 50%;
    border: none;
    outline: none;
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    margin-left: 10px;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* font-family: "Plus Jakarta Sans", sans-serif; */
    font-family: "Plus Jakarta Sans", sans-serif;
}
p{
    line-height: 27px;
    font-weight: 400;
}
.toggle-container {
    position: relative;
}

.theme-btn {
    width: 6em;
    height: 6em;
    padding: 0.5em;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    background-color: transparent;
}

.theme-btn img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.theme-btn.light {
    display: none;
}

.dark .theme-btn.dark {
    display: none;
}

.dark .theme-btn.light {
    display: block;
}

.hide-on-mobile {
    display: block;
}

/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/

section {
    padding: 60px 0;
    overflow: hidden;
}

.section {
    padding: 60px 0;
    overflow: hidden;
    background: var(--light-color);
}

.section-grey {
    padding: 90px 0;
    overflow: hidden;
    background: var(--theme-color-dark);
}

.sections-bg {
    background-color: var(--theme-color-dark);
}

.section-header {
    text-align: center;
    /* padding-bottom: 60px; */
}

.section-header h2 {
    font-size: 32px;
    position: relative;
    color: var(--color-primary);
}

.section-header p {
    margin-bottom: 0;
    color: #b8651d;
}

img {
    transition: 0.3s;
}

img:hover {
    transform: scale(1.1);
}

.fill-btn {
   font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 14px 40px;
    border-radius: 50px;
    border: 0;
    transition: 0.3s;
    color: var(--text-white-color);
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}

.fill-btn:hover {
    background: linear-gradient(45deg, var(--color-secondary), var(--color-primary));
    color: var(--text-white-color);
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/

.breadcrumbs .page-header {
    padding: 120px 0 60px 0;
    min-height: 20vh;
    background: url(../images/page-header-bg.png) center bottom;
    background-size: cover;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
}

.breadcrumbs .page-header:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(360deg, var(--light-color), var(--light-color));
    z-index: 0;
    opacity: 0.6;
}

.breadcrumbs .page-header h2 {
    color: var(--color-primary);
}

.breadcrumbs .page-header p {
    color: var(--menu-color);
}

.breadcrumbs nav {
    background-color: var(--theme-color);
    padding: 20px 0;
}

.breadcrumbs nav ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: var(--color-default);
}

.breadcrumbs nav ol a {
    color: var(--text-white-color);
    transition: 0.3s;
}

.breadcrumbs nav ol a:hover {
    text-decoration: underline;
}

.breadcrumbs nav ol li+li {
    padding-left: 10px;
}

.breadcrumbs nav ol li+li::before {
    display: inline-block;
    padding-right: 10px;
    color: var(--color-secondary);
    content: "/";
}

/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/

.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background: var(--color-primary);
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.scroll-top:hover {
    background: rgb(16 16 16 / 80%);
    color: #fff;
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/

#preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
    background: var(--color-primary);
    transition: all 0.6s ease-out;
}

#preloader:before {
    content: "";
    position: fixed;
    top: calc(48% - 3px);
    left: calc(48% - 3px);
    border: 2px solid #fff;
    border-color: var(--light-color) transparent var(--light-color) transparent;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: animate-preloader 1.5s linear infinite;
    animation: animate-preloader 1.5s linear infinite;
}

@-webkit-keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/

@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
    .hide-on-mobile {
        display: none !important;
    }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.topbar {
    background: #00796b;
    height: 40px;
    font-size: 14px;
    transition: all 0.5s;
    color: #fff;
    padding: 0;
}

.topbar .contact-info i {
    font-style: normal;
    color: #fff;
    line-height: 0;
}

.topbar .contact-info i a,
.topbar .contact-info i span {
    padding-left: 5px;
    color: #fff;
}

@media (max-width: 575px) {
    .topbar .contact-info i a,
    .topbar .contact-info i span {
        font-size: 13px;
    }
}

.topbar .contact-info i a {
    line-height: 0;
    transition: 0.3s;
}

.topbar .contact-info i a:hover {
    color: #fff;
    text-decoration: underline;
}

.topbar .social-links a {
    color: rgba(255, 255, 255, 0.7);
    line-height: 0;
    transition: 0.3s;
    margin-left: 20px;
}

.topbar .social-links a:hover {
    color: #fff;
}

.header {
    transition: all 0.5s;
    z-index: 997;
    height: 90px;
   
}

.header.sticked {
    position: fixed;
    top: px;
    right: 0;
    left: 0;
    height: 90px;
}

.header .logo img {
    max-height: 75px;
    margin-right: 6px;
}

.header.stikcy-menu {
    /* background: var(--light-color); */
    top: 0;
}

.header.stikcy-menu .logo h1 {
    color: var(--color-primary);
}

.header .logo h1 {
    font-size: 30px;
    margin: 0;
    letter-spacing: 0.8px;
    color: var(--color-primary);
    font-family: "Plus Jakarta Sans", sans-serif;
}

.header .logo h1 span {
    color: var(--color-primary);
}

.sticked-header-offset {
    margin-top: 0;
}

section {
    /*background: var(--light-color);*/
}
.radius-header {
    background: linear-gradient(to bottom, rgb(36 36 36 / 64%), rgb(250 250 250 / 22%));
    /* border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px; */
}
/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/

@media (min-width: 1280px) {
    .navbar {
        padding: 0;
        margin-right: 50px;
    }
    .navbar ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }
    .navbar li {
        position: relative;
    }
    .navbar>ul>li {
        white-space: nowrap;
        padding: 10px 0 10px 28px;
    }
    .navbar a, .navbar a:focus {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: white;
        white-space: nowrap;
        transition: 0.3s;
        position: relative;
        text-transform: uppercase;
    }
    .stikcy-menu .navbar a {
        color: #e9e9e9;
    }
    .navbar a i,
    .navbar a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
    }
    .navbar a:hover:before,
    .navbar li:hover>a:before,
    .navbar .active:before {
        visibility: visible;
        width: 100%;
    }
    .navbar a:hover,
    .navbar .active,
    .navbar .active:focus,
    .navbar li:hover>a {
        color: #dd5339;
    }
    .navbar .dropdown ul {
        display: block;
        position: absolute;
        left: 28px;
        top: calc(100% + 30px);
        margin: 0;
        padding: 10px 0;
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        background: var(--light-color);
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
        transition: 0.3s;
        border-radius: 0px;
    }
       .navbar .dropdown ul li:not(:last-child) {
        min-width: 200px;
        border-bottom: 1px solid #f15e3859;
    }
    .navbar .dropdown ul a {
        padding: 10px 20px;
        font-size: 15px;
        font-weight: 400;
        color: var(--text-color);
    }
    .navbar .dropdown ul a i {
        font-size: 12px;
    }
    .navbar .dropdown ul a:hover,
    .navbar .dropdown ul .active:hover,
    .navbar .dropdown ul li:hover>a {
        color: #ee5e3e;
    }
    .navbar .dropdown:hover>ul {
        
        opacity: 0.9;
        top: 100%;
        visibility: visible;
        border-bottom-left-radius: 20%;
        border-bottom-right-radius: 20%;
    }
    .slogan-single-box .img-holder .inner img {
        width: 100%;
        min-height: 350px;
        object-fit: cover;
    }
    }
    .navbar .dropdown .dropdown ul {
        top: 0;
        left: calc(100% - 30px);
        visibility: hidden;
    }
    .navbar .dropdown .dropdown:hover>ul {
        opacity: 1;
        top: 0;
        left: 100%;
        visibility: visible;
    }


@media (min-width: 1280px) and (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }
    .navbar .dropdown .dropdown:hover>ul {
        left: -100%;
    }
}

@media (min-width: 1280px) {
    .mobile-nav-show,
    .mobile-nav-hide {
        display: none;
    }
}

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/

@media (max-width: 1279px) {
    .navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 400px;
        bottom: 0;
        /*transition: 0.3s;*/
        transition: all 0.7s ease-out;
        z-index: 9997;
    }
  
    .navbar ul {
        position: absolute;
        inset: 0;
        padding: 90px 0 10px 0;
        margin: 0;
        background: #212529;
        overflow-y: auto;
        /*transition: 0.3s;*/
        transition: all 0.7s ease-out;
        z-index: 9998;
        margin-top: 0px;
    }
    nav#navbar ul li {
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }
    .header .logo img {

        z-index: 55555;
    }
    .navbar a,
    .navbar a:focus {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 15px;
        color: rgb(255 255 255);
        white-space: nowrap;
        transition: 0.3s;
        text-transform: uppercase;
    }
    .navbar a i,
    .navbar a:focus i {
        font-size: 12px;
        line-height: 0;
        /*margin-left: 5px;*/
    }
    .navbar a:hover,
    .navbar .active,
    .navbar .active:focus,
    .navbar li:hover>a {
        color: #fff;
    }
    .navbar .getstarted,
    .navbar .getstarted:focus {
        background: var(--color-primary);
        padding: 8px 20px;
        border-radius: 4px;
        margin: 15px;
        color: #fff;
    }
    .navbar .getstarted:hover,
    .navbar .getstarted:focus:hover {
        color: #fff;
        background: rgba(0, 131, 116, 0.8);
    }
    .navbar .dropdown ul,
    .navbar .dropdown .dropdown ul {
        position: static;
        display: none;
        padding: 10px 0;
        margin: 10px 20px;
        /*transition: all 0.5s ease-in-out;*/
        transition: all 0.7s ease-out;
        background-color: #292e33;
    }
    .navbar .dropdown>.dropdown-active,
    .navbar .dropdown .dropdown>.dropdown-active {
        display: block;
    }
    .mobile-nav-show {
        color:#ff6d48;
        font-size: 28px;
        cursor: pointer;
        line-height: 0;
        transition: 0.5s;
        z-index: 9999;
        margin-right: 10px;
    }
    .mobile-nav-hide {
        color: #fff;
        font-size: 32px;
        cursor: pointer;
        line-height: 0;
        transition: 0.5s;
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 9999;
    }
    .mobile-nav-active {
        overflow: hidden;
    }
    .mobile-nav-active .navbar {
        right: 0;
    }
    .mobile-nav-active .navbar:before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgb(0 0 0 / 80%);
        z-index: 9996;
    }
}

/*--------------------------------------------------------------
# Featured Section
--------------------------------------------------------------*/

.left {
    text-align: right;
}

.right {
    text-align: left;
}

.list-wrap {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.list-wrap p {
    color: var(--text-color);
}

.list-wrap:nth-child(3),
.list-wrap:nth-child(6) {
    margin-bottom: 0;
}

.list-wrap .description h4 {
    color: var(--text-color);
}

.icon {
    width: 150px;
    text-align: center;
    height: 100px;
    border-radius: 50%;
}

.icon svg {
    width: 100%;
}

.list-center-wrap {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 100%;
}

.center-icon {
    width: 100%;
    text-align: center;
}

.center-icon img {
    width: 100%;
    border-radius: 20px;
    opacity: 0.9;
}

/*--------------------------------------------------------------
# About Us Section
--------------------------------------------------------------*/

.about h3 {
    font-size: 28px;
    margin-bottom: 20px;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.about .call-us {
    left: 10%;
    right: 10%;
    bottom: 0;
    background-color: #fff;
    box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.08);
    padding: 20px;
    text-align: center;
}

.about .call-us h4 {
    font-size: 24px;
    margin-bottom: 5px;
}

.about .call-us p {
    font-size: 28px;
    color: var(--color-primary);
}

.about .content ul {
    list-style: none;
    padding: 0;
}

.about .content ul li {
    padding: 0 0 10px 30px;
    position: relative;
}

.about .content ul i {
    position: absolute;
    font-size: 20px;
    left: 0;
    top: -3px;
    color: var(--color-primary);
}

.about .content p:last-child {
    margin-bottom: 0;
}

.about .play-btn {
    width: 94px;
    height: 94px;
    background: radial-gradient(var(--color-primary) 50%, rgba(0, 131, 116, 0.4) 52%);
    border-radius: 50%;
    display: block;
    position: absolute;
    left: calc(50% - 47px);
    top: calc(50% - 47px);
    overflow: hidden;
}

.about .play-btn:before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation: pulsate-btn 2s;
    animation: pulsate-btn 2s;
    -webkit-animation-direction: forwards;
    animation-direction: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps;
    animation-timing-function: steps;
    opacity: 1;
    border-radius: 50%;
    border: 5px solid rgba(0, 131, 116, 0.7);
    top: -15%;
    left: -15%;
    background: rgba(198, 16, 0, 0);
}

.about .play-btn:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 100;
    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.about .play-btn:hover:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 200;
    -webkit-animation: none;
    animation: none;
    border-radius: 0;
}

.about .play-btn:hover:after {
    border-left: 15px solid var(--color-primary);
    transform: scale(20);
}

@-webkit-keyframes pulsate-btn {
    0% {
        transform: scale(0.6, 0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

@keyframes pulsate-btn {
    0% {
        transform: scale(0.6, 0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

.img-frame {
    position: relative;
    background: #f6f6f6;
    background-size: contain;
    padding: 9%;
}

.bar {
    background-color: #f1f1f1;
    padding: 1px;
    border-radius: 15px;
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--light-color);
}

.bar::before {
    content: attr(data-skill);
    background-color: var(--color-primary);
    display: inline-block;
    padding: 5px 0 5px 10px;
    border-radius: inherit;
    animation: load 2s 0s;
    -webkit-animation: load 2s 0s;
    -moz-animation: load 2s 0s;
    -o-animation: load 2s 0s;
}

.bar.front::before {
    background-color: var(--color-primary);
}

.bar.back::before {
    background-color: var(--color-primary);
}

.bar.learning::before {
    width: calc(20% - 10px);
}

.bar.basic::before {
    width: calc(40% - 10px);
}

.bar.intermediate::before {
    width: calc(60% - 10px);
}

.bar.advanced::before {
    width: calc(80% - 10px);
}

.bar.expert::before {
    width: calc(100% - 10px);
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/

.clients {
    padding: 90px 0;
}

.clients .swiper {
    padding: 10px 0;
}

.clients .swiper-slide img {
    transition: 0.3s;
    filter: grayscale(1);
    opacity: 1;
    border-radius: 8px;
}

.clients .swiper-slide img:hover {
    transform: scale(1.1);
}

.clients .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    background-color: #ddd;
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--color-primary);
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/

.call-to-action {
    background: url(../images/icons/luster-op.webp) center left;
    background-size: cover;
    padding: 150px 0px;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    background-attachment: fixed;
}

.call-to-action h3 {
    color: #e1e1e1;
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 20px;
}

.call-to-action p {
    color: #fff;
    margin-bottom: 30px;
    font-weight: 400;
}

.call-to-action .play-btn {
    width: 94px;
    height: 94px;
    margin-bottom: 20px;
    background: radial-gradient(var(--color-primary) 50%, rgba(0, 131, 116, 0.4) 52%);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.call-to-action .play-btn:before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation: pulsate-btn 2s;
    animation: pulsate-btn 2s;
    -webkit-animation-direction: forwards;
    animation-direction: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps;
    animation-timing-function: steps;
    opacity: 1;
    border-radius: 50%;
    border: 5px solid rgba(0, 131, 116, 0.7);
    top: -15%;
    left: -15%;
    background: rgba(198, 16, 0, 0);
}

.call-to-action:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 0;
    opacity: 0.6;
}

.call-to-action .play-btn:hover:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 200;
    -webkit-animation: none;
    animation: none;
    border-radius: 0;
}

.call-to-action .play-btn:hover:after {
    border-left: 15px solid var(--color-primary);
    transform: scale(20);
}

.call-to-action .cta-btn {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 48px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 30px;
    color: #fff;
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
    width: fit-content;
}

.call-to-action .cta-btn:hover {
    background: linear-gradient(45deg, var(--color-secondary), var(--color-primary));
}

@keyframes pulsate-btn {
    0% {
        transform: scale(0.6, 0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/

.testimonials .testimonial-wrap {
    padding-left: 10px;
}

.testimonials .testimonial-item {
    box-sizing: content-box;
    padding: 30px;
    margin: 0px 10px;
    position: relative;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: -1px 5px 20px 0px var(--box-shadow-color);
}

.testimonials .testimonial-item .info-box {
    min-width: 276px;
}

.testimonials .testimonial-item .testimonial-img {
    width: 90px;
    border-radius: 50px;
    margin-right: 15px;
}

.testimonials .testimonial-item h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 5px 0;
    color: var(--color-primary);
}

.testimonials .testimonial-item h4 {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.testimonials .testimonial-item .stars {
    margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
    color: #ffc107;
    margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
    color: var(--color-primary);
    font-size: 26px;
    line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
    transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
    font-style: italic;
    margin: 15px auto 15px auto;
    color: var(--text-color);
}

.testimonials .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: rgb(134 134 134 / 20%);
    opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--color-primary);
}

@media (max-width: 767px) {
    .testimonials .testimonial-wrap {
        padding-left: 0;
    }
    .testimonials .testimonial-item {
        padding: 30px;
        margin: 15px;
        flex-direction: column;
    }
    .testimonials .testimonial-item .testimonial-img {
        position: static;
        left: auto;
    }
}

/*--------------------------------------------------------------
# Our Team Section
--------------------------------------------------------------*/

.team .member {
    text-align: center;
    border-radius: 10px;
    padding: 15px;
    overflow: hidden;
}

.team .member img {
    border-radius: 10px;
    overflow: hidden;
}

.team .member .member-content {
    padding: 0 20px 30px 20px;
}

.team .member h4 {
    margin-top: 16px;
    margin-bottom: 2px;
    font-size: 20px;
    color: var(--color-primary);
}

.team .member span {
    font-style: italic;
    display: block;
    font-size: 14px;
    color: var(--text-color);
}

.team .member p {
    padding-top: 10px;
    font-size: 14px;
    font-style: italic;
    color: #6c757d;
}

.team .member .social {
    margin-top: 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team .member .social a {
    color: var(--color-primary);
    transition: 0.3s;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e8e8e8;
}

.team .member .social a:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.team .member .social i {
    font-size: 14px;
    margin: 0 2px;
}

/*--------------------------------------------------------------
# Frequently Asked Questions Section
--------------------------------------------------------------*/

.faq .content h3 {
    font-weight: 400;
    font-size: 34px;
}

.faq .content h4 {
    font-size: 20px;
    margin-top: 5px;
}

.faq .content p {
    font-size: 15px;
    color: #6c757d;
}

.faq .accordion-item {
    margin-bottom: 20px;
    border-radius: 8px;
    background: var(--theme-color-dark);
    border: 1px solid var(--border-color);
}

.accordion-flush .accordion-item:last-child {
    border-bottom: 1px solid var(--border-color);
}

.faq .accordion-collapse {
    border: 0;
    background: var(--theme-color-dark);
    border-radius: 0 8px 8px 0;
}

.accordion-flush .accordion-item:first-child {
    border: 1px solid var(--border-color);
}

.faq .accordion-button {
    background: var(--theme-color-dark);
    padding: 20px 50px 20px 20px;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-primary);
    text-align: left;
    box-shadow: none;
    border-radius: 8px !important;
}

.faq .accordion-button .num {
    padding-right: 10px;
    font-size: 20px;
    line-height: 0;
    color: var(--color-primary);
}

.faq .accordion-button:not(.collapsed) {
    color: var(--color-primary);
    box-shadow: none;
}

.faq .accordion-button:after {
    position: absolute;
    right: 20px;
    top: 20px;
    background: url(../images/icons/down-arrow.svg);
}

.faq .accordion-body {
    padding: 40px;
    border: 0;
    border-radius: 0 0 8px 8px;
    background: var(--theme-color-dark);
    box-shadow: none;
    color: var(--text-color);
}

/*--------------------------------------------------------------
# Recent Blog Posts Section
--------------------------------------------------------------*/

.recent-posts article {
    background-color: var(--light-color);
    padding: 30px;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: -1px 5px 20px 0px rgb(82 90 101 / 10%);
}

.recent-posts .post-img {
    max-height: 240px;
    margin: -30px -30px 15px -30px;
    overflow: hidden;
    border-radius: 8px;
}

.recent-posts .post-category {
    font-size: 16px;
    color: var(--text-color);
    margin-bottom: 10px;
}

.recent-posts .title {
    font-size: 22px;
    padding: 0;
    margin: 0 0 20px 0;
}

.recent-posts .title a {
    color: var(--color-primary);
    transition: 0.3s;
}

.recent-posts .title a:hover {
    color: var(--text-color);
}

.recent-posts .post-author-img {
    width: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.recent-posts .post-author {
    margin-bottom: 5px;
    color: var(--text-color);
}

.recent-posts .post-date {
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 0;
}

@media (min-width: 1280px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1140px;
    }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

.hero {
    width: 100%;
    position: relative;
    background: linear-gradient(rgb(2 2 2 / 0%), rgb(0 0 0 / 49%)), url(../images/banner/eye.jpg);
    background-size: cover;
    padding: 60px 0 0 0;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;
    margin-top: 0;
    background: linear-gradient(360deg, #000000, #0000005e);
}

.hero .circle {
    color: var(--color-primary);
}

@media (min-width: 1365px) {
    .hero {
        background-attachment: fixed;
    }
}

.dark-bg {
    padding: 50px 30px;
    border-radius: 8px;
}

.social {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    /* justify-content: space-around; */
    gap: 10px;
}

.social a {
    color: var(--text-color);
    transition: 0.3s;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social a:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.social i {
    font-size: 14px;
    margin: 0 2px;
    color: var(--color-primary);
}

.mr-20 {
    margin-right: 20px !important;
}

.hero h2 {
    font-size: 60px;
    margin-bottom: 20px;
    color: var(--hero-text-color);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 100;
}

.hero span {
    color: var(--color-primary);
    font-weight: bold;
}

.hero p {
    color: var(--hero-text-color);
    font-weight: 400;
    margin-bottom: 30px;
    font-size: 20px;
}

.btn-get-started {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 14px 20px;
    border-radius: 50px;
    transition: 0.3s;
    color: var(--text-white-color);
    background: linear-gradient(45deg, #fa5b3c, var(--color-secondary));
}

.btn-get-started:hover {
    background: linear-gradient(45deg, var(--color-secondary), var(--color-primary));
    color: var(--text-white-color);
}

.hero .btn-watch-video {
    font-size: 16px;
    transition: 0.5s;
    margin-left: 25px;
    color: #fff;
}

.hero .btn-watch-video i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 32px;
    transition: 0.3s;
    line-height: 0;
    margin-right: 8px;
}

.hero .btn-watch-video:hover i {
    color: #fff;
}

@media (max-width: 991px) {
    .hero {
        background: linear-gradient(rgb(2 2 2 / 0%), rgb(0 0 0 / 49%)), url(../images/banner/eye.jpg) center center;
    }
    .hero h2 {
        font-size: 22px;
    }
       .call-to-action {
        background-size: cover;
        padding: 50px 40px;
        border-radius: 0px;
        overflow: hidden;
    }
}

@media (max-width: 767px) {
    .text-left.caption {
        text-align: center;
    }
    .caption .justify-content-start {
        justify-content: center !important;
    }
    .caption .social {
        justify-content: center;
    }
    .btn-get-started,
    .hero .btn-watch-video {
        font-size: 14px;
    }
    .icon-boxes .card-two {
        margin-top: var(--bs-gutter-y);
        margin-bottom: 0px;
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }
}

@media (min-width: 768px) {
    .btn-get-started,
    .hero .btn-watch-video {
        font-size: 14px;
    }
    .icon-boxes .card-two {
        margin-top: -20px;
        margin-bottom: -20px;
    }
}

.icon-box {
    padding: 20px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    z-index: 1;
    height: 100%;
    width: 100%;
    text-align: center;
    color: var(--text-color);
    box-shadow: -1px 1px 3px 2px var(--box-shadow-color);
}

.icon-box .icon img {
    width: 77px;
    filter: invert(55%) sepia(66%) saturate(613%) hue-rotate(338deg) brightness(98%) contrast(96%);
}

.icon-box .title {
    margin-bottom: 15px;
    font-size: 24px;
}

.icon-box .title a {
    color:#d3d3d3;
    transition: 0.3s;
}

.icon-box .icon {
    margin-bottom: 20px;
    padding-top: 10px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    font-size: 48px;
    line-height: 1;
    color: var(--color-primary);
}

.icon-box:hover {
    transform: scale(1.04);
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/

.blog .blog-pagination {
    margin-top: 30px;
    color: #555555;
}

.blog .blog-pagination ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

.blog .blog-pagination li {
    margin: 0 5px;
    transition: 0.3s;
    border-radius: 10px;
}

.blog .blog-pagination li a {
    color: var(--color-default);
    padding: 7px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog .blog-pagination li.active,
.blog .blog-pagination li:hover {
    background: var(--color-primary);
    color: #fff;
}

.blog .blog-pagination li.active a,
.blog .blog-pagination li:hover a {
    color: var(--color-white);
}

.blog-sidbar {
    background-color: var(--light-color);
    padding: 30px 20px;
    border-radius: 8px;
}

.blog-sidbar ul li a:hover {
    color: rgb(74 74 74);
}

/*--------------------------------------------------------------
# Blog Posts List
--------------------------------------------------------------*/

.blog .posts-list article {
    box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
    padding: 30px;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.blog .posts-list .post-img {
    max-height: 240px;
    margin: -30px -30px 15px -30px;
    overflow: hidden;
}

.blog .posts-list .post-category {
    font-size: 16px;
    color: #555555;
    margin-bottom: 10px;
}

.blog .posts-list .title {
    font-size: 22px;
    padding: 0;
    margin: 0 0 20px 0;
}

.blog .posts-list .title a {
    color: var(--color-default);
    transition: 0.3s;
}

.blog .posts-list .title a:hover {
    color: var(--color-primary);
}

.blog .posts-list .post-author-img {
    width: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.blog .posts-list .post-author-list {
    font-weight: 500;
    margin-bottom: 5px;
}

.blog .posts-list .post-date {
    font-size: 14px;
    color: #3c3c3c;
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Details
--------------------------------------------------------------*/

.blog .blog-details {
    box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
    padding: 30px;
    border-radius: 10px;
}

.blog .blog-details .post-img {
    margin: -30px -30px 20px -30px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.blog .blog-details .title {
    font-size: 28px;
    padding: 0;
    margin: 20px 0 0 0;
    color: var(--color-default);
}

.blog .blog-details .content {
    margin-top: 20px;
}

.blog .blog-details .content h3 {
    font-size: 22px;
    margin-top: 30px;
    font-weight: bold;
}

.blog .blog-details .content blockquote {
    overflow: hidden;
    background-color: rgba(34, 34, 34, 0.06);
    padding: 60px;
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.blog .blog-details .content blockquote p {
    color: var(--color-default);
    line-height: 1.6;
    margin-bottom: 0;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
}

.blog .blog-details .content blockquote:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--color-secondary);
    margin-top: 20px;
    margin-bottom: 20px;
}

.blog .blog-details .meta-top {
    margin-top: 20px;
    color: #6c757d;
}

.blog .blog-details .meta-top ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    align-items: center;
    padding: 0;
    margin: 0;
}

.blog .blog-details .meta-top ul li+li {
    padding-left: 20px;
}

.blog .blog-details .meta-top i {
    font-size: 16px;
    margin-right: 8px;
    line-height: 0;
    color: var(--color-primary);
}

.blog .blog-details .meta-top a {
    color: #6c757d;
    font-size: 14px;
    display: inline-block;
    line-height: 1;
}

.blog .blog-details .meta-bottom {
    padding-top: 10px;
    border-top: 1px solid rgba(34, 34, 34, 0.15);
}

.blog .blog-details .meta-bottom i {
    color: #555555;
    display: inline;
}

.blog .blog-details .meta-bottom a {
    color: rgba(34, 34, 34, 0.8);
    transition: 0.3s;
}

.blog .blog-details .meta-bottom a:hover {
    color: var(--color-primary);
}

.blog .blog-details .meta-bottom .cats {
    list-style: none;
    display: inline;
    padding: 0 20px 0 0;
    font-size: 14px;
}

.blog .blog-details .meta-bottom .cats li {
    display: inline-block;
}

.blog .blog-details .meta-bottom .tags {
    list-style: none;
    display: inline;
    padding: 0;
    font-size: 14px;
}

.blog .blog-details .meta-bottom .tags li {
    display: inline-block;
}

.blog .blog-details .meta-bottom .tags li+li::before {
    padding-right: 6px;
    color: var(--color-default);
    content: ",";
}

.blog .blog-details .meta-bottom .share {
    font-size: 16px;
}

.blog .blog-details .meta-bottom .share i {
    padding-left: 5px;
}

.blog .post-author {
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
    border-radius: 10px;
}

.blog .post-author img {
    max-width: 120px;
    margin-right: 20px;
}

.blog .post-author h4 {
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 0px;
    padding: 0;
    color: var(--color-default);
}

.blog .post-author .social-links {
    margin: 0 10px 10px 0;
}

.blog .post-author .social-links a {
    color: rgba(34, 34, 34, 0.5);
    margin-right: 5px;
}

.blog .post-author p {
    font-style: italic;
    color: rgba(108, 117, 125, 0.8);
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Sidebar
--------------------------------------------------------------*/

dl,
ol,
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.single-page ul {
    list-style: none;
}

.single-page ul li {
    position: relative;
    color: var(--text-color);
    margin-bottom: 5px;
    border-radius: 8px;
}

.blog .sidebar {
    padding: 30px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
    border-radius: 10px;
}

.search-form {
    position: relative;
    overflow: hidden;
    border-radius: 50px;
    margin-bottom: 30px;
    border: 0;
}

.search-form input {
    width: 100%;
    padding: 14px 28px;
    background: #ffffff;
    border: none;
    color: #393838;
    outline: none;
}

.search-form button {
    position: absolute;
    right: 0;
    padding: 16px 20px;
    border: none;
    top: 0px;
    color: var(--text-white-color);
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
    outline: none;
}

.search-form button:hover {
    cursor: pointer;
    background: linear-gradient(45deg, var(--color-secondary), var(--color-primary));
    color: var(--text-white-color);
}

.search-form button i {
    color: #fff;
}

.blog .sidebar .sidebar-title {
    font-size: 20px;
    padding: 0;
    margin: 0;
    color: var(--color-default);
}

.blog .sidebar .sidebar-item+.sidebar-item {
    margin-top: 40px;
}

.blog .sidebar .search-form form {
    background: #fff;
    border: 1px solid rgba(34, 34, 34, 0.3);
    padding: 5px 10px;
    position: relative;
    border-radius: 50px;
}

.blog .sidebar .search-form form input[type=text] {
    border: 0;
    padding: 4px;
    border-radius: 50px;
    width: calc(100% - 60px);
}

.blog .sidebar .search-form form input[type=text]:focus {
    outline: none;
}

.blog .sidebar .search-form form button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 25px;
    margin: -1px;
    background: var(--color-primary);
    color: #fff;
    transition: 0.3s;
    border-radius: 50px;
    line-height: 0;
}

.blog .sidebar .search-form form button i {
    line-height: 0;
}

.blog .sidebar .search-form form button:hover {
    background: rgba(0, 131, 116, 0.8);
}

.blog .sidebar .categories ul {
    list-style: none;
    padding: 0;
}

.blog .sidebar .categories ul li+li {
    padding-top: 10px;
}

.blog .sidebar .categories ul a {
    color: var(--color-default);
    transition: 0.3s;
}

.blog .sidebar .categories ul a:hover {
    color: var(--color-primary);
}

.blog .sidebar .categories ul a span {
    padding-left: 5px;
    color: rgba(34, 34, 34, 0.4);
    font-size: 14px;
}

.blog .sidebar .recent-posts .post-item+.post-item {
    margin-top: 15px;
}

.blog .sidebar .recent-posts img {
    width: 80px;
    float: left;
}

.blog .sidebar .recent-posts h4 {
    font-size: 15px;
    margin-left: 95px;
    font-weight: bold;
}

.blog .sidebar .recent-posts h4 a {
    color: var(--color-default);
    transition: 0.3s;
}

.blog .sidebar .recent-posts h4 a:hover {
    color: var(--color-primary);
}

.blog .sidebar .recent-posts time {
    display: block;
    margin-left: 95px;
    font-style: italic;
    font-size: 14px;
    color: rgba(34, 34, 34, 0.4);
}

.blog .sidebar .tags {
    margin-bottom: -10px;
}

.blog .sidebar .tags ul {
    list-style: none;
    padding: 0;
}

.blog .sidebar .tags ul li {
    display: inline-block;
}

.blog .sidebar .tags ul a {
    color: #555555;
    font-size: 14px;
    padding: 6px 20px;
    margin: 0 6px 8px 0;
    border: 1px solid #d5d5d5;
    display: inline-block;
    transition: 0.3s;
    border-radius: 50px;
}

.blog .sidebar .tags ul a:hover {
    color: #fff;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
}

.blog .sidebar .tags ul a span {
    padding-left: 5px;
    color: rgba(85, 85, 85, 0.8);
    font-size: 14px;
}

/*--------------------------------------------------------------
# Blog Comments
--------------------------------------------------------------*/

.blog .comments {
    margin-top: 30px;
}

.blog .comments .comments-count {
    font-weight: bold;
}

.blog .comments .comment {
    margin-top: 30px;
    position: relative;
}

.blog .comments .comment .comment-img {
    margin-right: 14px;
}

.blog .comments .comment .comment-img img {
    width: 60px;
}

.blog .comments .comment h5 {
    font-size: 16px;
    margin-bottom: 2px;
}

.blog .comments .comment h5 a {
    font-weight: bold;
    color: var(--color-default);
    transition: 0.3s;
}

.blog .comments .comment h5 a:hover {
    color: var(--color-primary);
}

.blog .comments .comment h5 .reply {
    padding-left: 10px;
    color: var(--color-primary);
}

.blog .comments .comment h5 .reply i {
    font-size: 20px;
}

.blog .comments .comment time {
    display: block;
    font-size: 14px;
    color: rgba(34, 34, 34, 0.8);
    margin-bottom: 5px;
}

.blog .comments .comment.comment-reply {
    padding-left: 40px;
}

.blog .comments .reply-form {
    margin-top: 30px;
    padding: 30px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.blog .comments .reply-form h4 {
    font-weight: bold;
    font-size: 22px;
}

.blog .comments .reply-form p {
    font-size: 14px;
}

.blog .comments .reply-form input {
    border-radius: 4px;
    padding: 10px 10px;
    font-size: 14px;
}

.blog .comments .reply-form input:focus {
    box-shadow: none;
    border-color: rgba(0, 131, 116, 0.8);
}

.blog .comments .reply-form textarea {
    border-radius: 4px;
    padding: 10px 10px;
    font-size: 14px;
}

.blog .comments .reply-form textarea:focus {
    box-shadow: none;
    border-color: rgba(0, 131, 116, 0.8);
}

.blog .comments .reply-form .form-group {
    margin-bottom: 25px;
}

.blog .comments .reply-form .btn-primary {
    border-radius: 50px;
    padding: 14px 40px;
    border: 0;
    background-color: var(--color-secondary);
}

.blog .comments .reply-form .btn-primary:hover {
    background-color: rgba(248, 90, 64, 0.8);
}

/*--------------------------------------------------------------
# Stats Counter Section
--------------------------------------------------------------*/

.stats-counter .stats-item .purecounter {
    padding-right: 0;
}

.stats-counter .stats-item i {
    font-size: 90px;
    line-height: 0;
    color: var(--color-primary);
    margin-bottom: 30px;
}

.stats-counter .stats-item span {
    font-size: 24px;
    display: block;
    color: var(--color-primary);
    line-height: 34px;
    text-align: center;
}

.stats-counter .stats-item p {
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/

.portfolio .portfolio-flters {
    padding: 0 0 40px 0;
    margin: 0 auto;
    list-style: none;
    text-align: center;
}

.portfolio .portfolio-flters li {
    cursor: pointer;
    display: inline-block;
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    margin: 0 10px;
    color: var(--text-white-color);
    line-height: 1;
    transition: all 0.3s ease-in-out;
    padding: 15px 25px;
    border-radius: 30px;
    margin-bottom: 20px;
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
}

.portfolio .portfolio-flters li:hover,
.portfolio .portfolio-flters li.filter-active {
    color: var(--text-white-color);
    background: linear-gradient(45deg, var(--color-secondary), var(--color-primary));
}

.portfolio .portfolio-flters li:first-child {
    margin-left: 0;
}

.portfolio .portfolio-flters li:last-child {
    margin-right: 0;
}

@media (max-width: 575px) {
    .portfolio .portfolio-flters li {
        font-size: 14px;
    }
}

.portfolio .portfolio-wrap {
    box-shadow: -1px 5px 20px 0px rgb(82 90 101 / 10%);
    border-radius: 8px;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.portfolio .portfolio-wrap img {
    transition: 0.3s;
    position: relative;
    z-index: 1;
}

.portfolio .portfolio-wrap .portfolio-info {
    padding: 25px 20px;
    position: absolute;
    z-index: 2;
    bottom: -1px;
    -webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);
    background: var(--color-secondary);
    border-radius: 0 8px 0 0;
}

.portfolio .portfolio-wrap .portfolio-info:hover {
    background: #1c042e;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
    font-size: 18px;
    margin-bottom: 0;
    color: #fff;
}

.portfolio .portfolio-wrap .portfolio-info h4 a {
    color: var(--light-color);
    transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-info h4 a:hover {
    color: var(--color-primary);
}

.portfolio .portfolio-wrap .project-btn a {
    color: var(--light-color);
}

.portfolio .portfolio-wrap .portfolio-info p {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 0;
    padding-right: 50px;
}

.portfolio .portfolio-wrap .portfolio-info .portfolio-details {
    margin-bottom: 20px;
}

.portfolio .portfolio-wrap:hover img {
    transform: scale(1.1);
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/

.card {
    position: relative;
    height: auto;
    background: var(--light-color);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    margin: 0 auto;
    padding: 40px 20px;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    overflow: hidden;
    margin-bottom: 20px;
    border: 0;
    box-shadow: -1px 5px 20px 0px var(--box-shadow-color);
}

.card:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.card .title img {
    width: 120px;
}

.col-sm-3:nth-child(1) .card,
.col-sm-3:nth-child(1) .card .title .fa {
    /* background: linear-gradient(-45deg, var(--color-primary), #ec9f00); */
}

.col-sm-3:nth-child(2) .card,
.col-sm-4:nth-child(2) .card .title .fa {
    /* background: linear-gradient(-45deg, var(--color-primary), #ec9f00); */
}

.col-sm-3:nth-child(3) .card,
.col-sm-3:nth-child(3) .card .title .fa {
    background: linear-gradient(-45deg, var(--color-primary), #ec9f00);
}

.col-sm-3:nth-child(3) .card a {
    color: var(--light-color);
    border: 2px solid var(--light-color);
}

.card:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    z-index: 1;
    transform: skewY(-5deg) scale(1.5);
    -webkit-transform: skewY(-5deg) scale(1.5);
    -moz-transform: skewY(-5deg) scale(1.5);
    -ms-transform: skewY(-5deg) scale(1.5);
    -o-transform: skewY(-5deg) scale(1.5);
}

.title .fa {
    color: #fff;
    font-size: 60px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    text-align: center;
    line-height: 100px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
}

.title h2 {
    position: relative;
    margin: 20px 0 0;
    padding: 0;
    color: var(--text-color);
    font-size: 28px;
    z-index: 2;
}

.price {
    position: relative;
    z-index: 2;
    color: var(--text-color);
}

.price h4 {
    margin: 0;
    padding: 20px 0;
    color: var(--text-color);
    font-size: 60px;
}

.option {
    position: relative;
    z-index: 2;
}

.option ul {
    margin: 0;
    padding: 0;
}

.option ul li {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    color: var(--text-color);
    font-size: 16px;
}

.card a {
    cursor: pointer;
    display: inline-block;
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    margin: 0 10px;
    line-height: 1;
    transition: all 0.3s ease-in-out;
    padding: 15px 25px;
    border-radius: 30px;
    margin-bottom: 20px;
    position: relative;
    color: var(--text-white-color);
    z-index: 2;
    margin: 20px auto 0;
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
}

.card a:hover {
    text-decoration: none;
    background: linear-gradient(45deg, var(--color-secondary), var(--color-primary));
}

/*--------------------------------------------------------------
# Blog Posts List
--------------------------------------------------------------*/

.blog .posts-list article {
    box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
    padding: 30px;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.blog .posts-list .post-img {
    max-height: 240px;
    margin: -30px -30px 15px -30px;
    overflow: hidden;
}

.blog .posts-list .post-category {
    font-size: 16px;
    color: #555555;
    margin-bottom: 10px;
}

.blog .posts-list .title {
    font-size: 22px;
    padding: 0;
    margin: 0 0 20px 0;
}

.blog .posts-list .title a {
    color: var(--color-default);
    transition: 0.3s;
}

.blog .posts-list .title a:hover {
    color: var(--color-primary);
}

.blog .posts-list .post-author-img {
    width: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.blog .posts-list .post-author-list {
    margin-bottom: 5px;
}

.blog .posts-list .post-date {
    font-size: 14px;
    color: #3c3c3c;
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Details
--------------------------------------------------------------*/

.blog .blog-details {
    box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
    padding: 30px;
    border-radius: 10px;
}

.blog .blog-details .post-img {
    margin: -30px -30px 20px -30px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.blog .blog-details .title {
    font-size: 28px;
    padding: 0;
    margin: 20px 0 0 0;
    color: var(--color-default);
}

.blog .blog-details .content {
    margin-top: 20px;
}

.blog .blog-details .content h3 {
    font-size: 22px;
    margin-top: 30px;
    font-weight: bold;
}

.blog .blog-details .content blockquote {
    overflow: hidden;
    background-color: rgba(34, 34, 34, 0.06);
    padding: 60px;
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.blog .blog-details .content blockquote p {
    color: var(--color-default);
    line-height: 1.6;
    margin-bottom: 0;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
}

.blog .blog-details .content blockquote:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--color-secondary);
    margin-top: 20px;
    margin-bottom: 20px;
}

.blog .blog-details .meta-top {
    margin-top: 20px;
    color: #6c757d;
}

.blog .blog-details .meta-top ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    align-items: center;
    padding: 0;
    margin: 0;
}

.blog .blog-details .meta-top ul li+li {
    padding-left: 20px;
}

.blog .blog-details .meta-top i {
    font-size: 16px;
    margin-right: 8px;
    line-height: 0;
    color: var(--color-primary);
}

.blog .blog-details .meta-top a {
    color: #6c757d;
    font-size: 14px;
    display: inline-block;
    line-height: 1;
}

.blog .blog-details .meta-bottom {
    padding-top: 10px;
    border-top: 1px solid rgba(34, 34, 34, 0.15);
}

.blog .blog-details .meta-bottom i {
    color: #555555;
    display: inline;
}

.blog .blog-details .meta-bottom a {
    color: rgba(34, 34, 34, 0.8);
    transition: 0.3s;
}

.blog .blog-details .meta-bottom a:hover {
    color: var(--color-primary);
}

.blog .blog-details .meta-bottom .cats {
    list-style: none;
    display: inline;
    padding: 0 20px 0 0;
    font-size: 14px;
}

.blog .blog-details .meta-bottom .cats li {
    display: inline-block;
}

.blog .blog-details .meta-bottom .tags {
    list-style: none;
    display: inline;
    padding: 0;
    font-size: 14px;
}

.blog .blog-details .meta-bottom .tags li {
    display: inline-block;
}

.blog .blog-details .meta-bottom .tags li+li::before {
    padding-right: 6px;
    color: var(--color-default);
    content: ",";
}

.blog .blog-details .meta-bottom .share {
    font-size: 16px;
}

.blog .blog-details .meta-bottom .share i {
    padding-left: 5px;
}

.blog .post-author {
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
    border-radius: 10px;
}

.blog .post-author img {
    max-width: 120px;
    margin-right: 20px;
}

.blog .post-author h4 {
    font-size: 22px;
    margin-bottom: 0px;
    padding: 0;
    color: var(--color-default);
}

.blog .post-author .social-links {
    margin: 0 10px 10px 0;
}

.blog .post-author .social-links a {
    color: rgba(34, 34, 34, 0.5);
    margin-right: 5px;
}

.blog .post-author p {
    font-style: italic;
    color: rgba(108, 117, 125, 0.8);
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Sidebar
--------------------------------------------------------------*/

.blog .sidebar {
    padding: 30px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
    border-radius: 10px;
}

.blog .sidebar .sidebar-title {
    font-size: 20px;
    padding: 0;
    margin: 0;
    color: var(--color-default);
}

.blog .sidebar .sidebar-item+.sidebar-item {
    margin-top: 40px;
}

.blog .sidebar .search-form form {
    background: #fff;
    border: 1px solid rgba(34, 34, 34, 0.3);
    padding: 5px 10px;
    position: relative;
    border-radius: 50px;
}

.blog .sidebar .search-form form input[type=text] {
    border: 0;
    padding: 4px;
    border-radius: 50px;
    width: calc(100% - 60px);
}

.blog .sidebar .search-form form input[type=text]:focus {
    outline: none;
}

.blog .sidebar .search-form form button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 25px;
    margin: -1px;
    background: var(--color-primary);
    color: #fff;
    transition: 0.3s;
    border-radius: 50px;
    line-height: 0;
}

.blog .sidebar .search-form form button i {
    line-height: 0;
}

.blog .sidebar .search-form form button:hover {
    background: rgba(0, 131, 116, 0.8);
}

.blog .sidebar .categories ul {
    list-style: none;
    padding: 0;
}

.blog .sidebar .categories ul li+li {
    padding-top: 10px;
}

.blog .sidebar .categories ul a {
    color: var(--color-default);
    transition: 0.3s;
}

.blog .sidebar .categories ul a:hover {
    color: var(--color-primary);
}

.blog .sidebar .categories ul a span {
    padding-left: 5px;
    color: rgba(34, 34, 34, 0.4);
    font-size: 14px;
}

.blog .sidebar .recent-posts .post-item+.post-item {
    margin-top: 15px;
}

.blog .sidebar .recent-posts img {
    width: 80px;
    float: left;
}

.blog .sidebar .recent-posts h4 {
    font-size: 15px;
    margin-left: 95px;
    font-weight: bold;
}

.blog .sidebar .recent-posts h4 a {
    color: var(--color-default);
    transition: 0.3s;
}

.blog .sidebar .recent-posts h4 a:hover {
    color: var(--color-primary);
}

.blog .sidebar .recent-posts time {
    display: block;
    margin-left: 95px;
    font-style: italic;
    font-size: 14px;
    color: rgba(34, 34, 34, 0.4);
}

.blog .sidebar .tags {
    margin-bottom: -10px;
}

.blog .sidebar .tags ul {
    list-style: none;
    padding: 0;
}

.blog .sidebar .tags ul li {
    display: inline-block;
}

.blog .sidebar .tags ul a {
    color: #555555;
    font-size: 14px;
    padding: 6px 20px;
    margin: 0 6px 8px 0;
    border: 1px solid #d5d5d5;
    display: inline-block;
    transition: 0.3s;
    border-radius: 50px;
}

.blog .sidebar .tags ul a:hover {
    color: #fff;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
}

.blog .sidebar .tags ul a span {
    padding-left: 5px;
    color: rgba(85, 85, 85, 0.8);
    font-size: 14px;
}

/*--------------------------------------------------------------
# Blog Comments
--------------------------------------------------------------*/

.blog .comments {
    margin-top: 30px;
}

.blog .comments .comments-count {
    font-weight: bold;
}

.blog .comments .comment {
    margin-top: 30px;
    position: relative;
}

.blog .comments .comment .comment-img {
    margin-right: 14px;
}

.blog .comments .comment .comment-img img {
    width: 60px;
}

.blog .comments .comment h5 {
    font-size: 16px;
    margin-bottom: 2px;
}

.blog .comments .comment h5 a {
    font-weight: bold;
    color: var(--color-default);
    transition: 0.3s;
}

.blog .comments .comment h5 a:hover {
    color: var(--color-primary);
}

.blog .comments .comment h5 .reply {
    padding-left: 10px;
    color: var(--color-primary);
}

.blog .comments .comment h5 .reply i {
    font-size: 20px;
}

.blog .comments .comment time {
    display: block;
    font-size: 14px;
    color: rgba(34, 34, 34, 0.8);
    margin-bottom: 5px;
}

.blog .comments .comment.comment-reply {
    padding-left: 40px;
}

.blog .comments .reply-form {
    margin-top: 30px;
    padding: 30px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.blog .comments .reply-form h4 {
    font-weight: bold;
    font-size: 22px;
}

.blog .comments .reply-form p {
    font-size: 14px;
}

.blog .comments .reply-form input {
    border-radius: 4px;
    padding: 10px 10px;
    font-size: 14px;
}

.blog .comments .reply-form input:focus {
    box-shadow: none;
    border-color: rgba(0, 131, 116, 0.8);
}

.blog .comments .reply-form textarea {
    border-radius: 4px;
    padding: 10px 10px;
    font-size: 14px;
}

.blog .comments .reply-form textarea:focus {
    box-shadow: none;
    border-color: rgba(0, 131, 116, 0.8);
}

.blog .comments .reply-form .form-group {
    margin-bottom: 25px;
}

.blog .comments .reply-form .btn-primary {
    border-radius: 50px;
    padding: 14px 40px;
    border: 0;
    background-color: var(--color-secondary);
}

.blog .comments .reply-form .btn-primary:hover {
    background-color: rgba(248, 90, 64, 0.8);
}

/**************************************
  Contact
 **************************************/

.contact-section .contact-form-3 form .form-control {
    font-size: 15px;
    width: 100%;
    padding: 10px 20px;
    height: 52px;
    color: #fff;
    border: none;
    border-radius: 8px;
    text-transform: capitalize;
    transition: all 0.4s;
    background: var(--theme-color-dark);
}

.contact-section .contact-form-3 form input:focus,
.contact-section .contact-form-3 form textarea:focus {
    outline: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.contact-information-box-3 {
    padding: 25px 20px;
    border-radius: 8px;
    margin-bottom: 50px;
}

.contact-information-box-3 .single-contact-info-box {
    position: relative;
    z-index: 1;
    padding: 10px 10px;
    display: block;
    border-radius: 3px;
    text-align: left;
    margin-bottom: 10px;
    overflow: hidden;
}

.contact-information-box-3 .contact-info {
    position: relative;
    z-index: 1;
}

.contact-information-box-3 .contact-info h6 {
    font-size: 18px;
    color: var(--text-color);
    margin-bottom: 7px;
    text-transform: capitalize;
}

.contact-information-box-3 .contact-info p {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.contact-information-box-3 .single-contact-info-box .contact-info-bg-icon {
    color: #f44336;
    opacity: .2;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25px;
    margin: 0 auto;
    z-index: -1;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.contact-information-box-3 .single-contact-info-box .contact-info-bg-icon i {
    font-size: 100px;
}

.contact-section .contact-form .form-group {
    margin-bottom: 30px;
}

.contact-section .contact-form form textarea.form-control {
    height: auto;
    padding-top: 15px;
    line-height: initial;
}

.contact-section .form-message {
    margin: 0;
}

.contact-form button[type=submit] {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 14px 40px;
    border-radius: 50px;
    transition: 0.3s;
    border: 0;
    color: var(--text-white-color);
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
}

.contact-form button[type=submit]:hover {
    color: var(--text-white-color);
    background: linear-gradient(45deg, var(--color-secondary), var(--color-primary));
}

.contact-section .form-message.success {
    background: #03b103;
    color: #fff;
    padding: 10px 15px;
    border-radius: 3px;
    margin-bottom: 30px;
}

.contact-section .form-message.error {
    background: #ff4d15;
    color: #fff;
    padding: 10px 15px;
    border-radius: 3px;
    margin-bottom: 30px;
}

.contact-area .form-message.success {
    background: #03b103;
    color: #fff;
    padding: 10px 15px;
    border-radius: 3px;
    display: block;
    margin-bottom: 15px;
}

.contact-area .form-message.error {
    background: #ff4d15;
    color: #fff;
    padding: 10px 15px;
    border-radius: 3px;
    display: block;
    margin-bottom: 15px;
}

.with-errors {
    color: #dc3545;
}

.messages {
    margin-top: 30px;
}

.alert-success {
    margin-left: 15px;
}

.hidden {
    display: none;
}

/*--------------------------------------------------------------
# Particles
--------------------------------------------------------------*/

#particles-js {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

canvas {
    display: block;
    vertical-align: bottom;
}

.count-particles {
    background: #000022;
    position: absolute;
    top: 48px;
    left: 0;
    width: 80px;
    color: #13E8E9;
    font-size: .8em;
    text-align: left;
    text-indent: 4px;
    line-height: 14px;
    padding-bottom: 2px;
   font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: bold;
}

.js-count-particles {
    font-size: 1.1em;
}

#stats,
.count-particles {
    -webkit-user-select: none;
    margin-top: 5px;
    margin-left: 5px;
}

#stats {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

.count-particles {
    border-radius: 0 0 3px 3px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.footer-section {
    background: url(https://static.vecteezy.com/system/resources/thumbnails/027/300/432/small_2x/stylish-eyeglasses-in-female-hand-on-blue-banner-background-optical-store-vision-test-concept-banner-format-photo.jpg);
    background-size: contain;
    padding: 60px 0;
    border-radius: 0px;
    padding-bottom: 0px;
}
.main-footer__shape-2 {
    position: absolute;
    right: 0;
    bottom: 0;
    animation: zumpBottom 2s linear infinite;
}
@keyframes zumpBottom {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  50% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.footer-section .shape1 {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: .03;
}
.zoom-fade {
    animation-name: zoom-fade;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: zoom-fade;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: zoom-fade;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: zoom-fade;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: zoom-fade;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@keyframes zoom-fade {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.footer-section:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 0;
    opacity: 0.8;
}

.footer-cta {
    border-bottom: 1px solid #373636;
}

.copyright-text {
    margin-top: 30px;
}

.single-cta i {
    color: #c00113;
    font-size: 30px;
    float: left;
    margin-top: 8px;
}

.cta-text {
    padding-left: 15px;
    display: inline-block;
}

.cta-text h4 {
    color: #c00113;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 2px;
}

.cta-text span {
    color: #757575;
    font-size: 15px;
}

.footer-content {
    position: relative;
    z-index: 2;
}

.footer-content .list {
    padding-left: 0;
}

.footer-pattern img {
    position: absolute;
    top: 0;
    left: 0;
    height: 330px;
    background-size: cover;
    background-position: 100% 100%;
}

.footer-logo {
    margin-bottom: 0px;
}

.footer-logo img {
    max-width: 200px;
}

.footer-widget ul li,
.footer-widget ul li a {
    font-size: 14px;
}

.footer-text p {
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--text-white-color);
    line-height: 28px;
    display: flex;
}
i.fa-solid.fa-angles-right.me-3 {
    color: #ed603a;
}
.footer-social-icon span {
    color: #e7e7e7;
    display: block;
    font-size: 20px;
    /* font-family: 'Poppins', sans-serif; */
    margin-bottom: 20px;
}

.footer-social-icon a {
    color: #fff;
    font-size: 16px;
    margin-right: 15px;
}

.footer-social-icon i {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 41px;
    border-radius: 50%;
}

.facebook-bg {
    background: var(--color-primary);
}

.twitter-bg {
    background: var(--color-primary);
}

.google-bg {
    background: var(--color-primary);
}

.footer-widget-heading h3 {
    color: white;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    position: relative;
}

.footer-widget ul li {
    display: flex;
    align-items: baseline;
    float: left;
    width: 100%;
    margin-bottom: 12px;
}

.footer-text i {
    margin-right: 10px;
    color: #f25f38;
}

.footer-widget ul li a:hover {
    color: #f26037;
}

.footer-widget ul li a {
    color: var(--text-white-color);
    text-transform: capitalize;
}

.subscribe-form {
    position: relative;
    overflow: hidden;
    border-radius: 50px;
}

.subscribe-form input {
    width: 100%;
    padding: 14px 28px;
    background: #e4e4e4;
    border: 1px solid #e4e4e4;
    color: #222222;
    outline: none;
}

.subscribe-form button {
    position: absolute;
    right: -3px;
    background: transparent;
    border: 0;
    top: -8px;
}

.subscribe-form button i {
    color: var(--color-primary);
    font-size: 3rem;
    transform: rotate(-6deg);
}

.copyright-area {
    padding: 25px 0;
}

.copyright-text p {
    margin: 0;
    font-size: 14px;
    color: #b9b9b9;
}

.copyright-text p a {
    color: #dd5339;
}

.footer-menu li {
    display: inline-block;
    margin-left: 20px;
}

.footer-menu li:hover a {
    color: var(--color-primary);
}

.footer-menu li a {
    font-size: 14px;
    color: #b9b9b9;
}

.footer-menu li a:hover {
    color: #000000;
}


/* ====== Header Top Area =========== */

.header-top-area .align-items-center{
  padding: 11px 0;
}
.header-top-area {
  background: #28306b;
  overflow: hidden;
  position: relative;
}
.stikcy-menu .radius-header{
    background: linear-gradient(to bottom, rgb(12 34 56), #213d59);
}
.header-top-area::before {
  content:"";
  height: 100%;
  width: 60%;
  background: #FF3C00;
  position: absolute;
  top: 0;
  left: -20px;
  transform: skew(-25deg);
}
.header-top-left-single-item {
  display: inline-block;
  margin-right: 20px;
}
.header-top-left-single-item a {
  color: #fff;
  font-size: 15px;
}
.header-top-left-icon i {
  margin-right: 8px;
}
.header-top-right-items ul {
  text-align: right;
}
.header-top-right-icon-area ul li {
  display: inline-block;
  margin-left:8px;
}
.header-top-right-icon-area ul li a {
  color: #fff;
  font-size: 14px;
  transition: .5s;
}

.header-search-icons i {
  font-size: 18px;
  color: #fff;
  cursor: pointer;
}
/*header top menu area style two*/
.header-top-area.style-two:before {
    content: "";
    height: 100%;
    width: 46%;
    background: #f35e36;
    position: absolute;
    top: 0;
    right: -20px!important;
    transform: skew(41deg);
    left: inherit;
}
.header-top-area.style-two .align-items-center {
    padding: 14px 0;
}
.header-top-area.style-two .header-top-right-icon-area ul li {
    margin-left: 34px;
}



/* ====== Side bar =========== */

.sidebar-info {
    width: 95px;
    background: transparent;
    position: absolute;
    right: 0;
    height: 700px;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
}
.topbar-social-item.style-two {
    writing-mode: vertical-lr;
    margin: 0px 30px 0px;
    padding: 84px 0px;
    background: #22212185;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
}
.topbar-social-item {
    text-align: right;
}
.topbar-social-item.style-two h4 {
    margin-bottom: 20px;
}
.topbar-social-item h4 {
    color: var(--white-color-white, #FFF);
    font-size: 17px;
    font-weight: 700;
    line-height: 28px;
    margin-top: 0;
    display: inline-block;
    margin-right: 12px;
}
.topbar-social-item ul {
    list-style: none;
    display: inline-block;
}
.topbar-social-item.style-two ul li {
    margin-bottom: 5px;
}

.topbar-social-item ul li {
    display: inline-block;
    margin-left: 5px;
}
.topbar-social-item.style-two ul li a i {
    line-height: 24px;
}

.topbar-social-item ul li a i {
    height: 24px;
    width: 24px;
    line-height: 27px;
    display: inline-block;
    background: #FFF;
    text-align: center;
    font-size: 13px;
    border-radius: 50%;
    color: #e2783b;
    position: relative;
    transition: .5s;
    z-index: 1;
}


.hide-on-mobile,#darkmode-button{
    display: none;
}

#changing-text {
  /* color: #a6ff00; */
  color:#f75c35;
  font-weight: 700;
  font-family: "Plus Jakarta Sans", sans-serif;
  border-right: 2px solid #a6ff00; /* blinking cursor */
  padding-right: 5px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 50px;
  /* display: inline-block; */
  animation: blink 0.8s infinite;
  /* height: 140px; */
}

@keyframes blink {
  50% { border-color: transparent; }
}


/* ========== About us section ========== */
.moorfield-fact-sec {
    /* margin: 100px 0; */
    background: #0B2239;
}



/* second section */
.fact-right-sec {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.fact-right-sec::before {
    background: url(../images/icons/fact-pattern1.png);
}
.fact-right-sec::before {
    position: absolute;
    display: block;
    background: var(--wpr-bg-ae158fca-7ec8-4605-bbbf-3454ac7ab3fd);
    content: '';
    width: 535px;
    height: 380px;
    top: 25%;
    right: 17%;
    z-index: -1;
}
.fact-item-counter:first-child {
    position: relative;
    padding: 41px 42px 30px;
    background: #01a2e1;
    border-radius: 15px;
    flex: 0 0 47%;
    background: linear-gradient(to left, #01a2e1 50.1%, #0aacec 50%) right !important;
    background-size: 201% !important;
    transition: .5s ease-out !important;
}
.fact-item-counter {
    height: max-content;
}
.fact-item-counter {
    margin: 10px;
}

.fact-item-counter {
    overflow: hidden;
}
.fact-item-counter:first-child::before {
    background: url(../images/icons/fact-pattern1.png);
}
.fact-item-counter:first-child::before {
    animation: 2s ease-in-out forwards zoomIn;
    height: 170px;
    width: 134px;
    z-index: 9;
    top: 0;
    position: absolute;
    right: 6px;
    content: '';
    
}
.fact-item-counter:first-child .fact-counter-img, .fact-item-counter:nth-of-type(4) .fact-counter-img {
    margin-bottom: 27px;
}
.fact-item-counter:first-child .fact-counter-img {
    background-color: #0aacec;
}
.fact-counter-img {
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
    width: 98px;
    height: 98px;
    border-radius: 100px;
}
.fact-counter-img img, .news-item-img img, .service-item-wrap img, .spec-image img {
    overflow: hidden;
    transition: .5s all ease-in-out;
    filter: brightness(0) saturate(100%) invert(100%);
}
.fact-item-counter:first-child:hover, .fact-item-counter:nth-of-type(2):hover, .fact-item-counter:nth-of-type(3):hover, .fact-item-counter:nth-of-type(4):hover {
    background-position: left !important;
}
.fact-item-counter:hover .fact-counter-img img, .news-item-img:hover img, .service-item-wrap:hover img, .spec-list-item:hover .spec-image img {
    transform: scale(1.1);
    transition: .5s all ease-in-out;
}
@media (min-width: 1600px) {
    .fact-counter-cotent h4 {
        font-size: 40px;
    }
}

.fact-counter-cotent h4 {
    font-size: 47px;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #fff;
    font-weight: 600;
}
.fact-counter-cotent label {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #fff;
    font-size: 23px;
    text-transform: capitalize;
}

label {
    display: inline-block;
}
@media (min-width: 768px) {
    .fact-item-counter:nth-of-type(2) {
        position: relative;
        margin-top: 107px;
        margin-right: 50px;
    }
}
.fact-item-counter:nth-of-type(2) {
    background: linear-gradient(to left, #01677f 50.1%, #057792 50%) right !important;
    background-size: 201% !important;
    transition: .5s ease-out !important;
    border-radius: 15px;
    padding: 19px 28px 26px;
    flex: 0 0 34%;
}
.fact-item-counter:nth-of-type(2) .fact-counter-img, .fact-item-counter:nth-of-type(3) .fact-counter-img {
    margin-bottom: 21px;
}
.fact-item-counter:nth-of-type(2) .fact-counter-img {
    background-color: #057792;
    width: 70px;
    height: 70px;
}
.fact-item-counter:nth-of-type(2) .fact-counter-cotent, .fact-item-counter:nth-of-type(3) .fact-counter-cotent {
    max-width: 240px;
}

.fact-item-counter:nth-of-type(3)
 {
    background: linear-gradient(to left, #1d5da5 50.1%, #487cb6 50%) right !important;
    background-size: 201% !important;
    transition: .5s ease-out !important;
    border-radius: 15px;
    padding: 19px 28px 26px;
    flex: 0 0 34%;
    margin-left: 40px;
}
.fact-item-counter:nth-of-type(3) .fact-counter-img {
    background-color: #487cb6;
    width: 70px;
    height: 70px;
}
.fact-counter-img {
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
    width: 98px;
    height: 98px;
    border-radius: 100px;
}

.fact-item-counter:nth-of-type(4) {
    background: linear-gradient(to left, #283385 50.1%, #303ea6 50%) right !important;
    background-size: 201% !important;
    transition: .5s ease-out !important;
    position: relative;
    padding: 41px 42px 30px;
    border-radius: 15px;
    flex: 0 0 49%;
}
.fact-item-counter:nth-of-type(4)::before {
    height: 170px;
    width: 134px;
    z-index: 9;
    top: 0;
    position: absolute;
    right: 6px;
    content: '';
    background: url(../images/icons/fact-pattern1.png);
    filter: invert(55%) sepia(66%) saturate(613%) hue-rotate(338deg) brightness(98%) contrast(96%);
}
.fact-item-counter:nth-of-type(4) .fact-counter-img {
    background-color: #303ea6;
}
.fact-left-sec {
    padding-right: 20px;
    max-width: 503px;
}
.fact-left-content h2 {
    font-family:"Plus Jakarta Sans", sans-serif;
    color: #d3d3d3;
    font-size: 35px;
    font-weight: 700;
    line-height: 61px;
    margin-bottom: 8px;
}
.fact-desc {
    color: #d3d3d3;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 30px;
    text-align: justify;
}
.fact-feature-list {
    margin-top: 42px;
}
.fact-feature-item {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}
.feature-img {
    border-radius: 100px;
    background-color: #021626;
    height: 48px;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 48px;
}
.feature-content {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 27px;
    color: #d1d1d1;
    margin-left: 12px;
}
.fact-btn .btn-default {
    padding: 16px 32px;
}
.fact-btn .btn-default {
    font-size: 16px;
}

.btn-default {
    text-decoration: none;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--secondary_color);
    background-color: #d7552e  !important;
    border-radius: 6px;
    color: #000 !important;
    padding: 9px 16px;
}
.btn-default, .req-appointment-btn .btn {
    display: block;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    width: max-content;
}
.choose-shape img:nth-child(1) {
    top: 0;
    right: 0;
}
.choose-shape img:nth-child(2) {
    bottom: 0;
    right: 0;
}
.choose-shape img:nth-child(3) {
    bottom: 0;
    left: 0;
}
.choose-shape img {
    position: absolute;
    z-index: 0;
}

/* ========== About us section End ========== */


/* ========== Departments section start */

.bg-2 {
    background: #f4f7fc;
}
.services-section {
    background: #FFF9F2;
    position: relative;
    overflow: hidden;
}
.container.max-1450 {
    max-width: 1450px;
    margin-left: 20%;
}
.services-section::before {
    animation: 5s infinite forwards ripple;
    content: '';
    width: 353px;
    height: 643px;
    position: absolute;
    top: 23px;
    background: url(../images/icons/contact-image-pattern.png);
    filter: invert(55%) sepia(66%) saturate(613%) hue-rotate(338deg) brightness(98%) contrast(96%);
}
 @keyframes ripple {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.2)
    }
}
.pb-45 {
    padding-bottom: 45px;
}
.pt-75 {
    padding-top: 75px;
}
.pb-65 {
    padding-bottom: 65px;
}
.section-head h5 {
    font-size: 16px;
    font-weight: 600;
    color: #FF3C00;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.section-head h3 {
    text-transform: capitalize;
    font-size: 35px;
    line-height: 1.2;
    margin-bottom: 0;
    font-weight: 700 !important;
}
.section-head .section-head-content p {
    font-size: 18px;
}
.section-head p {
    margin: 20px 0 0;
    font-size: 16px;
}

.section-head p {
    color: #616161;
    /*line-height: 1.5;*/
    padding: 25px 0 0;
    margin: 0;
}
.pb-30 {
    padding-bottom: 30px;
}
.services-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}
.services-thumb img {
    width: 100%;
}
.services-overlay {
    text-align: center;
    padding: 0 35px;
    background: rgb(12 34 56);
    color: #fff;
    position: absolute;
    top: -100%;
    height: 100%;
    transition: .5s;
}
.overlay-content-inner {
    position: relative;
    top: 45%;
    transform: translateY(-50%);
}
.services-overlay .overlay-icon {
    font-size: 60px;
    margin-bottom: 15px;
}
.services-overlay h6 {
    color: #fff;
    font-size: 20px;
}
.overlay-content-inner p {
    margin: 20px 0 30px;
}
.btn-common.services-overlay-btn {
    padding: 11px 0 151px;
}
.btn-common {
    display: inline-block;
}
.btn-common.services-overlay-btn a {
    background: #fff;
    border: none;
    color: #FF3C00;
}

.btn-common a {
    color: #fff;
    font-size: 17px;
    background: #FF3C00;
    padding: 14px 31px;
    border: 1px solid #FF3C00;
    border-radius: 5px;
    transition: .3s;
    text-transform: capitalize;
}
.services-bottom-content {
    background: #333;
    /* position: absolute; */
    bottom: 0;
    width: 100%;
    transition: .1s;
}
.services-bottom-icon {
    height: 70px;
    width: 70px;
    background: #FF3C00;
    text-align: center;
    line-height: 70px;
}
.services-bottom-icon i {
    font-size: 35px;
    color: #fff;
}
.services-bottom-title
 {
    margin-left: 20px;
}
.services-bottom-content h6 {
    color: #fff;
    margin: 0;
    font-size: 20px;
}
.services-thumb:hover .services-overlay {
    position: absolute;
    top: 0 !important;
}
.services-bottom-icon img{
    filter: brightness(0) invert(1);
    max-width: 40px;
}
.h-340{
    min-height: 340px;
    object-fit: cover;
}
/* ========== Departments section End */

/* ===========Facilities Section Start */
figure.snip1256 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  background-color: #0c2238;
  height: 255px;
  width: 255px;
  color: #ffffff;
  text-align: left;
  border-radius: 50%;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 0px 0px 0px;
}
.heading-section h2 {
    font-size: 35px;
    font-weight: 700;
}
figure.snip1256 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  position : relative;
}
figure.snip1256:hover:before{
    left: 0;
    right: 0;
}
figure.snip1256:before{
    content: "";
    background: #f25f36;
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    top: 0;
    transition: all 0.5s ease 0s;
}
figure.snip1256:hover img{ opacity: 0.3; }
figure.snip1256 img {
  opacity: 1;
  width: 100%;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
figure.snip1256 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% -50%;
  -ms-transform-origin: 50% -50%;
  transform-origin: 50% -50%;
  z-index: 1;
  opacity: 0;
  padding: 113px 30px;
}
figure.snip1256 h3,
figure.snip1256 p {
  line-height: 1.5em;
}
figure.snip1256 h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}
figure.snip1256 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}
figure.snip1256 .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
figure.snip1256 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}
figure.snip1256:hover img,
figure.snip1256.hover img {
  /*-webkit-transform: rotateX(90deg);*/
  /*transform: rotateX(90deg);*/
  /*opacity: 0;*/
}
figure.snip1256:hover figcaption,
figure.snip1256.hover figcaption {
  /*-webkit-transform: rotateX(0deg);*/
  /*transform: rotateX(0deg);*/
  /*opacity: 1;*/
  /*-webkit-transition-delay: 0.2s;*/
  /*transition-delay: 0.2s;*/
}
figcaption i{
  text-align: center;
  font-size: 40px;
}
section.services {
    background: #fff9f3;
}
/* ===========Facilities Section End */

div#services {
    background: #0B2239;
}
div#services h3,.icon-box p, .spec-p {
    color: #d3d3d3 !important;
    font-weight: 400;
}

/* ======= Fixed Call */
.fixedcall {
    position: fixed;
    top: 50%;
    left: -165px;
    width: 200px;
    height: auto;
    background: #0d2237;
    border-radius: 0 10px 10px 0;
    z-index: 999;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.fixedcall:hover {
    left: 0;
}

.fixedcall .fixedcallL {
    width: 35px;
    height: auto;
    background: #da5434;
    float: right;
    position: relative;
    border-radius: 0 10px 10px 0;
}

.fixedcall .fixedcallL:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    right: 0;
    z-index: -1;
    border-radius: 0 10px 10px 0;
    -webkit-box-shadow: 0 0 0 0 rgba(252, 59, 52, .45);
    -moz-box-shadow: 0 0 0 0 rgba(252, 59, 52, .45);
    box-shadow: 0 0 0 0 rgba(252, 59, 52, .45);
    -webkit-animation: bxa 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: bxa 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: bxa 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: bxa 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

.fixedcall:hover .fixedcallL:after {
    display: none;
}

.fixedcall .fixedcallL i {
    font-size: 19px;
    text-align: center;
    line-height: 35px;
    margin: 0;
    letter-spacing: 0;
    padding: 9px 0;
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    text-orientation: upright;
    writing-mode: vertical-rl;
}

.fixedcall .fixedcallR {
    width: 165px;
    float: left;
}

.fixedcall .fixedcallR ul {
    margin: 0;
    padding: 0;
}

.fixedcall .fixedcallR ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fixedcall .fixedcallR ul li a {
    font-size: 13px;
    text-align: left;
    font-weight: 400;
    line-height: 23px;
    margin: 0;
    letter-spacing: .4px;
    padding: 10px 12px;
    color: #ffffff;
    display: block;
    border-bottom: 1px dashed #9f95ef;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

.fixedcall .fixedcallR ul li a span {
    font-size: 12px;
    float: right;
    margin: 0 10px 0 0;
}

.fixedcall .fixedcallR ul li a:hover {
    background: #dd5339;
    color: #fff;
}

.fixedcall .fixedcallR ul li a svg {
    margin: 0 3px 0 0;
}

.fixedcall .fixedcallR ul li:last-child a {
    border-bottom: 0px solid #3acece;
}
.svg-inline--fa.fa-w-12 {
    width: .75em;
}
@-webkit-keyframes bxa {
    to {
        -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
        -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    }
}


/* ======= Fixed Call */


/* Features ================== */


.benifits-block:hover .image-circle {
    background: var(--gradient-bg);
    transform: rotateY(360deg);
}
.benifits .benifits-block {
    padding: 33px 24px 34px 60px;
    margin-left: 12%;
    background: #db5e42;
    border-radius: 20px;
    position: relative;
    
}
.benifits .benifits-block h5{
    font-size: 18px;
    margin-left: 5px;
}
.mb-4p {
    margin-bottom: 4px;
}
.white {
    color: #FFF !important;
}
.benifits .benifits-block .image-circle {
    padding: 18px;
    border-radius: 5000px;
    background: rgb(223 223 223);
    box-shadow: 0px 0px 5px 0px rgba(0, 22, 86, 0.08);
    backdrop-filter: blur(25px);
    display: inline-flex;
    position: absolute;
    left: -9%;
    top: 50%;
    transform: translatey(-50%);
}
.image-circle img {
    max-width: 50px;
    transition: 1s;
    filter: brightness(0) saturate(100%) invert(11%) sepia(15%) saturate(1460%) hue-rotate(236deg) brightness(94%) contrast(97%);
}

.features{
    background: #f4f7fc;
}
.ml-12{
    margin-left: 4%;
}

/* Enhanced Hover Effects */



/* 2. Image circle hover - your existing effect plus scale */
.benifits-block:hover .image-circle {
    background: linear-gradient(135deg, #0c2238 0%, #1a3a5c 100%);
    transform: translatey(-50%) rotateY(360deg) scale(1.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    
}

/* 3. Image brightness change on hover */
.benifits-block:hover .image-circle img {
    filter: brightness(1) saturate(100%) invert(100%);
    transform: scale(1.1);
}

/* 4. Text effects on hover */
.benifits-block:hover h5 {
    /* color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateX(5px); */
}

/* 5. Pulse animation for image circle */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.benifits-block:hover .image-circle {
    animation: pulse 2s infinite;
}

/* 6. Subtle border glow */
.benifits-block:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* 7. Smooth stagger effect for multiple blocks */
.benifits-block {
    transition-delay: 0s;
}

.benifits-block:nth-child(1) { transition-delay: 0.05s; }
.benifits-block:nth-child(2) { transition-delay: 0.1s; }
.benifits-block:nth-child(3) { transition-delay: 0.15s; }
.benifits-block:nth-child(4) { transition-delay: 0.2s; }

/* Alternative: Slide-in text effect */
.benifits-block .slide-text {
    transform: translateX(-10px);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.benifits-block:hover .slide-text {
    transform: translateX(0);
    opacity: 1;
}


/* ================================================= */





/* ========= Vision mission ========== */
/* =============================================
    Slogan Style2 Area style
=============================================
***/ 
.slogan-style2-area{
    position: relative;
    display: block;
    overflow: hidden;
}
.slogan-style2-area .icon-holder {
    position: absolute;
    left: 0;
    top: -140px;
    right: 0;
    text-align: center;
    z-index: 10;
}
.slogan-style2-area .outer-container{
    position: relative;
    display: block;    
}
.slogan-style2-area .row {
    margin-left: -5px;
    margin-right: -5px;
}
.slogan-style2-area .row [class*=col-] {
    padding-left: 5px;
    padding-right: 5px;
}

.slogan-single-box{
    position: relative;
    display: block;
    margin-bottom: 10px;
}
.slogan-single-box .img-holder{
    position: relative;
    display: block;
}
.slogan-single-box .img-holder .inner{
    position: relative;
    display: block;
    overflow: hidden;
}
.slogan-single-box .img-holder .inner:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(244 96 51 / 75%);
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    z-index: 1;
}
.slogan-single-box .img-holder .inner.gray-bg:before{
    background-color:rgb(13 34 55 / 80%);    
}
.slogan-single-box .img-holder .inner img{
    width: 100%;
}

.slogan-single-box .img-holder .overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    z-index: 2;
}
.slogan-single-box .img-holder .overlay-content h2 {
    color: #ffffff;
    font-size: 35px;
    line-height: 50px;
    font-weight: 700;
}
.btns-box{
    position: relative;
    display: block;
    padding-top: 0px;
    margin-top: 20px;
}
.btns-box a.btn-one {
    color: #ffffff;
    font-size: 14px;
    line-height: 47px;
    font-weight: 600;
}
.btns-box a.btn-one i.round {
    width: 40px;
    height: 40px;
}
.btns-box a.btn-one.gray{
    background-color: #353742;    
}

.slogan-style2-area {
    position: relative;
    display: block;
    overflow: hidden;
}

.btn-one {
    position: relative;
    display: inline-block;
    padding-left: 30px;
    padding-right: 10px;
    background-color: #f15f36;
    color: #ffffff;
    font-size: 16px;
    line-height: 70px;
    font-weight: 600;
    text-transform: capitalize;
    border-radius: 40px;
    font-family: 'Inter', sans-serif;
    -webkit-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;    
}
.btn-one:after{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #28384b;
    content: "";
    border-radius: 40px;
    transform: scaleX(0.0) rotateX(0deg);
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;    
}
.btn-one.gray:after{
 
    background: #f8856b;
     
}
.btn-one:hover:after{
    transform: scaleX(1.0) rotateX(0deg);
    -webkit-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;    
}
.btn-one .txt {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
}
.btn-one i.round {
    position: relative;
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 16px;
    color: #f8856b;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;  
}
.btn-one:hover i.round{
    color: #ffffff;
    margin-left: 25px;
    transform: rotate(360deg);
    background: #324355;
}
.btn-one:hover,
.btn-one:focus{
    color: #f7f7f7;
}


.btn-one.style2{
    line-height: 50px;
}
.btn-one.style2 i.round{
    width: 30px;
    height: 30px;
    margin-left: 10px;
}
.btn-one.style2:hover i.round{
    margin-left: 15px;    
}
.box {
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgb(201, 201, 201);
    max-width: 500px;
    color: white;
    font-weight: 400;
    font-size: 17px;
}
.box:hover {
    background: #2c2c2c7d;
}
/* ========= Vision mission ========== */



/* =========== Team Section Start ========== */

/*--------------------------------------------------------------
# Doctors Section
--------------------------------------------------------------*/
.doctors .team-member {
  /* background-color: var(--surface-color); */
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  border-radius: 5px;
  transition: 0.5s;
  padding: 30px;
  height: 100%;
}
.doctors{
    position: relative;
}
section#doctors h2 {
    font-size: 35px;
    font-weight: 700;
}
@media (max-width: 468px) {
  .doctors .team-member {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
  }
}

.doctors .team-member .pic {
  overflow: hidden;
  width: 150px;
  border-radius: 50%;
  flex-shrink: 0;
}

.doctors .team-member .pic img {
  transition: ease-in-out 0.3s;
}

.doctors .team-member:hover {
  transform: translateY(-10px);
}

.doctors .team-member .member-info {
  padding-left: 30px;
}

@media (max-width: 468px) {
  .doctors .team-member .member-info {
    padding: 30px 0 0 0;
    text-align: center;
  }
}

.doctors .team-member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
}

.doctors .team-member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.doctors .team-member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: #ff383845;
  bottom: 0;
  left: 0;
}

@media (max-width: 468px) {
  .doctors .team-member span::after {
    left: calc(50% - 25px);
  }
}

.doctors .team-member p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.doctors .team-member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
}

@media (max-width: 468px) {
  .doctors .team-member .social {
    justify-content: center;
  }
}

.doctors .team-member .social a {
  background: color-mix(in srgb, var(--default-color), transparent 94%);
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 36px;
  height: 36px;
}

.doctors .team-member .social a i {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  margin: 0 2px;
}

.doctors .team-member .social a:hover {
  background: var(--accent-color);
}

.doctors .team-member .social a:hover i {
  color: var(--contrast-color);
}

.doctors .team-member .social a+a {
  margin-left: 8px;
}
.doctors:before {
    position: absolute;
    content: '';
    width: 260px;
    height: 300px;
    margin: 0;
    padding: 0;
    top: -1%;
    left: 0;
    opacity: .2;
    background: url(../images/squint-img.jpg) no-repeat;
    background-size: 100% auto;
    /*z-index: 1;*/
}
/* =========== Team Section Start ========== */


/* ============= Header under ========= */
.head-hr {
    position: relative;
    width: 104px;
    height: 30px;
    margin: 5px auto 10px auto;
    padding: 0;
    background: url(../images/icons/hr1.png) no-repeat;
    background-size: 100% auto;
    border: none;
    filter: brightness(0) saturate(100%) invert(12%) sepia(20%) saturate(500%) hue-rotate(180deg) brightness(95%) contrast(95%);
}
/* ============= Header under ========= */


/* ======= news & Activities ========= */
.blog-card {
  position: relative;
  margin-bottom: 70px;
  overflow: hidden;
}
.blog-card__grid {
  margin-bottom: 30px;
}
.blog-card__grid:nth-last-child(-n+3) {
  margin-bottom: 0;
}
.blog-card .details-img-author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--pelocis-base, #e2a475);
}
.blog-card__image {
  position: relative;
  overflow: hidden;
}
.blog-card__image--grid {
  border-radius: 30px 30px 30px 0px;
  margin-right: 24px;
  z-index: 2;
  position: relative;
}
@media (max-width: 768px) {
  .blog-card__image--grid {
    max-width: 100%;
  }
}
.blog-card__image img {
  transition: 0.5s;
  background-size: cover;
  width: 100%;
}
.blog-card__image img:nth-child(1) {
  transform: translatex(50%) scalex(2);
  opacity: 0;
  filter: blur(10px);
}
.blog-card__image img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  object-fit: cover;
}
.blog-card__image__link {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--pelocis-black-rgb, 34, 34, 34), 0.5);
  position: absolute;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(-20%);
  transition: opacity 500ms ease, transform 500ms ease;
}
.blog-card__image__link::before, .blog-card__image__link::after {
  content: "";
  width: 32px;
  height: 2px;
  background-color: var(--pelocis-white, #fff);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.blog-card__image__link::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.blog-card:hover .blog-card__image > a {
  opacity: 1;
  transform: translateY(0);
}
.blog-card:hover .blog-card__image img:nth-child(1) {
  transform: translatex(0) scalex(1);
  opacity: 1;
  filter: blur(0);
}
.blog-card:hover .blog-card__image img:nth-child(2) {
  transform: translatex(-50%) scalex(2);
  opacity: 0;
  filter: blur(10px);
}
.blog-card__date {
  width: 77px;
  height: 77px;
  border-radius: 20px;
  background-color: var(--pelocis-white, #fff);
  font-family: var(--pelocis-heading-font, "Solway", serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  transition: all 500ms ease;
  color: var(--pelocis-base, #e2a475);
  padding: 0 20px;
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 10;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  flex-direction: column;
}
.blog-card__date span {
  font-family: var(--pelocis-heading-font, "Solway", serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 3px;
}
.blog-card__date::after {
  content: "";
  border: 1px dotted var(--pelocis-base, #e2a475);
  width: 90%;
  height: 90%;
  border-radius: 20px;
  position: absolute;
  transition: all 500ms ease;
}
.blog-card__content {
  padding: 30px;
  margin-top: -180px;
  padding-top: 206px;
  padding-bottom: 20px;
  position: relative;
  z-index: 1;
  transition: all 500ms ease;
  border: 1px solid var(--pelocis-border-color, #DDDDDD);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .blog-card__content {
    padding-left: 18px;
    padding-right: 18px;
  }
}
.blog-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  margin: 10px 0 11px;
  text-transform: capitalize;
}
.blog-card__title a {
  color: inherit;
  background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
  transition: all 500ms ease;
}
.blog-card__title a:hover {
  background-size: 100% 1px;
}
.blog-card__title a:hover {
  color: var(--pelocis-base, #e2a475);
}
.blog-card__link {
  font-family: var(--pelocis-heading-font, "Solway", serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  color: var(--pelocis-white, #fff);
  margin-top: 25px;
}
.blog-card__link:hover {
  color: var(--pelocis-white, #fff);
}
.blog-card__link--dark {
  color: var(--pelocis-black2, #333333);
  font-family: var(--pelocis-special-font, "Red Hat Text", sans-serif);
  text-transform: capitalize;
}
.blog-card__link--dark:hover {
  color: var(--pelocis-base, #e2a475);
}
.blog-card__link i {
  font-size: 16px;
  margin-left: 9px;
  color: var(--pelocis-base, #e2a475);
}
.blog-card__link span {
  background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
  transition: all 500ms ease;
}
.blog-card__link span:hover {
  background-size: 100% 1px;
}
.blog-card__link-2 {
  padding: 10px 40.5px;
  margin-top: 25px;
}
.blog-card__link-2 i {
  font-size: 16px;
  margin-left: 9px;
}
.blog-card__text {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--pelocis-text-dark, #636363);
  margin-bottom: 6px;
}
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  margin-bottom: 10px;
}
.blog-card__meta--tag {
  background-color: var(--pelocis-base, #e2a475);
  color: var(--pelocis-white, #fff) !important;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  text-transform: uppercase;
  padding: 4px 33px;
  border-radius: 40px;
}
.blog-card__meta li {
  color: var(--pelocis-text-dark, #636363);
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  display: flex;
  align-items: center;
}
.blog-card__meta li i {
  color: var(--pelocis-black2, #333333);
  margin-right: 8px;
  transition: all 500ms ease;
}
.blog-card__meta li a {
  display: flex;
  align-items: center;
  color: inherit;
  transition: all 500ms ease;
}
.blog-card__meta li a:hover {
  color: var(--pelocis-base, #e2a475);
}
.blog-card__meta li a:hover i {
  color: var(--pelocis-base, #e2a475);
}
.blog-card__shape {
  width: 82px;
  height: 82px;
  background-color: var(--pelocis-base, #e2a475);
  border-radius: 50%;
  position: absolute;
  bottom: -90px;
  right: -80px;
  opacity: 0;
  visibility: hidden;
  z-index: 11;
  transition: all 500ms ease;
}
.blog-card:hover .blog-card__content {
  background-color: var(--pelocis-gray, #F5F2EF);
  border-color: var(--pelocis-gray, #F5F2EF);
}
.blog-card:hover .blog-card__shape {
  bottom: -38px;
  right: -31px;
  visibility: visible;
  opacity: 1;
}
.blog-card:hover .blog-card__date {
  background-color: var(--pelocis-base, #e2a475);
  color: var(--pelocis-white, #fff);
}
.blog-card:hover .blog-card__date::after {
  border-color: var(--pelocis-white, #fff);
}

.blog-one {
    padding: 50px 0 80px;
    background-color: #fff9f3;
}
@media (max-width: 767px) {
  .blog-one {
    padding: 80px 0;
  }
}
.blog-one__title {
  position: relative;
}
.blog-one__title__shape {
  position: absolute;
  top: -20px;
  right: 30%;
}
@media (max-width: 991px) {
  .blog-one__title__shape {
    position: absolute;
    right: 20%;
  }
}
@media (max-width: 650px) {
  .blog-one__title__shape {
    position: absolute;
    top: -11px;
    right: 10%;
    width: 40px;
  }
}
.blog-one--page {
  padding: 120px 0;
  position: relative;
}
@media (max-width: 767px) {
  .blog-one--page {
    padding: 80px 0;
  }
}
.blog-one--home {
  padding-top: 0px;
}
.blog-one--home .sec-title {
  text-align: center;
}
@media (min-width: 992px) {
  .blog-one__carousel .owl-nav {
    display: none;
  }
}

/* ======= news & Activities ========= */





/* whatsapp icon */
.go-top-area {
  position: relative;
  z-index: 999;
}
.go-top-wrap {
  position: relative;
}
.go-top-area .go-top.active {
  top: 92%;
  -webkit-transform: translateY(-98%);
  -moz-transform: translateY(-98%);
  -ms-transform: translateY(-98%);
  -o-transform: translateY(-98%);
  transform: translateY(-98%);
  opacity: 1;
  visibility: visible;
  border-radius: 10px;
  right: 20px;
}

.go-top-wrap .go-top-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  top: 3px;
  z-index: 1;
  background: #1c6e48;
  border-radius: 10px;
}
.go-top-area .go-top {
  position: fixed;
  cursor: pointer;
  top: 0;
  right: 24px;
  color: #ffffff;
  background-color: #00c255;
  z-index: 9999;
  width: 40px;
  text-align: center;
  height: 42px;
  line-height: 42px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  -ms-transition: all 0.9s ease-out 0s;
  -o-transition: all 0.9s ease-out 0s;
  transition: all 0.9s ease-out 0s;
  border-radius: 10px;
}

.go-top-wrap .go-top-btn:hover {
  background-color: #1d1729;
  color: #fff;
}
.go-top-area .go-top:focus::before,
.go-top-area .go-top:hover::before {
  opacity: 1;
  visibility: visible;
}
.go-top-area .go-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #1c6e48;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
  border-radius: 10px;
}
.go-top-wrap .go-top-btn::after {
  z-index: -1;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  -webkit-animation: ripple1 1.6s ease-out infinite;
  -moz-animation: ripple1 1.6s ease-out infinite;
  -o-animation: ripple1 1.6s ease-out infinite;
  animation: ripple1 1.6s ease-out infinite;
  opacity: 0;
  background: #00c255;
  border-radius: 10px;
}
@keyframes ripple1 {
  0%,
  35% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
.go-top-area .go-top:focus i:first-child, .go-top-area .go-top:hover i:first-child {
    opacity: 0;
    top: 0;
    visibility: hidden;
}
.go-top-wrap .go-top-btn i {
    font-size: 20px;
    font-weight: 700;
    padding-left: 4px;
    color: #fff;
}
.go-top-area .go-top i {
    position: absolute;
    top: 50%;
    left: -4px;
    right: 0;
    margin: 0 auto;
    font-size: 15px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}
.go-top-area .go-top:focus i:last-child, .go-top-area .go-top:hover i:last-child {
    opacity: 1;
    visibility: visible;
    top: 50%;
}
.go-top-area .go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%;
}
.go-top-wrap .go-top-btn i {
    font-size: 20px;
    font-weight: 700;
    padding-left: 4px;
    color: #fff;
}
.go-top-area .go-top i {
    position: absolute;
    top: 50%;
    left: -4px;
    right: 0;
    margin: 0 auto;
    font-size: 15px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}
.go-top.go-top-btn.active.two {
    top: 82%;
}



/* Breadcrumps start */
.dark-background {
    --background-color: #0f0d07;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #2e2b28;
    --contrast-color: #ffffff;
}
.page-title {
    color: var(--default-color);
    /* background-color: var(--background-color); */
    background: linear-gradient(rgb(2 2 2 / 79%), rgb(0 0 0 / 73%)), url(../images/innerbanner.jpg) fixed center center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 160px 0 80px 0;
    text-align: center;
    position: relative;
}

.page-title h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
}
.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}
.page-title .breadcrumbs ol a {
    color: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}
.page-title .breadcrumbs ol li+li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}
.page-title .breadcrumbs ol li+li {
    padding-left: 10px;
}
section.team-area.inner {
    background: linear-gradient(rgb(2 2 2 / 94%), rgb(0 0 0)), url(../images/light.jpg) !important;
}



/*--------------------------------------------------------------
# Contact Section

--------------------------------------------------------------*/
:root {
    --background-color: #10263c;
    --default-color: #e8e7f7;
    --heading-color: #ffffff;
    --accent-color: #dd5339;
    --surface-color: #11273d;
    --contrast-color: #ffffff;
}

.contact {
  background: url(../images/demo-bg.jpg);
}

.contact .contact-form-card {
  background: var(--surface-color);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
  position: relative;
  overflow: hidden;
}

.contact .contact-form-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #6366f1 30%));
}

.contact .contact-form-card .form-header {
  text-align: center;
  margin-bottom: 35px;
}

.contact .contact-form-card .form-header .header-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #6366f1 30%));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.contact .contact-form-card .form-header .header-icon i {
  font-size: 28px;
  color: var(--contrast-color);
}

.contact .contact-form-card .form-header h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--heading-color);
}

.contact .contact-form-card .form-header p {
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 0;
}

.contact .contact-form-card .php-email-form .form-control {
  height: 52px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 88%);
  background-color: color-mix(in srgb, var(--surface-color), var(--background-color) 30%);
  color: var(--default-color);
  font-size: 15px;
  transition: all 0.3s ease;
}

.contact .contact-form-card .php-email-form .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 90%);
  background-color: var(--surface-color);
  outline: none;
}

.contact .contact-form-card .php-email-form .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-weight: 400;
}

.contact .contact-form-card .php-email-form textarea.form-control {
  height: 100px;
  resize: vertical;
  font-family: inherit;
}

.contact .contact-form-card .php-email-form .submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #6366f1 30%));
  color: var(--contrast-color);
  border: none;
  padding: 16px 30px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contact .contact-form-card .php-email-form .submit-btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--contrast-color), transparent 85%), transparent);
  transition: left 0.6s ease;
}

.contact .contact-form-card .php-email-form .submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--accent-color), transparent 75%);
}

.contact .contact-form-card .php-email-form .submit-btn:hover:before {
  left: 100%;
}

.contact .contact-form-card .php-email-form .submit-btn:hover i {
  transform: translateX(3px);
}

.contact .contact-form-card .php-email-form .submit-btn span,
.contact .contact-form-card .php-email-form .submit-btn i {
  position: relative;
  z-index: 1;
}

.contact .contact-form-card .php-email-form .submit-btn i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.contact .contact-info-area {
  padding-left: 40px;
}

.contact .contact-info-area .info-header {
  margin-bottom: 40px;
}

.contact .contact-info-area .info-header h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--heading-color);
  line-height: 1.2;
}

.contact .contact-info-area .info-header p {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 0;
}

.contact .contact-info-area .contact-methods {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.contact .contact-info-area .method-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--surface-color);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 92%);
  transition: all 0.3s ease;
}

.contact .contact-info-area .method-card:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent-color), transparent 88%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.contact .contact-info-area .method-card:hover .card-icon {
  background: var(--accent-color);
}

.contact .contact-info-area .method-card:hover .card-icon i {
  color: var(--contrast-color);
}

.contact .contact-info-area .method-card .card-icon {
  width: 50px;
  height: 50px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.contact .contact-info-area .method-card .card-icon i {
  font-size: 20px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.contact .contact-info-area .method-card .card-content {
  flex: 1;
}

.contact .contact-info-area .method-card .card-content h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--heading-color);
}

.contact .contact-info-area .method-card .card-content p {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--default-color);
}

.contact .contact-info-area .method-card .card-content .response-time {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.contact .contact-info-area .additional-info .info-stats {
  display: flex;
  gap: 30px;
  padding: 30px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 96%), color-mix(in srgb, var(--accent-color), transparent 92%));
  border-radius: 20px;
  margin-bottom: 30px;
}

.contact .contact-info-area .additional-info .info-stats .stat-item {
  text-align: center;
}

.contact .contact-info-area .additional-info .info-stats .stat-item .stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 4px;
}

.contact .contact-info-area .additional-info .info-stats .stat-item .stat-label {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 500;
}

.contact .contact-info-area .additional-info .social-connect {
  text-align: center;
}

.contact .contact-info-area .additional-info .social-connect h6 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--heading-color);
}

.contact .contact-info-area .additional-info .social-connect .social-links {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.contact .contact-info-area .additional-info .social-connect .social-links .social-link {
  width: 40px;
  height: 40px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact .contact-info-area .additional-info .social-connect .social-links .social-link:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.contact .contact-info-area .additional-info .social-connect .social-links .social-link i {
  font-size: 16px;
}

@media (max-width: 992px) {
  .contact .contact-info-area {
    padding-left: 0;
    margin-top: 40px;
  }

  .contact .contact-info-area .info-header h3 {
    font-size: 28px;
  }

  .contact .contact-info-area .additional-info .info-stats {
    gap: 20px;
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .contact .contact-form-card {
    padding: 30px 25px;
  }

  .contact .contact-form-card .form-header h3 {
    font-size: 24px;
  }

  .contact .contact-info-area .info-header h3 {
    font-size: 26px;
  }

  .contact .contact-info-area .method-card {
    padding: 20px;
  }

  .contact .contact-info-area .method-card:hover {
    transform: translateY(-3px);
  }

  .contact .contact-info-area .additional-info .info-stats {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}



/*--------------------------------------------------------------
# Department Details Section
--------------------------------------------------------------*/
.department-details .department-content .department-header {
  margin-bottom: 3rem;
}

.department-details .department-content .department-header .specialty-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  color: var(--contrast-color);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.department-details .department-content .department-header .specialty-tag i {
  font-size: 1.1rem;
}
.department-details .department-content .department-header .department-name {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #132a41;
    margin-bottom: 1.5rem;
}

.department-details .department-content .department-header .department-description {
    font-size: 16px;
    color: #4c4c4c;
    max-width: 85%;
}

.department-details .department-content .service-highlights {
  margin-bottom: 3rem;
}

.department-details .department-content .service-highlights h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #8e9195;
    margin-bottom: 2rem;
}

.department-details .department-content .service-highlights .highlights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem;
  /*background-color: var(--surface-color);*/
  background-color: #153250f5;
  border-radius: 12px;
  border-left: 4px solid var(--accent-color);
  transition: all 0.3s ease;
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card:hover {
  transform: translateX(5px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--default-color), transparent 90%);
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card .highlight-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 15%));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card .highlight-icon i {
  font-size: 1.3rem;
  color: var(--contrast-color);
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card p {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
  line-height: 1.6;
}

.department-details .department-content .cta-section {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.department-details .department-content .cta-section .btn-appointment {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 15%));
  color: var(--contrast-color);
  padding: 1.2rem 2.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.department-details .department-content .cta-section .btn-appointment:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 60%);
  color: var(--contrast-color);
}

.department-details .department-content .cta-section .btn-appointment i {
  font-size: 1.1rem;
}

.department-details .department-content .cta-section .contact-quick {
  display: flex;
  flex-direction: column;
}

.department-details .department-content .cta-section .contact-quick .contact-label {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.department-details .department-content .cta-section .contact-quick .contact-number {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .department-details .department-content .department-header .department-name {
    font-size: 2.2rem;
  }

  .department-details .department-content .department-header .department-description {
    max-width: 100%;
  }

  .department-details .department-content .cta-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

.department-details .visual-section .main-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
}

.department-details .visual-section .main-visual .department-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.department-details .visual-section .main-visual .stats-overlay {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background-color: var(--surface-color);
  padding: 1.5rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 80%);
  backdrop-filter: blur(10px);
}

.department-details .visual-section .main-visual .stats-overlay .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.department-details .visual-section .main-visual .stats-overlay .stat-item:not(:last-child) {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.department-details .visual-section .main-visual .stats-overlay .stat-item .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.department-details .visual-section .main-visual .stats-overlay .stat-item .stat-label {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 991px) {
  .department-details .visual-section {
    margin-top: 3rem;
  }

  .department-details .visual-section .main-visual .department-image {
    height: 400px;
  }

  .department-details .visual-section .main-visual .stats-overlay {
    top: 1rem;
    right: 1rem;
    padding: 1rem;
  }
}

.department-details .department-details {
  margin-top: 6rem;
  padding-top: 4rem;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.department-details .department-details .details-content h3 {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.department-details .department-details .details-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 2.5rem;
}

.department-details .department-details .details-content .care-features .feature-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.department-details .department-details .details-content .care-features .feature-row i {
  color: var(--accent-color);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.department-details .department-details .details-content .care-features .feature-row span {
  font-size: 1rem;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  line-height: 1.6;
}

.department-details .department-details .info-sidebar .info-card {
  background-color: var(--surface-color);
  padding: 2rem;
  border-radius: 15px;
  margin-bottom: 2rem;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 95%);
}

.department-details .department-details .info-sidebar .info-card h4 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent-color);
}

.department-details .department-details .info-sidebar .info-card .hours-list .hours-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
}

.department-details .department-details .info-sidebar .info-card .hours-list .hours-item:last-child {
  border-bottom: none;
}

.department-details .department-details .info-sidebar .info-card .hours-list .hours-item span:first-child {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-weight: 500;
}

.department-details .department-details .info-sidebar .info-card .hours-list .hours-item span:last-child {
  color: var(--default-color);
  font-weight: 600;
}

.department-details .department-details .info-sidebar .info-card .quick-links a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  text-decoration: none;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
  transition: all 0.3s ease;
}

.department-details .department-details .info-sidebar .info-card .quick-links a:last-child {
  border-bottom: none;
}

.department-details .department-details .info-sidebar .info-card .quick-links a:hover {
  color: var(--accent-color);
  transform: translateX(5px);
}

.department-details .department-details .info-sidebar .info-card .quick-links a:hover i {
  transform: translateX(3px);
}

.department-details .department-details .info-sidebar .info-card .quick-links a i {
  color: var(--accent-color);
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.department-details .department-details .info-sidebar .info-card .quick-links a span {
  font-weight: 500;
}

@media (max-width: 991px) {
  .department-details .department-details .info-sidebar {
    margin-top: 3rem;
  }
}

@media (max-width: 768px) {
  .department-details .department-details .details-content h3 {
    font-size: 1.8rem;
  }
}



/*==============*/
.inner-box {
    box-shadow: 2px 3px 10px -2px rgba(0, 0, 0, .1);
    border-bottom: 2px solid #f45e3d;
    border-top: 2px solid #f45e3d;
    border-radius: 10px;
    background: url(../images/icons/coming.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px;
}
.inner-box p{
    text-align: justify;
}



/* Appointments */


.no-right-padding {
    padding-right: 0;
}
.no-left-padding {
    padding-left: 0;
}
.welcome-section {
    padding-top: 115px;
}
.other-services {
    padding-top: 80px;
    padding-bottom: 50px;
}
/* + Section Header */
.section-header {
	display: block;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 40px;
}
.section-header > h3 {
	color: #333;
	position: relative;
	display: inline-block;
	border: 2px solid #f1f1f1;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom: none;
	padding: 12px 30px 5px;
	font-family: 'Raleway', sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 30px;
	margin: 0;
	text-transform: uppercase;
	word-wrap: break-word;
}	
.section-header > h3:before,
.section-header > h3:after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 1170px;
	height: 1px;
	background-color: #d1d1d1;
}
.section-header > h3:before {
	right: 100%;
	margin-right: 0;
}
.section-header > h3:after {
	left: 100%;
	margin-left: 0;
}
/* - Welcome Section */
.welcome-section {
	padding-top: 115px;
}
.welcome-section.other-services .welcome-left {
	/* display: inline-block; */
	width: 100%;
}
.welcome-section .clinic-form {
	padding-left: 0;
}
.clinic-form .date {
	position: relative;
}
.clinic-form .date .fa-angle-down {
	position: absolute;
	right: 8px;
	z-index: 14;
	top: 12px;
}
.clinic-form .date .fa-angle-down::before {
	content: "\f0d7";
	color: #aaaaaa;
}
.clinic-form .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
	width: 100%;
}
.clinic-form .bootstrap-select > .dropdown-toggle {
	border-radius: 0;
	border: 1px solid #e0e0e0;
	min-height: 38px;
	color: #aaaaaa;
	outline: none;
	-webkit-box-shadow: none;
	-webkit-appearance: none;
	box-shadow: none;
	outline: none !important;
}
.clinic-form .bootstrap-select > .dropdown-toggle .caret {
	border-bottom: none;
	border-top: 4px dashed;
}
.appoinment-form {
	border: 3px solid #f15e38;
	border-radius: 50px;
	display: inline-block;
	padding: 25px;
	width: 100%;
}
.appoinment-form h5 {
	color: #333;
	font-size: 17px;
	line-height: 30px;
	margin-top: 0;
	margin-bottom: 18px;
	text-transform: capitalize;
}
.appoinment-form h5 i {
	color: #f15e38;
	font-size: 20px;
	margin-right: 12px;
}
.appoinment-form .form-group {
	margin-bottom: 20px;
}
.appoinment-form .form-control {
	border: 1px solid #e0e0e0;
	box-shadow: none;
	border-radius: 0;
	border-color: #eee;
	-webkit-box-shadow: none;
	-webkit-appearance: none;
	color: #aaa;
	height: 38px;
	padding: 7px 15px;
}
.appoinment-form textarea.form-control {
	height: 98px;
}
.appoinment-form .input-group[class*="col-"] {
	width: 100%;
}
.appoinment-form  .btn-default.active, 
.appoinment-form  .btn-default:active, 
.appoinment-form  .open > .dropdown-toggle.btn-default {
	border: 1px solid #e0e0e0;
	background-color: transparent;
	color: #aaaaaa;
}
.appoinment-form  .btn-group-vertical > .btn.active, 
.appoinment-form  .btn-group-vertical > .btn:active, 
.appoinment-form  .btn-group-vertical > .btn:focus, 
.appoinment-form  .btn-group-vertical > .btn:hover, 
.appoinment-form  .btn-group > .btn.active, 
.appoinment-form  .btn-group > .btn:active, 
.appoinment-form  .btn-group > .btn:focus, 
.appoinment-form  .btn-group > .btn:hover  {
	background-color: transparent;
	color: #aaaaaa;
}
.appoinment-form .form-group select {
	padding: 6px 10px;
    border-radius: 0;
    border: 1px solid #e0e0e0;
    min-height: 38px;
    color: #aaaaaa;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none !important;
}
/*.appoinment-form .btn-submit {*/
/*	border-radius: 10px;*/
/*	display: inline-block;*/
/*	padding: 10px 18px;*/
/*	color: #fff;*/
/*	text-transform: uppercase;*/
/*	background-color: #f15e38;*/
/*	border: 1px solid #f15e38;*/
/*	box-shadow: none;*/
/*	font-size: 13px;*/
/*	-webkit-transition: all 1s ease 0s;*/
/*	-moz-transition: all 1s ease 0s;*/
/*	-o-transition: all 1s ease 0s;*/
/*	transition: all 1s ease 0s;*/
	
/*}*/

.appoinment-form .btn-submit {
    border-radius: 10px;
    display: inline-block;
    padding: 5px 18px;
    color: #fff;
    text-transform: uppercase;
    background-color: #f15e38;
    border: 1px solid #f15e38;
    box-shadow: none;
    font-size: 13px;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    margin-left: 35px !important;
}

.appoinment-form .btn-submit i {
	padding-right: 10px;
	font-size: 18px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.appoinment-form .btn-submit:hover i {
	-webkit-animation-name: hvr-icon-pulse;
	animation-name: hvr-icon-pulse;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.appoinment-form .alert-msg { 
	margin: 0;
}
/* - Other Services */
.other-services {
	padding-top: 80px;
	padding-bottom: 50px;
}
.other-services .other-services-block {
	border: 1px solid #e3e3e3;
	border-radius: 25px;
	display: inline-block;
	margin-bottom: 30px;
	padding: 32px;
	width: 100%;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
	-o-transition: all 1s ease 0s;
	transition: all 1s ease 0s;
}
.other-services .other-services-content {
	padding-left: 95px;
	top: 0;
}
.other-services .other-services-content h5 {
	color: #333;
	font-family: 'Montserrat Alternates', sans-serif;
	font-size: 18px;
	margin-top: 0;
	padding-bottom: 18px;
	position: relative;
	text-transform: capitalize;
}
.other-services .other-services-content h5::after {
	background-color: #dbdbdb;
	content: "";
	display: inline-block;
	left: 0;
	bottom: 0;
	position: absolute;
	height: 1px;
	width: 30px;
}
.other-services .other-services-content p {
	color: #777;
	line-height: 26px;
	margin-bottom: 0;
}
.other-services .services-block-icon {
	position: absolute;
	width: 70px;
	height: 70px;	
	text-align: center;
	line-height: 70px;
	display: inline-block;
}
.other-services .services-block-icon::after,
.other-services .services-block-icon::before {
	content: "";
	position: absolute;
	border: 1px solid #eff1f2;
	border-radius:5px;
	z-index: 0;
	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
	-o-transition: all 1s ease 0s;
	transition: all 1s ease 0s;
}
.other-services .services-block-icon::after {
	top: 18px;
	left: 0;
	width: 100%;
	height: 35px;
}
.other-services .services-block-icon::before {
	left: 18px;
	height: 100%;
	width: 35px;
	height: 70px;
}
.other-services .services-block-icon i {
	background-color: #fff;
	color: #4c4c4c;
	width: 37px;
	height: 35px;
	font-size: 22px;
	line-height: 37px;
	position: relative;
	display: inline-block;
	z-index: 1;
	top: 5px;
	border-radius: 4px;
	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
	-o-transition: all 1s ease 0s;
	transition: all 1s ease 0s;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.other-services .other-services-block:hover .services-block-icon::after,
.other-services .other-services-block:hover .services-block-icon::before {
	background-color: #f45d38;
	border-color: #f45d38;
}
.other-services .other-services-block:hover .services-block-icon i  {
	background-color: transparent;
	color: #fff;
	-webkit-animation-name: hvr-icon-pulse;
	animation-name: hvr-icon-pulse;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.other-services .other-services-block:hover {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
}

/* ============== Gallery =============*/
/* taking care of responsive layout */
.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5rem;
}

.single-video {
  width: 10rem;
  flex-grow: 1;
  margin: 0.5rem;
}

/* taking care of the video aspect-ratio */
.single-video figure {
  position: relative;
  padding: 0 0 56.25% 0;
}

figure iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

a.head-call {
    color: #f35f36;
}
.icon-call{
 
    color: #d55033;
    background: #ffffffc7;
    padding: 7px 11px;
    border-radius: 100%;

}

.container-1350{
    max-width:1350px;
}