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

Template name: Patrika
Version: 1.0.0
Author: SITLBD
Author url: https://www.sitlbd.com/
Developer: Najmul Huda Eimon


[Table of Content]

01: General CSS
    1.1: common css
    1.2: heading
    1.3: common style
    1.4: padding margin
02: Sticky header
03: top-to button
04: Home1 CSS
    4.1: common CSS
    4.2: preloader CSS
    4.2: side-menu CSS
    4.2: modal CSS
    4.3: Header CSS
        4.3.1: top-menu CSS
        4.3.2: mid-menu CSS
        4.3.3: menubar CSS
    4.4: banner CSS
    4.5: news CSS
    4.6: content CSS
    4.7: content sidebar CSS
    4.8: blog CSS
    4.9: insta CSS
    4.10: footer CSS
        4.10.1: footer-top CSS
        4.10.2: footer-bottom CSS
05: Home2 CSS
    5.1: common CSS
    5.2: header CSS
        5.2.1: menubar CSS
        5.2.2: banner CSS
    5.3: news CSS
    5.4: content CSS
        5.4.1: left content CSS
        5.4.2: right content CSS
    5.5: video CSS
    5.6: insta CSS
    5.7: footer-top CSS
        5.7.1: footer-top CSS
        5.7.2: footer-bottom CSS
06: Home3 CSS
    6.1: common CSS
    6.2: sidemenu CSS
    6.3: header CSS
        6.3.1: top-menu CSS
        6.3.2: menubar CSS
        6.3.3: banner CSS
    6.4: video CSS
    6.5: content CSS
        6.5.1: left content CSS
        6.5.2: right-content CSS
    6.6: news CSS
    6.7: footer CSS
        6.7.1: footer-top CSS
        6.7.2: footer-bottom CSS
07: Home4 CSS
    7.1: common CSS
    7.2: sidemenu CSS
    7.3: header CSS
        7.3.1: top-menu CSS
        7.3.2: menubar CSS
    7.4: top-news CSS
    7.5: blog CSS
    7.6: content CSS
        7.6.1: left content CSS
        7.6.2: right content CSS
    7.7: video CSS
    7.8: footer CSS
        7.8.1: footer-top CSS
        7.8.2: footer-bottom CSS
08: Home 5
    8.1: common CSS
    8.2: sidemenu CSS
    8.3: header CSS
        8.3.1: top-menu CSS
        8.3.2: menubar CSS
        8.3.3: banner CSS
    8.4: priority CSS
    8.5: main CSS
    8.6: content CSS
        8.6.1: left-content CSS
        8.6.2: right content CSS
    8.7: video CSS
    8.8: footer CSS
        8.8.1: footer-top CSS
        8.8.2: footer-bottom CSS
09: inner page CSS
    9.1: common CSS
    9.2: header CSS
        9.2.1: top-menu CSS
        9.2.2: menubar CSS
        9.2.3: banner CSS
    9.3: side-menu CSS
    9.4: right-content CSS
    9.5: footer-top CSS
    9.6: footer-bottom CSS
10: author page CSS
    10.1: author CSS
    10.2: main CSS
    10.3: left-content CSS
    10.4: right-content CSS
11: about page CSS
    11.1: about-part CSS
    11.2: news CSS
    11.3: agent CSS
12: blog grid page CSS
    12.1: blog CSS
13: blog list page CSS
    13.1: blog CSS
14: blog standard page CSS
15: blog left page CSS
16: blog video page CSS
17: account page CSS
18: category page CSS
19: contact page CSS
    19.1: location CSS
    19.2: address CSS
    19.3: message CSS
20: shop page CSS
    20.1: left content CSS
    20.2: right content CSS
21: shop-detail page CSS
    21.1: detail CSS
    21.2: review CSS
    21.3: popular CSS
22: lifestyle page CSS
23: cart page CSS
24: checkout page CSS
25: wishlist page CSS
26: error page CSS

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


/*===========================================================
01: General CSS
=============================================================*/

/* 1.1: common css */

:root {
    --light-blue: #007aff;
    --blue: #0a48b3;
    --sky-blue: #4e97fd;
    --deep-blue: #151a33;
    --grey: #606060;
    --red: #e91e1e;
    --red2: #e52f29;
    --poppins: 'Poppins', sans-serif;
    --raleway: 'Raleway', sans-serif;
    --heebo: 'Heebo', sans-serif;
    --roboto: 'Roboto', sans-serif;
}

body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
    position: relative;
}

