/*
Theme Name: Corposet
Version: 0.0.7
Tested up to: 5.8
Requires PHP: 5.4
Description: Corposet is a clean and elegant WordPress theme. It is a perfect solution for any type of business, Corposet comes with a modern, sleek design and advanced functionalities.
Author: Unibirdtech
Author URI: http://unibirdtech.com/
Theme URI: https://unibirdtech.com/free-themes/corposet-free-wordpress-theme/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: corposet
Tags: one-column, two-columns ,right-sidebar, flexible-header, custom-background, custom-header, custom-menu, editor-style, featured-images, footer-widgets, theme-options, threaded-comments, translation-ready, custom-logo, blog, e-commerce
*/

/* ---- ==== body ==== ----*/

body {
    padding: 0;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--light-color);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
.h1 {
    font-size: 34px;
}

h2,
.h2 {
    font-size: 32px;
}

h3,
.h3 {
    font-size: 30px;
}

h4,
.h4 {
    font-size: 28px;
}

h5,
.h5 {
    font-size: 26px;
}

h6,
.h6 {
    font-size: 22px;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: 'Poppins', sans-serif;
    line-height: 1.25;
    color: #151a33;
}
p{
    color: var(--light-color);
}
.alignright {
    text-align: right;
}

.alignleft {
    text-align: left;
}

.aligncenter {
    text-align: center;
}

.content {
    padding-top: 40px;
    padding-bottom: 30px;
}


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

label {
    width: 100%;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select,
.form-control,
input:not([type]),
textarea {
    border-radius: 0;
    margin-bottom: 20px;
    box-shadow: inherit;
    padding: 6px 12px;
    line-height: 30px;
    border-width: 2px;
    border-style: solid;
    width: 100%;
    border-color: #eee;
}

button,
html [type="button"],
[type="reset"],
[type="submit"],
.btn,
.more-link {
    padding: 10px 35px;
    line-height: 26px;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    transition: all 0.1s ease 0s;
    border-width: 2px;
    border-style: solid;
    border-color: #ffffff;
    /*text-transform: uppercase;*/
}

.btn:hover {
    transition: all 0.3s ease 0s;
    outline: none;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.5);
}

.hover_eff {
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    transition: all 0.3s linear;
}
.btn-outline{
    background-color: transparent;
    color: inherit;
    border: 1px solid;
}
.hover_eff:hover {
    transform: translateY(-8px);
}
ul.social li a{
    background-color: #fff;
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    display: inline-flex;
    line-height: 1;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
    transition: 0.8s;
}
.no-gutter>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

.about .img-fluid {
    /* box-shadow: -30px 30px 1px 0 rgba(0, 0, 0, 0.1); */
    margin-bottom: 30px;
}

blockquote {
    position: relative;
    width: 100%;
    border-width: 0 0 0 5px;
    border-style: solid;
    padding: 20px;
}

blockquote p {
    font-style: italic;
    width: 94%;
    display: table;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}

table {
    width: 100%;
}
button.close{
        padding: 0 5px 0 0px;
        font-size: 2rem;
        border: none;
        box-shadow: none;
}

/* =WordPress Core
-------------------------------------------------------------- */

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.owl-carousel .owl-nav div {
    width: 50px;
    height: 50px;
    display: block;
    font-size: 24px;
    line-height: 50px;
    opacity: 0;
    border-radius: 10%;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}



.owl-carousel:hover .owl-nav div {
    opacity: 1;
}

.owl-carousel .owl-nav {
    opacity: 1;
    transition: all 0.3s ease 0s;
}

.owl-carousel:hover .owl-nav {
    opacity: 1;
}

.owl-carousel:hover .owl-nav .owl-prev {
    right: 35px;
    top: 80%;
}

.owl-carousel:hover .owl-nav .owl-next {
    right: 35px;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
    position: absolute;
    top: 90%;
    z-index: 5;
    margin: -30px 0 0;
    transition: all 0.3s ease 0s;
}

.owl-nav .owl-prev {
    right: 8px;
}

.owl-nav .owl-prev i {
    margin-left: 0;
    transition: all 0.3s ease 0s;
}

.owl-nav .owl-prev:hover i {
    margin-left: 0;
    
}

.owl-nav .owl-next {
    right: 8px;
}

.owl-nav .owl-next i {
    margin-right: 0;
    transition: all 0.3s ease 0s;
}

.owl-nav .owl-next:hover i {
    margin-right: 0;
}

.owl-dots {
    display: flex;
   justify-content: center;
   align-items: center;
    padding: 0 5px;
    margin-top: 20px;
}

.owl-dots button.owl-dot.active span {
    height: 12px;
    width: 12px;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.owl-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border-width: 2px;
    border-style: solid;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    background: #fff;
    border-color: #fff;
}

.owl-dots button.owl-dot {
    height: auto;
    width: auto;
    color: #fff;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 50%;
    margin-left: 3px;
    margin-right: 3px;
}

.owl-dots {
    bottom: 0px;
    left: 0;
    position: relative;
    right: 0;
    text-align: center;
    width: 100%;
}

.mapiframe {
    margin: 40px 0 -40px 0;
}


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

header.trasparent {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 50;
}


/* ---- topbar ----*/


.topbar {
    padding: 16px 0;
}

.topbar ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.topbar ul li {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

.topbar ul li a {
    font-size: 14px;
    line-height: 1;
}

.topbar ul.left li i {
    margin-right: 8px;
}

.topbar ul.left {
    justify-content: flex-start;
}

.topbar ul.right {
    justify-content: flex-end;
}

.topbar ul.right li i {
    margin-left: 8px;
}
.topbar ul.right.social li i {
    margin-left: 0;
}
.topbar ul.right.social li  {
    margin-left: 0;
    margin-right: 0;
}
.topbar .quote_btn {
    margin: -10px 0 -10px 10px;
    border-radius: 0;
    padding: 10px 20px;
}

.site-branding-text h1,
.site-branding-text h1 a {
    font-size: 22px;
    margin: 0;
}

.site-description {
    margin: 0;
}
.nav-wapper {
    background: #ffffff30;
}
.nav-wapper .text{
    display:flex;
    justify-content: space-between;
    align-items: center;     

}

.navbar {
    padding: 10px;
}



.right-aria {
    display: flex;
    align-items: center;
}

.right-aria a.\#{
    cursor: pointer;
    padding: 10px;
}

