html{
overflow-x: hidden;
}
body{
padding: 0;
margin: 0;
background-color: #0d0d0d;
color: #f2f2f3;
font-size: 16px;
line-height: 1.5;
font-family: "Roboto", sans-serif;
font-weight: 300;
/* overflow-x: hidden; */
background-image: url(../img/background.png);
background-position: center;
background-size: contain;
background-repeat: repeat;
}
.overflowon{
overflow-y: auto;
}
.overflowoff{
overflow-y: hidden;
}
*{
outline: none!important;
transition: .2s ease-in-out;
}
img{
max-width: 100%;
width: 100%;
}
a{
text-decoration: none!important;
}
.m_on{
display: none;
}
.displayoff{
display: none!important;
}
/*color*/
:root {
--primary-color: #487c9e;
--secondary-color: #f2f2f3; /*#C89933;*/
--txtcolor1: #232122;
--txtcolor2: #9ac1e3;
--txtcolor3: #C89933;
--dark-color: #232122;
--light-color: #f2f2f3;
--black: #000000;
--white: #ffffff;
--lightgray: #f2f2f3;
}
.primaryBG{
background: var(--primary-color);
}
.secondaryBG{
background: var(--secondary-color);
}
.transparent{
background: transparent;
}
.blackBG{
background: var(--dark-color);
}
.whiteBG{
background: var(--white);
}
.lightgrayBG{
background: var(--lightgray);
}
.blackTXT{
color: var(--black);
}
.whiteTXT{
color: var(--white);
}
.grayTXT{
color: #979797;
}
.txtcolor1{
color: var(--txtcolor1);
}
.txtcolor2{
color: var(--txtcolor2);
}
/*end*/
/*Typography*/
h1, h2, h3{
font-family: "Roboto", sans-serif;
}
.captext{
text-transform: uppercase;
}
.heading{
position: relative;
margin-bottom: 30px;
font-size: 42px;
font-family: "Roboto", sans-serif;
}
.heading b, .heading strong{
font-weight: 700;
color: var(--txtcolor2);
}
.bttmline:after{
content: "";
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
width: 100px;
max-width: 30%;
height: 4px;
border-radius: 5px;
background: var(--primary-color);
}
.heading2{
/*padding: 0 15px;*/
font-family: "Roboto", sans-serif;
color: var(--txtcolor2);
}
.heading2 b{
font-size: 46px;
}
.heading2 b span{
background: var(--secondary-color);
padding: 0 10px;
}
.sectag{
position: relative;
color: var(--white);
font-weight: 500;
padding-left: 25px;
}
.sectag.nodgn, .sectag.hozrdgn{
padding-left: 0;
}
.sectag:before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(45deg);
height: 10px;
width: 10px;
border-radius: 100%;
/*box-shadow: 1px 3px 12px 3px rgb(215 0 89 / 23%);*/
background-color: var(--txtcolor2);
/*background-image: linear-gradient(45deg, var(--dark-color), var(--dark-color), var(--primary-color));*/
animation: pulse 5s infinite;
}
.sectag.nodgn:before{
display: none;
}
.sectag.hozrdgn:before{
top: -15px;
left: 50%;
transform: translateX(-50%);
}
hr{
border-top: 1px solid #e2e2e2;
}
.bdr_t{
border-top: 1px solid #e2e2e2;
}
.bdr_b{
border-bottom: 1px solid #e2e2e2;
}
/*end*/
/*Buttons*/
.hoverbtn:hover{
transform: scale(1.1);
box-shadow: 1px 7px 15px rgba(0, 0, 0, 0.3);
}
.btn-gradient{
position: relative;
background: transparent;
color: var(--dark-color)!important;
z-index: 1;
overflow: hidden;
border: none!important;
font-size: 16px;
padding: 12px 24px;
}
.btn-gradient:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 205%;
height: 100%;
background: linear-gradient(45deg, var(--primary-color), var(--txtcolor2), var(--primary-color));
z-index: -1;
transition: .3s;
}
.btn-gradient:hover:after{
transform: translateX(-45%);
}
.hovwhiteTXT:hover{
color: white!important;
}
.hovblackTXT:hover{
color: black!important;
}
.btn-shadow{
-webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
}
.btn-round{
border-radius: 100px;
padding-left: 20px;
padding-right: 20px;
}
.btn-hover-big:hover{
transform: scale(1.02);
}
/*end*/
/*Padding and margines*/
.paddZero{
padding: 0!important;
}
.pddlr_0{
padding-left: 0;
padding-right: 0;
}
.pdd20{
padding: 20px;
}
.pdd30{
padding: 30px;
}
.pdd50{
padding: 50px;
}
.pddt_30{
padding-top: 30px;
}
.pddb_30{
padding-bottom: 30px;
}
.pddt_50{
padding-top: 50px;
}
.pddb_50{
padding-bottom: 50px;
}
.pddt_70{
padding-top: 70px;
}
.pddb_70{
padding-bottom: 70px;
}
.m_0{
margin: 0!important;
}
.mt_0{
margin-top: 0!important;
}
.mb_0{
margin-bottom: 0!important;
}
.mt_30{
margin-top: 30px;
}
.mt_50{
margin-top: 50px;
}
.mt_70{
margin-top: 70px;
}
.mb_30{
margin-bottom: 30px;
}
.mb_50{
margin-bottom: 50px;
}
.mb_70{
margin-bottom: 70px;
}
/*end*/
.floatL{
float: left;
}
.floatR{
float: right;
}
.relative{
position: relative;
}
.fa-font:before, .fa-font:after, .fa-font li:before, .fa-font li:after{
font: normal normal normal 14px/1 FontAwesome;
content: none;
}
.flxcontrol{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
align-items: center;
}
.breadcrumb{
background-color: var(--dark-color);
}
.breadcrumb a{
color: var(--txtcolor2);
}
.bg_box{
position: relative;
overflow: hidden;
z-index: 1;
color: #fff;
}
.bg_box:after{
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: calc(100% - 100px);
max-width: 90%;
height: 100%;
background-color: #0d0d0d;
color: #fff;
border-radius: 15px;
z-index: -1;
background-image: url(../img/background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-blend-mode: screen;
}
/*Heading*/
header{
margin-bottom: 99px;
}
.navbar {
margin-bottom: 0;
background: #0d0d0d;
z-index: 9999;
border: 0;
padding: 10px 0;
font-size: 12px !important;
line-height: 1.4 !important;
border-radius: 0;
box-shadow: 0 1rem 3rem rgb(33,37,41,.175);
}
header.fixed .navbar{
/*box-shadow: 0 0 40px rgb(0 0 0 / 0.2);*/
background: #232122;
}
.navbar.navbar-default .container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: space-between;
align-items: center;
}
.navbar .navbar-brand{
height: unset;
padding: 5px 0;
padding-left: 0px;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.navbar .brand{
max-width: 250px;
max-height: 70px;
object-fit: contain;
}
.navbar-default .navbar-collapse{
/*padding: 10px 0;*/
}
.navbar .menu{
padding: 0;
text-align: right;
margin: 5px 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.navbar .menu li{
position: relative;
display: inline-block;
text-align: center;
padding: 0;
margin: 5px 3px;
font-size: 15px;
font-weight: 500;
border-radius: 50px;
}
.navbar .menu>li:before {
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, 600%);
width: 10px;
height: 10px;
border-radius: 50%;
border: 3px solid var(--txtcolor2);
z-index: -1;
transition: .3s;
visibility: hidden;
opacity: 0;
}
.navbar .menu>li:hover:before {
transform: translate(-50%, -50%);
visibility: visible;
opacity: 1;
}
.navbar .menu li.special{
position: relative;
background: transparent;
color: var(--secondary-color)!important;
z-index: 1;
border: none!important;
border-radius: 5px;
overflow: hidden;
}
.navbar .menu li.special:hover{
transform: scale(1.05);
}
.navbar .menu li.special:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 205%;
height: 100%;
background: linear-gradient(45deg, var(--primary-color), var(--dark-color), var(--primary-color));
z-index: -1;
transition: .3s;
}
.navbar .menu li:hover{
/*background: var(--primary-color);*/
}
.navbar .menu li.special:hover:after{
transform: translateX(-45%);
}
.navbar .menu li a{
text-decoration: none;
color: var(--secondary-color);
padding: 8px 10px;
display: inline-block;
}
.navbar .menu li.special a{
color: #fff!important;
padding: 12px 24px;
}
.navbar .menu li:hover a{
color: var(--txtcolor2);
}
.menu .menu-item-has-children>a:first-child{
padding-right: 26px;
}
.menu .navcticn{
position: absolute;
color: #fff;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
z-index: 2;
right: 0;
top: 4px;
padding: 8px 8px;
cursor: pointer;
}
.navbar .menu li:hover .navcticn{
color: var(--primary-color);
transform: rotate(180deg);
}
.navbar .menu .sub-menu{
padding: 20px 10px;
position: absolute;
width: 235px;
right: 0;
top: 100px;
opacity: 0;
visibility: hidden;
background: var(--dark-color);
z-index: 9;
transition: .2s;
border-radius: 3px;
box-shadow: 0px 15px 20px rgb(0 0 0 / 7%);
}
.navbar .menu li:hover > .sub-menu{
visibility: visible;
opacity: 1;
top: 32px;
}
.navbar .menu .sub-menu li{
display: block;
text-align: left;
margin: 0;
}
.navbar .menu .sub-menu li:hover{
/*background: #fff3eb;*/
}
.navbar .menu .sub-menu li a{
color:var(--light-color);
letter-spacing: 0;
width: 100%;
display: block;
padding: 5px 10px;
}
.navbar .menu .sub-menu li:hover a{
color: var(--txtcolor2);
}
.navbar .menu .sub-menu .sub-menu{
width: 250px;
right: 50%;
top: 0;
background: #e5f4ff;
z-index: -1;
border-radius: 10px 0px 10px 10px;
}
.navbar .menu .sub-menu .sub-menu li a{
color: black;
}
.navbar .menu .sub-menu .sub-menu li:hover a{
color: #0043ff;
}
.navbar .menu .sub-menu li:hover .sub-menu{
visibility: visible;
opacity: 1;
right: 100%;
top: 0;
z-index: 2;
}
.navbar .menu .sub-menu li.menu-item-has-children:hover{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.navbar-default .navbar-toggle{
/*display: unset;
float: left;
margin: 18px 15px 18px 0;
padding: 8px;*/
background: transparent!important;
}
.navbar-toggle .icon-bar{
display: block;
width: 28px;
height: 3px;
border-radius: 5px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: var(--dark-color);
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 5px;
transition: .5s;
}
.navbar-default .navbar-toggle .icon-bar:nth-child(2){
width: 82%;
}
.navbar-default .navbar-toggle .icon-bar:nth-child(3){
width: 50%;
}
.navbar-default .navbar-toggle.collapsed .icon-bar{
width: 28px;
}
.navbar-default .navbar-collapse{
/*max-height: 57.4px!important;*/
overflow: hidden!important;
margin: 0px 0 0px auto;
transition: 0s;
}
.navbar-default .navbar-collapse:hover{
overflow: visible!important;
}
.navbar-collapse.collapse[aria-expanded="false"]{
visibility: hidden;
opacity: 0;
}
.upmenus{
background: var(--primary-color);
padding: 5px 0;
}
.upmenus .row{
width: 100%;
}
.upmenus p{
color: var(--lightgray);
font-size: 14px;
margin: 5px 10px;
padding: 0;
}
.upmenus p strong{
color: var(--secondary-color);
}
.upmenus .custom_manu{
margin: 0;
}
.upmenus .custom_manu li{
color: var(--lightgray);
font-size: 14px;
background: transparent!important;
margin: 5px 5px;
display: inline-block!important;
}
.upmenus .custom_manu li.m_off{
float: left;
}
/*End*/
/*banner section*/
.section-1{
z-index: 1;
}
.section-1 .swiper-mainslider{
overflow: hidden;
height: calc(100vh - 99px);
}
.showcase {
width: 100%;
position: relative;
}
.showcase:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 70vh;
background: url(../img/growthcarvs.png) no-repeat center center/cover;
transform: translateY(-40%);
z-index: -1;
display: none;
}
.showcase:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(../img/herobg.webp) no-repeat center center/cover;
transform: translateY(0%);
z-index: -1;
background-color: var(--dark-color);
background-blend-mode: multiply;
}
.customslider{
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
flex-direction: row;
}
.showcase .flxcontrol{
align-content: center;
align-items: stretch;
height: calc(100vh - 99px);
}
.showcase .customslider .flxcontrol{
align-content: center;
align-items: center;
height: auto;
}
.showcase-content {
position: relative;
z-index: 2;
}
.customslider2 .showcase-content{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
.showcase-content h1.bnrheading {
font-weight: 700;
/* font-size: 60px; */
margin: 0 0 2rem;
color: var(--txtcolor2);
}
.lightmode .showcase-content h1.bnrheading b{
color: var(--secondary-color);
}
.showcase-content p.bnrp {
color: var(--secondary-color);
font-weight: 400;
font-size: 15px;
line-height: 1.4;
margin: 3rem 0;
}
.showcase-content .btn-grp{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
.showcase-content .btn-grp .btn{
font-size: 14px;
padding: 12px 25px;
box-shadow: -4px 7px 20px 0px rgb(0 0 0 / 40%);
}
.showcase-content .pulse{
animation: pulse 5s infinite;
animation-delay: var(--s);
font-size: 22px;
padding: 10px 0;
width: 44px;
height: 44px;
line-height: 1;
text-align: center;
}
.heroimgcont {
height: 100%;
position: relative;
}
.heroimgcont .heroitems{
}
.heroimgcont .heroitems .heroitemimg{
width: 560px;
margin: 0 auto;
max-width: 100%;
}
.heroimgcont .heroitems .heroitemimg img{
width: unset;
height: calc(90vh - 120px);
position: relative;
bottom: -13vh;
object-fit: contain;
animation: fly 15s infinite;
}
.customslider1 .heroimgcont .heroitems .heroitemimg img{
animation: none;
border-radius: 10px;
overflow: hidden;
height: auto;
width: 100%;
bottom: unset;
}
.circle {
background: var(--secondary-color);
border-radius: 50%;
width: 90%;
padding-bottom: 90%;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
animation: grow 25s infinite;
animation-delay: var(--s);
}
.customslider1 .circle{
display: none;
}
.showcase .swiper-button-next:after, .showcase .swiper-button-prev:after{
color: #fff;
font-size: 30px;
}
.pts{
}
.pts .flxcontrol{
justify-content: space-between;
height: unset;
overflow: visible;
align-items: stretch;
}
.pts .pts-box{
position: relative;
width: 28%;
margin: 30px 0px;
background: #f0f5ff;
padding: 20px 30px;
border-radius: 0 50px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
align-items: center;
box-shadow: 5px 5px 0px #c3d0e6, 10px 10px 0px #9eb6de;
}
.pts .pts-box:hover{
box-shadow: 10px 10px 0px #c3d0e6, 20px 20px 0px #9eb6de, 2px 2px 40px rgb(19 56 123 / 8%);
background: #fff;
transform: scale(1.03);
}
.pts .pts-box:after{
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 104%;
width: 20%;
height: 4px;
border-radius: 5px;
background: var(--primary-color);
opacity: 0;
}
.pts .pts-box:last-child:after{
display: none;
}
.pts .pts-box:before{
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 111.6%;
width: 18px;
height: 18px;
border-radius: 50%;
border: 4px solid var(--primary-color);
background: #fff;
opacity: 1;
z-index: 1;
box-shadow: 0 0 0px 4px white;
}
.pts .pts-box:nth-child(2):before{
display: none;
}
.pts .pts-box .icon{
max-width: 75px;
margin-right: 20px;
}
.pts .pts-box .icon img{
}
.pts .pts-box .info{
width: calc(100% - 95px);
}
.pts .pts-box .info h4{
color: var(--primary-color);
}
.pts .pts-box .info p{
color: rgb(128 128 128);
font-size: 12px;
line-height: 1.3;
}
/*end*/
/* our-studio */
.studio-section {
padding: 60px 20px;
}
.studio-container {
display: flex;
align-items: center;
gap: 30px;
}
.studio-text {
flex: 1;
min-width: 320px;
}
.studio-title {
font-size: 34px;
font-weight: 700;
margin-bottom: 20px;
color: #6cc1ff;
}
.studio-text p {
font-size: 16px;
line-height: 1.7;
margin-bottom: 15px;
color: #ddd;
}
.studio-btn {
display: inline-block;
padding: 12px 24px;
border-radius: 6px;
background: #6cc1ff;
color: #111;
font-weight: 600;
text-decoration: none;
transition: background 0.3s;
}
.studio-btn:hover {
background: #4aa6e0;
}
.studio-slider {
flex: 1;
width: 550px;
position:relative;
z-index: 1;
max-width: 100%;
}
.studio-slider .swiper {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.studio-slider img {
width: 100%;
height: auto;
display: block;
}
/* end */
/*Section 2i*/
.section-2i{
overflow: hidden;
}
.section-2i .swiper-companies{
overflow: hidden;
}
.companies{
/*background: var(--lightgray);*/
padding: 45px 15px;
border-radius: 10px;
}
.section-2i .company{
padding: 10px 15px;
height: 100px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
align-items: center;
background: rgb(255 255 255 / 100%);
border-radius: 5px;
margin-bottom: 20px;
backdrop-filter: blur(10px);
}
.section-2i .company img{
height: 100%;
object-fit: contain;
width: 100%;
}
.section-2i .company.award{
background: rgb(255 255 255 / 0%);
height: unset;
position: relative;
z-index: 1;
}
.section-2i .company.award::after{
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
aspect-ratio: 1 / 1;
border-radius: 50%;
border: 15px solid var(--dark-color);
z-index: -1;
opacity: 0.5;
}
.section-2i .company.award img{
height: 150px;
}
.section-2i .company.award h3{
text-align: center;
}
/*end*/
/*Section 2*/
.section-2 .flxcontrol{
align-items: center;
}
.workimgs{
position: relative;
z-index: 1;
}
.workimgs.flxcontrol{
justify-content: space-around;
align-content: space-around;
align-items: stretch;
}
.workimgs .boxes {
border: 1px solid var(--txtcolor2);
background-color: var(--txtcolor2);
padding: 30px 20px;
height: 300px;
gap: 15px;
box-shadow: 0 1rem 3rem rgba(33,37,41,.175);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin: 20px 0;
text-align: center;
}
.workimgs .boxes.box-1{
border-radius: 3px 25% 3px 25%;
box-shadow: 0 1rem 3rem rgba(33,37,41,.175), 15px 15px 0px #323232;
}
.workimgs .boxes.box-2{
border-radius: 25% 3px 25% 3px;
box-shadow: 0 1rem 3rem rgba(33,37,41,.175), -15px 15px 0px #323232;
}
.workimgs .boxes.box-3{
border-radius: 25% 3px 25% 3px;
box-shadow: 0 1rem 3rem rgba(33,37,41,.175), 15px -15px 0px #323232;
}
.workimgs .boxes.box-4{
border-radius: 3px 25% 3px 25%;
box-shadow: 0 1rem 3rem rgba(33,37,41,.175), -15px -15px 0px #323232;
}
.workimgs .boxes:hover {
background: var(--primary-color);
transform: scale(1.06);
z-index: 2;
}
.workimgs i, .workimgs svg, .workimgs img{
color: #fff;
height: 100px;
width: 100px;
padding: 20px;
border-radius: 20px;
background-color: var(--primary-color);
object-fit: contain;
font-size: 63px;
transition: transform .1s;
}
.workimgs h4{
font-weight: 400;
text-align: center;
font-size: 17px;
color: var(--dark-color);
}
.workimgs p{
color: var(--dark-color);
font-size: 13px;
}
.workimgs .boxes:hover h4{
color: #fff;
}
.workimgs .boxes:hover i, .workimgs .boxes:hover svg, .workimgs .boxes:hover img{
transform: scale(1.4);
}
.workimgs .boxes:hover p{
color: #b0d2e9;
}
.abtinfobox p{
margin-bottom: 35px;
color: #fff;
font-size: 16px;
font-weight: 300;
line-height: 1.7;
}
.abtinfobox blockquote{
position: relative;
border-left-color: transparent;
margin-left: 0;
font-size: unset;
}
.abtinfobox blockquote:before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 85%;
width: 4px;
box-shadow: -3px 3px 7px 0 rgb(251 176 52 / 20%);
background-color: #0000;
background-image: linear-gradient(45deg, var(--dark-color), var(--dark-color), var(--primary-color));
}
/*end*/
/*Section 3*/
.section-3{
width: 100%;
position: relative;
z-index: 1;
background: url(../img/bg3.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
}
.section-3 .flxcontrol{
align-content: flex-start;
align-items: stretch;
justify-content: space-between;
overflow: hidden;
}
.section-3 .flxcontrol .col-md-6.col-sm-6{
width: calc(50% - 40px);
margin-bottom: 80px;
position: relative;
}
.section-3 .flxcontrol .col-md-6.col-sm-6:after{
content: "";
position: absolute;
top: 50%;
transform: translateY(44%);
left: 90%;
width: 160px;
height: 100px;
z-index: 2;
}
.section-3 .flxcontrol .col-md-6.col-sm-6:last-child:after{
display: none;
}
.section-3 .flxcontrol .col-md-6.col-sm-6:nth-child(even):after{
background: url(../img/joining1.png) no-repeat center center/cover;
}
.section-3 .flxcontrol .col-md-6.col-sm-6:nth-child(odd):after{
background: url(../img/joining2.png) no-repeat center center/cover;
width: 500px;
height: 89px;
left: 50%;
top: 98%;
transform: translateX(-100%);
}
.section-3 .sec3item{
padding: 20px;
background: #fff;
border-top: 20px solid var(--primary-color);
border-radius: 15px ;
box-shadow: 0 5px 40px rgb(0 0 0 / 5%);
height: 100%;
}
.section-3 .sec3item .icon{
font-size: 90px;
font-weight: 900;
padding: 0px 0 10px;
color: rgb(243 243 243);
}
.section-3 .sec3item .infocont{
padding: 0 15px;
}
.section-3 .sec3item h3{
margin-top: 5px;
font-weight: 600;
}
.section-3 .sec3item p{
color: gray;
}
.section-3 .sec3item .btn{
margin-top: 20px;
color: #858585;
font-size: 15px;
}
.section-3 .sec3item .btn:hover{
box-shadow: 0 2px 20px rgb(0 0 0 / 8%);
background: #cecece;
color: #5e5e5e;
transform: scale(1.02);
}
.section-3 .sec3item:hover{
background: #fff;
transform: translateY(-5px);
box-shadow: 0 5px 10px rgb(0 0 0 / 0.1);
border-bottom-color: var(--primary-color);
z-index: 2;
}
.section-3 .sec3item:hover .icon{
color: var(--primary-color);
/*opacity: .5;*/
}
.section-3 .sec3item:hover h3{
color: var(--primary-color);
}
.section-3 .sec3item:hover p{
}
/*end*/
/*section 4*/
.section-4{
overflow: hidden;
position: relative;
z-index: 1;
}
.section-4 .heading{
font-size: 40px;
color: #fff;
}
.section-4 .heading b, .section-4 .heading strong{
color: var(--txtcolor2);
}
.section-4 .heading:after{
content: "";
position: absolute;
bottom: -17px;
left: 0;
width: 100%;
height: 2px;
border-radius: 5px;
background: var(--primary-color);
opacity: .1;
}
.section-4 .sectag{
color: #fff;
}
.section-4 .sectag:before{
background: var(--secondary-color);
}
.section-4 p{
color: #b0d2e9;
}
.section-4 .btn-gradient{
background: var(--secondary-color);
color: var(--dark-color)!important;
}
.section-4 .btn-gradient:after{
display: none;
}
.section-4 .flxcontrol{
align-items: stretch;
}
.section-4 .row>.flxcontrol{
padding: 60px 40px 40px 40px;
position: relative;
z-index: 1;
}
.section-4 .flxcontrol .col-md-3{
padding: 0;
}
.section-4 .itemcont{
margin-bottom: 30px;
}
.sec4item{
position: relative;
border-top: 2px solid #fff;
padding: 25px 10px 25px 10px;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
align-items: center;
background: var(--dark-color);
z-index: 1;
text-align: center;
align-content: center;
border-radius: 10px;
border: 2px solid white;
overflow: hidden;
}
.sec4item:hover{
border: 2px solid var(--txtcolor2);
}
.itemcont:last-child .sec4item{
border-bottom: 2px solid #fff;
}
.sec4item:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: var(--txtcolor2);
z-index: -1;
transition: all 0.5s;
}
.sec4item:hover:after{
width: 100%;
}
.sec4item .icon{
width: 100px;
padding: 0 8px;
margin-bottom: 30px;
}
.sec4item .icon svg{
}
.sec4item .icon img{
width: 70px;
margin: 0;
filter: invert(1) brightness(2);
object-fit: contain;
}
.sec4item:hover .icon img{
filter: none;
}
.sec4item .infocont{
width: calc(100% - 0px);
padding-left: 0px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
align-items: center;
position: relative;
}
.sec4item .infocont h3{
color: #fff;
font-weight: 600;
font-size: 22px;
margin: 0;
}
.sec4item .infocont h5 span{
display: inline-block;
font-size: 10px;
color: #ff7277;
background: #fff4ea;
padding: 3px 7px;
border-radius: 3px;
}
.sec4item .infocont p{
color: var(--txtcolor2);
font-size: 12px;
margin-bottom: 0;
}
.sec4item .infocont i{
color: var(--txtcolor3);
margin-right: 25px;
font-size: 18px;
display: none;
}
.sec4item:hover{
box-shadow: 2px 2px 40px rgb(19 56 123 / 8%);
transition: all .3s ease-out;
z-index: 2;
}
.sec4item:hover h3{
color: var(--primary-color);
}
/*end*/
/*Mission Section*/
.mission{
}
.mission .nav-tabs{
border: 2px solid #e2e2e2;
padding: 10px;
border-radius: 10px;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
align-items: center;
width: auto;
}
.mission .nav-tabs li a{
padding: 12px 20px;
border: none;
color: var(--txtcolor1);
border-radius: 5px;
}
.mission .nav-tabs li a:active{
background: var(--secondary-color);
}
.mission .nav-tabs li.active a{
background: var(--primary-color);
color: #fff;
border: none;
}
.mission .tab-content{
margin-top: 20px;
}
.mission .tab-pane h2{
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
}
.mission .tab-pane p{
color: #777777;
}
.socialboxes{
justify-content: center;
}
.socialbox{
width: 50%;
padding: 15px;
text-align: center;
border-right: 1px solid #f4f4f4;
border-bottom: 1px solid #f4f4f4;
}
.socialbox:nth-last-child(1), .socialbox:nth-last-child(2){
border-bottom: none;
}
.socialbox:nth-child(even){
border-right: none;
}
.socialbox img{
aspect-ratio: 1/1;
object-fit: contain;
max-width: 180px;
}
/*end*/
/*Team*/
.team{
background: rgb(255 255 255 / 6%);
}
.team_mm{
justify-content: space-between;
align-items: stretch;
}
.flip-card {
background-color: transparent;
width: calc(25% - 40px);
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
padding-bottom: 112.5%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
overflow: hidden;
border-radius: 10px;
box-shadow: 0 7px 30px rgb(0 0 0 / 33%);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
box-shadow: 0 7px 30px rgb(19 56 123 / 46%);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-front img{
width: 100%;
height: 100%;
object-fit: cover;
}
.flip-card-back {
background-color: var(--primary-color);
color: #fff;
-webkit-backface-visibility: visible;
backface-visibility: visible;
transform: rotateY(180deg);
visibility: hidden;
opacity: 0;
transition: .6s;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
align-content: center;
text-align: center;
}
.flip-card:hover .flip-card-back {
visibility: visible;
opacity: 1;
}
.team .team_cont h5{
width: 100%;
font-weight: 700;
font-size: 22px;
}
.team .team_cont h6{
width: 100%;
}
.team .team_cont p{
width: 100%;
color: rgb(255 255 255 / 61%);
}
/*end*/
/*contact*/
.cnt_info{
position: relative;
overflow: hidden;
z-index: 1;
color: #fff;
}
.cnt_info:before{
content: "";
width: calc(100% - 100px);
max-width: 90%;
height: 100%;
transform: translateX(-50%);
left: 50%;
top: 0;
position: absolute;
background-position: center;
background-size: contain;
background-repeat: repeat;
background-image: url(../img/ctn-bg.png);
opacity: .35;
filter: invert(1);
}
.cnt_info .row>.flxcontrol{
justify-content: space-between;
}
.cnt_info .sectag{
color: #fff;
width: 100%;
}
.cnt_info .sectag:before{
background-color: var(--secondary-color);
background-image: unset;
}
.cnt_info .heading{
width: 100%;
}
.ctn_info ul{
list-style: none;
padding: 0;
margin: 0;
}
.ctn_info ul li{
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 10px;
}
.ctn_info ul li a{
color: #fff;
}
.ctn_info ul li i{
color: var(--secondary-color);
width: 25px;
position: absolute;
left: 0;
top: 5px;
}
.ctn_info ul li span{
display: inline-block;
}
.wpcf7-spinner{
position: absolute;
}
.cnt_map{
padding-bottom: 40%;
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 1px 5px 20px rgb(80 0 33 / 26%);
}
.cnt_map .contmap{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #fff;
}
.cnt_map .contmap iframe{
width: 100%!important;
height: 100%!important;
filter: grayscale(1);
transition: 1s;
}
.cnt_map .contmap:hover iframe{
filter: grayscale(0);
}
.cnt_form .cnt_dif{
width: 100%;
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
}
.cnt_form .cnt_dif img{
filter: invert(1) brightness(1);
}
.cnt_form .cnt_dif span{
color: #fff;
font-size: 20px;
font-weight: 500;
}
.cnt_form .left-col{
border-right: 1px solid rgba(41,41,48,.1);
}
.cnt_form .form-container{
padding: 15px;
border: 1px solid rgb(255 255 255 / 17%);
border-radius: 15px;
background: rgb(255 255 255 / 6%);
margin: 30px 0 0 0;
position: relative;
z-index: 1;
color: var(--dark-color);
}
.cnt_form .form-container:after{
content: "";
position: absolute;
left: -200px;
top: -40px;
width: 250px;
height: 100%;
background-image: url(../img/cnt_3d.png);
background-position: bottom right;
background-size: contain;
background-repeat: no-repeat;
z-index: 1;
display: none;
}
.cnt_form .form-container label{
display: none;
}
.cnt_form .form-container input,
.cnt_form .form-container select,
.cnt_form .form-container textarea {
width: 100%;
padding: 12px;
font-size: 12px;
border-radius: 10px;
box-sizing: border-box;
margin-top: 8px;
margin-bottom: 8px;
resize: vertical;
border: none;
}
.cnt_form .form-container textarea{
max-height:120px;
height: 70px;
font-size: 13px;
}
.cnt_form .form-container input[type="submit"]{
background-color: var(--primary-color);
color: #fff;
padding: 15px 30px 15px 30px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 14px;
font-weight: 400;
transition: 0.4s;
margin-top: 10px;
}
.cnt_form .form-container input[type=submit]:hover {
background-color: var(--txtcolor2);
color: var(--dark-color);
box-shadow: 0px 8px 20px rgb(0 0 0 / 13%);
}
/*end*/
/*Section 7*/
.section-7{
overflow: hidden;
}
.section-7 .alltesti{
overflow: hidden;
}
.sec7item{
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
align-items: stretch;
padding: 30px;
transition: all .3s ease-out;
overflow: hidden;
background: var(--lightgray);
color: var(--black);
border-radius: 10px;
text-align: center;
transition: .5s;
}
.sec7item:after{
content: "";
position: absolute;
right: 15px;
top: 15px;
width: 30px;
height: 25px;
background: url(../img/quote.svg) no-repeat center center/cover;
z-index: 1;
transition: .5s;
transition-delay: .3s;
transform: rotate(-180deg) scale(0.5) translate(-70%, 70%);
}
.sec7item:hover:after{
background: url(../img/quote2.svg) no-repeat center center/cover;
opacity: 1;
}
.sec7item:before{
content: "";
position: absolute;
right: -70px;
top: -70px;
width: 140px;
height: 140px;
background: #e2dede;
border-radius: 50%;
transform: scale(0.6);
transition: .5s;
transition-delay: .3s;
}
.sec7item .thumbimg{
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
border: 3px solid #fff;
}
.sec7item .thumbimg img{
width: 100%;
height: 100%;
object-fit: contain;
}
.sec7item .hdingcont{
width: 100%;
padding: 0 15px;
}
.sec7item .hdingcont h3{
margin-top: 10px;
margin-bottom: 5px;
font-weight: 700;
font-size: 20px;
color: var(--black);
}
.sec7item .hdingcont .ratings:after{
content: "\f005\00a0\f005\00a0\f005\00a0\f005\00a0\f005";
color: #FF9800;
font-family: FontAwesome;
font-size: 16px;
}
.sec7item .infocont{
width: 100%;
padding: 10px 0px;
color: var(--black);
}
.sec7item:hover{
box-shadow: 0 5px 40px rgb(0 0 0 / 10%);
background: #fff!important;
}
.section-7 .sec7pagination{
bottom: -30px;
}
.section-7 .sec7pagination .swiper-pagination-bullet{
background: var(--primary-color);
}
.section-7 .swiper-slide-next .sec7item{
transform: scale(1.15);
background: #fff;
box-shadow: 0 5px 40px rgb(0 0 0 / 10%);
z-index: 2;
}
.section-7 .swiper-slide-next .sec7item:before{
transform: scale(1);
background: var(--primary-color);
}
.section-7 .swiper-slide-next .sec7item:after{
transform: rotate(-180deg) scale(1) translate(0%, 0%);
background: url(../img/quote.svg) no-repeat center center/cover;
}
/*end*/
/*section 8*/
.section-8{
overflow: hidden;
}
.section-8 .flxcontrol{
align-items: flex-start;
}
.section-8 .panel{
border: none;
border-radius: 10px;
overflow: hidden;
margin-bottom: 13px;
background: #f2f7ff;
}
.section-8 .panel-heading{
padding: 0;
background: transparent;
}
.section-8 .panel-heading h4{
}
.section-8 .panel-heading h4 a{
position: relative;
display: block;
padding: 22px;
font-size: 16px;
font-weight: 500;
color: #fff;
background: var(--primary-color);
}
.section-8 .panel-heading h4 a[aria-expanded="true"]{
background: var(--secondary-color);
color: var(--dark-color);
}
.section-8 .panel-heading h4 a:after{
content: "\f107";
font-family: FontAwesome;
font-size: 20px;
color: inherit;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.section-8 .panel-heading h4 a[aria-expanded="true"]:after{
content: "\f106";
}
.section-8 .panel-body{
border: none!important;
padding: 25px;
font-size: 13px;
color: #5d5d5d;
}
/*end*/
/*Section 9*/
.section-9{
width: 100%;
position: relative;
z-index: 2;
margin-bottom: -70px;
}
.section-9 .flxcontrol{
background: var(--secondary-color);
color: var(--dark-color);
padding: 50px 25px;
border-radius: 20px;
box-shadow: 0 20px 60px rgb(0 0 0 / 6%);
}
.section-9 h2{
position: relative;
margin: 25px 0 35px;
font-size: 32px;
font-weight: 600;
}
.section-9 h2:after{
content: "";
position: absolute;
bottom: -20px;
left: 0%;
width: 60px;
height: 6px;
border-radius: 5px;
background: var(--primary-color);
}
.section-9 h2.text-center:after{
left: 50%;
transform: translateX(-50%);
bottom: 0px;
}
.section-9 .unsetpos{
border-left: 1px solid rgb(0 0 0 / 15%);
}
.section-9 .unsetpos p{
font-size: 12px;
}
.section-9 .unsetpos .btn{
position: relative;
min-width: 200px;
}
/*end*/
/*Section 10*/
.hmcont{
}
.hmcont .flxcontrol{
}
.hmcont .flxcontrol .flxcontrol{
background: #fffdf8;
padding: 20px;
border-radius: 20px;
}
.hmcont h3{
font-size: 32px;
margin-top: 0;
}
.hmcont .continfo{
border: 2px solid var(--secondary-color);
padding: 15px;
margin-bottom: 10px;
position: relative;
}
.hmcont .continfo:after{
content: "";
position: absolute;
right: calc(0% - 5px);
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 80%;
background: var(--primary-color);
border-radius: 5px;
}
.hmcont .continfo p{
max-width: 240px;
margin: 0 0 10px auto;
}
.hmcont .ctnmail{
color: var(--secondary-color);
font-weight: 500;
}
.hmcont .contmap{
position: relative;
padding-bottom: 56.4%;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 5px 15px #00000012;
}
.hmcont .contmap iframe{
position: absolute;
width: 100%;
height: 100%;
}
/*end*/
/* case study */
.case_study{
overflow: hidden;
position: relative;
z-index: 1;
}
.case_study .counter {
font-size: 40px;
color: var(--color-code);
}
.counter_cont hr{
border-color: var(--color-code);
opacity: 0.7;
}
.counter_cont p.small{
font-size: 18px;
}
.ratio {
aspect-ratio: 16 / 9;
display: block;
}
.case_row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: stretch;
}
.case_swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: visible;
list-style: none;
padding: 0;
z-index: 1;
display: block;
}
.case_swiper .swiper-slide > .row{
display: flex ;
align-items: center;
}
.case_swiper .brand_logo{
width: 180px;
max-height: 100px;
object-fit: contain;
object-position: left;
}
.case_swiper .mid-content h2{
color: var(--color-code);
}
.case_swiper .sow span{
background: var(--dark-color);
padding: 3px 10px;
display: inline-block;
border-radius: 5px;
margin: 2px 0px;
font-size: 12px;
}
.case_swiper .sow span.mute-text{
background: rgb(72 124 158 / 0%);
margin-left: 0;
padding-left: 0;
font-weight: 600;
font-size: 14px;
}
.case_swiper .brand_logo
.mid-content .brand_logo img{
max-height: 60px;
box-shadow: 0px 6px 15px 0px #0000001A;
padding: 5px 7px;
min-width: 175px;
object-fit: contain;
margin-bottom: 10px;
}
.case_study .cs_thumb img{
aspect-ratio: 5 / 3;
object-fit: cover;
border: 5px solid var(--color-code);
}
.case_study .left_img img{
aspect-ratio: 1/1;
object-fit: contain;
width: 100%;
}
.case_study .has_vid{
position: relative;
z-index: 1;
}
.case_study .has_vid::after{
content: "\25BA";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
opacity: 0.5;
font-size: 50px;
text-shadow: 0px 5px 10px rgb(0 0 0 / 25%);
transition: 0.5s;
}
.case_study .has_vid:hover::after{
transform: translate(-50%, -50%) scale(1.15);
}
.case_swiper .swiper-slide{
visibility: hidden!important;
opacity: 0!important;
transition: 0.3s;
scale: 0.1;
filter: blur(5px);
}
.case_swiper .swiper-slide.swiper-slide-active{
visibility: visible!important;
opacity: 1!important;
scale: 1;
filter: blur(0px);
}
.case_swiper-next, .case_swiper-prev{
color: var(--color-subtext);
}
.case_swiper-next{
right: -35px;
}
.case_swiper-prev{
left: -35px;
}
.case_swiper-next::after, .case_swiper-prev::after{
font-size: 30px;
font-weight: 700;
}
.case_study .bg_dgns{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.case_study .bg_dgns img{
position: absolute;
aspect-ratio: 1 / 1;
object-fit: contain;
}
.case_study .bg_dgns .bg-icon1{
right: 2%;
top: 7%;
width: 150px;
}
.case_study .bg_dgns .bg-icon2{
left: 3%;
top: 90%;
width: 30px;
}
.case_study .bg_dgns .bg-icon3{
left: 0;
top: 25%;
width: 80px;
}
.case_study .bg_dgns .bg-icon4{
right: 12%;
top: 60%;
width: 180px;
}
/* end */
/*Defaut page baanr*/
.ldsec1{
position: relative;
z-index: 1;
color: var(--dark-color);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: rgb(0 0 0 / 65%);
background-blend-mode: overlay!important;
position: relative;
left: 0;
top: 0;
width: 100%;
}
.ldsec1 .heading b, .ldsec1 .heading strong{
/*color: var(--txtcolor3);*/
}
.flx{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
align-items: center;
min-height: calc(60vh - 75px);
}
.flxcont{
text-align: center;
}
.flxcont h1{
font-size: 50px;
font-weight: 700;
margin-top: 0;
color: #fff;
}
.flxcont .sectag{
color: #fff;
display: none;
}
/*end*/
/*My account*/
.woocommerce-MyAccount-navigation ul {
white-space: nowrap;
width: 100%;
overflow-x: auto;
padding: 0;
background: #ededed;
border-radius: 5px;
}
.woocommerce-MyAccount-navigation ul li {
list-style: none;
display: inline-block;
padding: 5px 10px;
margin: 3px;
}
.woocommerce-MyAccount-navigation ul li a {
color: #000;
}
.woocommerce-MyAccount-navigation ul li.is-active {
background: var(--primary-color);
border-radius: 3px;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
color: white;
}
.woocommerce form .form-row .input-checkbox {
margin: 5px 0px 0px 0;
transform: scale(1.2);
}
.woocommerce-terms-and-conditions-checkbox-text {
display: inline-block;
padding-left: 20px;
line-height: 1.4;
}
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
border: 2px solid var(--secondary-color);
border-radius: 0px;
max-width: 450px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
#customer_login .u-column1 h2, #customer_login .u-column2 h2{
text-align: center;
font-size: 18px;
}
#customer_login .woocommerce-form button[type="submit"]{
width: 100%;
padding: 12px 15px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
}
.woocommerce #customer_login form label{
font-weight: normal;
font-size: 14px;
color: var(--primary-color);
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
width: 100%;
float: unset;
}
.woocommerce-account .woocommerce-MyAccount-content{
padding: 10px;
}
.checkout.woocommerce-checkout img{
background: white!important;
}
/*End*/
/*Footer*/
footer{
position: relative;
padding: 70px 0 0;
z-index: 1;
background: #232122;
}
footer:after{
content: "";
background-image: url(../img/bg_footer_2.jpg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: .2;
z-index: -1;
}
footer p{
color: var(--secondary-color);
font-size: 16px;
}
.fbraning img{
max-height: 100px;
width: unset;
}
.fnote h3{
margin-top: 0;
}
.fsocial ul{
padding: 0;
margin: 0;
}
.fsocial li{
display: inline-block;
width: 32px;
height: 32px;
background: var(--black);
color: var(--txtcolor2);
padding: 3px 0 0;
font-size: 16px;
border-radius: 10px;
margin: 0px 5px 5px 0px;
text-align: center;
line-height: 1.6;
}
.fsocial li svg{
fill: var(--primary-color);
position: relative;
top: 2px;
}
.fsocial li:hover{
background: var(--primary-color);
color: #fff;
transform: scale(1.2);
}
.fsocial li:hover svg{
fill: #fff;
}
.fpoints h3{
font-size: 15px;
font-weight: 600;
margin: 0 0 20px;
}
.fpoints ul{
padding: 0;
margin: 0;
}
.fpoints li{
position: relative;
list-style: none;
color: black;
margin-bottom: 6px;
padding: 3px 0 3px 15px;
border-radius: 5px;
}
.fpoints li:hover{
/*background: gainsboro;*/
}
.fpoints li:after{
content: "";
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-50%) scale(0.5);
height: 5px;
width: 5px;
background-color: var(--primary-color);
transition: .8s;
border-radius: 50%;
/*visibility: hidden;
opacity: 0;*/
}
.fpoints li:hover:after{
transform: translateY(-50%) scale(2);
border-radius: 50%;
visibility: visible;
opacity: 1;
}
.fpoints li a{
color: var(--secondary-color);
display: block;
font-size: 16px;
}
.fpoints li:hover a{
font-weight: 500;
color: var(--txtcolor2);
}
.ftb{
border-top: 1px solid #dcdcdc;
padding: 30px 0;
margin-top: 35px;
}
.ftb p span{
color: black;
padding: 5px;
margin: 0 10px;
}
.ftb p strong, .ftb p b{
font-weight: 600;
}
.cpyrgt p{
margin: 0;
}
.cpyrgt a{
color: inherit;
/*cursor: none;
pointer-events: none;
position: absolute;
right: 0;
top: 100%;
color: #f4f4f4;
font-size: 8px;
padding-right: 15px;*/
}
/*Footer end*/
/*extra*/
.slideanim {
opacity: 0;
visibility:hidden;
transition: .3s ease-in-out;
}
.slidelrmain {
opacity: 0;
visibility:hidden;
transition: .3s ease-in-out;
}
.sliderlmain {
opacity: 0;
visibility:hidden;
transition: .3s ease-in-out;
}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
opacity: 1;
animation-delay: var(--d);
transition: .3s ease-in-out;
}
.slidelr {
animation-name: slidelr;
-webkit-animation-name: slidelr;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
opacity: 1;
transition: .3s ease-in-out;
}
.sliderl {
animation-name: sliderl;
-webkit-animation-name: sliderl;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
opacity: 1;
transition: .3s ease-in-out;
}
/*end*/
/*Animations*/
@keyframes slide {
0% {
visibility:hidden;
transform: translateY(70%);
}
100% {
visibility: visible;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
visibility:hidden;
-webkit-transform: translateY(-70%);
}
100% {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0%);
}
}
@keyframes slidelr {
0% {
opacity: 0;
transform: translateX(-70%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@-webkit-keyframes slidelr {
0% {
opacity: 0;
-webkit-transform: translateX(-70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@keyframes sliderl {
0% {
opacity: 0;
transform: translateX(70%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@-webkit-keyframes sliderl {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
/*pulsh effect*/
@keyframes pulse{
0%{
box-shadow: 0 0 0 0 rgb(19 56 123 / 10%), 0 0 0 0 rgb(19 56 123 / 12%);
}
40%{
box-shadow: 0 0 0 50px rgba(99, 69, 238,0), 0 0 0 0 rgb(19 56 123 / 21%);
}
80%{
box-shadow: 0 0 0 50px rgba(99, 69, 238,0), 0 0 0 30px rgba(99, 69, 238,0);
}
100%{
box-shadow: 0 0 0 0 rgba(99, 69, 238,0), 0 0 0 30px rgba(99, 69, 238,0);
}
}
/* grow effect */
@keyframes grow{
0%{
transform: translate(-50%, -50%) scale(1.0);
}
40%{
transform: translate(-50%, -50%) scale(1.1);
}
80%{
transform: translate(-50%, -50%) scale(0.8);
}
100%{
transform: translate(-50%, -50%) scale(1.0);
}
}
/*fly effect*/
@keyframes fly{
0%{
transform: translateY(0);
}
15%{
transform: translateY(4%);
}
40%{
transform: translateY(-7%);
}
60%{
transform: translateY(7%);
}
80%{
transform: translateY(-4%);
}
100%{
transform: translateY(0%);
}
}
/*end*/
@media (max-width: 991px){
body{
overflow-x: hidden;
}
.showcase-content{
margin-bottom: 140px;
}
.workimgs .img1{
left: -10%;
}
/*footer*/
footer{
text-align: center;
}
.fpoints ul{
padding: 0;
}
.fpoints li{
display: inline-block;
padding: 0 10px;
}
.fpoints li:after{
display: none;
}
.ftb{
display: block;
}
.cpyrgt, footer .fsocial{
text-align: center;
}
.cpyrgt p{
font-size: 12px;
}
footer .mt_50{
margin-top: 50px!important;
}
/*end*/
.flip-card{
width: calc(50% - 20px);
margin-bottom: 35px;
}
.flip-card-inner{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
}
@media (max-width: 767px){
body{
font-size: 14px;
}
.m_off{
display: none!important;
}
.m_on{
display: block!important;
}
.heading{
font-size: 28px;
}
/*Header*/
header {
margin-bottom: 80px;
}
.navbar{
background: #000 !important;
backdrop-filter: blur(7px);
}
.navbar.navbar-default .container{
display: block;
}
.navbar .brand {
max-width: unset;
width: unset;
max-height: 60px;
}
.navbar .collapse {
display: inherit;
}
.navbar-collapse.collapse[aria-expanded="false"]{
visibility: visible;
opacity: 1;
margin: 0;
}
.navbar-collapse.collapse[aria-expanded="true"]{
height: calc(100vh - 77px);
}
.navbar-default .navbar-toggle .icon-bar{
background-color: #fff;
}
.navbar-default .navbar-toggle:hover .icon-bar{
/*width: initial;*/
}
.navbar-default .navbar-collapse{
max-height: unset!important;
}
.navbar .menu{
max-height: 100%;
/*overflow: auto;*/
display: block;
}
.navbar .navbar-brand{
padding-left: 15px;
}
.navbar-default .navbar-toggle{
margin-top: 14px;
margin-right: 5px;
}
.navbar .menu li{
display: block;
text-align: center;
border-radius: 6px;
}
.navbar .menu li.account{
position: fixed;
top: 42px;
right: 5px;
font-size: 26px;
}
.navbar .menu .sub-menu{
position: relative;
width: 100%;
top: 0!important;
border-radius: 0 0 5px 5px;
background: #202020;
display: none;
visibility: visible!important;
opacity: 1!important;
}
.navbar .menu li .sub-menu.active{
display: block;
}
.menu .navcticn.active{
transform: rotate(180deg);
}
.upmenus .row{
width: unset;
}
.upmenus p{
text-align: center;
}
.upmenus .custom_manu{
text-align: center;
}
.upmenus .custom_manu li.m_off{
display: none!important;
}
/*end*/
/*Banner*/
.showcase-content{
text-align: center;
padding-top: 10vh;
padding-bottom: 0;
margin: 0;
}
.showcase .flxcontrol{
height: unset;
width:100%;
}
.heroimgcont .heroitems .heroitemimg img{
height: calc(80vh - 150px);
bottom: 0;
}
.showcase-content .btn-grp{
flex-wrap: wrap;
justify-content: center;
}
.showcase-content .btn-grp a:first-child{
width: 100%;
text-align: center;
margin-bottom: 15px;
}
.showcase-content h1.bnrheading{
font-size: 28px;
}
.showcase-content p.bnrp{
font-size: 14px;
}
.pts .pts-box {
width: calc(100% - 40px);
margin: 30px 15px;
}
.pts .pts-box .icon{
max-width: 100px;
margin: 0 auto 20px;
}
.pts .pts-box .info{
width: 100%;
text-align: center;
}
.pts .pts-box:after {
top: 104%;
transform: translateX(-50%);
left: 50%;
width: 4px;
height: 50px;
}
.pts .pts-box:before {
top: -34%;
transform: translateX(-50%);
left: 50%;
right: unset;
opacity: 0;
}
/*end*/
.workimgs.flxcontrol{
justify-content: space-between;
}
.workimgs .boxes.col-xs-6{
max-width: calc(50% - 18px);
}
.workimgs .boxes{
padding: 10px 8px;
height: 270px;
text-align: center;
gap: 5px;
}
/*Defaut page baanr*/
.flx{
min-height: calc(35vh - 75px);
}
.flxcont h1{
font-size: 32px;
}
.bg_box:after{
min-width: 95%;
}
/* End */
/*Section 2*/
.section-2{
overflow: hidden;
margin-bottom: 0;
padding-bottom: 0;
}
.abtinfobox .flxcontrol h3{
font-size: 28px;
}
.abtinfobox .flxcontrol {
justify-content: space-evenly;
}
/*end*/
/*Section 3*/
.section-3{
margin-top: 0;
margin-bottom: 50px;
}
.section-3 .flxcontrol .col-md-6.col-sm-6{
width: 100%;
}
.section-3 .flxcontrol .col-md-6.col-sm-6:after {
top: 100%!important;
transform: translateX(-50%) rotate(90deg)!important;
left: 50%!important;
width: 95px!important;
height: 60px!important;
background: url(../img/joining1.png) no-repeat center center/cover!important;
}
/*end*/
/*Section 4*/
.section-4{
margin-top: 0;
margin-bottom: 30px;
}
.section-4 .row>.flxcontrol{
padding: 5px 0px 10px 0px;
width: calc(100% - 30px);
margin-left: 15px;
}
.section-4 .row>.flxcontrol:after{
width: 400px;
height: 400px;
opacity: .07;
}
.sec4item .infocont h3{
font-size: 16px;
}
.section-4 .btn-gradient{
margin: 30px 0;
}
/*end*/
/*Section 5*/
.section-5{
background-position: left;
}
/*end*/
/*Section 6*/
.section-6 .bgvid{
padding-bottom: 100vh;
}
.bgvid iframe{
min-width: 1900px;
}
/*end*/
/*contact section*/
.cnt_info{
padding: 35px;
}
.cnt_form {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.cnt_form .form-container:after{
left: -140px;
top: -40px;
width: 180px;
}
/*end*/
/*Section 9*/
.section-9{
padding: 0 15px;
}
.section-9 h2{
margin-top: 0;
}
.section-9 .unsetpos{
border: none;
}
/*end*/
.sec4item{
padding:15px 10px 15px 10px;
}
.sec4item .icon{
margin-bottom: 20px;
}
.sec4item .icon img {
width: 40px;
}
.case_swiper .swiper-slide > .row, .studio-container{
flex-direction: column;
gap: 15px;
}
.section-2i .company.award h3{
font-size: 16px;
}
.section-7 .swiper-slide-next .sec7item{
background: var(--lightgray);
z-index: 1;
transform: none;
}
.section-7 .swiper-slide-active .sec7item{
background: #fff;
z-index: 2;
transform: scale(1.15);
max-width: 80vw;
margin: 0 auto;
width: 450px;
}
.heading2 b{
font-size: 32px;
}
}
/*light mode*/
body.lightmode{
background: #fff;
color: var(--black);
}
.lightmode .breadcrumb{
background-color: #f5f5f5;
}
/*Heading*/
.lightmode header.fixed .navbar{
background: #fff;
box-shadow: 0 0 20px rgb(0 0 0 / 0.1);
}
.lightmode .navbar .menu li a,
.lightmode .navbar .menu li .navcticn{
color: var(--dark-color);
}
.lightmode .navbar .menu li:hover a,
.lightmode .navbar .menu li:hover .navcticn{
color: var(--primary-color);
}
.lightmode .navbar .menu li.special:after{
background: linear-gradient(45deg, var(--dark-color), var(--dark-color), var(--primary-color));
}
.lightmode .navbar .menu .sub-menu li a {
color: var(--dark-color);
}
.lightmode .navbar .menu .sub-menu li:hover a {
color: var(--primary-color);
}
/*end*/
/*Banner Section*/
.lightmode .showcase-content h1.bnrheading{
color: var(--white);
}
.lightmode .showcase-content p.bnrp {
color: #b7d1ff;
}
/*end*/
/*end*/