/******************************************************************
  Template Name: Dreams
  Description: Dreams wedding template
  Author: Colorib
  Author URI: https://colorlib.com/
  Version: 1.0
  Created: Colorib
******************************************************************/


/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Services Section
6.  Counter Section
7.  Team Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/


/*----------------------------------------*/


/* Template default CSS
/*----------------------------------------*/

html,
body {
    position: relative;
    height: 100%;
    padding-top: 47px;
    font-family: 'Exo 2', sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

body.overflow_hidden {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #111111;
    font-weight: 400;
    font-family: "Play", sans-serif;
}

h1 {
    font-size: 70px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

p {
    font-size: 16px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 400;
    line-height: 26px;
    margin: 0 0 15px 0;
}

img {
    max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none;
}

a {
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
    /* color: #fff; */
}

ul,
ol {
    padding: 0;
    margin: 0;
}

.bg-primary {
    background-color: #0098da !important;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.ml-1 {
    margin-left: 1rem;
}

.ml-2 {
    margin-left: 2rem;
}

.ml-3 {
    margin-left: 3rem;
}

.mr-1 {
    margin-right: 1rem;
}

.mr-2 {
    margin-right: 2rem;
}

.mr-3 {
    margin-right: 3rem;
}

.btn-primary {
    background-color: #0098da;
}


/*---------------------
  Helper CSS
-----------------------*/

.section-title {
    margin-bottom: 50px;
}

.section-title.center-title {
    text-align: center;
}

.section-title.center-title h2:after {
    right: 0;
    margin: 0 auto;
}

.section-title span {
    color: #ffffff;
    display: block;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.section-title h2 {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 25px;
}

.section-title h2:after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 5px;
    width: 70px;
    background: #0098da;
    content: "";
}

.set-bg {
    width: 100%;
    padding-top: calc(100%*(627/1920));
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

.spad {
    padding-top: 80px;
    padding-bottom: 80px;
}


/* buttons */

.primary-btn {
    display: inline-block;
    font-size: 15px;
    font-family: "Play", sans-serif;
    font-weight: 700;
    padding: 14px 32px 12px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
}

.primary-btn:hover:before {
    height: 100%;
    width: 100%;
}

.primary-btn:hover:after {
    height: 100%;
    width: 100%;
}

.primary-btn:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 30px;
    width: 30px;
    border-left: 2px solid #0098da;
    border-top: 2px solid #0098da;
    content: "";
    z-index: -1;
    -webkit-transition: all, 0.7s;
    -o-transition: all, 0.7s;
    transition: all, 0.7s;
}

.primary-btn:after {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 30px;
    width: 30px;
    border-right: 2px solid #0098da;
    border-bottom: 2px solid #0098da;
    content: "";
    z-index: -1;
    -webkit-transition: all, 0.7s;
    -o-transition: all, 0.7s;
    transition: all, 0.7s;
}

.site-btn {
    font-size: 15px;
    color: #ffffff;
    background: #0098da;
    font-family: "Play", sans-serif;
    font-weight: 700;
    border: none;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 14px 34px 12px;
    width: 100%;
}


/* Preloder */

#preloder {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    background: #000;
}

.loader {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    border-radius: 60px;
    animation: loader 0.8s linear infinite;
    -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}


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

.header {
    background-color: #fff;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 9;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 98;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.header_fixed {
    background-color: #fff;
}

.header__logo {
    padding: 28px 0;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.header__logo a {
    display: block;
    width: 171px;
    transition: all 0.25 ease-in;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.header__logo a img {
    display: block;
    height: 100%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.header__nav__option {
    text-align: right;
    padding: 28px 0px;
    transition: all 0.25 ease-in;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.header_fixed .header__nav__option {
    padding: 10px 0px;
}

.header_fixed .header__logo {
    padding: 10px 0;
}

.header_fixed .header__logo a {
    width: 154px;
}

.header__nav__menu {
    display: inline-block;
    margin-right: 25px;
}

.header__nav__menu ul li {
    list-style: none;
    display: inline-block;
    margin-right: 25px;
    position: relative;
}

.header__nav__menu ul li.active a:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.header__nav__menu>ul li a.hassub {
    padding-right: 10px;
}

.header__nav__menu>ul>li a.hassub::before {
    content: '';
    position: absolute;
    top: 50%;
    top: calc(50% - 3px);
    right: 0;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-top: 3px solid rgba(0, 0, 0, 0.5);
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.header__nav__menu>ul>li:has(> ul) a {
    padding-right: 10px;
}

.header__nav__menu>ul>li:hover a.hassub:before {
    top: calc(50% - 6px);
    transform: rotateX(-180deg);
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
}

.header__nav__menu ul li:hover a:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.header__nav__menu ul li:hover .dropdown {
    top: 34px;
    opacity: 1;
    visibility: visible;
}

.header__nav__menu ul li:last-child {
    margin-right: 0;
}

.header__nav__menu ul li .dropdown {
    position: absolute;
    left: 0;
    top: 60px;
    width: 180px;
    background: #ffffff;
    text-align: left;
    padding: 2px 0;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
}

.header__nav__menu ul li .dropdown li {
    display: block;
    margin-right: 0;
}

.header__nav__menu ul li .dropdown li a {
    font-size: 14px;
    color: #111111;
    padding: 8px 20px;
    text-transform: capitalize;
}

.header__nav__menu ul li .dropdown li a:after {
    display: none;
}

.header__nav__menu ul li a {
    font-size: 15px;
    font-family: "Play", sans-serif;
    color: #0098da;
    display: block;
    text-transform: uppercase;
    position: relative;
    padding: 6px 0;
}

.header__nav__menu ul li a:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #0098da;
    content: "";
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
}

.header__nav__menu ul li .dropdown li:hover a {
    color: #0098da;
}

.header__nav__social {
    display: inline-block;
    position: relative;
    padding-left: 25px;
}

.header__nav__social:before {
    position: absolute;
    left: 0;
    top: 10px;
    height: 13px;
    width: 1px;
    background: rgba(225, 225, 225, 1);
    content: "";
}

.header__nav__social a {
    color: #8b8b8b;
    font-size: 15px;
    margin-right: 18px;
}

.header__nav__social a:last-child {
    margin-right: 0;
}

.header .user-menu {
    position: fixed;
    width: 55px;
    top: 2rem;
    right: 1rem;
    transition: all 0.25s ease-in;
    -webkit-transition: all 0.25s ease-in;
    -moz-transition: all 0.25s ease-in;
    -ms-transition: all 0.25s ease-in;
    -o-transition: all 0.25s ease-in;
    z-index: 9999;
}

.header .user-menu .dropdown-menu {
    position: absolute;
}
.header.header_fixed .user-menu {
    top: 0.5rem;
}


/*---------------------
  Hero
-----------------------*/

.hero__slider.owl-carousel .owl-item .hero__text {
    position: absolute;
    top: 20%;
    left: 15%;
    width: 50%;
    max-width: 600px;
}

.hero__slider.owl-carousel .owl-item.active .hero__text span {
    top: 0;
    opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text h2 {
    top: 0;
    opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text .primary-btn {
    top: 0;
    opacity: 1;
}

.hero__slider.owl-carousel .owl-dots {
    position: absolute;
    left: 15%;
    width: 80%;
    bottom: 45px;
}

.hero__slider.owl-carousel .owl-dots button {
    color: #adadad;
    font-size: 18px;
    font-family: "Play", sans-serif;
    margin-right: 16px;
    position: relative;
    display: inline-block;
}

.hero__slider.owl-carousel .owl-dots button.active {
    color: #ffffff;
}

.hero__slider.owl-carousel .owl-dots button.active:after {
    background: #ffffff;
    height: 2px;
}

.hero__slider.owl-carousel .owl-dots button:after {
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    content: "";
}

.hero__slider.owl-carousel .owl-dots button:last-child {
    margin-right: 0;
}

.hero__text span {
    color: #ffffff;
    display: block;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
    position: relative;
    top: 100px;
    opacity: 0;
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
}

.hero__text h2 {
    color: #ffffff;
    font-size: 60px;
    font-weight: 700;
    line-height: 70px;
    text-transform: uppercase;
    margin-bottom: 38px;
    position: relative;
    top: 100px;
    opacity: 0;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
}

.hero__text .primary-btn {
    position: relative;
    top: 100px;
    opacity: 0;
    -webkit-transition: all, 0.7s;
    -o-transition: all, 0.7s;
    transition: all, 0.7s;
}

.clear {
    clear: both;
}

.ads .container {
    max-width: 100%;
    padding: 0;
}

.ads .item {
    float: left;
}

.ads img {
    display: block;
    width: 100%;
}

.ads .one-one {
    width: 33.333333%;
}

.ads .one-two {
    width: 66.666667%;
}

.ads-left img {
    display: block;
    width: 100%;
}


/*---------------------
  Counter
-----------------------*/

.counter {
    background: #100028;
    height: 840px;
    padding-top: 380px;
    overflow: hidden;
}

.counter__content {
    padding: 0px 50px;
}

.counter__item {
    background: #1a083d;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    height: 255px;
    width: 255px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.counter__item::before {
    position: absolute;
    left: -1px;
    bottom: -2px;
    height: 636px;
    width: 636px;
    border-left: 1px solid #333333;
    border-top: 1px solid #333333;
    content: "";
    z-index: -1;
}

.counter__item.second__item {
    margin-top: -185px;
}

.counter__item.second__item:before {
    left: -316px;
    bottom: -65px;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: none;
    border-top: none;
}

.counter__item.four__item {
    margin-top: -185px;
}

.counter__item.four__item:before {
    left: -380px;
    bottom: -380px;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: none;
    border-top: none;
}

.counter__item.third__item:before {
    left: -65px;
    bottom: -317px;
}

.counter__item__text {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.counter__item__text h2 {
    font-size: 60px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 6px;
    margin-top: 18px;
}

.counter__item__text p {
    color: #ffffff;
    margin-bottom: 0;
}


/*---------------------
  Team
-----------------------*/

.team {
    padding-bottom: 90px;
}

.team .container {
    position: relative;
}

.section-title.team__title {
    margin-bottom: 90px;
}

.team__item {
    height: 390px;
    position: relative;
    overflow: hidden;
}

.team__item:hover .team__item__text {
    bottom: 0;
}

.team__item.team__item--second {
    margin-top: -60px;
}

.team__item.team__item--third {
    margin-top: -120px;
}

.team__item.team__item--four {
    margin-top: -180px;
}

.team__item__text {
    text-align: center;
    position: absolute;
    left: 0;
    bottom: -500px;
    width: 100%;
    padding: 50px 0 30px;
    z-index: 1;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
}

.team__item__text:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: url(../img/team/team-hover.png);
    content: "";
    z-index: -1;
}

.team__item__text h4 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.team__item__text p {
    color: #ffffff;
    font-weight: 300px;
    margin-bottom: 12px;
}

.team__item__text .team__item__social a {
    color: #ffffff;
    display: inline-block;
    font-size: 15px;
    margin-right: 18px;
}

.team__item__text .team__item__social a:last-child {
    margin-right: 0;
}

.team__btn {
    position: absolute;
    right: 0;
    bottom: 0;
}


/*---------------------
  Latest
-----------------------*/

.latest {
    background: #100028;
    padding-bottom: 80px;
}

.blog__item {
    margin-right: 20px;
}

.blog__item.latest__item {
    margin-bottom: 0;
}

.blog__item.latest__item:hover {
    border: 1px solid #222222 !important;
    background: url(../img/blog/blog-1.jpg);
    background-size: cover;
}

.latest__slider.owl-carousel .owl-item .col-lg-4 {
    max-width: 100%;
}

.latest__slider.owl-carousel .owl-dots {
    text-align: center;
    padding-top: 35px;
}

.latest__slider.owl-carousel .owl-dots button {
    height: 8px;
    width: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    margin-right: 10px;
}

.latest__slider.owl-carousel .owl-dots button.active {
    background: #0098da;
}

.latest__slider.owl-carousel .owl-dots button:last-child {
    margin-right: 0;
}


/*---------------------
  Call To Active
-----------------------*/

.callto {
    padding-top: 130px;
}

.callto.sp__callto {
    padding-top: 0;
    background: #100028;
}

.callto__text h2 {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    line-height: 55px;
    margin-bottom: 22px;
}

.callto__text p {
    font-size: 15px;
    color: #ffffff;
    opacity: 0.7;
    text-transform: uppercase;
    margin-bottom: 55px;
}

.callto__text a {
    color: #ffffff;
    background: #0098da;
    font-size: 15px;
    font-weight: 700;
    font-family: "Play", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
    padding: 14px 32px 12px;
}


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

.footer {
    background: #0a0119;
}

.footer__top {
    padding: 30px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__top__logo {
    line-height: 40px;
}

.footer__top__logo a {
    display: inline-block;
    width: 160px;
}

.footer__top__logo img {
    display: inline-block;
    width: 100%;
}

.footer__top__social {
    text-align: right;
}

.footer__top__social a {
    display: inline-block;
    font-size: 15px;
    color: #ffffff;
    height: 40px;
    width: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    margin-right: 6px;
}

.footer__top__social a:last-child {
    margin-right: 0;
}

.footer__option {
    padding-bottom: 35px;
    padding-top: 75px;
}

.footer__option__item {
    margin-bottom: 35px;
}

.footer__option__item h5 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 35px;
}

.footer__option__item p {
    font-weight: 300;
    margin-bottom: 20px;
    color: #adadad;
}

.footer__option__item .read__more {
    font-size: 16px;
    color: #ffffff;
}

.footer__option__item .read__more span {
    font-size: 16px;
    color: #ffffff;
    opacity: 0.5;
    position: relative;
    top: 4px;
    margin-left: 5px;
}

.footer__option__item ul li {
    list-style: none;
}

.footer__option__item ul li a {
    color: #adadad;
    font-size: 16px;
    font-weight: 300;
    line-height: 32px;
}

.footer__option__item ul li a:hover {
    color: #0098da;
}

.footer__option__item form {
    position: relative;
}

.footer__option__item form input {
    height: 50px;
    width: 100%;
    padding-left: 20px;
    border: 1px solid #544E5E;
    background: transparent;
    font-size: 16px;
    color: #adadad;
}

.footer__option__item form input::-webkit-input-placeholder {
    color: #adadad;
}

.footer__option__item form input::-moz-placeholder {
    color: #adadad;
}

.footer__option__item form input:-ms-input-placeholder {
    color: #adadad;
}

.footer__option__item form input::-ms-input-placeholder {
    color: #adadad;
}

.footer__option__item form input::placeholder {
    color: #adadad;
}

.footer__option__item form button {
    font-size: 20px;
    color: #ffffff;
    border: none;
    height: 50px;
    width: 50px;
    background: #0098da;
    line-height: 50px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
}

.footer__copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 0;
}

.footer__copyright__text {
    margin-bottom: 0;
    font-weight: 300;
    color: #adadad;
}

.footer__copyright__text i {
    color: #0098da;
}

.footer__copyright__text a {
    color: #0098da;
}


/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
    padding-top: 80px;
}

.breadcrumb__text h2 {
    color: #ffffff;
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 12px;
}

.breadcrumb__links a {
    font-size: 16px;
    color: #ffffff;
    font-weight: 300;
    display: inline-block;
    margin-right: 32px;
    position: relative;
}

.breadcrumb__links a:after {
    position: absolute;
    right: -22px;
    top: -3px;
    content: "/";
    color: #adadad;
    font-size: 20px;
}

.breadcrumb__links span {
    font-size: 16px;
    color: #adadad;
    font-weight: 300;
    display: inline-block;
}


/*---------------------
  About
-----------------------*/

.about {
    background: #100028;
    padding-bottom: 150px;
}

.about__pic__item {
    height: 235px;
    margin-right: -10px;
    margin-bottom: 20px;
}

.about__pic__item.about__pic__item--large {
    height: 490px;
}

.about__text {
    padding-left: 30px;
}

.about__text .services__item .services__item__icon:after {
    border-color: #281A3E;
}

.services__item__icon i {
    font-size: 24px;
    color: #fff;
}

.about__text__desc {
    margin-top: -10px;
}


/*---------------------
  Testimonial
-----------------------*/

.testimonial {
    padding-bottom: 60px;
}

.testimonial__slider.owl-carousel .owl-item .col-lg-4 {
    max-width: 100%;
}

.testimonial__slider.owl-carousel .owl-dots {
    text-align: center;
    padding-top: 35px;
}

.testimonial__slider.owl-carousel .owl-dots button {
    height: 8px;
    width: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    margin-right: 10px;
}

.testimonial__slider.owl-carousel .owl-dots button.active {
    background: #0098da;
}

.testimonial__slider.owl-carousel .owl-dots button:last-child {
    margin-right: 0;
}

.testimonial__text {
    padding: 30px 40px 25px 30px;
    border: 1px solid #3D3A64;
    margin-bottom: 25px;
    position: relative;
    z-index: 9;
}

.testimonial__text P {
    color: #ffffff;
    font-size: 18px;
    font-weight: 300;
    font-style: italic;
    line-height: 30px;
    margin-bottom: 0;
}

.testimonial__author {
    padding-left: 30px;
}

.testimonial__author__pic {
    float: left;
    margin-right: 20px;
}

.testimonial__author__pic img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.testimonial__author__text {
    overflow: hidden;
}

.testimonial__author__text h5 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 8px;
}

.testimonial__author__text span {
    color: #ffffff;
    font-size: 14px;
    font-weight: 300px;
    display: inline-block;
}


/*---------------------
  Services
-----------------------*/

.services {
    background: #100028;
    padding-bottom: 60px;
    padding-top: 110px;
}

.services__title p {
    color: #ffffff;
    margin-bottom: 45px;
    text-align: justify;
}

.services__item {
    margin-bottom: 45px;
}

.services__item:hover .services__item__icon:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.services__item h4 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin-top: 26px;
    margin-bottom: 18px;
}

.services__item p {
    color: #ffffff;
    margin-bottom: 0;
    text-align: justify;
}

.services__item__icon {
    position: relative;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
}

.services__item__icon:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #0098da;
    content: "";
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
}


/*---------------------
  Services Page
-----------------------*/

.services-page {
    background: #100028;
    padding-bottom: 50px;
}


/*---------------------
  Logo
-----------------------*/

.logo {
    background: #100028;
    padding: 100px 20px;
}

.logo__carousel.owl-carousel .owl-item img {
    width: auto;
    display: inline-block;
}


/*---------------------
  Portfolio
-----------------------*/

.portfolio {
    background: #100028;
}

.portfolio__filter {
    text-align: center;
    margin-bottom: 40px;
}

.portfolio__filter li {
    list-style: none;
    font-size: 16px;
    color: #adadad;
    margin-right: 5px;
    display: inline-block;
    cursor: pointer;
    padding: 6px 22px;
}

.portfolio__filter li.active {
    border: 1px solid #0098da;
}

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

.portfolio__item {
    margin-bottom: 35px;
}

.portfolio__item:hover .portfolio__item__text h4:after {
    opacity: 1;
}

.portfolio__item__video {
    height: 240px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 28px;
}

.portfolio__item__video .play-btn {
    display: inline-block;
    color: #ffffff;
    font-size: 20px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
}

.portfolio__item__text {
    text-align: center;
}

.portfolio__item__text h4 {
    color: #ffffff;
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
}

.portfolio__item__text h4:after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #333;
    content: "";
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
    opacity: 0;
}

.portfolio__item__text ul li {
    list-style: none;
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    margin-right: 24px;
    position: relative;
    color: #adadad;
}

.portfolio__item__text ul li:after {
    position: absolute;
    right: -16px;
    top: 0;
    content: "/";
}

.portfolio__item__text ul li:last-child {
    margin-right: 0;
}

.portfolio__item__text ul li:last-child:after {
    display: none;
}

.portfolio__item__text span {
    font-size: 16px;
    font-weight: 300;
    color: #adadad;
    display: block;
}

.pagination__option {
    text-align: center;
    padding-top: 20px;
}

.pagination__option.blog__pagi {
    padding-top: 5px;
}

.pagination__option .arrow__pagination {
    font-size: 15px;
    color: #ffffff;
    display: inline-block;
    text-transform: uppercase;
}

.pagination__option .arrow__pagination.left__arrow {
    margin-right: 26px;
}

.pagination__option .arrow__pagination.right__arrow {
    margin-left: 18px;
}

.pagination__option .arrow__pagination span {
    opacity: 0.5;
}

.pagination__option .number__pagination {
    font-size: 18px;
    color: #ffffff;
    height: 50px;
    width: 50px;
    background: rgba(242, 242, 242, 0.1);
    line-height: 50px;
    text-align: center;
    display: inline-block;
    margin-right: 6px;
}


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

.blog {
    background: #100028;
}

.blog__item {
    border: 1px solid #222222;
    padding: 30px;
    position: relative;
    z-index: 1;
    margin-bottom: 45px;
}

.blog__item:hover {
    border: 1px solid transparent !important;
    background: url(../img/blog/blog-2.jpg) no-repeat;
    background-size: cover;
}

.blog__item:hover ul li {
    color: #ffffff;
}

.blog__item:hover p {
    color: #ffffff;
}

.blog__item .thumbnail,
.blog__details__recent__item .thumbnail {
    padding-top: calc(100%*(9/16));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    display: block;
    width: 100%;
    margin-right: 1.5rem;
    position: relative;
    transition: all .25s ease-in-out;
    margin-bottom: 1rem;
}

.blog__item .thumbnail img,
.blog__details__recent__item .thumbnail img {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
}

.blog__item .thumbnail:hover img,
.blog__details__recent__item:hover .thumbnail img {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}

.blog__item h4 {
    margin-bottom: 18px;
    color: #ffffff;
}

.blog__item h4 a {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 31px;
}

.blog__item ul {
    margin-bottom: 20px;
}

.blog__item ul li {
    color: #777777;
    list-style: none;
    font-size: 14px;
    font-weight: 300;
    margin-right: 25px;
    position: relative;
    display: inline-block;
}

.blog__item ul li:after {
    position: absolute;
    right: -16px;
    top: 0px;
    content: "/";
}

.blog__item ul li:last-child {
    margin-right: 0;
}

.blog__item ul li:last-child:after {
    display: none;
}

.blog__item p {
    color: #dbdada;
    font-weight: 300;
    line-height: 29px;
    margin-bottom: 22px;
}

.blog__item a {
    font-size: 16px;
    color: #ffffff;
}

.blog__item a span {
    font-size: 16px;
    color: #ffffff;
    opacity: 0.5;
    position: relative;
    top: 4px;
    margin-left: 5px;
}


/*---------------------
  Blog Details Hero
-----------------------*/

.blog-hero {
    padding: 80px 0 80px;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
}

.blog__hero__text {
    text-align: center;
}
.blog__hero__text .product-price {
    color: #ffffff;
}
.blog__hero__text h2 {
    color: #ffffff;
    font-weight: 700;
    line-height: 47px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.blog__hero__text ul li {
    font-size: 14px;
    color: #ffffff;
    font-weight: 300;
    list-style: none;
    display: inline-block;
    margin-right: 25px;
    position: relative;
}

.blog__hero__text ul li:after {
    position: absolute;
    right: -18px;
    top: 0;
    content: "/";
}

.blog__hero__text ul li:last-child {
    margin-right: 0;
}

.blog__hero__text ul li:last-child:after {
    display: none;
}

.blog__hero__text ul li span {
    text-transform: uppercase;
}


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

.blog-details {
    background: #eeeeee;
}
.blog-details.spad {
    padding: 40px 0;
}
.blog__details__text {
    margin-bottom: 30px;
}

.blog__details__text p {
    font-size: 18px;
    line-height: 29px;
    font-weight: 300;
    margin-bottom: 20px;
}

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

.blog__details__text a {
    /* color: #fff; */
}

/* .blog__details__text table,
.blog__details__text table strong,
.blog__details__text table p,
.blog__details__text table span,
.blog__details__text table a {
    color: #ebebeb;
} */

.blog__details__text table {
    width: 100%;
}

.blog__details__text table td {
    border: 1px solid rgba(92, 92, 92, 0.5);
    padding: 0.5rem;
}

.blog__details__text ul {
    margin-bottom: 1rem;
    margin-left: 1rem;
}

.blog__details__text ul li {
    line-height: 1.5;
}

.blog__details__quote {
    border: 1px solid rgba(225, 225, 225, 0.8);
    padding: 35px 90px 35px 40px;
    position: relative;
    margin-bottom: 35px;
}

.blog__details__quote p {
    font-size: 22px;
    font-weight: 300;
    line-height: 35px;
    font-style: italic;
    margin-bottom: 10px;
}

.blog__details__quote h6 {
    font-size: 15px;
    color: #adadad;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
}

.blog__details__quote i {
    font-size: 36px;
    color: #0098da;
    position: absolute;
    right: 30px;
    bottom: 25px;
}

.blog__details__desc {
    margin-bottom: 50px;
}

.blog__details__desc p {
    font-size: 18px;
    line-height: 29px;
    font-weight: 300;
    margin-bottom: 20px;
}

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

.blog__details__tags {
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 65px;
}

.blog__details__tags span {
    display: inline-block;
    font-size: 15px;
    color: #ffffff;
    font-weight: 300;
    margin-right: 25px;
}

.blog__details__tags a {
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    display: inline-block;
    margin-right: 11px;
    padding: 8px 15px 7px;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.1);
}

.blog__details__option {
    margin-bottom: 40px;
}

.blog__details__option__item {
    margin-bottom: 30px;
    overflow: hidden;
    display: block;
}

.blog__details__option__item h5 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.blog__details__option__item h5 i {
    font-size: 18px;
    margin-right: 5px;
}

.blog__details__option__item.blog__details__option__item--right h5 {
    text-align: right;
}

.blog__details__option__item.blog__details__option__item--right h5 i {
    margin-right: 0;
    margin-left: 5px;
}

.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__img {
    float: right;
    margin-right: 0;
    margin-left: 25px;
}

.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__text {
    margin-right: 25px;
    text-align: right;
    float: none;
}

.blog__details__option__item__img {
    float: left;
    margin-right: 25px;
}

.blog__details__option__item__text {
    overflow: hidden;
}

.blog__details__option__item__text h6 {
    color: #ffffff;
    line-height: 21px;
    font-weight: 700;
    margin-bottom: 5px;
}

.blog__details__option__item__text span {
    font-size: 14px;
    color: #777777;
    font-weight: 300;
}

.blog__details__recent {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 40px;
    margin-top: 60px;
    margin-bottom: 60px;
}

.blog__details__recent h4 {
    color: var(--bs-link-color);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 35px;
    text-align: center;
}

.blog__details__recent__item {
    margin-bottom: 30px;
}

.blog__details__recent__item img {
    min-width: 100%;
    margin-bottom: 20px;
}

.blog__details__recent__item h5 {
    color: #ffffff;
    font-weight: 700;
    line-height: 23px;
    margin-bottom: 4px;
}

.blog__details__recent__item h5 a {
    /* color: #fff; */
}
.blog__details__recent__item h5 a:hover {
    color: #505050;
}
.blog__details__recent__item span {
    color: #818181;
    font-size: 14px;
    font-weight: 300;
}

.blog__details__comment h4 {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 35px;
    text-align: center;
}

.blog__details__comment form textarea {
    height: 120px;
    width: 100%;
    border: 1px solid rgba(225, 225, 225, 0.5);
    background: transparent;
    font-size: 16px;
    color: #adadad;
    padding-top: 12px;
    padding-left: 20px;
    font-weight: 300;
    margin-bottom: 14px;
    resize: none;
}

.blog__details__comment form textarea:placeholder {
    color: #adadad;
}

.input__list {
    margin-right: -20px;
    overflow: hidden;
}

.input__list input {
    height: 50px;
    width: calc(33.33% - 20px);
    float: left;
    border: 1px solid rgba(225, 225, 225, 0.5);
    background: transparent;
    font-size: 16px;
    color: #adadad;
    padding-left: 20px;
    font-weight: 300;
    margin-right: 20px;
    margin-bottom: 20px;
}

.input__list input:placeholder {
    color: #adadad;
}


/*---------------------
  Contact Widget
-----------------------*/

.contact-widget {
    background: #100028;
    padding-bottom: 70px;
}

.contact__widget__item {
    margin-bottom: 30px;
}

.contact__widget__item__icon {
    height: 70px;
    width: 70px;
    border: 1px solid rgba(225, 225, 225, 0.5);
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    float: left;
    margin-right: 30px;
}

.contact__widget__item__icon i {
    font-size: 30px;
    color: #ffffff;
}

.contact__widget__item__text {
    overflow: hidden;
    padding-top: 7px;
}

.contact__widget__item__text h4 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 10px;
}

.contact__widget__item__text p {
    margin-bottom: 0;
}


/*---------------------
  Contact
-----------------------*/

.contact {
    background: #100028;
    padding-top: 0;
    overflow: hidden;
}

.contact__map {
    height: 450px;
}

.contact__map iframe {
    width: 100%;
}

.contact__form h3 {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 35px;
}

.contact__form form input {
    height: 50px;
    width: 100%;
    border: 1px solid rgba(225, 225, 225, 0.5);
    background: transparent;
    font-size: 16px;
    color: #adadad;
    padding-left: 20px;
    font-weight: 300;
    margin-right: 20px;
    margin-bottom: 20px;
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
}

.contact__form form input:placeholder {
    color: #adadad;
}

.contact__form form input:focus {
    border-color: #e1e1e1;
}

.contact__form form textarea {
    height: 110px;
    width: 100%;
    border: 1px solid rgba(225, 225, 225, 0.5);
    background: transparent;
    font-size: 16px;
    color: #adadad;
    padding-top: 12px;
    padding-left: 20px;
    font-weight: 300;
    margin-bottom: 14px;
    resize: none;
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
}

.contact__form form textarea:placeholder {
    color: #adadad;
}

.contact__form form textarea:focus {
    border-color: #e1e1e1;
}

#mobile-menu-wrap {
    display: none;
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 99;
}