.right-aria a .fa.fa-search {
    font-size: 20px;
    color: #fff;
    pointer-events: none;
}

.navbar-nav li.nav-item {
    padding: 10px 10px;
}


ul.dropdown-menu.show{
    padding: 0;
}
ul.dropdown-menu.show li{
    padding: 10px 18px;
}
ul.dropdown-menu.show li:hover{
    background-color: var(--primary-color);

}
ul.dropdown-menu.show li:hover a{
    color: #fff;
}

button.navbar-toggler {
    padding: 10px 13px;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(6, 16, 24, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  /* background-color: #fff; */
}

/* ----------header-2---------- */

header.hds-2 .topbar {
    background: #00000091;
    border-top: 8px solid var(--primary-color);
}

header.hds-2 .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

header.hds-2 {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 25;
}
header.hds-2 .nav-wapper {
    background: transparent;
    transform: translateY(-40px);
}

header.hds-2 .main-nav{
    border-radius: 40px;
    padding: 0px 15px;
    justify-content: flex-end;
}

header.hds-2 .topbar {
    padding: 20px 0px 60px;
}
header.hds-2  div.right-aria a.quote_btn {
    padding: 22px 35px;
}
header.hds-2 ul.social li {
    margin: 0;
}

header.hds-2 .right-aria a.\#{
    cursor: pointer;
    padding: 20px 25px;

}
header.hds-2 .right-aria a .fa.fa-search {
    padding: 0 15px;
   

}
header.hds-2 .navbar{
    padding: 10px;
}

header.hds-2 .navbar li a:hover, header.hds-2 .navbar li a:focus {
    color: var(--primary-color);
}

header.hds-2 .topbar ul.left {
    justify-content: flex-start;
    padding: 0 10px;}

header.hds-2 .main-nav a.nav-brand{
    display: none;

}
header.hds-2 ul.dropdown-menu.show li:hover a {
    color: #fff;
}

/* ----------header-3---------- */

header.hds-3 .topbar{
    padding: 5px 0;
}
header.hds-3 .topbar ul.right li a{
    background-color: transparent;
}
header.hds-3 .navbar li a {
    color: #000;
}
header.hds-3 .middlebar {
    border-bottom: 1px solid #efefef;
    padding: 20px 0;
}
header.hds-3 .middlebar ul.left {
    display: flex;
    flex-wrap: wrap;
}
header.hds-3 .middlebar ul.left li {
    padding: 10px;
}
header.hds-3 .middlebar ul.left li.active{
    padding: 8px;
    background: #eee;
    border-radius: 25px;

}
header.hds-3 .middlebar ul.left li.active i{
    color: var(--primary-color);
}

header.hds-3 .middlebar ul.left li a{
    padding: 0 5px;
    color: #7a7a7a;
}
header.hds-3 .middlebar ul.social{
  display: flex;
  justify-content: flex-end;
}
header.hds-3 .middlebar .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
header.hds-3 div.right-aria a.btn{
    padding: 10px 15px;
}
header.hds-3 .nav-wapper a.nav-brand {
    display: none;
}
header.hds-3 div#navbarCollapse {
    z-index: 10;
}
header.hds-3 .navbar li a:hover, header.hds-3 .navbar li a:focus {
    color: var(--primary-color);
}
header.hds-3 ul.dropdown-menu.show li:hover a {
    color: #fff;
}

/* ----------header-4---------- */

header.hds-4 {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 25;
}
header.hds-4 .topbar ul.left li i {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    
}
header.hds-4 .topbar ul.left li:hover i{
    animation: icon-bounce 0.8s cubic-bezier(.24,.74,.58,1) both 1;
}

@keyframes icon-bounce {
    100%, 0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(10px);
    }
    
}

header.hds-4 .topbar ul.left { 
    flex-wrap: wrap;
    
}
header.hds-4 .topbar ul.left li{
    margin-left: 0px;
    margin-right: 50px; 

}

header.hds-4 .social li{
    margin-left: 2px;
    margin-right: 2px;
}

header.hds-4 .social li a {
    border-radius: 50%;
}

header.hds-4 .right-aria a .fa.fa-search {
    color: #000;
}

header.hds-4 .navbar {
    padding: 0px;
}
header.hds-4 .navbar li a:hover, header.hds-4 .navbar li a:focus {
    color: var(--primary-color);
}
header.hds-4 ul.dropdown-menu.show li:hover a {
    color: #fff;
}

header.hds-4 .main-nav{
    border-radius: 10px;
    padding: 10px 15px;
    justify-content: flex-end;
}

header.hds-4 .main-nav .nav-brand img{
    width: 100%;
    height: 100%;
}

header.hds-4 .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

/* ----------header-5---------- */

header.hds-5 .navbar li a {
    color: #000;
}

header.hds-5 .navbar li a:hover, header.hds-5 .navbar li a:focus{
    color: var(--primary-color);
}
header.hds-5 .right-aria a .fa.fa-search {
    color: #000;  
}

header.hds-5 ul.dropdown-menu.show li:hover a {
    color: #fff;
}
/* ---- ==== Home Sections ==== ----*/


/* ---- slider ----*/

