1294 lines
38 KiB
SCSS
1294 lines
38 KiB
SCSS
@use "../utils" as *;
|
|
|
|
/*=============================
|
|
07. Services
|
|
===============================*/
|
|
.services {
|
|
&-bg {
|
|
background-size: cover;
|
|
background-position: center;
|
|
padding: 120px 0;
|
|
@media #{$xs} {
|
|
padding: 100px 0;
|
|
}
|
|
}
|
|
&__bg {
|
|
&-three {
|
|
background-size: cover;
|
|
background-position: center;
|
|
padding: 120px 0 90px;
|
|
@media #{$xs} {
|
|
padding: 100px 0 70px;
|
|
}
|
|
}
|
|
&-four {
|
|
background-size: cover;
|
|
background-position: center;
|
|
padding: 120px 0 90px;
|
|
position: relative;
|
|
z-index: 1;
|
|
@media #{$xs} {
|
|
padding: 100px 0 70px;
|
|
}
|
|
}
|
|
&-five {
|
|
background-size: cover;
|
|
background-position: center;
|
|
padding: 40px 0 30px;
|
|
@media #{$xs} {
|
|
padding: 70px 0;
|
|
}
|
|
}
|
|
&-six {
|
|
background-size: cover;
|
|
background-position: center;
|
|
padding: 120px 0;
|
|
@media #{$xs} {
|
|
padding: 100px 0;
|
|
}
|
|
}
|
|
&-seven {
|
|
background-size: cover;
|
|
background-position: center;
|
|
padding: 55px 0 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
@media #{$xs} {
|
|
padding: 40px 0 10px;
|
|
}
|
|
}
|
|
}
|
|
&__area-two {
|
|
background: var(--tg-heading-color);
|
|
padding: 120px 0 90px;
|
|
position: relative;
|
|
z-index: 1;
|
|
@media #{$xs} {
|
|
padding: 100px 0 70px;
|
|
}
|
|
}
|
|
&-item-wrap {
|
|
& .row {
|
|
--bs-gutter-x: 24px;
|
|
}
|
|
}
|
|
&-item {
|
|
background: var(--tg-color-white-default);
|
|
@include border-radius(10px);
|
|
@include transition(0.3s);
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
&:hover {
|
|
box-shadow: 0px 4px 30px 0px #cfdee4;
|
|
& .services-content {
|
|
& .icon {
|
|
background: var(--tg-theme-secondary);
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__item {
|
|
&-two {
|
|
border: 2px solid #282b7c;
|
|
@include border-radius(10px);
|
|
padding: 35px;
|
|
margin-bottom: 30px;
|
|
background: var(--tg-heading-color);
|
|
|
|
&:hover {
|
|
& .services__icon-two {
|
|
@include transform(rotateY(180deg));
|
|
}
|
|
}
|
|
}
|
|
&-three {
|
|
background: var(--tg-color-white-default);
|
|
padding: 40px 40px;
|
|
@include border-radius(15px);
|
|
margin-bottom: 30px;
|
|
@media #{$lg} {
|
|
padding: 35px 30px;
|
|
}
|
|
&:hover {
|
|
& .services__icon-three {
|
|
& i {
|
|
@include transform(rotateY(180deg));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-four {
|
|
background: var(--tg-color-white-default);
|
|
@include flexbox();
|
|
align-items: center;
|
|
gap: 50px;
|
|
padding: 30px 80px 30px 30px;
|
|
@include border-radius(15px);
|
|
@media #{$lg} {
|
|
padding: 30px 20px 30px 20px;
|
|
gap: 25px;
|
|
}
|
|
@media #{$md} {
|
|
flex-wrap: wrap;
|
|
padding: 30px 30px;
|
|
}
|
|
@media #{$xs} {
|
|
padding: 30px 25px;
|
|
}
|
|
}
|
|
&-five {
|
|
@include box-shadow(0px 10px 20px 0px rgba(0, 0, 0, 0.1));
|
|
border: 1px solid #e9e9f0;
|
|
background: var(--tg-color-white-default);
|
|
@include border-radius(15px);
|
|
padding: 60px 30px 45px;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
@include transition(0.3s);
|
|
&:hover {
|
|
@include transform(translateY(-5px));
|
|
}
|
|
}
|
|
&-top {
|
|
@include flexbox();
|
|
align-items: center;
|
|
gap: 30px;
|
|
margin-bottom: 22px;
|
|
& .title {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
margin-bottom: 0;
|
|
@media #{$lg} {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
&-wrap {
|
|
&-two {
|
|
& .row {
|
|
& [class*="col-"] {
|
|
&:nth-child(odd) {
|
|
& .services__item-five {
|
|
margin-top: 30px;
|
|
@media #{$md} {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-thumb {
|
|
@include border-radius(10px 10px 0 0);
|
|
overflow: hidden;
|
|
position: relative;
|
|
& img {
|
|
max-height: 200px;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
}
|
|
&__thumb {
|
|
&-four {
|
|
width: 337px;
|
|
flex: 0 0 auto;
|
|
@media #{$lg} {
|
|
width: 300px;
|
|
}
|
|
@media #{$md} {
|
|
width: 100%;
|
|
}
|
|
& img {
|
|
@include border-radius(12px);
|
|
height: 380px;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
@media #{$lg} {
|
|
height: 340px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__icon {
|
|
&-two {
|
|
font-size: 60px;
|
|
line-height: 0;
|
|
color: var(--tg-theme-primary);
|
|
display: inline-block;
|
|
@include transition(0.4s);
|
|
margin-bottom: 20px;
|
|
}
|
|
&-three {
|
|
width: 70px;
|
|
height: 70px;
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
@include border-radius(50%);
|
|
background: var(--tg-color-gray-3);
|
|
border: 1px solid var(--tg-color-gray-2);
|
|
flex: 0 0 auto;
|
|
line-height: 0;
|
|
font-size: 42px;
|
|
color: var(--tg-theme-secondary);
|
|
position: relative;
|
|
& i {
|
|
@include transition(0.4s);
|
|
@include transform(rotateY(0deg));
|
|
}
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
right: -18px;
|
|
top: 50%;
|
|
@include transform(translateY(-50%));
|
|
width: 3px;
|
|
height: 40px;
|
|
background: #dce7ec;
|
|
@include border-radius(3px);
|
|
}
|
|
}
|
|
&-five {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: var(--tg-theme-primary);
|
|
font-size: 45px;
|
|
line-height: 0;
|
|
display: inline-block;
|
|
margin-bottom: 50px;
|
|
}
|
|
&-shape {
|
|
& .shape {
|
|
position: absolute;
|
|
z-index: -1;
|
|
&:nth-child(1) {
|
|
left: 50%;
|
|
top: 50%;
|
|
@include transform(translate(-50%, -50%));
|
|
& svg {
|
|
color: var(--tg-color-yellow-light);
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
left: -2px;
|
|
bottom: -13px;
|
|
& svg {
|
|
color: var(--tg-theme-primary);
|
|
}
|
|
}
|
|
&:nth-child(3) {
|
|
left: 50px;
|
|
top: -18px;
|
|
& svg {
|
|
color: var(--tg-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-content {
|
|
padding: 30px 25px;
|
|
position: relative;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
& .icon {
|
|
width: 70px;
|
|
height: 70px;
|
|
background: var(--tg-color-gray-3);
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 36px;
|
|
line-height: 0;
|
|
color: var(--tg-theme-secondary);
|
|
border: 3px solid var(--tg-color-white-default);
|
|
@include border-radius(50%);
|
|
position: absolute;
|
|
left: 30px;
|
|
top: -55px;
|
|
z-index: 2;
|
|
@include transition(0.4s);
|
|
}
|
|
& .title {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
margin-bottom: 30px;
|
|
& a {
|
|
&:hover {
|
|
color: var(--tg-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
& p {
|
|
margin-bottom: 22px;
|
|
}
|
|
& .btn {
|
|
background: var(--tg-color-gray-3);
|
|
color: var(--tg-theme-secondary);
|
|
padding: 16px 20px;
|
|
margin-top: auto;
|
|
&:hover {
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
}
|
|
&__content {
|
|
&-two {
|
|
& .title {
|
|
color: var(--tg-color-white-default);
|
|
margin-bottom: 15px;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
}
|
|
& p {
|
|
margin-bottom: 25px;
|
|
color: var(--tg-color-gray-2);
|
|
}
|
|
& .btn {
|
|
background: #2e328b;
|
|
color: #9597c8;
|
|
padding: 16px 20px;
|
|
&::before {
|
|
background: var(--tg-color-white-default);
|
|
}
|
|
&::after {
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
&:hover {
|
|
color: var(--tg-theme-secondary);
|
|
&::after {
|
|
color: var(--tg-theme-secondary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-three {
|
|
& p {
|
|
margin-bottom: 25px;
|
|
}
|
|
& .btn {
|
|
background: var(--tg-color-yellow-light);
|
|
color: var(--tg-theme-primary);
|
|
&:hover {
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
}
|
|
&-four {
|
|
& .title {
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
@media #{$lg} {
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
& p {
|
|
margin-bottom: 20px;
|
|
}
|
|
& .about__list-box {
|
|
margin-bottom: 20px;
|
|
& li {
|
|
& i {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
}
|
|
& .btn {
|
|
background: var(--tg-color-gray-3);
|
|
color: var(--tg-theme-secondary);
|
|
&:hover {
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
}
|
|
&-five {
|
|
& .title {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
color: var(--tg-theme-third);
|
|
}
|
|
& p {
|
|
margin-bottom: 25px;
|
|
color: var(--tg-color-gray-8);
|
|
}
|
|
& .btn {
|
|
background: var(--tg-color-gray-3);
|
|
color: var(--tg-theme-secondary);
|
|
padding: 16px 24px;
|
|
&:hover {
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-bottom-content {
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
@media #{$xs} {
|
|
flex-wrap: wrap;
|
|
text-align: center;
|
|
}
|
|
& p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
&__tab {
|
|
&-wrap {
|
|
@include flexbox();
|
|
gap: 30px;
|
|
@media #{$xs} {
|
|
flex-wrap: wrap;
|
|
}
|
|
& .nav-tabs {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
flex-direction: column;
|
|
width: 330px;
|
|
@media #{$lg} {
|
|
width: 270px;
|
|
}
|
|
@media #{$xs} {
|
|
width: auto;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
& .nav-item {
|
|
margin-bottom: 5px;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
& .nav-link {
|
|
border: none;
|
|
background: linear-gradient(90deg, #3b3d9a 13.19%, rgba(44, 46, 143, 0.54) 100%);
|
|
@include border-radius(10px);
|
|
@include flexbox();
|
|
align-items: center;
|
|
margin: 0;
|
|
gap: 11px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
font-family: var(--tg-heading-font-family);
|
|
color: var(--tg-color-white-default);
|
|
padding: 15px 55px 15px 25px;
|
|
position: relative;
|
|
width: 330px;
|
|
@include transition(0.3s);
|
|
@media #{$lg} {
|
|
width: 270px;
|
|
font-size: 18px;
|
|
padding: 15px 45px 15px 20px;
|
|
}
|
|
& i {
|
|
font-size: 40px;
|
|
line-height: 0;
|
|
color: var(--tg-theme-primary);
|
|
@include transition(0.3s);
|
|
@media #{$lg} {
|
|
font-size: 35px;
|
|
}
|
|
}
|
|
&::after {
|
|
content: "\f10a";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 20px;
|
|
@include transform(translateY(-50%));
|
|
font-family: flaticon;
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
line-height: 0;
|
|
}
|
|
&.active {
|
|
background: var(--tg-theme-primary);
|
|
color: var(--tg-color-white-default);
|
|
& i {
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__shape-wrap {
|
|
& img {
|
|
position: absolute;
|
|
z-index: -1;
|
|
&:nth-child(1) {
|
|
left: 0;
|
|
bottom: 0;
|
|
@media #{$md} {
|
|
width: 200px;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
right: 0;
|
|
top: 0;
|
|
@media #{$md} {
|
|
width: 200px;
|
|
}
|
|
}
|
|
}
|
|
&-two {
|
|
& img {
|
|
position: absolute;
|
|
z-index: -1;
|
|
&:nth-child(1) {
|
|
left: 0;
|
|
top: 0;
|
|
@media #{$xs} {
|
|
width: 200px;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
right: 0;
|
|
bottom: 0;
|
|
@media #{$xs} {
|
|
width: 200px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__details {
|
|
&-area {
|
|
padding: 40px 0;
|
|
@media #{$xs} {
|
|
padding: 40px 0;
|
|
}
|
|
}
|
|
&-wrap {
|
|
& .row {
|
|
& .col-70 {
|
|
width: 70.4%;
|
|
flex: 0 0 auto;
|
|
@media #{$md} {
|
|
width: 100%;
|
|
}
|
|
}
|
|
& .col-30 {
|
|
width: 29.6%;
|
|
flex: 0 0 auto;
|
|
@media #{$md} {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-thumb {
|
|
margin-bottom: 35px;
|
|
@media #{$xs} {
|
|
margin-bottom: 25px;
|
|
}
|
|
& img {
|
|
@include border-radius(10px);
|
|
width: 100%;
|
|
min-height: 250px;
|
|
object-fit: cover;
|
|
}
|
|
&-two {
|
|
margin-bottom: 0;
|
|
@media #{$xs} {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
}
|
|
&-content {
|
|
& > .title {
|
|
margin-bottom: 22px;
|
|
font-size: 40px;
|
|
font-weight: 600;
|
|
text-transform: capitalize;
|
|
@media #{$lg} {
|
|
font-size: 36px;
|
|
}
|
|
@media #{$xs} {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
& > p {
|
|
margin-bottom: 20px;
|
|
&.last-info {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
& .title-two {
|
|
margin-bottom: 20px;
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
@media #{$lg} {
|
|
font-size: 32px;
|
|
}
|
|
@media #{$xs} {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
&-two {
|
|
& > .title {
|
|
font-size: 36px;
|
|
@media #{$lg} {
|
|
font-size: 32px;
|
|
}
|
|
@media #{$xs} {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-top {
|
|
margin-bottom: 30px;
|
|
& .row {
|
|
& .col-49 {
|
|
width: 48.9%;
|
|
flex: 0 0 auto;
|
|
@media #{$xs} {
|
|
width: 100%;
|
|
}
|
|
}
|
|
& .col-51 {
|
|
width: 51.1%;
|
|
flex: 0 0 auto;
|
|
@media #{$xs} {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-content {
|
|
& .title {
|
|
margin-bottom: 15px;
|
|
font-size: 40px;
|
|
@media #{$lg} {
|
|
font-size: 36px;
|
|
}
|
|
@media #{$xs} {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
& p {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
}
|
|
&-list {
|
|
margin: 35px 0 10px;
|
|
&-two {
|
|
margin: 25px 0 10px;
|
|
}
|
|
&-box {
|
|
@include flexbox();
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
@include box-shadow(0px 7px 15px 0px rgba(0, 0, 0, 0.05));
|
|
border: 1px solid #e5e7e8;
|
|
@include border-radius(10px);
|
|
padding: 30px 30px;
|
|
margin-bottom: 30px;
|
|
@media #{$lg} {
|
|
gap: 15px;
|
|
padding: 30px 25px;
|
|
flex-wrap: wrap;
|
|
}
|
|
& .icon {
|
|
width: 70px;
|
|
height: 70px;
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--tg-theme-primary);
|
|
flex: 0 0 auto;
|
|
@include border-radius(8px);
|
|
color: var(--tg-color-white-default);
|
|
font-size: 50px;
|
|
line-height: 0;
|
|
& i {
|
|
@include transform(rotateY(0));
|
|
@include transition(0.4s);
|
|
}
|
|
}
|
|
& .content {
|
|
& .title {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
& p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
&:hover {
|
|
& .icon {
|
|
& i {
|
|
@include transform(rotateY(180deg));
|
|
}
|
|
}
|
|
}
|
|
&-two {
|
|
@include box-shadow(0px 7px 15px 0px rgba(0, 0, 0, 0.05));
|
|
background: #fffbf4;
|
|
border: 1px solid #fbd58a;
|
|
@include border-radius(10px);
|
|
padding: 30px 30px 30px;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
@media #{$lg} {
|
|
padding: 30px 18px 30px;
|
|
}
|
|
@media #{$xs} {
|
|
padding: 30px 30px 30px;
|
|
}
|
|
& .icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--tg-theme-primary);
|
|
color: var(--tg-color-white-default);
|
|
line-height: 0;
|
|
@include border-radius(50%);
|
|
margin: 0 auto 30px;
|
|
font-size: 40px;
|
|
& i {
|
|
@include transform(rotateY(0));
|
|
@include transition(0.4s);
|
|
}
|
|
}
|
|
& .content {
|
|
& .title {
|
|
margin-bottom: 10px;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
@media #{$lg} {
|
|
font-size: 20px;
|
|
}
|
|
@media #{$xs} {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
& p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
&:hover {
|
|
& .icon {
|
|
& i {
|
|
@include transform(rotateY(180deg));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-three {
|
|
@include flexbox();
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
margin-bottom: 50px;
|
|
@media #{$lg} {
|
|
gap: 14px;
|
|
margin-bottom: 30px;
|
|
}
|
|
& .icon {
|
|
font-size: 60px;
|
|
line-height: 0;
|
|
color: var(--tg-theme-primary);
|
|
@include transition(0.3s);
|
|
@include transform(rotateY(0) translateY(3px));
|
|
}
|
|
& .content {
|
|
& .title {
|
|
margin-bottom: 5px;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
}
|
|
& p {
|
|
margin-bottom: 0;
|
|
& br {
|
|
@media #{$lg} {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
&:hover {
|
|
& .icon {
|
|
@include transform(rotateY(180deg) translateY(3px));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-inner {
|
|
margin: 35px 0 30px;
|
|
& .row {
|
|
& .col-44 {
|
|
width: 43.9%;
|
|
flex: 0 0 auto;
|
|
@media #{$xs} {
|
|
width: 100%;
|
|
}
|
|
}
|
|
& .col-56 {
|
|
width: 56.1%;
|
|
flex: 0 0 auto;
|
|
@media #{$xs} {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-two {
|
|
margin: 80px 0 45px;
|
|
@media #{$lg} {
|
|
margin: 50px 0 40px;
|
|
}
|
|
& .row {
|
|
& .col-48 {
|
|
width: 48.5%;
|
|
flex: 0 0 auto;
|
|
@media #{$xs} {
|
|
width: 100%;
|
|
}
|
|
}
|
|
& .col-52 {
|
|
width: 51.5%;
|
|
flex: 0 0 auto;
|
|
@media #{$xs} {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-three {
|
|
margin-bottom: 40px;
|
|
}
|
|
&-four {
|
|
margin: 40px 0 35px;
|
|
& .services__details-inner-content-two {
|
|
& p {
|
|
margin-bottom: 25px;
|
|
}
|
|
}
|
|
}
|
|
&-five {
|
|
margin: 0 0 55px;
|
|
& .services__details-inner-content-three {
|
|
margin: 0 30px 0 0;
|
|
@media #{$lg} {
|
|
margin: 0 0 0 0;
|
|
}
|
|
@media #{$md} {
|
|
margin: 0 0 30px 0;
|
|
}
|
|
}
|
|
& .services__details-list-box {
|
|
padding: 25px 25px;
|
|
margin-bottom: 20px;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
&-six {
|
|
margin: 30px 0 40px;
|
|
& .services__details-inner-content-three {
|
|
margin: 0 60px 0 0;
|
|
@media #{$lg} {
|
|
margin: 0 0 0 0;
|
|
}
|
|
@media #{$md} {
|
|
margin: 0 0 30px 0;
|
|
}
|
|
}
|
|
}
|
|
&-img {
|
|
position: relative;
|
|
@media #{$xs} {
|
|
margin-bottom: 30px;
|
|
}
|
|
& img {
|
|
@include border-radius(10px);
|
|
min-height: 230px;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
& .play-btn {
|
|
width: 62px;
|
|
height: 62px;
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
@include transform(translate(-50%, -50%));
|
|
background: var(--tg-color-white-default);
|
|
@include border-radius(50%);
|
|
color: var(--tg-theme-secondary);
|
|
font-size: 18px;
|
|
&:hover {
|
|
background: var(--tg-theme-primary);
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
&-wrap {
|
|
margin: 30px 0 0;
|
|
& img {
|
|
@include border-radius(10px);
|
|
margin-bottom: 30px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-content {
|
|
& .title {
|
|
margin-bottom: 15px;
|
|
font-size: 24px;
|
|
text-transform: capitalize;
|
|
& br {
|
|
@media #{$lg} {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
& p {
|
|
margin-bottom: 20px;
|
|
}
|
|
&-two {
|
|
& .title {
|
|
font-size: 36px;
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
@media #{$lg} {
|
|
font-size: 32px;
|
|
}
|
|
@media #{$xs} {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
& p {
|
|
margin-bottom: 0;
|
|
width: 90%;
|
|
@media #{$lg} {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-three {
|
|
margin-left: 30px;
|
|
@media #{$lg} {
|
|
margin-left: 0;
|
|
}
|
|
@media #{$xs} {
|
|
margin-top: 30px;
|
|
}
|
|
& .title {
|
|
font-size: 30px;
|
|
margin-bottom: 20px;
|
|
@media #{$xs} {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
& p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
&-graph {
|
|
& img {
|
|
@include box-shadow(-7px 7px 0px 0px rgba(0, 0, 0, 0.1));
|
|
border: 0.8px solid #dadada;
|
|
@include border-radius(12px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__sidebar {
|
|
margin-right: 20px;
|
|
@media #{$lg} {
|
|
margin-right: 0;
|
|
}
|
|
@media #{$md} {
|
|
margin-top: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
&__widget {
|
|
&-two {
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
@include border-radius(0!important);
|
|
}
|
|
&-three {
|
|
border: none !important;
|
|
background: var(--tg-color-gray-3);
|
|
}
|
|
}
|
|
&__cat {
|
|
&-list {
|
|
&-two {
|
|
& .list-wrap {
|
|
& li {
|
|
margin-bottom: 10px;
|
|
& a {
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--tg-color-gray-3);
|
|
border: 1px solid #e0eef3;
|
|
@include border-radius(4px);
|
|
padding: 16px 20px;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: var(--tg-body-color);
|
|
& i {
|
|
font-size: 24px;
|
|
line-height: 0;
|
|
@include transition(0.3s);
|
|
}
|
|
&:hover {
|
|
background: var(--tg-theme-secondary);
|
|
color: var(--tg-color-white-default);
|
|
border-color: var(--tg-theme-secondary);
|
|
& i {
|
|
color: var(--tg-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-three {
|
|
& .list-wrap {
|
|
& li {
|
|
& a {
|
|
background: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__brochure {
|
|
& p {
|
|
margin-bottom: 15px;
|
|
}
|
|
& a {
|
|
@include flexbox();
|
|
align-items: center;
|
|
background: var(--tg-color-gray-3);
|
|
@include border-radius(5px);
|
|
padding: 15px 20px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--tg-heading-color);
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
& i {
|
|
font-size: 18px;
|
|
}
|
|
&:hover {
|
|
background: var(--tg-theme-secondary);
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
&-two {
|
|
& a {
|
|
background: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
}
|
|
&__contact {
|
|
background: var(--tg-theme-secondary);
|
|
@include border-radius(10px);
|
|
padding: 50px 40px 55px;
|
|
text-align: center;
|
|
@media #{$lg} {
|
|
padding: 40px 20px 40px;
|
|
}
|
|
@media #{$xs} {
|
|
padding: 40px 30px 40px;
|
|
}
|
|
& .title {
|
|
color: var(--tg-color-white-default);
|
|
margin-bottom: 30px;
|
|
font-size: 24px;
|
|
}
|
|
& .btn {
|
|
gap: 5px;
|
|
padding: 13px 24px;
|
|
& i {
|
|
font-size: 24px;
|
|
line-height: 0;
|
|
}
|
|
&::after {
|
|
display: none;
|
|
}
|
|
&::before {
|
|
background: var(--tg-color-gray-3);
|
|
}
|
|
&:hover {
|
|
color: var(--tg-theme-secondary);
|
|
}
|
|
}
|
|
&-two {
|
|
background-size: cover;
|
|
background-position: center;
|
|
padding: 30px 40px 180px;
|
|
@media #{$lg} {
|
|
padding: 30px 20px 180px;
|
|
}
|
|
@media #{$md} {
|
|
padding: 30px 20px 70px;
|
|
}
|
|
& .title {
|
|
color: var(--tg-theme-secondary);
|
|
}
|
|
& .btn {
|
|
@include border-radius(30px);
|
|
&::before {
|
|
background: var(--tg-theme-secondary);
|
|
}
|
|
&:hover {
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__form {
|
|
& form {
|
|
& .form-grp {
|
|
margin-bottom: 8px;
|
|
& textarea,
|
|
& input {
|
|
width: 100%;
|
|
border: 1px solid #e0e6f2;
|
|
background: var(--tg-color-white-default);
|
|
@include border-radius(5px);
|
|
padding: 14px 15px;
|
|
font-size: 14px;
|
|
color: var(--tg-body-color);
|
|
font-weight: 500;
|
|
height: 50px;
|
|
display: block;
|
|
&::placeholder {
|
|
font-size: 14px;
|
|
color: #667594;
|
|
font-weight: 500;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
& textarea {
|
|
min-height: 120px;
|
|
max-height: 120px;
|
|
}
|
|
}
|
|
& .btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shine {
|
|
&-animate {
|
|
display: block;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 1;
|
|
&::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
display: block;
|
|
content: "";
|
|
width: 50%;
|
|
height: 100%;
|
|
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
|
|
background: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
right top,
|
|
from(rgba(255, 255, 255, 0)),
|
|
to(rgba(255, 255, 255, 0.3))
|
|
);
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
|
|
-webkit-transform: skewX(-25deg);
|
|
-ms-transform: skewX(-25deg);
|
|
transform: skewX(-25deg);
|
|
}
|
|
&-item {
|
|
&:hover {
|
|
& .shine-animate {
|
|
&::before {
|
|
-webkit-animation: hoverShine 1.2s;
|
|
animation: hoverShine 1.2s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.section-more-btn {
|
|
text-align: right;
|
|
@media #{$md} {
|
|
text-align: left;
|
|
margin-bottom: 50px;
|
|
}
|
|
& .border-btn {
|
|
border-color: var(--tg-color-white-default);
|
|
color: var(--tg-color-white-default);
|
|
&:hover {
|
|
color: var(--tg-theme-secondary);
|
|
background: var(--tg-color-white-default);
|
|
border-color: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
}
|
|
|
|
.about__list-box-three {
|
|
& .list-wrap {
|
|
@include flexbox();
|
|
align-items: center;
|
|
margin: 0 -5px;
|
|
flex-wrap: wrap;
|
|
gap: 10px 0;
|
|
& li {
|
|
width: 50%;
|
|
flex: 0 0 auto;
|
|
padding: 0 5px;
|
|
margin: 0;
|
|
@media #{$xs} {
|
|
width: 100%;
|
|
}
|
|
@media #{$sm} {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|