/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : SUM Digital Consulting
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About us css
06. Services css
07. Portfolio css
08. why choose us css
09. Our Clients css
10. Testimonials css
11. Latest Post css
12. Footer css
13. About us page css
14. Services Page css
15. Portfolio Page css
16. Blog Archive css
17. Contact Us Page css
18. Blog Single css
19. Services Single css
20. Portfolio Singe css
21. Faqs Page css
22. 404 Page css
23. Responsive css
24. Offshore service css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root {
    --primary-color: #15161B;
    --secondary-color: #F7F8FD;
    --text-color: #9C9FA6;
    /* --accent-color		: #5D56F1; */
    /* --accent-color		: #3083a2; */
    --accent-color: #00aec7;
    --white-color: #FFFFFF;
    --divider-color: #E1E4EB;
    --error-color: rgb(230, 87, 87);
    --default-font: "Manrope", sans-serif;
    --ja-font: "M PLUS Rounded 1c", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

/* body{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5em;
	color: var(--text-color);
	background: var(--white-color);
} */

body.en {
    font-family: var(--default-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--text-color);
    background: var(--white-color);
}

body.ja {
    font-family: var(--ja-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--text-color);
    background: var(--white-color);
}


p {
    line-height: 1.6em;
    margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.1em;
}

figure {
    margin: 0;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    outline: 0;
}

a:focus {
    text-decoration: none;
    outline: 0;
}

html,
body {
    width: 100%;
    overflow-x: clip;
}

.container {
    max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime {
    position: relative;
    overflow: hidden;
}

.image-anime:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, .3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.row>* {
    padding-right: 15px;
    padding-left: 15px;
}

.row.no-gutters {
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 0;
    padding-right: 0;
}

.btn-default {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1em;
    color: var(--white-color);
    background: var(--accent-color);
    text-transform: capitalize;
    padding: 15px 45px 15px 20px;
    border: 2px solid var(--accent-color);
    border-radius: 100px;
    transition: 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-default::before {
    content: '\f062';
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    font-family: 'FontAwesome';
    font-size: 18px;
    font-weight: 900;
    transition: 0.3s ease-in-out;
    background: transparent;
    color: var(--white-color);
    transform: translate(-20px, -50%) rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-default:hover:before {
    color: var(--accent-color);
    transform: translate(-20px, -50%) rotate(90deg);
}

.btn-default::after {
    content: '';
    display: block;
    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: var(--white-color);
    border-radius: 30px;
    transition: 0.3s ease-in-out;
}

.btn-default:hover::after {
    width: 100%;
}

.btn-default:hover {
    color: var(--accent-color);
}

#magic-cursor {
    position: absolute;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none;
    z-index: 1000000;
}

#ball {
    position: fixed;
    display: block;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    width: 10px !important;
    height: 10px !important;
    background: var(--accent-color);
    border-radius: 50%;
    pointer-events: none;
    opacity: 1 !important;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-container,
.loading {
    height: 100px;
    position: relative;
    width: 100px;
    border-radius: 100%;
}

.loading-container {
    margin: 40px auto
}

.loading {
    border: 1px solid transparent;
    border-color: transparent var(--white-color) transparent var(--white-color);
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading {
    transition: all 0.5s ease-in-out;
}

#loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 66px;
    transform: translate(-50%, -50%);
    border: 1px solid white;
}

@keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.section-row {
    margin-bottom: 30px;
}

.section-btn {
    text-align: end;
}

.section-title {
    text-align: left;
}

.section-title h3 {
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.section-title h1,
.section-title h2 {
    font-size: 45px;
    letter-spacing: -0.05em;
    font-weight: 700;
    margin-bottom: 0;
}

.section-title h1 span,
.section-title h2 span {
    color: var(--accent-color);
}

/************************************/
/**** 	   03. Header css		 ****/
/************************************/

header.main-header {
    background-color: var(--secondary-color);
    position: relative;
    z-index: 100;
}

header.main-header .header-sticky {
    padding: 25px 0;
    position: relative;
    top: 0;
    z-index: 100;
}

header.main-header .header-sticky.hide {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    padding: 20px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--divider-color);
}

header.main-header .header-sticky.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--divider-color);
    transform: translateY(0);
    background: var(--white-color);
    backdrop-filter: blur(30px);
}

.navbar {
    padding: 0;
    align-items: center;
}

.navbar-brand {
    padding: 0;
    margin: 0;
}

.navbar-brand img {
    min-width: 140px;
}

.main-menu .nav-menu-wrapper {
    flex: 1;
    text-align: center;
}

.main-menu .nav-menu-wrapper>ul {
    align-items: center;
    display: inline-flex;
}

.main-menu ul li {
    margin: 0 10px;
    position: relative;
}

div.lang-nav-wrapper {
    display: flex;
    align-items: center;
}

.main-menu ul li#en {
    margin-right: 0px;
}

.main-menu ul li#jp {
    margin-left: 0px;
}

.main-menu ul li#divider {
    margin: 0;
}

.main-menu ul li#divider>span {
    color: var(--primary-color);
}

.main-menu ul li.lang-nav-item>a.active {
    color: var(--accent-color);
}