.sliderhome .slide:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.sliderhome .slide {
    position: relative;
    height: 750px;
    background-color: lightgray;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sliderhome .owl-slide-animated {
    transform: translateX(20px);
    transition: all 0.05s;
}

.sliderhome .owl-slide-title {
    transition-delay: 0.2s;
    font-size: 65px;
    font-weight: 800;
    line-height: 77px;
}

.sliderhome .owl-slide-subtitle.is-transitioned {
    transition-delay: 0.35s;
    font-size: 20px;
}

.sliderhome .owl-slide-cta.is-transitioned {
    transition-delay: 0.5s;
}

.sliderhome .btn:first-child {
    margin-right: 15px;
}

.sliderhome .owl-dots,
.sliderhome .owl-nav div {
    position: absolute;
}

.sliderhome .owl-dots .owl-dot,
.sliderhome .owl-nav [class*="owl-"]:focus {
    outline: none;
}

.sliderhome .owl-dots .owl-dot span {
    background: transparent;
    border: 1px solid var(--main-black-color);
    transition: all 0.2s ease;
}

.sliderhome .owl-dots .owl-dot:hover span,
.sliderhome .owl-dots .owl-dot.active span {
    background: var(--main-black-color);
}

.sliderhome .owl-nav div {
    margin: 0;
}

.sliderhome .owl-nav .owl-prev {
    right: 30px;
}

.sliderhome .owl-nav .owl-next {
    right: 30px;
}

.sliderhome .owl-slide-text {
    overflow: hidden;
    margin-top: 10%;
    position: relative;
    margin-left: 10px;
}
.sliderhome .owl-slide-text::before {
   background-color:  var(--primary-color);
   content: '';
   height: 70%;
   width: 5px;
   position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-40%);

}
.owl-item.active .owl-slide-title{
	animation-name: silder-right;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	
}
@keyframes silder-right{
	0%{
		transform: translateX(-500px);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	100%{
		transform: translateX(0px);
		animation-timing-function: ease-out;
		opacity: 1;
	}
	
}

.owl-item.active .owl-slide-subtitle{
	animation-name: slideUp;
	animation-duration: 1.2s;
	animation-timing-function: ease;
}
@keyframes slideUp{
	0% {
    opacity: 0;
    -webkit-transform: translateY(500px);
    -ms-transform: translateY(500px);
    transform: translateY(500px);
	animation-timing-function: ease-in;
	}

	100% {
	    opacity: 1;
	    -webkit-transform: translateY(0);
	    -ms-transform: translateY(0);
	    transform: translateY(0);
		animation-timing-function: ease-out;
	}

}

.owl-item.active .owl-slide-text a.btn{
    animation-name: slideUp;
	animation-duration: 1.2s;
	animation-timing-function: ease;
}

/* ---- section title ----*/

.section {
    padding-top: 60px;
    padding-bottom: 40px;
    position: relative;
}

.section .container {
    z-index: 1;
    position: relative;
}

.bg-dark:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.bg-dark:after {
    opacity: .8;
   
}

.cover-bg {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.tp-80 {
    top: -80px;
    z-index: 1;
}

.tp-100 {
    top: -100px;
    z-index: 1;
}

.tp-130 {
    top: -130px;
    z-index: 1;
}

.tp-150 {
    top: -150px;
    z-index: 1;
}

.pdt0 {
    padding-top: 0;
}

.pdb0 {
    padding-bottom: 0;
}

.pdb-100 {
    padding-bottom: 100px;
}

.pdb-150 {
    padding-bottom: 150px;
}

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

.mb-100 {
    margin-bottom: -100px
}

.section-heading {
    margin-bottom: 40px;
}

.section-heading h2.ititle {
    font-size: 36px;
    font-weight: 800;
}

.section-heading h3.sub-title {
    font-size: 16px;
    font-weight: 600;
    position: relative;
    display: inline-block;
    margin-bottom: 2px;
}

.section-heading .discription {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}
/* ---- About ----*/

.about .ab-img {
    position: relative;
}
.about .bs-text::after{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 5px;
    border: 5px solid var(--primary-color);
    animation-name: leftright;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease; 
   
}
@keyframes leftright {
    0%{

        right: 0;
        transform: rotate(0);
    }
    50% {
        width: 20%;
        height: 20%;
        right: 450px;
        transform: rotate(-270deg);
    }
    100% {
        width: 100%;
        height: 100%;
        right: 0px;
        transform: rotate(0deg);
    }
    
}


.about .bs-text {
    position: absolute;
    bottom: 8%;
    right: 0%;
    padding: 22px;
    font-size: 19px;
    width: 220px;
    color: #fff;
    padding: -3px;
    text-align: center;
    line-height: 20px;
    z-index: 1;
}
.about .bs-text h4{
    color: #fff;
    font-size: 3rem;
}
.about .bs-text::before{
    content: '';
    display: block;
    background-color: var(--primary-color);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -5px;
    right: 0;
    opacity: 0.8;
    z-index: -1;
    border-radius: 5px;
}


/* ---- features ----*/

.features {  
    padding: 10px 0px;
}

.feature {
    padding: 30px 25px;
    box-shadow: 0px 2px 60px 0px rgba(0, 0, 0, .1);
    background-color: #fff;
    position: relative;
    z-index: 1;
    border-left: 5px solid var(--primary-color);
    border-radius: 5px;
}
.feature::before{
    content: "";
    display: block;
    background-color: var(--primary-color);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    transition: all 0.8s ease;
    z-index: -1;
}
.feature:hover::before{
    height: 100%;
}
.feature.active::before{
    height: 100%;
}

.feature i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 36px;
    border-radius: 5px;
}

.feature h5 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}
.feature p {
    margin: 0;
}
/* --------feature-two--------- */
.section.features.two {
    padding: 90px 0;
}


/* ---- service ----*/
.services{
    background-image: url('images/services/bg.jpg');
}
.service {
    position: relative;
    overflow: hidden;
    box-shadow: 0px 2px 60px 0px rgba(0, 0, 0, .1);
    margin-bottom: 30px;
    background-color: #fff;
    padding: 10px;

}
.service::before{
    content: '';
    display: block;
    background-color: vaR(--primary-color);
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 95%;
    height: 0.5rem;
    transform: translateX(-50%);
    transition: 0.5s;
    z-index: 2;
}
.service:hover::before{
    width: 100%;
}

.ser-img{
    overflow: hidden;
}
.ser-img img {
    width: 100%;
    transition: all 0.8s ease;

}

.service:hover .ser-img img{
    transform: scale(1.5);
}

