body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Fira Sans';
}
::selection {
background-color: var(--primary-color);
color: var(--white-fix);
}
a {
color: var(--primary-color);
text-decoration: underline;
}
a:hover,
a:focus-within,
a:focus {
color: var(--primary-color);
text-decoration: dotted underline;
}
a:focus,button:focus-visible,.btn:focus,button:focus-within,.btn-close:focus {
outline: 1px dotted;
text-decoration: none;
outline-offset: -3px;
}
.widget.widget-contact:focus{
outline: 1px dotted var(--primary-color);;
text-decoration: none;
outline-offset: -3px;
}
.screen-reader-text {
display: initial !important;
} a.main-btn,
.main-btn {
text-decoration: none;
display: inline-block;
padding: 10px 15px;
border: 1px solid var(--primary-color);
border-radius: 5px;
font-weight: 600;
position: relative;
overflow: hidden;
transition: 0.65s;
} @media(min-width: 1200px) {
body.boxed {
width: 1170px;
-webkit-box-shadow: 0 0 10px 0 rgba(48, 48, 48, 0.5);
box-shadow: 0 0 10px 0 rgba(48, 48, 48, 0.5);
margin: 0 auto;
position: relative;
background: url(//itwebsolution.net/wp-content/themes/assets/images/bg-pattern/pattern-1.png) repeat fixed;
}
}
body.boxed {
-webkit-box-shadow: 0 0 10px 0 rgba(48, 48, 48, 0.5);
box-shadow: 0 0 10px 0 rgba(48, 48, 48, 0.5);
margin: 0 auto;
position: relative;
}
@media (min-width: 576px){
body.boxed{
width: 540px;
}  
}
@media (min-width: 768px){
body.boxed{
width: 720px;
}
}
@media (min-width: 992px){
body.boxed {
width: 960px;
}
}
@media (min-width: 1200px){
body.boxed{
width: 1140px;
}
}
@media (min-width: 1400px){
body.boxed {
width: 1320px;
}
}
a.main-btn::before,
.main-btn::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
width: 80%;
height: 100%;
border-bottom: 1px solid white;
margin: 0 auto;
transform: translate(-50%, 0) translateX(-100%);
opacity: 0;
transition: 0.65s;
}
a.main-btn:hover::before,
.main-btn:hover::before {
transform: translate(-50%, 0) translateX(0%);
opacity: 1;
}
.main-btn.bg {
margin-right: 10px;
background-color: var(--primary-color);
color: var(--white-fix);
}
a.main-btn:hover,
.main-btn:hover {
background-color: var(--primary-color);
color: var(--white-fix)
} .main-header.transparent {
position: absolute;
width: 100%;
z-index: 9999;
}
.main-header .navbar-brand,.main-header a.site-title {
display: block;
position: relative;
flex: 1;
height: auto;
}
a:has(.site-title) {
display: inline-block;
}
.navbar-brand .site-title, .navbar-brand .site-description  {
margin: 0.4em 0;
}
.navbar-brand .custom-logo-link  {
padding-top: 9px;
margin-bottom: 9px;
display: block;
}
.navbar-brand .site-title, .navbar-brand .site-description {
color: var(--primary-color);
}
.main-header .topbar-inner .row > .col-lg-3:nth-child(1){
position: relative;
z-index: 1;
}
.header-two a.navbar-brand::before,.header-two .header-top-right::before{
display: none;
}
.main-header .navbar-brand .site-description{ }
.header-widget .widget-contact .contact-area {
display: flex;
align-items: center;
}
.header-widget .widget-contact .contact-area:not(:last-child) {
margin-right: 30px;
}
.header-widget .widget-contact .contact-icon {
margin-right: 15px;
color: var(--primary-color);
font-size: 26px;
}
.header-widget .widget-contact .contact-info .text {
display: flex;
flex-direction: column;
margin: 0;
color: var(--white-fix);
}
.header-two .header-widget .widget-contact .contact-info .text{
color: var(--dark);
}
.header-widget .widget-contact .contact-info .text a {
text-decoration: none;
color: var(--white-fix);
font-size: 16px;
}
.header-two .header-widget .widget-contact .contact-info .text a{
color: var(--dark);
font-weight: 600;
transition: 0.5s;
}
.header-widget {
height: 100%;
display: block;
width: 100%;
}
.header-top-right {
width: 100%;
height: 100%;
position: relative;
padding: 20px 0 20px;
display: flex;
align-items: center;
justify-content: end;
z-index: 1;
}
.header-top-right .main-btn {
margin-right: 15px;
background-color: var(--primary-color);
color: var(--white-fix);
}
.topbar p.site-description{ }
.topbar-inner {
border: 1px solid rgba(255 255 255 / 10%);
padding: 0 10px;
border-top: transparent;
position: relative;
}
.topbar-inner::before, .topbar-inner::after {
content: '';
position: absolute;
border-left: 1px solid rgba(255 255 255 / 10%);
top: 0;
height: 100%;
}
.topbar-inner::after {
left:calc( 25% - 18px);
}
.topbar-inner::before {
right:calc( 16.6667% - 18px);
}
.topbar .navbar-brand img {
width: 100%;
max-width: 212px;
}
.header-two .topbar-inner {
border: 1px solid rgba(120 120 120 / 20%);
}
.header-top-right .dropdown-menu {
border-radius: 0;
padding: 0;
background-color: var(--white-fix);
border: none;
}
.header-top-right .dropdown-menu li button.dropdown-item{
color: var(--dark-fix);
font-weight: 500;
padding: 8px 10px;
}
.header-top-right .dropdown-menu li:not(:last-child){
border-bottom: 1px solid #d9d9d9;
}
.header-top-right .dropdown-menu li button.dropdown-item:hover,
.header-top-right .dropdown-menu li button.dropdown-item:focus-within,
.header-top-right .dropdown-menu li button.dropdown-item.active{
color: var(--primary-color); 
background: transparent;
}
.main-header.is-sticky-menu {
position: fixed;
top: -1px;
left: 0;
right: 0;
width: 100%;
z-index: 999;
-webkit-box-shadow: 0 10px 15px rgb(0 0 0 / 5%);
-ms-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
-o-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 15px rgb(0 0 0 / 5%);
-webkit-animation: 1s ease-in-out 0s normal none 1 running fadeInDown;
animation: 1s ease-in-out 0s normal none 1 running fadeInDown;
background-color: var(--dark-fix);
}
.author-content{
text-align: left;
}
.heading-title p{
line-height: 1.5;
}
.author-content .widget_media_gallery .gallery .gallery-item{
width: 28%;
float: left;
margin: 0 8px 16px;
}
.author-content .widget_media_gallery .gallery .gallery-item img{
width: 100%;
display: block;
object-fit: cover;
max-width: 100%;
height: auto;
}
.author-content>aside,.author-content>div {
clear: both;
}
.author-sidebar .offcanvas-header {
background-color: var(--dark-fix);
flex-wrap: wrap;
}
.author-sidebar .offcanvas-header .custom-logo-link {
flex: 1;
height: auto;
justify-content: start;
}
.author-sidebar .custom-logo-link + a {
display: none;
}
.author-sidebar .site-description {
order: 1;
color: var(--white);
width: 100%;
}
.author-content .widget-social-widget ul {
padding: 0;
margin: 0;
list-style: none;
}
.menu-right .author-sidebar .author-content .widget-social-widget ul li {
display: inline-block;
margin-right: 5px;
border: none;
}
.author-content .widget-social-widget ul li a {
width: 40px;
height: 40px;
border-radius: 100%;
line-height: 40px;
text-align: center;
display: inline-block;
background-color: var(--primary-color);
color: var(--white-fix);
}
.author-content .widget-contact .contact-area{
display: flex;
align-items: center;
margin-bottom: 20px;
}
.author-content .widget-contact .contact-area .contact-icon{
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 100%;
background-color: var(--primary-color);
color: var(--white-fix);
margin-right: 15px;
}
.author-content .widget-contact .contact-area .contact-info p {
line-height: 1.5;
margin: 0;
}
.author-content .widget-contact .contact-area .contact-info p span{
color: var(--dark);
font-weight: 500;
}
.author-content .widget-contact .contact-area .contact-info p a{
color: var(--primary-color);
text-decoration: none;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
}
.author-sidebar .offcanvas-header{
background: var(--primary-color);
text-align: left;
}
.navbar .offcanvas-header button.btn-close {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
opacity: 1;
}
.author-sidebar .offcanvas-header .btn-close{
opacity: 1;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
color: var(--white-fix);
}
.header-widget .contact-area:hover .contact-icon i,
.header-widget .contact-area:focus-within .contact-icon i{
animation: headShake 2s;
}
.header-widget .contact-area .contact-info a:hover,
.header-widget .contact-area .contact-info a:focus-within{
color: var(--primary-color);
}
.header-widget aside.widget.widget-contact {
display: inline-block;
}  .nav-area .nav-info-text{
height: 100%;
}
.nav-area .nav-text {
display: flex;
align-items: center;
height: 100%;
position: relative;
z-index: 1;
}
.nav-area .nav-text::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-right: 1px solid rgba(255 255 255 / 10%);
top: 0;
left: 0;
z-index: -1;
}
.nav-text-icon {
color: var(--primary-color);
margin-right: 10px;
}
.nav-area .nav-text p,
.nav-area .nav-text p a {
color: var(--white-fix);
margin: 0;
transition: 0.65s;
}
.nav-area .nav-text p a:hover,
.nav-area .nav-text p a:focus-within {
color: var(--primary-color);
}
.nav-area .nav-text p:hover {
text-decoration: dotted underline;
}
.nav-area-inner {
padding: 0 10px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: rgba(255 255 255 / 10%);
}
.header-two .nav-area-inner {
border: 1px solid rgba(120 120 120 / 20%);
border-top-color: transparent;
}
.nav-area .navbar {
padding: 0;
}
.nav-area .navbar-nav .nav-item .nav-link {
text-decoration: none;
color: var(--white-fix);
padding: 0;
line-height: 4;
margin-right: 27px;
font-weight: 500;
}
.nav-area .navbar-nav .nav-item .nav-link[title="Add a menu"] {
text-decoration: underline;
}
.nav-area .navbar-nav .nav-item .nav-link[title="Add a menu"]:hover, .nav-area .navbar-nav .nav-item .nav-link[title="Add a menu"]:focus {
text-decoration: underline dotted;
}
.navbar-expand-lg .navbar-nav{
flex-wrap: wrap;
}
.nav-area .navbar-nav .nav-item .nav-link.active {
color: var(--primary-color);
}
.menu-right > ul {
padding: 0;
margin: 0;
list-style: none;
height: 100%;
display: flex;
align-items: center;
justify-content: end;
}
.header-two .menu-right> ul,.header-two .menu-right> ul li .widget_social_widget ul{
justify-content: end;
padding: 0;
margin: 0;
list-style: none;
height: 100%;
display: flex;
}
.header-two .menu-right ul li .widget_social_widget{
height: 100%;
}
.navbar-nav .dropdown-menu {
padding: 0;
margin: 0;
border-radius: 0;
background-color: var(--white-fix);
}
.navbar-nav .dropdown-menu li:not(:last-child) {
border-bottom: 1px solid #e7e7e7;
}
.navbar-nav .dropdown-menu li .dropdown-item {
padding: 10px;
text-decoration: none;
font-weight: 500;
color: var(--dark-fix);
transition: 0.65s;
}
.navbar-nav .dropdown-menu li.dropdown .dropdown-item{
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
}
.navbar-nav .dropdown-menu li .dropdown-item:hover,
.navbar-nav .dropdown-menu li .dropdown-item:focus-within,
.navbar-nav .dropdown-menu li .dropdown-item.active {
color: var(--white-fix);
background-color: var(--primary-color);
}
.dropdown-menu > li{
position: relative;
}
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu,
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu{
left: 100%;
top: 0;
}
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu,
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu,
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu{
top: 100%;
left: 0%;
}
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu,
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu{
left: -100%;
top: 0%;
}
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu{
top: 0%;
left: -100%;
}
.nav-area .menu-right {
width: 100%;
height: 100%;
position: relative; }
.nav-area .menu-right::before {
width: 100%;
height: 100%;
position: absolute;
content: '';
top: 0;
left: 0;
border-left: 1px solid rgba(255 255 255 / 10%);
z-index: -1;
}
.header-two .nav-area .menu-right::before{
display: none;
}
.menu-right>ul>li {
display: inline-block;
flex: 1;
text-align: center;
height: 100%;
}
.header-two .menu-right ul li{
width: unset;
}
.header-two .menu-right>ul>li>a,
.header-two .widget_social_widget ul li a{
width: 50px;
}
.header-two .nav-area:not(.is-sticky-menu) .menu-right ul> li> a{
color:var(--dark)
}
.menu-right ul li:not(:last-child) {
border-right: 1px solid rgba(255 255 255 / 10%);
}
.header-two .menu-right ul li:not(:last-child) {
border-right: 1px solid rgba(120 120 120 / 20%);
}
.menu-right ul li a {
height: 100%;
color: var(--white-fix);
font-size: 16px;
transition: 0.65s;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.menu-right .cart_dropdown .shopping-cart a.main-btn {
line-height: 2.5;
background-color: var(--dark);
border: none;
color: var(--white);
text-align: center;
}
.menu-right .cart_dropdown .shopping-cart a.main-btn:hover,
.menu-right .cart_dropdown .shopping-cart a.main-btn:focus{
background-color: var(--primary-color);
color: var(--white-fix);
}
.shopping-cart a.main-btn i{
margin-left: 10px;
}
.cart_dropdown .dropdown-menu{
padding: 0;
border-radius: 0;
width: 320px;
padding: 20px;
background-color: var(--white);
border: none;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.cart_dropdown .dropdown-menu.show{
animation: cartion .2s linear;
}
@keyframes cartion {
from{
transform: translate(0 , 66px) scale(.7);
visibility: hidden;
border-radius: 100%;
}
to{
transform: translate(0 , 66px) scale(1);
visibility: visible;
border-radius: 0%;
}
}
.cart_dropdown > a span.cart-badge{
display: inline-block;
width: 15px;
height: 15px;
background: var(--primary-color);
line-height: 16px;
font-size: 12px;
border-radius: 15px; margin: 0 0 0 -3px;
color: var(--white-fix);
}
.shopping-cart .cart-header>i {
font-size: 16px;
color: var(--primary-color);
}
.shopping-cart .cart-header {
display: flex;
border-bottom: 1px solid rgba(120 120 120 / 20%);
padding-bottom: 15px;
line-height: 1;
justify-content: space-between
}
.shopping-cart .main-button {
text-decoration: none;
border: 1px solid rgba(255 255 255 / 20%);
color: var(--white);
font-weight: 500;
display: block;
font-size: 18px;
background: var(--dark);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 20px;
border-radius: 5px;
}
.shopping-cart .main-button:hover,
.shopping-cart .main-button:focus-within{
background: var(--primary-color);
color: var(--white-fix)
}
.shopping-cart .cart-header .cart-total {
font-size: 16px
}
div.shopping-cart ul.cart-items {
padding: 0;
margin: 20px 0 20px;
list-style: none;
max-height: 200px;
overflow-x: hidden;
overflow-y: auto;
display: block;
}
div.shopping-cart ul.cart-items li {
display: inline-block;
width: 100%;
margin: 0 10px 10px 0;
padding: 0;
font-size: 15px;
position: relative;
border: 1px solid rgba(120 120 120 / 20%);
border-radius: 5px;
}
div.shopping-cart ul.cart-items li a:focus-within,div.shopping-cart ul.cart-items li a:hover {
color: var(--primary-color);
}
div.shopping-cart ul a.remove {
position: absolute;
top: 50%;
left: 10px;
transform: translate(0px, -50%);
width: 15px;
height: 15px;
line-height: 13px;
text-align: center;
border-radius: 4px;
background-color: var(--dark);
color: var(--white);
text-decoration: none;
transition: 0.65s;
opacity: 0;
}
div.shopping-cart ul.cart-items li a.remove:hover,
div.shopping-cart ul.cart-items li a.remove:focus{
text-decoration: none;
color: var(--white-fix);
background-color: var(--primary-color);
}
.shopping-cart .cart-items .item-img {
float: left;
margin-right: 12px;
width: 70px;
height: 70px;
border-radius: 5px;
text-align: center;
line-height: 4.1;
}
.shopping-cart .cart-items .item-img img {
width: 90%;
display: inline-block;
float: none;
height: auto;
margin: auto
}
.shopping-cart .cart-items .item-name {
font-size: 16px;
font-weight: 600;
display: block;
padding-top: 15px;
line-height: 1;
text-align: left;
color: var(--dark);
}
.shopping-cart .cart-items .item-name:focus-within,.shopping-cart .cart-items .item-name:hover {
color: var(--primary-color)
}
.shopping-cart .cart-badge {
color: var(--white-fix);
font-size: 10px;
margin: 0 0 0 -10px;
width: 16px;
height: 16px;
line-height: 1.6;
text-align: center;
vertical-align: super;
border-radius: 100px;
display: inline-block;
background-color: var(--primary-color)
}
.shopping-cart .cart-items .quantity {
font-size: 12px;
font-weight: 500;
color: var(--dark);
line-height: 3;
float: left;
transition: 0.65s;
}
.shopping-cart .cart-items .quantity span bdi {
color: var(--dark);
font-weight: 400
}
.shopping-cart .cart-items .amount {
font-size: 12px;
font-weight: 600;
margin-right: 0;
color: #222
}
div.shopping-cart ul.cart-items li:hover a:not(a.remove),
div.shopping-cart ul.cart-items li:hover span.quantity{
transform: translateX(25px);
}
div.shopping-cart ul.cart-items li:hover a.remove,
div.shopping-cart ul.cart-items li:focus a.remove{
opacity: 1;
z-index: 0;
}
.menu-right .modal-header {
border: none;
}
.header-search-flex {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
max-width: 600px;
width: 100%;
margin: 0 auto;
}
.header-search-flex .search-form {
display: flex;
width: 100%;
justify-content: space-between;
}
.header-search-flex .search-form .header-search-field {
border-radius: 5px;
width: 79%;
outline: none;
border: none;
transition: 0.65s;
transition-delay: 0.5s;
background-color: var(--white-fix);
color: var(--dark-fix);
padding: 15px;
}
.header-search-flex .search-form .search-submit {
width: 19%;
border-radius: 5px;
border: none;
background-color: var(--dark-fix);
transition: 0.65s;
transition-delay: 0.5s;
color: var(--white-fix);
}
.menu-right .modal .modal-content {
background-color: var(--primary-color);
}
.menu-right .modal .modal-header .btn-close {
color: var(--white-fix);
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
opacity: 1;
position: absolute;
left: 50%;
transform: translate(-50%, 0px);
top: 20%;
z-index: 999;
}
.modal .header-search-flex .search-form .header-search-field:not(.modal.show .header-search-flex .search-form .header-search-field) {
opacity: 0;
transform: translateX(-50%);
visibility: hidden;
}
.modal .header-search-flex .search-form .search-submit:not(.modal.show .header-search-flex .search-form .search-submit) {
opacity: 0;
transform: translateX(200%);
visibility: hidden;
}  .slide-main-item {
position: relative;
}
.slide-main-item::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(0 0 0 / 70%);
}
.slider-content {
position: absolute;
inset: 0;
display: flex;
align-items: center;
}
.slide-main-item .carousel-caption {
position: inherit;
}
.slide-main-item .carousel-caption span:not(span>span):not(h1>span),
.slider2-item .carousel-caption span:not(span>span):not(h1>span) {
display: inline-block;
padding: 10px 30px;
border-radius: 5px;
margin-bottom: 15px;
position: relative;
z-index: 1;
font-size: 18px;
font-weight: 600;
color: var(--white-fix);
overflow: hidden;
}
.slider2-item .carousel-caption span:not(span>span):not(h1>span){
color: var(--dark);
}
.carousel-caption span.sub-effect {
position: absolute;
inset: 0;
z-index: -1;
}
.carousel-caption span.sub-effect:after,
.carousel-caption span.sub-effect:before {
position: absolute;
background-color: rgba(255 255 255 / 10%);
content: "";
display: block;
width: 1px;
height: 100%;
transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
visibility: hidden;
}
.slider2-item .carousel-caption span.sub-effect:after,
.slider2-item .carousel-caption span.sub-effect:before{
background-color: rgba(var(--border-color),10%);
}
.carousel-caption span.sub-effect:before {
left: 0;
}
.carousel-caption span.sub-effect:after {
right: 0;
top: 0;
}
.carousel-item.active .carousel-caption span.sub-effect::before,
.carousel-item.active .carousel-caption span.sub-effect::after{
width: 50%;
visibility: visible;
}
.slide-main-item .carousel-caption span::after:not(span>span):not(h1>span),
.slide-main-item .carousel-caption span::before:not(span>span):not(h1>span),
.slider2-item .carousel-caption span::after:not(span>span):not(h1>span),
.slider2-item .carousel-caption span::before:not(span>span):not(h1>span) {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-radius: 100%;
top: 50%;
transform: translate(0%, -50%);
z-index: -1;
background-color: var(--white-fix);
}
.slider2-item .carousel-caption span::after:not(span>span):not(h1>span),
.slider2-item .carousel-caption span::before:not(span>span):not(h1>span){
background-color: var(--dark);
}
.slide-main-item .carousel-caption span::before:not(span>span):not(h1>span),
.slider2-item .carousel-caption span::before:not(span>span):not(h1>span) {
left: 10px;
}
.slide-main-item .carousel-caption span::after:not(span>span):not(h1>span),
.slider2-item .carousel-caption span::after:not(span>span):not(h1>span) {
right: 10px;
}
.slide-main-item .carousel-caption h1,
.slider2-item .carousel-caption h1 {
font-weight: 700;
font-size: 55px;
color: var(--white-fix);
margin-bottom: 30px;
}
.slider2-item .carousel-caption h1{
color: var(--dark);
}
.slide-main-item .carousel-caption:last-of-type,
.slider2-item .carousel-caption:last-of-type {
margin-left: 10px;
}
.slider-section button.carousel-control-prev,
.slider-section button.carousel-control-next {
width: 80px;
height: 80px;
border-radius: 5px;
background-size: cover;
top: 50%;
transform: translate(0px, -50%);
}
.slider-section button.carousel-control-prev {
left: 40px;
}
.slider-section button.carousel-control-next {
right: 40px;
}
.slider-section .carousel-control-prev i,
.slider-section .carousel-control-next i {
width: 30px;
height: 30px;
border-radius: 4px;
background-color: var(--white-fix);
color: var(--primary-color);
line-height: 30px;
text-align: center;
transition: 0.65s;
}
.slider-section .carousel-control-prev i {
position: absolute;
left: -15px;
}
.slider-section .carousel-control-next i {
position: absolute;
right: -15px;
}
.slider-section .carousel-control-prev:hover i,
.slider-section .carousel-control-prev:focus i,
.slider-section .carousel-control-next:hover i,
.slider-section .carousel-control-next:focus i {
background-color: var(--primary-color);
color: var(--white-fix);
}
span.primary-color {
color: var(--primary-color);
}
.slider-two .slider2-item{
height: 800px;
}
.slider-two .slider2-item>.row{
height: 100%;
}
.slider-two {
background-color: var(--bg-color);
position: relative;
z-index: 1;
}
.slider-two::before{
content: '';
position: absolute;
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape6.png);
background-repeat: no-repeat;
width: 100%;
height: 100%;
z-index: -1;
}
.slider-two::after{
content: '';
position: absolute;
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape5.png);
background-repeat: no-repeat;
bottom: 0;
right: 0;
top: 0;
left: 0;
background-position: right bottom;
z-index: -1;
}
[data-bs-theme="light"] .slider-two::before{
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape6-dark.png);
} 
[data-bs-theme="light"] .slider-two::after{
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape5-dark.png);
} 
.slider-two .carousel-caption {
position: unset;
text-align: left;
}
.slider-two .slider2-content {
display: flex;
align-items: center;
height: 100%;
}
.slider-two .slider-image {
height: 100%;
position: relative;
}
.slider-two .slider-image img {
position: absolute;
bottom: 0;
right: 0;
}
.slider-section .carousel-indicators button {
width: 15px;
height: 15px;
border-radius: 100%;
}
.slider-section.slider-two .carousel-indicators button {
background-color: var(--dark)!important;
} .section-title {
text-align: center;
margin-bottom: 40px;
}
.section-title h2 {
font-size: 45px;
font-weight: 900;
letter-spacing: 2px;
color: var(--dark);
transition: 0.65s;
opacity: 0.5;
margin: 0 0 10px;
}
.section-title .sub-title {
color: var(--white-fix);
display: inline-block;
padding: 5px 10px;
position: relative;
border-radius: 3px;
font-size: 18px;
font-weight: 600;
z-index: 1;
transition: 0.65s;
margin-bottom: 20px;
}
.section-title .sub-title::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: var(--primary-color);
left: 50%;
bottom: -9px;
transform: translate(-50%, 0px);
z-index: -1;
clip-path: polygon(50% 50%, 100% 50%, 50% 100%, 0% 50%);
}
.section-title .sub-title::after {
content: '';
position: absolute;
inset: 0;
background-color: var(--primary-color);
border-radius: 3px;
z-index: -1;
}
.section-title p {
color: var(--dark);
} .service-section {
background-color: var(--white);
padding: 100px 0 75px;
}
.service {
margin-bottom: 25px;
}
.service-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.service-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.service .service-image img {
width: 100%;
display: block;
transition: 0.3s;
max-width: 100%;
height: auto;
}
.service:hover .service-image img,
.service:focus .service-image img{
transform: scale(1.1);
}
.service .service-image {
position: relative;
overflow: hidden;
z-index: 1;
}
.service .service-heading {
position: absolute;
bottom: 0;
left: 0;
right: 0; border-radius: 0 50px 0 0;
padding: 10px 15px;
border-top: 2px solid var(--white);
border-right: 2px solid var(--white);
width: 80%;
z-index: 1;
}
.service .service-heading::before {
content: '';
position: absolute;
inset: 0;
background-color: var(--dark);
opacity: 0.9;
border-radius: 0 50px 0 0;
z-index: -1;
}
.service .service-content .service-heading h2 a,
.service .service-content .service-heading h2 {
color: var(--white);
font-size: 22px;
margin: 0 0 5px;
text-decoration: none;
}
.service .service-content .service-heading span {
color: var(--primary-color);
font-size: 16px;
}
.service .service-icon {
position: absolute;
width: 80px;
height: 80px;
line-height: 70px;
top: 0;
left: 0;
background-color: var(--primary-color);
color: var(--white-fix);
text-align: center;
border-radius: 0 0 80px 0;
z-index: 1;
font-size: 26px;
padding: 0px 6px 0 0px;
}
.service:hover .service-icon,
.service:focus .service-icon{
color: var(--primary-color);
}
.service .service-icon::before{
content: '';
position: absolute;
width: 160px;
height: 160px;
right: 0;
bottom: 0;
border-radius: 100%;
z-index: -1;
border: 80px solid var(--dark);
border-left-color: transparent;
border-bottom-color: var(--dark);
border-right-color: transparent;
transform: rotate(45deg) translateY(0px);
transition: 0.3s;
}
.service:hover .service-icon::before,
.service:focus .service-icon::before{
transform: rotate(-45deg) translateY(1px);
opacity: 1;
}
.service .service-content a:not(.service-content .service-heading h2 a) {
position: absolute;
width: 80px;
height: 80px;
line-height: 80px;
bottom: 0;
right: 0;
background-color: var(--primary-color);
color: var(--white-fix);
text-align: center;
border-radius: 80px 0 0;
z-index: 1;
padding: 10px 0 0 10px;
transition: 0.86s;
}
.service .service-content a:not(.service-content .service-heading h2 a)::before{
content: '';
position: absolute;
width: 160px;
height: 160px;
left: 0;
top: 0;
border-radius: 100%;
z-index: -1;
border: 80px solid var(--dark);
border-left-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
transform: rotate(45deg) translateY(-0.9px);
transition: 0.3s;
}
.service:hover .service-content a:not(.service-content .service-heading h2 a)::before,
.service:focus .service-content a:not(.service-content .service-heading h2 a)::before{
transform: rotate(-45deg) translateY(-0.9px);
opacity: 1;
}
.service .service-content a:not(.service-content .service-heading h2 a) i {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 30px;
background-color: var(--white-fix);
color: var(--primary-color);
}
.service:hover .service-content a:not(.service-content .service-heading h2 a) i,
.service:focus .service-content a:not(.service-content .service-heading h2 a) i{
background-color: var(--primary-color);
color: var(--white-fix);
}
.service .service-image::before {
content: '';
position: absolute;
inset: 12px;
border: 2px dashed var(--white-fix);
z-index: 1;
border-bottom: transparent;
}
.service .service-image::after {
content: '';
position: absolute;
inset: 0px;
z-index: 0;
background-color: var(--dark-fix);
opacity: 0.5;
}
.find-solution {
text-align: center;
margin: 0;
background-color: var(--primary-color);
padding: 10px;
color: var(--white-fix);
font-size: 16px;
margin-bottom: 25px;
}
.find-solution a {
color: var(--dark-fix);
display: inline-block;
background-color: var(--white-fix);
margin-left: 10px;
padding: 5px 10px;
}
.service-two{
padding: 90px 25px 30px;
position: relative;
background-color: var(--bg-color);
text-align: center;
border-radius: 5px;
margin-bottom: 25px;
z-index: 1;
overflow: hidden;
transform-style: preserve-3d;
}
.service-two::before{
content: '';
position: absolute;
border-radius: 5px;
inset: 13px;
border: 1px dashed var(--primary-color);
z-index: -1;
}
.service-two::after{
content: '';
position: absolute;
border-radius: 5px;
background-color: var(--primary-color);
z-index: -1;
width: 90px;
height: 90px;
left: 50%;
top: -30px;
border-radius: 100%;
transform: translate(-50%, 0px);
}
.service-two:hover,
.service-two:focus-within{
background-color: var(--dark);
}
.service-two .service-icon{
position: absolute;
width: 50px;
height: 50px;
border-radius: 100%;
background-color: var(--dark);
color: var(--white);
line-height: 50px;
font-size: 18px;
left: 50%;
top: 26px;
transform: translate(-50%, 0);
}
.service-two:hover .service-icon,
.service-two:focus-within .service-icon{
background-color: var(--white);
color: var(--primary-color);
}
.service-two .service-heading h2 a {
text-decoration: none;
font-size: 20px;
background-color: var(--primary-color);
padding: 5px 10px;
border-radius: 3px;
color: var(--white-fix);
}
.service-two .service-content>a {
width: 60px;
height: 60px;
display: inline-block;
line-height: 40px;
background-color: var(--dark);
border-radius: 100%;
color: var(--white);
position: absolute;
bottom: -25px;
left: 50%;
transform: translate(-50%, 0px);
}
.service-two .service-heading span {
font-size: 26px;
font-weight: 600;
display: block;
text-align: right;
color: var(--dark);
}
.service-two:hover .service-heading span,
.service-two:focus-within .service-heading span{
color: var(--white);
}
.service-two .service-two-inner{
transform: translateZ(20px);
}
.service-two .service-heading p {
margin: 0;
color: var(--dark);
}
.service-two:hover .service-heading p,
.service-two:focus-within .service-heading p{
color: var(--white);
}
.service-two:hover .service-content>a,
.service-two:focus-within .service-content>a{
background-color: var(--primary-color);
color: var(--white-fix);
}  .feature-section {
padding: 100px 0 75px;
background-color: var(--bg-color);
}
.feature-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.feature-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.feature-item {
background-color: var(--dark);
padding: 30px 20px;
border-radius: 5px;
position: relative;
display: flex;
align-items: center;
margin-bottom: 25px;
z-index: 1;
}
.feature-two{
background-color: var(--dark2-fix);
position: relative;
}
.feature-two::before{
content: '';
position: absolute;
inset: 0;
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape5.png);
background-repeat: no-repeat;
background-position: center bottom;
}
.feature-two .feature-item{
background-color: transparent;
flex-direction: column-reverse;
align-items: center;
position: relative;
transition: 0.65s;
}
.feature-two .feature-item .feature-inner{
display: flex;
flex-direction: column-reverse;
align-items: center;
text-align: center;
}
.feature-two .feature-item .feature-inner{
transform: translateZ(50px);
}
.feature-two .feature-item::before{
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: 5px;
border: 1px solid var(--white-fix);
opacity: 0.1;
}
.feature-two .feature-item::after{
content: '';
position: absolute;
inset: 10px;
z-index: -1;
border-radius: 5px;
border: 1px dashed var(--white-fix);
transition: 0.65s;
visibility: hidden;
}
.feature-two .feature-item:hover{
background-color: var(--primary-color);
}
.feature-two .feature-item:hover .feature-icon{
color: var(--white-fix);
transition: 0.65s;
}
.feature-two .feature-item:hover::after{
visibility: visible;
}
.feature-two .section-title h2,.feature-two .section-title p,.feature-two .feature-content h3{
color: var(--white-fix);
}
@keyframes shkX {
0%{
transform: translateX(0);
}
50%{
transform: translateX(5px);
}
0%{
transform: translateX(0);
}
}
.feature-content {
flex: 1;
padding-right: 15px;
}
.feature-content h3 {
color: var(--white);
font-size: 22px;
margin: 0;
}
.feature-icon {
font-size: 40px;
color: var(--primary-color)
}
.feature-item:hover .feature-icon i {
animation: flipInX 1s;
}
.feature-two .feature-item .feature-icon {
margin-bottom: 15px;
} .portfolio-section {
background-color: var(--white);
padding: 100px 0 75px;
}
.portfolio-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.portfolio-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.portfolio-item {
border-radius: 0;
padding: 10px;
border: 0;
background-color: var(--bg-color);
position: relative;
z-index: 1;
}
.portfolio-item:hover::before,
.portfolio-item:focus::before {
transform-origin: left;
transform: scaleX(1);
}
.portfolio-item::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
background-color: var(--primary-color);
z-index: -1;
}
.portfolio-two .portfolio-item::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
transition: 0.65s ease-in-out;
background: linear-gradient(to top, var(--dark-fix), transparent);
z-index: 1;
opacity: 0;
}
.portfolio-two .portfolio-item:hover::after,
.portfolio-two .portfolio-item:focus:after{
background: linear-gradient(to top, var(--primary-color), transparent);
opacity: 1;
}
.portfolio-content {
text-align: center;
position: relative;
padding: 34px 30px 6px;
}
span.portfolio-categorie {
background-color: var(--primary-color);
color: var(--white-fix);
display: inline-block;
padding: 5px 10px;
position: absolute;
left: 50%;
top: -17px;
transform: translate(-50%, 0px);
width: 80%;
transition: 0.65s;
}
.portfolio-content a {
width: 30px;
height: 30px;
border-radius: 30px;
line-height: 30px;
background-color: var(--primary-color);
color: var(--white-fix);
display: inline-block;
position: absolute;
top: 50%;
right: 0;
transform: translate(0px, -50%);
transition: 0.65s;
}
.portfolio-content .card-title {
color: var(--dark);
transition: 0.65s;
font-size: 18px;
}
.portfolio-item:hover .card-title,
.portfolio-item:focus .card-title {
color: var(--white-fix);
}
.portfolio-item:hover span.portfolio-categorie,
.portfolio-item:focus span.portfolio-categorie,
.portfolio-item:hover .portfolio-content a,
.portfolio-item:focus .portfolio-content a {
background-color: var(--white-fix);
color: var(--primary-color);
}
.portfolio-two .portfolio-item:hover span.portfolio-categorie,
.portfolio-two .portfolio-item:focus span.portfolio-categorie{
background-color: var(--dark-fix);
}
.portfolio-section .tab-filter {
text-align: center;
margin-bottom: 40px;
}
.portfolio-section .tab-filter a{
text-decoration: none;
display: inline-block;
padding: 16px 20px 10px;
border: 1px solid var(--dark);
border-radius: 5px;
margin-right: 10px;
color: var(--dark);
position: relative;;
}
.tab-filter a span.filter-count {
width: 30px;
height: 30px;
border-radius: 100%;
display: inline-block;
line-height: 30px;
background-color: var(--primary-color);
color: var(--white-fix);
font-size: 14px;
position: absolute;
top: -15px;
left: 50%;
transform: translate(-50%, 0px);
}
.tab-filter a.active span.filter-count{
background-color: var(--dark);
color: var(--white);
}
.portfolio-section .tab-filter a.active{
background-color: var(--primary-color);
color: var(--white-fix);
border-color: var(--primary-color);
}
.portfolio-two .portfolio-item{
border-radius: 0;
padding: 0;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.portfolio-two .portfolio-content{
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: left;
padding: 15px 70px 15px 15px;
z-index: 2;
}
.portfolio-two .portfolio-item span.portfolio-categorie{
background: var(--primary-color);
color: var(--white-fix);
display: inline-block;
padding: 5px 10px;
position: unset;
left: unset;
top: unset;
transform: translate(0, 0);
width: unset;
transition: 0.65s;
font-size: 16px;
margin-bottom: 10px;
}
.portfolio-two .portfolio-item .portfolio-content .card-title{
color: var(--white-fix);
margin: 0;
}
.portfolio-two .portfolio-item .portfolio-content a {
width: 70px;
height: 70px;
border-radius: 100px 0 0 0;
bottom: 0;
transform: translate(0px, 0%);
top: unset;
line-height: 80px;
text-align: center;
}
.portfolio-two .portfolio-item .card-img, .card-img-top{
border-radius: 0;
width: 100%;
max-width: 100%;
height: auto;
}  .team-section {
background-color: var(--dark-fix);
padding: 100px 0 75px;
}
.team-section.team_page{
background-color: var(--bg-color);
}
.team-section.team_page .section-title h2,
.team-section.team_page .section-title p{
color: var(--dark);
}
.team-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.team-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.team-section .section-title h2,
.team-section .section-title p {
color: var(--white-fix);
}
.team {
position: relative;
margin-bottom: 25px;
}
.team-img {
position: relative;
z-index: 1;
padding: 15px 15px 0;
}
.team-img::before {
content: '';
position: absolute;
inset: 0;
background-color: var(--white-fix);
z-index: -1;
}
.team-img img {
width: 100%;
max-width: 100%;
height: auto;
}
.team-content {
position: absolute;
bottom: -32px;
left: 0;
right: 0;
z-index: 0;
padding: 15px;
transform: rotateX(70deg);
transition: 0.65s;
}
.team-content::before {
content: '';
position: absolute;
inset: -5px;
background-color: var(--primary-color);
z-index: -1;
opacity: 0.9;
border-radius: 4px;
}
.team-content h4 {
color: var(--white-fix);
font-size: 22px;
margin: 0 0 5px;
visibility: hidden;
transition: 0.35s;
}
.team-content span {
color: var(--white-fix);
visibility: hidden;
transition: 0.35s;
}
.team:hover .team-content {
transform: rotateX(0deg);
bottom: 0px;
z-index: 1;
}
.team:hover .team-content h4,
.team:hover .team-content span {
visibility: visible;
}  .why_choose-section {
padding: 100px 0 75px;
background-color: var(--bg-color);
}
.why_choose-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.why_choose-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.why_choose-content .feature-list {
padding: 0;
margin: 0;
list-style: none;
}
.why_choose-content .feature-list li {
background-color: var(--white);
padding: 25px;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.why_choose-content .feature-list li::before {
z-index: -1;
content: '';
position: absolute;
background-color: var(--primary-color);
width: 100%;
height: 100%;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
}
.why_choose-content .feature-list li:hover::before,
.why_choose-content .feature-list li:focus::before {
transform-origin: top;
transform: scaleX(1);
}
.why_choose-content .feature-list li:not(:last-child) {
margin-bottom: 25px;
}
.feature-list-text h5,.feature-list-text h2 {
font-size: 18px;
font-weight: 700;
color: var(--dark);
transition: 0.65s;
}
.feature-list-text p {
color: var(--dark);
margin: 0;
transition: 0.65s;
}
.why_choose-content .feature-list li:hover .feature-list-text h2,
.why_choose-content .feature-list li:focus-within .feature-list-text h2,
.why_choose-content .feature-list li:hover .feature-list-text p,
.why_choose-content .feature-list li:focus-within .feature-list-text p {
color: var(--white-fix);
}
.feature-list-text {
flex: 1;
margin-right: 15px;
}
.why_choose-content .feature-list li a {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: var(--primary-color);
color: var(--white-fix);
border-radius: 4px;
transition: 0.65s;
}
.why_choose-content .feature-list li a i {
transform: rotate(45deg);
}
.why_choose-content {
margin-bottom: 25px;
}
.why_choose-content .feature-list li:hover a,
.why_choose-content .feature-list li:focus-within a {
background-color: var(--white-fix);
color: var(--primary-color);
}
.feature-image {
position: relative;
}
.feature-image::before {
content: '';
position: absolute;
inset: 0;
border: 10px solid;
border-top-color: var(--dark);
border-left-color: var(--dark);
border-right-color: var(--primary-color);
border-bottom-color: var(--primary-color);
z-index: 1;
}
.feature-image::after {
content: '';
position: absolute;
inset: 0;
background-color: var(--dark-fix);
opacity: 0.5;
}
.feature-image img {
width: 100%;
max-width: 100%;
height: auto;
}
.video-play {
position: absolute;
bottom: 30px;
display: flex;
left: 30px;
right: 30px;
align-items: center;
z-index: 1;
}
.video-play a {
min-width: 50px;
height: 50px;
border-radius: 100%;
line-height: 50px;
text-align: center;
display: inline-block;
text-decoration: none;
background-color: var(--white-fix);
}
.video-play h3 {
font-size: 20px;
color: var(--white-fix);
flex: auto;
margin-left: 20px;
}  .cta-section {
padding: 100px 0 75px;
position: relative;
background-size: cover;
background-position: center center;
z-index: 1;
overflow: hidden;
background-attachment: fixed;
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background-color: var(--dark-fix);
opacity: 0.7;
z-index: -1;
}
.cta-section::after {
content: '';
position: absolute;
inset: 0;
display: block;
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/map.png);
background-repeat: no-repeat;
background-position: center;
z-index: -1;
}
.cta-left .contact-area .contact-icon,
.cta-right .contact-area .contact-icon {
width: 90px;
height: 90px;
line-height: 87px;
text-align: center;
border-radius: 100%;
border: 5px solid var(--white-fix);
font-size: 30px;
background-color: var(--primary-color);
color: var(--white-fix);
position: absolute;
right: 0;
z-index: 2;
top: 50%;
transform: translate(0px, -50%);
}
.cta-right .contact-area .contact-icon {
left: 0;
}
.cta-left .contact-area .contact-info p,
.cta-right .contact-area .contact-info p {
margin: 0;
}
.cta-left .contact-area .contact-info a,
.cta-right .contact-area .contact-info a {
color: var(--white-fix);
text-decoration: none;
font-size: 26px;
letter-spacing: 2px;
}
.cta-left .contact-area .contact-info,
.cta-right .contact-area .contact-info {
height: 120px;
line-height: 120px;
background-color: var(--primary-color);
padding: 0 90px 0 20px;
position: relative;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
z-index: 1;
text-align: center;
}
.cta-left .contact-area .contact-info::before,
.cta-right .contact-area .contact-info::before {
content: '';
position: absolute;
inset: 0;
right: 14px;
background: var(--white-fix);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
z-index: -1;
}
.cta-left .contact-area .contact-info::after,
.cta-right .contact-area .contact-info::after {
content: '';
position: absolute;
inset: 3px;
right: 19px;
left: 0;
background: var(--dark-fix);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
z-index: -1;
}
.cta-left .contact-area,
.cta-right .contact-area {
position: relative;
}
.cta-right .contact-area .contact-info,
.cta-right .contact-area .contact-info::before,
.cta-right .contact-area .contact-info::after {
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
}
.cta-right .contact-area .contact-info {
padding: 0 20px 0 90px;
}
.cta-right .contact-area .contact-info::before {
left: 14px;
right: 0;
}
.cta-right .contact-area .contact-info::after {
left: 19px;
right: 0;
}
.cta-right,
.cta-left {
margin-bottom: 25px;
}
.cta-content {
text-align: center;
padding-bottom: 150px;
}
.cta-content h3 {
color: var(--white-fix);
font-size: 35px;
font-weight: 800;
}
.cta-content p {
color: var(--white-fix);
}
.cta-center {
position: relative;
}
.cta-play-btn {
height: 220px;
width: 160px;
margin: 20px auto -62px;
background: white;
display: block;
border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
text-align: center;
line-height: 170px;
position: absolute;
left: 50%;
transform: translate(-50%, 0px);
bottom: -80px;
}
.cta-play-btn::before {
background-color: var(--primary-color);
border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
position: absolute;
inset: 6px;
content: '';
}
.cta-play-btn a {
z-index: 1;
position: relative;
width: 50px;
height: 50px;
border-radius: 100%;
line-height: 50px;
text-align: center;
display: inline-block;
border: 1px solid var(--white-fix);
color: var(--white-fix);
} .pricing-section {
padding: 100px 0 100px;
background-color: var(--bg-color);
position: relative;
overflow: hidden;
z-index: 1;
}
.pricing-section:not(.price-single)::before {
content: '';
position: absolute;
width: 30%;
top: 0;
left: 0;
bottom: 0;
background-color: var(--dark-fix);
z-index: -1;
clip-path: polygon(0% 0%, 65% 0%, 100% 50%, 65% 100%, 0% 100%);
}
.ring {
position: relative;
display: inline-block;
width: 450px;
height: 450px;
}
.pricing-section .ring:before {
content: '';
position: absolute;
inset: 0;
background-color: var(--primary-color);
opacity: 0.5;
z-index: 0;
border-radius: 50%;
border: 5px solid var(--white);
}
.ring:after {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top: 5px solid var(--primary-color);
border-right: 5px solid var(--primary-color);
border-radius: 50%;
animation: animateC 20s linear infinite; }
.pricing-image .rounded-circle {
width: 100%;
max-width: 450px;
height: 450px;
object-fit: cover;
border: 5px solid var(--white-fix);
}
.funfact-effect-1 {
display: block;
position: absolute;
top: calc(50% - 2px);
left: 50%;
width: 50%;
height: 4px;
background: transparent;
transform-origin: left;
animation: animate 20s linear infinite;
}
.funfact-effect-1:before {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--primary-color);
top: 7px;
right: -10px;
box-shadow: 0 0 20px var(--primary-color);
}
.pricing-image {
display: block;
text-align: center;
}
@keyframes animateC {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(405deg);
}
}
.pricing-section:not(.price-single) .section-title {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
padding: 0 15px;
z-index: 1;
}
.pricing-section:not(.price-single) .section-title h2,
.pricing-section:not(.price-single) .section-title h2 span {
color: var(--white-fix);
opacity: 1;
}
.pricing-section:not(.price-single) .section-title p {
color: var(--white-fix);
}
.pricing-section:not(.price-single) .section-title .sub-title {
color: var(--primary-color);
}
.pricing-section:not(.price-single) .section-title span::after:not(h2>span),
.pricing-section:not(.price-single) .section-title span::before:not(h2>span) {
background-color: var(--white-fix);
}
.pricing-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.pricing-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.price-item {
background-color: var(--white);
border-radius: 5px;
position: relative;
overflow: hidden;
z-index: 1;
transition: 0.5s;
margin-bottom: 25px;
}
.price-item:hover,
.price-item:focus{
background-color: var(--dark);
}
.price-item::before {
position: absolute;
content: '';
inset: 0;
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape1.png);
background-repeat: no-repeat;
z-index: -1;
}
.price-item::after {
position: absolute;
content: '';
inset: 0;
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape2.png);
background-repeat: no-repeat;
z-index: -1;
}
.price-item *{
transition: 0.5s;
}
.price-item .price-header {
padding: 30px 20px 0;
text-align: center;
margin-bottom: 20px;
}
.price-item .price-header span.price:not(span.price>span) {
font-size: 30px;
color: var(--primary-color);
font-weight: 700;
}
.price-item .price-header span.price>span {
font-size: 16px;
font-weight: 500;
color: var(--dark);transition: 0.5s;
}
.price-item:hover .price-header span.price>span,
.price-item:focus .price-header span.price>span{
color: var(--white);
}
.price-heading {
font-size: 36px;
font-weight: 700;
color: var(--dark);
margin-bottom: 15px;
}
.price-item:hover .price-heading,
.price-item:focus .price-heading{
color: var(--white);
}
.price-item:hover .price-header,
.price-item:focus .price-header{
color: var(--white);
}
.price-header p {
color: var(--dark);
margin-top: 15px;
}
.price-item:hover .price-header p,
.price-item:focus .price-header p{
color: var(--white);
}
.price-body {
padding: 0 20px;
}
.price-body ul {
margin: 0;
padding: 20px;
list-style: none;
background-color: var(--bg-color);
border-radius: 5px;
text-align: left;
}
.price-item:hover .price-body ul ,
.price-item:focus .price-body ul {
background-color: var(--dark2-fix);
}
.price-body ul li i {
color: var(--primary-color);
margin-right: 5px;
}
.price-body ul li {
font-size: 18px;
font-weight: 600;
color: var(--dark);
}
.price-item:hover .price-body ul li,
.price-item:focus .price-body ul li{
color: var(--white-fix);
}
.price-body ul li:not(:last-child) {
margin-bottom: 10px;
}
.price-item .widget_payment_methods ul {
list-style: none;
margin: 0;
padding: 20px;
position: relative;
z-index: 1;
}
.price-item .widget_payment_methods ul::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-bottom: 1px solid var(--dark);
left: 0;
top: 0;
opacity: 0.1;
z-index: -1;
}
.price-item .widget_payment_methods ul li {
display: inline-block;
margin-right: 5px;
}
.price-item .widget_payment_methods ul li a {
display: inline-block;
font-size: 36px;
line-height: 0;
}
.price-item .widget-contact .contact-area {
padding: 20px;
}
.price-item .widget-contact .contact-area {
display: flex;
align-items: center;
}
.price-item .contact-info p {
margin: 0;
display: flex;
flex-direction: column;
align-items: self-start;
}
.price-item .contact-info p span {
color: var(--dark);
font-weight: 500;
}
.price-item:hover .contact-info p span,
.price-item:focus .contact-info p span{
color: var(--white);
}
.price-item .contact-info a {
text-decoration: none;
font-size: 20px;
color: var(--dark);
font-weight: 700;
}
.price-item:hover .contact-info a,
.price-item:focus .contact-info a{
color: var(--white);
}
.price-item .contact-icon {
width: 50px;
height: 50px;
border-radius: 100%;
line-height: 50px;
text-align: center;
margin-right: 15px;
background-color: var(--primary-color);
color: var(--white-fix);
}
.pricing .filter-wrapper-2 {
text-align: center;
}
.pricing .filter-wrapper-2 .tab-filter {
display: inline-block;
background-color: var(--white);
border-radius: 4px;
border: 1px solid var(--primary-color);
margin-bottom: 30px;
}
.pricing .filter-wrapper-2 .tab-filter a {
text-decoration: none;
padding: 10px 15px;
display: inline-block;
font-weight: 600;
color: var(--primary-color);
}
.pricing .filter-wrapper-2 .tab-filter a.active{
background-color: var(--primary-color);
color: var(--white-fix);
}
.tooltip-inner {
background-color: var(--dark) !important;
color: var(--white) ;
font-weight: 500;
}
.icon-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.price-single{
padding: 100px 0 75px;
}
.price-single .price-item{
margin-bottom: 25px;
} .testimonial-section{
padding: 100px 0;
position: relative;
z-index: 1;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.testimonial-section::before{
content: '';
position: absolute;
inset: 0;
background-color: var(--dark-fix);
opacity: 0.8;
z-index: -1;
}
.testimonial-section .section-title h2,.testimonial-section .section-title p{
color: var(--white-fix);
}
.testimonial-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.testimonial-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.testimonial-content {
padding: 40px 70px;
position: relative;
border-radius: 5px;
z-index: 1;
}
.testimonial-content .client-info h2{
color: var(--primary-color);
margin-bottom: 5px;
font-size: 22px;
}
.testimonial-content .client-info span ,.testimonial-content p{
color: var(--white-fix);
}
.testimonial-content p::before,.testimonial-content p::after{
font-family: "Font Awesome 5 free";
font-weight: 900;
position: absolute;
font-size: 30px;
color: var(--primary-color);
}
.testimonial-content p::before{
content: '\f10d';
top: 12px;
left: 20px;
}
.testimonial-content p::after{
content: '\f10e';
bottom: 12px;
right: 20px;
}
.testimonial-content::before{
content: '';
position: absolute;
inset: 0;
border: 1px solid var(--white-fix);
opacity: 0.2;
border-radius: 5px;
z-index: -1;
}
.testimonial-image {
text-align: center;
}
.testimonial-image img{
width: 130px;
height: 130px;
object-fit: cover;
border: 3px solid var(--primary-color);
border-radius: 100%;
}
.testimonial-section .carousel-indicators button{
text-indent: 0;
width: 50px;
height: 50px;
border-radius: 100%;
background: none;
border: 2px solid var(--white-fix);
outline: none;
opacity: 1;
}
.testimonial-section .carousel-indicators button.active{
border-color: var(--primary-color);
}
.testimonial-section .carousel-indicators button img{
display: block;
width: 50px;
height: 50px;
border-radius: 100%;
}
.testimonial-section .carousel-indicators {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 372px;
text-align: center;
margin: 0;
left: unset;
display: inline-block;
}  .funfact-section{
padding: 100px 0 75px;
position: relative;
z-index: 1;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.funfact-section::before{
content: '';
position: absolute;
inset: 0;
background-color: var(--dark-fix);
opacity: 0.7;
z-index: -1;
}
.funfact-box{
text-align: center;
margin-bottom: 25px;
}
.funfact-content span:not(h3>span){
color: var(--white-fix);
font-weight: 700;
font-size: 26px;
}
.funfact-icon {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: var(--white-fix);
display: flex;
color: var(--primary-color);
align-items: center;
justify-content: center;
margin: 15px auto 30px;
font-size: 80px;
font-weight: 800;
position: relative;
transition: 0.65s;
}
.funfact-box:hover .funfact-icon{
background-color: var(--primary-color);
color: var(--white-fix);
}
.funfact-icon::before {
content: '';
position: absolute;
inset: 0;
border-radius: 100%;
border: 4px solid var(--primary-color);
border-top-color: transparent;
border-left-color: transparent;
}
.funfact-icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: 100%;
border: 4px solid transparent;
border-top-color: var(--primary-color);
transform: rotate(-40deg);
}
.funfact-box:hover .funfact-icon::before{
border-color: var(--white-fix);
border-top-color: transparent;
border-left-color: transparent;
}
.funfact-box:hover .funfact-icon::after{
border: 4px solid transparent;
border-top-color: var(--white-fix);
}
.effect-border {
position: absolute;
inset: -15px;
border: 2px solid transparent;
border-radius: 100%;
border-bottom-color: #fff;
}
.effect-border::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 100%;
border: 2px solid transparent;
border-right-color: #fff;
transform: rotate(-30deg);
}
.effect-border::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 100%;
border: 2px solid transparent;
border-top-color: #fff;
transform: rotate(-60deg);
}
@keyframes effectone {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.funfact-box:hover .funfact-icon::before {
animation: effectone 10s linear infinite;
}
.funfact-box:hover .funfact-icon::after {
animation: effecttwo 10s linear infinite;
}
.funfact-box:hover .effect-border {
animation: effectthree 10s linear infinite;
}
@keyframes effecttwo {
0% {
transform: rotate(-40deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes effectthree {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.funfact-content h3{
font-size: 45px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0;
}  .sponsor-section{
padding: 100px 0 100px;
background-color: var(--white);
}
.sponsor-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.sponsor-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.sponsor-item img {
max-width: 100%;
height: auto;
}
.sponsor-item {
padding: 0 20px;
height: 150px;
line-height: 150px;
border-radius: 10px;
background-color: var(--dark-fix);
text-align: center;
position: relative;
z-index: 1;
transition: 0.65s;
margin: 0 10px;
}
.sponsor-image {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.sponsor-item::before{
content: '';
position: absolute;
inset: 6px;
border-radius: 10px;
border: 2px dashed var(--primary-color);
z-index: -1;
transition: 0.65s;
}
.sponsor-item:hover{
background-color: var(--primary-color);
}
.sponsor-item:hover::before{
border-color: var(--white-fix);
}  .cta2-section{
background-size: cover;
position: relative;
z-index: 1;
background-position-x: -200px;
background-attachment: fixed;
}
.cta2-section::before{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to left, var(--dark-fix),var(--dark-fix),transparent);
z-index: -1;
}
.cta2-section::after{
content: '';
position: absolute;
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape3.png);
background-repeat: no-repeat;
z-index: -1;
right: 0;
top: 0;
width: 736px;
height: 100%;
}
.cta2-content{
padding: 100px 0 100px;
}
.cta2-image {
position: relative;
height: 100%;
}
.cta2-image img{
position: absolute;
bottom: 0;
width: 400px;
right: 0;
}
.cta2-content h1 {
font-size: 46px;
font-weight: 700;
color: var(--white-fix);
margin-bottom: 20px;
}
.cta2-content>span {
color: var(--white-fix);
display: inline-block;
padding: 5px 10px;
position: relative;
border-radius: 3px;
font-size: 18px;
font-weight: 600;
z-index: 1;
transition: 0.65s;
margin-bottom: 20px;
}
.cta2-content>span::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: var(--primary-color);
left: 10px;
bottom: -9px;
transform: translate(0%, 0px);
z-index: -1;
clip-path: polygon(50% 50%, 100% 50%, 50% 100%, 0% 50%);
}
.cta2-content>span::after {
content: '';
position: absolute;
inset: 0;
background-color: var(--primary-color);
border-radius: 3px;
z-index: -1;
}
.cta2-content>p{
color: var(--white-fix);
margin-bottom: 20px;
}
a.store_btn {
text-decoration: none;
padding: 5px 25px;
border-radius: 4px;
display: inline-flex;
align-items: center;
font-weight: 500;
line-height: 1.2;
}
a.store_btn>span{
display: flex;
flex-direction: column;
margin-left: 10px;
}
a.store_btn.google{
background-color: var(--primary-color);
color: var(--white-fix);
margin-right: 10px;
transition: 0.5s;
}
a.store_btn.google:hover,
a.store_btn.google:focus-within{
background-color: var(--white-fix);
color: var(--primary-color);
margin-right: 10px;
transition: 0.5s;
}
a.store_btn.apple{
background-color: var(--white-fix);
color: var(--primary-color);
}
a.store_btn.apple:hover,
a.store_btn.apple:focus-within{
background-color: var(--primary-color);
color: var(--white-fix);
}  .blog-section{
padding: 100px 0 75px; }
.blog-section.blog-page,.blog-section.blog-single{ }
.blog-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.blog-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.post-item{
margin-bottom: 25px;
}
.post-item .post-image{
margin: 0;
position: relative;
overflow: hidden;
z-index: 1;
border-radius: 5px 5px 0 0;
}
.post-item .post-image img{
transition: 0.3s;
}
.post-item:hover .post-image img,
.post-item:focus .post-image img{
transform: scale(1.1);
}
.post-item .post-image::after{
position: absolute;
top: 0%;
right: 0%;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255, 255, 255, .4);
border-radius: 50%;
}
.post-item:hover .post-image::after{
-webkit-animation: circle .95s;
animation: circle .95s;
}
@keyframes circle{
0% {
width: 0;
height: 0;
top: 0;
right: 0;
}
90%{
width: 100%;
height: 120%;
}
100%{
opacity: 0;
}
}
.post-image img{
width: 100%;
display: block;
border-radius: 5px 5px 0 0;
max-width: 100%;
height: auto;
}
.post-meta.up .author{
text-decoration: none;
font-weight: 500;
flex: 1;
}
.author-image img {
width: 70px;
height: 70px;
border-radius: 100%;
border: 2px solid var(--primary-color);
margin-right: 10px;
}
.post-meta.up {
position: relative;
display: flex;
justify-content: center;
z-index: 1;
margin-top: -55px;
margin-bottom: 15px;
}
.post-meta.up::before{
content: '';
position: absolute;
background-color: var(--bg-color);;
inset: 10px 20px;
z-index: -1;
margin: 0 auto;
box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}
.author-name{   
color: var(--dark);
}
.post-meta.up span.post-date a {
width: 70px;
height: 70px;
border-radius: 100%;
display: inline-block;
background-color: var(--primary-color);
color: var(--white-fix);
text-align: center;
text-decoration: none;
font-weight: 600;
font-size: 16px;
display: flex;
flex-direction: column;
line-height: 48px;
}
.post-meta.up span.post-date a span {
font-size: 20px;
line-height: 0;
}
.post-content {
position: relative;
padding: 20px;
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
border-radius: 0 0 5px 5px;
background-color: var(--white);
}
.blog-section.blog-page .post-content,.blog-section.blog-single .post-content{
background-color: var(--bg-color);
}
.blog-section.blog-page .post-meta.up::before,.blog-section.blog-single .post-meta.up::before{
background-color: var(--white);
}
.post-content .post-title{
line-height: 1;
word-break: break-word;
}
.post-content .post-title a {
text-decoration: none;
font-size: 26px;
color: var(--dark);
font-weight: 700;
transition: 0.65s;
}
.blog-section .post-item > .post-content:nth-child(1) {
margin-top: 25px;
}
.post-content .post-title a:hover,
.post-content .post-title a:focus-within{
color: var(--primary-color);
}
.post-content>p{
color: var(--dark);
padding-bottom: 20px;
position: relative;
z-index: 1;
}
.post-content>p::before{
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-bottom: 1px solid var(--dark);
opacity: 0.2;
}
.blog-single .post-content>p {
padding: 0;
}
.blog-single .post-content>p::before{
border: none;
}
a.more-link {
text-decoration: none;
font-weight: 600;
color: var(--dark);
transition: 0.65s;
float: left;
}
a.more-link:hover,
a.more-link:focus-within{
color: var(--primary-color);
}
.post-meta.down {
float: right;
}
.post-meta.down span.comments-link i {
color: var(--primary-color);
margin-right: 5px;
}
.post-meta.down span.comments-link a{
text-decoration: none;
color: var(--dark);
font-weight: 600;
}
.post-content::after {
content: '';
display: block;
clear: both;
}
.page-links {
padding: 0;
margin-top: 30px;
list-style: none;
display: flex;
justify-content: center;
position: relative;
align-items: center;
}
.page-links .post-page-numbers {
width: 40px;
height: 50px;
display: inline-block;
line-height: 50px;
color: var(--white);
text-decoration: none;
font-weight: 500;
position: relative;
z-index: 1;
text-align: center;
background: var(--dark);;
}
.page-links .post-page-numbers.current::before {
background-color: var(--primary-color);
content: '';
position: absolute;
inset: -10px 0;
z-index: -1;
clip-path: polygon(10% 15%, 0 15%, 10% 0, 90% 0, 100% 15%, 90% 15%, 90% 85%, 100% 85%, 90% 100%, 10% 100%, 0 85%, 10% 85%);
} .blog-post.author-details {
background-color: var(--bg-color);
padding: 25px;
position: relative;
display: flex;
align-items: center;
z-index: 1;
margin-bottom: 25px;
}
.blog-post.author-details::before {
content: '';
position: absolute;
inset: 0;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
background-color: var(--dark);
z-index: -1;
width: 40%;
}
.section-header h2{
color: var(--white-fix)
}
.author-details .media {
display: flex;
align-items: center;
}
.media .auth-mata {
margin-right: 15px;
}
.media .auth-mata img {
width: 150px;
height: 150px;
border-radius: 100%;
}
.media-body h4 a {
text-decoration: none;
text-transform: capitalize;
color: var(--primary-color);
}
.comments-area {
margin-bottom: 25px;
clear: both;
}
ol.comment-list {
margin: 0 0 25px;
padding: 0px;
list-style: none;
position: relative;
z-index: 1;
background-color: var(--white);
border-radius: 5px;
}
ol.comment-list::before{
content: '';
position: absolute;
inset: 0;
border: 1px solid var(--dark);
opacity: 0.2;
z-index: -1;
border-radius: 5px;
}
ol.children {
margin: 0;
list-style: none;
}
.comments-area .comment-meta .comment-author img {
position: absolute;
z-index: 0;
left: 0;
border-radius: 5px;
width: 100px;
height: 100px;
object-fit: cover;
margin-left: 25px;
}
.comments-area .comment-body {
position: relative;
padding: 25px 25px 25px 145px;
overflow-wrap: break-word;
word-wrap: break-word;
border-radius: 3px;
z-index: 1;
min-height: 150px;
}
.comment-list>li:not(:last-child).comment .comment-body::before{
content: '';
position: absolute;
inset: 0;
border-bottom: 1px solid var(--dark);
opacity: 0.2;
z-index: -1;
}
.comment-list>li.comment .children .comment-body::before{
left: -32px;
}
.comment-list>li.comment .children .children  .comment-body::before{
left: -64px;
}
.comment-content p {
margin: 0;
color: var(--dark);
}
.comment-author .fn a {
text-decoration: none;
color: var(--dark);
font-weight: 700;
font-size: 18px;
}
.comment-metadata a {
text-decoration: none;
font-weight: 600;
color: var(--primary-color);
}
.comment-metadata a time:before {
content: "\f073";
font-family: "Font Awesome 5 Free";
font-size: 14px;
color: var(--primary-color);
margin-right: 5px;
}
.comment-metadata a.reply {
display: inline-block;
background-color: var(--primary-color);
padding: 8px 15px;
color: var(--white);
border-radius: 5px;
}
.comment-metadata {
display: flex;
align-items: center;
justify-content: space-between;
}
.comment-respond {
padding: 25px;
background-color: var(--bg-color);
border-radius: 5px;
}
.comment-reply-title {
color: var(--primary-color);
font-size: 22px;
font-weight: 600;
}
.comment-form p{
color: var(--dark)
}
.comment-form p .comment-textarea,
.comment-form p input[type='text'],
.comment-form p input[type='email'],
.comment-form p input[type='url']{
width: 100%;
background-color: var(--white);
border: none;
outline: none;
padding: 10px 15px;
border-radius: 4px;
color: var(--dark);
}
.comment-form p.form-submit{
margin: 0;
}
.comment-form p.form-submit input[type='submit']{
background-color: var(--primary-color);
border: none;
outline: none;
color: var(--white-fix);
padding: 10px 15px;
border-radius: 4px;
} .footer-section{
position: relative;
z-index: 1;
background-size: cover;
}
.footer-section .logo img{
max-width: 100%;
height: auto;
}    .footer-section::before{
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to right,#000,#000,#000,transparent);
}
.footer-section::after{
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-color: #000;
opacity: 0.7;
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape5.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.footer-item .logo {
margin-bottom: 20px;
}
.textwidget p{
color: var(--white-fix);
}
.footer-active-shape {
position: absolute;
inset: -26px 0 0 0;
background-color: var(--primary-color);
z-index: -1;
}
.footer-active-shape::before,.footer-active-shape>span::before{
content: '';
position: absolute;
width: 17px;
height: 26px;
background-color: var(--primary-color);
left: -16px;
clip-path: polygon(100% 0%, 100% 0, 100% 100%, 0% 100%);
z-index: -2;
}
.footer-active-shape::after,.footer-active-shape>span::after{
content: '';
position: absolute;
width: 17px;
height: 26px;
background-color: var(--primary-color);
right: -17px;
clip-path: polygon(0% 0%, 0% 0, 100% 100%, 0% 100%);
z-index: -2;
backdrop-filter: drop-shadow(16px 16px 10px black);
}
.footer-active-shape>span {
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape3.png);
position: absolute;
inset: 0;
background-position: 0 0;
}
.footer-active-shape>span::before,.footer-active-shape>span::after {
background-color: var(--dark-fix);
opacity: 0.3;
z-index: 1;
}
.footer-item .widget_social_widget ul{
padding: 0;
margin: 0;
list-style: none;
}
.footer-item .widget_social_widget ul li{
display: inline-block;
}
.footer-item .widget_social_widget ul li:not(:last-child){
margin-right: 10px;
}
.footer-item .widget_social_widget ul li a{
width: 40px;
height: 40px;
border-radius: 100%;
line-height: 40px;
text-align: center;
display: inline-block;
background-color: var(--white-fix);
color: var(--primary-color);
margin-bottom: 10px
}
.widget_social_widget ul li a:hover i,
.widget-social-widget ul li a:hover i{
animation: flipInX 1s;
}
.br-bottom{
border-bottom: 1px solid rgb(180 180 180 / 20%);
}
.footer-item {
position: relative;
height: 100%;
z-index: 1;
padding: 0 20px 20px;
}
.footer-item::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-right: 1px solid rgb(180 180 180 / 20%);
border-left: 1px solid rgb(180 180 180 / 20%);
}
.footer-item .widget-title {
padding: 10px 0px;
color: var(--white-fix);
font-size: 20px;
margin-bottom: 0px;
letter-spacing: 1px;
position: relative;
z-index: 1;
margin-bottom: 20px;
}
.footer-item .widget-title::before{
content: '';
position: absolute;
inset: 0 -20px;
border-bottom: 1px solid rgb(180 180 180 / 20%);
z-index: -1;
}
.footer-item .widget_categories ul,
.footer-item .wp-block-categories
{
padding: 0px;
list-style: none;
margin: 0;
}
.footer-item .widget_categories ul li:not(:last-child),
.footer-item .wp-block-categories li:not(:last-child)
{
margin-bottom: 10px;
}
.footer-item .widget_categories ul li a,
.footer-item .wp-block-categories li a
{
text-decoration: none;
color: var(--white-fix);
}
.footer-section .widget_categories ul li a::before,
.footer-section .wp-block-categories li a::before
{
content: "\f192";
font-family: 'Font Awesome 5 Free';
font-weight: 500;
margin-right: 5px;
color:var(--primary-color);
}
.footer-item .grid-time {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.footer-item .grid-time dt i{
margin-right: 10px;
color: var(--primary-color);
}
.footer-item .grid-time dt,
.footer-item .grid-time dd{
color: var(--white-fix);
margin-bottom: 0.5rem;
}
.footer-item .custom-html-widget .payment_methods {
padding: 0;
margin: 0 0 15px;
list-style: none;
}
.footer-item .custom-html-widget .payment_methods li{
display: inline-block;
}
.footer-item .custom-html-widget .payment_methods li a{
text-decoration: none;
color: var(--white-fix);
font-size: 30px;
margin-right: 5px;
}
.footer-item .our-rewards{
margin-bottom: 20px;
}
.footer-item .our-rewards .reward{
display: inline-block;
margin-right: 5px;
margin-bottom: 10px;
}
.footer-item .our-rewards .reward img{
width: 50px;
height: 50px;
}
.custom-html-widget .contact-area{
display: flex;
align-items: center;
}
.custom-html-widget .contact-icon{
color: var(--primary-color);
font-size: 45px;
margin-right: 15px;
}
.custom-html-widget .contact-info p{
display: flex;
flex-direction: column;
margin: 0;
}
.custom-html-widget .contact-info p span{
font-size: 16px;
color: var(--white-fix);
}
.custom-html-widget .contact-info p a{
text-decoration: none;
font-size: 22px;
color: var(--white-fix);
font-weight: 700;
letter-spacing: 1px;
}
.footer-item .contact-area:hover .contact-icon i,
.footer-item .contact-area:focus-within .contact-icon i{
animation: headShake 2s;
}
.footer-item .contact-area .contact-info a:hover,
.footer-item .contact-area .contact-info a:focus-within{
color: var(--primary-color);
}
.footer-main {
margin-bottom: 60px;
border-bottom: 1px solid rgb(180 180 180 / 20%);
}
.footer-middle .contact-area {
display: flex;
align-items: center;
border: 1px solid rgb(180 180 180 / 20%);
margin-bottom: 25px;
}
.footer-middle .contact-area .contact-icon>i:nth-child(1) {
transition: 0.5s;
text-align: center;
transform-origin: top;
transform: translateY(0px) rotateX(0deg);
height: 100px;
line-height: 100px;
width: 100%;
border: 1px solid rgb(180 180 180 / 20%);
}
.footer-middle .contact-area .contact-icon>i:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.5s;
transform-origin: bottom;
transform: translateY(-100%) rotateX(90deg);
background: var(--primary-color);
color: var(--white-fix);
display: flex;
align-items: center;
justify-content: center;
}
.footer-middle .contactinfo-box:hover .contact-icon>i:nth-child(2) {
transform: translateY(0%) rotateX(0deg);
} 
.footer-middle .contactinfo-box:hover .contact-icon>i:nth-child(1) {
transform: translateY(100%) rotateX(90deg);
}
.footer-middle .contactinfo-box{
position: relative;
}
.footer-middle .contact-area .contact-icon{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: var(--primary-color);
background: rgba(255 255 255 / 5%);
font-size: 40px;
margin-right: 15px;
backdrop-filter: blur(2px);
}
.footer-middle .contact-area .contact-info{
height: 100px;
display: flex;
align-items: center;
}
.footer-middle .contact-area .contact-info p{
margin: 0;
display: flex;
flex-direction: column;
}
.footer-middle .contact-area .contact-info p span{
color: var(--white-fix);
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
}
.footer-middle .contact-area .contact-info p a{
text-decoration: none;
color: var(--white-fix);
}
.footer-middle {
margin-bottom: 35px;
}
p.copyright-text {
margin: 0;
color: var(--white-fix);
font-weight: 400;
}
.footer-copyright .widget_pages ul{
padding: 0;
margin: 0;
list-style: none;
text-align: right;
}
.footer-copyright .widget_pages ul li{
display: inline-block;
}
.footer-copyright .widget_pages ul li:not(:last-child){
margin-right: 10px;
}
.footer-copyright .widget_pages ul li a{
color: var(--white-fix);
transition: 0.65s;
}
.footer-copyright .footer-menu li a{
text-decoration: underline;
}
.footer-copyright .footer-menu li a:hover, .footer-copyright .footer-menu li a:focus{
text-decoration: underline dotted;
}
.footer-copyright .widget_pages ul li a:hover,
.footer-copyright .widget_pages ul li a:focus-within{
color: var(--primary-color);
}
.footer-copyright {
border: 1px solid rgb(180 180 180 / 20%);
padding: 25px 20px;
}  ul.switcher-dark {
padding: 0;
margin: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul.switcher-dark li.nav-item.dropdown {
list-style: none;
}
ul.switcher-dark li.nav-item.dropdown button.bd-theme {
border-radius: 5px;
background-color: var(--primary-color);
width: 40px;
height: 40px;
border-radius: 100%;
color: var(--white-fix);
border: none;
}
.switcher-dark .dropdown-menu .dropdown-item{
line-height: 1.5;
} .scrollingUp.scroll-btn {
display: inline-block;
text-decoration: none;
background: var(--primary-color);
color: var(--white-fix);
border-radius: 100%;
height: 40px;
width: 40px;
line-height: 40px;
padding: 0;
z-index: 999;
border: none;
position: fixed;
bottom: 0%;
left: 50%;
transform: translate(-50%, 0px);
visibility: hidden;
transition: all 0.65s ease 0s;
}
.scrollingUp.scroll-btn.is-active {
bottom: 8%;
visibility: visible;
} .breadcrumb-area {
height: 500px;
position: relative;
overflow: hidden;
z-index: 1;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.breadcrumb-area:not(.breadcrumb-blur)::before{
content: '';
position: absolute;
inset: 0;
z-index: -1; }
.breadcrumb-area::after{
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--primary-color);
opacity: 0.3;
}
.breadcrumb-area ol.breadcrumb{
justify-content: center;
display: inline-flex;
padding: 10px 15px;
border-radius: 3px;
background-color: #1b1e22;
}
.breadcrumb-item+.breadcrumb-item::before{
content: '\f054';
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--white-fix);
line-height: 1.8;
font-size: 14px;
display:none;
}
h1.breadcrumb-heading {
color: var(--white-fix);
margin-bottom: 15px;
}
.breadcrumb-item a ,.breadcrumb-item{
color: var(--white-fix);
text-decoration: none;
}
.breadcrumb-item.active{
color: var(--primary-color);
}
.breadcrumb-area:not(.breadcrumb-blur) .blur-effect2{
display: none;
} .about-section{
padding: 100px 0 75px;
background-color: var(--white);
position: relative;
}
.about-section:hover .section-title h2 {
transform: scale(1) translateY(32px);
opacity: 1;
}
.about-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.about-section .about-image {
position: relative;
display: block;
text-align: center;
margin-bottom: 25px;
}
.about-section .about-image img{
width: 100%;
display: block;
}
.about-section .ring {
position: relative;
display: inline-block;
width: 600px;
height: 600px;
}
.about-image .funfact-effect-1{
z-index: 1;
}
.about-image .funfact-effect-1:before {
top: -5px;
right: -8px;
}
.about-section .ring::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-bottom: 10px solid var(--dark);
border-left: 10px solid var(--dark);
border-image: initial;
border-top: 10px solid var(--primary-color);
border-right: 10px solid var(--primary-color);
border-radius: 50%;
animation: 20s linear 0s infinite normal none running animateC;
}
.about-content .section-title {
text-align: left;
margin-bottom: 0;
}
.about-content .section-title span::before:not(h2>span){
left: 15px;
}
.about-content h2{
font-weight: 700;
font-size: 35px;
color: var(--dark);
}
.about-content .about-author{
padding: 15px;
margin: 0;
list-style: none;
display: flex;
background-color: var(--bg-color);
border-radius: 5px;
}
.about-content .about-author li img{
width: 70px;
height: 70px;
border-radius: 100%;
margin-right: 10px;
}
.about-content .about-author li h3{
font-size: 18px;
margin: 0;
display: inline-block;
font-weight: 700;
color: var(--dark);
}
.about-content .about-author li p{
margin: 0;
color: var(--dark);
}
.about-content{
margin-bottom: 25px;
}
.about-experience{
position: relative;
padding: 0;
margin: 25px 0 0;
list-style: none;
background-size: cover;
background-position: center center;
border-radius: 3px;
z-index: 1;
display: flex;
padding: 15px;
align-items: center;
}
.about-experience::before{
position: absolute;
content: '';
inset: 0;
border-radius: 3px;
background-color: var(--primary-color);
opacity: 0.7;
z-index: -1;
}
.about-experience>li:first-child{
display: flex;
align-items: center;
flex: 1;
}
.about-experience>li>span:first-child{
color: var(--white-fix);
font-size: 35px;
font-weight: 700;
margin-right: 15px;
}
.about-experience>li>span:last-child{
color: var(--white-fix);
font-size: 20px;
font-weight: 600;
}
.about-experience li .main-btn.bg{
background-color: var(--white-fix);
color: var(--dark-fix);
}
.about-experience li .main-btn.bg::before{ 
border-color: var(--primary-color);
} .why_choose-section.whychoose-about{
background-color: var(--white);
}
.whychoose-about .why_choose-content .feature-list li{
background-color: var(--bg-color)
} .about-company:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.about-company:hover .section-title .sub-title {
transform: translateY(-80px);
}
.about-company{
padding: 100px 0 75px;
background-color: var(--white);
}
.rewards{
flex: 0 0 auto;
}
.rewards h2 {
font-size: 65px;
font-weight: 800;
color: var(--dark);
}
.rewards h2 i {
color: var(--primary-color);
font-size: 50px;
}
.rewards > span {
display: block;
font-size: 26px;
font-weight: 500;
margin-bottom: 15px;
}
.headings h2 {
font-size: 45px;
font-weight: 600;
color: var(--dark);
}
.headings p{
color: var(--dark);
}
.company-content{
display: flex;
align-items: center;
}
.headings {
border-left: 1px solid #666;
padding: 10px 0px 0 25px;
margin-left: 25px;
}
.about-company-image img {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 120px 0 0 0;
}
.about-company-image{
position: relative;
text-align: right;
z-index: 1;
}
.about-company-image::before{
position: absolute;
content: '';
width: 300px;
height: 300px;
border-radius: 130px 0 0 0;
right: 10px;
bottom: 10px;
background-color: var(--primary-color);
z-index: -1;
} .market-analysis{
padding: 100px 0 75px;
background-color: var(--dark2-fix);
}
.market-report h2 {
font-size: 40px;
font-weight: 700;
color: var(--white-fix);
margin-bottom: 25px;
}
.market-report ul{
padding: 0;
margin: 0;
list-style: none;
}
.market-report ul li{
padding-left: 35px;
position: relative;
margin-bottom: 25px;
}
.market-report ul li:last-child{
margin-bottom: 0;
}
.market-report ul li h3 {
font-size: 22px;
color: var(--white-fix);
}
.market-report ul li p{
color: var(--white-fix);
}
.market-report ul li h3 i{
position: absolute;
color: var(--primary-color);
left: 0;
margin-top: 3px;
}
.chart-img img{
width: 100%;
} .team-section.team-about {
background-color: var(--white);
}
.team-section.team-about .section-title h2, .team-section.team-about .section-title p{
color: var(--dark);
} .faq-section.about-faq{
background-color: var(--dark2-fix);
padding: 100px 0 100px;
position: relative;
z-index: 1;
}
.faq-section.about-faq::before{
content: '';
position: absolute;
inset: 0;
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape3.png);
background-position: left top;
background-repeat: no-repeat;
z-index: -1;
}
.faq-section.about-faq .section-title h2, .faq-section.about-faq .section-title p{
color: var(--white-fix);
}
.faq-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.faq-section:hover .section-title .sub-title {
transform: translateY(-80px);
} .achievement-section{
padding: 100px 0 100px;
background-position: center center;
background-repeat: no-repeat;
position: relative;
z-index: 1;
}
.achievement-section::before{
content: '';
position: absolute;
inset: 0;
background-color: var(--bg-color);
opacity: 0.8;
z-index: -1;
}
.achivement-area{
background-color: var(--primary-color);
border-radius: 5px;
padding: 25px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
margin-bottom: 25px;
}
.achivement-area::before{
content: '';
position: absolute;
background-color: var(--dark-fix);
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
width: 60%;
right: 10px;
z-index: -1;
bottom: 0;
top: 10px;
}
.achive-icon {
font-size: 40px;
color: var(--white-fix);
}
.achive-content h3 {
color: var(--white-fix);
font-size: 45px;
font-weight: 700;
}
.achive-content span{
color: var(--white-fix);
}
.achivement-area .achive {
text-align: center;
}
.achive-image img{
width: 275px;
height: 275px;
object-fit: cover;
border-radius: 10px;
}
@property --a { syntax: "<angle>";
initial-value: 45deg;
inherits: true;
}
@property --r {
syntax: "<angle>";
initial-value: 5deg; inherits: true;
}
@property --p { syntax: "<percentage>";
initial-value: 0%;
inherits: true;
}
.achive-image img {
--c: var(--bg-color); aspect-ratio: 1;
border-radius: 25px;
border: 4px solid #0000; padding: 10px; background: conic-gradient(
from var(--a),
var(--primary-color) calc(30% - var(--p)),
var(--c) calc(50% - var(--p)) calc(50% + var(--p)),
var(--primary-color) calc(70% + var(--p))
)
border-box;
--g: linear-gradient(#000 0 0);
-webkit-mask: var(--g), var(--g) padding-box,
conic-gradient(
from var(--a),
#000d calc(30% - var(--p)),
#000 calc(50% - var(--p)) calc(50% + var(--p)),
#000d calc(70% + var(--p))
)
content-box;
-webkit-mask-composite: xor;
mask-composite: exclude;
--_t: perspective(450px); animation: 4s linear infinite;
animation-name: a, r;
transition: --p 0.5s, --r 0.4s;
cursor: pointer;
}
.achive-image img:hover {
--r: 0deg;
animation-play-state: paused;
}
@keyframes a {
to {
--a: 405deg;
}
}
@keyframes r {
0%,
100% {
transform: var(--_t) rotate3d(1, 1, 0, var(--r));
}
12.5% {
transform: var(--_t) rotate3d(0, 1, 0, var(--r));
}
25% {
transform: var(--_t) rotate3d(-1, 1, 0, var(--r));
}
37.5% {
transform: var(--_t) rotate3d(-1, 0, 0, var(--r));
}
50% {
transform: var(--_t) rotate3d(-1, -1, 0, var(--r));
}
62.5% {
transform: var(--_t) rotate3d(0, -1, 0, var(--r));
}
75% {
transform: var(--_t) rotate3d(1, -1, 0, var(--r));
}
87.5% {
transform: var(--_t) rotate3d(1, 0, 0, var(--r));
}
}
.achive-text {
display: flex;
align-items: center;
}
.achive-text p {
margin: 0;
font-size: 32px;
color: var(--dark);
}  .hiring-section{
padding: 100px 0 100px;
background-color: var(--white);
}
.hiring-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.hiring-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.hiring-table table{
background-color: var(--white);
border: 1px solid rgba(120 120 120 / 20%);
}
.hiring-section .hiring-table {
width: 100%;
overflow: scroll;
}
.hiring-table table th,
.hiring-table table td{
padding: 10px 15px;
font-weight: 500;
}
.hiring-table table td{
color: var(--dark);
}
.hiring-table table thead tr{
background-color: var(--primary-color);
color: var(--white-fix);
}
.hiring-table table tr:nth-child(even){
background-color: var(--bg-color);
}
.hiring-table table tbody tr td:last-child,
.hiring-table table thead tr th:last-child{
text-align: right;
}
.hiring2-section{
padding: 100px 0 75px;
background-color: var(--white);
}
.hiring2-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.hiring2-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.hiring2-section .post-hiring{
padding: 42px 25px 25px;
margin-bottom: 25px;
border-radius: 10px;
background-color: var(--dark2-fix);
text-align: center;
position: relative;
z-index: 1;
transition: 0.65s;
}
.hiring2-section .post-hiring::before{
content: '';
position: absolute;
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape6.png);
z-index: -1;
background-repeat: no-repeat;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
transform: rotate(180deg);
}
.hiring2-section .post-hiring:hover,
.hiring2-section .post-hiring:focus,
.hiring2-section .post-hiring.active{
background-color: var(--primary-color);
}
.post-hiring span.timing {
color: var(--white-fix);
background-color: var(--primary-color);
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
position: absolute;
left: 50%;
top: -17px;
transform: translate(-50%, 0px);
transition: 0.65s;
}
.hiring2-section .post-hiring:hover span.timing,
.hiring2-section .post-hiring:focus span.timing,
.hiring2-section .post-hiring.active span.timing{
background-color: var(--dark-fix);
}
.hiring2-section .post-hiring:hover .main-btn,
.hiring2-section .post-hiring:focus .main-btn,
.hiring2-section .post-hiring.active .main-btn{
background-color: var(--white);
color: var(--dark);
}
.hiring2-section .post-hiring .main-btn::before{
border-color: var(--primary-color);
}
.post-hiring h3.job-title {
color: var(--white-fix);
}
.post-hiring > p{
color: var(--white-fix);
border-bottom: 1px solid rgba(120 120 120 / 20%);
padding-bottom: 15px;
}
.job-location,.salary {
color: var(--white-fix);
text-transform: capitalize;
font-weight: 500;
margin-bottom: 15px;
}
.job-location > span,
.salary > span{
font-weight: 400;
margin-left: 5px;
} .skill-section{
padding: 100px 0 75px;
background-color: var(--dark-fix);
position: relative;
}
.skill-section:hover .section-title h2 {
transform: scale(1) translateY(32px);
opacity: 1;
}
.skill-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.skill-section .section-title {
text-align: left;
margin-bottom: 0;
}
.skill-section .section-title span::before:not(h2>span){
left: 15px;
}
.skill-section .section-title h2{
color: var(--white-fix);
}
.skill-content,.skill-image{
margin-bottom: 25px;
} 
.skill-content h2{
font-weight: 700;
font-size: 35px;
color: var(--white-fix);
}
.skill-content>p{
color: var(--white-fix);
}
.progress-bars .progress-item{
margin-bottom: 25px;
}
.progress-bar{
background-color: var(--primary-color);
border-radius: 10px;
position: relative;
overflow: visible;
}
.progress-bar {
width: 0;
animation: progress-animation 3s ease-out forwards;
}
@keyframes progress-animation {
to {
width: var(--progress-value, 0%);
}
}
.progress {
border: 1px solid var(--primary-color);
border-radius: 10px;
padding: 2px;
background-color: transparent;
overflow: visible;
transition-duration: 3s;
}
.progress-item h3 {
font-size: 22px;
color: var(--white-fix);
}
.progress-bar span {
position: absolute;
width: 30px;
height: 30px;
display: inline-block;
background-color: var(--primary-color);
border-radius: 100%;
right: 0;
line-height: 30px;
color: var(--white-fix);
}
.skill-video-btn a {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
text-align: center;
background: var(--primary-color);
color: var(--white-fix);
border-radius: 100%;
position: relative;
z-index: 1;
}
.skill-video-btn a::before{
content: '';
position: absolute;
inset: 0;
border-radius: 100%;
background-color: var(--primary-color);
opacity: 0.5;
animation: ripp 2s linear infinite;
z-index: -1;
}
.skill-video-btn span {
display: inline-block;
color: var(--white-fix);
margin-left: 15px;
text-decoration: underline;
}
@keyframes ripp {
from{
transform: scale(1);
}
to{
transform: scale(1.5);
opacity: 0;
}
}
.skill-image img {
max-width: 500px;
display: block;
margin-left: auto;
border-radius: 22px;
width: 100%;
}
.skill-image{
position: relative;
z-index: 1;
}
.skill-image::before{
content: '';
width: 200px;
height: 250px;
border-radius: 20px;
background-color: var(--primary-color);
bottom: -15px;
right: -15px;
position: absolute;
z-index: -1;
}
.skill-image .top-img {
top: -15px;
left: 0;
position: absolute;
}
.skill-image .top-img img{
width: 210px;
height: 210px;
object-fit: cover;
} .timeline-section{
padding: 100px 0 75px;
background-color: var(--bg-color);
}
.timeline-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.timeline-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.timeline-inner{
position: relative; 
}
.timeline-inner::before{
content: '';
position: absolute;
left: 50%;
transform: translate(-50%,0);
height: 100%;
bottom: 0;
border-left: 4px dashed var(--primary-color);
}
.timeline-inner .timeline{
border: none;
background-color: transparent;
}
.timeline-inner .timeline .card-body{
background-color: var(--dark);
border-radius: 5px;
position: relative;
z-index: 1;
padding: 25px;
transition: 0.65s;
}
.timeline-inner .timeline .card-body::before{
content: '';
position: absolute;
inset: 0;
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape4.png);
z-index: -1;
opacity: 0.1;
background-size: cover;
background-position: center center;
}
.timeline-inner .timeline .card-body:hover{
background-color: var(--primary-color);
}
.timeline-inner .timeline .card-body:hover span:not(.timeline-count){
color: var(--white-fix);
}
.timeline-inner .timeline .card-body:hover .card-title{
color: var(--white-fix);
}
.timeline-inner .timeline .card-body:hover .card-text{
color: var(--white-fix);
}
.timeline-inner .timeline .card-body>span{
color: var(--primary-color);
font-size: 26px;
font-weight: 600;
transition: 0.65s;
}
.timeline-inner .timeline .card-body>span>span{
color: var(--white);
font-size: 16px;
font-weight: 500;
}
.timeline-inner .timeline .card-title{
color: var(--primary-color);
font-size: 26px;
transition: 0.65s;
}
.timeline-inner .timeline .card-text{
color: var(--white);
transition: 0.65s;
}
.timeline-inner .left .timeline::before{
width: 100px;
content: '';
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
right: -155px;
border-bottom: 1px dashed var(--primary-color);
}
.timeline-inner .right .timeline::before{
width: 100px;
content: '';
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: -55px;
border-bottom: 1px dashed var(--primary-color);
}
.timeline-inner .left .timeline::after {
width: 30px;
height: 30px;
border-radius: 100%;
background-color: var(--dark);
content: '';
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
right: -29.2%;
transition: 0.65s;
}
.timeline-inner .right .timeline::after {
width: 30px;
height: 30px;
border-radius: 100%;
background-color: var(--dark);
content: '';
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: -23.5%;
transition: 0.65s;
}
.timeline-inner .timeline span.timeline-count {
position: absolute;
top: 50%;
transform: translate(0,-50%);
color: var(--dark);
}
.timeline-inner .timeline span.timeline-count.count-odd {
right: -34%;
}
.timeline-inner .timeline span.timeline-count.count-even {
left: -34%;
}
.timeline-inner .timeline:hover::after,
.timeline-inner .timeline:focus::after{ background-color: var(--primary-color);
animation: oat 2s linear infinite;
}
@keyframes oat {
from{
outline: 0;
}
to{
outline: thick double var(--primary-color);
}
}  .funfact-about{
padding: 100px 0 75px;
background-color: var(--white);
}
.funfact-about .funfact-item{
position: relative;
border-radius: 5px;
padding: 20px;
background-color: var(--bg-color);
margin-bottom: 25px;
}
.funfact-about .funfact-item h3{
font-weight: 700;
font-size: 45px;
color: var(--dark);
margin: 0;
}
.funfact-about .funfact-item span:not(h3 span){
color: var(--primary-color);
font-size: 20px;
font-weight: 600;
}
.funfact-about .funfact-item p{
color: var(--dark);
}
.funfact-item .icon {
position: absolute;
top: 5px;
right: 15px;
font-size: 45px;
color: var(--primary-color);
}
.funfact-about .funfact-item:hover .icon i{
animation: flipInX 1s;
}  .sponsor-about{
background-color: var(--dark-fix);
}
.sponsor-about .sponsor{
height: 150px;
line-height: 150px;
position: relative;
text-align: center;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.sponsor-about .sponsor::after {
position: absolute;
content: '';
inset: -19px;
background-color: var(--primary-color);
z-index: -1;
clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
opacity: 0;
visibility: hidden;
transition: 0.65s;
transform-origin: center;
transform: scale(1.1);
background-image: url(//itwebsolution.net/wp-content/themes/accron/assets/images/shapes/shape2.png);
background-blend-mode: multiply;
display: block;
}
.sponsor-about .sponsor:hover::after{
visibility: visible;
opacity: 1;
transform-origin: center;
transform: scale(1);
}
.sponsor-about .sponsor-img h5 {
margin: 0;
line-height: 150px;
}  .work-process{
padding: 100px 0;
background-color: var(--bg-color);
}
.work-process:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.work-process:hover .section-title .sub-title {
transform: translateY(-80px);
}
.process-img{
text-align: center;
position: relative;
margin-bottom: 25px;
}
.process-img img{
width: 230px;
height: 230px;
object-fit: cover;
display: inline-block;
border: 6px solid var(--white);
border-radius: 100%;
transition: 0.65s;
}
.process-content{
text-align: center;
}
.process-count {
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
background-color: var(--dark);
line-height: 40px;
color: var(--white);
top: 10px;
transition: 0.65s;
right: 60px;
font-weight: 500;
}
.process:hover .process-img img,
.process:focus .process-img img{
border-color: var(--primary-color);
}
.process:hover .process-count,
.process:focus .process-count{
background-color: var(--white);
color: var(--primary-color);
} .gallery-section{
padding: 100px 0 75px;
background-color: var(--white);
}
.gallery-section .gallery-item{
margin-bottom: 25px;
}
.gallery-section .gallery-item .card{
border-radius: 0;
border: none;
position: relative;
}
.gallery-section .gallery-item .card::before{
content: '';
position: absolute;
inset: 0;
border: 20px solid var(--dark);
opacity: 0.6;
}
.gallery-section .gallery-item .card::after{
content: '';
position: absolute;
border: 2px dashed var(--white-fix);
opacity: 1;
}
.gallery-section .gallery-item .card::after{
inset: 0px;
visibility: hidden;
}
.gallery-section .gallery-item .card:hover::before{
border-radius: 5px;
}
.gallery-section .gallery-item .card:hover::after{
animation: breffect2 0.5s linear;
visibility: visible;
inset: 18px;
}
@keyframes breffect2 {
from{
inset: 0px;
}
to{
inset: 18px;
}
}
.gallery-section .gallery-item .card-body{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
text-align: center;
z-index: 1;
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
transition: 0.65s;
}
.gallery-section .gallery-item .card:hover .card-body{
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.gallery-section .gallery-item .card-body .gallery-title{
position: relative;
display: inline-block;
margin: 0;
color: var(--white-fix);
padding: 25px 20px;
font-size: 22px;
z-index: 1;
}
.gallery-section .gallery-item .card-body .gallery-title::before,
.gallery-section .gallery-item .card-body .gallery-title::after{
content: '';
position: absolute;
inset: 0;
border-radius: 1px;
background-color: var(--primary-color);
opacity: 0.6;
z-index: -1;
}
.gallery-section .gallery-item .card-body .gallery-title::after{
animation: titleffect2 2s linear infinite;
}
@keyframes titleffect1 {
0%{
transform: translate(10px, 10px);
}
50%{
transform: translate(0px, 0px);
}
100%{
transform: translate(10px, 10px);
}
}
@keyframes titleffect2 {
0%{
transform: translate(-10px, -10px);
}
50%{
transform: translate(10px, 10px);
}
100%{
transform: translate(-10px, -10px);
}
}  .my-account{
padding: 100px 0 75px;
background-color: var(--white);
}
.signpageforms{
padding: 25px;
background-color: var(--white);
border-radius: 10px;
margin-bottom: 25px;
}
.signpageforms h2{
text-align: center;
color: var(--dark);
margin-bottom: 25px;
font-weight: 700;
}
.login-via_accounts ul li a {
width: 40px;
height: 40px;
display: inline-block;
text-decoration: none;
line-height: 37px;
border: 1px solid rgba(120 120 120 / 20%);
text-align: center;
}
.login-via_accounts ul li a img{
width: 24px;
height: 24px;
object-fit: cover;
}
.login-via_accounts ul{
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: center;
margin-bottom: 25px;   
}
.login-via_accounts ul li:not(:last-child){
margin-right: 10px;
}
.loginform-inner > .text-via_email{
font-weight: 500;
color: var(--dark);
display: block;
text-align: center;
position: relative;
z-index: 1;
margin-bottom: 25px;
}
.loginform-inner > .text-via_email span{
display: inline-block;
position: relative;
background-color: var(--white);
z-index: 1;
padding: 0 8px;
}
.loginform-inner > .text-via_email::before{
content: '';
position: absolute;
width: 100%;
height: 1px;
left: 0;
top: 50%;
transform: translate(0%,-50%);
background-color: rgba(120 120 120 / 20% );
z-index: -1;
}   
.woocommerce-form-login input[type='text'],
.woocommerce-form-login input[type='password']{
width: 100%;
padding: 15px;
outline: none;
box-shadow: none;
border: 1px solid rgba(120 120 120 / 20%);
color: var(--dark);
background: transparent;
}
.woocommerce-form-login .woocommerce-form-row{
position: relative;
margin-bottom: 30px;
}
.woocommerce-form-row label {
font-weight: 500;
color: var(--dark);
position: absolute;
left: 20px;
top: -12px;
background-color: var(--white);
padding: 0 5px;
}
.woocommerce-form-login__rememberme span{
font-weight: 500;
color: var(--dark);
}
.woocommerce-form-login__submit {
width: 100%;
padding: 15px;
border-radius: 0;
background-color: var(--dark)!important;
color: var(--white)!important;
border: none;
outline: none;
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 25px;
transition: 0.65s;
}
.woocommerce-form-login__submit:hover,
.woocommerce-form-login__submit:focus{
background-color: var(--primary-color)!important;
color: var(--white-fix)!important;
}  .faq-section{
padding: 100px 0 100px;
background-color: var(--white);
}
.faq-space{
height: 350px;
overflow: auto;
}
.faq-section .nav-pills .nav-link {
background-color: var(--dark);
border-radius: 0;
padding: 15px;
color: var(--white);
text-decoration: none;
}
.faq-section .nav-pills .nav-link.active:not(.show .nav-link){
background-color: var(--primary-color);
color: var(--white-fix);
}
.faq-section .nav-pills.show .nav-link {
background-color: var(--bg-color);
color: var(--dark);
font-weight: 500;
}
.category-faq{
margin-bottom: 15px;
}
.category-faq > a::after{
content: '\f067';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
float: right;
}
.faq-space .accordion-flush .accordion-header .accordion-button{
border: 1px solid var(--primary-color);
border-radius: 5px;
font-weight: 500;
background: none;
}
.faq-space .accordion-flush .accordion-header .accordion-button:focus{
box-shadow: none;
}
.about-faq .accordion h4{
color: var(--white-fix);
}
.accordion h4{
color: var(--dark);
}
.faq-space .accordion-item {
border: none;
margin-bottom: 15px;
}
.about-faq .faq-space .accordion-item {
background: none;
}
.about-faq .faq-space .accordion-button,.about-faq .faq-space .accordion-body{
color: var(--white-fix);
}
.faq-space .accordion-button::after{
content: "\f078";
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: var(--primary-color);
border-radius: 5px;
color: var(--white-fix);
background-image: none;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.faq-space .accordion-body {
border: 1px solid rgba(120 120 120 / 20%);
margin-top: 15px;
}  iframe {
width: 100%;
height: 100%;
}
.cta-play-btn.map a{
width: unset;
height: unset;
border: none;
line-height: unset;
display: flex;
text-decoration: none;
align-items: center;
justify-content: center;
flex-direction: column;
line-height: 1.5;
transform: translateY(35px);
font-weight: 700;
font-size: 18px;
color: var(--white-fix);
}
.cta-play-btn.map a i{
font-size: 40px;
margin-bottom: 10px;
}
.cta-play-btn.map a span{
font-size: 16px;
color: var(--dark-fix);
}
.contact-section{
padding: 100px 0 75px;
background-color: var(--bg-color);
}
.contact-section:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.contact-section:hover .section-title .sub-title {
transform: translateY(-80px);
}
.contactus-widget .widget-contact .contact-area{
background-color: var(--dark);
padding: 15px;
border-radius: 4px;
margin-bottom: 25px;
display: flex;
position: relative;
overflow: hidden;
transition: 0.65s;
}
.contactus-widget .widget-contact .contact-area:hover,
.contactus-widget .widget-contact .contact-area:focus-within{
background-color: var(--primary-color);
}
.contactus-widget .widget-contact .contact-area::after,
.contactus-widget .widget-contact .contact-area::before{
content: '';
position: absolute;
width: 90px;
height: 90px;
border-radius: 10px;
background-color: var(--primary-color);
right: -40px;
transform: rotate(45deg);
transition: 0.65s;
}
.contactus-widget .widget-contact .contact-area::before{
right: -30px;
opacity: 0.5;
}
.contactus-widget .widget-contact .contact-area:hover::before,
.contactus-widget .widget-contact .contact-area:focus-within::before,
.contactus-widget .widget-contact .contact-area:hover::after,
.contactus-widget .widget-contact .contact-area:focus-within::after{
transform: rotate(225deg);
background-color: var(--dark);
}
.contactus-widget .widget-contact .contact-icon {
width: 60px;
height: 60px;
border-radius: 100%;
line-height: 60px;
text-align: center;
border: 1px solid var(--primary-color);
color: var(--primary-color);
font-size: 25px;
margin-right: 15px;
transition: 0.65s;
}
.contactus-widget .widget-contact .contact-info .text{
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.contactus-widget .widget-contact .contact-info .text span{
color: var(--white);
font-size: 22px;
font-weight: 600;
}
.contactus-widget .widget-contact .contact-info .text a{
text-decoration: none;
color: var(--white);
}
.contactus-widget .widget-contact .contact-area:hover .contact-icon,
.contactus-widget .widget-contact .contact-area:focus-within .contact-icon{
background-color: var(--white-fix);
color: var(--primary-color);
}
.contactus-widget .widget-contact .contact-area:hover .contact-info .text span,
.contactus-widget .widget-contact .contact-area:focus-within .contact-info .text span,
.contactus-widget .widget-contact .contact-area:hover .contact-info .text a,
.contactus-widget .widget-contact .contact-area:focus-within .contact-info .text a{
color: var(--white-fix);
}
.send-your-enquiry .wpcf7-form p:nth-child(2){
width: 49%;
float: left;
}
.send-your-enquiry .wpcf7-form p:nth-child(3){
width: 49%;
float: right;
}
.send-your-enquiry .wpcf7-form p input[type='text'],
.send-your-enquiry .wpcf7-form p input[type='email'],
.send-your-enquiry .wpcf7-form p .wpcf7-textarea{
width: 100%;
outline: none;
box-shadow: none;
padding: 10px 15px;
color: var(--dark);
background-color: var(--white);
border: 1px solid var(--primary-color);
border-radius: 3px;
}
.send-your-enquiry .wpcf7-form p label{
width: 100%;
font-weight: 500;
color: var(--dark);
}
.send-your-enquiry .wpcf7-form p input[type='submit']{
background-color: var(--primary-color);
border: none;
outline: none;
color: var(--white-fix);
padding: 10px 15px;
border-radius: 4px;
} .office-address{
padding: 100px 0;
overflow: hidden;
}
.office-address:hover .section-title h2 {
transform: scale(1.3) translateY(32px);
opacity: 1;
}
.office-address:hover .section-title .sub-title {
transform: translateY(-80px);
}
.country-office {
margin-top: 35px;
}
.country-image {
text-align: center;
position: relative; width: 200px;
margin: 0 auto;
border-radius: 100%;
transition-delay: 100ms;
}
.country-image::before{
content: '';
position: absolute;
background-color: var(--dark);
opacity: 0.9;
transition: 0.3s;
height: 100px;
width: 200px;
border-radius: 10rem 10rem 0 0;
transform: scaleY(-1);
bottom: 0;
left: 0;
}
.country-image::after{
content: '';
position: absolute;
inset: 0;
border: 4px solid var(--primary-color);
border-radius: 100%;
}
.country-image>img{
max-width: 200px;
height: 200px;
border-radius: 100%;
margin: 0 auto;
border: 4px solid var(--primary-color);
}
.country-content .flag-image img{
display: inline-block;
width: 70px;
height: 70px;
border-radius: 100%;
border: 3px solid var(--primary-color);
}
.flag-image i {
width: 70px;
height: 70px;
line-height: 70px;
background-color: var(--dark);
border-radius: 100%;
font-size: 26px;
color: var(--primary-color);
border: 3px solid var(--primary-color);
}
.office3 .country-image {
width: 200px;
height: 200px;
background-color: var(--primary-color);
}
.country-content {
text-align: center;
position: absolute;
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 35px;
display: flex;
flex-direction: column;
justify-content: center;
transform: translateY(40px);
z-index: 1;
transition: 0.3s;
}
.country-content .flag-image{
margin-bottom: 10px;
}
.country-text h4 a{
text-decoration: none;
font-size: 18px;
font-weight: 600;
color: var(--white);
}
.country-text p{
color: var(--white);
visibility: hidden;
}
.country-image:hover::before,
.country-image:focus::before{
height: 200px;
border-radius: 10rem;
}
.country-image:hover .country-content:not(.office3 .country-content) ,
.country-image:focus .country-content:not(.office3 .country-content) {
transform: translateY(-35px);
}
.country-image:hover .country-text p:not(.office3 .country-text p)  ,
.country-image:focus .country-text p:not(.office3 .country-text p) {
visibility: visible;
transition: 0.3s;
}
@media(min-width: 992px){
.office-address .row{
perspective: 10px;
transform: perspective(300px) rotateX(20deg);
will-change: perspective;
perspective-origin: center center;
transition: all 1.3s ease-out;
justify-content: center;
transform-style: preserve-3d;
}
.office-address .row:hover {
perspective: 1000px;
transition: all 1.3s ease-in;
transform: perspective(10000px) rotateX(0deg);
}
.office1,.office2,.office4,.office5{
transform-style: preserve-3d;
opacity: 0;
transition: all 0.3s ease;
transition-delay: 1s;
position: relative;
cursor: pointer;
}
.office1 {
transform: translateZ(-50px) ;
}
.office2 {
transform: translateZ(-25px);
}
.office3 {
opacity: 1;
}
.office4 {
transform: translateZ(-25px) ;
}
.office5 {
transform:  translateZ(-50px);
}
.office-address .row:hover > div {
opacity: 1;
transition-delay: 0s;
}
} .social_info{
position: relative;
padding: 100px 0;
z-index: 1;
overflow: hidden;
}
.social_info::before{
content: '';
position: absolute;
inset: 0;
background-color: var(--dark-fix);
opacity: 0.7;
z-index: -1;
}
.h_100{
height: 100px;
}
.social_area {
position: relative;
}
.social_area.left .bar-icon,.social_area.right .bar-icon{
width: 90px;
height: 90px;
line-height: 87px;
text-align: center;
border-radius: 100%;
border: 5px solid var(--white-fix);
font-size: 30px;
background-color: var(--primary-color);
color: var(--white-fix);
position: absolute;
right: 0;
z-index: 2;
top: 50%;
transform: translate(0px, -50%);
}
.social_area.right .bar-icon{
left: 0;
}
.social_area.left .social_text,.social_area.right .social_text{
height: 120px;
background-color: var(--primary-color);
padding: 0 90px 0 20px;
position: relative;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
z-index: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.social_info .social_area.right .social_text{
padding: 0 20px 0 90px;
}
.social_area.left .social_text::before,.social_area.right .social_text::before{
content: '';
position: absolute;
inset: 0;
right: 14px;
background: var(--white-fix);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
z-index: -1;
}
.social_area.right .social_text::before{
left: 14px;
right: 0;
}
.social_area.left .social_text::after, .social_area.right .social_text::after{
content: '';
position: absolute;
inset: 3px;
right: 19px;
left: 0;
background: var(--dark-fix);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
z-index: -1;
}
.social_area.right .social_text::after{
left: 19px;
right: 0;
}
.social_info .social_area.right .social_text,
.social_info .social_area.right .social_text::after,
.social_info .social_area.right .social_text::before{
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
}
.social_area .social_text h5{
color: var(--white-fix);
text-decoration: none;
font-size: 26px;
letter-spacing: 2px;
margin-bottom: 0;
}
.social_icons, .contact_icons {
height: 100%;
}
.social_icons ul, .contact_icons ul{
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
}
.social_icons ul li:not(:last-child),  .contact_icons ul li:not(:last-child){
margin-right: 25px;
}
.social_icons ul li a, .contact_icons ul li a{
display: inline-block;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
border-radius: 100%;
background-color: var(--primary-color);
color: var(--white-fix);
font-size: 35px;
}  .section-404,.section-500{
padding: 100px 0 100px;
background-color: var(--white);
}
.section-404 .card-404,.section-500 .card-500 {
text-align: center;
}
.card-404 h2,.card-500 h2{
font-size: 220px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
line-height: 1;
text-shadow: 5px 5px var(--bg-color);
}
.card-404 h2 i {
font-size: 180px;
margin: 0 10px;
color: var(--dark);
animation: moveIcon 10s linear infinite;
}
.card-404 .not-found,.card-500 .not-found{
font-size: 40px;
font-weight: 700;
color: var(--dark);
}
@keyframes moveIcon {
0%{
transform: scale(1);
}
50%{
transform: scale(0.8) rotate(360deg);
}
100%{
transform: scale(1) rotate(-360deg);
}
} .system_section{
padding: 100px 0 100px;
background-color: var(--white);
}
.system_section h2 {
font-size: 30px;
font-weight: 600;
color: var(--dark);
}
.system_section p{
color: var(--dark);
}
.system_section form {
width: 100%;
background-color: var(--bg-color);
padding: 25px;
}
.system_section form input[type='password'],
.system_section form input[type='email']{
width: 100%;
border: none;
background-color: var(--white);
color: var(--dark);
padding: 10px 15px;
margin-bottom: 25px;
outline: none;
}
.system_section form input[type='submit']{
width: 100%;
border: none;
background-color: var(--primary-color);
color: var(--white-fix);
padding: 10px 15px;
outline: none;
}
.system_section form input[type='text']{
flex: 1;
border: none;
background-color: var(--white);
color: var(--dark);
padding: 10px 15px;
outline: none;
}
.system_section form button{
padding: 10px 15px;
border: none;
outline: none;
background-color: var(--primary-color);
color: var(--white-fix);
}
.system_section form > div{
position: relative;
display: flex;
}
.system_section form p{
display: block;
font-weight: 500;
color: var(--dark);
}
.system_section form > label{
display: block;
margin-bottom: 15px;
font-weight: 500;
}
.system_section form label{
display: block;
}
.email-confirm {
text-align: center;
}
.email-confirm .icon {
font-size: 60px;
color: var(--primary-color);
}
.email-confirm a{
text-decoration: none;
color: var(--dark);
font-size: 26px;
font-weight: 700;
}
.system_section .bottom-line{
margin-top: 15px;
}  div.product-single,
section.product-single{
padding: 100px 0 75px;
background: var(--white);
border: none;
}
.wc-tabs,
.a-unordered-list {
padding: 0;
list-style: none;
}
.wc-tabs li {
display: inline-block;
margin: 0 5px;
}
.wc-tabs li a {
text-decoration: none;
font-size: 22px;
font-weight: 600;
color: var(--dark);
padding: 5px 10px;
display: inline-block;
transition: 0.65s;
}
.wc-tabs li.active a {
border-bottom: 1px solid var(--primary-color);
color: var(--primary-color);
}
.wc-tabs li a:hover a,
.wc-tabs li a:focus-within a {
color: var(--primary-color);
}
.woocommerce-tabs .tabs.wc-tabs{
text-align: center;
border-bottom: 1px solid rgba(120 120 120 / 20%);;
}
.faq-section.product-faq{
padding: 15px;
border-radius: 10px;
background-color: var(--bg-color);
}
.woocommerce-Reviews .comment-form .comment-form-comment textarea {
width: 100%;
outline: none;
border: none;
border-radius: 5px;
background-color: var(--white);
}
.woocommerce-Tabs-panel{
background-color: var(--bg-color);
padding: 15px;
border-radius: 10px;
}
.woocommerce-Tabs-panel h2 {
font-weight: 600;
color: var(--dark);
}
.woocommerce-Tabs-panel ul li span{
color: var(--dark)
}
.product_video_img {
width: 100px;
height: 100px;
}
.expand-button-hidden {
position: absolute;
top: 5px;
right: 10px;
}
#content div.product div.images,
div.product div.images,
#content div.product div.images,
div.product div.images {
float: left;
width: 48%;
}
.product-single div.product div.images {
margin-bottom: 2em;
}
.product-single #content div.product div.summary {
padding: 0 30px;
margin-bottom: 3em;
}
#content div.product div.summary,
div.product div.summary,
#content div.product div.summary,
div.product div.summary {
float: right;
width: 48%;
clear: none;
padding: 20px;
}
.product-single .add_to_cart_button,
.product-single div.product {
overflow: visible !important;
}
.product-single div.product {
margin-bottom: 0;
position: relative;
}
.product-single div.product div.images .woocommerce-product-gallery__image:nth-child(1) {
padding: 30px;
background: var(--bg-color);
margin-bottom: 25px;
}
.woocommerce-product-gallery__image {
position: relative;
}
iframe {
max-width: 100%;
}
.storely_magnifier_gallery {
list-style: none;
padding: 0;
margin-top: 30px;
text-align: center;
}
.product-single .owl-carousel .owl-item img {
display: inline-block;
}
.product-single .owl-prev,
.product-single .owl-next {
width: 20px;
height: 20px;
font-size: 10px;
}
.product-single #product-32 {
width: 100%;
}
.product-single .woocommerce-tabs {
clear: both;
margin-bottom: 60px;
}
.woocommerce-product-gallery__image .woocommerce-main-image img {
max-width: 350px;
height: 350px;
margin: 0 auto;
display: block;
object-fit: cover;
}
a.storely_pv-popup {
bottom: 10px;
font-size: 25px;
line-height: 0;
opacity: 1;
outline: medium none !important;
padding: 15px 0;
position: absolute;
right: 13px;
text-decoration: none;
z-index: 10;
color: #444;
display: none;
}
.product-single .sale-ribbon {
position: absolute;
background: var(--primary-color);
top: 10px;
left: 20px;
padding: 5px;
color: #fff;
z-index: 10;
}
.entry-summary h1 {
font-size: 36px;
font-weight: 700;
color: var(--secondary-color);
}
.product-single .price .woocommerce-Price-amount {
color: var(--secondary-color);
font-weight: 500;
}
.thumbnails .accron_magnifier_gallery{
padding: 0;
margin: 0;
list-style: none;
}
.thumbnails .accron_magnifier_gallery li{
display: inline-block;
background-color: var(--bg-color);
padding: 15px;
}
.thumbnails .accron_magnifier_gallery li img{
max-width: 115px;
height: 115px;
object-fit: contain;
}
.cart .quantity {
margin-bottom: 20px;
}
.cart .quantity label {
color: var(--secondary-color);
font-size: 16px;
font-weight: 600;
margin-right: 10px;
}
.cart .quantity input {
width: 50px;
outline: none;
border-radius: 0;
border: 1px solid #d8d8d8;
padding: 5px;
}
.product-single .cart button {
background: var(--dark);
color: var(--white);
border: none;
padding: 7px 15px;
float: left;
margin-right: 10px;
transition: 0.65s;
border-radius: 5px;
}
.product-single .cart button:hover,
.product-single .cart button:focus-within {
background: var(--primary-color);
color: var(--white-fix);
}
.product-single .cart .need-help {
background: var(--primary-color);
border: none;
border-radius: 0;
padding: 7px 15px;
margin: 0;
}
.product-single .text .yith-wcwl-add-button .add_to_wishlist {
border-radius: 3px;
background-color: transparent;
color: var(--primary-color);
}
.product-single .text .yith-wcwl-add-button .add_to_wishlist:hover,
.product-single .text .yith-wcwl-add-button .add_to_wishlist:focus {
color: var(--white-fix);
background: var(--primary-color);
}
.product_meta .posted_in {
font-size: 16px;
color: var(--secondary-color);
font-weight: 600;
}
.thumbnails .storely_magnifier_gallery {
margin: 0;
padding: 0;
list-style: none;
display: none;
}
.product_meta {
margin-bottom: 15px;
}
.product_meta .posted_in a {
text-decoration: none;
color: var(--primary-color);
}
.product-single .widget_social_widget h6 {
color: var(--secondary-color);
font-weight: 600;
}
.product-single .widget_social_widget ul{
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.product-single .widget_social_widget ul li a {
width: 40px;
height: 40px;
background: var(--dark);
box-shadow: 0 0 6px -3px var(--primary-color);
display: inline-block;
text-align: center;
line-height: 40px;
border-radius: 100%;
margin-right: 10px;
color: var(--white);
transition: 0.65s;
}
.product-single .widget_social_widget ul li a:hover,
.product-single .widget_social_widget ul li a:focus{
background: var(--primary-color);
color: var(--white-fix);
}
.product-single #single-product {
background: transparent;
}
.product-single .wishlist-head {
border-bottom: 1px solid #000; padding: 0 0 30px;
}
.product-single .wishlist-head h5 {
margin: 0;
}
.product-single .storely-woowishlist-item:not(.wishlist-head) {
padding: 30px 0;
border-bottom: 1px solid #d8d8d8;
}
.product-single .storely-woowishlist-item {
display: flex;
justify-content: space-around;
align-items: center;
}
.product-single span.dashicons.dashicons-dismiss:before {
content: "\f00d";
font-family: 'FontAwesome';
width: 20px;
height: 20px;
display: block;
text-align: center;
line-height: 19px;
border-radius: 30px;
color: var(--primary-color);
border: 1px solid var(--primary-color);
transition: 0.65s;
font-size: 12px;
}
.product-single span.dashicons.dashicons-dismiss:hover:before {
background: var(--primary-color);
color: #fff;
}
.product-single .storely-woowishlist-item .add_to_cart_button {
background: var(--primary-color);
color: #fff;
text-decoration: none;
padding: 5px 10px;
font-weight: 500;
transition: 0.65s;
}
.product-single .storely-woowishlist-item .add_to_cart_button:hover {
background: var(--secondary-color);
}
.product-single .storely-woocomerce-list__product-title a {
color: var(--primary-color);
transition: 0.65s;
}
.product-single .storely-woocomerce-list__product-title a:hover {
text-decoration: underline;
}
.product-section.related-product{
padding: 0;
background: transparent;
} circle {
r: 5%;
}
circle.grow {
r: 30%;
transition: r 1s ease-out;
}
circle.shrink {
r: 0%;
transition: r 10s ease-in;
} .theme-unit{
padding: 100px 0 100px;
}  .preloader {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: 999999;
height: 100%;
width: 100%;
}
.preloader .preloader-wapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100vh;
}
.preloader .loader-section {
background-color: #fff;
height: 100%;
position: fixed;
top: 0;
width: calc(50% + 1px);
}
.preloader .loader-section.section-right {
right: 0;
}
.preloader .loader-section.section-left {
left: 0;
}
.preloader .loaded .section-right {
-webkit-transform: translateX(101%);
-ms-transform: translateX(101%);
transform: translateX(101%);
-webkit-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
-o-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}
.preloader .loaded .section-left {
-webkit-transform: translateX(-101%);
-ms-transform: translateX(-101%);
transform: translateX(-101%);
-webkit-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
-o-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}
.preloader .spinner {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--primary-color);
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
transform: translate(-50%, -50%);
z-index: 99;
}
.preloader .spinner:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--primary-color);
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
.preloader .spinner:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--primary-color);
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0%   {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0%   {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.preloader .loaded .spinner {
opacity: 0;
-webkit-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
visibility: hidden;
}
#socialicon {
left: -100%;
transform: translatex(-50%);
top: 0;
display: none;
position: absolute;
}
#contacticon {
right: -100%;
transform: translatex(50%);
top: 0;
display: none;
position: absolute;
} #socialicon.activate, #contacticon.activate {
transform: translateX(0); visibility: visible;
} .page-wrapper{
padding: 100px 0;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-weight:400;
margin: 0 0 20px;
font-weight: 600;
}
h1, .h1 {
font-size: 36px;
line-height: 1.2;
}
h2, .h2 {
font-size: 32px;
line-height: 1.2;
}
h3, .h3 {
font-size: 28px;
line-height: 1.2;
}
h4, .h4 {
font-size: 24px;
line-height: 1.2;
}
h5, .h5 {
font-size: 20px;
line-height: 1.2;
}
h6, .h6 {
font-size: 16px;
line-height: 1.2;
} blockquote { 
padding: 10px 20px;
margin: 0 0 20px;
background: #000;
}
blockquote { 
font-size: 15px;
font-style: italic;
font-weight: 500;
line-height: 21px;
letter-spacing: 1px;
border-left: 5px solid var(--primary-color);
color: #ffffff;
}
blockquote cite, blockquote small { 
font-size: 15px; 
display: block; 
line-height: 20px; 
padding-top: 15px; 
color: var(--primary-color);
}
blockquote em, blockquote i, blockquote cite { font-style: normal; }
blockquote strong, blockquote b { font-weight: 600; }         address { font-style: italic; margin: 0 0 20px; font-weight: 600; letter-spacing: 0.5px; line-height: 27px; } table { 
border: 1px solid #e9e9e9;
background-color: var(--secondary-color);
color: var(--white);
border-spacing: 0; 
letter-spacing: 0.5px; 
margin: 0 0 20px; 
text-align: left; 
width: 100%; 
}
table th {     
padding: 10px 10px;
color: var(--white-fix); 
background: var(--primary-color);
}
table th {     
border-right: solid 1px #636468;
}
table th {     
border-right: solid 1px #4c4c4c5c;
}
table td { border: 1px solid rgba(120 120 120 / 20%); padding: 8px 10px; color: var(--dark); } dl { 
margin-bottom: 25px; 
margin-top: 0; 
}
dl dt { 
font-weight: 700; 
margin-bottom: 10px; 
color: #222222;
font-family: 'Open Sans', sans-serif;
}
dl dd { 
margin-bottom: 20px; 
margin-left: 15px; 
}
abbr, tla, acronym { text-decoration: underline; cursor: help; }
acronym { border-bottom: 0 none; }
big { font-size: large; font-weight: 600; }
s, strike, del { text-decoration: line-through; }
em, cite, q { 
font-style: italic; 
font-weight: 600;
color: var(--primary-color
);
}
ins { text-decoration: none; padding: 0 3px; }
code, kbd, tt, var, samp, pre {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background: #333;
color: #ffffff;
padding: 2px 5px;
font-size: 16px;
font-size: 1rem;
line-height: 1.3125;
max-width: 100%;
overflow: auto;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
mark {
color: #000;
background: #ff0;
padding: 2px 5px;
}
.search-form label {
width: 100%;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
} .product-section.woocommerce ul.products li.product {
margin: 0 0 25px;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
}