/*Sidebar*/

.js-menu-mobile {
    display: none;
    background-color: transparent;
    width: 46px;
    height: 44px;
    /* position: absolute; */
    top: 10px;
    right: 10px;
    border: 1px solid #0098da;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.js-menu-mobile .trigger-menu {
    cursor: pointer;
    width: 46px;
    height: 44px;
    text-align: right;
}

.js-menu-mobile .trigger-menu .three-bars-icon {
    margin: 20px 10px;
    position: relative;
    display: inline-block;
    width: 26px;
    height: 3px;
    background: #0098da;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.js-menu-mobile .trigger-menu span {
    display: inline-block;
    vertical-align: middle;
}

.js-menu-mobile .trigger-menu .three-bars-icon:before {
    content: '';
    display: block;
    position: absolute;
    width: 26px;
    height: 3px;
    top: -7px;
    right: 0;
    background: #0098da;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.js-menu-mobile .trigger-menu .three-bars-icon:after {
    content: '';
    display: block;
    position: absolute;
    width: 26px;
    height: 3px;
    top: 7px;
    right: 0;
    background: #0098da;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.js-menu-mobile .trigger-menu .three-bars-icon.close {
    position: relative;
    display: inline-block;
    background: transparent;
}

.js-menu-mobile .trigger-menu .three-bars-icon.close:before {
    content: '';
    display: block;
    position: absolute;
    width: 26px;
    height: 3px;
    top: 0;
    background: #0c806b;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.js-menu-mobile .trigger-menu .three-bars-icon.close:after {
    content: '';
    display: block;
    position: absolute;
    width: 26px;
    height: 3px;
    top: 0;
    background: #0c806b;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.slidebar {
    position: fixed;
    width: 70%;
    max-width: 650px;
    height: 100%;
    top: 0;
    right: -70%;
    background: #0098da;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.slidebar.show {
    right: 0;
}