.service .inner {
    padding: 30px 0;
    transition: all 0.3s linear;
    background: #fff;
}
.service .top_icon {

    border-radius: 50%;
    width: 80px;
    height: 80px;
    text-align: center;
    box-shadow: 0px 2px 60px 0px rgb(0 0 0 / 13%);
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
    transform: translateY(-80%);
    border: 3px solid #fff;
}

.service .top_icon i {
  
    font-size: 2rem;
    line-height: 1;

}

.service .top_img {
    margin-bottom: 20px;
    margin-top: -30px;
    margin-left: -30px;
    margin-right: -30px;
}

.service .bottom_text h2 {
    font-size: 22px;
    font-weight: 800;
}

/* -----------service-two-------- */
.service.two{
    position: relative;
} 
.service.two .ser-img {
    position: relative;
    overflow: hidden;
}

.service.two .ser-img img{
    width: 100%;
    height: 100%;
}
.service.two .ser-img::after{
    content: '';
    display: block;
    background-color:var(--primary-color);
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: calc(100% - 5px);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.service.two:hover .ser-img::after{
    top: 0;
}

.service.two .top_icon {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all 0.5s;

}

.service.two:hover .top_icon{
    top: 20%;
    opacity: 1;
} 

/* -----------service-three-------- */

.service.three{
    padding: 0;
   
}
.service.three .ser-img::after{
    content: '';
    display: block;
    background-color:var(--primary-color);
    opacity: 0.3;
    filter: brightness(0.3);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}


.service.three:hover .ser-img {
    overflow: hidden;
    background-color: var(--primary-color);
    opacity: 0.5;
}

.service.three .inner{
    position: absolute;
    left: 0;
    top: 0;
    padding: 15px;
    height: 100%;
    width: 100%;
}
.service.three:hover .bottom_text{
    color: #fff;
}
.service.three:hover .bottom_text h2 a{
 color: #fff;
}
.service.three:hover .bottom_text p{
    color: #fff;
}
.service.three:hover .inner{
    background: transparent;
}
.service.three .top_icon{
    position: unset;
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    float: unset;
    display: flex;
    transform: translateY(0px);
    flex-direction: column;

} 
.service.three .top_icon i {
    margin-bottom: 20px;
    font-size: 30px;
    width: 100%;
    height: 100%;
    line-height: 90px;
    border-radius: 50%;
}


/* ---- teams ----*/

.section.cover-bg p {
    color: #fff;
}

.team {
    box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}
.team.one .inner {
    position: relative;
}
.team.one .bottom_content {
    padding: 20px;
    position: absolute;
    bottom: 0;
}

.team .top_img {
    position: relative;
    overflow: hidden;
}

.team .top_img img {
    max-width: 100%;
    width: 100%;
}

.team .social {
    align-items: end;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    height: 100%;
    position: absolute;
    top: 0;
    right: 100%;
    width: 100%;
    transition: all .3s ease;
    text-align: center;
    z-index: 1;
}

.team:hover .social {
    right: 0;
}

.team.one h2 {
    font-size: 20px;
    font-weight: 600;
    display: block;
    padding: 5px 10px;
}

.team.one .designation {
  
    margin-bottom: 10px;
    display: inline-block;
    border-radius: 5px;
    padding: 0px 10px;
}

.team.one .social a {
    width: 30px;
    height: 30px;
    margin-top: 10px;
    line-height: 30px;
    margin-left: 5px;
    margin-right: 5px;
    display: block;
}
.team.one .social {
    align-items: end;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    height: 100%;
    position: absolute;
    top: 0;
    right: 5%;
    width: 100%;
    transition: all .5s ease;
    text-align: center;
    z-index: -1;  
}
.team:hover .social {
    right: 10%;
    z-index: 1;
}

/* -----------------team-section-2---------- */
.team.two{
    position: relative;
    display: block;
    text-align: center;
    margin-bottom: 30px;
}
.team.two::before{
    content: '';
    display: block;
    background-color: vaR(--primary-color);
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 92%;
    height: 0.5rem;
    transform: translateX(-50%);
    transition: 0.5s;
}
.team.two:hover:before{
    width: 100%;
}

.team.two .inner {
    padding: 10px;
}
.team.two .top_img{
    position: relative;
    display: block;
    overflow: hidden;
}
.team.two .top_img::before{
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    /* background-color: rgba(23, 23, 23, .40); */
    transition-delay: .1s;
    transition-timing-function: ease-in-out;
    transition-duration: .5s;
    transition-property: all;
    transform-origin: bottom;
    transform-style: preserve-3d;
    transform: scaleY(0);
    z-index: 1;

}
.team.two .top_img:hover::before{
    transform: scaleY(1.0);
}
.team.two .social{
    position: absolute;
    display: flex;
    -webkit-box-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    bottom: 30px;
    left: 50%;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: .5s;
    transform: perspective(400px) rotateX(90deg) translateX(-50%);
    transform-origin: bottom;
    z-index: 2;

}
.team.two:hover .social{
    opacity: 1.0;
    transform: perspective(400px) rotateX(0deg) translateX(-50%);
}
.team.two .social a{
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    color: #aeaeae;
    background-color: #000000;
    border-radius: 50%;
    font-size: 13px;
    margin-left: 10px ;
    height: 45px;
    width: 45px;
    transform: rotate(0);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    z-index: 1;
    text-decoration: none;
}
.team.two .social a:hover{
    color: #fff;
    transform: rotate(360deg);
    background-color: var(--primary-color);
}
.team.two .social a::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    display: block;
    background-color:var(--primary-color);
    border-radius: 50%;
    transform: scale(0.0);
    transform-origin: center;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52);
    z-index: -1;
}

.team.two .social a:hover::before{
    transform: scaleX(1.0);
}