.main-menu ul li a {
    font-size: 16px;
    font-weight: 700;
    padding: 15px 10px !important;
    color: var(--primary-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu>a:after {
    content: '\f107';
    font-family: 'FontAwesome';
    font-weight: 900;
    font-size: 14px;
    margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus {
    color: var(--accent-color);
}

.main-menu ul ul {
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: top;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 210px;
    border-radius: 15px;
    position: absolute;
    left: 0;
    top: 100%;
    overflow: hidden;
    background-color: var(--accent-color);
    transition: all .3s ease-in-out;
    text-align: left;
}

.main-menu ul ul ul {
    left: 100%;
    top: 0;
    text-align: left;
}

.main-menu ul ul li {
    margin: 0;
    padding: 0;
}

.main-menu ul ul li a {
    color: var(--white-color);
    padding: 8px 20px !important;
}

.main-menu ul li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
    padding: 5px 0;
}

.main-menu ul ul li a:hover {
    color: var(--primary-color);
    background-color: transparent;
}

.main-menu ul li.highlighted-menu {
    display: none;
}

.responsive-menu,
.navbar-toggle {
    display: none;
}

.responsive-menu {
    top: 20px;
    position: relative;
}

.slicknav_btn {
    background: var(--accent-color);
    padding: 6px 0 0;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 10px;
}

.slicknav_icon .slicknav_icon-bar {
    display: block;
    width: 100%;
    height: 3px;
    width: 22px;
    background-color: var(--white-color);
    border-radius: 6px;
    margin: 4px auto !important;
    transition: all 0.1s ease-in-out;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu {
    padding: 0;
    background: var(--accent-color);
}

.slicknav_menu ul {
    margin: 5px 0;
}

.slicknav_menu ul ul {
    margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    padding: 10px 20px;
    color: var(--white-color);
    line-height: normal;
    margin: 0;
    border-radius: 0 !important;
}

.slicknav_nav a:hover,
.slicknav_nav .slicknav_row:hover {
    background-color: transparent;
    color: var(--primary-color);
}

.slicknav_menu ul ul li a {
    padding: 10px 20px 10px 30px;
}

.slicknav_arrow {
    font-size: 0 !important;
}

.slicknav_arrow:after {
    content: '\f107';
    font-family: 'FontAwesome';
    font-weight: 900;
    font-size: 12px;
    margin-left: 8px;
    color: var(--white-color);
    position: absolute;
    right: 15px;
    top: 15px;
    transition: all 0.3s ease-out;
}

.slicknav_open>a .slicknav_arrow:after {
    transform: rotate(-180deg);
}

/************************************/
/***        04. Hero css	      ***/
/************************************/

.hero {
    position: relative;
    background: var(--secondary-color) url(../images/hero-bg.png) no-repeat bottom center;
    padding: 48px 0;
}

.hero-content {
    margin-right: 95px;
}

.hero-content .section-title {
    margin-bottom: 30px;
}

.hero-body {
    width: 100%;
    max-width: 568px;
    margin-bottom: 40px;
}

.hero-body p {
    margin: 0;
}

.hero-image img {
    border-radius: 40px;
}

.hero-video-image {
    position: relative;
}

.hero-play-button {
    position: absolute;
    top: 45%;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.hero-play-button i {
    font-size: 26px;
    background-color: var(--accent-color);
    color: var(--white-color);
    width: 90px;
    height: 90px;
    border: 7px solid var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.hero-slider-image img {
    border-radius: 40px;
}

.hero-slider .swiper-pagination {
    position: relative;
    bottom: 0px;
    margin-top: 20px;
}

.hero-slider .swiper-pagination .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    background: var(--white-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.hero-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
}

.hero-layout-2 {
    text-align: center;
}

.hero-layout-2 .hero-content {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.hero-layout-2 .section-title {
    text-align: center;
}

.hero-layout-2 .section-title h1 {
    font-size: 100px;
}

.hero-layout-2 .hero-body {
    width: 100%;
    max-width: 568px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.hero-layout-2 .hero-footer .btn-default {
    margin-right: 20px;
}

.hero-layout-2 .hero-footer .btn-default:last-child {
    margin-right: 0;
}

/************************************/
/***       05. About us css	      ***/
/************************************/

.about-us {
    padding: 50px 0;
}

.about-image {
    position: relative;
    padding-right: 70px;
}

.about-img img {
    border-radius: 40px;
}

.about-consultation {
    position: absolute;
    top: 50%;
    right: -1%;
    transform: translateY(-50%);
    z-index: 1;
}

.about-consultation img {
    animation: rotate 30s infinite linear;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.about-content ul {
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.about-content ul li {
    width: 48%;
    margin-right: 2%;
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.about-content ul li:before {
    content: '\f138';
    font-family: "Font Awesome 6 Free";
    color: var(--accent-color);
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    top: 1px;
    left: 0;
}

/************************************/
/***        06. Services css	  ***/
/************************************/

.our-services {
    background-color: var(--secondary-color);
    padding: 50px 0;
}

.page-service {
    padding: 50px 0 !important;
    margin-top: unset !important;
}

.service-item {
    background-color: var(--white-color);
    border-radius: 40px;
    padding: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-content {
    padding: 20px;
}

.service-content-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 25px;
    gap: 50px;
}

.service-content-title h2 {
    font-size: 21px;
    width: 100%;
    max-width: 200px;
    text-transform: capitalize;
    min-height: 50px;
    display: flex;
    align-items: center;
}

.service-content-title a {
    background-color: var(--accent-color);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

.service-content-title a img {
    transition: all 0.3s ease-in-out;
}

.service-item:hover .service-content-title img {
    transform: rotate(45deg);
}

.service-content p {
    margin: 0;
}

.service-image {
    border-radius: 30px;
    overflow: hidden;
    max-height: 242px;
}

.service-image img {
    border-radius: 30px;
    transition: all 0.5s ease-out;
}

.service-item:hover .service-image img {
    transform: scale(1.1)
}

/************************************/
/***      07. Portfolio css	      ***/
/************************************/

.our-work {
    padding: 100px 0 70px;
}

.works-item {
    background-color: var(--secondary-color);
    border-radius: 40px;
    padding: 20px 20px 40px 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.works-image {
    margin-bottom: 30px;
    border-radius: 30px;
    overflow: hidden;
}

.works-image img {
    border-radius: 30px;
    transition: all 0.5s ease-out;
}

.works-item:hover .works-image img {
    transform: scale(1.1);
}

.works-content {
    padding: 0 20px;
}

.works-content h2 {
    font-size: 26px;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.works-content p {
    margin: 0;
}

/************************************/
/***    08. Why Choose us css	  ***/
/************************************/

.why-choose-us {
    background-color: var(--secondary-color);

    &.gray-back {
        padding: 50px 0 40px;
    }
}

.why-choose-us-item {
    background-color: var(--white-color);
    border-radius: 40px;
    padding: 40px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    text-align: justify;
}

.why-choose-us-item h3 {
    text-align: left;
}

.why-choose-us-item .icon-box {
    margin-bottom: 30px;
}

.why-choose-us-item h3 {
    font-size: 26px;
    text-transform: capitalize;
    margin-bottom: 20px;
    min-height: 60px;
}

.why-choose-us-item p {
    margin: 0;
}

.why-us-explore-item {
    position: relative;
    background-color: var(--white-color);
    border-radius: 40px;
    padding: 50px 70px;
}

.why-us-explore-item .section-title {
    width: 100%;
    max-width: 800px;
    margin-bottom: 60px;
}

.explore-item-icon {
    /* position: absolute; */
    top: 70px;
    right: 255px;
}

.why-us-section-title {
    display: flex;
    justify-content: space-between;
}

.explore-item-content p {
    margin: 0;
}

.explore-item-tags {
    text-align: end;
}

.explore-item-tags ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.explore-item-tags ul li {
    display: inline-block;
    margin-right: 20px;
}

.explore-item-tags ul li:last-child {
    margin-right: 0;
}

.explore-item-tags ul li .btn-default {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: none;
}

.explore-item-tags ul li .btn-default:hover {
    color: var(--white-color);
}

.explore-item-tags ul li .btn-default::before {
    color: var(--primary-color);
}

.explore-item-tags ul li .btn-default:hover:before {
    color: var(--white-color);
}

.explore-item-tags ul li .btn-default::after {
    background: var(--accent-color);
}

/************************************/
/***    09. Our Clients css       ***/
/************************************/

.exclusive-partners {
    padding: 50px 0;
}

.partners-logo {
    background-color: var(--secondary-color);
    border-radius: 20px;
    padding: 30px 50px;
    margin-bottom: 30px;
}

/************************************/
/***    10. Testimonials css      ***/
/************************************/

.clients-testimonials {
    background-color: var(--secondary-color);
    padding: 50px 0;
}

.testimonial-item {
    background-color: var(--white-color);
    border-radius: 40px;
    padding: 50px;
    height: 100%;
}

.testimonial-rating {
    margin-bottom: 20px;
}

.testimonial-content {
    margin-bottom: 20px;
}

.testimonial-body {
    display: flex;
    align-items: center;
}

.testimonial-body img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 20px;
}

.testimonial-author-title h2 {
    font-size: 22px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.testimonial-author-title p {
    margin: 0;
}

.testimonial-slider .swiper-pagination {
    position: relative;
    bottom: 0;
    margin-top: 30px;
}

.testimonial-slider .swiper-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background: var(--white-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.testimonial-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
}

.container.our-strength {
    margin-bottom: 45px !important;
}

/************************************/
/***    11. Latest Post css       ***/
/************************************/

.latest-news {
    padding: 100px 0 70px;
}

.blog-item {
    position: relative;
    overflow: hidden;
    background-color: var(--secondary-color);
    border-radius: 40px;
    padding: 10px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.post-featured-image {
    border-radius: 40px;
    overflow: hidden;
}

.post-featured-image img {
    border-radius: 40px;
    transition: all 0.5s ease-out;
}

.blog-item:hover .post-featured-image img {
    transform: scale(1.1);
}

.post-item-body {
    margin: 20px
}

.post-item-body h2 {
    display: block;
    line-height: 1.4em;
    font-size: 22px;
}

.post-item-body p {
    margin-bottom: 15px;
}

.post-item-body p a,
.post-item-body h2 a {
    color: inherit;
}

.post-item-body .btn-readmore {
    position: relative;
    color: var(--accent-color);
    text-transform: capitalize;
    font-weight: 700;
    transition: 0.3s ease-in-out;
}

.post-item-body .btn-readmore:hover {
    color: var(--primary-color);
}

.post-item-body .btn-readmore::before {
    content: '\f062';
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    font-family: 'FontAwesome';
    font-size: 16px;
    font-weight: 900;
    transition: 0.3s ease-in-out;
    background: transparent;
    color: var(--accent-color);
    transform: translate(20px, -50%) rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-item-body .btn-readmore:hover:before {
    color: var(--primary-color);
    transform: translate(20px, -50%) rotate(90deg);
}

/************************************/
/***        12. Footer css        ***/
/************************************/

.main-footer {
    background-color: var(--secondary-color);
    padding: 50px 0 0;
}

.mega-footer {
    margin-bottom: 40px;
}

.footer-about img {
    margin-bottom: 30px;
    max-width: 160px;
}

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

.footer-about ul li {
    margin-bottom: 15px;
    font-size: 20px;
    color: black;
}

.footer-about ul li:last-child {
    margin-bottom: 0;
}

.footer-about ul li a {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: capitalize;
    margin-bottom: 20px;
}

.footer-links h2 {
    font-size: 22px;
    color: var(--primary-color);
    text-transform: capitalize;
    margin-bottom: 20px;
}

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

.footer-links ul li {
    margin-bottom: 15px;
    color: var(--text-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.footer-links ul li:hover {
    color: var(--accent-color);
}

.footer-links ul li:last-child {
    margin-bottom: 0;
}

.footer-links ul li a {
    color: inherit;
}

.footer-copyright {
    padding: 20px 0;
    border-top: 1px solid var(--divider-color);
    ;
}

.footer-copyright-text p {
    margin: 0;
}

.footer-policy-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: end;
}

.footer-policy-links ul li {
    display: inline-block;
    text-transform: capitalize;
    margin-right: 30px;
}

.footer-policy-links ul li:last-child {
    margin-right: 0;
}

.footer-policy-links ul li.highlighted {
    font-weight: 700;
}

.footer-policy-links ul li a {
    color: var(--text-color);
}

/************************************/
/***    13. About us page css     ***/
/************************************/

.page-header {
    position: relative;
    background: var(--secondary-color);
    padding: 48px 0;
}

.page-header::before {
    content: '';
    position: absolute;
    background-image: url(../images/page-header-bg_16_11zon.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.page-header-box {
    position: relative;
    z-index: 1;
    text-align: center;
}

.page-header-box h1 {
    font-size: 48px;
    letter-spacing: -0.05em;
    margin-bottom: 20px;
}

.page-header-box ol {
    display: inline-flex;
    margin-bottom: 0;
    justify-content: center;
    border: 2px solid var(--accent-color);
    border-radius: 100px;
    padding: 6px 20px;
}

.page-header-box ol li.breadcrumb-item {
    color: var(--accent-color);
    text-transform: capitalize;
}

.page-header-box ol li.breadcrumb-item a {
    color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before {
    color: var(--accent-color);
}

.page-about {
    padding: 50px 0;
}

.page-about-image {
    position: relative;
    margin-right: 20px;
    padding-bottom: 75px;
}

.about-img-2 {
    position: absolute;
    bottom: 0;
    right: 0;
}

.about-img-1 img {
    border-radius: 40px;
}

.about-img-2 img {
    border-radius: 40px;
    border: 5px solid var(--white-color);
}

.work-experience {
    position: absolute;
    top: 30px;
    left: -50px;
    background-color: var(--accent-color);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    padding: 20px;
}

.work-experience-icon {
    margin-right: 15px;
}

.work-experience-content h3 {
    font-size: 40px;
    color: var(--white-color);
    text-align: left;
    margin-bottom: 5px;
}

.work-experience-content p {
    font-size: 18px;
    color: var(--white-color);
    margin: 0;
}

.page-about .about-content .section-title {
    margin-bottom: 30px;
}

.overview-company {
    background-color: var(--secondary-color);
    padding: 100px 0 70px;
}

.counter-box {
    background-color: var(--white-color);
    border-radius: 40px;
    text-align: center;
    padding: 30px;
    margin-bottom: 30px;
}

.counter-box h3 {
    font-size: 28px;
    margin-bottom: 10px;
    line-height: 1.7em;
}

.counter-box h3 em,
.counter-box h3 span {
    font-size: 56px;
    font-style: normal;
    padding: 0;
    margin: 0;
}

.counter-box p {
    margin: 0;
}

.our-team {
    padding: 50px 0;
}

.team-member-item {
    margin-bottom: 30px;
}

.team-member-item .team-image {
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    margin-bottom: 20px;
}

.team-member-item .team-image img {
    width: 100%;
    border-radius: 40px;
    transition: all 0.5s ease-in-out;
}

.team-member-item:hover .team-image img {
    transform: scale(1.1);
}

.team-image .our-team-social-icon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    opacity: 0;
    transition: all 0.3s ease-out;
    z-index: 2;
}

.team-member-item:hover .team-image .our-team-social-icon {
    bottom: 0;
    opacity: 1;
}

.our-team-social-icon ul {
    list-style-type: none;
    padding: 0 20px 30px;
    margin: 0;
    text-align: center;
}

.our-team-social-icon ul li {
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}

.our-team-social-icon ul li:last-child {
    margin-right: 0;
}

.our-team-social-icon ul li a {
    display: block;
}

.our-team-social-icon ul li a i {
    background: var(--accent-color);
    border-radius: 8px;
    color: var(--white-color);
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-out;
}

.our-team-social-icon ul li a i:hover {
    background: var(--white-color);
    color: var(--accent-color);
}

.team-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.team-content {
    width: calc(100% - 60px);
}

.team-content h3 {
    font-size: 24px;
    margin-bottom: 5px;
}

.team-content p {
    margin: 0;
}

.team-icon a {
    background: var(--accent-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-out;
}

.scrolling-ticker {
    padding: 15px 0;
    color: var(--white-color);
    background-color: var(--accent-color);
}

.scrolling-ticker-box {
    --gap: 20px;
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}

.scrolling-content {
    flex-shrink: 0;
    display: flex;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll 24s linear infinite;
}

.scrolling-content span {
    display: inline-flex;
    align-items: center;
    font-family: var(--accent-font);
    font-size: 40px;
    line-height: 1.4em;
    font-weight: 700;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

.scrolling-content span i {
    font-size: 8px;
    color: var(--white-color);
    margin-right: 20px;
}

.clients-testimonials.about-testimonials {
    background-color: var(--white-color);
}

.clients-testimonials.about-testimonials .testimonial-item {
    background-color: var(--secondary-color);
}

.clients-testimonials.about-testimonials .testimonial-slider .swiper-pagination .swiper-pagination-bullet {
    background: var(--secondary-color);
}

.clients-testimonials.about-testimonials .testimonial-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
}

/************************************/
/***    14. Services Page css     ***/
/************************************/

.our-services.page-service {
    background-color: var(--white-color);
}

.our-services.page-service .service-item {
    background-color: var(--secondary-color);
}

.our-services.service-page {
    background-color: var(--white-color);
}

.our-services.service-page .service-item {
    background-color: var(--secondary-color);
}

/************************************/
/***    15. Portfolio Page css    ***/
/************************************/

.our-projects {
    padding: 100px 0 70px;
}

.our-projects-nav {
    margin-bottom: 50px;
}

.our-projects-nav ul {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}

.our-projects-nav ul li {
    display: inline-block;
    background: var(--secondary-color);
    color: var(--primary-color);
    text-transform: capitalize;
    padding: 15px 20px 15px 20px;
    margin-right: 20px;
    border-radius: 100px;
    transition: 0.4s ease-in-out;
}

.our-projects-nav ul li:last-child {
    margin-right: 0;
}

.our-projects-nav ul li:hover {
    background-color: var(--accent-color);
    color: var(--white-color);
}

.our-projects-nav ul li a {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1em;
    color: inherit;
}

/************************************/
/***     16. Blog Archive css     ***/
/************************************/

.latest-news.our-blog {
    padding: 50px 0;
}

.post-pagination {
    margin-top: 30px;
    text-align: center;
}

.post-pagination ul {
    justify-content: center;
    padding: 0;
    margin: 0;
}

.post-pagination ul li a,
.post-pagination ul li span {
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--accent-color);
    color: var(--white-color);
    width: 40px;
    height: 40px;
    margin: 0 4px;
    border-radius: 10px;
    font-weight: 700;
    transition: all 0.3s ease-out;
}

.post-pagination ul li.active a,
.post-pagination ul li a:hover {
    background: var(--secondary-color);
    color: var(--accent-color);
}

/************************************/
/***   17. Contact Us Page css    ***/
/************************************/

.contact-information {
    padding: 100px 0 50px;
}

.contact-item {
    background-color: var(--secondary-color);
    border-radius: 40px;
    padding: 20px;
    height: 100%;
}

.contact-content {
    padding: 20px;
}

.contact-content-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--divider-color);
    ;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.contact-content-title h2 {
    font-size: 26px;
    text-transform: capitalize;
}

.contact-content-title a {
    background-color: var(--accent-color);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

.contact-item p {
    width: 100%;
    max-width: 280px;
    margin: 0;
}

.contact-image {
    border-radius: 30px;
    overflow: hidden;
}

.contact-image img {
    border-radius: 30px;
    transition: all 0.5s ease-out;
}

.contact-item:hover .contact-image img {
    transform: scale(1.1);
}

.contact-us {
    padding: 50px 0;
}

.contact-details .section-title {
    margin-bottom: 30px;
    width: 100%;
    max-width: 525px;
}

.contact-detail-body p {
    margin-bottom: 35px;
}

.contact-detail-body h3 {
    font-size: 40px;
    text-transform: capitalize;
    letter-spacing: -0.05em;
    margin-bottom: 25px;
}

.contact-detail-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-detail-body ul li {
    display: inline-block;
    margin-right: 12px;
}

.contact-detail-body ul li:last-child {
    margin-right: 0;
}

.contact-detail-body ul li a {
    background-color: var(--accent-color);
    border: 2px solid var(--accent-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.contact-detail-body ul li a:hover {
    background-color: var(--white-color);
}

.contact-detail-body ul li a i {
    font-size: 22px;
    color: var(--white-color);
    transition: all 0.3s ease-in-out;
}

.contact-detail-body ul li a:hover i {
    color: var(--accent-color);
}

.contact-form-box {
    background-color: var(--secondary-color);
    border-radius: 40px;
    padding: 40px;
}

.contact-form .form-control {
    background-color: var(--white-color);
    border-radius: 10px;
    border: none;
    box-shadow: none;
    padding: 12px 20px;
}

.contact-form .form-control::placeholder {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

.help-block.with-errors ul {
    margin-bottom: 0;
}

.help-block.with-errors ul li {
    color: var(--error-color);
    font-weight: 500;
    font-size: 14px;
}

.google-map {
    padding: 50px 0 100px;
}

.google-map iframe {
    width: 100%;
    height: 400px;
    border-radius: 40px;
    filter: grayscale(100%);
    transition: all 0.3s ease-out;
}

.google-map iframe:hover {
    filter: grayscale(0%);
}

/************************************/
/***     18. Blog Single css      ***/
/************************************/

.post-single-meta ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.post-single-meta ul li {
    display: inline-block;
    margin-right: 30px;
}

.post-single-meta ul li:last-child {
    margin-right: 0;
}

.post-single-meta ul li i {
    font-size: 16px;
    color: var(--accent-color);
    margin-right: 10px;
}

.page-single-post {
    padding: 100px 0 50px;
}

.post-single-image {
    max-width: 1200px;
    margin: 0 auto 40px;
    overflow: hidden;
}

.post-single-image img {
    border-radius: 40px;
}

.post-content {
    max-width: 1100px;
    margin: 0 auto;
}

.post-entry {
    border-bottom: 1px solid var(--divider-color);
    ;
    margin-bottom: 30px;
}

.post-entry h2 {
    font-size: 40px;
    margin-bottom: 30px;
}

.post-entry ul {
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

.post-entry ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.post-entry ul li:before {
    content: '\f138';
    font-family: "Font Awesome 6 Free";
    color: var(--accent-color);
    font-size: 20px;
    font-weight: 700;
    position: absolute;
    top: 0;
    left: 0;
}

.post-entry blockquote {
    background: var(--secondary-color);
    border-radius: 30px;
    padding: 40px;
    margin-bottom: 30px;
}

.post-entry blockquote p {
    background: url(../images/icon-blockquote.svg) no-repeat 0px 6px;
    font-size: 26px;
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.3em;
    padding-left: 70px;
}

.post-entry blockquote p:last-child {
    margin-bottom: 0;
}

.post-tags .btn-default {
    padding: 12px 20px;
    font-weight: 500;
    margin-right: 15px;
    border: none;
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.post-tags .btn-default:hover {
    color: var(--white-color);
}

.post-tags .btn-default:last-child {
    margin-right: 0;
}

.post-tags .btn-default::before {
    display: none;
}

.post-tags .btn-default::after {
    background-color: var(--accent-color);
}

.post-social-links {
    text-align: right;
}

.post-social-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-links ul li {
    display: inline-block;
    margin-right: 12px;
}

.post-social-links ul li:last-child {
    margin-right: 0;
}

.post-social-links ul li a {
    background-color: var(--accent-color);
    border: 2px solid var(--accent-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.post-social-links ul li a:hover {
    background-color: var(--white-color);
}

.post-social-links ul li a i {
    font-size: 22px;
    color: var(--white-color);
    transition: all 0.3s ease-in-out;
}

.post-social-links ul li a:hover i {
    color: var(--accent-color);
}

.latest-news.related-articles {
    padding: 50px 0 70px;
}

/************************************/
/***   19. Services Single css    ***/
/************************************/

.page-service-single {
    padding: 50px 0;
}

#background-changer {
    padding: 50px 0 !important;
}

.service-featured-image {
    margin-bottom: 30px;
}

.service-featured-image img {
    border-radius: 40px;
}

.services-list-box {
    background-color: var(--secondary-color);
    border-radius: 40px;
    padding: 40px;
}

.services-list-box .icon-box {
    margin-bottom: 20px;
}

.services-list-box h3 {
    font-size: 26px;
    margin-bottom: 30px;
    text-transform: capitalize;
}

.services-list-box ul {
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

.services-list-box ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 20px;
}

.services-list-box ul li:before {
    content: '\f138';
    font-family: "Font Awesome 6 Free";
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 900;
    position: absolute;
    top: 1px;
    left: 0;
}

.services-list-box ul li:last-child {
    margin-bottom: 0;
}

.services-list-box ul li a {
    color: var(--text-color);
    transition: all 0.3s ease-in-out;
}

.services-list-box ul li:hover a {
    color: var(--accent-color);
}

.services-list-box .btn-default {
    width: 100%;
}

.why-choose-us.why-services {
    background-color: var(--secondary-color);
    padding: 100px 0 70px;
}

.why-choose-us.why-services .section-title p {
    margin-bottom: 0;
    margin-top: 30px;
}

.your-choice {
    padding: 50px 0;
}

.your-choice-item {
    background-color: var(--secondary-color);
    border-radius: 40px;
    padding: 40px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.your-choice-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--divider-color);
    ;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.your-choice-title h2 {
    font-size: 26px;
    width: 100%;
    max-width: 200px;
}

.your-choice-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.your-choice-item ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
}

.your-choice-item ul li:before,
.why-choose-us-item ul li:before {
    content: '\f138' !important;
    font-family: "Font Awesome 6 Free";
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 900;
    position: absolute;
    top: 1px;
    left: 0;
}

.why-choose-us-item ul li:before {
    left: -30px;
}

.why-choose-us-item ul {
    list-style-type: none;
}

.why-choose-us-item li {
    position: relative;
}

.choose-link {
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
}

.service-image-custom {
    height: 242px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 30px;
}

@media screen and (max-width: 451px) {
    .choose-link {
        justify-content: unset;
    }
}

.your-choice-item ul li:last-child {
    margin-bottom: 0;
}

.your-choice-item ul li a {
    color: inherit;
}

.service-faqs {
    padding: 50px 0;
}

.ask-question {
    background-color: var(--secondary-color);
    border-radius: 40px;
    padding: 40px 30px;
    position: sticky;
    top: 110px;
}

.ask-question-content {
    margin-bottom: 30px;
}

.ask-question-content h3 {
    font-size: 28px;
    margin-bottom: 20px;
}

.ask-question-content p {
    margin: 0;
}

.ask-contact-list {
    display: flex;
    align-items: center;
    background-color: var(--white-color);
    border-radius: 100px;
    padding: 10px;
    margin-bottom: 20px;
}

.ask-contact-list:last-child {
    margin-bottom: 0;
}

.ask-contact-list .icon-box a {
    background-color: var(--accent-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.ask-contact-list .icon-box a img {
    width: 14px;
}

.ask-contact-list a {
    margin: 0;
    font-weight: 700;
    color: var(--text-color);
    width: calc(100% - 40px);
    margin-left: 10px;
}

.ask-contact-list a span {
    color: var(--primary-color);
}

/******************************************/
/****     20. Portfolio Singe css      ****/
/******************************************/

.page-project-single {
    padding: 50px 0;
}

.project-feature-image {

    margin-bottom: 50px;
}

.project-feature-image img {
    border-radius: 40px;
}

.project-sidebar {
    /* padding-right: 50px; */
    position: sticky;
    top: 120px;
}

.about-project-box {
    background: var(--secondary-color);
    text-align: center;
    /* padding: 40px; */
    padding: 15px 30px;
    border-radius: 30px;
}

.about-project-box h2 {
    font-size: 24px;
    margin-bottom: 30px;
}

.project-info-box {
    border-bottom: 1px solid var(--divider-color);
    ;
    /* padding-bottom: 30px;
	margin-bottom: 30px; */
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.project-info-box:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.project-info-box .project-icon {
    /* margin-bottom: 15px; */
    margin-bottom: 5px;
}

.project-info-box p {
    /* margin-bottom: 10px; */
    margin-bottom: 5px;
}

.project-info-box h3 {
    font-size: 20px;
}

.project-entry h2 {
    font-size: 40px;
    text-transform: capitalize;
    margin-bottom: 40px;
}

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

.project-entry ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.project-entry ul li:before {
    content: '\f138';
    font-family: "Font Awesome 6 Free";
    color: var(--accent-color);
    font-size: 20px;
    font-weight: 700;
    position: absolute;
    top: 0;
    left: 0;
}

.project-entry ul li:last-child {
    margin-bottom: 0;
}

.project-details-gallery {
    /* padding: 50px 0 100px; */
}

.project-gallery-items {
    display: flex;
    flex-wrap: wrap;
}

.project-gallery-items .project-gallery-item {
    width: calc(33.33% - 14px);
    margin-right: 20px;
}

.project-gallery-items .project-gallery-item:nth-of-type(3n + 3) {
    margin-right: 0;
}

.project-gallery-items .project-gallery-item img {
    width: 100%;
    border-radius: 40px;
}

/************************************/
/***      21. Faqs Page css       ***/
/************************************/

.faq-section {
    padding: 50px 0;
}

.faq-accordion .accordion-item {
    margin-bottom: 30px;
}

.faq-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-header .accordion-button {
    font-size: 22px;
    font-weight: 700;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 12px 60px 12px 20px;
    border-radius: 15px !important;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background-color: var(--accent-color);
    color: var(--white-color);
}

.accordion-header .accordion-button.collapsed {
    background-color: var(--secondary-color);
    transition: all 0.3s ease-in-out;
}

.accordion-header .accordion-button::after {
    content: '\f106';
    position: absolute;
    top: 50%;
    right: 0;
    font-family: 'Font Awesome 6 Free';
    font-size: 16px;
    font-weight: 900;
    margin-left: 5px;
    color: var(--white-color);
    transform: translate(-30px, -50%);
    transition: all 0.3s ease-in-out;
}

.accordion-header .accordion-button.collapsed::after {
    transform: rotate(-180deg) translate(30px, 50%);
    color: var(--accent-color);
}

.accordion-body {
    padding: 10px 60px 20px 20px;
}

.accordion-body p {
    margin: 0;
}

/************************************/
/***        22. 404 Page css      ***/
/************************************/

.error-page {
    text-align: center;
    padding: 50px 0;
}

.error-page-image {
    margin-bottom: 40px;
}

.error-page-content-heading {
    margin-bottom: 40px;
}

.error-page-content-heading h2 {
    font-size: 70px;
    margin-bottom: 30px;
}

/************************************/
/***      23. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1024px) {
    .main-menu ul li {
        margin-left: 0;
    }

    .service-content-title a {
        width: 60px;
        height: 50px;
    }
}

@media only screen and (max-width: 991px) {

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

    .section-title h3 {
        font-size: 18px;
    }

    .section-title h1,
    .section-title h2 {
        font-size: 46px !important;
    }

    .btn-default::before {
        font-size: 16px;
    }

    #magic-cursor {
        display: none !important;
    }

    .slicknav_nav li,
    .slicknav_nav ul {
        display: block;
    }

    .responsive-menu,
    .navbar-toggle {
        display: block;
    }

    header.main-header .header-sticky {
        padding: 20px 0;
    }

    .header-btn .btn-default {
        display: none;
    }

    .hero {
        background-image: none;
        padding: 50px 0;
    }

    .hero-video-image {
        text-align: center;
        margin-top: 40px;
    }

    .hero-play-button {
        left: 50%;
        transform: translate(-50%, -50%);
        top: 0;
    }

    .hero-layout-2 .hero-content {
        margin-bottom: 0px;
        max-width: 100%;
    }

    .hero-content .section-title {
        margin-bottom: 20px;
    }

    .hero-body {
        margin-bottom: 20px;
        max-width: 100%;
    }

    .hero-layout-2 .section-title h1 {
        font-size: 60px;
    }

    .hero-layout-2 .hero-body {
        margin-bottom: 20px;
    }

    .about-us {
        padding: 50px 0;
    }

    .about-image {
        text-align: center;
        margin-bottom: 90px;
        padding-right: 0;
    }

    .about-consultation {
        right: 50%;
        top: auto;
        transform: translate(50%, -50%);
    }

    .about-content ul {
        margin: 0 0 10px;
    }

    .about-content ul li {
        font-size: 16px;
    }

    .about-content ul li:before {
        font-size: 18px;
    }

    .our-services {
        padding: 50px 0 20px;
    }

    .service-content {
        padding: 10px 10px 20px;
    }

    .service-content-title h2 {
        font-size: 24px;
        max-width: 180px;
    }

    .service-content-title a {
        width: 50px;
        height: 50px;
    }

    .service-content-title a img {
        width: 18px;
    }

    .service-content-title {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .our-work {
        padding: 50px 0 20px;
    }

    .works-item {
        padding: 20px 20px 30px 20px;
    }

    .works-image {
        margin-bottom: 20px;
    }

    .works-content h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .works-content {
        padding: 0 0 0 10px;
    }

    .why-choose-us {
        padding: 50px 0;
    }

    .why-choose-us-item {
        padding: 30px;
    }

    .why-choose-us-item .icon-box {
        margin-bottom: 20px;
    }

    .why-choose-us-item h3 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .why-us-explore-item {
        padding: 40px;
    }

    .why-us-section-title {
        /* padding-right: 20px; */

    }

    .why-us-explore-item .section-title {
        margin-bottom: 20px;
        max-width: 100%;
    }

    .explore-item-icon {
        top: 70px;
        right: 10px;
    }

    .explore-item-icon img {
        width: 50px;
    }

    .explore-item-content p {
        margin-bottom: 20px;
    }

    .explore-item-tags {
        text-align: start;
    }

    .exclusive-partners {
        padding: 50px 0 20px;
    }

    .partners-logo {
        padding: 20px 30px;
    }

    .clients-testimonials {
        padding: 50px 0;
    }

    .testimonial-item {
        padding: 30px;
    }

    .testimonial-author-title h2 {
        font-size: 20px;
        margin-bottom: 5px;
    }

    .latest-news {
        padding: 50px 0 20px;
    }

    .post-item-body h2 {
        font-size: 20px;
    }

    .main-footer {
        padding: 40px 0 0;
    }

    .footer-about {
        margin-bottom: 30px;
    }

    .footer-about p,
    .footer-about img {
        margin-bottom: 15px;
    }

    .footer-about ul li a {
        font-size: 20px;
    }

    .footer-links h2 {
        font-size: 20px;
    }

    .footer-links ul li {
        margin-bottom: 10px;
    }

    .footer-copyright-text {
        text-align: center;
        margin-bottom: 10px;
    }

    .footer-policy-links ul {
        text-align: center;
    }

    .page-header {
        padding: 50px 0;
    }

    .page-header::before {
        background-size: cover;
    }

    .page-header-box h1 {
        font-size: 56px;
        margin-bottom: 10px;
    }

    .page-about {
        padding: 50px 0 20px;
    }

    .page-about-image {
        margin-right: 0;
        padding-bottom: 60px;
        margin-bottom: 20px;
        text-align: center;
    }

    .about-img-2 img {
        width: 300px;
    }

    .work-experience {
        left: 0;
        padding: 15px;
    }

    .work-experience-content h3 {
        font-size: 34px;
    }

    .work-experience-content p {
        font-size: 16px;
    }

    .overview-company {
        padding: 50px 0 20px;
    }

    .counter-box h3 {
        font-size: 24px;
    }

    .counter-box h3 em,
    .counter-box h3 span {
        font-size: 40px;
    }

    .our-team {
        padding: 50px 0 20px;
    }

    .team-content h3 {
        font-size: 22px;
    }

    .scrolling-content span {
        font-size: 34px;
    }

    .our-projects {
        padding: 50px 0 20px;
    }

    .our-projects-nav {
        margin-bottom: 20px;
    }

    .our-projects-nav ul li {
        margin-bottom: 20px;
    }

    .latest-news.our-blog {
        padding: 50px 0;
    }

    .our-projects-nav ul li:nth-child(3n + 3) {
        margin-right: 0px;
    }

    .post-pagination {
        margin-top: 10px;
    }

    .contact-information {
        padding: 50px 0 25px;
    }

    .contact-item {
        padding: 10px;
    }

    .contact-content {
        padding: 10px 10px 20px;
    }

    .contact-content-title {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .contact-content-title h2 {
        font-size: 24px;
    }

    .contact-content-title a {
        width: 50px;
        height: 50px;
    }

    .contact-content-title a img {
        width: 18px;
    }

    .contact-item p {
        max-width: 100%;
    }

    .contact-us {
        padding: 25px 0;
    }

    .contact-details {
        max-width: 100%;
        margin-bottom: 30px;
    }

    .contact-details .section-title {
        margin-bottom: 20px;
        max-width: 100%;
    }

    .contact-detail-body p {
        margin-bottom: 20px;
    }

    .contact-detail-body h3 {
        font-size: 34px;
        margin-bottom: 20px;
    }

    .contact-detail-body ul li a {
        width: 40px;
        height: 40px;
    }

    .contact-detail-body ul li a i {
        font-size: 20px;
    }

    .contact-form-box {
        padding: 30px;
    }

    .google-map {
        padding: 25px 0 50px;
    }

    .google-map iframe {
        height: 300px;
    }

    .page-single-post {
        padding: 50px 0 25px;
    }

    .post-featured-image {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .post-content {
        max-width: 100%;
    }

    .post-entry h2 {
        font-size: 34px;
        margin-bottom: 20px;
    }

    .post-entry blockquote p {
        font-size: 22px;
    }

    .post-entry blockquote {
        padding: 30px;
    }

    .post-entry ul li:before {
        font-size: 18px;
    }

    .post-entry ul li {
        margin-bottom: 15px;
        font-size: 16px;
    }

    .post-tags {
        margin-bottom: 20px;
    }

    .post-social-links {
        text-align: left;
    }

    .post-social-links ul li a {
        width: 40px;
        height: 40px;
    }

    .post-social-links ul li a i {
        font-size: 20px;
    }

    .latest-news.related-articles {
        padding: 25px 0 20px;
    }

    .page-service-single {
        padding: 50px 0;
    }

    .services-list-box {
        padding: 30px;
    }

    .services-list-box h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .services-list-box ul {
        margin: 0 0 20px;
    }

    .services-list-box ul li {
        margin-bottom: 15px;
    }

    .why-choose-us.why-services {
        padding: 50px 0 20px;
    }

    .your-choice {
        padding: 50px 0 20px;
    }

    .your-choice-item {
        padding: 30px;
    }

    .your-choice-title {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .your-choice-title h2 {
        font-size: 24px;
    }

    .service-faqs {
        padding: 50px 0;
    }

    .service-faqs .faq-accordion {
        margin-bottom: 30px;
    }

    .ask-question {
        padding: 30px;
    }

    .ask-question-content h3 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .ask-question-content {
        margin-bottom: 20px;
    }

    .page-project-single {
        padding: 50px 0 25px;
    }

    .project-feature-image {
        margin-bottom: 30px;
    }

    .project-sidebar {
        padding-right: 0;
        margin-bottom: 20px;
    }

    .about-project-box {
        padding: 30px;
    }

    .project-info-box {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .project-info-box h3 {
        font-size: 18px;
    }

    .project-info-box p {
        margin-bottom: 5px;
    }

    .project-icon img {
        width: 40px;
    }

    .project-entry h2 {
        font-size: 34px;
        margin-bottom: 20px;
    }

    .project-entry ul li {
        font-size: 16px;
    }

    .project-entry ul li:before {
        font-size: 18px;
    }

    .project-details-gallery {
        padding: 25px 0 50px;
    }

    .faq-section {
        padding: 50px 0;
    }

    .accordion-header .accordion-button {
        font-size: 20px;
        padding: 12px 40px 12px 20px;
    }

    .accordion-header .accordion-button::after {
        transform: translate(-20px, -50%);
    }

    .accordion-body {
        padding: 10px 40px 20px 20px;
    }

    .error-page {
        padding: 50px 0;
    }

    .error-page-content-heading h2 {
        font-size: 56px;
        margin-bottom: 20px;
    }

    .error-page-content-heading {
        margin-bottom: 30px;
    }

    .slicknav_nav li.consult-med-device {
        display: none;
    }

    .slicknav_nav li.en-med-device {
        margin-right: 0px;
    }

    .slicknav_nav li.lang-nav-item>a.active {
        margin: 5px 20px;
        padding: 5px 0;
        border-bottom: 1px solid var(--white-color);
    }
}

@media only screen and (max-width: 767px) {

    .btn-default {
        font-size: 14px;
    }

    .section-row {
        margin-bottom: 30px;
    }

    .section-btn {
        text-align: center;
        margin-top: 20px;
    }

    .section-row .section-title {
        /* text-align: center; */
    }

    .section-title h3 {
        font-size: 16px;
    }

    .section-title h1,
    .section-title h2 {
        font-size: 30px !important;
    }

    .hero-content {
        margin-right: 0px;
    }

    .hero-play-button {
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .hero-play-button i {
        font-size: 22px;
        background-color: var(--accent-color);
        color: var(--white-color);
        width: 80px;
        height: 80px;
    }

    .hero-layout-2 .section-title h1 {
        font-size: 40px;
    }

    .hero-layout-2 .hero-footer .btn-default {
        margin-right: 0px;
        margin-bottom: 10px;
    }

    .hero-layout-2 .hero-footer .btn-default:last-child {
        margin-bottom: 0;
    }

    .about-image {
        margin-bottom: 70px;
    }

    .about-consultation img {
        width: 120px;
        height: 120px;
    }

    .about-content ul {
        display: block;
        margin: 0 0 25px;
    }

    .about-content ul li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .service-content-title h2 {
        font-size: 21px;
        max-width: 170px;
    }

    .service-content-title a img {
        width: 16px;
    }

    .works-content h2 {
        font-size: 22px;
    }

    .why-choose-us-item h3 {
        font-size: 22px;
    }

    .why-us-explore-item {
        padding: 20px;
    }

    .why-us-section-title {
        /* padding-right: 40px; */
    }

    .explore-item-icon {
        top: 20px;
        right: 20px;
    }

    .explore-item-icon img {
        width: 40px;
    }

    .explore-item-tags ul li {
        margin-right: 10px;
        margin-bottom: 5px;
    }

    .partners-logo {
        padding: 15px 20px;
    }

    .testimonial-author-title h2 {
        font-size: 18px;
    }

    .post-item-body h2 {
        font-size: 18px;
    }

    .mega-footer {
        margin-bottom: 10px;
    }

    .footer-about ul li a {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .footer-links {
        margin-bottom: 30px;
    }

    .footer-policy-links ul li {
        margin-right: 10px;
    }

    .page-header {
        padding: 50px 0;
    }

    .page-header-box ol {
        padding: 4px 15px;
        font-size: 14px;
    }

    .page-header-box h1 {
        font-size: 30px;
    }

    .page-about-image {
        padding-bottom: 110px;
        padding-top: 50px;
    }

    .about-img-2 {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
    }

    .work-experience {
        top: 0;
        left: 60px;
        padding: 10px;
    }

    .work-experience-content h3 {
        font-size: 30px;
    }

    .page-about .about-content .section-title {
        margin-bottom: 20px;
    }

    .counter-box {
        padding: 20px;
    }

    .counter-box h3 {
        font-size: 20px;
    }

    .counter-box h3 em,
    .counter-box h3 span {
        font-size: 30px;
    }

    .team-content h3 {
        font-size: 20px;
    }

    .scrolling-content span {
        font-size: 28px;
    }

    .our-projects-nav ul li {
        padding: 10px 15px;
        margin-right: 6px;
        margin-bottom: 20px;
    }

    .our-projects-nav ul li:nth-child(3n + 3) {
        margin-right: 6px;
    }

    .our-projects-nav ul li a {
        font-size: 14px;
    }

    .contact-information {
        padding: 50px 0 5px;
    }

    .contact-item {
        height: calc(100% - 20px);
        margin-bottom: 20px;
    }

    .contact-content-title h2 {
        font-size: 22px;
    }

    .contact-detail-body h3 {
        font-size: 28px;
    }

    .contact-form-box {
        padding: 20px;
    }

    .google-map iframe {
        height: 250px;
    }

    .post-single-meta ul li {
        margin-right: 15px;
    }

    .post-entry blockquote {
        padding: 20px;
    }

    .post-entry blockquote p {
        background: url(../images/icon-blockquote.svg) no-repeat 0px 0px;
        font-size: 20px;
        padding-left: 0px;
        padding-top: 50px;
    }

    .post-tags .btn-default {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .service-featured-image {
        margin-bottom: 20px;
    }

    .services-list-box {
        padding: 20px;
    }

    .services-list-box h3 {
        font-size: 22px;
    }

    .why-choose-us.why-services .section-title p {
        margin-bottom: 0;
        margin-top: 20px;
    }

    .your-choice-title h2 {
        font-size: 22px;
        max-width: 180px;
    }

    .ask-question-content h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .ask-contact-list a {
        display: inline-grid;
    }

    .project-info-box h3 {
        font-size: 16px;
    }

    .project-entry h2 {
        font-size: 28px;
    }

    .project-gallery-items {
        display: block;
    }

    .project-gallery-items .project-gallery-item {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .project-gallery-items .project-gallery-item:nth-child(3n + 3) {
        margin-bottom: 0;
    }

    .accordion-header .accordion-button {
        font-size: 18px;
    }

    .error-page-content-heading h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .error-page-content-heading {
        margin-bottom: 30px;
    }
}

.services-active {
    display: block;
}

.services-deactive {
    display: none !important;
}

.service-sub-content-title {
    max-width: none !important;
}

.service-sub-content-container {
    align-items: end;
    display: grid;
}

.gray-back {
    background: #f7f8fd;
    /* background-image: url(../images/page-header-bg.png); */
    /* background-size: cover; */
    /* width: 100%;
    height: 100%; */
    /* background-position: bottom right;
    background-repeat: no-repeat; */
}

.flags {
    width: 60px;
    /* height: 150px; */
    /* border: 1px solid black; */
    padding: 6px;
    border-radius: 8px;
    margin: 0 0 2px 0;
    background-color: var(--accent-color);
}

.flags:hover {
    cursor: pointer;
}

.hidden-flag {
    display: none;
    position: absolute;
}

.flags-container {
    position: absolute;
    right: 0;
    top: 100px;
}

.flags-container:hover .hidden-flag {
    display: block;
    /* top: 0; */
}

@media only screen and (max-width: 991px) {
    .hidden-flag {
        position: unset;
    }

    .flags-container {
        position: relative;
        padding: 10px 20px;
        top: 0px;
    }

    .flags-container a {
        padding: 0px;
        margin: 0px;
    }

    .flags {
        border: 2px solid white;
    }
}

/************************************/
/***   24. Offshore service css   ***/
/************************************/

.stash--shield-check {
    display: inline-block;
    width: 30px;
    height: 30px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.78 10.03a.75.75 0 1 0-1.06-1.06l-3.47 3.47l-1.47-1.47a.75.75 0 0 0-1.06 1.06l2.53 2.53z'/%3E%3Cpath fill='%23000' d='M13.04 1.56a3.25 3.25 0 0 0-2.085.001L4.179 3.856a2.69 2.69 0 0 0-1.83 2.32c-.353 4.41.24 7.876 1.838 10.593c1.603 2.725 4.159 4.598 7.535 5.929a.75.75 0 0 0 .55 0c3.379-1.331 5.936-3.204 7.54-5.929c1.6-2.717 2.192-6.184 1.84-10.592a2.69 2.69 0 0 0-1.831-2.32zm-1.604 1.422a1.75 1.75 0 0 1 1.122 0l6.782 2.295c.462.156.78.561.817 1.019c.337 4.226-.248 7.351-1.638 9.712c-1.344 2.285-3.496 3.946-6.522 5.184c-3.023-1.238-5.173-2.899-6.517-5.184c-1.39-2.36-1.974-5.486-1.637-9.712a1.19 1.19 0 0 1 .817-1.02z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.hugeicons--chat-spark-01 {
    display: inline-block;
    width: 30px;
    height: 30px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath stroke-width='1.5' d='M18.47 2.025c.006-.033.054-.033.06 0a4.42 4.42 0 0 0 3.445 3.444c.033.007.033.055 0 .062a4.42 4.42 0 0 0-3.444 3.444c-.007.033-.055.033-.062 0a4.42 4.42 0 0 0-3.444-3.444c-.033-.007-.033-.055 0-.062a4.42 4.42 0 0 0 3.444-3.444'/%3E%3Cpath stroke-width='2' d='M11.99 11H12m-4.005 0h.01'/%3E%3Cpath stroke-width='1.5' d='M13 3.005Q12.505 3 12 3c-1.48 0-2.905.03-4.244.088c-2.44.105-3.66.157-4.626 1.13c-.965.972-1.007 2.159-1.09 4.532a64 64 0 0 0 0 4.5c.083 2.373.125 3.56 1.09 4.532c.965.973 2.186 1.025 4.626 1.13l.244.01v2.348a.73.73 0 0 0 1.205.554l2.18-1.869c.547-.47.821-.704 1.147-.828s.696-.131 1.437-.145q1.171-.023 2.275-.07c2.44-.105 3.66-.157 4.626-1.13c.965-.972 1.007-2.159 1.09-4.532a64 64 0 0 0 .023-3.75'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.streamline-freehand--collaboration-meeting-team-file {
    display: inline-block;
    width: 30px;
    height: 30px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M9.068 10.263c.43.17.887.261 1.349.27q.58.037 1.16 0c.799-.06 1.388-.24 2.477-.29c.22 0 .86.07 1.27 0a1.36 1.36 0 0 0 .609-.2c.351-.26.608-.63.73-1.05c.18-.758.237-1.54.17-2.318c0-.57.079-1.638 0-2.508a3.3 3.3 0 0 0-.32-1.259a7.5 7.5 0 0 0-.89-1.219A17 17 0 0 0 14.104.16a.63.63 0 0 0-.44-.16c-.33 0-1.119.15-1.249.16L9.508.55a.39.39 0 0 0-.32.26a.35.35 0 0 0-.33-.23a.34.34 0 0 0-.33.35l-.1 5.935c0 .44-.14 1.17-.15 1.789c-.016.32.024.642.12.95a1.18 1.18 0 0 0 .67.659m5.756-7.894c.275.33.517.689.72 1.069c.074.181.117.374.129.57l-.06-.01a15 15 0 0 0-1.709-.23a1.8 1.8 0 0 1-.6-.2c0-.17.08-.44.08-.63v-.95l-.06-.859c.14 0 .26 0 .31-.1q.632.638 1.19 1.34m-5.226-1l2.867-.26l-.15.85c0 .08-.11.42-.18.81a7 7 0 0 0-.06.889a1.16 1.16 0 0 0 .38.939c.323.18.681.285 1.05.31c.66 0 1.349-.16 1.998-.12a.32.32 0 0 0 .19 0c0 .76-.11 1.559-.11 1.998q.057.705 0 1.41c-.2 1.568-.91.789-1.549.819c-1.109.07-1.709.25-2.528.33a8 8 0 0 1-1 0a4 4 0 0 1-.769-.06c-.09 0-.19-.14-.24-.09a2.4 2.4 0 0 1-.08-.74c0-.57.07-1.18.05-1.559l-.25-5.776a.38.38 0 0 0 .38.2zm12.21 17.767a1.8 1.8 0 0 0-.47-.36a3 3 0 0 0-.429-.14a2.47 2.47 0 0 0 .67-2.598a2.93 2.93 0 0 0-2.569-2.048a2.15 2.15 0 0 0-1.478.45a2.88 2.88 0 0 0-1 1.798a2.18 2.18 0 0 0 .74 2.178q-.39.093-.75.27a1.9 1.9 0 0 0-.44.35a2.5 2.5 0 0 0-.33.47a3.3 3.3 0 0 0-.369 1.239a3 3 0 0 0-.62-.58a5 5 0 0 0-.759-.38a2.78 2.78 0 0 0 .54-2.758a3.08 3.08 0 0 0-3.787-1.948a3 3 0 0 0-1.3 4.906c-.14.06-.29.11-.419.18q-.363.229-.67.53c0 .06-.08.13-.13.18a3.4 3.4 0 0 0-.4-1.27a2 2 0 0 0-.369-.47a2 2 0 0 0-.45-.349a4 4 0 0 0-.45-.14a2.47 2.47 0 0 0 .67-2.608a2.93 2.93 0 0 0-2.528-1.998a2.12 2.12 0 0 0-1.469.45a2.84 2.84 0 0 0-.999 1.798a2.16 2.16 0 0 0 .74 2.178a3.6 3.6 0 0 0-.76.28q-.243.152-.44.36a2.5 2.5 0 0 0-.33.47a3.4 3.4 0 0 0-.429 1.219a.38.38 0 0 0 .25.48a.39.39 0 0 0 .49-.24q.138-.259.33-.48q.188-.206.399-.39l.37-.39q.365-.474.8-.889a.3.3 0 0 0 .139-.16h.17a.35.35 0 0 0 .36-.33a.33.33 0 0 0-.31-.31c-.86-.11-1-.899-.81-1.598s.67-1.27 1.38-1.18a1.72 1.72 0 0 1 1.498 1.12a1.48 1.48 0 0 1-.46 1.809a1.06 1.06 0 0 1-.43.2q-.29.06-.589.08a.39.39 0 0 0-.336.546a.38.38 0 0 0 .366.223a3.6 3.6 0 0 0 .86-.06h.14c.26.23.47.48.689.7l.4.399q.22.183.42.39q.196.226.34.49a.37.37 0 0 0 .349.25a5.1 5.1 0 0 0-.62 1.788a.39.39 0 1 0 .74.22a5.5 5.5 0 0 1 1.319-1.779l.47-.44q.362-.331.769-.61a1 1 0 0 0 .1 0c.512.09 1.036.09 1.549 0q.044.015.09 0a.39.39 0 0 0 .46.14q.22-.101.419-.24q.445.336.85.72c.16.16.299.32.429.47a5.8 5.8 0 0 1 1.11 1.998a.39.39 0 0 0 .489.26a.4.4 0 0 0 .29-.46a7.2 7.2 0 0 0-.4-1.908a2.6 2.6 0 0 0-.21-.36a.38.38 0 0 0 .44-.24q.148-.255.34-.48c.11-.14.26-.239.39-.379c.129-.14.249-.24.369-.38q.365-.47.8-.879a.3.3 0 0 0 .15-.16h.169a.34.34 0 0 0 0-.68c-.85-.11-1-.899-.81-1.598s.68-1.27 1.39-1.18a1.71 1.71 0 0 1 1.488 1.12a1.48 1.48 0 0 1-.41 1.839c-.13.096-.28.164-.439.2q-.286.06-.58.08a.39.39 0 0 0-.37.399a.37.37 0 0 0 .39.37q.439.021.87-.06h.14c.26.23.47.47.69.69s.269.26.399.389c.13.13.29.24.42.39q.19.225.34.48a.38.38 0 0 0 .479.26a.39.39 0 0 0 .26-.48a3.3 3.3 0 0 0-.42-1.3a2 2 0 0 0-.38-.52m-11.58.34a1.9 1.9 0 0 1-.29-1.829a1.74 1.74 0 0 1 1.168-1.259a1.93 1.93 0 0 1 2.429 1.07c1.129 2.697-2.648 2.747-3.308 2.018M2.533 13.12c.15 0 .2.14.88-1.339c.09-.19.16-.4.23-.59c.459-1.198.609-1.258.379-1.488c-.45-.4-1.41.85-1.42.88a2.1 2.1 0 0 0-.419.959c-.06.3-.11 1.538.35 1.578m20.285-2.128a2 2 0 0 0-.26-.45s-1-1.279-1.42-.879c-.249.23-.109.31.35 1.489c.08.19.15.4.23.59c.69 1.478.73 1.348.89 1.339c.46 0 .4-1.28.36-1.58a2 2 0 0 0-.15-.509M6.02 8.714q.144-.066.27-.16a1.1 1.1 0 0 0 .24-.19c.76-.67.9-.72.79-1c0-.11-.16-.479-1.4-.05a1.6 1.6 0 0 0-.64.41c-.16.18-.749 1-.509 1.24c.09.08.15.25 1.25-.25m12.569-.35q.114.105.24.19q.133.094.28.16c1.11.5 1.17.33 1.25.24c.24-.26-.36-1.06-.51-1.24a1.8 1.8 0 0 0-.65-.41c-1.229-.429-1.359-.06-1.399.05c-.1.29.04.34.79 1.01' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.streamline-freehand--business-deal-handshake {
    display: inline-block;
    width: 30px;
    height: 30px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M2.307 12.161c1 .76 1.71.05.94-.79l-.08-.08a6 6 0 0 0-.52-.439c-.19-.14-.39-.26-.59-.38a8.6 8.6 0 0 0-1.519-.67a.373.373 0 0 0-.33.67c.43.29.79.66 1.2 1q.395.35.83.65zm9.687 5.449a.371.371 0 1 0-.7.25a1.12 1.12 0 0 1-.89 1.309a1.1 1.1 0 0 1-.51-.11a1.4 1.4 0 0 1-.46-.29a4 4 0 0 1-.25-.29a.8.8 0 0 1-.1-.23a.82.82 0 0 1 .08-.56c.07-.07.12-.14.18-.21a1.1 1.1 0 0 1 .31-.29a1.35 1.35 0 0 1 1.48 0a.33.33 0 0 0 .46-.47a2 2 0 0 0-1.93-.54a1.7 1.7 0 0 0-.07-.459a.38.38 0 0 0-.696-.039a.37.37 0 0 0-.013.289a.84.84 0 0 1 0 .52a2 2 0 0 0-.74.74a.6.6 0 0 1-.12 0a1 1 0 0 1-.5-.11a1.4 1.4 0 0 1-.53-.25a2 2 0 0 1-.24-.29a.6.6 0 0 1-.11-.23a1 1 0 0 1 .55-1.05a1.33 1.33 0 0 1 1.48 0a.333.333 0 0 0 .46-.48a1.89 1.89 0 0 0-1.6-.58a1.54 1.54 0 0 0-.12-.82a.372.372 0 0 0-.7.25a1 1 0 0 1-.19.85a2.3 2.3 0 0 0-.529.39a1 1 0 0 1-.18.07a1.2 1.2 0 0 1-.5-.11a1.4 1.4 0 0 1-.46-.29a2.3 2.3 0 0 1-.25-.29a.56.56 0 0 1-.1-.24a.94.94 0 0 1 .57-1.049a1.35 1.35 0 0 1 1.48 0a.33.33 0 0 0 .44-.47a2.32 2.32 0 0 0-2.36-.44a1.83 1.83 0 0 0-1 .79a2 2 0 0 0-.359 1.39c.035.21.106.413.21.6q.214.333.5.61c.29.25.637.428 1.01.519q.229.07.47.08a2 2 0 0 0 0 .49a1.7 1.7 0 0 0 .22.59q.203.346.499.62a2.53 2.53 0 0 0 1.73.599a.2.2 0 0 1 0 .08c.033.212.108.416.22.6c.135.226.303.432.499.61c.286.251.629.43 1 .52a2.05 2.05 0 0 0 1.119 0a2.1 2.1 0 0 0 1.25-1.05a1.81 1.81 0 0 0-.01-1.53m-1.2-11.255q.204.04.4.11c.69.28 1.07-.45.57-.77a3 3 0 0 0-.8-.33a5.3 5.3 0 0 0-1.9-.06a7.3 7.3 0 0 1-1.669-.08l-2.049-.77q-.711-.298-1.47-.45a.31.31 0 0 0-.279.36a.32.32 0 0 0 .29.29s.12.06.23.12c.62.32 1.929 1.14 2.819 1.59c.365.209.77.338 1.19.38l1.129-.23a5.3 5.3 0 0 1 1.539-.16m13.115-2.479a.38.38 0 0 0-.52-.13l-1.78 1a6 6 0 0 1-.999.46a1.9 1.9 0 0 1-.63.09a8 8 0 0 1-1-.08a7 7 0 0 1-.869-.21c-.42-.14-.82-.32-1.24-.44a3.3 3.3 0 0 0-.999-.14q-.407.018-.79.16c-.353.117-.69.282-1 .49c-.25.15-2.548 2.278-2.768 2.508a6 6 0 0 0-1 1.23c-.192.34-.302.72-.32 1.11a1.51 1.51 0 0 0 .46 1.239a2 2 0 0 0 1.69.38c.516-.104 1-.33 1.409-.66q.614-.488 1.14-1.07a5.2 5.2 0 0 0 1.599.39q.39.045.78 0q.385-.056.75-.2a4.5 4.5 0 0 0 1.469-1a.32.32 0 0 0 .08-.46a.33.33 0 0 0-.46-.08a5.4 5.4 0 0 1-1.44.39l-.87.15c-.2 0-.38.07-.58.08a6 6 0 0 1-.939 0a.2.2 0 0 0 0-.11a.32.32 0 0 0-.46 0q-.71.705-1.519 1.29a2.5 2.5 0 0 1-1.08.42a1.2 1.2 0 0 1-.78-.14a.5.5 0 0 1-.249-.54c.042-.228.13-.446.26-.64q.375-.524.86-.95c.49-.489 1-.999 1.519-1.488a8 8 0 0 1 1.05-.82q.29-.195.61-.34a1.87 1.87 0 0 1 1.249-.09c.41.09.8.24 1.21.36q.537.135 1.089.19q.54.03 1.08 0c.32-.01.637-.07.939-.18a7.3 7.3 0 0 0 1.14-.6l1.729-1.09a.37.37 0 0 0 .18-.48'/%3E%3Cpath d='M18.56 14a4 4 0 0 0-.219-.51a7.7 7.7 0 0 0-1-1.349l-1.07-1.22a.33.33 0 0 0-.529.39l.79 1.42q.39.624.68 1.3c.121.252.202.522.24.8a1.25 1.25 0 0 1-.25.999c-.14.16-.32.28-.52.35a1 1 0 0 0-.05-.11a7.6 7.6 0 0 0-.7-.89l-1.44-1.63a.374.374 0 0 0-.62.42l1.12 1.91q.286.4.53.83q.13.221.2.47a.58.58 0 0 1-.14.69a1 1 0 0 1-.5.219v-.09a3.4 3.4 0 0 0-.39-.64c-.24-.29-.47-.57-.73-.84s-.499-.53-.769-.779a.33.33 0 0 0-.46-.05a.34.34 0 0 0-.05.47c.16.24.3.47.44.72s.39.73.57 1.11l.28.679l-.14.24a.93.93 0 0 1-.61.42a1 1 0 0 1-.72-.08a.37.37 0 0 0-.51.12a.38.38 0 0 0 .12.52a1.72 1.72 0 0 0 1.16.42a2 2 0 0 0 1.85-1.12q.045-.148.06-.3a2 2 0 0 0 .999-.19a1.63 1.63 0 0 0 .81-1.7a2.14 2.14 0 0 0 1-.48a2.3 2.3 0 0 0 .749-1.629a3.7 3.7 0 0 0-.18-.89m5.428-1.229a.37.37 0 0 0-.45-.27c-.61.07-1.2.09-1.79.19a7 7 0 0 0-1.179.3a6 6 0 0 0-1.25.65c-.819.34-.33 1 .44.78l.93-.19l.7-.17l.69-.22c.55-.19 1.09-.4 1.639-.62a.37.37 0 0 0 .27-.45'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.partnership-light {
    padding: 50px 24px;
}

/* Header Styling */
.header {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 60px;
}

.badge {
    display: inline-block;
    padding: 6px 16px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.highlight {
    color: var(--accent-color);
}

.subtitle {
    margin-top: 16px;
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Grid System */
.grid {
    display: grid;
    gap: 24px;
    /* Desktop default: 3 columns */
    grid-template-columns: repeat(2, 1fr);
}

/* Card-offshore Styling */
.card-offshore {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 20px;
    align-items: start;
}

.card-offshore:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: transparent;
    /* Sembunyikan border asli */
    outline: 2px solid var(--accent-color);
    /* Gunakan outline atau ring untuk kesan modern */
}

.icon-wrapper {
    width: 50px;
    height: 50px;
    background: #f1f5f9;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--accent-color);
    transition: background 0.3s ease;
    padding: 10px;
}

.card-offshore:hover .icon-wrapper {
    background: var(--accent-color);
    color: #ffffff;
}

.card-offshore h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1e293b;
    line-height: 1.4;
}

.card-offshore p {
    color: #64748b;
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 0px;
}

/* Responsive Breakpoints */

/* Tablet (Laptop kecil hingga Tablet) */
@media (max-width: 1024px) and (min-width: 641px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-offshore {
        flex-direction: column;
        gap: 0px;
    }
}

/* Mobile (max-width: 640px) */
@media (max-width: 640px) {
    .partnership-light {
        padding: 50px 20px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .header {
        text-align: left;
    }

    .card-offshore {
        flex-direction: column;
        gap: 0px;
    }
}