.mobile-wrap-menu {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
}

.mobile-wrap-menu .head {
    display: table;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #0085bf
}

.mobile-wrap-menu .head span {
    display: `-cell;
    vertical-align: middle;
}

.mobile-wrap-menu .head .icon {
    padding: 10px 12px;
    zoom: 1;
    /* Fix for IE7 */
    *display: inline;
    /* Fix for IE7 */
    font-size: 20px;
    color: #fff;
    background-color: #00b3ff;
}

.mobile-wrap-menu .head .icon:hover {
    cursor: pointer;
}

.mobile-wrap-menu .head .head-text {
    font-size: 20px;
    padding: 1rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-wrap-menu .sub-menu .head .icon {
    background: #0085bf;
    width: 46px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mobile-wrap-menu .sub-menu .head .icon i {
    font-size: 20px;
}

.mobile-wrap-menu .head .icon.left {
    float: left;
}

.mobile-wrap-menu .head .icon.right {
    float: right;
}

.main-nav-mobile {
    padding-left: 0;
    list-style-image: none;
    list-style-type: none;
}

.main-nav-mobile li {
    list-style: none;
    margin: 0 !important;
    padding: 0;
}

.main-nav-mobile li a {
    border-bottom: 1px solid #0085bf;
    position: relative;
    display: block;
    text-decoration: none;
    padding: 1.3rem;
    padding-left: 30px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    position: relative;
}


/*.main-nav-mobile li a::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--strong-color);
    position: absolute;
    top: 22px;
    left: 15px;
    z-index: 99;
  }*/

.main-nav-mobile li a.hassub::after {
    content: '';
    z-index: 10;
    position: absolute;
    top: 25px;
    right: 5px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left: 8px solid #ffffff;
    z-index: 99;
}

.main-nav-mobile li:last-child {
    border: none
}

.main-nav-mobile>li>a {
    text-transform: uppercase;
}

.main-nav-mobile ul li li li a {
    padding-left: 60px;
    font-family: "Helvetica Neue Light", arial, sans-serif;
}

.main-nav-mobile .sub-menu {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 9999;
    background: #008bc7;
    left: 100%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.main-nav-mobile .sub-menu ul {
    padding-left: 0;
}

.main-nav-mobile li .sub-menu[visible=true] {
    left: 0;
}

.main-nav-mobile li a:focus {
    background: #0085bf;
}

.mobile-wrap-menu ul li.leaf,
.mobile-wrap-menu ul li.expanded {
    list-style-image: none;
    list-style-type: none;
}


/*End sidebar*/

.scrollToTop {
    color: #fff;
    text-align: center;
    position: fixed;
    bottom: 40%;
    right: 10px;
    z-index: 98;
    display: none;
    padding: 7px 5px;
    width: 40px;
    cursor: pointer;
    background-color: #0098da;
    opacity: 0.5;
    transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
}

.scrollToTop:hover {
    opacity: 1;
}

.zalo-contact {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50px;
    z-index: 97;
}

.zalo-contact a {
    display: block;
    width: 100%;
}

.zalo-contact a img {
    width: 100%;
    display: block;
}

.btn-block {
    width: 100%;
}

.form-group {
    margin-bottom: 1rem;
}

.login-form {
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
}

.content-title {
    font-size: 1.6rem;
    color: var(--strong-color);
}


/* Home slider */

.home-slider {
    padding: 2rem 0;
}

.home-slider .slider-text {
    margin-top: 60px;
    width: 40%;
}

.home-slider .slider-text .slider-heading {
    font-size: 2rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 2rem;
}

.home-slider .slider-text .slider-heading .slider-type {
    font-size: 1.4rem;
    color: #adadad;
    margin-bottom: 1rem;
    display: block;
}

.home-slider .slider-text a {
    color: #fff;
}

.home-slider .slider-text .slider-description {
    margin-bottom: 2rem;
    line-height: 1.6;
    color: #fff;
}

.home-slider .slider-image {
    top: 0;
    left: 0;
    padding: 2rem;
    width: 60%;
}

.home-slider .primary-btn {
    position: relative;
    top: 20px;
    opacity: 0;
    -webkit-transition: all, 0.7s;
    -o-transition: all, 0.7s;
    transition: all, 0.7s;
}

.primary-btn:hover:before {
    height: 100%;
    width: 100%;
}

.primary-btn:hover:after {
    height: 100%;
    width: 100%;
}

.primary-btn:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 30px;
    width: 30px;
    border-left: 2px solid #0098da;
    border-top: 2px solid #0098da;
    content: "";
    z-index: -1;
    -webkit-transition: all, 0.7s;
    -o-transition: all, 0.7s;
    transition: all, 0.7s;
}

.primary-btn:after {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 30px;
    width: 30px;
    border-right: 2px solid #0098da;
    border-bottom: 2px solid #0098da;
    content: "";
    z-index: -1;
    -webkit-transition: all, 0.7s;
    -o-transition: all, 0.7s;
    transition: all, 0.7s;
}

.home-slider .slider-image .slider-background {
    height: 0;
    top: 0;
    right: 0;
    padding-top: calc(100%*(9/16));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.slick-dots {
    position: absolute;
    bottom: 3rem;
    left: 0;
    padding-left: 0;
}

.slick-dots li {
    list-style: none;
    display: inline;
    margin-right: 1rem;
}

.slick-dots li button {
    position: relative;
    background-color: transparent;
    border: none;
    width: 15px;
    line-height: initial;
    padding: 0.3rem 0;
    color: #adadad;
}

.slick-dots li button:after {
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    content: "";
}

.slick-dots li.slick-active button {
    color: #ffffff;
}

.slick-dots li.slick-active button:after {
    background: #ffffff;
    height: 2px;
}

.home-slider-container {
    background-size: cover;
}


/* end home slider */

.course-abtract {
    width: 100%;
    margin-bottom: 2rem;
}

.course-abtract tr {
    border-bottom: 1px solid rgba(172, 172, 172, 0.5);
}

.course-abtract td {
    padding: 10px;
}

.form-group label {
    display: inline-block
}

.datepicker {
    z-index: 1;
}

.datepicker.datepicker-dropdown {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2)
}

.datepicker-days {
    padding: 0 10px;
}

.datepicker-days td {
    padding: 8px;
}

.datepicker-days th {
    text-align: center;
    padding: 8px;
}

.datepicker-months th,
.datepicker-months td {
    padding: 8px;
    min-width: 40px;
}

.datepicker.datepicker-dropdown {
    width: auto;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: var(--background-primary-color) !important;
    background-image: none !important;
}

.datepicker-dropdown.datepicker-orient-top:before {
    bottom: -7px;
    border-bottom: 0;
    border: 1px solid var(--border-color) !important;
}

.product-price {
    /* color: #fff; */
    font-size: 2rem;
}

.product-sale-price,
.product-price-default {
    color: #e7012e;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.product-price-default.line-through {
    text-decoration: line-through;
}

.slider-nav .slick-slide {
    padding: 5px;
}

.select2-container--bootstrap-5 {
    border: 1px solid #ced4da;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.form-group .select2-container--bootstrap-5 {
    width: 100%!important;
}

.shoping-card {
    cursor: pointer;
    color: #8a8a8a;
}

.shoping-card span {
    color: #fff;
    width: 20px;
    text-align: center;
    padding: 0.1rem!important;
    font-size: 0.6rem;
}

.shoping-card:hover i {
    color: #e7012e;
}

@media (min-width: 1025px) {
    .h-custom {
        height: 100vh !important;
    }
}

.quantity-input-group {
    margin-right: 2rem;
    margin-bottom: 0 !important;
}

.quantity-input-group button {
    border: none;
}

.quantity-input-group button i {
    font-size: 1.2rem;
}

.quantity-input-group input {
    text-align: right;
}

.old-price {
    font-size: 1.4rem;
    color: #8b8b8b;
    text-shadow: none;
}
.switch label {
    margin: 0;
}
.dataTable {
    width: 100% !important;
}
.course-option-nav .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: #0085bf !important;
    border-color: #0085bf !important;
    color: #fff;
}
.course-option-nav .btn {
    margin: 0.5rem;
}
.course-option-nav .btn:first-child {
    margin-left: 0;
}

.blog-details .section-title h2, .blog-details .services__item h4 {
    color: var(--bs-link-color);
}
.blog__details__text p {
    color: #444;
}
.blog-details .services__item__icon i {
    color: var(--bs-link-color);
}
.action-info {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #0085bf;
}
.action-info .number-student-call {
    margin-right: 10px;
    padding: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    background-color: #e7012e;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.school-shift-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}