.team.two .bottom_content{
    position: relative;
    display: block;
    padding-top: 22px;
    padding-bottom: 18px;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.team.two .bottom_content h2 a{
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    color:#171717;
    text-decoration: none;
    
}


/* ---- portfolio ----*/

.portfolio_crowsel .owl-item {
    margin-top: 30px;
    margin-bottom: 30px;
}

.portfolio {
    padding: 0px;
    margin-bottom: 30px;
    transition: all 0.8s ease;
    border-radius: 5px;
}

.portfolio .inner {
    opacity: 1;
    padding: 15px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: 390px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    border-radius: 5px;
}
.portfolio .inner::before{
    content: '';
    display: block;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--primary-color) 100%);
    position: absolute;
    bottom: -30%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: all 0.5s ease;

}
.portfolio .inner:hover::before{
    bottom: 0%;
    opacity: 1;
}


.portfolio h2 {
    font-size: 22px;
    font-weight: 600;
}

.portfolio .icon {
    padding: 50px 0;
  
    opacity: 0;
    transition: 0.8s;
}
.portfolio:hover  .icon{
  
    opacity: 1;
}

.portfolio .icon a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
}

.portfolio .icon a i {
    font-size: 15px;
}

.portfolio .bottom_text p {
    margin: 0;
}

/* ---- portfolio -two---*/
div.portfolio.two {
        background-size: 120% 120%;
        transition: 0.8s
     }
div.portfolio.two:hover{
    background-size: 130% 130%;

}

.portfolio.two .inner {
    opacity: 0;
    padding: 90px 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: 390px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    border-radius: 5px;
    transition: all 0.8s ;
}
.portfolio.two .inner:hover {
    background: rgba(0,0,0,0);
    opacity: 1;
}

.portfolio.two .inner::before {
    content: '';
    display: block;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--primary-color) 100%);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    height: 90%;
    z-index: -1;
    opacity: 0;
    border: 5px solid #062383;
    transition: all 0.5s ease;
    /* margin: 10px; */
}
.portfolio.two .inner:hover::before { 
    opacity: 1;
}

/* ---- funfacts ----*/

.funfact {
    padding: 30px;
    position: relative;
    background-color: #00000038;
    backdrop-filter: blur(15px);
}
.funfact::before{
    content: "";
    display: block;
    background-color: var(--primary-color);
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 20%;
    transition: 0.5s;
}
.funfact:hover::before{
    height: 100%;
}
.funfact::after{
    content: "";
    display: block;
    background-color: var(--primary-color);
    position: absolute;
    bottom: 0;
    right: 0;
    width: 3px;
    height: 20%;
    transition: 0.5s;
}
.funfact:hover::after{
    height: 100%;
}

.funfact .title {
    font-size: 20px;
    font-weight: 700;
}

.funfact .counter {
    font-size: 40px;
    font-weight: 800;
}

.funfact .top_icon i {
    font-size: 45px;
    width: 80px;
    height: 80px;
    background-color: var(--primary-color);
    border-radius: 50%;
    line-height: 80px;
}
.funfact:hover .top_icon i{
animation: icon-bounce 0.8s  cubic-bezier(.24,.74,.58,1) both  1;
}
@keyframes icon-bounce{
	 100%,0%{
	 transform: translateY(0);
	}
	50%{
		transform: translateY(-10px);
  
	}
	80%{
		transform: translateY(10px);
  
	}
	
  }

.funfact.two{
    background-color: transparent;
    backdrop-filter: blur(1px);
    border: 1px solid #ffffff5c;
}

.funfact.two .top_icon i {
    font-size: 45px;
    width: 80px;
    height: 80px;
    background-color: var(--primary-color);
    border-radius: 0%;
    line-height: 80px;
}

.funfact.two::before {
    content: "";
    display: none;
    background-color: var(--primary-color);
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 20%;
    transition: 0.5s;
}
.funfact.two::after{
    content: "";
    display: none;
    background-color: var(--primary-color);
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 20%;
    transition: 0.5s;
}
/* ---- testimonials ----*/

.section.testimonials {
    background-color: #f4f9fc;
}

.testimonial_crowsel .testimonial {
    /* margin-top: 50px; */
    margin-bottom: 0px;
    box-shadow: 0px 2px 20px 0px rgb(127 192 211 / 28%);
}

.testimonial {
    box-shadow: 0px 2px 60px 0px rgba(0, 0, 0, .1);
    padding: 30px;
    margin-bottom: 30px;
    background-color: #fff;
    position: relative;
}
.testimonial::before{
    content: "";
    display: block;
    background-color: var(--primary-color);
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 20%;
    transition: 0.5s;
}
.testimonial:hover::before,.testimonial:hover::after{
    height: 100%;
}

.testimonial::after{
    content: "";
    display: block;
    background-color: var(--primary-color);
    position: absolute;
    bottom: 0;
    right: 0;
    width: 3px;
    height: 20%;
    transition: 0.5s;
}

.testimonial .bottom_text.mb-4 {
    margin-top: -40px;
}

.testimonial h4 {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 600;
}

.testimonial h6 {
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    margin: 0;
}

.testimonial .img-author {
    width: 100px !important;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
}

.testimonial .media{
    transform: translateY(-50px);
    align-items: flex-end;

}
.testimonial .media i.fa.fa-quote-right{
    font-size: 3rem;
    opacity: 0.2;
}
.testimonial .bottom_text{
    margin-top: -40px;
}
.testimonial .bottom_text p{
    margin: 0;
}

.section .owl-carousel:hover .owl-nav .owl-prev {
    right: 102px;
    top: 0%;
}
.section .owl-nav .owl-prev, .section .owl-nav .owl-next {
    position: absolute;
    top: 0;
    z-index: 5;
    margin: -30px 0 0;
    transition: all 0.3s ease 0s;
}

.section .owl-nav .owl-prev {
    right: 8px;
}


/* ------------pricing-section----------- */

.plan {
    box-shadow: 0px 2px 60px 0px rgba(0, 0, 0, .1);
    margin-bottom: 30px;
    position: relative;
}

.plan::before{
    content: '';
    display: block;
    background-color: vaR(--primary-color);
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 90%;
    height: 0.5rem;
    transform: translateX(-50%);
    transition: 0.5s;
}
.plan:hover::before{
    width: 100%;
}

.plan h2 {
    padding: 20px 30px;
    margin: 0;
}

.plan .amount {
    font-size: 40px;
    font-weight: 700;
}

