* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
:root {
--body-font: 'Roboto', sans-serif;
--heading-font: "Poppins", sans-serif;
--theme-color: #F65801;
--theme-color2: #0A2155;
--theme-bg-light: #F6F6F6;
--theme-color-light: rgba(246, 88, 1, .15);
--body-text-color: #757F95;
--color-white: #ffffff;
--color-black: #000;
}
body {
background-color: #45b9f4;
width: 100%;
height: 100%;
}
/***
====================================================================
Support Section
====================================================================
***/
.support-section{
position:relative;
margin-top: 70px;
margin-bottom: 70px;
/* padding: 10px; */
}
.support-section .inner-container{
position:relative;
z-index:1;
border-radius:7px;
overflow:hidden;
background-color:#f6f5f8;
}
.support-section .social-column{
/* position:relative; */
padding-top: 50px;
}
.support-section .social-column .inner-column{
position:relative;
padding:35px 35px;
}
.support-section .social-column h3{
font-weight: 700;
display:block;
/* font-size:var(--font-28); */
text-transform:capitalize;
color: #000;
margin-top: -15px;
font-family: sans-serif;
padding-left: 50px;
font-size: 20px;
}
/* .support-section .social-column h3:before{
position:absolute;
content:'\f2c1';
left:0px;
top:0px;
line-height:1em;
color:var(--main-color);
font-family: 'FontAwesome';
} */
.support-section .social-column .social-box{
position:relative;
margin-top:var(--margin-top-20);
}
.support-section .social-column .social-box li{
position:relative;
display:inline-block;
margin-right:var(--margin-right-5);
}
.support-section .social-column .social-box li a{
position:relative;
width:50px;
height:50px;
line-height:50px;
text-align:center;
display:inline-block;
border-radius:50px;
font-weight:normal;
color: #ff3c00;
font-size:var(--font-16);
font-family: 'FontAwesome';
margin-bottom:var(--margin-bottom-5);
background-color: #fff;
text-decoration: none;
margin-top: 15px;
}
.support-section .social-column .social-box li a:hover{
/* color:; */
background-color:var(--main-color);
}
.support-section .content-column{
position:relative;
}
.support-section .content-column .inner-column{
position:relative;
padding: 12% 15px 45px 110px;
background-position:center center;
background-repeat:no-repeat;
background-color: #ff3c00;
color: #fff;
}
.support-section .content-column .pattern-layer{
position:absolute;
right:100px;
bottom:0px;
width:369px;
height:94px;
background-repeat:no-repeat;
}
.support-section .content-column .inner-column .phone{
position:absolute;
right: 22%;
top: 51%;
/* color:; */
font-size: 17px;
}
.support-section .content-column .inner-column .phone .icon{
position:relative;
top:1px;
margin-right:var(--margin-right-10);
}
.support-section .content-column .inner-column:before{
position:absolute;
content:'';
left:0px;
top:0px;
right:-150px;
bottom:0px;
z-index:-1;
transform: skewX(10deg);
border-radius:15px 0px 0px 15px;
background-color:var(--main-color);
}
.support-section .content-column .play-box{
position:absolute;
left:-35px;
top:60px;
}
.support-section .content-column .play-box .play-button span{
position: relative;
width:70px;
height: 70px;
z-index:10;
font-weight:400;
padding-left:4px;
line-height:70px;
border-radius:50%;
text-align: center;
display: inline-block;
font-size:var(--font-20);
/* color: ; */
transition: all 900ms ease;
-moz-transition: all 900ms ease;
-webkit-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
background-color: var(--dark-color);
font-family: "Flaticon";
}
.support-section .content-column .play-box .play-button .ripple,
.support-section .content-column .play-box .play-button .ripple:before,
.support-section .content-column .play-box .play-button .ripple:after {
position: absolute;
top: 50%;
left: 50%;
width:70px;
height: 70px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 50% 50% 50% 50%;
-moz-border-radius: 50% 50% 50% 50%;
-ms-border-radius: 50% 50% 50% 50%;
-o-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
-ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
-o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
-webkit-animation: ripple 3s infinite;
-moz-animation: ripple 3s infinite;
-ms-animation: ripple 3s infinite;
-o-animation: ripple 3s infinite;
animation: ripple 3s infinite;
}
.support-section .content-column .play-box .play-button .ripple:before {
-webkit-animation-delay: .9s;
-moz-animation-delay: .9s;
-ms-animation-delay: .9s;
-o-animation-delay: .9s;
animation-delay: .9s;
content: "";
position: absolute;
}
.support-section .content-column .play-box .play-button .ripple:after {
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-ms-animation-delay: .6s;
-o-animation-delay: .6s;
animation-delay: .6s;
content: "";
position: absolute;
}
.support-section .content-column h2{
/* color:;
font-size:; */
}
i#icons {
color: #ff3c00;
padding-right: 10px;
font-size: 20px;
}
h2.phone-left {
font-size: 30px;
font-weight: 700;
}
.support-section .content-column .text{
font-weight:300;
color: #fff;
margin-top:var(--margin-top-10);
font-family:var(--font-family-Rubik);
}
/*====================
13. Header top css
======================*/
.header-top {
padding: 9px 0;
background: var(--theme-color2);
position: relative;
}
.header-top-list {
padding-top: 6px;
}
.header-top::before {
content: "";
position: absolute;
top: 0;
left: 80px;
bottom: 0;
width: 48%;
background: var(--theme-color);
clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
}
.header-top::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 8%;
background: var(--theme-color);
clip-path: polygon(35% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.header-top-wrap {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
}
.header-top-list ul {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 25px;
}
.header-top-list ul li {
list-style: none;
/* text-decoration: none; */
}
.header-top-list a {
color: var(--color-white);
text-decoration: none;
}
.header-top-list a:hover {
color: var(--color-white)
}
.header-top-list a i {
color: var(--color-white);
margin-right: 5px;
}
.header-top-left,
.header-top-right {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.header-top-social span {
color: var(--color-white);
}
.header-top-social a {
color: var(--color-white);
font-size: 16px;
text-align: center;
margin-left: 12px;
transition: var(--transition);
}
.header-top-social a:hover {
color: var(--theme-color);
}
.header-top-lang .top-lang {
color: var(--color-white);
text-decoration: none;
}
.header-top-lang .dropdown-menu {
min-width: 60px;
border-radius: 15px;
padding: 10px;
border: none;
box-shadow: var(--box-shadow);
}
.header-top-lang .dropdown-item {
color: var(--color-dark);
border-radius: 10px;
}
.header-top-lang .dropdown-item:hover {
background: var(--theme-color);
color: var(--color-white);
}
/* ===================
22. About css
====================== */
.about-left {
position: relative;
margin-right: 25px;
}
.about-left::before {
content: "";
position: absolute;
width: 150px;
height: 80%;
left: -20px;
top: 50px;
border: 5px solid var(--theme-color);
border-radius: 100px 20px 20px 80px;
z-index: -1;
}
.theme-btn,
.theme-btn2 {
font-size: 16px;
color: var(--color-white);
padding: 15px 35px;
transition: all 0.5s;
text-transform: capitalize;
position: relative;
border-radius: 10px;
font-weight: 500;
cursor: pointer;
text-align: center;
vertical-align: middle;
overflow: hidden;
border: none;
background: #f95300;
box-shadow: var(--box-shadow);
z-index: 1;
text-decoration: none;
/* padding-right: 6px; */
}
.theme-btn:hover {
color: var(--color-white);
}
.site-title-tagline {
display: inline-block;
color: var(--color-white);
font-weight: 500;
text-transform: capitalize;
font-size: 18px;
background: #f65801;
border-radius: 50px;
padding: 2px 15px 2px 3px;
margin-bottom: 15px;
margin-top: 25px;
}
.about-left::before {
content: "";
position: absolute;
width: 150px;
height: 80%;
left: -20px;
top: 50px;
border: 5px solid var(--theme-color);
border-radius: 100px 20px 20px 80px;
z-index: -1;
}
.about-img .img-1 {
width: 51%;
margin-top: 70px;
border-radius: 100px 100px 0px 100px;
}
.about-img .img-2 {
position: absolute;
top: -20px;
right: 0;
width: 45%;
border: 10px solid var(--color-white);
border-radius: 100px 100px 100px 0px;
}
.about-right {
position: relative;
display: block;
}
.about-experience {
background: var(--theme-color);
position: absolute;
right: 40px;
bottom: 40px;
padding: 14px 25px;
border-radius: 100px 100px 0 100px;
text-align: center;
border: 10px solid var(--color-white);
}
.about-experience h5 {
color: var(--color-white);
font-size: 40px;
}
.about-experience p {
color: var(--color-white);
font-weight: 600;
}
.about-content {
padding: 15px;
border: 1px solid var(--border-info-color);
border-radius: 20px;
margin-top: 15%;
margin-bottom: 35px;
color: #000;
}
.about-item {
display: flex;
gap: 12px;
background: var(--color-white);
}
.about-item .icon {
width: 65px;
height: 65px;
line-height: 60px;
text-align: center;
background: var(--theme-color);
border-radius: 50px;
}
.about-item .icon img {
width: 40px;
filter: brightness(0) invert(1);
}
.about-item .content {
flex: 1;
}
.about-item .content h6 {
color: var(--color-dark);
font-size: 18px;
margin-bottom: 5px;
}
.about-text {
color: #000;
}
.about-area.py-120 {
margin-top: 70px;
}
/***
====================================================================
Shop One
====================================================================
***/
.shop-one {
position: relative;
padding: 120px 0px 100px;
}
.shop-one .auto-container {
position: relative;
max-width: 1600px;
}
.shop-block_one {
position: relative;
margin-bottom: 30px;
}
.shop-block_one-inner {
position: relative;
border: 2px solid var(--color-two);
}
.shop-block_one-image {
position: relative;
overflow: hidden;
border: 2px solid #000;
}
.shop-block_one-image img {
position: relative;
width: 100%;
display: block;
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
}
.shop-block_one-image:before {
position: absolute;
top: 0;
left: -85%;
z-index: 99;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .7)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.shop-block_one-inner:hover .shop-block_one-image img {
transform: scale(1.05, 1.05);
}
.shop-block_one-inner:hover .shop-block_one-image:before {
-webkit-animation: shine 1s;
animation: shine 1s;
}
.shop-block_one-content {
position: absolute;
left: 22px;
right: 22px;
z-index: 9;
bottom: -25px;
text-align: center;
padding-bottom: 23px;
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
/* text-decoration: none; */
color: #000;
}
.shop-block_one-content:before {
position: absolute;
content: '';
left: 0px;
top: 24px;
right: 0px;
bottom: 0px;
background-color: #fafafa;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.08);
/* text-decoration: none; */
}
.shop-block_one-cart {
position: relative;
padding: 8px 25px;
font-weight: 600;
font-size: 15px;
display: inline-block;
color: #fff;
text-transform: capitalize;
background-color: #241c14;
font-family: "Work Sans", sans-serif;
text-align: center;
text-decoration: none;
}
.shop-block_one-cart i:hover {
background-color: #241c14;
color: #fff;
}
.shop-block_one-cart i {
position: relative;
width: 32px;
height: 32px;
margin-left: 8px;
font-weight: normal;
line-height: 32px;
border-radius: 50px;
display: inline-block;
/* color: ; */
transition: all 300ms ease;
-moz-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
background-color: #da8b4b;
font-family: "flaticon_fllopi-icons";
}
.sec-title_title {
text-align: center;
text-transform: uppercase;
color: #000;
font-size: 20px;
font-weight: 700;
}
h2.sec-title_heading {
font-size: 35px;
font-weight: 600;
text-align: center;
color: #000;
margin-bottom: 70px;
}
.shop-block_one-cart:hover i {
/* color: ; */
background-color: var(--color-two);
}
.shop-block_one-cart:hover {
color: #fff;
background-color: #f65801;
}
.shop-block_one-price {
position: relative;
font-weight: 600;
font-size: 18px;
margin-top: 25px;
color: var(--main-color);
font-family: "Work Sans", sans-serif;
}
.shop-block_one-price span {
position: relative;
margin-left: 5px;
color: var(--color-two);
text-decoration: line-through;
}
.shop-block_one-heading {
position: relative;
font-weight: 600;
margin-top: 5px;
}
.shop-block_one-heading a {
position: relative;
color: var(--color-two);
text-decoration: none;
}
.shop-block_one-heading a:hover {
color: var(--main-color);
/* text-decoration: none; */
}
.shop-block_one-rating {
position: relative;
margin-top: 10px;
}
/***
/* ===================
31. Counter css
====================== */
.counter-area {
position: relative;
background: var(--theme-color2);
overflow: hidden;
z-index: 1;
/* margin-top: 70px; */
padding-top: 70px;
padding-bottom: 50px;
}
.counter-area::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(../img/shape/02.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: .1;
}
.counter-item {
display: flex;
gap: 12px;
position: relative;
padding: 15px 10px 15px 15px;
border-radius: 100px;
border: 2px solid var(--border-white-color);
box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
z-index: 1;
margin-top: 50px;
}
.counter-item::before {
content: "";
position: absolute;
top: -2px;
left: 0;
bottom: -2px;
width: 40%;
border: 3px solid var(--theme-color);
border-radius: 100px 0 0 100px;
border-right: none;
transition: var(--transition);
}
.counter-item:hover::before {
width: 50%;
}
.counter-item .icon {
width: 80px;
height: 80px;
line-height: 70px;
font-size: 35px;
border-radius: 50px;
text-align: center;
color: var(--color-white);
background: var(--color-white);
}
.counter-item .icon img {
width: 48px;
}
.counter-item .info {
display: flex;
gap: 2px;
}
.counter-item .counter {
display: block;
line-height: 1;
color: var(--color-white);
font-size: 50px;
font-weight: 900;
}
.counter-item .unit {
font-size: 25px;
color: var(--theme-color);
font-weight: 500;
line-height: 1;
margin: 3px 0 0 3px;
}
.counter-item .title {
color: var(--color-white);
margin-top: 10px;
font-size: 18px;
font-weight: 600;
text-transform: capitalize;
}
/* counter-area 2 */
.counter-area2 {
position: relative;
z-index: 1;
}
.counter-area2 .counter-wrap {
margin-top: -80px;
}
.counter-area2 .counter-item {
background: var(--color-white);
}
.counter-area2 .counter-item .icon {
background: var(--theme-color2);
}
.counter-area2 .counter-item .counter {
color: var(--color-dark);
}
.counter-area2 .counter-item .title {
color: var(--color-dark);
}
/*====================
26. Choose css
======================*/
.choose-area {
position: relative;
background: #012758;
z-index: 1;
padding-top: 70px;
padding-bottom: 70px;
}
.choose-area::before {
content: "";
position: absolute;
left: 0;
top: 0;
background-image: url(../img/shape/01.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
opacity: 0.08;
z-index: -1;
margin-top: 70px;
}
.choose-content-wrap {
margin-top: 30px;
}
.choose-img {
position: relative;
margin-left: 50px;
}
.choose-img::before {
content: "";
position: absolute;
left: -15px;
bottom: -15px;
width: 100%;
height: 100%;
border: 5px solid #f39d1a;
border-radius: 30% 0 30% 30%;
}
.choose-img img {
border-radius: 30% 0 30% 30%;
}
.choose-item {
display: flex;
align-items: center;
gap: 10px;
background: var(--color-white);
border-radius: 50px 50px 50px 0;
box-shadow: var(--box-shadow);
padding: 15px 15px 15px 0;
overflow: hidden;
margin-top: 70px;
/* padding-bottom: 70px; */
}
.choose-item-icon {
width: 80px;
height: 80px;
line-height: 75px;
text-align: right;
background: #f39d1a;
border-radius: 50px 50px 50px 0;
padding-right: 12px;
margin-left: -12px;
}
.choose-item-icon i {
color: var(--theme-color);
font-size: 50px;
}
.choose-item-icon img {
width: 45px;
filter: brightness(0) invert(1);
}
.choose-item-info {
flex: 1;
color: #000;
}
.choose-item-info h4 {
color: var(--color-dark);
margin-bottom: 10px;
font-size: 21px;
}
.choose-img img {
width: 100%;
height: auto;
}
.choose-video-wrap {
height: 100%;
width: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
@media all and (max-width: 991px) {
.choose-content-info {
margin-right: 100px;
}
.choose-video-wrap {
padding-top: 210px;
}
.choose-img {
margin-top: 50px;
margin-left: 10px;
}
}
@media all and (max-width: 767px) {
.choose-content-info {
margin-right: 40px;
}
}
/*--------------------------------------------------------------
# Work Planning
--------------------------------------------------------------*/
.work-planning {
background-color: var(--insuba-white2, #ecf2f2);
counter-reset: workPlanningSerialNumber;
}
.work-planning__container {
position: relative;
z-index: 1;
}
/* .work-planning__container::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
position: absolute;
top: -124.5px;
left: 50%;
transform: translateX(-50%);
background-color: var(--insuba-base, #0365d3);
z-index: 1;
} */
@media (max-width: 767px) {
.work-planning__container::before {
top: -104.5px;
}
}
@media (max-width: 575px) {
.work-planning__container::before {
top: -84.5px;
}
}
/* .work-planning__container::after {
content: "";
width: calc(100% - 30px);
height: 1px;
position: absolute;
top: -120px;
left: 50%;
transform: translateX(-50%);
background-color: var(--insuba-border-color, #dddddd);
} */
@media (max-width: 767px) {
.work-planning__container::after {
top: -100px;
}
}
@media (max-width: 575px) {
.work-planning__container::after {
top: -80px;
}
}
.work-planning__item {
position: relative;
text-align: center;
z-index: 2;
}
@media (min-width: 576px) {
.work-planning__item--bottom-serial-number {
margin-top: -2px;
padding-bottom: 76px;
}
}
@media (min-width: 576px) {
.work-planning__item--bottom-serial-number .work-planning__item__serial-number {
margin: 0;
position: relative;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
}
.work-planning__item__serial-number {
position: relative;
margin-bottom: 21px;
}
.work-planning__item__serial-number::after {
content: "0" counter(workPlanningSerialNumber);
counter-increment: workPlanningSerialNumber;
font-family: var(--insuba-heading-font, "Poppins", serif);
font-size: 58px;
font-weight: 700;
color: var(--insuba-white, #ffffff);
line-height: 1;
transition: all 500ms ease;
}
.work-planning__item:hover .work-planning__item__serial-number::after {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--insuba-base, #0365d3);
}
.work-planning__item__image {
margin: 0 auto 24px;
position: relative;
width: 191px;
height: 191px;
display: flex;
align-items: center;
justify-content: center;
}
.work-planning__item__image__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transition: all 500ms ease;
}
.work-planning__item__image__bg--hover {
opacity: 0;
}
.work-planning__item__image__inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 167px;
height: 167px;
z-index: 1;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: auto;
mask-size: auto;
}
.work-planning__item__image__inner img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.work-planning__item:hover .work-planning__item__image__bg {
opacity: 0;
}
.work-planning__item:hover .work-planning__item__image__bg--hover {
opacity: 1;
}
.work-planning__item__icon-box {
width: 79px;
height: 79px;
display: flex;
position: absolute;
left: -36px;
bottom: 36px;
align-items: center;
justify-content: center;
background-color: var(--insuba-black5, #0f3667);
border: 5px solid var(--insuba-white, #ffffff);
border-radius: 50%;
z-index: 2;
transition: all 500ms ease;
}
@media (max-width: 1199px) {
.work-planning__item__icon-box {
left: -30px;
bottom: 30px;
}
}
.work-planning__item:hover .work-planning__item__icon-box {
background-color: var(--insuba-base, #0365d3);
}
.work-planning__item__icon {
display: inline-flex;
font-size: 36px;
color: var(--insuba-white, #ffffff);
}
.work-planning__item__icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.work-planning__item:hover .work-planning__item__icon {
-webkit-animation-name: wobble-horizontal-hover;
animation-name: wobble-horizontal-hover;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.work-planning__item__title {
margin-bottom: 13px;
font-size: 22px;
font-weight: 700;
line-height: 1.318;
color: #000;
}
.work-planning__item__text {
margin: 0;
font-weight: 500;
line-height: 1.642;
color: #000;
}
.work-planning__border-shape {
position: absolute;
top: calc(50% + 10px);
left: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 1399px) {
.work-planning__border-shape {
max-width: 100%;
height: auto;
}
}
@media (max-width: 1199px) {
.work-planning__border-shape {
display: none;
}
}
.work-planning__appointment {
margin-top: 53px;
padding: 35px 32px;
border: 1px solid var(--insuba-border-color, #dddddd);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px 50px;
}
@media (max-width: 991px) {
.work-planning__appointment {
flex-direction: column;
justify-content: center;
}
}
@media (max-width: 390px) {
.work-planning__appointment {
padding-left: 25px;
padding-right: 25px;
}
}
.work-planning__appointment__text {
position: relative;
margin: 0 0 0 13px;
font-size: 17px;
font-weight: 500;
line-height: 1.47;
color: #000;
}
@media (max-width: 991px) {
.work-planning__appointment__text {
margin: 0;
text-align: center;
}
}
.work-planning__appointment__text::before {
content: "";
width: 2px;
height: 100%;
position: absolute;
top: 50%;
left: -13px;
transform: translateY(-50%);
background-color: var(--insuba-base, #0365d3);
}
@media (max-width: 991px) {
.work-planning__appointment__text::before {
display: none;
}
}
.work-planning__appointment .insuba-btn {
flex-shrink: 0;
}
.work-planning-two {
position: relative;
padding-bottom: 80px;
background-color: transparent;
}
.work-planning-two__overlay {
width: 100%;
height: calc(100% - 156px);
position: absolute;
left: 0;
bottom: 0;
background-color: var(--insuba-white5, #f0f5f5);
}
.work-planning-two__bg {
width: 100%;
height: calc(100% - 156px);
position: relative;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
}
.work-planning-two__bg__inner {
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: -190px;
background-position: center center;
background-size: auto;
background-repeat: repeat-x;
animation: moveBackground 40s linear 0s infinite;
}
.work-planning-two .container {
position: relative;
z-index: 2;
}
.work-planning-two__inner {
margin-top: -156px;
padding: 110px 0 164px;
position: relative;
z-index: 2;
background-color: var(--insuba-white, #ffffff);
border-radius: 40px;
overflow: hidden;
}
@media (max-width: 991px) {
.work-planning-two__inner {
padding: 110px 40px 101px;
}
}
@media (max-width: 767px) {
.work-planning-two__inner {
padding-top: 100px;
padding-bottom: 91px;
}
}
@media (max-width: 575px) {
.work-planning-two__inner {
padding-top: 80px;
padding-bottom: 71px;
}
}
@media (max-width: 390px) {
.work-planning-two__inner {
padding-left: 30px;
padding-right: 30px;
}
}
.work-planning-two__top {
margin-bottom: 110px;
padding-left: 60px;
padding-right: 60px;
}
@media (max-width: 991px) {
.work-planning-two__top {
padding: 0;
margin-bottom: 49px;
}
}
.work-planning-two .sec-title {
margin-bottom: 0;
}
.work-planning-two__card {
position: relative;
text-align: center;
}
.work-planning-two__card--1 .work-planning-two__card__hover::after {
width: calc(100% + 15px);
}
.work-planning-two__card--2::before,
.work-planning-two__card--2::after {
content: "";
width: 1px;
height: 206px;
background-color: var(--insuba-border-color, #dddddd);
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 991px) {
.work-planning-two__card--2::before,
.work-planning-two__card--2::after {
display: none;
}
}
.work-planning-two__card--2::before {
left: -15px;
}
.work-planning-two__card--2::after {
right: -15px;
}
.work-planning-two__card--2 .work-planning-two__card__hover::after {
width: calc(100% + 30px);
left: 50%;
transform: translateX(-50%);
}
.work-planning-two__card--3 .work-planning-two__card__hover::after {
width: calc(100% + 15px);
left: -15px;
}
.work-planning-two__card__show {
padding: 0 60px;
transition: all 500ms ease;
}
@media (max-width: 1199px) {
.work-planning-two__card__show {
padding: 0 30px;
}
}
@media (max-width: 991px) {
.work-planning-two__card__show {
display: none;
}
}
.work-planning-two__card__show .work-planning-two__card__title {
margin-top: 14px;
}
.work-planning-two__card__show .work-planning-two__card__text {
margin: 0;
}
.work-planning-two__card:hover .work-planning-two__card__show {
opacity: 0;
transform: translateY(-50px);
}
@media (min-width: 992px) {
.work-planning-two__card__hover {
padding: 0 30px;
width: 100%;
opacity: 0;
position: relative;
position: absolute;
top: -70px;
left: 50%;
transform: translateX(-50%) translateY(50px);
z-index: 2;
transition: all 500ms ease;
}
}
@media (min-width: 1200px) {
.work-planning-two__card__hover {
padding: 0 60px;
}
}
.work-planning-two__card__hover::before {
content: "";
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 22px 22px 22px;
border-color: transparent transparent var(--insuba-base, #0365d3) transparent;
position: absolute;
top: calc(100% + 71px);
left: 50%;
transform: translateX(-50%);
}
@media (max-width: 991px) {
.work-planning-two__card__hover::before {
display: none;
}
}
.work-planning-two__card__hover::after {
content: "";
width: 100%;
height: 4px;
background-color: var(--insuba-base, #0365d3);
position: absolute;
top: calc(100% + 93px);
left: 0;
}
@media (max-width: 991px) {
.work-planning-two__card__hover::after {
display: none;
}
}
@media (min-width: 992px) {
.work-planning-two__card:hover .work-planning-two__card__hover {
opacity: 1;
transform: translateX(-50%) translateY(0px);
}
}
.work-planning-two__card__serial-number {
position: relative;
margin: 0;
font-size: 58px;
font-weight: 700;
color: var(--insuba-border-color, #dddddd);
line-height: 1;
transition: all 500ms ease;
}
.work-planning-two__card:hover .work-planning-two__card__serial-number {
color: var(--insuba-white, #ffffff);
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: var(--insuba-base, #0365d3);
}
.work-planning-two__card__icon-box {
position: relative;
z-index: 1;
margin: -25px auto 0;
width: 79px;
height: 79px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--insuba-white2, #ecf2f2);
}
.work-planning-two__card__icon {
width: calc(100% - 10px);
height: calc(100% - 10px);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--insuba-black5, #0f3667);
border-radius: inherit;
font-size: 34px;
color: var(--insuba-white, #ffffff);
transition: all 500ms ease;
}
.work-planning-two__card__icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.work-planning-two__card:hover .work-planning-two__card__icon {
background-color: var(--insuba-base, #0365d3);
}
.work-planning-two__card:hover .work-planning-two__card__icon>* {
-webkit-animation-name: wobble-horizontal-hover;
animation-name: wobble-horizontal-hover;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.work-planning-two__card__image {
margin: -40px auto 0;
width: 191px;
height: 129px;
border-radius: 50px;
transition: all 500ms ease;
}
.work-planning-two__card__title {
margin: 25px 0 12px;
font-size: 22px;
font-weight: 700;
line-height: 1.318;
}
.work-planning-two__card__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.work-planning-two__card__title a:hover {
background-size: 100% 1px;
}
.work-planning-two__card__text {
margin-bottom: 9px;
line-height: 1.4375;
}
.work-planning-two__card__link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--insuba-base, #0365d3);
font-weight: 500;
line-height: 1.4375;
}
.work-planning-two__card__link__icon {
display: inline-flex;
font-size: 12px;
color: inherit;
}
.work-planning-two__card__link__icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.work-planning-two__info {
margin-top: 80px;
}
@media (max-width: 767px) {
.work-planning-two__info__image {
text-align: center;
}
}
.work-planning-two__info__image img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
.work-planning-two__info__list {
margin: 0;
}
.work-planning-two__info__list li {
display: flex;
gap: 10px;
font-size: 16px;
font-weight: 500;
color: var(--insuba-black6, #232323);
}
.work-planning-two__info__list li+li {
margin-top: 6px;
}
@media (max-width: 767px) {
.work-planning-two__info__list li {
justify-content: center;
}
}
.work-planning-two__info__list li .service-details__policies__icon {
position: relative;
top: -1px;
flex-shrink: 0;
font-size: 18px;
color: var(--insuba-base, #0365d3);
}
.work-planning-two__info__button {
display: flex;
align-items: center;
justify-content: flex-end;
}
@media (max-width: 991px) {
.work-planning-two__info__button {
justify-content: center;
}
}
.work-planning-two__shape-one {
max-width: 100%;
height: auto;
position: absolute;
top: -585px;
left: -176px;
}
.work-planning-two__shape-two {
max-width: 100%;
height: auto;
position: absolute;
top: -500px;
right: -370px;
}
.sec-title__top {
margin-bottom: 22px;
padding: 7px 25px 5px;
display: inline-flex;
gap: 3px;
background-color: var(--insuba-base, #0365d3);
border-radius: 30px;
color: #fff;
text-align: center;
margin-top: 70px;
/* font-weight: 700; */
}
.sec-title__title {
text-align: center;
font-weight: 700;
margin-bottom: 70px;
color: #000;
}
.work-planning__appointment .insuba-btn {
flex-shrink: 0;
}
.insuba-btn {
cursor: pointer;
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: middle;
-webkit-appearance: none;
border: none;
outline: none !important;
padding: 12.5px 0px 10.5px 20px;
background-color: var(--insuba-black3, #19232b);
font-family: var(--insuba-font, "Roboto", sans-serif);
font-size: 17px;
color: var(--insuba-white, #ffffff);
font-weight: 500;
border-radius: 100px;
z-index: 1;
transition: all 500ms ease;
text-decoration: none;
width: 11%;
}
/* Service */
.service-area.style-two .section-title.text-center {
margin-bottom: 82px;
}
h5.section-sub-title {
font-size: 16px;
color: #ff3c00;
font-weight: 600;
font-family: var(--heading-font);
border-radius: 20px;
background-color: rgba(255, 60, 0, .031);
border: 1px solid hsla(0, 0%, 48%, .15);
display: inline-block;
padding: 6px 29px;
position: relative;
z-index: 1;
margin: 0 0 22px;
line-height: 25px;
}
p.service-des {
color: #000;
}
.service-des p:hover {
color: red;
}
h1.section-main-title {
font-size: 42px;
line-height: 55px;
color: #050a1e;
font-weight: 700;
font-family: var(--heading-font);
margin: 0;
}
.service-area.style-two .single-service-box:after {
position: absolute;
content: "";
width: 175px;
height: 5px;
background-color: #ff3c00;
left: 66px;
top: -5px;
margin: 0 auto;
z-index: 1;
}
.service-area.style-two .single-service-box:before {
position: absolute;
content: "";
width: 175px;
height: 5px;
background-color: #050a1e;
top: -5px;
right: 0;
z-index: 1;
}
.service-area.style-two .single-service-box {
background: url(../img/service/serice-two-img.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
border-radius: 35px 0 35px 35px;
padding: 32px 20px 56px;
text-align: center;
position: relative;
transition: .5s;
margin-bottom: 30px;
height: 50vh;
width: 100%;
}
.service-area.style-two .single-service-box:hover .service-des,
.service-area.style-two .single-service-box:hover .service-title {
color: #fff;
}
.service-area.style-two {
margin-top: 70px;
margin-bottom: 70px;
}
p.service-des:hover {
color: #000;
}
h5.section-sub-title:before {
position: absolute;
content: "";
width: 30px;
height: 7px;
background: #ff3d00;
border-radius: 30px;
left: -8%;
top: 14px;
}
.service-area.style-two .service-title {
font-size: 24px;
color: #050a1e;
font-weight: 600;
position: relative;
transition: .5s;
}
.service-area.style-two .service-des:hover {
color: #000;
}
.service-area.style-two .service-des {
font-size: 16px;
line-height: 28px;
font-weight: 400;
padding: 44px 0 14px;
transition: .5s;
}
.service-area.style-two .service-icon {
display: inline-block;
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 35px;
background-color: #f4f4f4;
position: absolute;
bottom: -34px;
left: 0;
right: 0;
margin: 0 auto;
}
/***
====================================================================
Contact Section
====================================================================
***/
.contact-section {
position: relative;
margin-top: -84px;
}
.contact-section .anim-icons {
z-index: 3;
pointer-events: none;
}
.contact-section .anim-icons .icon-line3 {
left: 410px;
top: 30px;
}
.contact-section .anim-icons .icon-arrow1 {
left: -195px;
top: 320px;
}
.contact-section .anim-icons .icon-arrow2 {
top: 160px;
left: 680px;
}
.contact-section .upper-box {
position: relative;
/* background-color: var(--theme-color-light); */
z-index: 3;
}
@media (max-width: 575.98px) {
.contact-section .upper-box {
display: none;
}
}
.contact-section .upper-box .inner-box {
padding: 11px;
padding-left: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 15%;
}
@media (max-width: 991.98px) {
.contact-section .upper-box .inner-box {
padding-left: 20px;
}
}
@media (max-width: 767.98px) {
.contact-section .upper-box .inner-box {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
}
}
.contact-section .upper-box .inner-box .title {
margin-bottom: 0;
text-transform: uppercase;
}
@media (max-width: 991.98px) {
.contact-section .upper-box .inner-box .title {
font-size: 22px;
line-height: 1.2em;
}
}
@media (max-width: 767.98px) {
.contact-section .upper-box .inner-box .title {
margin-bottom: 10px;
}
}
.contact-section .upper-box .inner-box .theme-btn {
background-color: var(--theme-color-dark);
/* color: var(--theme-color-light); */
padding: 16px 74px;
font-size: 18px;
}
span.sub-title {
color: #fff;
font-weight: 600;
}
.contact-section .upper-box .inner-box .theme-btn:hover {
color: var(--theme-color1);
}
.contact-section .outer-box {
position: relative;
padding: 60px 60px;
background-image: url(../img/git/pattern-4.jpg);
}
@media (max-width: 767.98px) {
.contact-section .outer-box {
padding: 40px 20px 20px;
}
}
.contact-section .outer-box .sec-title {
margin-bottom: 30px;
}
.contact-section .outer-box .sec-title h2 {
font-size: 60px;
color: #fff;
font-weight: 700;
}
.contact-section .outer-box .contact-form {
padding: 60px 60px;
background-color: #fff;
max-width: 760px;
z-index: 2;
}
@media (max-width: 1199.98px) {
.contact-section .outer-box .contact-form {
max-width: 100%;
}
}
@media (max-width: 767.98px) {
.contact-section .outer-box .contact-form {
padding: 30px 20px;
}
}
.contact-section .outer-box .image {
position: absolute;
right: 5px;
bottom: 0;
margin-bottom: 0;
}
@media (max-width: 1199.98px) {
.contact-section .outer-box .image {
display: none;
}
}
.contact-form {
position: relative;
}
.contact-form .row {
margin: 0 -10px;
}
.contact-form .row>div {
padding: 0 10px;
}
.contact-form .form-group {
position: relative;
margin-bottom: 20px;
}
.contact-form .form-group:last-child {
margin-bottom: 0;
}
.contact-form .form-group label {
font-size: 16px;
line-height: 20px;
color: #ffffff;
font-weight: 500;
display: block;
letter-spacing: 1px;
margin-bottom: 10px;
}
.contact-form .form-group label.error {
display: block;
font-weight: 500;
font-size: 13px;
text-transform: capitalize;
line-height: 24px;
color: #ff0000;
margin-bottom: 0;
}
.contact-form .form-group .select2-container--default .select2-selection--single,
.contact-form .form-group input:not([type=submit]),
.contact-form .form-group textarea,
.contact-form .form-group select {
position: relative;
display: block;
height: 60px;
width: 100%;
padding: 15px 30px;
font-size: 14px;
color: #717070;
line-height: 28px;
font-weight: 400;
background-color: #f2f3f6;
border: 1px solid transparent;
margin-bottom: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.contact-form .form-group ::-webkit-input-placeholder {
color: #717070;
}
.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus {
border-color: var(--theme-color1);
}
.contact-form .form-group textarea {
height: 100px;
resize: none;
margin-top: 50px;
}
@media (max-width: 991.98px) {
.contact-form .form-group input[type=submit],
.contact-form .form-group button {
width: 100%;
}
}
.contact-form.style-two .row {
margin: 0 -5px;
}
.contact-form.style-two .form-group {
padding: 0 5px;
margin-bottom: 10px;
}
.contact-form.style-two .form-group ::-webkit-input-placeholder {
color: var(--text-color);
}
.contact-form.style-two .form-group .select2-container--default .select2-selection--single,
.contact-form.style-two .form-group input:not([type=submit]),
.contact-form.style-two .form-group textarea,
.contact-form.style-two .form-group select {
background-color: #1b1b1b;
}
.contact-form.style-two .form-group textarea {
height: 120px;
}
.contact-form.style-two .theme-btn:before {
background-color: var(--theme-color-light);
}
.contact-form.style-two .theme-btn:hover {
color: var(--theme-color-dark);
}
/***
====================================================================
Contact Section Two
====================================================================
***/
.contact-section-two {
position: relative;
overflow: hidden;
background-color: var(--theme-color-dark);
}
.contact-section-two .icon-shape4 {
position: absolute;
bottom: 0;
right: 0;
width: 319px;
height: 686px;
background-image: url(../images/icons/icon-shape4.png);
background-repeat: no-repeat;
z-index: 3;
}
@media (max-width: 1399.98px) {
.contact-section-two .icon-shape4 {
display: none;
}
}
.contact-section-two .icon-shape5 {
position: absolute;
top: 0;
left: 0;
width: 225px;
height: 299px;
background-image: url(../images/icons/icon-shape5.png);
background-repeat: no-repeat;
z-index: 3;
}
@media only screen and (max-width: 1699px) {
.contact-section-two .icon-shape5 {
display: none;
}
}
.contact-section-two .form-column {
position: relative;
}
.contact-section-two .form-column .inner-column {
padding: 100px 0 100px;
padding-right: 90px;
}
@media (max-width: 1199.98px) {
.contact-section-two .form-column .inner-column {
padding-right: 0;
}
}
.contact-section-two .image-column .inner-column {
margin-right: -365px;
padding-bottom: 100px;
}
@media (max-width: 991.98px) {
.contact-section-two .image-column .inner-column {
margin-right: 0;
}
}
.contact-section-two .image-column .inner-column .image {
position: relative;
margin-bottom: 0;
height: 100%;
}
.contact-section-two .image-column .inner-column .image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/*-------------------------------------------------------------- Testimonial ----------------------------------------------------------------*/
.cs_testimonial_1_section {
position: relative;
min-height: 550px;
}
.cs_bg_filed {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url("../img/cta/cta_bg_1.svg");
margin-top: 70px;
padding-top: 50px;
}
.cs_section_heading.cs_style_1 .cs_section_subtitle {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
.cs_white_color {
color: white;
}
.cs_semibold {
font-weight: 600;
}
.cs_fs_48 {
font-size: 48px;
line-height: 1.208em;
}
.cs_slider {
position: relative;
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-track {
opacity: 1;
width: 4452px;
transform: translate3d(-1908px, 0px, 0px);
}
.slick-initialized .slick-slide {
display: block;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
.cs_testimonial.cs_style_1 .cs_rating {
margin-bottom: 25px;
}
.cs_rating {
width: 102px;
height: 16px;
position: relative;
font-size: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.cs_white_color {
color: white;
}
.cs_fs_16 {
font-size: 16px;
line-height: 1.625em;
}
.cs_mb_25 {
margin-bottom: 25px;
}
.cs_testimonial_avatar_right p,
h3 {
color: #fff;
}
/*-------------------------------------------------------------- Blog ----------------------------------------------------------------*/
.blog-card__image {
margin-bottom: -103px;
position: relative;
z-index: 2;
}
.blog-card__image::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: var(--insuba-base, #0365d3);
border-radius: 0 100px 0 100px;
transition: all 500ms ease;
}
.blog-card__image__inner {
position: relative;
border-radius: 0 100px 0 100px;
overflow: hidden;
z-index: 1;
}
.blog-card__image__inner img {
width: 100%;
display: block;
border-radius: inherit;
transition: all 500ms ease;
}
.blog-card__image__link {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(var(--insuba-black3-rgb, 25, 35, 43), 0.7);
position: absolute;
top: 0;
left: 0;
opacity: 0;
transform: translateY(-20%);
z-index: 1;
border-radius: inherit;
transition: opacity 500ms ease, transform 500ms ease;
}
.blog-card__image__link::before,
.blog-card__image__link::after {
content: "";
width: 25px;
height: 2px;
background-color: var(--insuba-white, #ffffff);
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.blog-card__image__link::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.blog-card:hover .blog-card__image::after {
top: -4px;
opacity: 1;
}
.blog-card:hover .blog-card__image__link {
opacity: 1;
transform: translateY(0);
}
.blog-card:hover .blog-card__image img {
transform: scale(1.1);
}
.blog-card__date {
width: 90px;
height: 95px;
position: relative;
position: absolute;
left: 34px;
bottom: -26px;
transform: rotate(-27deg);
z-index: 2;
background-color: var(--insuba-black5, #0f3667);
border-radius: 0px 30px 0 30px;
overflow: hidden;
transition: all 500ms ease;
}
.blog-card__date::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 5px solid var(--insuba-white, #ffffff);
border-radius: inherit;
}
.blog-card__date__day {
display: block;
width: 45px;
height: 45px;
position: absolute;
top: 0;
right: 0;
transform: rotate(27deg);
font-family: var(--insuba-font2, "Rubik", sans-serif);
font-size: 16px;
font-weight: 500;
text-align: center;
color: var(--insuba-white, #ffffff);
line-height: 54px;
border-radius: 23px;
background-color: var(--insuba-base, #0365d3);
transition: all 500ms ease;
}
.blog-card__date__month {
margin-left: 11px;
margin-top: 50px;
position: relative;
display: block;
font-family: var(--insuba-font2, "Rubik", sans-serif);
font-size: 16px;
font-weight: 500;
color: var(--insuba-white, #ffffff);
text-transform: uppercase;
line-height: 1;
z-index: 1;
transform: rotate(27deg);
}
.blog-card__date__year {
margin-left: 25px;
position: relative;
display: block;
font-family: var(--insuba-font2, "Rubik", sans-serif);
font-size: 16px;
font-weight: 500;
color: var(--insuba-white, #ffffff);
line-height: 1;
z-index: 1;
}
.blog-card:hover .blog-card__date {
background-color: var(--insuba-base, #0365d3);
}
.blog-card:hover .blog-card__date__day {
background-color: var(--insuba-black3, #19232b);
}
.blog-card__content {
position: relative;
padding: 153px 30px 40px;
border: 1px solid var(--insuba-gray2, #b4b5ba);
border-radius: 100px 0 100px 0;
z-index: 1;
transition: all 500ms ease;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card__content {
padding-left: 25px;
padding-right: 25px;
}
}
@media (max-width: 375px) {
.blog-card__content {
padding-left: 25px;
padding-right: 25px;
}
}
.blog-card:hover .blog-card__content {
border-color: var(--insuba-base, #0365d3);
}
.blog-card__title {
margin-bottom: 10px;
font-size: 22px;
font-weight: 700;
line-height: 1.318;
text-transform: capitalize;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card__title {
font-size: 21px;
}
}
@media (max-width: 375px) {
.blog-card__title {
font-size: 21px;
}
}
.blog-card__title:hover {
color: var(--insuba-base, #0365d3);
}
.blog-card__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-card__title a:hover {
background-size: 100% 1px;
}
.blog-card__text {
margin-bottom: 26px;
}
.blog-card__link {
display: block;
width: 203px;
position: relative;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card__link {
width: 173px;
}
}
@media (max-width: 375px) {
.blog-card__link {
width: 173px;
}
}
.blog-card__link__front {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--insuba-white, #ffffff);
background-color: var(--insuba-black3, #19232b);
perspective: 300px;
transform-origin: top center;
transform: translateY(0%) translateZ(0px) scaleY(1) rotateX(0deg);
transition: transform 500ms ease;
}
.blog-card__link__front svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.blog-card__link:hover .blog-card__link__front {
transform-origin: bottom center;
transform: translateY(-100%) translateZ(150px) scaleY(0) rotateX(90deg);
}
.blog-card__link__back {
padding: 10.5px 82px 10.5px 38px;
position: absolute;
top: 0;
left: 0;
transition: transform 700ms ease, top 700ms ease;
transform: translateY(0%) translateZ(150px) scaleY(0) rotateX(90deg);
perspective: 300px;
transform-origin: bottom center;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card__link__back {
padding-left: 25px;
padding-right: 65px;
}
}
@media (max-width: 390px) {
.blog-card__link__back {
padding-left: 25px;
padding-right: 65px;
}
}
.blog-card__link:hover .blog-card__link__back {
transition: transform 500ms ease, top 500ms ease;
transform: translateY(0%) translateZ(0px) scaleY(1) rotateX(0deg);
}
.blog-card__shape {
position: absolute;
width: 38px;
height: 34px;
background-color: var(--insuba-gray3, #eeeeee);
clip-path: polygon(7% 0, 0% 100%, 100% 100%);
transition: all 600ms ease;
}
@media (max-width: 375px) {
.blog-card__shape {
width: 30px;
height: 26px;
}
}
.blog-card__shape--1 {
right: 74px;
bottom: 29px;
}
.blog-card__shape--2 {
right: 51px;
bottom: 49px;
}
.blog-card__shape--3 {
right: 23px;
bottom: 66px;
}
.blog-card:hover .blog-card__shape {
transform: rotate(180deg);
}
.blog-card:hover .blog-card__shape--2 {
background-color: var(--insuba-base, #0365d3);
}
.blog-card--four .blog-card__image::after {
display: none;
}
.blog-card--four .blog-card__content {
border-color: var(--insuba-gray, #e0e0e0);
border-radius: 0 0 100px 0;
}
@media (max-width: 390px) {
.blog-card--four .insuba-btn {
padding-left: 25px;
padding-right: 65px;
}
}
.blog-card-two {
position: relative;
padding: 9px;
border: 1px solid var(--insuba-border-color, #dddddd);
border-radius: 20px;
overflow: hidden;
}
@media (min-width: 992px) {
.blog-card-two--grid {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
}
@media (min-width: 992px) {
.blog-card-two--grid .blog-card-two__image {
width: 237px;
flex-shrink: 0;
}
}
@media (min-width: 992px) {
.blog-card-two--grid .blog-card-two__content {
padding: 10px 35px 10px 39px;
}
}
.blog-card-two__image {
position: relative;
z-index: 1;
}
.blog-card-two__image__inner {
position: relative;
border-radius: 20px;
overflow: hidden;
z-index: 1;
}
.blog-card-two__image__inner img {
width: 100%;
display: block;
border-radius: inherit;
transition: all 500ms ease;
}
.blog-card-two__image__link {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(var(--insuba-black3-rgb, 25, 35, 43), 0.7);
position: absolute;
top: 0;
left: 0;
opacity: 0;
transform: translateY(-20%);
z-index: 1;
border-radius: inherit;
transition: opacity 500ms ease, transform 500ms ease;
}
.blog-card-two__image__link::before,
.blog-card-two__image__link::after {
content: "";
width: 25px;
height: 2px;
background-color: var(--insuba-white, #ffffff);
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.blog-card-two__image__link::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.blog-card-two:hover .blog-card-two__image__link {
opacity: 1;
transform: translateY(0);
}
.blog-card-two:hover .blog-card-two__image img {
transform: scale(1.1);
}
.blog-card-two__date {
min-width: 69px;
position: relative;
position: absolute;
top: -10px;
right: -10px;
z-index: 2;
font-family: var(--insuba-font2, "Rubik", sans-serif);
font-size: 16px;
text-align: center;
font-weight: 500;
color: var(--insuba-white, #ffffff);
line-height: 1;
border-radius: 0 22px 0 22px;
background-color: var(--insuba-black5, #0f3667);
overflow: hidden;
transition: all 500ms ease;
}
.blog-card-two__date__day {
padding: 8px 8px 5px;
}
.blog-card-two__date__month {
padding: 0 8px 7px;
}
.blog-card-two__date__year {
position: relative;
padding: 11px 8px 9px;
z-index: 1;
}
.blog-card-two__date__year::after {
content: "";
width: 95px;
height: 45px;
background-color: var(--insuba-base, #0365d3);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: -1;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: auto;
mask-size: auto;
}
.blog-card-two__content {
position: relative;
padding: 35px 42px 32px;
z-index: 1;
}
@media (max-width: 1199px) {
.blog-card-two__content {
padding-left: 30px;
padding-right: 30px;
}
}
@media (max-width: 991px) {
.blog-card-two__content {
padding-left: 25px;
padding-right: 25px;
}
}
@media (max-width: 390px) {
.blog-card-two__content {
padding-left: 20px;
padding-right: 20px;
}
}
.blog-card-two__title {
margin-bottom: 10px;
font-size: 22px;
font-weight: 700;
line-height: 1.318;
text-transform: capitalize;
}
@media (max-width: 390px) {
.blog-card-two__title {
font-size: 21px;
}
}
.blog-card-two__title:hover {
color: var(--insuba-base, #0365d3);
}
.blog-card-two__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-card-two__title a:hover {
background-size: 100% 1px;
}
.blog-card-two__text {
margin-bottom: 23px;
}
.blog-card-two__link {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--insuba-black3, #19232b);
overflow: hidden;
transition: all 500ms ease;
}
.blog-card-two__link:hover {
background-color: var(--insuba-base, #0365d3);
}
.blog-card-two__link__icon {
display: inline-flex;
font-size: 13px;
color: var(--insuba-white, #ffffff);
}
.blog-card-two__link__icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.blog-card-two__link:hover .blog-card-two__link__icon {
animation: slideLeft 400ms;
}
.blog-card-two__shape {
max-width: 100%;
height: auto;
position: absolute;
right: -65px;
bottom: -7px;
animation: moveHorizontal 2s linear infinite;
}
.blog-card-three__image {
margin-bottom: 42px;
}
.blog-card-three__image img {
width: 100%;
display: block;
}
.blog-card-three__meta {
margin-bottom: 24px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px 30px;
}
.blog-card-three__category {
padding: 7px 31.5px;
font-size: 17px;
font-weight: 500;
line-height: 1.4;
color: var(--insuba-white, #ffffff);
text-transform: uppercase;
background-color: var(--insuba-base, #0365d3);
border-radius: 20px;
transition: all 500ms ease;
}
.blog-card-three__category:hover {
background-color: var(--insuba-black, #122f2a);
}
.blog-card-three__admin {
display: flex;
align-items: center;
gap: 11px;
}
.blog-card-three__admin__image {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--insuba-base, #0365d3);
}
.blog-card-three__admin__name {
margin: 0;
font-family: var(--insuba-font, "Roboto", sans-serif);
font-size: 16px;
color: var(--insuba-text, #636363);
font-weight: 400;
text-transform: capitalize;
line-height: 1.75;
}
.blog-card-three__admin__name a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-card-three__admin__name a:hover {
background-size: 100% 1px;
}
.blog-card-three__admin__name a:hover {
color: var(--insuba-base, #0365d3);
}
.blog-card-three__comment {
display: flex;
align-items: center;
gap: 10px;
}
.blog-card-three__comment__icon {
display: inline-flex;
flex-shrink: 0;
font-size: 18px;
color: var(--insuba-base, #0365d3);
}
.blog-card-three__comment__icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.blog-card-three__comment__text {
font-family: var(--insuba-font, "Roboto", sans-serif);
font-size: 16px;
color: var(--insuba-text, #636363);
font-weight: 400;
text-transform: capitalize;
line-height: 1.75;
transition: all 500ms ease;
}
.blog-card-three__comment__text:hover {
color: var(--insuba-base, #0365d3);
text-shadow: 0px 0px 0.5px currentColor;
}
.blog-card-three__date {
display: flex;
align-items: center;
gap: 10px;
}
.blog-card-three__date__icon {
position: relative;
top: -1px;
display: inline-flex;
flex-shrink: 0;
font-size: 18px;
color: var(--insuba-base, #0365d3);
}
.blog-card-three__date__icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.blog-card-three__date__text {
margin: 0;
font-size: 16px;
color: var(--insuba-text, #636363);
font-weight: 400;
text-transform: capitalize;
line-height: 1.75;
transition: all 500ms ease;
}
.blog-card-three__title {
margin-bottom: 11px;
font-size: 22px;
font-weight: 700;
line-height: 1.363;
}
.blog-card-three__title:hover {
color: var(--insuba-base, #0365d3);
}
.blog-card-three__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-card-three__title a:hover {
background-size: 100% 1px;
}
.blog-card-three__text {
margin-bottom: 27px;
line-height: 1.625;
}
.blog-card-three__btn {
padding: 10.5px 82px 10.5px 38px;
}
.blog-one,
.blog-two,
.blog-three,
.blog-page {
background-color: var(--insuba-white, #ffffff);
}
.blog-three__blog+.blog-three__blog {
margin-top: 30px;
}
.blog-three__blog {
position: relative;
margin-right: 30px;
display: block;
border-radius: 15px;
overflow: hidden;
}
@media (max-width: 1199px) {
.blog-three__blog {
margin-right: 0;
}
}
.blog-three__blog::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, transparent 60%, var(--insuba-base, #0365d3));
border-radius: inherit;
}
.blog-three__blog__image {
display: block;
width: 100%;
border-radius: inherit;
transition: all 500ms ease;
}
.blog-three__blog:hover .blog-three__blog__image {
transform: scale(1.1);
}
.blog-three__blog__author {
padding-left: 30px;
padding-right: 30px;
width: 100%;
position: absolute;
left: 50%;
bottom: 31px;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
gap: 16px 22px;
z-index: 1;
}
@media (max-width: 375px) {
.blog-three__blog__author {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
}
.blog-three__blog__author__image {
flex-shrink: 0;
width: 67px;
height: 67px;
border-radius: 50%;
border: 2px solid var(--insuba-white, #ffffff);
}
.blog-three__blog__author__text {
margin: 0;
font-size: 17px;
color: var(--insuba-white, #ffffff);
}
@media (max-width: 375px) {
.blog-three__blog__author__text {
margin-bottom: 5px;
}
}
.blog-three__blog__author__name {
margin: 0;
font-size: 22px;
color: var(--insuba-white, #ffffff);
font-weight: 700;
line-height: 1.318;
}
@media (max-width: 430px) {
.blog-three__blog__author__name {
font-size: 20px;
}
}
.blog-three__list {
margin: 0;
}
.blog-three__list li+li {
margin-top: 50px;
}
.blog-three__card {
position: relative;
padding-bottom: 26px;
display: flex;
align-items: flex-start;
gap: 30px;
border-bottom: 1px solid var(--insuba-border-color, #dddddd);
transition: all 500ms ease;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-three__card {
gap: 25px;
}
}
@media (max-width: 575px) {
.blog-three__card {
flex-direction: column;
}
}
.blog-three__card:hover {
border-color: var(--insuba-base, #0365d3);
}
.blog-three__card__date {
min-width: 69px;
display: inline-block;
flex-shrink: 0;
position: relative;
z-index: 2;
font-family: var(--insuba-font2, "Rubik", sans-serif);
font-size: 16px;
text-align: center;
font-weight: 500;
color: var(--insuba-white, #ffffff);
line-height: 1;
border-radius: 0 22px 0 22px;
background-color: var(--insuba-black5, #0f3667);
overflow: hidden;
transition: all 500ms ease;
}
.blog-three__card__date__day {
padding: 8px 8px 5px;
}
.blog-three__card__date__month {
padding: 0 8px 7px;
}
.blog-three__card__date__year {
position: relative;
padding: 11px 8px 9px;
z-index: 1;
}
.blog-three__card__date__year::after {
content: "";
width: 95px;
height: 45px;
background-color: var(--insuba-base, #0365d3);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: -1;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: auto;
mask-size: auto;
}
.blog-three__card__content {
margin-top: -4px;
padding-right: 172px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-three__card__content {
padding-right: 125px;
}
}
@media (max-width: 767px) {
.blog-three__card__content {
padding-right: 130px;
}
}
@media (max-width: 575px) {
.blog-three__card__content {
padding-right: 0px;
}
}
.blog-three__card__title {
margin-bottom: 12px;
font-size: 22px;
font-weight: 700;
line-height: 1.318;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-three__card__title {
font-size: 20px;
}
}
.blog-three__card__title:hover {
color: var(--insuba-base, #0365d3);
}
.blog-three__card__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-three__card__title a:hover {
background-size: 100% 1px;
}
.blog-three__card__text {
margin: 0;
}
.blog-three__card__btn {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: var(--insuba-white5, #f0f5f5);
transition: all 500ms ease;
}
@media (max-width: 575px) {
.blog-three__card__btn {
position: static;
}
}
.blog-three__card__btn:hover {
background-color: var(--insuba-base, #0365d3);
}
.blog-three__card__btn__icon-box {
width: 76px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--insuba-white, #ffffff);
}
.blog-three__card__btn__icon {
position: relative;
display: inline-flex;
border-radius: 16px;
font-size: 26px;
color: var(--insuba-base, #0365d3);
z-index: 1;
transition: all 500ms ease;
}
.blog-three__card__btn__icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.blog-three__card__btn__icon::after {
content: "";
width: 16px;
height: 16px;
background-color: RGBA(var(--insuba-black5-rgb, 15, 54, 103), 0.22);
position: absolute;
left: 13px;
bottom: -3px;
border-radius: 50%;
z-index: -1;
}
.blog-three__card__btn:hover .blog-three__card__btn__icon {
transform: rotate(90deg);
}
.blog-page .post-pagination {
justify-content: center;
}
@media (max-width: 991px) {
.blog-page .post-pagination {
margin-top: 20px;
}
}
.blog-page--list .post-pagination,
.blog-page--sidebar .post-pagination {
margin-top: 20px;
}
@media (max-width: 991px) {
.blog-page--list .post-pagination,
.blog-page--sidebar .post-pagination {
margin-top: 10px;
}
}
.blog-page--sidebar .post-pagination {
justify-content: flex-start;
}
@media (max-width: 991px) {
.blog-page--sidebar .post-pagination {
justify-content: center;
}
}
.blog-page--grid .post-pagination {
margin-top: 30px;
}
@media (max-width: 991px) {
.blog-page--grid .post-pagination {
margin-top: 20px;
}
}
/*--------------------------------------------------------------
13. Testimonial
----------------------------------------------------------------*/
.cs_testimonial_1_section {
position: relative;
min-height: 550px;
}
.blog-card__content a {
color: #0d6efd;
text-decoration: none;
}
.cs_testimonial_1_section .cs_testimonial_1_thumb {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 39%;
background-size: cover;
background-position: left center;
}
@media (max-width: 991px) {
.cs_testimonial_1_section .cs_testimonial_1_thumb {
display: none;
}
}
.cs_testimonial_1_section .cs_testimonial_1_quote_wrap {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 120px;
width: 120px;
border: 3px solid var(--accent);
border-radius: 50%;
padding: 7px;
left: -40px;
}
.cs_testimonial_1_section .cs_testimonial_1_quote {
height: 100%;
border-radius: inherit;
}
.cs_testimonial.cs_style_1 .cs_rating {
margin-bottom: 25px;
}
.cs_testimonial.cs_style_1 .cs_testimonial_avatar_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
}
.cs_testimonial.cs_style_1 .cs_testimonial_avatar_img {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
height: 60px;
width: 60px;
border-radius: 50%;
border: 2px solid var(--accent);
}
.cs_testimonial.cs_style_2 {
padding: 1px 30px 25px 30px;
margin-top: 40px;
position: relative;
}
@media (max-width: 1400px) {
.cs_testimonial.cs_style_2 {
padding: 1px 20px 25px 20px;
}
}
.cs_testimonial.cs_style_2 .cs_testimonial_in {
position: relative;
z-index: 2;
}
.cs_testimonial.cs_style_2 .cs_testimonial_avatar_img {
height: 80px;
width: 80px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
border: 3px solid var(--border);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
margin-top: -40px;
display: inline-block;
margin-bottom: 12px;
}
.cs_testimonial.cs_style_2 .cs_rating {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.cs_testimonial.cs_style_2 .cs_testimonial_blockquote {
font-style: initial;
}
.cs_testimonial.cs_style_2 .cs_quore_icon {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0.04;
}
.cs_testimonial.cs_style_2:hover .cs_testimonial_avatar_img {
border-color: var(--accent);
}
/*--------------------------------------------------------------
14. CTA
----------------------------------------------------------------*/
a.cs_btn.cs_style_1.cs_color_1 {
text-decoration: none;
color: #d14600;
background-color: #fff;
padding: 10px 20px;
border-radius: 5px;
transition: .5s ease-in;
text-transform: capitalize;
}
a.cs_btn.cs_style_1.cs_color_1:hover {
color: #fff;
background-color: #010f34;
}
.cs_cta.cs_style_1 {
position: relative;
overflow: hidden;
}
.cs_cta.cs_style_1 .cs_cta_in {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0 50px;
max-width: 980px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 85px 0;
}
@media (max-width: 1400px) {
.cs_cta.cs_style_1 .cs_cta_in {
max-width: 850px;
}
}
@media (max-width: 1199px) {
.cs_cta.cs_style_1 .cs_cta_in {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 30px 0;
}
}
.cs_cta.cs_style_1 .cs_cta_img {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 30%;
max-width: 575px;
}
@media (max-width: 1700px) {
.cs_cta.cs_style_1 .cs_cta_img {
width: 25%;
}
}
@media (max-width: 767px) {
.cs_cta.cs_style_1 .cs_cta_img {
display: none;
}
}
.cs_cta.cs_style_1 .cs_cta_img img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 0;
object-position: 0;
}
/***
====================================================================
Main Footer
====================================================================
***/
.footer-line {
margin-bottom: 70px;
text-align: center;
margin-top: -70px;
margin-left: 60px;
}
.main-footer {
position: relative;
background-color: #09111a;
color: #fff;
}
.main-footer .pattern-layer-one {
position: absolute;
left: 0px;
top: 0px;
width: 270px;
height: 275px;
background-repeat: no-repeat;
}
.main-footer .pattern-layer-two {
position: absolute;
right: 0px;
bottom: 60px;
width: 641px;
height: 318px;
background-repeat: no-repeat;
}
.main-footer .pattern-layer-three {
position: absolute;
right: 0px;
bottom: 0px;
width: 369px;
height: 260px;
background-repeat: no-repeat;
}
.main-footer .pattern-layer-four {
position: absolute;
left: 5%;
bottom: 22%;
width: 81px;
height: 81px;
background-repeat: no-repeat;
}
.main-footer .pattern-layer-five {
position: absolute;
left: 0px;
top: 38%;
width: 131px;
height: 190px;
background-repeat: no-repeat;
}
.main-footer .pattern-layer-six {
position: absolute;
left: 0px;
top: 12%;
width: 286px;
height: 625px;
background-repeat: no-repeat;
}
.main-footer .pattern-layer-seven {
position: absolute;
left: 0px;
bottom: 0px;
width: 312px;
height: 293px;
background-repeat: no-repeat;
}
.main-footer .circle-one {
position: absolute;
left: 12%;
top: 32%;
width: 11px;
height: 11px;
opacity: 0.10;
border-radius: 50px;
/* background-color: ; */
}
.main-footer .circle-two {
position: absolute;
right: 10%;
top: 46%;
width: 27px;
height: 27px;
opacity: 0.10;
border-radius: 50px;
/* background-color: ; */
}
.main-footer .circle-three {
position: absolute;
right: 40%;
bottom: 16%;
width: 12px;
height: 12px;
opacity: 0.10;
border-radius: 50px;
/* background-color: ; */
}
.main-footer .upper-box {
position: relative;
padding: 80px 0px 70px;
border-bottom: 1px solid var(--white-color-rgba-two);
margin-top: 50px;
margin-left: 50px;
}
.main-footer .upper-box .title-column {
position: relative;
}
.main-footer .upper-box .title-column .inner-column {
position: relative;
}
.main-footer .upper-box .title-column h2 {
/* color: ; */
/* font-size: var(--font-48); */
text-align: center;
font-size: 30px;
color: #ffff;
font-weight: 700;
}
.main-footer .upper-box .title-column h2 span {
color: #f95300;
font-weight: 700;
}
.main-footer .upper-box .title-column .text {
opacity: 0.60;
color: #fff;
font-size: 15px;
margin-top: var(--margin-top-10);
text-align: center;
}
.main-footer .upper-box .subscribe-column {
position: relative;
}
.main-footer .upper-box .subscribe-column .inner-column {
position: relative;
}
.main-footer .footer-column {
margin-bottom: var(--margin-bottom-30);
}
.main-footer .widgets-section {
position: relative;
padding: 90px 0px 60px;
}
.main-footer .footer-widget h3 {
font-weight: 500;
/* color: ; */
text-transform: capitalize;
margin-bottom: var(--margin-bottom-25);
font-size: 25px;
}
.main-footer .about-widget .logo {
margin-top: -18px;
margin-bottom: var(--margin-bottom-10);
}
.main-footer .about-widget .text {
max-width: 300px;
line-height: 1.8em;
/* color: ; */
font-family: var(--font-family-Roboto);
}
.main-footer .about-widget .opening {
position: relative;
/* color: ; */
font-size: var(--font-16);
margin-top: var(--margin-top-40);
padding-left: var(--padding-left-100);
}
.main-footer .about-widget .opening .icon {
position: absolute;
left: 0px;
top: 0px;
width: 78px;
width: 78px;
line-height: 78px;
text-align: center;
border-radius: 3px;
/* color: ; */
font-size: var(--font-30);
background-color: var(--main-color);
}
.main-footer .about-widget .opening strong {
position: relative;
font-weight: 500;
display: block;
/* color: ; */
font-size: var(--font-20);
text-transform: uppercase;
margin-bottom: var(--margin-bottom-10);
font-family: var(--font-family-Teko);
}
.main-footer .about-widget .opening .time {
position: relative;
line-height: 1.6em;
opacity: 0.60;
/* color: ; */
font-size: var(--font-16);
}
/* Nav List */
.main-footer .nav-list {
position: relative;
}
.main-footer .nav-list li {
position: relative;
margin-bottom: var(--margin-bottom-15);
}
.main-footer .nav-list a {
position: relative;
font-size: 15px;
color: #fff;
font-family: sans-serif;
text-decoration: none;
margin-left: -22px;
transition: .3s ease-in-out;
/* padding-bottom: 11px; */
}
.main-footer .nav-list a:hover {
opacity: 1;
text-decoration: underline;
color: #f65801;
}
/* Post Widget */
.main-footer .news-widget,
.main-footer .social-widget {
padding-left: var(--padding-left-40);
}
.main-footer .news-widget .post {
position: relative;
min-height: 65px;
padding-top: var(--padding-top-5);
padding-left: var(--padding-left-90);
margin-bottom: var(--margin-bottom-20);
}
.main-footer .news-widget .post:last-child {
margin-bottom: 0;
}
.main-footer .news-widget .post .thumb {
position: absolute;
left: 0px;
top: 2px;
width: 70px;
overflow: hidden;
border-radius: 4px;
}
.main-footer .news-widget .post .thumb a {
display: block;
}
.main-footer .news-widget .post .thumb img {
display: block;
width: 100%;
height: auto;
}
.main-footer .news-widget .post h6 {
font-weight: 500;
line-height: 1.6em;
font-size: var(--font-18);
margin-top: var(--margin-top-10);
}
.main-footer .news-widget .post h6 a {
/* color: ; */
text-decoration: none;
padding-left: 28%;
font-size: 13px;
font-weight: 700;
/* padding-top: 8px; */
}
.main-footer .news-widget .post h6 a:hover {
color: var(--main-color);
/* text-decoration: none; */
}
.main-footer .news-widget .post .date {
position: relative;
display: block;
line-height: 1.3em;
font-size: var(--font-14);
text-transform: capitalize;
color: #fff;
padding-left: 28%;
/* text-decoration: none; */
}
.main-footer .news-widget .post .date:before {
position: absolute;
content: '\f133';
left: 0px;
top: 0px;
color: var(--main-color);
font-family: 'FontAwesome';
}
.main-footer .subscribe-form {
margin-top: var(--margin-top-15);
max-width: 320px;
}
/* Subscribe Form */
.subscribe-form {
position: relative;
}
.subscribe-form .form-group {
position: relative;
margin: 0px;
width: 100%;
max-width: 100%;
}
.main-footer .subscribe-form .form-group {
height: 54px;
}
.mb-40 {
margin-bottom: 40px;
}
.subscribe-form .form-group input[type="text"],
.subscribe-form .form-group input[type="email"] {
position: relative;
line-height: 43px;
font-size: var(--font-18);
padding: 10px 15px 10px 25px;
display: block;
height: 60px;
width: 100%;
box-shadow: inherit;
border-radius: 5px;
font-weight: 400;
/* color: ; */
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
background-color: #242b33;
border: none;
/* text-transform: lowercase; */
}
.subscribe-form .form-group input::placeholder,
.subscribe-form .form-group textarea::placeholder {
/* color: ; */
}
.main-footer .subscribe-form .form-group input {
max-width: 320px;
padding-left: 16px;
}
.main-footer .subscribe-form .form-group input::placeholder {
font-size: 16px;
}
.subscribe-form .form-group button {
position: absolute;
right: 0px;
top: 0px;
padding: 15px 38px;
}
.main-footer .subscribe-form .form-group button {
right: 5px;
top: 5px;
padding: 11px 11px;
bottom: 5px;
bottom: 0;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
}
.subscribe-form .form-group button:hover {
background-color: var(--color-two);
}
/* Footer Bottom */
.main-footer .footer-bottom {
position: relative;
padding: 14px 0px;
background-color: #181f28;
}
.main-footer .footer-bottom .logo-column {
position: relative;
}
.main-footer .footer-bottom .copyright-column {
position: relative;
}
.main-footer .footer_links a {
color: #fff;
font-size: 18px;
font-weight: 400;
padding-right: 13px;
margin-right: 12px;
position: relative;
}
.main-footer .footer_links a:hover {
color: #FF4A17;
}
.main-footer .footer_links a::before {
position: absolute;
top: 5px;
right: 0;
width: 1px;
height: 13px;
content: "";
background-color: #fff;
}
.main-footer .footer_links a:last-child {
margin-right: 0;
padding-right: 0;
}
.main-footer .footer_links a:last-child:before {
display: none;
}
.main-footer .footer-bottom .copyright {
position: relative;
font-size: var(--font-18);
/* color: ; */
font-family: var(--font-family-Roboto);
}
.main-footer .footer-bottom .copyright a {
color: var(--qtec-white);
}
.main-footer .social-column {
position: relative;
}
.main-footer .social-column .inner-column {
position: relative;
text-align: right;
}
.main-footer .social-column .social-box {
position: relative;
margin-top: var(--margin-top-10);
}
.main-footer .social-column .social-box li {
position: relative;
display: inline-block;
margin-right: var(--margin-right-10);
}
.main-footer .social-column .social-box li a {
position: relative;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
border-radius: 3px;
font-weight: normal;
color: #fff;
font-size: 20px;
font-family: 'FontAwesome';
margin-bottom: 25px;
background-color: #181f28;
text-decoration: none;
transition: .3s ease-in-out;
}
.main-footer .social-column .social-box li a:hover {
background-color: #ff5500;
}
.main-footer .social-widget .text {
opacity: 0.57;
line-height: 1.7em;
/* color: ; */
font-family: var(--font-family-Roboto);
}
.main-footer .social-widget .social-box {
position: relative;
margin-top: var(--margin-top-25);
}
.main-footer .social-widget .social-box li {
position: relative;
display: inline-block;
margin-right: var(--margin-right-5);
}
.main-footer .social-widget .social-box li:last-child {
margin-right: var(--margin-zero);
}
.main-footer .social-widget .social-box li a {
position: relative;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
display: inline-block;
border-radius: 45px;
font-weight: normal;
color: var(--color-three);
font-size: var(--font-16);
font-family: 'FontAwesome';
margin-bottom: var(--margin-bottom-5);
/* background-color: ; */
}
.main-footer .social-widget .social-box li a:hover {
/* color: ; */
background-color: var(--main-color);
}
.footer_info {
margin-top: 25px;
margin-bottom: 33px;
}
.footer_info li {
font-size: 16px;
color: #fff;
margin-bottom: 17px;
list-style: none;
}
.footer_info li:last-child {
margin-bottom: 0;
}
.footer_info li i {
margin-right: 5px;
color: #FF4A17;
/* list-style: none; */
}
/* Style Two */
.main-footer.style-two {
margin-top: -85px;
overflow: hidden;
padding-top: var(--padding-top-110);
}
.main-footer.style-two .widgets-section {
padding-bottom: var(--padding-bottom-80);
}
.main-footer.style-two .nav-list a {
opacity: 0.57;
line-height: 1.7em;
}
.main-footer.style-two .nav-list a:hover {
opacity: 1;
}
/* Footer Bottom Two */
.main-footer .footer-bottom-two {
position: relative;
padding: 18px 15px;
background-color: #181f28;
margin-top: 40px;
margin-bottom: 50px;
}
.main-footer .footer-bottom-two .copyright-column {
position: relative;
}
.main-footer .footer-bottom-two .copyright {
position: relative;
font-size: var(--font-16);
/* color: ; */
font-family: var(--font-family-Roboto);
padding-top: 42px;
}
.main-footer .footer-bottom-two .copyright a {
color: var(--qtec-white);
}
button.theme-btn.btn-style-one {
margin-top: 50px;
}
form#contact-form {
padding-top: 50px;
}
.main-footer .footer-bottom-two .footer-nav {
position: relative;
text-align: right;
}
.main-footer .footer-bottom-two .footer-nav li {
position: relative;
display: inline-block;
margin-right: var(--margin-right-15);
padding-right: var(--padding-right-20);
border-right: 1px solid var(--white-color-rgba);
}
.right {
position: absolute;
max-width: 93%;
}
.right img {
float: right;
position: relative;
/* width: 41%; */
margin-top: -20px;
}
.main-footer .footer-bottom-two .footer-nav li a {
position: relative;
/* color: ; */
text-decoration: none;
padding-top: 50px;
}
.main-footer .footer-bottom-two .footer-nav li:last-child {
border: none;
padding-right: var(--padding-zero);
margin-right: var(--margin-zero);
}
.footer-widget.news-widget {
padding-left: 70px;
}
.links-widget.style-two {
margin-left: -20px;
}
.footer-widget.links-widget {
margin-left: 16px;
}
ul.nav-list {
list-style: none;
/* text-decoration: none; */
}
/*====================
28. Portfolio css
======================*/
.portfolio-area {
position: relative;
margin-top: 70px;
}
.portfolio-item {
/* margin-right: 30px; */
}
.pa-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../img/shape/01.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: .05;
}
.portfolio-img {
position: relative;
}
.portfolio-img img {
/* border-radius: 30px 30px 30px 0; */
}
.portfolio-img::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0;
background: var(--theme-color);
border-radius: 30px;
transform: scaleY(0);
transition: var(--transition);
}
.portfolio-item:hover .portfolio-img::before {
opacity: .8;
transform: scaleY(1);
}
.portfolio-link {
position: absolute;
width: 60px;
height: 60px;
line-height: 60px;
color: var(--theme-color);
background: var(--color-white);
border-radius: 50px;
text-align: center;
left: 50%;
top: 50%;
font-size: 28px;
margin-top: 50px;
opacity: 0;
box-shadow: var(--box-shadow);
transform: translate(-50%, -50%);
transition-delay: 0.3s;
}
.portfolio-link:hover {
color: var(--theme-color);
}
.portfolio-item:hover .portfolio-link {
margin-top: 0px;
opacity: 1;
}
.portfolio-content small {
text-transform: uppercase;
font-weight: 600;
color: var(--theme-color);
font-size: 14px;
letter-spacing: 2px;
}
.portfolio-content h4 a {
font-size: 18px;
color: var(--color-dark);
text-decoration: none;
}
.portfolio-content h4 a:hover {
color: var(--theme-color);
}
.portfolio-arrow {
width: 45px;
height: 45px;
line-height: 45px;
background: var(--theme-color);
color: var(--color-white);
text-align: center;
border-radius: 50px;
}
.portfolio-arrow i {
color: var(--color-white);
transform: rotate(-45deg);
transition: var(--transition);
}
.portfolio-arrow:hover i {
transform: rotate(0);
}
/* portfolio-slider */
.portfolio-slider .owl-nav {
margin-top: 0px;
}
.portfolio-slider .owl-nav button {
position: absolute;
top: 50%;
margin-top: -31px;
transform: translate(0, -50%);
transition: var(--transition);
}
.portfolio-slider .owl-nav button i {
display: inline-block;
height: 48px;
width: 48px;
line-height: 48px;
color: var(--color-white);
font-size: 25px;
text-align: center;
background: var(--theme-color);
border-radius: 50px;
cursor: pointer;
transition: var(--transition);
}
.portfolio-slider .owl-nav button:hover i {
background: var(--theme-color);
color: var(--color-white);
}
.portfolio-slider .owl-nav .owl-prev {
left: 0px;
opacity: 0;
}
.portfolio-slider .owl-nav .owl-next {
right: 0px;
opacity: 0;
}
.portfolio-slider:hover .owl-nav .owl-prev {
left: -10px;
opacity: 1;
}
.portfolio-slider:hover .owl-nav .owl-next {
right: -10px;
opacity: 1;
}
@media all and (max-width: 1199px) {
.portfolio-slider .owl-nav {
display: none;
}
}
/*====================
28. Portfolio css
======================*/
.portfolio-area {
position: relative;
}
.pa-bg {
background: var(--theme-color2);
}
.pa-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../img/shape/01.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: .05;
}
.portfolio-img {
position: relative;
/* width: 100%; */
}
.portfolio-img img {
border-radius: 30px 30px 30px 0;
width: 100%;
/* padding-right: 44px; */
/* align-items: center; */
}
.portfolio-img::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0;
background: var(--theme-color);
border-radius: 30px;
transform: scaleY(0);
transition: var(--transition);
}
.portfolio-item:hover .portfolio-img::before {
opacity: .8;
transform: scaleY(1);
}
.portfolio-link {
position: absolute;
width: 60px;
height: 60px;
line-height: 60px;
color: var(--theme-color);
background: var(--color-white);
border-radius: 50px;
text-align: center;
left: 50%;
top: 50%;
font-size: 28px;
margin-top: 50px;
opacity: 0;
box-shadow: var(--box-shadow);
transform: translate(-50%, -50%);
transition-delay: 0.3s;
}
.portfolio-link:hover {
color: var(--theme-color);
}
.portfolio-item:hover .portfolio-link {
margin-top: 0px;
opacity: 1;
}
.portfolio-content {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--color-white);
margin: -30px 30px 0 0;
position: relative;
padding: 10px 10px 10px 15px;
border-radius: 0 50px 50px 0;
box-shadow: var(--box-shadow);
width: 100%;
/* text-decoration: none; */
}
.portfolio-content small {
text-transform: uppercase;
font-weight: 600;
color: var(--theme-color);
font-size: 14px;
letter-spacing: 2px;
}
.portfolio-arrow {
width: 45px;
height: 45px;
line-height: 45px;
background: #f65801;
color: var(--color-white);
text-align: center;
border-radius: 50px;
}
.portfolio-arrow i {
color: var(--color-white);
transform: rotate(-45deg);
transition: var(--transition);
}
.portfolio-arrow:hover i {
transform: rotate(0);
}
.site-heading {
padding-top: 50px;
}
.site-heading h2 {
font-weight: bold;
margin-bottom: 12%;
}
.site-heading span i {
padding-right: 10px;
padding-bottom: 10px;
padding-left: 14px;
padding-top: 7px;
/* margin-top: 25px; */
}
/* portfolio-slider */
.portfolio-slider .portfolio-content {
margin-bottom: 50px;
}
.portfolio-slider .owl-nav {
margin-top: 0px;
}
.portfolio-slider.owl-carousel {
display: flex;
align-items: center;
justify-content: space-between;
}
.portfolio-slider .owl-nav button {
position: absolute;
top: 50%;
margin-top: -31px;
transform: translate(0, -50%);
transition: var(--transition);
}
.portfolio-slider .owl-nav button i {
display: inline-block;
height: 48px;
width: 48px;
line-height: 48px;
color: var(--color-white);
font-size: 25px;
text-align: center;
background: var(--theme-color);
border-radius: 50px;
cursor: pointer;
transition: var(--transition);
}
.portfolio-slider .owl-nav button:hover i {
background: var(--theme-color);
color: var(--color-white);
}
.portfolio-slider .owl-nav .owl-prev {
left: 0px;
opacity: 0;
}
.portfolio-slider .owl-nav .owl-next {
right: 0px;
opacity: 0;
}
.portfolio-slider:hover .owl-nav .owl-prev {
left: -10px;
opacity: 1;
}
.portfolio-slider:hover .owl-nav .owl-next {
right: -10px;
opacity: 1;
}
@media all and (max-width: 1199px) {
.portfolio-slider .owl-nav {
display: none;
}
}
/* ======================
29. Portfolio single
====================== */
.portfolio-sidebar .widget {
background: var(--color-white);
padding: 30px;
border-radius: 20px;
margin-bottom: 30px;
box-shadow: var(--box-shadow);
}
.portfolio-sidebar .widget .title {
position: relative;
padding-bottom: 10px;
margin-bottom: 30px;
}
.portfolio-sidebar .widget .title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 50px;
background: var(--theme-color);
border-radius: 50px;
}
.portfolio-sidebar .list li {
border-bottom: 1px solid var(--border-info-color);
display: block;
margin-bottom: 10px;
padding-bottom: 10px;
text-transform: uppercase;
font-size: 14px;
color: var(--color-dark);
font-weight: 600;
line-height: 33px;
}
.portfolio-sidebar .list li:last-child {
border-bottom: none;
padding: 0;
margin: 0;
}
.portfolio-sidebar .list li span {
display: block;
font-weight: normal;
font-size: 16px;
margin: 0;
text-transform: none;
}
.portfolio-sidebar .project h4 {
color: var(--color-white);
margin-bottom: 25px;
}
.portfolio-sidebar .rating a {
color: var(--theme-color);
}
.portfolio-sidebar .project {
background: var(--theme-color);
}
.portfolio-details img {
border-radius: 30px;
}
.portfolio-details .content h3 {
color: var(--color-dark);
}
.portfolio-details .content .list li {
font-weight: 500;
color: var(--color-dark);
margin-top: 5px;
}
.portfolio-details .content .list i {
color: var(--theme-color);
margin-right: 10px;
}