* {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
ol {
    margin: 0;
    padding: 0;
}

ul li,
ol li {
    list-style: none;
}

a,
p,
i,
h2,
h3,
h4,
h5,
h6 {
    text-decoration: none;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: 0;
}

button {
    outline: none;
    border: 0;
    cursor: pointer;
    background: transparent;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

button:focus {
    outline: none;
}

.clearfix {
    clear: both;
    display: block;
}

input[type="number"] {
    -moz-appearance: textfield;
}

::-moz-selection {
    background: var(--light-blue);
    color: #fff;
    text-shadow: none;
}

::selection {
    background: var(--light-blue);
    color: #fff;
    text-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;

}

textarea {
    resize: none;
}

img {
    max-width: 100%;
    height: auto;
}


a,
a:hover,
a:active,
a:focus {
    text-decoration: none;
    outline: none;
}


.home1 {
    font-family: var(--poppins);
}

.home3,
.home4,
.home5,
.inner-page {
    font-family: var(--roboto);
}

/* 1.2: heading */

h1 {
    font-size: 50px;
    line-height: 62px;
}

h2 {
    font-size: 38px;
    line-height: 52px;
}

h3 {
    font-size: 24px;
    line-height: 36px;
}

h4 {
    font-size: 22px;
    line-height: 32px;
}

h5 {
    font-size: 18px;
    line-height: 26px;
}

h6 {
    font-size: 16px;
    line-height: 26px;
}



p {
    font-size: 16px;
    line-height: 26px;
    color: var(--grey);
    font-weight: 400;
}


select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 1.3: common style */

.cat-sm,
.cat-big {
    display: inline-block;
    font-size: 12px;
    padding: 0 13px;
    text-transform: capitalize;
    color: #fff;
    font-weight: 400;
    line-height: 20px;
    background: var(--light-blue);
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.cat-big {
    line-height: 28px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
}

.cat-sm:hover,
.cat-big:hover {
    background: var(--deep-blue);
    color: #fff;
}


/* 1.4: padding margin */

.p-30 {
    padding: 30px 0;
}

.pt-60 {
    padding-top: 60px;
}

.p-70 {
    padding: 70px 0;
}
.pb-20{
    padding-bottom: 20px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-80 {
    padding-bottom: 80px;
}

.p-80 {
    padding: 80px 0;
}

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

.mt-20 {
    margin-top: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mt-30 {
    margin-top: 30px;
}
.pb-40{
    padding-bottom: 40px;
}
.pt-40 {
    padding-top: 40px;
}

.mt-40 {
    margin-top: 40px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-60 {
    margin-bottom: 60px;
}

/*=========================================================
    02: Sticky header
===========================================================*/

.menubar.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    z-index: 999;
    animation: mymove 0.4s linear;
    -webkit-box-shadow: 0 5px 50px 0 hsla(0, 0%, 13%, 0.2);
    box-shadow: 0 5px 50px 0 hsla(0, 0%, 13%, 0.2);
}

@keyframes mymove {
    0% {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

/*=========================================================
    03: top-to button
===========================================================*/

.top-btn {
    height: 45px;
    width: 45px;
    line-height: 45px;
    text-align: center;
    background: var(--light-blue);
    position: fixed;
    right: 40px;
    bottom: 40px;
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    outline: none;
    -webkit-transition: all linear 0.4s;
    -moz-transition: all linear 0.4s;
    -ms-transition: all linear 0.4s;
    -o-transition: all linear 0.4s;
    transition: all linear 0.4s;
    cursor: pointer;
    -webkit-animation: witr_bounce 1000ms ease-out infinite;
    animation: witr_bounce 1000ms ease-out infinite;
}

@keyframes witr_bounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    60% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}


.top-btn i {
    font-size: 14px;
    color: #fff;
}


.top-btn.show {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

.home2 .top-btn {
    background: var(--red);
}

.home3 .top-btn {
    background: var(--blue);
}

.home4 .top-btn {
    background: var(--sky-blue);
}

.home5 .top-btn {
    background: var(--red2);
}
.inner-page .top-btn{
    background: var(--red);
}



/*===========================================================
 4: Home1 CSS
=============================================================*/

/*===========================================================
4.1: common CSS
=============================================================*/

.home1 .btn-style {
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    color: #fff;
    background: var(--deep-blue);
    text-transform: capitalize;
    padding: 0 13px;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home1 .btn-style:hover {
    background: var(--light-blue);
    color: #fff;
}

.home1 .title {
    border-bottom: 2px solid #d8d8d8;
    padding-bottom: 2px;
    margin-bottom: 30px;
}

.home1 .title h3 {
    text-transform: capitalize;
    color: var(--deep-blue);
    font-weight: 700;
}

/*===========================================================
4.2: preloader CSS
=============================================================*/
.preloader{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background: #fff;
    z-index: 99999;
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -ms-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}
.preloader.move{
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
}

.preloader .clock{
	border-radius: 70px;
	border: 3px solid var(--red);
	position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    display: block;
    width: 120px;
    height: 120px;
}

.preloader .clock:after{
	content: "";
	position: absolute;
	background-color: var(--red);
	top: 13px;
	left: 48%;
	height: 50px;
	width: 4px;
	border-radius: 5px;
	-webkit-transform-origin: 50% 97%;
			transform-origin: 50% 97%;
	-webkit-animation: grdAiguille 2s linear infinite;
			animation: grdAiguille 2s linear infinite;
}

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

@keyframes grdAiguille{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

.preloader .clock:before{
	content: "";
	position: absolute;
	background-color: var(--red);
	top: 24px;
	left: 48%;
	height: 40px;
	width: 4px;
	border-radius: 5px;
	-webkit-transform-origin: 50% 94%;
			transform-origin: 50% 94%;
	-webkit-animation: ptAiguille 12s linear infinite;
			animation: ptAiguille 12s linear infinite;
}

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

@keyframes ptAiguille{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

/*===========================================================
4.2: side-menu CSS
=============================================================*/
.side-menu-overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: hsla(0, 0%, 0%, 0.5);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.side-menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

.side-menu {
    width: 350px;
    height: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    left: -350px;
    z-index: 99999;
    overflow-y: scroll;
    padding: 60px 30px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.side-menu.show {
    left: 0;
}

.side-menu .sidemenu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--deep-blue);
}
.side-menu .sidemenu-close i{
    display: block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.side-menu .sidemenu-close:hover {
    color: var(--light-blue);
}

.side-menu .category ul li {
    padding: 10px 0;
}

.side-menu .category ul li:first-child {
    padding-top: 0;
}

.side-menu .category ul li:last-child {
    padding-bottom: 0;
}

.side-menu .category ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.side-menu .category ul li p {
    text-transform: capitalize;
}

.side-menu .category ul li p:last-child {
    height: 25px;
    width: 25px;
    border-radius: 50px;
    text-align: center;
    line-height: 25px;
}

.side-menu .category ul li p i {
    margin-right: 10px;
}

.side-menu .category ul li a:hover p {
    color: var(--light-blue);
}

.side-menu .category ul li a:hover p:last-child {
    background: var(--light-blue);
    color: #fff;
}

.side-menu .feed .small-item .media img {
    margin-right: 15px;
}

.side-menu .feed .small-item .media-body h6 {
    color: var(--deep-blue);
}

.side-menu .feed .small-item .media-body p {
    text-transform: capitalize;
    padding-top: 5px;
}

.side-menu .feed .small-item .media-body p i {
    margin-right: 10px;
}

.side-menu .feed .small-item .media-body h6:hover,
.side-menu .feed .small-item .media-body p:hover {
    color: var(--light-blue);
}

/*===========================================================
4.2: modal CSS
=============================================================*/

.modal-backdrop {
    z-index: 980;
}

.modal-title {
    text-transform: capitalize;
    font-family: var(--roboto);
    font-weight: 500;
    color: var(--deep-blue);
}

.modal-header .close {
    padding: 0;
    margin: 0;
    height: 30px;
    width: 30px;
    line-height: 30px;
    background: var(--deep-blue);
    opacity: 1;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    color: #fff;
    text-shadow: none;
    font-size: 18px;
}
.modal-header .close i{
    display: block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.close:not(:disabled):not(.disabled):focus,
.close:not(:disabled):not(.disabled):hover {
    opacity: 1;
    color: #fff;
}

.modal-body form {
    width: 100%;
    position: relative;
}

.modal-body .input-search {
    width: 100%;
    height: 40px;
    border: 1px solid var(--deep-blue);
    -webkit-border-radius: 30px;
    border-radius: 30px;
    padding: 0 20px;
    outline: none;
}

.modal-body .input-search::placeholder {
    text-transform: capitalize;
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 16px;
    color: var(--grey);
}

.modal-body button {
    height: 36px;
    width: 36px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: var(--deep-blue);
    color: #fff;
    font-size: 16px;
    line-height: 36px;
    position: absolute;
    top: 2px;
    right: 2px;
}

.modal-header .close:hover,
.modal-body button:hover {
    background: var(--blue);
}


/*===========================================================
 4.3: Header CSS
=============================================================*/

/*===========================================================
4.3.1: top-menu CSS
=============================================================*/
.home1 .top-menu {
    background: var(--light-blue);
    padding: 10px 0;
}

.home1 .top-menu ul li p {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
}

.home1 .top-menu .address li:not(:last-child) {
    padding-right: 20px;
}

.home1 .top-menu ul li i {
    font-size: 14px;
    color: #fff;
}

.home1 .top-menu .right-part .signin {
    display: inline-block;
    margin-left: 35px;
    font-size: 14px;
    line-height: 26px;
    color: #fff;
}

.home1 .top-menu .right-part .signin i {
    margin-right: 5px;
}

.home1 .top-menu .social li:not(:first-child) {
    padding-left: 18px;
}

/*===========================================================
4.3.2: mid-menu CSS
=============================================================*/

.home1 .mid-menu .ad {
    margin-right: 35px;
}

.home1 .mid-menu form {
    margin-left: -30px;
    position: relative;
}

.home1 .mid-menu form .input-search {
    background: transparent;
    border: 1px solid #ddd;
    outline: 0;
    width: 100%;
    height: 45px;
    padding-left: 15px;
    padding-right: 30px;
}
.home1 .mid-menu form .input-search:focus{
    border-color: var(--light-blue);
}
.home1 .mid-menu form .input-search::placeholder {
    color: var(--grey);
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 400;
}

.home1 .mid-menu form button {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 15px;
}

.home1 .mid-menu form button i {
    color: var(--grey);
}
.home1 .mid-menu form button:hover i{
    color: var(--light-blue);
}

/*===========================================================
4.3.3: menubar CSS
=============================================================*/
.home1 .menubar {
    background: var(--deep-blue);
}

.home1 .menubar .right-part button i ,
.home1 .menubar .left-part button i {
    font-size: 40px;
    color: #fff;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    display: block;
}
.home1 .menubar .left-part .logo,
.home1 .menubar .right-part button{
    display: none;
}
.home1 .menubar.sticky .left-part .logo,
.home1 .menubar.sticky .right-part button{
    display: block;
}
.home1 .menubar.sticky .left-part button,
.home1 .menubar.sticky .right-part .select-part{
    display: none !important;
}
.home1 .menubar .right-part .select {
    width: 100px;
}

.home1 .menubar .right-part .select2-container--default .select2-selection--single {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    outline: none;
}

.home1 .menubar .right-part .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    text-transform: capitalize;
}

.home1 .menubar .right-part .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #fff transparent transparent transparent;
    border-width: 8px 7px 0 7px;
}

.home1 .menubar .right-part .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #fff transparent;
    border-width: 0 7px 8px 7px;
}


/*===========================================================
4.4: banner CSS
=============================================================*/
.home1 .banner{
    padding-top: 140px;
    padding-bottom: 90px;
}
.home1 .banner .banner-text h4{
    font-size: 20px;
    color: var(--light-blue);
    font-weight: 500;
    font-style: italic;
}
.home1 .banner .banner-text h1{
    font-size: 60px;
    line-height: 80px;
    color: var(--deep-blue);
    font-weight: 700;
    font-style: italic;
    padding-top: 20px;
    padding-bottom: 25px;
}
.home1 .banner .banner-text p{
    color: var(--deep-blue);
    padding-right: 50px;
    padding-bottom: 35px;
}
.home1 .banner .banner-text a{
    display: inline-block;
    font-size: 20px;
    line-height: 55px;
    font-weight: 400;
    color: #fff;
    padding: 0 35px;
    text-transform: capitalize;
    background: var(--light-blue);
}
.home1 .banner .banner-text a:hover{
    background: var(--deep-blue);
}
.home1 .banner .img-part{
    position: relative;
}
.home1 .banner .img-part .img1,
.home1 .banner .img-part .img2{
    width: 90%;
}
.home1 .banner .img-part .img2{
    margin-left: 10%;
}
.home1 .banner .img-part .img1{
    position: absolute;
    bottom: 70px;
    right: 70px;
    z-index: 4;
}

/*===========================================================
4.5: news CSS
=============================================================*/
.home1 .news .item {
    border: 1px solid hsla(0, 0%, 87%, 0.5);
    background: #fff;
    padding: 20px;
}

.home1 .news .item .media img {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    margin-right: 15px;
}

.home1 .news .item .media-body .cat-sm {
    background: var(--deep-blue);
}

.home1 .news .item .media-body .cat-sm:hover {
    background: var(--light-blue);
}

.home1 .news .item .media-body h5 {
    color: var(--deep-blue);
    font-weight: 500;
    padding-top: 4px;
}

.home1 .news .item .media-body h5:hover {
    color: var(--light-blue);
}

.home1 .news .btns button {
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
    border: 1px solid var(--light-blue);
    color: var(--light-blue);
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9;
}

.home1 .news .btns button:hover {
    background: var(--light-blue);
    color: #fff;
}

.home1 .news .btns .button-prev {
    left: -55px;
}

.home1 .news .btns .button-next {
    right: -55px;
}

/*===========================================================
4.6: content CSS
=============================================================*/

/* news topic css */
.home1 .content .topic .item-big{
    box-shadow: 0 0 64px hsla(0, 0%, 0%, 0.08);
}
.home1 .content .topic .item-big .image{
    position: relative;
}
.home1 .content .topic .item-big .image img{
    width: 100%;
}
.home1 .content .topic .item-big .image:after{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: hsla(0, 0%, 0%, 0.16);
}
.home1 .content .topic .item-big .text-part{
    padding: 30px;
}
.home1 .content .topic .item-big h5{
    font-weight: 500;
    text-transform: capitalize;
    color: var(--light-blue);
}
.home1 .content .topic .item-big h5:hover{
    color: var(--deep-blue);
}
.home1 .content .topic .item-big ul{
    padding-top: 5px;
    padding-bottom: 10px;
}
.home1 .content .topic .item-big ul li:first-child{
    padding-right: 10px;
}
.home1 .content .topic .item-big .read-more{
    display: inline-block;
    font-size: 18px;
    line-height: 45px;
    font-weight: 500;
    color: #fff;
    padding: 0 35px;
    text-transform: capitalize;
    background: var(--light-blue);
    margin-top: 15px;
}
.home1 .content .topic .item-big .read-more:hover{
    background: var(--deep-blue);
}

.home1 .content .topic .single-item .media img {
    margin-right: 30px;
}
.home1 .content .topic .item{
    box-shadow: 0 0 64px hsla(0, 0%, 0%, 0.08);
}
.home1 .content .topic .item .image{
    position: relative;
    overflow: hidden;
}
.home1 .content .topic .item .image img{
    width: 100%;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.home1 .content .topic .item:hover .image img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.home1 .content .topic .item .image .category{
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    background: #fff;
    color: var(--deep-blue);
    line-height: 42px;
    padding: 0 30px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.home1 .content .topic .item .image .category:hover{
    background: var(--light-blue);
    color: #fff;
}
.home1 .content .topic .item .text-part{
    padding: 30px 18px;
}
.home1 .content .topic .item h3{
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: var(--deep-blue);
}
.home1 .content .topic .item p{
    padding-top: 10px;
}
.home1 .content .topic .item p a{
    color: var(--grey);
}


.home1 .content .topic .single-item .media-body .cat-big {
    background: var(--deep-blue);
}

.home1 .content .topic .single-item .media-body .cat-big:hover {
    background: var(--light-blue);
}
.home1 .content .topic .item-big h3,
.home1 .content .topic .single-item h3 {
    font-weight: 700;
    color: var(--deep-blue);
    padding-top: 13px;
}
.home1 .content .topic .item h3:hover,
.home1 .content .topic .item p a:hover,
.home1 .content .topic .item-big h3:hover,
.home1 .content .topic .single-item h3:hover ,
.home1 .content .topic .item-big ul li p:hover{
    color: var(--light-blue);
}

.home1 .content .topic .single-item .media-body .para {
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 14px;
}

.home1 .content .topic .single-item ul li {
    position: relative;
}


.home1 .content .topic .single-item .media-body ul li p,
.home1 .content .topic .recipe .single-item ul li p {
    padding: 0;
    margin: 0;
    padding-left: 10px;
}

.home1 .content .topic .single-item ul li i {
    color: var(--grey);
    font-size: 14px;
}

.home1 .content .topic .single-item ul li a:hover p,
.home1 .content .topic .single-item ul li a:hover i {
    color: var(--light-blue);
}

.home1 .content .topic .single-item .cmnt li:first-child {
    padding-right: 30px;
}

.home1 .content .topic .single-item .cmnt li:first-child:after {
    content: "";
    height: 15px;
    width: 1px;
    background: #ddd;
    position: absolute;
    top: 5px;
    right: 15px;
}

/* recipe topic css */
.home1 .content .topic .recipe .single-item ul {
    padding-top: 10px;
    padding-bottom: 10px;
}

.home1 .content .topic .recipe .single-item .more {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--deep-blue);
    text-decoration: underline;
    display: inline-block;
    margin-top: 15px;
}

.home1 .content .topic .recipe .single-item .more:hover {
    color: var(--light-blue);
}

.home1 .content .topic .small-item .media img {
    margin-right: 15px;
}

.home1 .content .topic .small-item h5 {
    font-weight: 700;
    color: var(--deep-blue);
}

.home1 .content .topic .small-item h5:hover,
.home1 .content .topic .small-item .media-body a:hover p,
.home1 .content .topic .small-item .media-body a:hover i {
    color: var(--light-blue);
}

.home1 .content .topic .small-item .media-body p {
    text-transform: capitalize;
    margin: 0;
    padding: 0;
    padding-top: 5px;
}

.home1 .content .topic .small-item .media-body p i {
    color: var(--grey);
    margin-right: 10px;
}

/* video topic css */
.home1 .content .topic .video .item {
    position: relative;
}
.home1 .content .topic .video .item img{
    width: 100%;
}
.home1 .content .topic .video .item:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    background: hsla(0, 0%, 0%, 0.13);
}

.home1 .content .topic .video .item .icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 85px;
    width: 85px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, 0.46);
    padding: 8px;
    z-index: 9;
}
.home1 .content .topic .video .item .icon i{
    font-size: 40px;
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: var(--light-blue);
    text-align: center;
    line-height: 70px;
    color: #fff;
}

.home1 .content .topic .video .video-slider .item .icon {
    height: 50px;
    width: 50px;
    padding: 4px;
    opacity: 0;
}
.home1 .content .topic .video .video-slider .item .icon i{
    font-size: 30px;
    line-height: 42px;
}

.home1 .content .topic .video .video-slider .item:hover .icon {
    opacity: 1;
}

.home1 .content .topic .video .slider-part {
    position: relative;
}

.home1 .content .topic .video .btns button {
    height: 40px;
    width: 30px;
    border: 1px solid #fff;
    line-height: 40px;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9;
}

.home1 .content .topic .video .btns button:hover {
    background: var(--light-blue);
    border-color: var(--light-blue);
}

.home1 .content .topic .video .btns .btn-prev {
    left: 0;
}

.home1 .content .topic .video .btns .btn-next {
    right: 0;
}

/*===========================================================
4.7: content sidebar CSS
=============================================================*/

.home1 .sidebar .single-item {
    padding: 20px 30px 30px 30px;
    -webkit-border-top-left-radius: 20px;
    border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 5px solid var(--deep-blue);
    box-shadow: 3px 0 73px hsla(211, 100%, 50%, 0.1);
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home1 .sidebar .single-item:hover {
    border-color: var(--light-blue);
}

.home1 .sidebar .single-item h3 {
    text-transform: capitalize;
    padding-top: 0 !important;
}

.home1 .sidebar .single-item .title h3:hover {
    color: var(--deep-blue);
}

/* topic 1 */

.home1 .sidebar .author .single-item .image {
    height: 200px;
    width: 200px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin: auto;
    margin-bottom: 25px;
    margin-top: 20px;
}

.home1 .sidebar .author .single-item .image img {
    width: 100%;
}

.home1 .sidebar .author .single-item h3 {
    font-weight: 600;
}


.home1 .sidebar .author .single-item p {
    padding-top: 8px;
    padding-bottom: 20px;
}

.home1 .sidebar .author .single-item .social li {
    padding: 0 5px;
}


.home1 .sidebar .author .single-item .social li a {
    height: 40px;
    width: 40px;
    display: inline-block;
    text-align: center;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #ddd;
}

.home1 .sidebar .author .single-item .social li a i {
    line-height: 40px;
    font-size: 18px;
    color: var(--deep-blue);
}

.home1 .sidebar .author .single-item .social li a:hover {
    background: var(--light-blue);
    border-color: var(--light-blue);
}

.home1 .sidebar .author .single-item .social li a:hover i {
    color: #fff;
}

/* topic 2 */

.home1 .sidebar .title {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 20px;
}

.home1 .sidebar .follow ul li a {
    height: 60px;
}

.home1 .sidebar .follow ul li a i {
    line-height: 60px;
    width: 70px;
    font-size: 30px !important;
    border-right: 1px solid hsla(0, 0%, 100%, 0.46);
    color: #fff !important;
}

.home1 .sidebar .follow ul li a h5 {
    text-transform: capitalize;
    color: #fff;
    font-weight: 600;
}

.home1 .sidebar .follow ul li a .first {
    padding: 0 20px;
}

.home1 .sidebar .follow ul li .facebook {
    background: #3b5999;
}

.home1 .sidebar .follow ul li .dribbble {
    background: #007aff;
}

.home1 .sidebar .follow ul li .linkedin {
    background: #d01e1e;
}

.home1 .sidebar .follow ul li .skype {
    background: #536dfe;
}

.home1 .sidebar .follow ul li .pinterest {
    background: #f06292;
}

.home1 .sidebar .follow ul li .twitter {
    background: #293160;
}

.home1 .sidebar .follow ul li a:hover {
    opacity: 0.8;
}

/* topic 3 */

.home1 .sidebar .feed .single-item {
    padding-left: 20px;
    padding-right: 20px;
}

.home1 .sidebar .feed .media-body {
    text-align: left;
}
.home1 .sidebar  .ad img{
    width: 100%;
}

/* topic 5 */

.home1 .sidebar .category ul li {
    padding: 10px 0;
}

.home1 .sidebar .category ul li:first-child {
    padding-top: 0;
}

.home1 .sidebar .category ul li:last-child {
    padding-bottom: 0;
}

.home1 .sidebar .category ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.home1 .sidebar .category ul li p {
    text-transform: capitalize;
}

.home1 .sidebar .category ul li p i {
    margin-right: 10px;
}

.home1 .sidebar .category ul li a:hover p {
    color: var(--light-blue);
}

/* topic 6 */

.home1 .sidebar .tag .single-item {
    padding-bottom: 10px;
}

.home1 .sidebar .tag .all-tags a {
    display: inline-block;
    padding: 0 20px;
    line-height: 34px;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
    color: var(--grey);
    border: 1px solid #ddd;
    margin-right: 15px;
    margin-bottom: 20px;
}

.home1 .sidebar .tag .all-tags a:hover {
    background: var(--light-blue);
    border-color: var(--light-blue);
    color: #fff;
}

/*===========================================================
4.8: blog CSS
=============================================================*/
.home1 .blog {
    padding-top: 75px;
    padding-bottom: 80px;
}

.home1 .blog .single-item {
    position: relative;
}

.home1 .blog .single-item .title {
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home1 .blog .single-item .title:hover {
    border-color: var(--light-blue);
}

.home1 .blog .item-banner .overlay {
    padding: 150px 30px 30px 30px;
    background: hsla(0, 0%, 0%, 0.5);
}

.home1 .blog .item-banner ul li:first-child {
    margin-right: 20px;
}

.home1 .blog .item-banner ul li a {
    color: #fff;
    text-transform: capitalize;
}

.home1 .blog .item-banner ul li a i {
    padding-right: 10px;
}

.home1 .blog .item-banner ul li .cat-sm {
    background: var(--deep-blue);
}

.home1 .blog .item-banner ul li .cat-sm.active,
.home1 .blog .item-banner ul li .cat-sm:hover {
    background: var(--light-blue);
}

.home1 .blog .item-banner h5 {
    color: #fff;
    font-weight: 700;
    padding-top: 13px;
}

.home1 .blog .blog-slider {
    background: #fff;
}

.home1 .blog .blog-slider .single-item img {
    margin-right: 15px;
}

.home1 .blog .blog-slider .single-item h5 {
    font-weight: 700;
    color: var(--deep-blue);
}

.home1 .blog .blog-slider .single-item h5:hover {
    color: var(--light-blue);
}

.home1 .blog .blog-slider .single-item i {
    margin-right: 10px;
}

.home1 .blog .blog-slider .single-item p {
    text-transform: capitalize;
    padding-top: 5px;
}

.home1 .blog .blog-slider .single-item p:hover {
    color: var(--light-blue);
}

.home1 .blog .btns button {
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid var(--deep-blue);
    color: var(--light-blue);
    position: absolute;
    top: 0;
    right: 0;
}

.home1 .blog .btns button:hover {
    border-color: var(--light-blue);
}

.home1 .blog .btns .prev-btn,
.home1 .blog .btns .prev-btn1,
.home1 .blog .btns .prev-btn2 {
    right: 45px;
}

.home1 .blog .btns .next-btn,
.home1 .blog .btns .next-btn1,
.home1 .blog .btns .next-btn2 {
    right: 0;
}

/*===========================================================
4.9: insta CSS
=============================================================*/
.home1 .insta {
    position: relative;
}

.home1 .insta .insta-img {
    overflow: hidden;
}

.home1 .insta .insta-img img {
    width: 100%;
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -ms-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
}

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

.home1 .insta .insta-link {
    height: 130px;
    width: 130px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, 0.9);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9;
    text-align: center;
}

.home1 .insta .insta-link a {
    display: inline-block;
    margin-top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--deep-blue);
}

.home1 .insta .insta-link a:hover {
    color: var(--light-blue);
}

/*===========================================================
4.10: footer CSS
=============================================================*/
footer {
    padding-top: 100px;
}

/*===========================================================
4.10.1: footer-top CSS
=============================================================*/
.footer-top {
    padding-bottom: 60px;
}

.footer-top p {
    color: #fff;
}

.footer-top .about {
    padding-top: 30px;
    padding-right: 50px;
    padding-bottom: 30px;
}

.footer-top .address li i {
    font-size: 20px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background: #fff;
    color: var(--light-blue);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    margin-right: 20px;
}

.footer-top .address li:hover i {
    background: var(--light-blue);
    color: #fff;
}

.footer-top .address li:not(:last-child) {
    margin-bottom: 15px;
}

.footer-top .footer-title {
    padding-bottom: 25px;
}

.footer-top .footer-title h3 {
    color: #fff;
    font-weight: 600;
    text-transform: capitalize;
}

.footer-top ul li a p {
    text-transform: capitalize;
}

.footer-top .link li:not(:last-child) {
    padding-bottom: 10px;
}

.footer-top .link li a p:hover {
    color: var(--light-blue);
}

.footer-top form {
    margin-top: 20px;
    margin-bottom: 25px;
}

.footer-top form .inputs {
    background: transparent;
    height: 45px;
    padding: 0 10px;
    border: 1px solid #fff;
    width: 100%;
    color: #fff;
    outline: none;
}

.footer-top form .inputs::placeholder {
    text-transform: capitalize;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}

.footer-top form button {
    background: #fff;
    height: 45px;
    line-height: 45px;
    color: var(--light-blue);
    width: 60px;
    text-align: center;
}

.footer-top .social li:not(:last-child) {
    margin-right: 20px;
}

.footer-top .social li a i {
    font-size: 13px;
    color: #fff;
}

.footer-top .social li a:hover i {
    color: var(--light-blue);
}

/*===========================================================
4.10.2: footer-bottom CSS
=============================================================*/
.footer-bottom .footer-border {
    border-top: 1px solid #fff;
    padding: 20px 0;
}

.footer-bottom p {
    color: #fff;
}

.footer-bottom .footer-menu li a p {
    text-transform: capitalize;
}

.footer-bottom .footer-menu li a p:hover {
    color: var(--light-blue);
}

.footer-bottom .footer-menu li:not(:first-child) {
    padding-left: 30px;
}

/*===========================================================
 05: Home2 CSS
=============================================================*/

/*===========================================================
5.1: common CSS
=============================================================*/
.home2 .cat-sm,
.home2 .cat-big {
    background: var(--deep-blue);
    font-family: var(--heebo);
}

.home2 .cat-sm:hover,
.home2 .cat-big:hover {
    background: var(--red);
}

.home2 p {
    font-family: var(--heebo);
}

.home2 .btn-style {
    display: inline-block;
    font-size: 18px;
    line-height: 48px;
    padding: 0 35px;
    font-family: var(--raleway);
    font-weight: 600;
    text-transform: capitalize;
    color: #fff;
    background: var(--red);
    border-radius: 7px;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
    position: relative;
}

.home2 .btn-style:after {
    content: "";
    height: 8px;
    width: 8px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    right: 3px;
    bottom: 3px;
}

.home2 .btn-style:hover {
    background: var(--deep-blue);
}

/*===========================================================
5.2: header CSS
=============================================================*/

/*===========================================================
5.2.1: menubar CSS
=============================================================*/
.home2 .menubar {
    background: var(--deep-blue);
}

.home2 .menubar .right-part ul li {
    padding: 0 3px;
}

.home2 .menubar .right-part ul li a {
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    border-radius: 50%;
}

.home2 .menubar .right-part ul li a i {
    line-height: 40px;
    color: #fff;
    font-size: 20px;
}

.home2 .menubar .right-part ul li a.active,
.home2 .menubar .right-part ul li a:hover {
    background: var(--red);
}

/*===========================================================
5.2.2: banner CSS
=============================================================*/
.home2 .banner {
    position: relative;
}

.home2 .banner .banner-image {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transform: translate3d(20%, 0, 0);
    -moz-transform: translate3d(20%, 0, 0);
    -ms-transform: translate3d(20%, 0, 0);
    -o-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
    opacity: 0;
}

.home2 .banner .item1 .banner-image {
    right: 130px;
    width: 90%;
}

.home2 .banner .item2 .banner-image {
    right: 125px;
    width: 95%;
}

.home2 .banner .item3 .banner-image {
    right: 170px;
    width: 77%;
}
.home2 .banner .banner-image img{
    width: 100%;
}
.home2 .banner .banner-text {
    padding: 205px 0;
}

.home2 .banner-text .buttons {
    -webkit-transform: translate3d(0%, 30px, 0);
    transform: translate3d(0%, 30px, 0);
    opacity: 0;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.home2 .banner-text h1 {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.home2 .banner-text .buttons,
.home2 .banner-text h1,
.home2 .banner-text h4,
.home2 .banner-text p,
.home2 .banner .banner-image {
    -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
    transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
}

.home2 .banner .swiper-slide.swiper-slide-active .banner-text h1,
.home2 .banner .swiper-slide.swiper-slide-active .banner-text h4,
.home2 .banner .swiper-slide.swiper-slide-active .banner-text p,
.home2 .banner .swiper-slide.swiper-slide-active .buttons {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.home2 .banner .swiper-slide.swiper-slide-active .banner-image {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.home2 .banner-text h4 {
    text-transform: capitalize;
    font-family: var(--raleway);
    font-weight: 600;
    color: var(--deep-blue);
    width: fit-content;
    position: relative;
    margin-bottom: 15px;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
    opacity: 0;
}

.home2 .banner-text h4:after {
    content: "";
    height: 5px;
    width: 100%;
    background: hsla(0, 82%, 52%, 0.5);
    position: absolute;
    bottom: 3px;
    left: 0;
}

.home2 .banner-text h1 {
    font-weight: 700;
    color: var(--deep-blue);
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
    opacity: 0;
}

.home2 .banner-text p {
    padding-right: 50px;
    padding-top: 15px;
    padding-bottom: 30px;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
    opacity: 0;
}
.home2 .banner-text ul li:first-child{
    margin-right: 20px;
}
.home2 .banner-text .special {
    background: transparent;
    color: var(--deep-blue);
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
}
.home2 .banner-text .special:after{
    display: none;
}

.home2 .banner-text .special i {
    padding-right: 14px;
    font-size: 40px;
}

.home2 .banner-text .special:hover {
    color: var(--red);
}
.home2 .banner-text .special:hover:after{
    background: var(--red);
}

.home2 .banner .slider-part {
    width: 370px;
    height: auto;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 30px;
    z-index: 99;
}

.home2 .banner .slider-part .item {
    background: #f1f8ff;
    border: 1px solid #ddd;
    padding: 20px;
}

.home2 .banner-slide .swiper-container,
.home2 .banner-slide .swiper-wrapper {
    width: 100%;
    height: 430px;
}

.home2 .banner .slider-part .item img {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    margin-right: 15px;
}

.home2 .banner .slider-part .item h5 {
    font-family: var(--raleway);
    font-weight: 600;
    color: var(--deep-blue);
    margin-top: 5px;
}

.home2 .banner .slider-part .item h5:hover {
    color: var(--red);
}

.home2 .banner .slider-part .btns button {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 1px solid var(--red);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}

.home2 .banner .slider-part .btns button i {
    line-height: 40px;
    color: var(--red);
}

.home2 .banner .slider-part .btns button:hover {
    background: var(--red);
}

.home2 .banner .slider-part .btns button:hover i {
    color: #fff;
}

.home2 .banner .slider-part .btns .btn-up {
    top: -55px;
}

.home2 .banner .slider-part .btns .btn-down {
    bottom: -55px;
}

.home2 .banner .slider-part .btn-up.swiper-button-disabled,
.home2 .banner .slider-part .btn-down.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

/*===========================================================
5.3: news CSS
=============================================================*/
.home2 .news .item {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.home2 .news .item .image {
    overflow: hidden;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}

.home2 .news .item .image .main-img {
    width: 100%;
}

.home2 .news .item .image img {
    width: 100%;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home2 .news .item:hover .image img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.home2 .news .item .text-part {
    padding: 15px 20px;
    -webkit-box-shadow: 3px 0 95px hsla(0, 3%, 45%, 0.05);
    box-shadow: 3px 0 95px hsla(0, 3%, 45%, 0.05);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home2 .news .item:hover .text-part {
    -webkit-box-shadow: 3px 0 95px hsla(0, 24%, 8%, 0.1);
    box-shadow: 3px 0 95px hsla(0, 24%, 8%, 0.1);
}

.home2 .news .item .cat p {
    font-family: var(--heebo);
    color: var(--deep-blue);
    text-transform: capitalize;
}
.home2 .news .item ul li:first-child{
    padding-right: 15px;
}
.home2 .news .item ul li p {
    font-family: var(--heebo);
    font-size: 15px;
    text-transform: capitalize;
}

.home2 .news .item h4 {
    font-family: var(--raleway);
    font-weight: 700;
    color: var(--deep-blue);
    padding-bottom: 7px;
}

.home2 .news .item a:hover p,
.home2 .news .item a:hover h4 {
    color: var(--red);
}

/*===========================================================
5.4: content CSS
=============================================================*/

/*===========================================================
5.4.1: left content CSS
=============================================================*/

/* 5.1: topic css */

.send .topic{
 position: relative;
}

.send .content .topic   {
    border-bottom: 1px solid #ddd;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
    margin-bottom: 30px;
}

.send .content .topic .title h5 {
    font-family: var(--raleway);
    color: #fff;
    padding: 0 20px;
    width: max-content;
    line-height: 30px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    text-transform: capitalize;
    background: var(--deep-blue);
}

.send .content .topic .title:hover {
    border-color: var(--red);
}

.send .content .topic .title:hover h5 {
    background: var(--red);
}




/**/


/**/

.home2 .content .topic {
    position: relative;
}

.home2 .content .topic   {
    border-bottom: 1px solid #ddd;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
    margin-bottom: 30px;
}

.home2 .content .topic .title h5 {
    font-family: var(--raleway);
    color: #fff;
    padding: 0 20px;
    width: max-content;
    line-height: 30px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    text-transform: capitalize;
    background: var(--deep-blue);
}

.home2 .content .topic .title:hover {
    border-color: var(--red);
}

.home2 .content .topic .title:hover h5 {
    background: var(--red);
}

.home2 .content .topic .nav-tabs {
    border: 0;
    position: absolute;
    top: 0;
    right: 0;
}

.home2 .content .topic .nav-tabs .nav-item .nav-link {
    color: var(--grey);
    background-color: #fff;
    text-transform: capitalize;
    border: 0;
    border-radius: 0;
    padding: 0 10px;
    font-family: var(--heebo);
    font-weight: 400;
}

.home2 .content .topic .nav-tabs .nav-link:hover {
    color: var(--red);
}

.home2 .content .topic .nav-tabs .nav-item.show .nav-link,
.home2 .content .topic .nav-tabs .nav-link.active {
    border: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    padding: 0 10px;
    margin: 0;
    color: var(--red);
}

.home2 .content .topic .tab-pane.active {
    animation: slide-down 0.8s ease-out;
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.home2 .content .topic .item .image {
    position: relative;
}

.home2 .content .topic .item .image img {
    width: 100%;
}

.home2 .content .topic .item .image p {
    width: max-content;
    padding: 0 15px;
    line-height: 30px;
    text-transform: capitalize;
    background: var(--red);
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
}

.home2 .content .topic .item:hover .image p {
    opacity: 1;
    visibility: visible;
}

.home2 .content .topic .item .text-part {
    box-shadow: 2px 0 48px hsla(0, 0%, 0%, 0.1);
    padding: 15px 20px 25px 20px;
}
.home2 .content .topic .item ul li:first-child{
    padding-right: 15px;
}
.home2 .content .topic .item ul li p {
    font-size: 15px;
}

.home2 .content .topic .item h4 {
    font-weight: 700;
    color: var(--deep-blue);
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: var(--raleway);
}

.home2 .content .topic .item a:hover p,
.home2 .content .topic .item a:hover h4 {
    color: var(--red);
}

/* small item */

.home2 .content .topic .small-item .media .main-img {
    margin-right: 15px;
}

.home2 .content .topic .small-item .media img {
    width: 100%;
}

.home2 .content .topic .small-item .media-body h5 {
    font-family: var(--raleway);
    font-weight: 700;
    color: var(--deep-blue);
}

.home2 .content .topic .small-item .media-body a:hover h5 {
    color: var(--red);
}

.home2 .content .topic .small-item .media-body p {
    text-transform: capitalize;
    padding-top: 8px;
}

.home2 .content .topic .small-item .media-body p i {
    padding-right: 10px;
}

.home2 .content .topic .small-item .media-body a:hover p {
    color: var(--red);
}

/* single item */
.home2 .content .topic .single-item .main-img {
    margin-right: 30px;
}

.home2 .content .topic .single-item img {
    width: 100%;
}

.home2 .content .topic .single-item h3 {
    font-family: var(--raleway);
    font-weight: 700;
    color: var(--deep-blue);
    padding-top: 10px;
    padding-bottom: 10px;
}

.home2 .content .topic .single-item h3:hover {
    color: var(--red);
}

.home2 .content .topic .single-item .cmnt {
    margin-top: 10px;
}

.home2 .content .topic .single-item .cmnt li {
    position: relative;
}

.home2 .content .topic .single-item .cmnt li:first-child {
    padding-right: 30px;
}

.home2 .content .topic .single-item .cmnt li:first-child:after {
    content: "";
    height: 15px;
    width: 1px;
    background: #ddd;
    position: absolute;
    top: 5px;
    right: 15px;
}

.home2 .content .topic .single-item .cmnt li i {
    color: var(--grey);
    padding-right: 10px;
}

.home2 .content .topic .single-item .cmnt li a:hover p,
.home2 .content .topic .single-item .cmnt li a:hover i {
    color: var(--red);
}

/* item-banner */

.home2 .content .topic .item-banner .overlay {
    padding: 150px 30px 30px 30px;
    background: hsla(0, 0%, 0%, 0.4);
}

.home2 .content .topic .item-banner ul li:first-child {
    margin-right: 20px;
}

.home2 .content .topic .item-banner ul li a p {
    color: #fff;
    text-transform: capitalize;
}

.home2 .content .topic .item-banner ul li a i {
    padding-right: 10px;
}

.home2 .content .topic .item-banner h5 {
    color: #fff;
    font-family: var(--raleway);
    font-weight: 700;
    padding-top: 13px;
}

.home2 .content .topic .item-banner ul li a:hover p,
.home2 .content .topic .item-banner h5:hover {
    color: var(--red);
}


/*===========================================================
5.4.2: right content CSS
=============================================================*/

/* topic */

.home2 .right-content .topic .single-item {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
    padding: 10px 20px 30px 20px;
}

.home2 .right-content .topic .title {
    border: 0;
    margin-bottom: 25px;
}

.home2 .right-content .topic .title:hover h3 {
    color: var(--deep-blue);
}

.home2 .right-content .topic .title h3 {
    text-transform: capitalize;
    padding: 0;
    position: relative;
}

.home2 .right-content .topic .title h3:after {
    content: "";
    height: 2px;
    width: 120px;
    background: url(../images/home2/border.png) no-repeat center;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

/* author */

.home2 .right-content .author .single-item {
    padding: 0;
}

.home2 .right-content .author .single-item img {
    margin: 0;
    padding: 0;
    width: 100%;
}

.home2 .right-content .author .text-part {
    padding: 20px 25px 21px 25px;
}

.home2 .right-content .author h3 {
    padding-top: 0 !important;
}

.home2 .right-content .author .social {
    padding-top: 15px;
}

.home2 .right-content .author .social li {
    padding: 0 5px;
}

.home2 .right-content .author .social li a {
    height: 40px;
    width: 40px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #ddd;
}

.home2 .right-content .author .social li a i {
    line-height: 40px;
    color: var(--deep-blue);
}

.home2 .right-content .author .social li a:hover {
    background: var(--red);
    border-color: var(--red);
}

.home2 .right-content .author .social li a:hover i {
    color: #fff;
}

/* category */

.home2 .right-content .category ul li {
    padding-top: 15px;
    padding-bottom: 5px;
}

.home2 .right-content .category ul li:first-child {
    padding-top: 0;
}

.home2 .right-content .category ul li:last-child {
    padding-bottom: 0;
}

.home2 .right-content .category ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home2 .right-content .category ul li:hover {
    border-color: var(--red);
}

.home2 .right-content .category ul li p {
    text-transform: capitalize;
}

.home2 .right-content .category ul li:hover p {
    color: var(--red);
}

/* ad */

.home2 .right-content .ad .single-item {
    padding: 0;
    border: 0;
}

.home2 .right-content .ad .single-item .item .main-img,
.home2 .right-content .ad .single-item .item img {
    width: 100%;
}

.home2 .right-content .ad .ad-slider {
    position: relative;
}

.home2 .right-content .ad .ad-slider .btns button {
    width: 30px;
    height: 40px;
    border: 1px solid #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9;
}

.home2 .right-content .ad .ad-slider .btns button:hover {
    background: var(--red);
    border-color: var(--red);
}

.home2 .right-content .ad .ad-slider .btns button i {
    line-height: 40px;
    color: #fff;
}

.home2 .right-content .ad .ad-slider .btns .ad-prev {
    left: 0;
}

.home2 .right-content .ad .ad-slider .btns .ad-next {
    right: 0;
}

/* update */
.home2 .right-content .update p {
    padding: 0 20px;
}

.home2 .right-content .update form {
    margin-top: 12px;
}

.home2 .right-content .update form .inputs {
    background: #fff3f3;
    width: 100%;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    height: 55px;
    border: 0;
    outline: none;
    padding: 0 20px;
    text-align: center;
}

.home2 .right-content .update form .inputs::placeholder {
    font-family: var(--heebo);
    font-size: 16px;
    text-transform: capitalize;
    color: var(--grey);
}

.home2 .right-content .update form button {
    width: 100%;
    height: 55px;
}

.home2 .right-content .update form label {
    position: relative;
    width: 100%;
}

.home2 .right-content .update form .check {
    opacity: 0;
    display: none;
}

.home2 .right-content .update form .check-custom {
    position: absolute;
    top: 15px;
    left: 30px;
    height: 25px;
    width: 25px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
}

.home2 .right-content .update form .check:checked ~ .check-custom {
    background: var(--red);
    border-color: var(--red);
}

.home2 .right-content .update form .check-custom:after {
    content: "";
    position: absolute;
    display: none;
    left: 9px;
    top: 3px;
    width: 6px;
    height: 13px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer;
}

.home2 .right-content .update form .check:checked ~ .check-custom:after {
    display: block;
}

.home2 .right-content .update form .term {
    font-size: 18px;
    text-align: left;
    padding-left: 65px;
}

/* tag */

.home2 .right-content .tag .single-item {
    padding-bottom: 10px;
}

.home2 .right-content .tag .all-tags a {
    display: inline-block;
    padding: 0 20px;
    line-height: 34px;
    font-family: var(--heebo);
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
    color: var(--grey);
    border: 1px solid #ddd;
    margin-right: 15px;
    margin-bottom: 20px;
}

.home2 .right-content .tag .all-tags a:hover {
    color: #fff;
    border-color: var(--red);
    background: var(--red);
}

/*===========================================================
5.5: video CSS
=============================================================*/
.home2 .video {
    background: #f3f8fb;
}

.home2 .video .single-item .image {
    position: relative;
    margin-right: 30px;
}

.home2 .video .single-item .image img {
    width: 100%;
}

.home2 .video .small-item .single-item .image {
    margin-right: 20px;
}

.home2 .video .single-item .image a {
    display: inline-block;
    height: 85px;
    width: 85px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, 0.46);
    position: absolute;
    padding: 8px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.home2 .video .small-item .single-item .image a {
    height: 50px;
    width: 50px;
    padding: 4px;
}

.home2 .video .single-item .image a i {
    display: block;
    font-size: 40px;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: var(--red);
    text-align: center;
    line-height: 70px;
    color: #fff;
}

.home2 .video .small-item .single-item .image a i {
    line-height: 42px;
    font-size: 30px;
}

.home2 .video .single-item .date {
    text-transform: capitalize;
    display: inline-block;
    margin-bottom: 5px;
}

.home2 .video .single-item h3 {
    font-family: var(--raleway);
    font-weight: 700;
    color: var(--deep-blue);
    padding-bottom: 10px;
}

.home2 .video .single-item a:hover p,
.home2 .video .single-item h3:hover,
.home2 .video .small-item .single-item a:hover p,
.home2 .video .small-item .single-item h5:hover {
    color: var(--red);
}

.home2 .video .single-item .author {
    margin-top: 25px;
}

.home2 .video .single-item .author img {
    height: 45px;
    width: 45px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 15px;
}

.home2 .video .single-item .author p {
    font-weight: 500;
}

.home2 .video .small-item .single-item {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.home2 .video .small-item .single-item h5 {
    font-family: var(--raleway);
    font-weight: 700;
    color: var(--deep-blue);
}

.home2 .video .small-item .single-item p {
    text-transform: capitalize;
    padding-top: 7px;
}

/*===========================================================
5.6: insta CSS
=============================================================*/
.home2 .insta .slider-part .item {
    position: relative;
    overflow: hidden;
}

.home2 .insta .slider-part .item img {
    width: 100%;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home2 .insta .slider-part .item:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.home2 .insta .slider-part .item a {
    display: inline-block;
    text-align: center;
    height: 50px;
    width: 50px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: var(--red);
    border: 4px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
}

.home2 .insta .slider-part .item:hover a {
    opacity: 1;
    visibility: visible;
}

.home2 .insta .slider-part .item a i {
    line-height: 45px;
    color: #fff;
    font-size: 24px;
}

.home2 .insta .slider-part .btns button {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 1px solid var(--red);
    text-align: center;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9;
}

.home2 .insta .slider-part .btns .insta-prev {
    left: -50px;
}

.home2 .insta .slider-part .btns .insta-next {
    right: -50px;
}

.home2 .insta .slider-part .btns button i {
    color: var(--red);
    line-height: 40px;
}

.home2 .insta .slider-part .btns button:hover {
    background: var(--red);
}

.home2 .insta .slider-part .btns button:hover i {
    color: #fff;
}

/*===========================================================
5.7: footer-top CSS
=============================================================*/

/*===========================================================
5.7.1: footer-top CSS
=============================================================*/
.home2 .footer-top .address li i {
    color: var(--red);
}

.home2 .footer-top .address li:hover i {
    background: var(--red);
    color: #fff;
}

.home2 .footer-top .link li a p:hover,
.home2 .footer-top form button,
.home2 .footer-top .social li a:hover i {
    color: var(--red);
}



/*===========================================================
5.7.2: footer-bottom CSS
=============================================================*/
.home2 .footer-bottom .footer-menu li a p:hover {
    color: var(--red);
}


/*===========================================================
 6: Home3 CSS
=============================================================*/

/*===========================================================
6.1: common CSS
=============================================================*/
.home3 p {
    font-family: var(--heebo);
}

/*===========================================================
6.2: sidemenu CSS
=============================================================*/

.home3 .side-menu .topic .title {
    padding-bottom: 20px;
}

.home3 .side-menu .topic .title h3 {
    position: relative;
    border: 0;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--deep-blue);
}

.home3 .side-menu .topic .title h3:before {
    content: "";
    height: 2px;
    width: 50px;
    background: #ddd;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
}

.home3 .side-menu .topic .title h3:after {
    content: "";
    height: 2px;
    width: 50px;
    background: #ddd;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
}


.home3 .side-menu .category ul li {
    padding: 0;
}

.home3 .side-menu .category ul li:not(:last-child) {
    border: 0;
}

.home3 .side-menu .category ul li:not(:last-child) {
    margin-bottom: 20px;
}

.home3 .side-menu .category ul li .overlay {
    background: #e5efff;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home3 .side-menu .category ul li a {
    padding: 12px 20px;
}

.home3 .side-menu .category ul li a p {
    text-transform: capitalize;
}

.home3 .side-menu .category ul li.active .overlay,
.home3 .side-menu .category ul li:hover .overlay {
    background: hsla(0, 0%, 0%, 0.64);
}

.home3 .side-menu .category ul li.active a p,
.home3 .side-menu .category ul li:hover a p {
    color: #fff;
    background: transparent;
}

.home3 .side-menu .topic .small-item .image {
    height: 95px;
    width: 95px;
    border-radius: 50%;
    overflow: hidden;
}

.home3 .side-menu .topic .small-item .media-body {
    padding-left: 20px;
}

.home3 .side-menu .topic .small-item h5 {
    color: var(--deep-blue);
    font-weight: 700;
    font-size: 16px;
}

.home3 .side-menu .topic .small-item p {
    text-transform: capitalize;
    padding-top: 8px;
}

.home3 .side-menu .topic .small-item p i {
    padding-right: 5px;
}

.home3 .side-menu .topic .small-item h5:hover,
.home3 .side-menu .topic .small-item p:hover {
    color: var(--blue);
}

.home3 .side-menu .insta .all-news {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: auto auto auto;
}

.home3 .side-menu .insta .all-news .news-item a {
    display: block;
    width: 100%;
    position: relative;
}

.home3 .side-menu .insta .all-news .news-item a i {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #fff;
    opacity: 0;
}

.home3 .side-menu .insta .all-news .news-item a:hover i {
    opacity: 1;
}

.home3 .side-menu .insta .all-news .news-item .img {
    width: 100%;
}

/*===========================================================
6.3: header CSS
=============================================================*/

/*===========================================================
6.3.1: top-menu CSS
=============================================================*/
.home3 .top-menu {
    padding: 25px 0;
    border-bottom: 1px solid #ddd;
}

.home3 .top-menu .left-part ul li button i {
    font-size: 30px;
}
.home3 .top-menu .left-part ul li .sidemenu-btn i{
    display: block;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}

.home3 .top-menu .left-part ul li:not(:last-child) {
    margin-right: 45px;
}
.home3 .top-menu .left-part ul li .cart{
    display: inline-block;
    position: relative;
}
.home3 .top-menu .left-part ul li .cart i{
    font-size: 30px;
    color: var(--deep-blue);
}
.home3 .top-menu .left-part ul li .cart span{
    display: inline-block;
    position: absolute;
    top: 0;
    right: -10px;
    height: 18px;
    width: 18px;
    text-align: center;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.home3 .top-menu .right-part ul li,
.home3 .menubar .right-part ul li {
    padding: 0 3px;
}

.home3 .top-menu .right-part ul li a,
.home3 .menubar .right-part ul li a {
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.home3 .top-menu .right-part ul li a i,
.home3 .menubar .right-part ul li a i {
    line-height: 40px;
    font-size: 20px;
    color: var(--deep-blue);
}

.home3 .top-menu .right-part ul li a.active,
.home3 .menubar .right-part ul li a.active,
.home3 .top-menu .right-part ul li a:hover,
.home3 .menubar .right-part ul li a:hover {
    background: var(--blue);
}

.home3 .top-menu .right-part ul li a.active i,
.home3 .menubar .right-part ul li a.active i,
.home3 .top-menu .right-part ul li a:hover i,
.home3 .menubar .right-part ul li a:hover i {
    color: #fff;
}


/*===========================================================
6.3.2: menubar CSS
=============================================================*/
.home3 .menubar {
    background: #fff;
}

.home3 .menubar .logo,
.home3 .menubar .right-part {
    display: none;
}

.home3 .menubar.sticky .logo,
.home3 .menubar.sticky .right-part {
    display: block;
}

/*===========================================================
6.3.3: banner CSS
=============================================================*/
.home3 .banner .overlay {
    background: hsla(0, 0%, 0%, 0.25);
}

.home3 .banner .banner-text {
    padding: 155px 0;
}

.home3 .banner .banner-text h1 {
    font-size: 90px;
    line-height: 102px;
    color: #fff;
    font-weight: 700;
    text-transform: capitalize;
    padding-bottom: 25px;
}

.home3 .banner .banner-text p {
    color: #fff;
    padding: 0 80px;
}

.home3 .banner .banner-text a {
    display: inline-block;
    color: #fff;
    text-transform: capitalize;
    padding: 0 35px;
    font-size: 18px;
    margin-top: 20px;
    line-height: 45px;
    font-family: var(--heebo);
    font-weight: 500;
    border-radius: 27px;
    background: var(--blue);
}

.home3 .banner .banner-text a:hover {
    background: var(--deep-blue);
}

.home3 .banner .slider-part {
    position: relative;
}

.home3 .banner .btns button {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 1px solid var(--blue);
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9;
}

.home3 .banner .btns button i {
    font-size: 22px;
    line-height: 40px;
    color: var(--blue);
}

.home3 .banner .btns button:hover {
    background: var(--blue);
}

.home3 .banner .btns button:hover i {
    color: #fff;
}

.home3 .banner .btns .gym-banner-prev {
    left: -55px;
}

.home3 .banner .btns .gym-banner-next {
    right: -55px;
}

/*===========================================================
6.4: video CSS
=============================================================*/
.home3 .video {
    padding-top: 80px;
    padding-bottom: 65px;
}

.home3 .video .fancybox {
    position: relative;
    display: block;
}

.home3 .video .fancybox:before {
    content: "";
    width: 30px;
    height: 30px;
    border-top: 5px solid hsla(0, 0%, 0%, 0.45);
    border-left: 5px solid hsla(0, 0%, 0%, 0.45);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.home3 .video .fancybox:after {
    content: "";
    width: 30px;
    height: 30px;
    border-bottom: 5px solid hsla(0, 0%, 0%, 0.45);
    border-right: 5px solid hsla(0, 0%, 0%, 0.45);
    position: absolute;
    bottom: 7px;
    right: 0px;
    z-index: 1;
}

.home3 .video .fancybox video {
    width: 100%;
}

.home3 .video .fancybox h2 {
    text-transform: uppercase;
    font-size: 30px;
    font-weight: 700;
    background-color: #fff;
    color: var(--deep-blue);
    mix-blend-mode: screen;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.home3 .video .fancybox h2 span:after {
    content: "";
    width: 50px;
    height: 5px;
    display: block;
    background: var(--deep-blue);
    margin-top: 5px;
}

.home3 .video .fancybox:hover h2 {
    mix-blend-mode: normal;
    background: none;
    color: #fff;
}

.home3 .video .fancybox:hover h2 span:after {
    background: #fff;
}

.home3 .video .fancybox:hover:after,
.home3 .video .fancybox:hover:before {
    display: none;
}



/*===========================================================
6.5: content CSS
=============================================================*/

/*===========================================================
6.5.1: left content CSS
=============================================================*/

.home3 .content .topic .title {
    padding-bottom: 30px;
}

.home3 .content .topic .title h3 {
    font-weight: 700;
    text-transform: capitalize;
    color: var(--deep-blue);
    border-bottom: 2px solid #ddd;
}

.home3 .content .topic .item .image {
    position: relative;
    overflow: hidden;
}

.home3 .content .topic .item .image img {
    width: 100%;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home3 .content .topic .item:hover .image img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.home3 .content .topic .item .image .category {
    line-height: 28px;
    padding: 0 12px;
    font-family: var(--heebo);
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 400;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    color: var(--deep-blue);
}

.home3 .content .topic .item .image .category:hover {
    color: #fff;
    background: var(--blue);
}

.home3 .content .topic .item .text-part {
    padding: 20px 20px 25px 20px;
    box-shadow: 2px 0 48px hsla(0, 0%, 0%, 0.1);
}

.home3 .content .topic .item ul li:first-child {
    margin-right: 15px;
}

.home3 .content .topic .item ul li p {
    text-transform: capitalize;
}

.home3 .content .topic .item h3 {
    font-weight: 700;
    color: var(--deep-blue);
    padding-top: 15px;
    padding-bottom: 10px;
}

.home3 .content .topic .item ul li p:hover,
.home3 .content .topic .item h3:hover {
    color: var(--blue);
}

.home3 .content .topic .item-horizontal .text-part {
    box-shadow: none;
    padding: 0;
    padding-right: 55px;
    padding-left: 30px;
}

.home3 .content .topic .item-horizontal h3 {
    padding-top: 0;
}

.home3 .content .topic .item-horizontal ul {
    padding-bottom: 10px;
}

.home3 .content .topic .small-item .image {
    height: 95px;
    width: 95px;
    border-radius: 50%;
    overflow: hidden;
}

.home3 .content .topic .small-item .media-body {
    padding-left: 20px;
    padding-right: 30px;
}

.home3 .content .topic .small-item h5 {
    color: var(--deep-blue);
    font-weight: 700;
}

.home3 .content .topic .small-item p {
    text-transform: capitalize;
    padding-top: 8px;
}

.home3 .content .topic .small-item p i {
    padding-right: 5px;
}

.home3 .content .topic .small-item h5:hover,
.home3 .content .topic .small-item p:hover {
    color: var(--blue);
}

/*===========================================================
6.5.2: right-content CSS
=============================================================*/
.home3 .right-content .topic .title {
    padding-bottom: 20px;
}

.home3 .right-content .topic .title h3 {
    position: relative;
    border: 0;
}

.home3 .right-content .topic .title h3:before {
    content: "";
    height: 2px;
    width: 90px;
    background: #ddd;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
}

.home3 .right-content .topic .title h3:after {
    content: "";
    height: 2px;
    width: 90px;
    background: #ddd;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
}

/* about */

.home3 .right-content .about .person-img {
    height: 200px;
    width: 200px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    margin: auto;
    margin-bottom: 10px;
}

.home3 .right-content .about h3 {
    font-weight: 700;
    color: var(--deep-blue);
}

.home3 .right-content .about h3:hover{
    color: var(--blue);
}

.home3 .right-content .about p {
    padding: 10px 30px 15px 30px;
}

.home3 .right-content .about ul li {
    padding: 0 5px;
}

.home3 .right-content .about ul li a {
    height: 40px;
    width: 40px;
    display: inline-block;
    text-align: center;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #ddd;
}

.home3 .right-content .about ul li a i {
    line-height: 40px;
    color: var(--deep-blue);
}

.home3 .right-content .about ul li a:hover {
    background: var(--blue);
}

.home3 .right-content .about ul li a:hover i {
    color: #fff;
}

/* category */

.home3 .right-content .category ul li:not(:last-child) {
    margin-bottom: 20px;
}

.home3 .right-content .category ul li .overlay {
    background: #e5efff;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home3 .right-content .category ul li a {
    padding: 12px 20px;
}

.home3 .right-content .category ul li a p {
    text-transform: capitalize;
}

.home3 .right-content .category ul li.active .overlay,
.home3 .right-content .category ul li:hover .overlay {
    background: hsla(0, 0%, 0%, 0.64);
}

.home3 .right-content .category ul li.active a p,
.home3 .right-content .category ul li:hover a p {
    color: #fff;
}

/* subscribe */
.home3 .right-content .subscribe form {
    padding-left: 20px;
    padding-right: 20px;
}

.home3 .right-content .subscribe form .inputs {
    background: #e5efff;
    width: 100%;
    border-radius: 7px;
    height: 55px;
    border: 0;
    outline: none;
    padding: 0 20px;
    text-align: center;
}

.home3 .right-content .subscribe form .inputs::placeholder {
    font-family: var(--heebo);
    font-size: 16px;
    text-transform: capitalize;
    color: var(--grey);
}

.home3 .right-content .subscribe form button {
    width: 100%;
    height: 55px;
    border-radius: 7px;
    background: var(--blue);
    text-transform: capitalize;
    color: #fff;
    font-family: var(--heebo);
    margin-top: 20px;
}

.home3 .right-content .subscribe form button:hover {
    background: var(--deep-blue);
}

.home3 .right-content .subscribe form label {
    position: relative;
    width: 100%;
}

.home3 .right-content .subscribe form .check {
    opacity: 0;
    display: none;
}

.home3 .right-content .subscribe form .check-custom {
    position: absolute;
    top: 15px;
    left: 30px;
    height: 25px;
    width: 25px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
}

.home3 .right-content .subscribe form .check:checked ~ .check-custom {
    background: var(--blue);
    border-color: var(--blue);
}

.home3 .right-content .subscribe form .check-custom:after {
    content: "";
    position: absolute;
    display: none;
    left: 9px;
    top: 3px;
    width: 6px;
    height: 13px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer;
}

.home3 .right-content .subscribe form .check:checked ~ .check-custom:after {
    display: block;
}

.home3 .right-content .subscribe form .term {
    font-size: 18px;
    text-align: left;
    padding-left: 65px;
}

/* instagram */
.home3 .right-content .insta .all-news {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: auto auto auto;
}

.home3 .right-content .insta .all-news .news-item a {
    display: block;
    width: 100%;
    position: relative;
}
.home3 .right-content .insta .all-news .news-item a img{
    width: 100%;
}
.home3 .right-content .insta .all-news .news-item a i {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #fff;
    opacity: 0;
}

.home3 .right-content .insta .all-news .news-item a:hover i {
    opacity: 1;
}

.home3 .right-content .insta .all-news .news-item .img {
    width: 100%;
}

/*===========================================================
6.6: news CSS
=============================================================*/
.home3 .news {
    padding-bottom: 80px;
}

.home3 .news .content .small-item .image {
    border-radius: 0;
    height: 90px;
    width: 90px;
}

.home3 .news .content .small-item .media-body {
    padding-left: 15px;
    padding-right: 40px;
}

/*===========================================================
6.7: footer CSS
=============================================================*/

/*===========================================================
6.7.1: footer-top CSS
=============================================================*/
.home3 .footer-top .address li i {
    color: var(--blue);
}

.home3 .footer-top .address li:hover i {
    background: var(--blue);
    color: #fff;
}

.home3 .footer-top .link li a p:hover,
.home3 .footer-top form button,
.home3 .footer-top .social li a:hover i {
    color: var(--blue);
}


/*===========================================================
6.7.2: footer-bottom CSS
=============================================================*/
.home3 .footer-bottom .footer-menu li a p:hover {
    color: var(--blue);
}


/*===========================================================
 07: Home4 CSS
=============================================================*/

/*===========================================================
7.1: common CSS
=============================================================*/
.home4 p {
    font-family: var(--heebo);
}

/*===========================================================
7.2: sidemenu CSS
=============================================================*/

.home4 .side-menu {
    left: auto;
    right: -350px;
}

.home4 .side-menu.show {
    right: 0;
}

.home4 .side-menu .topic .title {
    padding-bottom: 30px;
}

.home4 .side-menu .topic .title h3 {
    border: 0;
    position: relative;
    font-weight: 700;
    text-transform: capitalize;
}

.home4 .side-menu .topic .title h3:after {
    content: '';
    height: 2px;
    width: 70px;
    background: url(../images/home4/border.png) no-repeat center;
    position: absolute;
    bottom: 0;
    left: 0;
}

.home4 .side-menu .category ul li p:last-child {
    height: auto;
    width: auto;
}

.home4 .side-menu .category ul li:hover p:last-child {
    background: transparent;
    color: var(--sky-blue);
}

.home4 .side-menu .category ul li:hover p {
    color: var(--sky-blue);
}

.home4 .side-menu .small-item .media-body {
    padding-left: 15px;
}

.home4 .side-menu .small-item .media-body h5 {
    color: var(--deep-blue);
    font-weight: 700;
    font-size: 16px;
}

.home4 .side-menu .small-item .media-body p {
    padding-top: 5px;
    text-transform: capitalize;
}

.home4 .side-menu .small-item .media-body p i {
    margin-right: 10px;
}

.home4 .side-menu .small-item .media-body h5:hover,
.home4 .side-menu .small-item .media-body p:hover {
    color: var(--sky-blue);
}

/*===========================================================
7.3: header CSS
=============================================================*/

/*===========================================================
7.3.1: top-menu CSS
=============================================================*/
.home4 .top-menu {
    padding: 25px 0;
    border-bottom: 1px solid #ddd;
}


.home4 .top-menu .left-part ul li,
.home4 .menubar .left-part ul li {
    padding: 0 3px;
}

.home4 .top-menu .left-part ul li a,
.home4 .menubar .left-part ul li a {
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    border-radius: 50%;
}

.home4 .top-menu .left-part ul li a i {
    line-height: 40px;
    font-size: 20px;
    color: var(--deep-blue);
}

.home4 .top-menu .left-part ul li a.active,
.home4 .top-menu .left-part ul li a:hover {
    background: var(--sky-blue);
}

.home4 .top-menu .left-part ul li a.active i,
.home4 .top-menu .left-part ul li a:hover i {
    color: #fff;
}


.home4 .modal-header .close:hover,
.home4 .modal-body button:hover {
    background: var(--sky-blue);
}

.home4 .top-menu .right-part ul li button i,
.home4 .menubar .right-part ul li button i {
    font-size: 30px;
}

.home4 .top-menu .right-part ul li:not(:last-child),
.home4 .menubar .right-part ul li:not(:last-child) {
    margin-right: 45px;
}

.home4 .top-menu .right-part ul li .cart,
.home4 .menubar .right-part ul li .cart{
    display: inline-block;
    position: relative;
}
.home4 .top-menu .right-part ul li .cart i,
.home4 .menubar .right-part ul li .cart i{
    font-size: 30px;
    color: var(--deep-blue);
}
.home4 .top-menu .right-part ul li .cart span,
.home4 .menubar .right-part ul li .cart span{
    display: inline-block;
    position: absolute;
    top: 0;
    right: -10px;
    height: 18px;
    width: 18px;
    text-align: center;
    border-radius: 50%;
    background: var(--sky-blue);
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

/*===========================================================
7.3.2: menubar CSS
=============================================================*/

.home4 .menubar {
    background: #fff;
}

.home4 .menubar .logo,
.home4 .menubar .right-part {
    display: none;
}

.home4 .menubar.sticky .logo,
.home4 .menubar.sticky .right-part {
    display: block;
}

/*===========================================================
7.4: top-news CSS
=============================================================*/

.home4 .top-news .center-item img {
    width: 100%;
}

.home4 .top-news .center-item .text-part {
    box-shadow: 2px 0 110px hsla(0, 0%, 0%, 0.15);
    background: #fff;
    position: relative;
    margin: -64px 30px 0 30px;
    padding: 15px 30px;
}

.home4 .top-news .big-item .text-part {
    margin: -90px 60px 0 60px;
    padding: 20px 60px 30px 60px;
}

.home4 .top-news .big-item .text-part h2,
.home4 .top-news .center-item .text-part h4 {
    color: var(--deep-blue);
    font-weight: 700;
    padding-bottom: 25px;
}

.home4 .top-news .center-item .text-part h4 {
    padding-bottom: 5px;
}

.home4 .top-news .big-item .text-part ul li {
    position: relative;
}

.home4 .top-news .big-item .text-part ul li a img {
    height: 40px;
    width: 40px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 10px;
}

.home4 .top-news .big-item .text-part ul li:first-child {
    padding-right: 20px;
}

.home4 .top-news .big-item .text-part ul li:first-child:after {
    content: '';
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 10px;
    height: 15px;
    width: 1px;
    background: var(--grey);
}

.home4 .top-news .big-item .text-part ul li p {
    text-transform: capitalize;
}

.home4 .top-news .center-item .text-part h2:hover,
.home4 .top-news .center-item .text-part h4:hover,
.home4 .top-news .center-item .text-part p:hover {
    color: var(--sky-blue);
}

/*===========================================================
7.5: blog CSS
=============================================================*/
.home4 .blog .item {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    box-shadow: 3px 0 95px hsla(0, 0%, 0%, 0.10);
}

.home4 .blog .item .image {
    overflow: hidden;
}

.home4 .blog .item .image img {
    width: 100%;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home4 .blog .item:hover .image img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.home4 .blog .item .text-part {
    padding: 15px 30px 15px 20px;
}

.home4 .blog .item .text-part p {
    text-transform: capitalize;
}

.home4 .blog .item .text-part h4 {
    color: var(--deep-blue);
    font-weight: 700;
}

.home4 .blog .item .text-part h4:hover,
.home4 .blog .item .text-part p:hover {
    color: var(--sky-blue);
}

.home4 .blog .item .text-part ul li:first-child {
    padding-right: 20px;
}

/*===========================================================
7.6: content CSS
=============================================================*/

/*===========================================================
7.6.1: left content CSS
=============================================================*/

.home4 .content .big-item .text-part {
    -webkit-box-shadow: 2px 0 110px hsla(0, 0%, 0%, 0.15);
    box-shadow: 2px 0 110px hsla(0, 0%, 0%, 0.15);
    margin: -100px 30px 0 30px;
    background: #fff;
    position: relative;
    padding: 20px 50px 22px 50px;
}

.home4 .content .big-item .text-part h5 {
    font-weight: 500;
    color: var(--grey);
    text-transform: capitalize;
}

.home4 .content .big-item .text-part h2 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    color: var(--deep-blue);
    padding: 0 65px;
    padding-top: 5px;
    padding-bottom: 10px;
}

.home4 .content .big-item .text-part h5:hover,
.home4 .content .big-item .text-part h2:hover {
    color: var(--sky-blue);
}


/* latest news */
.home4 .latest .title {
    padding-bottom: 30px;
}

.home4 .latest .title h3 {
    font-weight: 700;
    text-transform: capitalize;
    border-bottom: 2px solid #ddd;
}

.home4 .content .small-item .media-body {
    padding-left: 15px;
}

.home4 .content .small-item .media-body h5 {
    color: var(--deep-blue);
    font-weight: 700;
}

.home4 .content .small-item .media-body p {
    padding-top: 5px;
    text-transform: capitalize;
}

.home4 .content .small-item .media-body p i {
    margin-right: 10px;
}

.home4 .content .small-item .media-body h5:hover,
.home4 .content .small-item .media-body p:hover {
    color: var(--sky-blue);
}


/*===========================================================
7.6.2: right content CSS
=============================================================*/

.home4 .right-content .topic {
    border: 1px solid #ddd;
    padding: 30px;
}

.home4 .right-content .topic .title {
    padding-bottom: 30px;
}

.home4 .right-content .topic .title h3 {
    border: 0;
    position: relative;
    font-weight: 700;
    text-transform: capitalize;
}

.home4 .right-content .topic .title h3:after {
    content: '';
    height: 2px;
    width: 70px;
    background: url(../images/home4/border.png) no-repeat center;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* about */

.home4 .right-content .about .image {
    border-radius: 50%;
    height: 200px;
    width: 200px;
    overflow: hidden;
    margin: auto;
}

.home4 .right-content .about h3 {
    color: var(--deep-blue);
    font-weight: 700;
    text-transform: capitalize;
    padding-top: 10px;
    padding-bottom: 5px;
}

.home4 .right-content .about h3:hover {
    color: var(--sky-blue);
}

.home4 .right-content .about .sign {
    padding-top: 15px;
}

/* category */

.home4 .right-content .category ul li {
    padding-top: 15px;
    padding-bottom: 5px;
}

.home4 .right-content .category ul li:first-child {
    padding-top: 0;
}

.home4 .right-content .category ul li:last-child {
    padding-bottom: 0;
}

.home4 .right-content .category ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home4 .right-content .category ul li:hover {
    border-color: var(--sky-blue);
}

.home4 .right-content .category ul li p {
    text-transform: capitalize;
}

.home4 .right-content .category ul li:hover p {
    color: var(--sky-blue);
}

/* ad */
.home4 .right-content .ad {
    padding: 0;
    border: 0;
}

.home4 .right-content .ad img {
    width: 100%;
}

/*===========================================================
7.7: video CSS
=============================================================*/

.home4 .video {
    background: #f3f8fb;
}

.home4 .video .single-item .image {
    position: relative;
    margin-right: 30px;
}

.home4 .video .single-item .image img {
    width: 100%;
}

.home4 .video .small-item .single-item .image {
    margin-right: 20px;
}

.home4 .video .single-item .image a {
    display: inline-block;
    height: 85px;
    width: 85px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, 0.46);
    position: absolute;
    padding: 8px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.home4 .video .small-item .single-item .image a {
    height: 50px;
    width: 50px;
    padding: 4px;
}

.home4 .video .single-item .image a i {
    display: block;
    font-size: 40px;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: var(--sky-blue);
    text-align: center;
    line-height: 70px;
    color: #fff;
}

.home4 .video .small-item .single-item .image a i {
    line-height: 42px;
    font-size: 30px;
}

.home4 .video .single-item .date {
    text-transform: capitalize;
    display: inline-block;
    margin-bottom: 5px;
}

.home4 .video .single-item h3 {
    font-weight: 700;
    color: var(--deep-blue);
    padding-bottom: 10px;
}

.home4 .video .single-item a:hover p,
.home4 .video .single-item h3:hover,
.home4 .video .small-item .single-item a:hover p,
.home4 .video .small-item .single-item h5:hover {
    color: var(--sky-blue);
}

.home4 .video .single-item .author {
    margin-top: 25px;
}

.home4 .video .single-item .author img {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    margin-right: 15px;
}

.home4 .video .single-item .author p {
    font-weight: 500;
}

.home4 .video .small-item .single-item {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.home4 .video .small-item .single-item h5 {
    font-weight: 700;
    color: var(--deep-blue);
}

.home4 .video .small-item .single-item p {
    text-transform: capitalize;
    padding-top: 7px;
}

/*===========================================================
7.8: footer CSS
=============================================================*/

/*===========================================================
7.8.1: footer-top CSS
=============================================================*/

.home4 .footer-top .address li i {
    color: var(--sky-blue);
}

.home4 .footer-top .address li:hover i {
    background: var(--sky-blue);
    color: #fff;
}

.home4 .footer-top .link li a p:hover,
.home4 .footer-top form button,
.home4 .footer-top .social li a:hover i {
    color: var(--sky-blue);
}


/*===========================================================
7.8.2: footer-bottom CSS
=============================================================*/
.home4 .footer-bottom .footer-menu li a p:hover {
    color: var(--sky-blue);
}

/*===========================================================
08: Home 5
=============================================================*/

/*===========================================================
8.1: common CSS
=============================================================*/
.home4 p {
    font-family: var(--heebo);
}

/*===========================================================
8.2: sidemenu CSS
=============================================================*/

.home5 .side-menu {
    left: auto;
    right: -350px;
}

.home5 .side-menu.show {
    right: 0;
}

.home5 .side-menu .item-border {
    border: 1px solid #ddd;
}

.home5 .side-menu .topic .title {
    margin-bottom: 25px;
}

.home5 .side-menu .topic .title h3 {
    font-weight: 700;
    color: var(--deep-blue);
    text-transform: capitalize;
}

.home5 .side-menu .popular {
    padding: 15px 13px 30px 13px;
}

.home5 .side-menu .topic .item-banner h5 {
    font-weight: 700;
    color: #fff;
    padding-top: 10px;
}

.home5 .side-menu .topic .author li {
    position: relative;
}

.home5 .side-menu .topic .author li:first-child {
    padding-right: 15px;
}

.home5 .side-menu .topic .author li:first-child:after {
    content: "";
    height: 10px;
    width: 1px;
    background: #fff;
    position: absolute;
    top: 8px;
    right: 8px;
}

.home5 .side-menu .topic .author li a {
    text-transform: capitalize;
    color: #fff;
    font-size: 12px;
    line-height: 26px;
}

.home5 .side-menu .topic .small-item .image {
    margin-right: 15px;
    position: relative;
}

.home5 .side-menu .topic .small-item .image a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsla(0, 0%, 0%, 0.3);
}

.home5 .side-menu .topic .small-item h5 {
    color: var(--deep-blue);
    font-weight: 700;
    font-size: 15px;
}

.home5 .side-menu .topic .small-item p {
    font-size: 14px;
}

.home5 .side-menu .topic .small-item ul li:first-child {
    padding-right: 20px;
    position: relative;
}

.home5 .side-menu .topic .small-item ul li:first-child:after {
    content: '';
    width: 1px;
    height: 13px;
    background: var(--grey);
    position: absolute;
    top: 6px;
    right: 10px;
}

.home5 .side-menu .topic .small-item h5:hover,
.home5 .side-menu .topic .small-item p:hover {
    color: var(--red2);
}

/* newsletter */

.home5 .side-menu .newsletter {
    padding: 25px;
}

.home5 .side-menu .newsletter .title {
    margin-bottom: 15px;
}

.home5 .side-menu .newsletter p {
    padding-bottom: 10px;
}

.home5 .side-menu .newsletter .input {
    width: 100%;
    height: 30px;
    padding: 0 15px;
    text-align: center;
    border: 1px solid var(--red2);
}

.home5 .side-menu .newsletter .input::placeholder {
    text-transform: capitalize;
    color: var(--grey);
    font-weight: 400;
}

.home5 .side-menu .newsletter button {
    padding: 0 12px;
    background: var(--red2);
    color: #fff;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    margin-top: 20px;
}

.home5 .side-menu .newsletter button:hover {
    background: var(--deep-blue);
}

/* instagram */

.home5 .side-menu .insta {
    padding: 20px;
}

.home5 .side-menu .insta .all-item {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: auto auto auto;
}

.home5 .side-menu .insta .all-item .single a {
    display: block;
    width: 100%;
    position: relative;
}

.home5 .side-menu .insta .all-item .single a img {
    width: 100%;
}

.home5 .side-menu .insta .all-item .single a i {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #fff;
    opacity: 0;
}

.home5 .side-menu .insta .all-item .single a:hover i {
    opacity: 1;
}

.home5 .side-menu .insta .all-item .single .img {
    width: 100%;
}

/*===========================================================
8.3: header CSS
=============================================================*/

/*===========================================================
8.3.1: top-menu CSS
=============================================================*/

.home5 .top-menu {
    background: var(--red2);
    padding: 10px 0;
}

.home5 .top-menu ul li p {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
}

.home5 .top-menu .address li:not(:last-child) {
    padding-right: 20px;
}

.home5 .top-menu ul li i {
    font-size: 14px;
    color: #fff;
}

.home5 .top-menu .right-part .signin {
    margin-left: 35px;
    font-size: 14px;
    color: #fff;
    line-height: 26px;
}

.home5 .top-menu .right-part .signin i {
    margin-right: 5px;
}

.home5 .top-menu .social li:not(:first-child) {
    padding-left: 18px;
}


/*===========================================================
8.3.2: menubar CSS
=============================================================*/

.home5 .menubar {
    background: #fff;
}


.home5 .modal-header .close:hover,
.home5 .modal-body button:hover {
    background: var(--red2);
}


.home5 .menubar .right-part ul li button i {
    font-size: 30px;
}

.home5 .menubar .right-part ul li:not(:last-child) {
    margin-right: 45px;
}
.home5 .menubar .right-part ul li .cart{
    position: relative;
    display: block;
}
.home5 .menubar .right-part ul li .cart i{
    font-size: 30px;
    color: var(--deep-blue);
}

.home5 .menubar .right-part ul li .cart span{
    display: inline-block;
    position: absolute;
    top: 0;
    right: -10px;
    height: 18px;
    width: 18px;
    text-align: center;
    border-radius: 50%;
    background: var(--red2);
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

/*===========================================================
8.3.3: banner CSS
=============================================================*/

.home5 .banner {
    position: relative;
}

.home5 .banner .model .image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.home5 .banner .banner-text {
    padding: 215px 0;
}

.home5 .banner .banner-text .politic {
    color: var(--red2);
    text-transform: capitalize;
    font-weight: 400;
}

.home5 .banner .banner-text .politic u {
    font-weight: 700;
}

.home5 .banner .banner-text h1 {
    font-weight: 700;
    color: var(--deep-blue);
    padding-top: 15px;
    padding-bottom: 20px;
}

.home5 .banner .banner-text ul {
    padding-top: 35px;
}

.home5 .banner .banner-text ul li a {
    display: inline-block;
    font-family: var(--heebo);
    font-weight: 500;
    text-transform: capitalize;
    color: #fff;
    background: var(--red2);
    font-size: 18px;
    line-height: 45px;
    width: 150px;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.home5 .banner .banner-text ul li:first-child {
    margin-right: 15px;
}

.home5 .banner .banner-text ul li:last-child a {
    background: var(--deep-blue);
}

.home5 .banner .banner-text ul li a:before {
    content: "";
    height: 100%;
    width: 90%;
    background: var(--deep-blue);
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
    z-index: -1;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home5 .banner .banner-text ul li:last-child a:before {
    background: var(--red2);
}

.home5 .banner .banner-text ul li a:hover:before {
    left: -90%;
}

/*===========================================================
8.4: priority CSS
=============================================================*/

.home5 .priority {
    padding-top: 72px;
    padding-bottom: 75px;
}

.home5 .priority .title {
    padding-bottom: 35px;
}

.home5 .priority .title h3 {
    font-weight: 700;
    color: var(--deep-blue);
    padding-bottom: 15px;
    font-size: 30px;
}

.home5 .priority .title p {
    padding: 0 55px;
}

.home5 .priority .item {
    box-shadow: 3px 0 95px hsla(0, 0%, 0%, 0.1);
}

.home5 .priority .item .image {
    overflow: hidden;
}

.home5 .priority .item .image img {
    width: 100%;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.home5 .priority .item:hover .image img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.home5 .priority .item .text-part {
    padding: 15px 20px;
}

.home5 .priority .item p {
    text-transform: capitalize;
}

.home5 .priority .item h4 {
    font-size: 20px;
    color: var(--deep-blue);
    font-weight: 700;
    padding-bottom: 5px;
}

.home5 .priority .item ul li:first-child {
    padding-right: 15px;
}

.home5 .priority .item p:hover,
.home5 .priority .item h4:hover {
    color: var(--red2);
}

/*===========================================================
8.5: main CSS
=============================================================*/

.home5 .main {
    padding-bottom: 80px;
}

/*===========================================================
8.6: content CSS
=============================================================*/

/*===========================================================
8.6.1: left-content CSS
=============================================================*/


.home5 .content .topic {
    position: relative;
}

.home5 .content .topic .title {
    border-bottom: 2px solid #ddd;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
    margin-bottom: 30px;
}

.home5 .content .topic .title h4 {
    color: var(--deep-blue);
    font-weight: 700;
    width: max-content;
    text-transform: capitalize;
}

.home5 .content .topic .title h4 span {
    color: var(--red2);
}

.home5 .content .topic .nav-tabs {
    border: 0;
    position: absolute;
    top: 0;
    right: 0;
}

.home5 .content .topic .nav-tabs .nav-item .nav-link {
    color: var(--deep-blue);
    background-color: #fff;
    text-transform: capitalize;
    border: 0;
    border-radius: 0;
    padding: 0 10px;
    font-family: var(--heebo);
    font-weight: 400;
}

.home5 .content .topic .nav-tabs .nav-link:hover {
    color: var(--red2);
}

.home5 .content .topic .nav-tabs .nav-item.show .nav-link,
.home5 .content .topic .nav-tabs .nav-link.active {
    border: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    padding: 0 10px;
    margin: 0;
    color: var(--red2);
}

.home5 .content .topic .tab-pane.active {
    animation: slide-down 0.8s ease-out;
}

@keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10%);
        -moz-transform: translateY(10%);
        -ms-transform: translateY(10%);
        -o-transform: translateY(10%);
        transform: translateY(10%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

.home5 .content .topic .tab-item .item img {
    width: 100%;
}

.home5 .content .topic .tab-item .item .text-part {
    border: 1px solid #ddd;
    border-top: 0;
    padding: 20px;
}

.home5 .content .topic .tab-item .item-sm p,
.home5 .content .topic .tab-item .item ul li p {
    text-transform: capitalize;
}

.home5 .content .topic .tab-item .item ul li:first-child {
    padding-right: 20px;
}

.home5 .content .topic .tab-item .item h3 {
    font-weight: 700;
    color: var(--deep-blue);
    padding: 10px 0;
}

.home5 .content .topic .tab-item .item h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--deep-blue);
    padding-bottom: 4px;
}

.home5 .content .topic .tab-item .item-sm p:hover,
.home5 .content .topic .tab-item .item ul li p:hover,
.home5 .content .topic .tab-item .item h3:hover,
.home5 .content .topic .tab-item .item h4:hover {
    color: var(--red2);
}

.home5 .content .topic .item-horizontal .item {
    padding: 30px 0;
}

.home5 .content .topic .item-horizontal .item img {
    width: 100%;
}

.home5 .content .topic .item-horizontal .item:first-child {
    padding-top: 0;
}

.home5 .content .topic .item-horizontal .item:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.home5 .content .topic .item-horizontal .item:last-child {
    padding-bottom: 0;
}

.home5 .content .topic .item-horizontal .item-left .image {
    margin-right: 20px;
}

.home5 .content .topic .item-horizontal .item-right .image {
    margin-left: 20px;
}

.home5 .content .topic .item-horizontal .item-left .text-part {
    padding-right: 20px;
}

.home5 .content .topic .item-horizontal .item h3 {
    color: var(--deep-blue);
    font-weight: 700;
}

.home5 .content .topic .item-horizontal .item ul {
    padding: 10px 0;
}

.home5 .content .topic .item-horizontal .item ul li:first-child {
    padding-right: 20px;
}
.home5 .content .topic .item-horizontal .item h3:hover,
.home5 .content .topic .item-horizontal .item ul li p:hover{
    color: var(--red2);
}

/*===========================================================
8.6.2: right content CSS
=============================================================*/

/* follow */

.home5 .right-content .topic .follow {
    padding-top: 5px;
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: auto auto auto;
}

.home5 .right-content .topic .follow .fb {
    background: #3b5998;
}

.home5 .right-content .topic .follow .tw {
    background: #00acee;
}

.home5 .right-content .topic .follow .gp {
    background: #db4a39;
}

.home5 .right-content .topic .follow .yt {
    background: #c4302b;
}

.home5 .right-content .topic .follow .ins {
    background: #3f729b;
}

.home5 .right-content .topic .follow .vk {
    background: #4c75ac;
}

.home5 .right-content .topic .follow .social-item {
    padding: 20px 10px;
}

.home5 .right-content .topic .follow .social-item i {
    display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    background: hsla(0, 0%, 100%, 0.1);
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
    margin: 0 auto 20px auto;
}

.home5 .right-content .topic .follow .social-item p {
    text-transform: capitalize;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
}

/* popular */

.home5 .right-content .item-border {
    border: 1px solid #ddd;
}

.home5 .right-content .topic .title {
    border: 0;
    margin-bottom: 25px;
}

.home5 .right-content .topic .title h3 {
    font-weight: 700;
    color: var(--deep-blue);
    text-transform: capitalize;
}

.home5 .right-content .popular {
    padding: 15px 13px 30px 13px;
}

.home5 .right-content .topic .item-banner {
    margin-bottom: 30px;
}

.home5 .right-content .topic .item-banner .overlay {
    background: hsla(0, 0%, 0%, 0.5);
    padding: 110px 30px 20px 30px;
}

.home5 .right-content .topic .count li:first-child {
    padding-right: 10px;
}

.home5 .right-content .topic .count li:first-child a {
    display: inline-block;
    font-size: 10px;
    line-height: 20px;
    padding: 0 6px;
    border-radius: 5px;
    background: var(--red2);
    color: #fff;
    text-transform: capitalize;
}

.home5 .right-content .topic .count li:last-child a {
    font-size: 12px;
    line-height: 20px;
    text-transform: capitalize;
    color: #fff;
}

.home5 .right-content .topic .count li:last-child a i {
    padding-right: 5px;
}

.home5 .right-content .topic .item-banner h5 {
    font-weight: 700;
    color: #fff;
    padding-top: 10px;
}

.home5 .right-content .topic .author li {
    position: relative;
}

.home5 .right-content .topic .author li:first-child {
    padding-right: 15px;
}

.home5 .right-content .topic .author li:first-child:after {
    content: "";
    height: 10px;
    width: 1px;
    background: #fff;
    position: absolute;
    top: 8px;
    right: 8px;
}

.home5 .right-content .topic .author li a {
    text-transform: capitalize;
    color: #fff;
    font-size: 12px;
    line-height: 26px;
}

.home5 .right-content .topic .small-item .image {
    margin-right: 15px;
    position: relative;
}

.home5 .right-content .topic .small-item .image a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsla(0, 0%, 0%, 0.3);
}

.home5 .right-content .topic .small-item h5 {
    color: var(--deep-blue);
    font-weight: 700;
}

.home5 .right-content .topic .small-item ul li:first-child {
    padding-right: 20px;
    position: relative;
}

.home5 .right-content .topic .small-item ul li:first-child:after {
    content: '';
    width: 1px;
    height: 13px;
    background: var(--grey);
    position: absolute;
    top: 6px;
    right: 10px;
}

.home5 .right-content .topic .small-item h5:hover,
.home5 .right-content .topic .small-item p:hover {
    color: var(--red2);
}

/* ad */

.home5 .right-content .ad img {
    width: 100%;
}

/* newsletter */

.home5 .right-content .newsletter {
    padding: 25px 50px 30px 50px;
}

.home5 .right-content .newsletter .title {
    margin-bottom: 15px;
}

.home5 .right-content .newsletter p {
    padding-bottom: 10px;
}

.home5 .right-content .newsletter .input {
    width: 100%;
    height: 30px;
    padding: 0 15px;
    text-align: center;
    border: 1px solid var(--red2);
}

.home5 .right-content .newsletter .input::placeholder {
    text-transform: capitalize;
    color: var(--grey);
    font-weight: 400;
}

.home5 .right-content .newsletter button {
    padding: 0 12px;
    background: var(--red2);
    color: #fff;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    margin-top: 20px;
}

.home5 .right-content .newsletter button:hover {
    background: var(--deep-blue);
}

/* instagram */

.home5 .right-content .insta {
    padding: 18px 30px 30px 30px;
}

.home5 .right-content .insta .all-item {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: auto auto auto;
}

.home5 .right-content .insta .all-item .single a {
    display: block;
    width: 100%;
    position: relative;
}

.home5 .right-content .insta .all-item .single a img {
    width: 100%;
}

.home5 .right-content .insta .all-item .single a i {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #fff;
    opacity: 0;
}

.home5 .right-content .insta .all-item .single a:hover i {
    opacity: 1;
}

.home5 .right-content .insta .all-item .single .img {
    width: 100%;
}

/*===========================================================
8.7: video CSS
=============================================================*/

.home5 .video {
    background: #eef1ff;
}

.home5 .video .single-item .image {
    position: relative;
}

.home5 .video .single-item .image a {
    display: inline-block;
    height: 85px;
    width: 85px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, 0.46);
    position: absolute;
    padding: 8px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.home5 .video .single-item .image a i {
    display: block;
    font-size: 40px;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: var(--red2);
    text-align: center;
    line-height: 70px;
    color: #fff;
}

.home5 .video .small-item {
    overflow-y: scroll;
    height: 430px;
}

.home5 .video .small-item .single-item {
    background: #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.home5 .video .small-item .single-item .media-body {
    padding-right: 20px;
}

.home5 .video .small-item .single-item .image {
    padding-right: 20px;
}

.home5 .video .small-item .single-item .image a i {
    line-height: 42px;
    font-size: 30px;
}

.home5 .video .small-item .single-item .image a {
    height: 50px;
    width: 50px;
    padding: 4px;
}

.home5 .video .small-item .single-item h5 {
    color: var(--deep-blue);
    font-weight: 700;
}

.home5 .video .small-item .single-item p {
    text-transform: capitalize;
    padding-top: 5px;
}

.home5 .video .small-item .single-item h5:hover,
.home5 .video .small-item .single-item p:hover{
    color: var(--red2);
}
.home5 .video ::-webkit-scrollbar {
    width: 10px;
}

.home5 .video ::-webkit-scrollbar-track {
    background: #ddd;
}

.home5 .video ::-webkit-scrollbar-thumb {
    background: var(--red2);
}

/*===========================================================
8.8: footer CSS
=============================================================*/

/*===========================================================
8.8.1: footer-top CSS
=============================================================*/

.home5 .footer-top .address li i {
    color: var(--red2);
}

.home5 .footer-top .address li:hover i {
    background: var(--red2);
    color: #fff;
}

.home5 .footer-top .link li a p:hover,
.home5 .footer-top form button,
.home5 .footer-top .social li a:hover i {
    color: var(--red2);
}


/*===========================================================
8.8.2: footer-bottom CSS
=============================================================*/

.home5 .footer-bottom .footer-menu li a p:hover {
    color: var(--red2);
}

/*===========================================================
 09: inner page CSS
=============================================================*/

/*===========================================================
9.1: common CSS
=============================================================*/
.inner-page p {
    font-family: var(--heebo);
}

/*===========================================================
9.2: header CSS
=============================================================*/

/*===========================================================
9.2.1: top-menu CSS
=============================================================*/
.inner-page .top-menu {
    padding: 25px 0;
    border-bottom: 1px solid #ddd;
}


.inner-page .top-menu .left-part ul li,
.inner-page .menubar .left-part ul li {
    padding: 0 3px;
}

.inner-page .top-menu .left-part ul li a,
.inner-page .menubar .left-part ul li a {
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    border-radius: 50%;
}

.inner-page .top-menu .left-part ul li a i {
    font-size: 20px;
    line-height: 40px;
    color: var(--deep-blue);
}

.inner-page .top-menu .left-part ul li a.active,
.inner-page .top-menu .left-part ul li a:hover {
    background: var(--red);
}

.inner-page .top-menu .left-part ul li a.active i,
.inner-page .top-menu .left-part ul li a:hover i {
    color: #fff;
}


.inner-page .modal-header .close:hover,
.inner-page .modal-body button:hover {
    background: var(--red);
}

.inner-page .top-menu .right-part ul li button i,
.inner-page .menubar .right-part ul li button i {
    font-size: 30px;
}

.inner-page .top-menu .right-part ul li:not(:last-child),
.inner-page .menubar .right-part ul li:not(:last-child) {
    margin-right: 45px;
}

.inner-page .top-menu .right-part ul li .cart,
.inner-page .menubar .right-part ul li .cart{
    position: relative;
    display: block;
}
.inner-page .top-menu .right-part ul li .cart i,
.inner-page .menubar .right-part ul li .cart i{
    font-size: 30px;
    color: var(--deep-blue);
}

.inner-page .top-menu .right-part ul li .cart span,
.inner-page .menubar .right-part ul li .cart span{
    display: inline-block;
    position: absolute;
    top: 0;
    right: -10px;
    height: 18px;
    width: 18px;
    text-align: center;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

/*===========================================================
9.2.2: menubar CSS
=============================================================*/

.inner-page .menubar {
    background: #fff;
}

.inner-page .menubar .logo,
.inner-page .menubar .right-part {
    display: none;
}

.inner-page .menubar.sticky .logo,
.inner-page .menubar.sticky .right-part {
    display: block;
}

/*===========================================================
9.2.3: banner CSS
=============================================================*/
.inner-page .banner .overlay{
    background: hsla(0, 0%, 0%, 0.30);
    padding: 130px 0;
}
.inner-page .banner .banner-text h3{
    text-transform: capitalize;
    font-weight: 700;
    font-size: 35px;
    color: #fff;
}

.inner-page .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    justify-content: center;
}
.inner-page .breadcrumb .breadcrumb-item {
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    text-transform: capitalize;
}
.inner-page .breadcrumb .breadcrumb-item i{
    margin-right: 10px;
    color: #fff;
    font-size: 22px;
}
.inner-page .breadcrumb .breadcrumb-item a {
    color: #fff;
}
.inner-page .breadcrumb .breadcrumb-item a:hover {
    color: var(--red);
}
.inner-page .breadcrumb-item.active,
.inner-page .breadcrumb-item + .breadcrumb-item::before {
    color: hsla(0, 0%, 100%, 0.8);
}

/*===========================================================
9.3: side-menu CSS
=============================================================*/
.inner-page .side-menu{
    left: auto;
    right: -350px;
}
.inner-page .side-menu.show{
    right: 0;
    left: auto;
}
.inner-page .side-menu .title{
    padding-bottom: 30px;
}
.inner-page .side-menu .title h3{
    text-transform: capitalize;
    color: var(--deep-blue);
    font-weight: 700;
    position: relative;
}
.inner-page .side-menu .title h3:after{
    content: '';
    height: 2px;
    width: 120px;
    background: url(../images/author/border.png) no-repeat center;
    position: absolute;
    bottom: 0;
    left: 0;
}

.inner-page .side-menu .category ul li a:hover p {
    color: var(--red);
}
.inner-page .side-menu .category ul li a:hover p:last-child {
    color: #fff;
    background: var(--red);
}
.inner-page .side-menu .feed .small-item .media-body h6:hover,
.inner-page .side-menu .feed .small-item .media-body p:hover {
    color: var(--red);
}

/* pagination */

.inner-page .pages ul li{
    padding: 0 7px;
}
.inner-page .pages ul li a{
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 1px solid #ddd;
    line-height: 40px;
    text-align: center;
    color: var(--grey);
    font-size: 16px;
    font-family: var(--heebo);
}
.inner-page .pages ul li a i{
    font-size: 20px;
    line-height: 40px;
    color: var(--red);
}
.inner-page .pages ul li a .caret-left{
    display: block;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}
.inner-page .pages ul li a.active,
.inner-page .pages ul li a:hover{
    color: #fff;
    background: var(--red);
    border-color: var(--red);
}
.inner-page .pages ul li a.active i,
.inner-page .pages ul li a:hover i{
    color: #fff;
}

/*===========================================================
9.4: right-content CSS
=============================================================*/
.inner-page .right-content .topic{
    border: 1px solid #ddd;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    padding: 10px 20px 30px 20px;
}

/* title */

.inner-page .right-content .title{
    padding-bottom: 30px;
}
.inner-page .right-content .title h3{
    position: relative;
    text-transform: capitalize;
    font-weight: 700;
    color: var(--deep-blue);
}
.inner-page .right-content .title h3:after{
    content: '';
    height: 2px;
    width: 120px;
    background: url(../images/author/border.png) no-repeat center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

/* about */

.inner-page .right-content .about .image{
    padding-top: 20px;
}
.inner-page .right-content .about .image img{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.inner-page .right-content .about h3{
    font-weight: 700;
    color: var(--deep-blue);
    text-transform: capitalize;
    padding-top: 10px;
    padding-bottom: 5px;
}
.inner-page .right-content .about h3:hover{
    color: var(--red);
}
.inner-page .right-content .about .sign{
    padding-top: 15px;
}

/* small item */

.inner-page .right-content .small-item .item{
    padding-right: 0;
}
.inner-page .right-content .small-item .item .image{
    padding-right: 15px;
}
.inner-page .right-content .small-item .item h5{
    font-weight: 700;
    color: var(--deep-blue);
}
.inner-page .right-content .small-item .item p{
    text-transform: capitalize;
    padding-top: 4px;
}
.inner-page .right-content .small-item .item p i{
    padding-right: 10px;
}
.inner-page .right-content .small-item .item h5:hover,
.inner-page .right-content .small-item .item p:hover{
    color: var(--red);
}

/* category */

.inner-page .right-content .category ul li {
    padding-top: 15px;
    padding-bottom: 5px;
}

.inner-page .right-content .category ul li:first-child {
    padding-top: 0;
}

.inner-page .right-content .category ul li:last-child {
    padding-bottom: 0;
}

.inner-page .right-content .category ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.inner-page .right-content .category ul li.active ,
.inner-page .right-content .category ul li:hover {
    border-color: var(--red);
}

.inner-page .right-content .category ul li p {
    text-transform: capitalize;
}

.inner-page .right-content .category ul li.active p ,
.inner-page .right-content .category ul li:hover p {
    color: var(--red);
}

/* ad */

.inner-page .right-content .ad {
    padding: 0;
    border: 0;
    overflow: hidden;
}

.inner-page .right-content .ad .item{
    padding-right: 0;
}
.inner-page .right-content .ad .item img {
    width: 100%;
}

.inner-page .right-content .ad .ad-slider {
    position: relative;
}

.inner-page .right-content .ad .ad-slider .btns button {
    width: 30px;
    height: 40px;
    border: 1px solid #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9;
}

.inner-page .right-content .ad .ad-slider .btns button:hover {
    background: var(--red);
    border-color: var(--red);
}

.inner-page .right-content .ad .ad-slider .btns button i {
    line-height: 40px;
    color: #fff;
}

.inner-page .right-content .ad .ad-slider .btns .ad-prev {
    left: 0;
}

.inner-page .right-content .ad .ad-slider .btns .ad-next {
    right: 0;
}

/* update */
.inner-page .right-content .update p {
    padding: 0 20px;
}

.inner-page .right-content .update form {
    margin-top: 12px;
}

.inner-page .right-content .update form .inputs {
    background: #f3f8ff;
    width: 100%;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    height: 55px;
    border: 0;
    outline: none;
    padding: 0 20px;
    text-align: center;
}

.inner-page .right-content .update form .inputs::placeholder {
    font-family: var(--heebo);
    font-size: 16px;
    text-transform: capitalize;
    color: var(--grey);
}

.inner-page .right-content .update form button {
    width: 100%;
    height: 55px;
    background: var(--red);
    color: #fff;
    font-size: 18px;
    font-family: var(--heebo);
    text-transform: capitalize;
    font-weight: 400;
    border-radius: 10px;
}
.inner-page .right-content .update form button:hover{
    background: var(--deep-blue);
}
.inner-page .right-content .update form label {
    position: relative;
    width: 100%;
}

.inner-page .right-content .update form .check {
    opacity: 0;
    display: none;
}

.inner-page .right-content .update form .check-custom {
    position: absolute;
    top: 15px;
    left: 30px;
    height: 25px;
    width: 25px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
}

.inner-page .right-content .update form .check:checked ~ .check-custom {
    background: var(--red);
    border-color: var(--red);
}

.inner-page .right-content .update form .check-custom:after {
    content: "";
    position: absolute;
    display: none;
    left: 9px;
    top: 3px;
    width: 6px;
    height: 13px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer;
}

.inner-page .right-content .update form .check:checked ~ .check-custom:after {
    display: block;
}

.inner-page .right-content .update form .term {
    font-size: 18px;
    text-align: left;
    padding-left: 65px;
}

/* tag */

.inner-page .right-content .tag {
    padding-bottom: 10px;
}

.inner-page .right-content .tag .all-tags a {
    display: inline-block;
    padding: 0 20px;
    line-height: 34px;
    font-family: var(--heebo);
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
    color: var(--grey);
    border: 1px solid #ddd;
    margin-right: 15px;
    margin-bottom: 20px;
}

.inner-page .right-content .tag .all-tags a:hover {
    color: #fff;
    border-color: var(--red);
    background: var(--red);
}
/*===========================================================
9.5: footer-top CSS
=============================================================*/

.inner-page .footer-top .address li i {
    color: var(--red);
}

.inner-page .footer-top .address li:hover i {
    background: var(--red);
    color: #fff;
}

.inner-page .footer-top .link li a p:hover,
.inner-page .footer-top form button,
.inner-page .footer-top .social li a:hover i {
    color: var(--red);
}


/*===========================================================
9.6: footer-bottom CSS
=============================================================*/

.inner-page .footer-bottom .footer-menu li a p:hover {
    color: var(--red);
}
/*===========================================================
 10: author page CSS
=============================================================*/

/*===========================================================
10.1: author CSS
=============================================================*/
.author-page .author{
    padding-top: 80px;
}
.author-page .author .border-part{
    padding-bottom: 50px;
    border-bottom: 1px solid #ddd;
}
.author-page .author .image{
    padding-right: 30px;
}
.author-page .author .image img{
    height: 185px;
    width: 185px;
    border-radius: 50%;
}
.author-page .author .name h3{
    text-transform: capitalize;
    font-weight: 700;
    color: var(--deep-blue);
    padding-right: 45px;
}

.author-page .author .name button{
    font-size: 16px;
    line-height: 30px;
    padding: 0 20px;
    border: 1px solid var(--red);
    color: var(--red);
    text-transform: capitalize;
}

.author-page .author .name button:hover{
    background: var(--red);
    color: #fff;
}
.author-page .author .about-p{
    padding-top: 10px;
    padding-bottom: 20px;
}
.author-page .author .follow p i{
    padding-right: 5px;
}
.author-page .author .follow ul li a i{
    font-size: 20px;
    color: var(--deep-blue);
}
.author-page .author .follow ul li a:hover i{
    color: var(--red);
}
.author-page .author .follow ul li:not(:last-child){
    padding-right: 30px;
}

/*===========================================================
10.2: main CSS
=============================================================*/
.author-page .main{
    padding-top: 60px;
    padding-bottom: 80px;
}

/*===========================================================
10.3: left-content CSS
=============================================================*/
.author-page .content .title{
    padding-bottom: 30px;
}
.author-page .content .title h3{
    border-bottom: 2px solid #ddd;
    font-weight: 700;
    color: var(--deep-blue);
}
.author-page .content .item{
    padding-right: 50px;
}
.author-page .content .item .image{
    padding-right: 30px;
}
.author-page .content .item .image img{
    width: 100%;
}
.author-page .content .item h3{
    font-weight: 700;
    color: var(--deep-blue);
}
.author-page .content .item ul{
    padding: 10px 0;
}
.author-page .content .item ul li:first-child{
    padding-right: 15px;
}
.author-page .content .item ul li p{
    text-transform: capitalize;
}
.author-page .content .item h3:hover,
.author-page .content .item ul li p:hover{
    color: var(--red);
}


/* pagination */

.author-page .content .pages{
    padding-top: 70px;
}

/*===========================================================
10.4: right-content CSS
=============================================================*/
.author-page .right-content .title h3{
    border: 0;
}


/*===========================================================
 11: about page CSS
=============================================================*/

/*===========================================================
 11.1: about-part CSS
=============================================================*/
.about-page .about-part{
    padding-top: 80px;
    padding-bottom: 70px;
}
.about-page .about-part .item .image img{
    width: 100%;
}
.about-page .about-part .item .text-part{
    background: #fff;
    margin: -100px 30px 0 30px;
    position: relative;
    padding: 20px 60px 25px 60px;
    -webkit-box-shadow: 2px 0 110px hsla(0, 0%, 0%, 0.15);
    box-shadow: 2px 0 110px hsla(0, 0%, 0%, 0.15);
}
.about-page .about-part .item h5{
    font-weight: 500;
    color: var(--red);
    text-transform: capitalize;
    padding-bottom: 5px;
}
.about-page .about-part .item h3{
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    color: var(--deep-blue);
    padding: 0 20px 10px 20px;
}

/*===========================================================
 11.2: news CSS
=============================================================*/
.about-page .news{
    padding-bottom: 80px;
}
.about-page .news .nav-tabs{
    border-color: #ddd;
    margin-bottom: 30px;
}
.about-page .news .nav-tabs .nav-link {
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--deep-blue);
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    text-transform: capitalize;
}

.about-page .news .nav-tabs .nav-item{
    width: 33.33%;
}

.about-page .news .nav-tabs .nav-item.show .nav-link,
.about-page .news .nav-tabs .nav-link.active {
    color: var(--deep-blue);
    background-color: #fff;
    border: 0;
    border-bottom: 2px solid var(--red);
}
.about-page .news .item-horizontal .item{
    padding-right: 50px;
}
.about-page .news .item-horizontal .item .image{
    padding-right: 30px;
}
.about-page .news .item-horizontal .item .image img{
    width: 100%;
}
.about-page .news .item-horizontal .item h3{
    font-weight: 700;
    color: var(--deep-blue);
}
.about-page .news .item-horizontal .item ul{
    padding: 10px 0;
}
.about-page .news .item-horizontal .item ul li:first-child{
    padding-right: 15px;
}
.about-page .news .item-horizontal .item ul li p{
    text-transform: capitalize;
}
.about-page .news .item-horizontal .item h3:hover,
.about-page .news .item-horizontal .item ul li p:hover{
    color: var(--red);
}
.about-page .news .item .image{
    position: relative;
}
.about-page .news .popup-image img,
.about-page .news .item img,
.about-page .news .item .image img{
    width: 100%;
}
.about-page .news .item .icon{
    display: inline-block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: var(--red);
    border: 5px solid #fff;
    line-height: 40px;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
.about-page .news .item .icon i{
    display: block;
    font-size: 30px;
}

/*===========================================================
 11.3: agent CSS
=============================================================*/
.about-page .agent{
    background: #f0f7ff;
}
.about-page .agent .title{
    margin-top: -10px;
    padding-bottom: 36px;
}
.about-page .agent .title h3{
    text-transform: capitalize;
    font-weight: 700;
    color: var(--deep-blue);
    position: relative;
}
.about-page .agent .title h3:after{
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    height: 2px;
    width: 70px;
    background: url(../images/author/border.png) no-repeat center;
}
.about-page .agent .item{
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}
.about-page .agent .item .text-part{
    background: #fff;
    padding-top: 10px;
    padding-bottom: 15px;
}
.about-page .agent .item h3{
    text-transform: capitalize;
    font-weight: 500;
    color: var(--deep-blue);
}
.about-page .agent .item h3:hover{
    color: var(--red);
}
.about-page .agent .item p{
    text-transform: capitalize;
}
.about-page .agent .item .image{
    overflow: hidden;
    position: relative;
}
.about-page .agent .item .image img{
    width: 100%;
}
.about-page .agent .item .image .social{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    bottom: 20px;
}
.about-page .agent .item .image .social li{
    padding: 0 5px;
}
.about-page .agent .item .image .social li a{
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background: #fff;
    color: var(--red);
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
}
.about-page .agent .item .image .social li a:hover{
    background: var(--red);
    color: #fff;
}

.about-page .agent .item:hover .image .social li a{
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
.about-page .agent .item:hover{
    -webkit-box-shadow: 0 0 90px hsla(0, 0%, 0%, 0.15);
    box-shadow: 0 0 90px hsla(0, 0%, 0%, 0.15);
}

/*===========================================================
 12: blog grid page CSS
=============================================================*/

/*===========================================================
 12.1: blog CSS
=============================================================*/
.blog-grid .blog .item{
    -webkit-box-shadow: 2px 0 48px hsla(0, 0%, 0%, 0.10);
    box-shadow: 2px 0 48px hsla(0, 0%, 0%, 0.10);
}
.blog-grid .blog .item .image{
    position: relative;
    overflow: hidden;
}
.blog-grid .blog .item .image img{
    width: 100%;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.blog-grid .blog .item:hover .image img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.blog-grid .blog .item .image .category{
    position: absolute;
    bottom: 0;
    left: 0;
}
.blog-grid .blog .item .image a p{
    text-transform: capitalize;
    color: var(--deep-blue);
    line-height: 30px;
    padding: 0 10px;
    background: #fff;
}
.blog-grid .blog .item .image a:hover p{
    color: #fff;
    background: var(--red);
}
.blog-grid .blog .item .text-part{
    padding: 15px 15px 20px 20px;
}
.blog-grid .blog .item ul li p{
    text-transform: capitalize;
}
.blog-grid .blog .item ul li:first-child{
    padding-right: 15px;
}
.blog-grid .blog .item h3{
    font-weight: 700;
    color: var(--deep-blue);
    padding-top: 10px;
    padding-bottom: 10px;
}
.blog-grid .blog .item h3:hover,
.blog-grid .blog .item ul li p:hover{
    color: var(--red);
}

.blog-grid .blog .pages{
    padding-top: 60px;
}

/*===========================================================
 13: blog list page CSS
=============================================================*/

/*===========================================================
 13.1: blog CSS
=============================================================*/
.blog-list .blog .all-item .item {
    padding: 30px 0;
}


.blog-list .blog .all-item .item:first-child {
    padding-top: 0;
}

.blog-list .blog .all-item .item:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.blog-list .blog .all-item .item:last-child {
    padding-bottom: 0;
}

.blog-list .blog .all-item .item-left .image{
    padding-right: 20px;
}
.blog-list .blog .all-item .item-right .image{
    padding-left: 20px;
}
.blog-list .blog .all-item .item .media-body{
    padding-right: 20px;
}
.blog-list .blog .all-item .item .image img {
    width: 100%;
}
.blog-list .blog .all-item .item h3{
    font-weight: 700;
    color: var(--deep-blue);
}
.blog-list .blog .all-item .item ul{
    padding: 10px 0;
}
.blog-list .blog .all-item .item ul li:first-child{
    padding-right: 15px;
}
.blog-list .blog .all-item .item ul li p{
    text-transform: capitalize;
}
.blog-list .blog .all-item .item h3:hover,
.blog-list .blog .all-item .item ul li p:hover{
    color: var(--red);
}
.blog-list .blog .pages{
    padding-top: 80px;
}

/*===========================================================
 14: blog standard page CSS
=============================================================*/
.blog-standard .all-item .item{
    box-shadow: 2px 0 110px hsla(0, 0%, 0%, 0.15);
}
.blog-standard .all-item .item .image{
    position: relative;
    overflow: hidden;
}
.blog-standard .all-item .item .image ul{
    background: #fff;
    position: absolute;
    bottom: 25px;
    left: 130px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    padding: 13px 40px;
    width: auto;
    transform: translateY(80px);
    transition: all linear 0.4s;
    -webkit-transition: all linear 0.4s;
    -moz-transition: all linear 0.4s;
    -ms-transition: all linear 0.4s;
    -o-transition: all linear 0.4s;
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
}
.blog-standard .all-item .item:hover .image ul{
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}
.blog-standard .all-item .item .image img{
    width: 100%;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.blog-standard .all-item .item:hover .image img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.blog-standard .all-item .item .image ul li{
    position: relative;
}
.blog-standard .all-item .item .image ul li:not(:last-child){
    padding-right: 40px;
}
.blog-standard .all-item .item .image ul li:not(:last-child):after{
    content: '';
    position: absolute;
    top: 5px;
    right: 20px;
    height: 17px;
    width: 1px;
    background: #ddd;
}
.blog-standard .all-item .item .image ul li p{
    text-transform: capitalize;
}
.blog-standard .all-item .item .image ul li i{
    padding-right: 10px;
    font-size: 20px;
    color: var(--red);
}
.blog-standard .all-item .item .image ul li p:hover{
    color: var(--red);
}
.blog-standard .all-item .item .text-part{
    background: #fff;
    padding: 20px 30px 25px 30px;
}
.blog-standard .all-item .item h3{
    font-size: 30px;
    line-height: 40px;
    color: var(--deep-blue);
    font-weight: 700;
    padding: 0 20px 20px 20px;
}
.blog-standard .all-item .item h3:hover{
    color: var(--red);
}
.blog-standard .pages{
    padding-top: 80px;
}

/*===========================================================
 15: blog left page CSS
=============================================================*/
/* blog-image */
.blog-left .content .blog-image{
    position: relative;
}
.blog-left .content .blog-image ul{
    background: #fff;
    position: absolute;
    bottom: 20px;
    left: 20px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    padding: 13px 35px;
}
.blog-left .content .blog-image ul li{
    position: relative;
}
.blog-left .content .blog-image ul li:not(:last-child){
    padding-right: 40px;
}
.blog-left .content .blog-image ul li:not(:last-child):after{
    content: '';
    position: absolute;
    top: 5px;
    right: 20px;
    height: 17px;
    width: 1px;
    background: #ddd;
}
.blog-left .content .blog-image ul li p{
    text-transform: capitalize;
}
.blog-left .content .blog-image ul li i{
    padding-right: 10px;
    font-size: 20px;
    color: var(--red);
}
.blog-left .content .blog-image ul li p:hover{
    color: var(--red);
}

.blog-left .left-content h3{
    font-weight: 700;
    color: var(--deep-blue);
    padding-top: 20px;
    padding-bottom: 20px;
}
.blog-left .content .desc{
    padding-bottom: 30px;
}

/* blog-slider */

.blog-left .content .slider-part .blog-slider {
    position: relative;
}
.blog-left .content .slider-part .blog-slider img,
.blog-left .content .slider-part .blog-video img{
    width: 100%;
}

.blog-left .content .slider-part .blog-slider .btns button {
    width: 30px;
    height: 40px;
    border: 1px solid #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9;
}

.blog-left .content .slider-part .blog-slider .btns button:hover {
    background: var(--red);
    border-color: var(--red);
}

.blog-left .content .slider-part .blog-slider .btns button i {
    line-height: 40px;
    color: #fff;
}
.blog-left .content .slider-part .blog-slider .btns .blog-prev {
    left: 0;
}

.blog-left .content .slider-part .blog-slider .btns .blog-next {
    right: 0;
}

/* blog video */
.blog-left .content .video-part{
    position: relative;
}
.blog-left .content .video-part img{
    width: 100%;
}
.blog-left .content .video-part:after{
    content: '';
    height: 100%;
    width: 100%;
    background: hsla(0, 0%, 0%, 0.35);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}
.blog-left .content .video-part .icon{
    display: inline-block;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, 0.46);
    position: absolute;
    padding: 5px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9;
}
.blog-left .content .video-part .icon i{
    display: block;
    font-size: 30px;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: var(--red);
    text-align: center;
    line-height: 40px;
    color: #fff;
}
/* blockquote */
.blog-left .content blockquote {
    -webkit-box-shadow: 0 0 90px hsla(0, 0%, 0%, 0.1);
    box-shadow: 0 0 90px hsla(0, 0%, 0%, 0.1);
    padding: 30px;
    border-left: 4px solid var(--red);
}

/* share blog */
.blog-left .content .share-blog {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 15px 30px;
}

.blog-left .content .share-blog span {
    display: inline-block;
    font-size: 18px;
    color: var(--red);
    text-transform: capitalize;
    font-family: var(--heebo);
    font-weight: 600;
}

.blog-left .content .share-blog .social li {
    padding: 0 7px;
}

.blog-left .content .share-blog .social li a i {
    color: var(--deep-blue);
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.blog-left .content .share-blog .social li a:hover i {
    color: var(--red);
}

.blog-left .content .share-blog p {
    text-transform: capitalize;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.blog-left .content .share-blog .right-part i {
    color: var(--deep-blue);
    padding-right: 10px;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.blog-left .content .share-blog .right-part a:hover p,
.blog-left .content .share-blog .right-part a:hover i {
    color: var(--red);
}

/* comment */
.blog-left .content .comment{
    padding-top: 30px;
}
.blog-left .content .comment .title h3 {
    color: var(--deep-blue);
    text-transform: capitalize;
    font-weight: 700;
    position: relative;
    padding-bottom: 16px;
}
.blog-left .content .comment .leave h3{
    padding-top: 10px ;
}
.blog-left .content .comment .title h3:after {
    content: "";
    height: 2px;
    width: 90px;
    background: var(--red);
    position: absolute;
    bottom: 0;
    left: 0;
}

.blog-left .content .comment .all-comment li {
    position: relative;
    margin: 50px 0;
}

.blog-left .content .comment .all-comment li ul {
    margin-left: 70px;
}

.blog-left .content .comment .all-comment li ul li {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 50px 0;
}

.blog-left .content .comment .all-comment li img {
    position: absolute;
    top: 0;
    left: 0;
    height: 120px;
    width: 120px;
    border-radius: 50%;
}

.blog-left .content .comment .all-comment ul li img {
    margin-top: 50px;
}

.blog-left .content .comment .all-comment li .comment-body {
    padding-left: 155px;
}

.blog-left .content .comment .all-comment li .reply {
    position: absolute;
    top: 0;
    right: 0;
}

.blog-left .content .comment .all-comment li .reply i {
    color: var(--red);
    margin-right: 10px;
}

.blog-left .content .comment .all-comment li .reply p {
    text-transform: capitalize;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.blog-left .content .comment .all-comment li .reply:hover p {
    color: var(--red);
}

.blog-left .content .comment .all-comment li ul li .reply {
    top: 50px;
}

.blog-left .content .comment .all-comment li .comment-body h4 {
    color: var(--deep-blue);
    font-weight: 700;
    line-height: 28px;
    padding-bottom: 5px;
    text-transform: capitalize;
}


.blog-left .content .comment .all-comment li .comment-body .time {
    padding-bottom: 5px;
}

.blog-left .content .comment .all-comment li .comment-body h4:hover,
.blog-left .content .comment .all-comment li .comment-body .time:hover{
    color: var(--red);
}
.blog-left .content .comment .input-field {
    width: 100%;
    height: 50px;
    background: #edf5ff;
    padding: 0 20px;
    outline: none;
    border: 0;
}

.blog-left .content .comment textarea.input-field {
    height: 215px;
    padding: 20px;
}

.blog-left .content .comment .input-field::placeholder {
    text-transform: capitalize;
    color: var(--grey);
    font-family: var(--heebo);
    font-weight: 400;
    font-size: 16px;
}

.blog-left .content .comment form {
    margin-top: 50px;
}

.blog-left .content .comment form button {
    text-transform: capitalize;
    font-size: 18px;
    line-height: 50px;
    font-weight: 400;
    background: var(--red);
    color: #fff;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    padding: 0 35px;
}
.blog-left .content .comment form button:hover{
    background: var(--deep-blue);
}

/*===========================================================
 16: blog video page CSS
=============================================================*/
.blog-video .left-content{
    margin-top: -10px;
}
.blog-video .left-content h3{
    padding-top: 0;
    padding-bottom: 10px;
}
/* blog date */
.blog-video .content .blog-date li{
    position: relative;
}
.blog-video .content .blog-date li:not(:last-child){
    padding-right: 40px;
}
.blog-video .content .blog-date li:not(:last-child):after{
    content: '';
    position: absolute;
    top: 5px;
    right: 20px;
    height: 17px;
    width: 1px;
    background: #ddd;
}
.blog-video .content .blog-date li p{
    text-transform: capitalize;
}
.blog-video .content .blog-date li i{
    padding-right: 10px;
    font-size: 20px;
    color: var(--red);
}
.blog-video .content .blog-date li p:hover{
    color: var(--red);
}
.blog-video .content p strong{
    color: var(--deep-blue);
}
/* list */
.blog-video .content .list{
    margin-top: -10px;
}
.blog-video .content .list li{
    position: relative;
}
.blog-video .content .list li:not(:last-child){
    padding-bottom: 5px;
}
.blog-video .content .list li p{
    color: var(--deep-blue);
    padding-left: 20px;
}
.blog-video .content .list li i{
    font-size: 15px;
    position: absolute;
    top: 3px;
    left: 0;
}
.blog-video .content .list li:hover p,
.blog-video .content .list li:hover i{
    color: var(--red);
}
/* video */
.blog-video .content .video{
    padding-top: 25px;
    padding-bottom: 20px;
}
/* audio */
.blog-video .content .audio{
    padding-top: 20px;
    padding-bottom: 25px;
}
.blog-video .content .mix-part{
    padding-bottom: 25px;
}
.blog-video .content .mix-part .audio .sound {
    padding-top: 177px;
}
.blog-video .content .mix-part .audio{
    padding-top: 0;
    padding-bottom: 0;
}
.blog-video .content .audio .sound{
    padding-top: 172px;
    position: relative;
    z-index: 1;
}
.blog-video .content .audio .sound:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: hsla(0, 0%, 0%, 0.2);
    height: 100%;
    width: 100%;
    z-index: -1;
}
.blog-video .content .sound button{
    color: #fff;
    background: var(--red);
    padding: 0 30px;
    font-size: 16px;
    line-height: 40px;
    text-transform: capitalize;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    position: absolute;
    top: 20px;
    right: 20px;
    font-weight: 500;
}
.blog-video .content .sound button:hover{
    background: var(--deep-blue);
}

/*===========================================================
 17: account page CSS
=============================================================*/
.account-page .account .item{
    background: #fff;
    box-shadow: 2px 0 95px hsla(0, 0%, 0%, 0.15);
    padding: 25px 30px;
}
.account-page .account .item h3{
    font-weight: 700;
    color: var(--deep-blue);
    text-align: left;
    padding-bottom: 5px;
}
.account-page .account .item p{
    text-align: left;
}
.account-page .account .item form{
    padding-top: 25px;
}
.account-page .account .item form .inputs{
    width: 100%;
    height: 55px;
    outline: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    padding: 0 15px;
    margin-bottom: 18px;
}
.account-page .account .item form .inputs::placeholder{
    text-transform: capitalize;
    color: var(--grey);
    font-size: 16px;
    font-family: var(--heebo);
}
.account-page .account .item form label {
    position: relative;
    font-size: 16px;
    line-height: 28px;
    color: var(--grey);
    padding-left: 35px;
    text-transform: capitalize;
}
.account-page .account .signin form label{
    text-transform: none;
}
.account-page .account .item form .check {
    opacity: 0;
    display: none;
}
.account-page .account .item form .check-custom {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
}

.account-page .account .item form .check:checked ~ .check-custom {
    background: var(--red);
    border-color: var(--red);
}

.account-page .account .item form .check-custom:after {
    content: "";
    position: absolute;
    display: none;
    left: 9px;
    top: 3px;
    width: 6px;
    height: 13px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer;
}

.account-page .account .item form .check:checked ~ .check-custom:after {
    display: block;
}
.account-page .account .item form a p{
    color: #ff0d0d;
    text-transform: capitalize;
}

.account-page .account .item form button{
    width: 100%;
    background: var(--red);
    font-size: 16px;
    line-height: 55px;
    color: #fff;
    text-transform: capitalize;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    margin-top: 20px;
}
.account-page .account .signin form button{
    margin-top: 0;
    margin-bottom: 10px;
}
.account-page .account .item form button:hover{
    background: var(--deep-blue);
}
.account-page .account .item .or{
    display: block;
    font-size: 16px;
    font-family: var(--heebo);
    text-transform: uppercase;
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
}
.account-page .account .item .or:after{
    content: '';
    height: 1px;
    width: 47%;
    background: #ddd;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: 0;
}
.account-page .account .item .or:before{
    content: '';
    height: 1px;
    width: 47%;
    background: #ddd;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    right: 0;
}
.account-page .account .item ul li{
    width: 33.33%;
}
.account-page .account .item ul li:not(:last-child){
    padding-right: 15px;
}
.account-page .account .item ul li a{
    width: 100%;
    display: inline-block;
    text-align: center;
    text-transform: capitalize;
    color: #fff;
    font-size: 16px;
    line-height: 42px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.account-page .account .item ul li .fb{
    background: #3b5998;
}
.account-page .account .item ul li .gl{
    background: #d85040;
}
.account-page .account .item ul li .tw{
    background: #007bff;
}
.account-page .account .item h5{
    font-weight: 500;
    color: var(--deep-blue);
    padding-top: 15px;
}

/*===========================================================
 18: category page CSS
=============================================================*/
.category-page .all-item .item {
    padding: 30px 0;
}
.category-page .all-item .item .cat-sm{
    background: var(--deep-blue);
    margin-bottom: 5px;
}
.category-page .all-item .item .cat-sm:hover{
    background: var(--red);
}

.category-page .all-item .item:first-child {
    padding-top: 0;
}

.category-page .all-item .item:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.category-page .all-item .item:last-child {
    padding-bottom: 0;
}

.category-page .all-item .item-left .image{
    padding-right: 20px;
}
.category-page .all-item .item-right .image{
    padding-left: 20px;
}
.category-page .all-item .item .media-body{
    padding-right: 20px;
}
.category-page .all-item .item .image img {
    width: 100%;
}
.category-page .all-item .item h3{
    font-weight: 700;
    color: var(--deep-blue);
}
.category-page .all-item .item ul{
    padding: 10px 0;
}
.category-page .all-item .item ul li:first-child{
    padding-right: 15px;
}
.category-page .all-item .item ul li p{
    text-transform: capitalize;
}
.category-page .all-item .item h3:hover,
.category-page .all-item .item ul li p:hover{
    color: var(--red);
}
.category-page .pages{
    padding-top: 80px;
}

/*===========================================================
 19: contact page CSS
=============================================================*/

/*===========================================================
 19.1: location CSS
=============================================================*/
.contact-page .location{
    /* padding-top: 5px; */
}
.contact-page .location #map {
    width: 100%;
    height: 630px;
}

/*===========================================================
 19.2: address CSS
=============================================================*/
.contact-page .all-address{
    margin-top: -130px;
}
.contact-page .all-address .item{
    -webkit-box-shadow: 0 0 90px hsla(0, 0%, 0%, 0.1);
    box-shadow: 0 0 90px hsla(0, 0%, 0%, 0.1);
    padding-top: 40px;
    padding-bottom: 30px;
    background: #fff;
}
.contact-page .all-address .item i{
    font-size: 40px;
    color: var(--deep-blue);
}
.contact-page .all-address .item:hover i{
    color: var(--red);
}
.contact-page .all-address .item h3{
    font-weight: 700;
    color: var(--deep-blue);
    text-transform: capitalize;
    padding-top: 10px;
    padding-bottom: 5px;
}

/*===========================================================
 19.3: message CSS
=============================================================*/
.contact-page .message .bg{
    background: #fff;
    box-shadow: 2px 0 95px hsla(0, 0%, 0%, 0.15);
    padding: 40px 70px 50px 70px;
}
.contact-page .message h2{
    font-size: 40px;
    font-weight: 700;
    color: var(--deep-blue);
    padding-bottom: 50px;
}
.contact-page .message .inputs{
    background: #fff;
    border: 1px solid #ddd;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    outline: none;
}
.contact-page .message textarea.inputs{
    padding: 15px;
    height: 250px;
}
.contact-page .message .inputs::placeholder{
    text-transform: capitalize;
    color: var(--grey);
    font-size: 16px;
    font-weight: 400;
    font-family: var(--heebo);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.contact-page .message .inputs:hover,
.contact-page .message .inputs:focus{
    border-color: var(--deep-blue);
}
.contact-page .message .inputs:focus::placeholder{
    padding-left: 50px;
    opacity: 0;
}
.contact-page .message button{
    font-size: 18px;
    line-height: 50px;
    background: var(--red);
    color: #fff;
    text-transform: capitalize;
    padding: 0 40px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}
.contact-page .message button:hover{
    background: var(--deep-blue);
}

/*===========================================================
 20: shop page CSS
=============================================================*/

/*===========================================================
 20.1: left content CSS
=============================================================*/
.shop-page .left-content .title{
    padding-bottom: 25px;
}
.shop-page .left-content .title h3{
    font-weight: 700;
    color: var(--deep-blue);
    text-transform: capitalize;
}
.shop-page .left-content .title ul li:first-child{
    margin-right: 15px;
}
.shop-page .left-content .title ul li a{
    display: inline-block;
    height: 40px;
    width: 50px;
    border: 1px solid #ddd;
    text-align: center
}
.shop-page .left-content .title ul li a i{
    font-size: 24px;
    color: var(--deep-blue);
    line-height: 40px;
}
.shop-page .left-content .title ul li a:hover,
.shop-page .left-content .title ul li a.active{
    background: var(--red);
    border-color: var(--red);
}
.shop-page .left-content .title ul li a.active i,
.shop-page .left-content .title ul li a:hover i{
    color: #fff;
}
.shop-page .left-content .item {
    overflow: hidden;
    position: relative;
}
.shop-page .left-content .item .image{
    margin-bottom: 8px;
    position: relative;
}
.shop-page .left-content .stockout .image{
    filter: grayscale(0.8);
    -webkit-filter: grayscale(0.8);
}
.shop-page .left-content .item .image img{
    width: 100%;
}
.shop-page .left-content .item .image p{
    line-height: 25px;
    padding: 0 12px;
    color: #fff;
    text-transform: capitalize;
    background: var(--red);
    width: max-content;
    position: absolute;
    top: 15px;
    left: 0;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
}
.shop-page .left-content .item .addcart{
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
    padding: 0 20px;
    text-transform: capitalize;
    background: var(--red);
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
}
.shop-page .left-content .stockout .addcart {
    pointer-events: none;
    cursor: default;
}
.shop-page .left-content .item .addcart:hover{
    background: var(--deep-blue);
}
.shop-page .left-content .stockout .image p,
.shop-page .left-content .item:hover p{
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}
.shop-page .left-content .item p span{
    text-decoration: line-through;
}
.shop-page .left-content .stockout .image a,
.shop-page .left-content .item:hover .image a{
    opacity: 1;
    visibility: visible;
}
.shop-page .left-content .item h5{
    font-weight: 700;
    color: var(--deep-blue);
    text-transform: capitalize;
}
.shop-page .left-content .item h5:hover,
.shop-page .left-content .item a:hover p{
    color: var(--red);
}
.shop-page .left-content .item ul{
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.shop-page .left-content .item:hover ul{
    bottom: 0;
}
.shop-page .left-content .item:hover .price{
    opacity: 0;
    visibility: hidden;
}
.shop-page .left-content .item ul li i{
    font-size: 14px;
    color: #ffc107;
}
.shop-page .left-content .item ul li{
    padding: 0 5px;
}
.shop-page .left-content .pages{
    padding-top: 80px;
}
.shop-page .left-content .all-item .item .image{
    padding-right: 30px;
}
.shop-page .left-content .all-item .item .addcart{
    position: relative;
    opacity: 1;
    visibility: visible;
    left: 0;
    top: auto;
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
    margin-top: 20px;
    border: 1px solid #ddd;
    color: var(--grey);
    background: transparent;
}
.shop-page .left-content .all-item .item .addcart:hover{
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}
.shop-page .left-content .all-item .item h5{
    padding-top: 5px;
    padding-bottom: 8px;
}


.shop-page .left-content .all-item .item ul{
    position: relative;
    top: 0;
    left: 0;
    bottom: auto;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    padding: 5px 0;
}

.shop-page .left-content .all-item .item:hover .price{
    opacity: 1;
    visibility: visible;
}


/*===========================================================
 20.2: right content CSS
=============================================================*/

.shop-page .right-content .topic{
    border: 0;
    padding: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.shop-page .right-content .topic .title{
    padding-bottom: 20px;
}
.shop-page .right-content .topic .title h3:after{
    display: none;
}

.shop-page .right-content .topic .price-filter-range input{
    width: auto;
    height: auto;
    border: none;
    background-color: transparent;
    font-family: var(--heebo);
    font-size: 16px;
    font-weight: 400;
    color: var(--grey);
    text-transform: capitalize;
    margin-top: 20px;
    outline: none;
}
.shop-page .right-content .topic .price-filter-range .ui-slider-handle {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: var(--red);
    border: none;
    cursor: pointer;
    outline: none;
}
.shop-page .right-content .topic .price-filter-range .ui-widget.ui-widget-content {
    border: none;
    height: 3px;
    background-color: #ddd;
    position: relative;
    margin-left: 10px;
}

.shop-page .right-content .topic .price-filter-range .ui-slider-horizontal .ui-slider-range {
    background: var(--red);
}
.shop-page .right-content .topic .price-filter-range button{
    font-size: 16px;
    text-transform: capitalize;
    background: var(--deep-blue);
    padding: 0 18px;
    line-height: 30px;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    float: right;
    margin-top: 15px;
}
.shop-page .right-content .topic .price-filter-range button:hover{
    background: var(--red);
}
.shop-page .right-content .small-item .item p:hover{
    color: var(--grey);
}

.shop-page .right-content .ad{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

/*===========================================================
 21: shop-detail page CSS
=============================================================*/

/*===========================================================
 21.1: detail CSS
=============================================================*/
.shop-detail .detail .gallery-top{
    position: relative;
    margin-bottom: 30px;
}
.shop-detail .detail .gallery-top .swiper-slide img{
    width: 100%;
}
.shop-detail .detail .gallery-top .swiper-slide:after{
    content: '';
    height: 100%;
    width: 100%;
    background: hsla(0, 0%, 0%, 0.12);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}
.shop-detail .detail .gallery-top .sale{
    line-height: 25px;
    padding: 0 12px;
    color: #fff;
    background: var(--red);
    width: max-content;
    text-transform: capitalize;
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 6;
}
.shop-detail .detail .gallery-top .popup-image i{
    height: 42px;
    width: 42px;
    background: #fff;
    line-height: 42px;
    color: var(--red);
    text-align: center;
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 6;
    font-size: 24px;
}
.shop-detail .detail .gallery-button-next ,
.shop-detail .detail .gallery-button-prev {
    height: 40px;
    width: 30px;
    line-height: 40px;
    border: 1px solid #fff;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 6;
}
.shop-detail .detail .gallery-button-next{
    right: 0;
}
.shop-detail .detail .gallery-button-prev{
    left: 0;
}
.shop-detail .detail .gallery-button-next:hover ,
.shop-detail .detail .gallery-button-prev:hover{
    background: var(--red);
    border-color: var(--red);
}

.shop-detail .detail .gallery-thumbs .swiper-slide-thumb-active{
    border: 1px solid var(--red);
}

.shop-detail .detail .stock{
    display: inline-block;
    line-height: 28px;
    font-size: 16px;
    padding: 0 10px;
    color: var(--grey);
    text-transform: capitalize;
    background: #e3f0ff;
}
.shop-detail .detail h3{
    font-weight: 700;
    color: var(--deep-blue);
    padding-top: 12px;
    padding-bottom: 10px;
}

.shop-detail .detail .c-review ul li:not(:last-child){
    padding-right: 8px;
}
.shop-detail .detail .c-review ul li i{
    color: #ffc107;
}
.shop-detail .detail .c-review p{
    text-transform: capitalize;
    padding-left: 15px;
}
.shop-detail .detail .price{
    padding: 10px 0;
}
.shop-detail .detail .desc{
    width: 75%;
}
.shop-detail .detail .category{
    padding-top: 5px;
    padding-bottom: 15px;
}
.shop-detail .detail .category a{
    color: var(--grey);
    font-size: 16px;
    line-height: 28px;
    text-transform: capitalize;
}
.shop-detail .detail .category a:hover{
    color: var(--red);
}
.shop-detail .detail .category p span{
    font-size: 17px;
    font-weight: 700;
    color: var(--deep-blue);
    text-transform: capitalize;
    padding-right: 5px;
}
.shop-detail .detail .border-area {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding-top: 20px;
    padding-bottom: 15px;
}
.shop-detail .detail .number-spinner button{
    height: 30px;
    width: 30px;
    background: #ffe3e3;
}
.shop-detail .detail .number-spinner button i{
    color: var(--deep-blue);
}
.shop-detail .detail .number-spinner .input-value{
    height: 30px;
    width: 50px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border: 1px solid var(--red);
    color: var(--red);
    margin: 0 10px;
    padding: 0;
}
.shop-detail .detail .cart-part .cart{
    display: inline-block;
    line-height: 38px;
    padding: 0 20px;
    color: #fff;
    background: var(--red);
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
    margin-left: 15px;
}
.shop-detail .detail .cart-part .cart:hover{
    background: var(--deep-blue);
}
.shop-detail .detail .border-area .wish{
    font-size: 16px;
    line-height: 28px;
    color: var(--grey);
    margin-top: 15px;
}
.shop-detail .detail .border-area .wish i{
    font-size: 24px;
    padding-right: 10px;
}
.shop-detail .detail .share{
    padding-top: 10px;
}
.shop-detail .detail .share p{
    font-weight: 700;
    color: var(--deep-blue);
    text-transform: capitalize;
}
.shop-detail .detail .share ul li{
    padding-left: 10px;
}
.shop-detail .detail .share ul li a{
    display: inline-block;
    width: 40px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #fff;
}
.shop-detail .detail .share ul li a.fb{
    background: #365493;
}
.shop-detail .detail .share ul li a.tw{
    background: #33ccff;
}
.shop-detail .detail .share ul li a.gp{
    background: #d44132;
}
.shop-detail .detail .share ul li a.ln{
    background: #0274b3;
}

/*===========================================================
 21.2: review CSS
=============================================================*/
.shop-detail .review{
    padding-bottom: 70px;
}
.shop-detail .review .nav-tabs {
    border-bottom: 2px solid #ddd;
    justify-content: center;
    margin-bottom: 25px;
}
.shop-detail .review .nav-tabs .nav-item{
    margin-bottom: 0;
}
.shop-detail .review .nav-tabs .nav-link,
.shop-detail .review .nav-tabs .nav-link.active {
    border: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    padding: 0 30px;
    font-size: 24px;
    color: var(--deep-blue);
    text-transform: capitalize;
    font-weight: 700;
}
.shop-detail .review .nav-tabs .nav-link.active{
    color: var(--red);
}

.shop-detail .review .tab-content h5{
    font-weight: 700;
    color: var(--deep-blue);
    padding-top: 15px;
    padding-bottom: 5px;
}
.shop-detail .review .tab-content .image img,
.shop-detail .review .tab-content .comment li .image img{
    width: 100%;
}
.shop-detail .review .tab-content .comment .item{
    padding-right: 15px;
}
.shop-detail .review .tab-content .comment li .image{
    padding-right: 20px;
}
.shop-detail .review .tab-content .comment li .star li{
    padding-right: 10px;
}
.shop-detail .review .tab-content .comment li .star li i{
    font-size: 15px;
    color: #ffc107;
}
.shop-detail .review .tab-content .comment li:nth-child(2) .star li:last-child i{
    color: #ddd;
}
.shop-detail .review .tab-content .comment h5{
    text-transform: capitalize;
    padding-top: 5px;
}
.shop-detail .review .tab-content .comment a p{
    padding-bottom: 10px;
}
.shop-detail .review .tab-content .comment h5:hover,
.shop-detail .review .tab-content .comment a:hover p{
    color: var(--red);
}
.shop-detail .review .add-review h5{
    padding-top: 0;
}
.shop-detail .review .add-review .rating-stars p{
    text-transform: capitalize;
    color: var(--deep-blue);
    padding-right: 10px;
}
.shop-detail .review .add-review .rating-stars ul {
    list-style-type:none;
    padding:0;
    -moz-user-select:none;
    -webkit-user-select:none;
}
.shop-detail .review .add-review .rating-stars ul > li.star {
    display:inline-block;
}

.shop-detail .review .add-review .rating-stars ul > li.star > i {
    font-size: 15px;
    color:#ddd;
    cursor: pointer;
}

.shop-detail .review .add-review .rating-stars ul > li.star.selected > i {
    color:#ffc107;
}
.shop-detail .review .add-review form{
    padding-top: 25px;
}
.shop-detail .review .add-review .inputs{
    width: 100%;
    height: 40px;
    background: transparent;
    border: 1px solid #ddd;
    padding: 0 12px;
    outline: none;
}
.shop-detail .review .add-review textarea.inputs{
    height: 200px;
    resize: vertical;
    padding: 15px 12px;
}
.shop-detail .review .add-review .inputs:focus,
.shop-detail .review .add-review .inputs:hover{
    border-color: var(--red);
}
.shop-detail .review .add-review .inputs::placeholder{
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
    color: var(--grey);
}
.shop-detail .review .add-review button{
    width: 100%;
    line-height: 45px;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    color: #fff;
    background: var(--red);
}
.shop-detail .review .add-review button:hover{
    background: var(--deep-blue);
}

/*===========================================================
 21.3: popular CSS
=============================================================*/
.shop-detail .popular{
    padding-bottom: 70px;
}
.shop-detail .popular .title{
    padding-bottom: 30px;
}
.shop-detail .popular .title h3{
    position: relative;
}
.shop-detail .popular .title h3:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    height: 2px;
    width: 125px;
    background: url(../images/shop/border.png) no-repeat center;
}

/*===========================================================
 22: lifestyle page CSS
=============================================================*/
.lifestyle .content .all-item .item{
    padding-right: 50px;
}
.lifestyle .content .all-item .item .image{
    padding-right: 30px;
}
/* .lifestyle .content .all-item .item .image img{
    width: 100%;
} */
.lifestyle .content .all-item .item h3{
    font-weight: 700;
    color: var(--deep-blue);
}
.lifestyle .content .all-item .item ul{
    padding-top: 10px;
    padding-bottom: 10px;
}
.lifestyle .content .all-item .item ul li:first-child{
    padding-right: 15px;
}
.lifestyle .content .all-item .item ul li p{
    text-transform: capitalize;
}
.lifestyle .content .all-item .item h3:hover,
.lifestyle .content .all-item .item ul li p:hover{
    color: var(--red);
}
.lifestyle .content .pages{
    padding-top: 80px;
}
/*===========================================================
 23: cart page CSS
=============================================================*/

/* table */

.cart-page .cart .table{
    margin-bottom: 20px;
}
.cart-page .cart .table tbody{
    border-bottom: 1px solid #ddd;
}
.cart-page .cart .table thead th {
    vertical-align: bottom;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--deep-blue);
}


.cart-page .cart .table td,
.cart-page .cart .table th {
    padding: 10px 0;
    vertical-align: middle;
    border: 0;
    text-transform: capitalize;
    font-size: 16px;
    color: var(--grey);
}
.cart-page .cart .table td a{
    color: var(--grey);
}
.cart-page .cart .table td a:hover{
    color: var(--red);
}
.cart-page .cart .table tr:first-child td{
    padding-top: 30px;
}
.cart-page .cart .table tr:last-child td{
    padding-bottom: 30px;
}
.cart-page .cart .table tr td.pro-img{
    min-width: 115px;
}

.cart-page .cart .table tr td.pro-price{
    min-width: 130px;
}
.cart-page .cart .table tr td.pro-quantity{
    min-width: 160px;
}
.cart-page .cart .number-spinner button{
    height: 30px;
    min-width: 30px;
    background: #ffe3e3;
}
.cart-page .cart .number-spinner button i{
    color: var(--deep-blue);
}
.cart-page .cart .number-spinner .input-value{
    height: 30px;
    width: 50px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border: 1px solid var(--red);
    color: var(--red);
    margin: 0 10px;
    padding: 0;
}

/* coupon */

.cart-page .cart .coupon input{
    width: 225px;
    height: 40px;
    background: #ffe3e3;
    border: 0;
    outline: none;
    padding: 0 15px;
    margin-right: 15px;
}
.cart-page .cart .coupon input::placeholder{
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
    color: var(--grey);
}
.cart-page .cart .coupon button{
    line-height: 40px;
    color: #fff;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
    background: var(--red);
    padding: 0 15px;
}
.cart-page .cart .coupon .coupon-code button{
    line-height: normal;
}
.cart-page .cart .coupon button i{
    font-size: 22px;
    line-height: 39px;
}
.cart-page .cart .coupon button:hover{
    background: var(--deep-blue);
}

/* cart total */

.cart-page .cart .cart-total{
    border: 1px solid #ddd;
    padding: 30px;
}
.cart-page .cart .cart-total .title{
    padding-bottom: 15px;
}
.cart-page .cart .cart-total .title h5{
    text-transform: capitalize;
    color: var(--deep-blue);
    font-weight: 700;
    margin-top: -5px;
}
.cart-page .cart .cart-total .sub{
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

.cart-page .cart .cart-total .ship{
    padding-top: 15px;
    padding-bottom: 15px;
}
.cart-page .cart .cart-total .ship p{
    padding-bottom: 15px;
}
.cart-page .cart .cart-total .input-container{
    position: relative;
    display: block;
    padding-left: 40px;
}
.cart-page .cart .cart-total .input-container span{
    font-size: 16px;
    font-family: var(--heebo);
    color: var(--grey);
    line-height: 32px;
    text-transform: capitalize;
}
.cart-page .cart .cart-total .input-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.cart-page .cart .cart-total .checkmark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
}
.cart-page .cart .cart-total .input-container:hover input ~ .checkmark{
    background: #ffe3e3;
}
.cart-page .cart .cart-total .input-container input:checked ~ .checkmark:after {
    display: block;
}

.cart-page .cart .cart-total .input-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
}
.cart-page .cart .estimate{
    padding-bottom: 15px;
}
.cart-page .cart .estimate h5,
.cart-page .cart .checkout h5{
    font-size: 16px;
    color: var(--deep-blue);
    font-weight: 700;
    text-transform: capitalize;
}
.cart-page .cart .estimate p:hover{
    color: var(--red);
}
.cart-page .cart .checkout{
    border-top: 1px solid #ddd;
    padding-top: 10px;
}
.cart-page .cart .checkout a,
.cart-page .cart .checkout button{
    display: inline-block;
    text-align: center;
    width: 100%;
    border: 1px solid var(--red);
    margin-top: 15px;
    font-size: 18px;
    line-height: 40px;
    color: var(--red);
    font-weight: 700;
    text-transform: capitalize;
}
.cart-page .cart .checkout button:hover,
.cart-page .cart .checkout a:hover{
    background: var(--red);
    color: #fff;
}

/*===========================================================
 24: checkout page CSS
=============================================================*/
.checkout-page .cart .checkout .total{
    padding-bottom: 15px;
}
.checkout-page .billing .title{
    padding-bottom: 30px;
}
.checkout-page .billing .title h3{
    font-weight: 700;
    text-transform: capitalize;
    color: var(--deep-blue);
    border-bottom: 1px solid #ddd;
}
.checkout-page .billing .bill-input{
    width: 100%;
    border: 1px solid #ddd;
    outline: none;
    height: 40px;
    padding: 0 15px;
}
.checkout-page .billing .bill-input:hover,
.checkout-page .billing .bill-input:focus{
    border-color: var(--deep-blue);
}
.checkout-page .billing .bill-input::placeholder{
    color: var(--grey);
    font-size: 16px;
    font-family: var(--heebo);
    text-transform: capitalize;
}
.checkout-page .billing .select2-dropdown{
    border-color: #ddd;
}
.checkout-page .billing .select2-container--default {
    width: 100% !important;
}
.checkout-page .billing .select2-container--default
.select2-selection--single .select2-selection__rendered{
    font-family: var(--heebo);
    color: var(--grey);
    padding: 0 15px;
    text-transform: capitalize;
    line-height: 40px;
}
.checkout-page .billing .select2-container--default
.select2-selection--single{
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-color: #ddd;
    height: 40px;
    outline: none;
}

.checkout-page .billing .select2-container--default
.select2-selection--single .select2-selection__arrow{
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.checkout-page .billing .select2-container--default
.select2-search--dropdown .select2-search__field{
    outline: none;
    border-color: #ddd;
}

/* accordian */
.checkout-page .billing .create{
    padding: 30px 0;
}
.checkout-page .billing .create .card{
    border: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.checkout-page .billing .create .card:not(:last-child){
    padding-bottom: 15px;
}
.checkout-page .billing .create .card-header {
    padding: 0;
    border: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    background: transparent;
}
.checkout-page .billing .create .card-header label{
    padding: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    margin: 0;
    font-size: 16px;
    color: var(--grey);
    text-decoration: none;
}
.checkout-page .billing .create .card-header label {
    position: relative;
    padding-left: 40px;
}

.checkout-page .billing .create .card-header .check {
    opacity: 0;
    display: none;
}

.checkout-page .billing .create .card-header .check-custom {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    cursor: pointer;
}

.checkout-page .billing .create .card-header .check:checked ~ .check-custom {
    background: var(--red);
    border-color: var(--red);
}

.checkout-page .billing .create .card-header .check-custom:after {
    content: "";
    position: absolute;
    display: none;
    left: 9px;
    top: 3px;
    width: 6px;
    height: 13px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer;
}

.checkout-page .billing .create .card-header .check:checked ~ .check-custom:after {
    display: block;
}
.checkout-page .billing .create .card-body{
    padding-left: 0;
    padding-right: 0;
}
.checkout-page .billing .notes textarea{
    height: 155px;
    padding: 15px;
    resize: vertical;
}

/*===========================================================
 25: wishlist page CSS
=============================================================*/
.wishlist-page .wishlist{
    padding-top: 65px;
    padding-bottom: 70px;
}
.wishlist-page .wishlist .table{
    margin-bottom: 0;
}

.wishlist-page .wishlist .table thead th {
    vertical-align: bottom;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--deep-blue);
}


.wishlist-page .wishlist .table td,
.wishlist-page .wishlist .table th {
    padding: 10px 0;
    vertical-align: middle;
    border: 0;
    text-transform: capitalize;
    text-align: center;
}
.wishlist-page .wishlist .table td a{
    color: var(--grey);
}
.wishlist-page .wishlist .table td a p:hover{
    color: var(--red);
}
.wishlist-page .wishlist .table tr:first-child td{
    padding-top: 30px;
}
.wishlist-page .wishlist .table .pro-stock p{
    line-height: 28px;
    padding: 0 10px;
    background: #e3f0ff;
    width: max-content;
    margin: 0 auto;
}
.wishlist-page .wishlist .table .pro-cart a{
    display: inline-block;
    line-height: 40px;
    padding: 0 20px;
    border: 1px solid #ddd;
    font-weight: 500;
}
.wishlist-page .wishlist .table .pro-cart a:hover{
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}
.wishlist-page .wishlist .table .pro-delete i{
    color: var(--deep-blue);
}
.wishlist-page .wishlist .table .pro-delete button:hover i{
    color: var(--red);
}
.wishlist-page .wishlist .table .pro-img{
    min-width: 175px;
}
.wishlist-page .wishlist .table .pro-name{
    min-width: 350px;
    text-align: left;
}
.wishlist-page .wishlist .table .pro-price{
    min-width: 165px;
}
.wishlist-page .wishlist .table .pro-stock{
    min-width: 150px;
}
.wishlist-page .wishlist .table .pro-cart{
    min-width: 170px;
}

/*===========================================================
 26: error page CSS
=============================================================*/
.error-page .error h1{
    font-size: 350px;
    line-height: 260px;
    font-weight: 500;
    color: var(--deep-blue);
    padding-bottom: 60px;
}
.error-page .error h2{
    font-size: 45px;
    line-height: 62px;
    font-weight: 500;
    color: var(--deep-blue);
    padding-bottom: 15px;
}
.error-page .error p{
    font-size: 26px;
    line-height: 45px;
    font-weight: 600;
    color: var(--grey);
    padding-bottom: 30px;
}
.error-page .error a{
    display: inline-block;
    line-height: 55px;
    padding: 0 25px;
    text-transform: capitalize;
    background: var(--red);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}
.error-page .error a:hover{
    background: var(--deep-blue);
}