.plan .price {
    padding: 0 30px;
    margin: 0;
   
}

.plan-features {
    padding: 30px;
}
.plan span.currency {
    font-size: 45px;
}

.plan span.period {
    display: block;
}
.plan-features li {
    padding: 5px 0;
    font-weight: 600;

}

.plan-footer {
    margin-bottom: 20px;
    
}
.plan.two{
    position: relative;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.plan.two::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 1;
    transition: 0.8s;
    background-color: #fff;

} 
.plan.two.active::after{
    opacity: .8;
    background-color: var(--primary-color);
}
.plan.two:hover::after{
    opacity: .8;
    background-color: var(--primary-color);
}
.plan.two:hover h2, .plan.two.active h2 {
    color: #fff;
}
.plan.two:hover span , .plan.two.active span{
    color: #fff;
}
.plan.two:hover ul li, .plan.two.active ul li{
    color: #fff;

}





/* ---- callout ----*/

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

.callout h2 {
    font-size: 54px;
    font-weight: 800;
}
.callout.bg-dark:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.callout.bg-dark:after {
    opacity: .1;
   
}


/* ---- calltoaction ----*/

.calltoaction h2 {
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
}

.calltoaction .btn {
    float: right;
}


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

.breadcrumb {
    padding: unset;
    margin: unset;
    background-color: transparent;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.breadcrumb .inner {
    height: 100%;
    padding: 250px 0 120px 0;
    position: relative;
    width: 100%;
}
.breadcrumb .inner h1{
    transform: translate(calc(var(--x)/25), calc(var(--y)/25));
}

.breadcrumb .inner ul{
    transform: translate(calc(var(--x)/25), calc(var(--y)/25));
}

.breadcrumb  .dot-1 {
    position: absolute;
    left: 20%;
  
}

.breadcrumb  .dot-1 img{
    width: 10px;
    height: 10px;
    animation-name: UpAndDown;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
@keyframes UpAndDown{
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-20px);
    }

    100%{
        transform: translateY(50px);
    }

}

.breadcrumb  .dot-2 {
    position: absolute;
    top: 56%;
    left: 60%;
}
.breadcrumb  .dot-2 img{
    width: 20px;
    height: 20px;
     animation-name: twistroll;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

@keyframes twistroll{

        0%{
            transform: skewX(50deg) translate(-50px,25px);
        }
        100%{
            transform: skewX(0deg)
        }
}

.breadcrumb  .dot-3 {
    position: absolute;
    left: 15%;
    top: 35%;
}
.breadcrumb  .dot-3 img{
   width: 10px;
    height: 10px;
    animation-name: zoomInOut;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
@keyframes zoomInOut{
    0%{
        transform: scale(0.2);
    }

    100%{
        transform: scale(1);
    } 
}
.breadcrumb .dot-4 {
    position: absolute;
    left: 6%;
    top: 55%;
}
.breadcrumb  .dot-4 img{
     width: 20px;
    height: 20px;
     animation-name: twistrun;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

@keyframes twistrun{

        0%{
            transform:  translate(-50px,25px);
        }
        50%{
              transform:  translate(50px,35px);
        }

        100%{
            transform:  translate(180px,50px);
        }
}



.breadcrumb  .dot-5 {
    position: absolute;
    top: 50%;
    left: 60%;
}

.breadcrumb  .dot-5 img{
     width: 10px;
    height: 10px;
    animation-name: zoomInOut;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;

}



/* ---- ==== img-effect ==== ----*/

.img_eff {
    overflow: hidden;
}

.img_eff img {
    transition: transform .8s;
}

.img_eff img:hover {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1.5);
}


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

.blog_post {
    box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1);
    padding: 0px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}
.blog_post::before{
    content: '';
    display: block;
    background-color: vaR(--primary-color);
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 90%;
    height: 0.5rem;
    transform: translateX(-50%);
    transition: 0.5s;
}
.blog_post:hover::before{
    width: 100%;
}

.post-thumbnail img,
.post_img img {
    width: 100%;
    height: auto;
    min-height: 50px;
}

.post_img {
    position: relative;
}

.post_img span.date {
    top: 20px;
    position: absolute;
    left: 0px;
    width: auto;
    padding: 6px 10px;
}

.post_content {
    padding: 20px 20px;
}

.post_content h4,
.post_content h1 {
    font-size: 24px;
    font-weight: 600;
}

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

.post_meta {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    
    text-transform: capitalize;
    padding-bottom: 5px;

}
.post_meta.df{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    transform: translateY(-50px);
    margin-bottom: -30px;
}
.post_meta a {
    display: inline-flex;
}
.post_meta .author{
    display: flex;
    flex-direction: column;
    opacity: 1;
    
}
.post_meta .author img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}
.post_meta>span {
    margin-right: 10px;
    opacity: 0.8;
}

.post_meta span:before {
    font-family: FontAwesome;
    position: relative;
    display: inline-flex;
    padding-right: 8px;
    padding-left: 1px;
    text-decoration: inherit;
    vertical-align: baseline;
}

.post_meta .date:before {
    content: "\f017";
}

.sidebar .widget input.form-control {
    height: auto;
}

.categories:before {
    content: "\f115";
}

.categories a {
    margin-right: 6px;
}

.comment-area,
.comments-area {
    padding: 20px;
    border: 1px solid #eee;
}

span.comment-links {
    margin-left: auto;
}

ul.pagination li.page-item{
    margin: 0 5px;
   transition: all 0.5s;
   position: relative;
   border-radius: 5px;
}


ul.pagination a.page-link { 
    line-height: 1;
    color: var(--primary-color);
    background: transparent;
    border-radius: 5px;
}
ul.pagination a.page-link:hover{
    color: #fff;
    border-color:var(--primary-color) ;
    box-shadow: 0 6px 13px rgb(0 0 0 / 15%);
    background-color:var(--primary-color) ;
}

/* ---- ==== Sidebar ==== ----*/

.sidebar .widget {
    padding: 20px;
    border: 1px solid #f1f1f1;
    margin-bottom: 30px;
    position: relative;
}

.sidebar .widget h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    /* border-bottom: 1px solid #e6e6e6;*/
    position: relative;
    display: inline-block;
}

.sidebar .widget h2::before{
    height: 3px;
    content: "";
    position: absolute;
    width: 20%;
    background: var(--primary-color);
    bottom: 0;
    left: 0;
    transition: all 0.8s;
    z-index: 1;
}
.sidebar .widget:hover h2::before{
    width: 100%;
}
.sidebar .widget h2::after{
    height: 1px;
    content: "";
    position: absolute;
    width: 326px;
    background: #e6e6e6;
    bottom: 0;
    left: 0%;
    transition: all 0.8s;
    z-index: 0;
}



/* ---- ==== widgets ==== ----*/

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

.widget ul li {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.widget ul li:last-child {
    border-bottom: unset;
    padding-bottom: 0;
}

.widget .tagcloud a {
    display: inline-block;
    line-height: 20px;
    margin: 0 5px 9px 0;
    padding: 6px 12px;
    border-radius: 5px;
}

.widget .input-group-btn .btn {
    border-radius: 0 4px 4px 0;
}

.widget .calendar_wrap table tbody td {
    line-height: 2.5em;
    transition: background 0.15s ease 0s;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    padding: 0 8px;
}

.widget .textwidget img {
    width: 100%;
    height: auto;
}

.widget ul li .media-body h5 {
    font-size: 18px;
}

.widget ul li.media img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
}

.widget .social a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
}


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

footer {
    /*background-image: url('assets/images/bg-footer.jpg');*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer .inner .top {
    padding-top: 40px;
    padding-bottom: 40px;
}

footer .widget {
    margin-bottom: 20px;
}

footer .widget h4 {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 20px;
}

footer .widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .widget ul li {
    margin: 0;
    padding: 6px 0;
    border-bottom: unset;
}

footer .inner .bottom {
    padding-top: 20px;
    padding-bottom: 20px;

}

footer .inner .bottom .social  {
    display: flex;
    justify-content: flex-end;
    
}

/* -------scrollup------- */
.scrollup {
    display: inline;
    position: fixed;
    bottom: 28px;
    right: 30px;
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    color: #ffffff;
    background-color: var(--primary-color);
    border: none;
    outline: none;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 20%);
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    z-index: 99;
}
.scrollup:hover {
    color: #ffffff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.scrollup i {
    display: inline-block; 
    transition: all .5s;
}

.scrollup:hover i {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
   
}

/* ---- ==== Media ==== ----*/

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

@media (max-width: 991.98px) {
    .owl-carousel:hover .owl-nav .owl-prev {
        right: 1%;
        top: 80%;
    }
    .owl-carousel:hover .owl-nav .owl-next {
        right: 1%;
    }
   
    .topbar {
        padding: 10px 0;
    }

    .navbar {     
            height: 65px;
            width: 100%; 
            padding: 0;     
      
    }
    
    .sliderhome .slide {
        height: 550px;
       
    }

    .sliderhome .owl-slide-title {
        font-size: 45px;
        line-height: 1.25;
    }
    .navbar-nav li.nav-item {
        padding: 10px 10px;
       
    }
    .funfact {
       
        margin-bottom: 10px;
    }
    header.hds-2 .navbar-nav li.nav-item {
        padding: 10px 10px;
        background-color: transparent;
    }

    header.hds-4 .topbar {
        padding: 20px 0;
    }
   
}




@media (max-width: 767.98px) {

    .owl-carousel:hover .owl-nav .owl-prev {
        right: 35px;
        top: 65%;
    }

    .owl-carousel:hover .owl-nav .owl-next {
        right: 35px;
        top: 77%;
    }

    .topbar {
        padding: 16px 0;
        display: none;
    }   

    .topbar ul.left,
    .topbar ul.right {
        justify-content: center;
    }
    .topbar .quote_btn {
        margin: unset;
        padding: 0 4px;
    }
    .site-branding-text {
        width: 78%;
    }
    .calltoaction {
        text-align: center;
    }
    .calltoaction .btn {
        float: unset;
    }
    .callout h2 {
        font-size: 26px;
    }
    .callout h3.sub-title {
        font-size: 20px;
    }
    .sliderhome .owl-slide-title {
        font-size: 32px !important;
        line-height: 1.25;
    }
    .sliderhome .owl-slide-animated {
        transform: translateX(0);
        transition: all 0.05s;
    }
    .sliderhome .btn {
        padding: 0 10px !important;
    }
    .right-aria {
        display: none;
        align-items: center;
    }
   
}

/* ---- ==== WordPress Core ==== ----*/

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

img.size-large {
    width: 100%;
    height: auto;
}

select {
    width: 100%;
}


/******* Caption Classes *******/

.bypostauthor {}

.gallery:after {
    content: "";
    display: table;
    clear: both;
}

.gallery-caption {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: 0.5rem;
}

img.aligncenter,
div.aligncenter,
figure.aligncenter,
img.wp-post-image {
    display: block;
    margin: 1em auto;
}

img.alignright,
div.alignright,
figure.alignright {
    float: right;
    margin: 1em 0 1em 2em;
}

img.alignleft,
div.alignleft,
figure.alignleft,
img.wp-post-image.attachment-thumb {
    float: left;
    margin: 1em 1em 2em 0;
}

figure {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
}

p img.alignright,
p img.alignleft {
    margin-top: 0;
}

.gallery figure img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.gallery figure {
    float: left;
    margin: 0 2% 1em 0;
}

.gallery.gallery-columns-1 figure {
    width: 100%;
    margin: 0 0 1em 0;
    float: none;
}

.gallery.gallery-columns-3 figure {
    width: 32%;
}

.gallery.gallery-columns-3 figure:nth-of-type(3n+3) {
    margin-right: 0;
}

.gallery.gallery-columns-3 figure:nth-of-type(3n+4) {
    clear: left;
}

.gallery.gallery-columns-2 figure {
    width: 49%;
}

.gallery.gallery-columns-2 figure:nth-of-type(even) {
    margin-right: 0;
}

.gallery.gallery-columns-2 figure:nth-of-type(odd) {
    clear: left;
}

.gallery.gallery-columns-4 figure {
    width: 23.25%;
}

.gallery.gallery-columns-4 figure:nth-of-type(4n+4) {
    margin-right: 0;
}

.gallery.gallery-columns-4 figure:nth-of-type(4n+5) {
    clear: left;
}

.gallery.gallery-columns-5 figure {
    width: 18%;
}

.gallery.gallery-columns-5 figure:nth-of-type(5n+5) {
    margin-right: 0;
}

.gallery.gallery-columns-5 figure:nth-of-type(5n+6) {
    clear: left;
}

.gallery.gallery-columns-6 figure {
    width: 14.2%;
}

.gallery.gallery-columns-6 figure:nth-of-type(6n+6) {
    margin-right: 0;
}

.gallery.gallery-columns-6 figure:nth-of-type(6n+7) {
    clear: left;
}

.gallery.gallery-columns-7 figure {
    width: 12%;
}

.gallery.gallery-columns-7 figure:nth-of-type(7n+7) {
    margin-right: 0;
}

.gallery.gallery-columns-7 figure:nth-of-type(7n+8) {
    clear: left;
}

.gallery.gallery-columns-8 figure {
    width: 10.2%;
}

.gallery.gallery-columns-8 figure:nth-of-type(8n+8) {
    margin-right: 0;
}

.gallery.gallery-columns-8 figure:nth-of-type(8n+9) {
    clear: left;
}

.gallery.gallery-columns-9 figure {
    width: 8.85%;
}

.gallery.gallery-columns-9 figure:nth-of-type(9n+9) {
    margin-right: 0;
}

.gallery.gallery-columns-9 figure:nth-of-type(9n+10) {
    clear: left;
}

@media (max-width:767px) {
    img.alignright,
    div.alignright,
    figure.alignright,
    img.alignleft,
    div.alignleft,
    figure.alignleft,
    img.wp-post-image.attachment-thumb {
        display: block;
        margin: 1em auto;
        float: none;
    }
    .gallery.gallery-columns-4 figure,
    .gallery.gallery-columns-5 figure,
    .gallery.gallery-columns-6 figure,
    .gallery.gallery-columns-7 figure,
    .gallery.gallery-columns-8 figure,
    .gallery.gallery-columns-9 figure {
        width: 100%;
        margin: 0 0 1em 0;
        float: none;
    }

    .sliderhome .owl-slide-text {
        overflow: hidden;
        margin-top: 0%;
        padding-left: 10px;

    }
    .service .top_icon {
        border-radius: 50%;
        width: 60px;
        height: 60px;
    }
    footer .inner .bottom {
        text-align: center;
    }
    
    footer .inner .bottom .social {
        display: flex;
        justify-content: center;
    }
    header.hds-2 .nav-wapper {
        background: transparent;
        transform: translateY(0px);
    }
    header.hds-2 .main-nav {
        background: transparent; 
        padding: 0px 15px;
        justify-content: space-between;
    }
    header.hds-2 .main-nav a.nav-brand {
        display: unset;
     
    }
    header.hds-3 .nav-wapper a.nav-brand {
        display: unset;
    }
    header.hds-4 .main-nav {
        justify-content: space-between;
    }
    
   
   
}
@media (max-width: 576px) {
    .service .top_icon {
        border-radius: 50%;
        width: 80px;
        height: 80px;
    }

}

/* Text meant only for screen readers. */


/*todo*/

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}


/* ---- ==== woocomerce ==== ----*/

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.woocommerce form .form-row .woocommerce-input-wrapper {
    width: 100%;
}


/* ---- ==== navigation ==== ----*/

.navigation.pagination .nav-links .page-numbers,
.navigation.pagination .nav-links a {
    vertical-align: baseline;
    white-space: nowrap;
    width: 40px;
    height: 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease 0s;
    font-size: 18px;
    line-height: 40px;
    margin: 0 6px 10px;
    text-decoration: none;
    position: relative;
    border-radius: 4px;
    padding: 0px;
    float: left;
    cursor: pointer;
    display: inline-block;
}

.navigation.pagination>li:first-child>a,
.navigation.pagination>li:first-child>span {
    border-radius: 30px;
}

.post-navigation .nav-previous {
    float: right;
}

.post-navigation {
    overflow: visible;
    padding: 10px 0;
}

.navigation.pagination .nav-links .page-numbers,
.navigation.pagination .nav-links a {
    text-align: center;
    margin-top: 30px;
}


/*BLOG*/

.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.nav-previous,
.nav-next {
    width: 50%;
    padding: 25px 0;
    font-size: 16px;
    font-weight: 600;
}

.nav-next {
    text-align: right;
}


/*For Section BLog*/

.section.blogs img.wp-post-image {
    margin: 0px;
}

body.page-template.page-template-homepage-template {
    background-image: none;
}


/*woocommerce*/

.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2,
.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
    max-width: 48%;
}

#customer_details input,
#customer_details label,
#customer_details .woocommerce-input-wrapper {
    width: 100%;
}

/* Comments */
.comment .comment-body {
    margin-top: 25px;
    padding-top: 25px;
    word-wrap: break-word;
    border-top: 1px solid #eee;
}

.comment-meta .comment-metadata {
    margin-top: 2px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    color: #989ea6;
}
.comment-content p{
    padding: 13px 0 0 61px;
}
.comment-meta .comment-author img {
    float: left;
    display: block;
    width: 46px;
    height: 46px !important;
    margin: 0 15px 0 0;
    padding: 0;
    border-radius: 23px;
}
.comment-body .reply {
    float:right;
}
.comment article {
    padding-bottom:2.79rem;
}
.comment-list {
    list-style: none outside none;
    padding: 0 0 15px;
    margin: 0;
    
}
.comment-list .children {
    list-style: none outside none;
    padding: 0 0 0 30px;
    margin: 0;
}
.comment-meta .comment-metadata a, .comment-author.vcard .fn .url, .comment-body .reply a, .comment-respond .logged-in-as a{
    color: #062383;
}