/* ------------------------------------------------------------------------------

  Template Name: Blue Marina Asset Management 
  Description: Blue Marina Asset Management  - Investment & Finance Template
  Author: Murren
  Author URI: http://themeforest.net/user/murren20
  Version: 1.0

    1.  General
    2.  Content styles
    3.  Area colors
        3.1  mobile menu color 
        3.2  slider-area color css 
        3.3  features-area color
        3.4  about area color
        3.5  clients-about-area color
        3.6. latest-blog-area css
        3.7  question area color
        3.8  work-progressbar-area color
        3.9  map-contact-area color
        3.10 banner-area color
        3.11 about-text-area color
        3.12 team area color
        3.13 services area color
        3.14 blog-area color css
        3.15 contact area color 
        3.16 footer area color

    4. Styles
        4.1  Header area css
        4.2  Mobile menu css
        4.3  Slider area css
        4.4  Banner area css
        4.5  Feature area css
        4.6  Clients-about area css
        4.7  About area css
        4.8  About-text-area css
        4.9  Button css
        4.10 Partners css
        4.11 Latest blog area css
        4.12 Qyestion-area css
        4.13 Wirj0origressbar-area css
        4.14 Map-contact area css
        4.15 TEam area css
        4.16 Servuces area css
        4.17 Blog area css
        4.18 Blog post css
        4.19 Contact area css
        4.20 Footer area css
        4.21 Procuct area



/*=== 1. General ====*/

@font-face {
  font-family: "muller";
  src: url(../fonts/Muller-ExtraBold-DEMO.woff);
}

:root {
  --terms-primary-color: #14b6f2;
  --terms-secondary-color: #34495e;
  --terms-text-color: #333;
  --terms-text-light: #666;
  --terms-border-color: #e9ecef;
  --terms-bg-color: #ffffff;
  --terms-link-color: #2980b9;
  --terms-link-hover: #3498db;
}

.logo {
  max-width: 250px;
  height: auto;
  width: 100%;
}

.Welcome-text {
  color: #14b6f2;
  font-weight: 700;
  font-family: "MonteCarlo";
  font-style: italic;
}
@media screen and (max-width: 767px) {
  .logo {
    max-width: 130px;
  }
}

.newsletter-text {
  font-size: 15px;
}
.m0 {
  margin: 0;
}

.p0 {
  padding: 0;
}

body {
  font: 400 16px/26px "Oxygen", sans-serif;
  color: #666666;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  list-style: none;
  padding: 0;
}

p {
  text-align: justify;
  margin: 0;
  list-style: none;
  padding: 0;
}

a,
.btn,
button {
  text-decoration: none;
  outline: none;
  transition: all 400ms linear 0s;
}
a:hover,
a:focus,
.btn:hover,
.btn:focus,
button:hover,
button:focus {
  text-decoration: none;
  outline: none;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none;
  box-shadow: none;
}

/*=== 2. Content styles ====*/

.loader {
  position: fixed;
  overflow: hidden;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #fff;
  text-align: center;
}

.loader-brand {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.sk-folding-cube .sk-cube:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #14b6f2;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
  animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
  transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
  transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
  transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {
  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes sk-foldCubeAngle {
  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

section.row,
header.row,
footer.row {
  margin: 0;
}

.header-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 0px 20px;
}

.section-title {
  font: 700 20px "Oxygen", sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  color: #3d3d3d;
}

.section-title:after {
  content: "";
  width: 100px;
  height: 2px;
  display: block;
  position: absolute;
  top: 13px;
  right: -187px;
  background: #f0efef;
}

.features-num {
  font: 700 50px "Rufina", serif;
  display: block;
}

.date {
  font: 700 14px "Rufina", serif;
  display: inline-block;
}
.date a {
  color: #666666;
}
.date a:hover {
  color: #666666;
}

/*==== 3 Area colors ====*/

.header-area .main-menu nav ul li a {
  color: #fff;
  font: clamp(14px, 5vw, 17px) "Oxygen", sans-serif;
}

.header-area .socia-icon ul li a {
  color: #fff;
  font: clamp(14px, 5vw, 17px) "Oxygen", sans-serif;
}
.header-area .socia-icon ul li a:hover {
  color: #14b6f2;
}

.header-area .main-menu nav ul li a:hover {
  color: #14b6f2;
}

.header-area .main-menu nav ul li.active a {
  color: #14b6f2;
  font: clamp(14px, 5vw, 17px) "Oxygen", sans-serif;
  /* text-decoration: underline; */
  offset: 0px 0px 10px #14b6f2;
  transition: all 0.3s ease-in-out;
}

.header-area .main-menu nav ul li .sub-menu {
  background: #fff;
  /* padding-bottom: 1rem; */
}

.header-area .main-menu nav ul li .sub-menu a {
  color: #101010;
}

li a i {
  display: inline-block; /* ensures transform works properly */
  transition: transform 0.9s ease-in-out;
  color: rgba(0, 0, 0, .6);
}

/* On hover: rotate the icon */
li:hover a i {
  transform: rotate(180deg); /* rotates the arrow */
  color: #14b6f2;
}

.active a i {
  transform: rotate(180deg); /* keeps the arrow rotated for active links */
  color: #14b6f2;
}

.header-area .main-menu nav ul li .sub-menu li a:hover,
.header-area .main-menu nav ul li .sub-menu .active a {
  color: #14b6f2;
}

/*==== 3.1 mobile menu color ====*/
.mobile-menu-area {
  background: #262626;
}
.mobile-menu-area .mean-container .mean-nav ul li {
  background: #f4f5f6;
}
.mobile-menu-area .mean-container .mean-nav > ul > li > a:hover,
.mobile-menu-area .mean-container .mean-nav > ul > .active > a {
  color: #14b6f2;
  background: none;
}

.mobile-menu-area .mean-container .mean-nav ul ul .active a {
  color: #14b6f2;
}

/*===== 3.2 slider-area color css ====*/
.main-slider-area {
  overflow: hidden;
}
.main-slider-area .slider:after {
  background: #101010;
}
.main-slider-area .slider .slide-tittle h2 {
  color: #000000;
  z-index: 120;
}
.main-slider-area .slider .slide-tittle h2 span {
  color: #14b6f2;
}
.main-slider-area .slider .slide-p p {
  color: #000000;
  text-align: left;
}
.main-slider-area .zeus .tp-bullet {
  background-color: rgba(17, 116, 155, 0.3);
  /* background: #fff; */
  opacity: 1;
  font-size: 3rem;
}
.main-slider-area .zeus .tp-bullet.selected {
  background-color: #14b6f2;
}

.main-slider-area .slider img {
  background-size: contain;
}
.main-slider-area .slider .btn {
  /* outline: skyblue 2px solid; */
  border: skyblue 2px solid;
  border-radius: 3rem;
  /* z-index: 25; */
  z-index: 120;
}

/*==== 3.3 features-area color ====*/
.features-num:hover {
  color: #5c5d5e;
}
.features-num {
  color: #14b6f2;
}

.features-area .features-content h2 {
  color: #3d3d3d;
}
.features-area .features-content h2:hover {
  color: #14b6f2;
}

/*===== 3.4 about area color ====*/
.about-area {
  padding-top: 4rem;
  background: #f8f8f8;
}

/* .about-area .about-content .about-img:after {
  background-image: -moz-linear-gradient(
    -90deg,
    rgba(0, 175, 240, 0.38824) 0%,
    rgba(0, 175, 240, 0.98039) 100%
  );
  background-image: -webkit-linear-gradient(
    -90deg,
    rgba(0, 175, 240, 0.38824) 0%,
    rgba(0, 175, 240, 0.98039) 100%
  );
  background-image: -ms-linear-gradient(
    -90deg,
    rgba(0, 175, 240, 0.38824) 0%,
    rgba(0, 175, 240, 0.98039) 100%
  );
} */

.about-area .about-content .about-img .content h3 {
  color: #fff;
}

.about-area .about-content .about-img .content span a {
  color: #fff;
}

.about-area .about-content .texts h2 {
  color: #3d3d3d;
}
.about-area .about-content .texts h2:hover {
  color: #14b6f2;
}

/* .about-content.about-media {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  padding-block: 2rem;
} */

@media (min-width: 768px) {
  .about-content.about-media {
    flex-direction: row;
  }
}
/*==== 3.5 clients-about-area color ====*/
.clients-about-area:after {
  background: #060606;
}

.clients-about-area .section-title {
  color: #fff;
}

.clients-about-area .section-title:after {
  background: #67caf0;
}

.clients-about-area .slider-carousel .slider-content .text {
  background: #f8f8f8;
}

.clients-about-area .slider-carousel .slider-content .text p {
  color: #4b4b4b;
}

.clients-about-area .slider-carousel .slider-content .media span {
  color: #fff;
}

.clients-about-area .slider-carousel .slider-content .media span a {
  color: #fff;
}

/*==== 3.6 latest-blog-area css ====*/
.latest-blog-area {
  background: #f5f5f5;
}

.latest-blog-area .blog .img-hover:after {
  background: #14b6f2;
}

.latest-blog-area .blog .blog-content {
  background: #fff;
}

.latest-blog-area .blog .blog-content h2 {
  color: #3d3d3d;
}

.latest-blog-area .blog .blog-content .date a {
  color: #666666;
}

.latest-blog-area .blog .blog-content a {
  color: #14b6f2;
}

/*=== 3.7 question area color ===*/
.question-area:after {
  background: dimgray;
}
.question-area .question-content h2 {
  color: #fff;
}
.question-area .question-content p {
  color: #fff;
}
.question-area .question-contact-form .contact-form {
  background: #fff;
}
.question-area .question-contact-form .contact-form .form-control {
  color: #e0e0e0;
}

label {
  font-size: 12px;
  margin-left: 12px;
  color: #12b5f1;
}

/*==== 3.8 work-progressbar-area color ===*/
.work-progressbar-area .work-progressbar .circle .chart-percent {
  border: 2px solid #f2f2f2;
  color: #000;
}

/*=== 3.9 map-contact-area color ====*/
.map-contact-area {
  position: relative;
}
.map-contact-area .contact-info {
  background-color: #252525;
  opacity: 0.949;
  width: 100%;
  display: block;
}
.map-contact-area .contact-info .info .box i {
  color: #14b6f2;
}
.map-contact-area .contact-info .info .box .media-body h2 a {
  color: #fefeff;
}
.map-contact-area .contact-info .info .box .media-body h2 a:hover {
  color: #14b6f2;
}
.map-contact-area .contact-info .info .box .media-body ul li {
  color: #fff;
}
.map-contact-area .contact-info .info .box .media-body ul li a {
  color: #fff;
}

/*===== 3.10 banner-area color =====*/
.banner-area:after {
  background: #101010;
}

.page-cover .section-header {
  color: #fff;
}
.page-cover .section-header span {
  color: #14b6f2;
}
.page-cover .desc {
  color: #fff;
}
.page-cover .desc span {
  color: #14b6f2;
  font: clamp(18px, 5vw, 30px) "Rufina", serif;
  font-weight: bolder;
  font-style: italic;
}

/*==== 3.11 about-text-area color ====*/
.about-text-area .about-text h2 {
  color: #3d3d3d;
}
.about-text-area .about-text h2:after {
  background: #f0efef;
}
/* .about-text-area .about-img:before {
  background: #f5f5f5;
} */

/*==== 3.12 team area color ====*/
.team-area .team .team-img {
  background: #f7f7f7;
}
.team-area .team .team-img:after {
  background: #14b6f2;
}
.team-area .team .team-img .social-icon {
  background: #fff;
}
.team-area .team .team-img .social-icon li a {
  color: #14b6f2;
}
.team-area .team h2 a {
  color: #3d3d3d;
}
.team-area .team h2 a:hover {
  color: #14b6f2;
}
.team-area .team p {
  color: #3d3d3d;
}

/*===== 3.13 services area color =====*/
.services-area .service .services-item h2 {
  /* color: #3d3d3d; */
  color: #f7f7f7;
}
.services-area .service .services-item h2:hover {
  color: #14b6f2;
}
.services-area .service .service-img .img:before {
  background: #f6f6f6;
}

/*==== 3.14 blog-area color css =====*/
.blog-area .blog-section h2 {
  color: #3d3d3d;
}
.blog-area .blog-section .blog-inner .blog-social-icon li a {
  color: #14b6f2;
}
.blog-area .blog-section .blog-inner .blog-social-icon li a:hover {
  color: #3d3d3d;
}
.blog-area .blog-section p {
  color: #3d3d3d;
}
.blog-area .blog-section .tag {
  border-top: 1px solid #e6e6e6;
}
.blog-area .blog-section .tag h3 {
  color: #3d3d3d;
}
.blog-area .blog-section .tag ul li a {
  color: #14b6f2;
}
.blog-area .blog-section .tag ul li a:hover {
  color: #3d3d3d;
}
.blog-area .side-bar-section .widget .widget-tittle {
  color: #3d3d3d;
}
.blog-area
  .side-bar-section
  .widget
  .widget-inner
  .recent-post
  .media-body
  .post-title
  a {
  color: #3d3d3d;
}
.blog-area
  .side-bar-section
  .widget
  .widget-inner
  .recent-post
  .media-body
  .post-title
  a:hover {
  color: #14b6f2;
}
.blog-area
  .side-bar-section
  .widget
  .widget-inner
  .recent-post
  .media-body
  .post-date
  a {
  color: #666666;
}

/*==== 3.15 contact area color ====*/

.contact-area .contact-info-section .contact-info .info-icon {
  color: #14b6f2;
}
.contact-area .contact-info-section .contact-info h5 {
  color: #fff;
}
.contact-area .contact-info-section .contact-info h5 a {
  color: #f0f0f0;
}
.contact-area .contact-info-section .contact-info h5 a:hover {
  color: #14b6f2;
}
.contact-area .contact-form-box .form-group .form-control.error + .error {
  color: #14b6f2;
}
.contact-area .contact-form-box #success {
  color: lawngreen;
}
.contact-area .contact-form-box #error {
  color: orangered;
}
.contact-area .contact-form-box .submit {
  background: rgba(255, 255, 255, 0.071);
  color: #fff;
}
.contact-area .contact-form-box .submit:before {
  background: #14b6f2;
}
.contact-area .contact-form-box .submit:hover i {
  color: #fff;
}

/*==== 3.16 footer area color =====*/
.footer-area {
  background: #d6d6d6;
}

.footer-area .footer-top {
  border-bottom: 1px solid #3d3d3d;
}

.footer-area .footer-top .widget .widget-tittle {
  color: #000000;
}

.footer-area .footer-top .widget.about-widget p {
  color: #2b2b2b;
}

.footer-area .footer-top .widget-link ul li a {
  color: #000000;
  font-size: 18px;
}
.footer-area .footer-top .widget-link ul li a:hover {
  color: #14b6f2;
}

.footer-area .footer-top .recent-widget li .recent-post-text h5 a {
  color: #2b2b2b;
}
.footer-area .footer-top .recent-widget li .recent-post-text h5 a:hover {
  color: #14b6f2;
}

.footer-area .footer-top .recent-widget li .recent-post-text a {
  color: #2b2b2b;
}

.footer-area .footer-top .search-form .input-group .form-control {
  background: #3f3f3f;
  color: #e3e1e1;
}

.footer-area .footer-top .search-form .input-group .input-group-addon button {
  background: #14b6f2;
}

.footer-area .footer-top .search-form .input-group .input-group-addon button i {
  color: #fff;
}

.footer-bottom {
  color: #2b2b2b;
}

.footer-bottom a {
  color: #2b2b2b;
}
.footer-bottom a:hover {
  color: #14b6f2;
}

/*==== 4. Styles ====*/

/*==== 4.1 Header area css ====*/

.header-area {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  margin: 0 auto;
  z-index: 9999;
  /* padding: 10px 0px; */
  /* background: rgb(0, 0, 0, .2); */
}
.header-area .logo {
  display: inline-block;
  /* padding: 41px 0px 20px; */
}
.header-area .main-menu nav ul {
  width: 100%;
  text-align: center;
  /* margin-left: 50px; */
  /* clip-path: polygon(39% 16%, 100% 16%, 100% 75%, 0 76%, 0 16%, 21% 17%, 15% 0); */
}
.header-area .main-menu nav ul li {
  display: inline-block;
  position: relative;
}
.header-area .main-menu nav ul li a {
  letter-spacing: 2px;
  /* padding: 36px 0px 20px; */
  display: inline-block;
  text-transform: uppercase;
  text-shadow: none;
  font: clamp(17px, 5vw, 17px) "Oxygen", sans-serif;
  color: black;
}
.header-area .main-menu nav ul li:last-child a {
  background-color: #14b6f2;
  padding: 8px 20px;
  border-radius: 20px;
  color: #000000;
  font-size: 13px;
  font-weight: bold;
  padding: 10px 20px;
}
.header-area .main-menu nav ul li:last-child a:hover {
  /* color: #12b6f1; */
  background-color: #ffffffb9;
  outline: 2px solid #14b6f2;
  box-shadow: 0px 0px 10px #14b6f2;
  transition: all 0.3s ease-in-out;
}
.header-area .main-menu nav ul li + li {
  margin-left: 25px;
}
.header-area .main-menu nav ul li .sub-menu {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  top: 115%;
  transition: all 0.3s ease 0s;
  z-index: -99;
  width: 209px;
  padding: 10px 0px;
  text-align: left;
  clip-path: polygon(38% 11%, 100% 11%, 100% 75%, 0 76%, 0 11%, 21% 11%, 15% 0);
  padding: 40px 0 30px;
  transition: all 0.5s ease-in-out;
}
.header-area .main-menu nav ul li .sub-menu li {
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.header-area .main-menu nav ul li .sub-menu li a {
  font: 700 12px/16px "Oxygen", arial, sans-serif;
  padding: 15px 20px;
  text-transform: capitalize;
}
.header-area .main-menu nav ul li:hover .sub-menu {
  top: 100%;
  visibility: visible;
  z-index: 9999;
  opacity: 1;
}
/* .header-area .login {
  display: inline-block;
  margin: 32px 0;
}
.header-area .login a {
  background-color: #12b6f196;
  padding: 8px 20px;
  border-radius: 8px;
  color: white;
  text-transform: uppercase;
  font: clamp(14px, 5vw, 17px) "Oxygen", sans-serif
} */
.header-area .socia-icon {
  text-align: right;
}
.header-area .socia-icon ul {
  display: flex;
  gap: 35px;
}
.header-area .socia-icon ul li {
  /* display: inline-block; */
  font: clamp(14px, 5vw, 17px) "Oxygen", sans-serif;
}
.header-area .socia-icon ul li a {
  font: clamp(14px, 5vw, 17px) "Oxygen", sans-serif;
  line-height: 46px;
  display: inline-block;
  padding: 20px 0px 20px;
}
/* .header-area .socia-icon ul li + li {
  padding: 18px;
} */
@media (max-width: 991px) {
  .header-area {
    display: none;
  }
}

/*======== 4.2 mobile menu css =========*/
.mobile-menu-area {
  position: absolute;
  top: 0;
  width: 100%;
}
@media (min-width: 992px) {
  .mobile-menu-area {
    display: none;
  }
}
@media (max-width: 991px) {
  .mobile-menu-area {
    display: block;
  }
}
.mobile-menu-area .mean-container .mean-bar {
  padding-top: 0px;
}
.mobile-menu-area .mean-container .mean-bar:after {
  display: none;
}
.mobile-menu-area .mean-container .mean-bar .meanmenu-reveal {
  height: 33px;
  padding-top: 21px;
}
.mobile-menu-area .mean-container .logo {
  height: inherit;
  padding: 0;
  position: absolute;
  top: 11px;
  left: 20px;
  z-index: 999999;
}
.mobile-menu-area .mean-container .mean-nav ul li a {
  font: 700 12px/16px "Oxygen", sans-serif;
  background: none;
}

/*====================================================*/
/*====================================================*/
/*==== 4.3 slider area css =====*/
.main-slider-area {
  overflow: hidden;
}
.main-slider-area .slide-tittle h2 {
  font-weight: 400;
  text-shadow: none;
  font-family: "Rufina", serif;
  font-size: 55px;
}
.main-slider-area .slide-tittle .first-screen {
  font-family: "Roboto", sans-serif;
  font-size: 40px;
  color: #000000;
}
.main-slider-area .slider-p p {
  font: 400 18px/28px "Oxygen", sans-serif;
  padding-right: 72px;
  padding-top: 28px;
  padding-bottom: 39px;
  text-shadow: none;
  text-align: left;
}
.main-slider-area .contain-in {
  position: absolute;
  left: 0px;
  right: 28px;
  top: 50%;
}
.main-slider-area .contain-in .carousel-indicators li {
  margin-bottom: 45px;
  margin-right: 0px;
}
.main-slider-area .contain-in .carousel-indicators li.active {
  width: 11px;
  height: 11px;
  border: 0px;
  transition: all 400ms linear 0s;
}
.main-slider-area .carousel-inner .item {
  z-index: 1;
}
.main-slider-area .carousel-inner .carousel-caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  left: 0;
  width: 100%;
  text-align: left;
}
.main-slider-area .carousel-inner .carousel-caption .content {
  max-width: 690px;
}
.main-slider-area .carousel-indicators {
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  left: auto;
  width: auto;
  margin: 0;
}
.main-slider-area .carousel-indicators li {
  display: block;
}
.main-slider-area .zeus .tp-bullet {
  width: 10px;
  height: 10px;
  border: 0px;
}
.main-slider-area .zeus .tp-bullet .tp-bullet-image,
.main-slider-area .zeus .tp-bullet .tp-bullet-imageoverlay,
.main-slider-area .zeus .tp-bullet .tp-bullet-title {
  display: none;
}
.main-slider-area .zeus .tp-bullet:after {
  width: 10px;
  height: 10px;
}
.main-slider-area .zeus .tp-bullet.selected {
  width: 10px;
  height: 10px;
  transition: all 400ms linear 0s;
}

.defaultimg {
  background-position: unset !important;
}


/*==== 4.4 banner area ===*/
/* About us Page Banner */
.banner-area {
  position: relative;
  /* background: url(../image/about-banner.jpg) no-repeat scroll center 0; */
  background: url("https://img.freepik.com/free-photo/view-light-architecture-singapore-reflection_1203-6119.jpg?ga=GA1.1.935584956.1739534141&semt=ais_hybrid&w=740")no-repeat scroll center 0;

  background-size: cover;
  z-index: 1;
  padding: 237px 0px 15rem;
  /* clip-path: polygon(0 0, 100% 0, 100% 100%, 84% 92%, 67% 100%, 41% 93%, 19% 100%, 0 89%); */
  /* clip-path: polygon(0 0, 100% 0, 100% 63%, 100% 100%, 83% 91%, 54% 100%, 18% 92%, 0 100%); */
  /* clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 100%, 80% 90%, 50% 100%, 20% 90%, 0 100%, 0% 35%, 0 0); */
}
.banner-area:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  display: block;
  top: 0;
  left: 0;
  opacity: 0.3;
  background: #101010;
}

/* .banner-area {
  position: relative;
  background-size: cover;
  z-index: 1;
} */

/* The landing page overlay style */
.banner-area-home:after {
  background: #101010;
}

.banner-area-home:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  /* z-index: 20; */
  display: block;
  top: 0;
  left: 0;
  opacity: 0.2;
  color: #fff;
}

.page-cover {
  max-width: 590px;
  /* margin-bottom: rem; */
}
.page-cover .section-header {
  /* font: 400 60px "Rufina", serif; */
  font: 400 clamp(32px, 5vw, 60px) "Rufina", serif;
  /* padding-bottom: 28px; */
}
.page-cover p {
  font: 400 18px/28px "Oxygen", sans-serif;
  letter-spacing: 0px;
  color: #fff;
}
/* .defaultimg {
  background-position: right bottom !important;
} */
.banner-bg {
  background: url(../image/banner3.jpg) no-repeat scroll center 0;
  background-size: cover;
}

/* Service banner */
.banner {
  background: url(../image/about-banner.jpg) no-repeat scroll center 0;
  background-size: cover;
}

/*====================================================*/

/* downloads page */
.banner-area-downloads {
  position: relative;
  background: url("../image/uploade-file.png")no-repeat scroll center 0;
  background-size: cover;
  z-index: 1;
  padding: 22rem 0px 15rem;
}
.banner-area-downloads:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  display: block;
  top: 0;
  left: 0;
  opacity: 0.3;
  filter: blur(4px); /* adjust blur intensity as needed */
  z-index: -1;
}

.download-contents {
  padding-block: 3rem 4rem;
  background: #f9f9f9;
}

.download-contents .form-entry {
  background: #fff;
  border: 1px solid #ddd;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.download-contents .form-entry h4 {
  margin-bottom: 20px;
  color: #003366;
  font-weight: 600;
}

.form-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-download,
.btn-upload {
  padding: 10px 20px;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}

.btn-download {
  background-color: #14b6f2;
  color: #000;
  transition: all 0.3s ease-in-out;
}

.btn-upload {
  background-color: #fff;
  outline: solid 2px #14b6f2;
  color: #000;
  transition: all 0.3s ease-in-out;
}

.btn-download:hover {
  background-color: #1d99c7;
  color: #fff;
}

.btn-upload:hover {
  background-color: #5a6268;
  color: #fff;
  /* outline: solid 2px #0056b3; */
}

@media screen and (max-width: 767px) {
  .banner-area-downloads {
    position: relative;
    background: url("../image/file-upload-banner-mobile.png")no-repeat scroll center 0;
    background-size: cover;
    z-index: 1;
    padding: 9rem 0px 17rem;
  }
}

.banner-area-downloads .page-cover .section-header {
  color: #000000;
}

.banner-area-downloads .page-cover p {
  color: #000000;
}

/*====================================================*/
/*==== 4.5 features area css ====*/
.features-area {
  padding: 114px 0px 110px;
}
/* .features-area .features {
  padding-top: 4rem;
} */
.features-area .features-content {
  padding-right: 20px;
}
.features-wrapper {
  margin-bottom: 40px;
}
.features-content svg {
  display: block;
}
.features-area .features-content h2 {
  font: 700 16px "Oxygen", sans-serif;
  text-transform: uppercase;
  padding: 8px 0px 19px;
  transition: all 400ms linear 0s;
  display: inline-block;
  cursor: pointer;
}
.features-area .features-content .arrow {
  font-size: 16px;
  line-height: 26px;
  padding-top: 11px;
  display: flex;
  gap: 4px;
  align-items: center;
}

/*==== 4.6 clients-about-area css ====*/
.clients-about-area {
  background: url("../image/clients-about-us-bg.jpg") no-repeat scroll center 0;
  background-size: cover;
  position: relative;
  z-index: 1;
  padding: 2rem 0;
}
.clients-about-area:after {
  content: "";
  width: 100%;
  top: 0;
  left: 0;
  display: block;
  right: 0;
  z-index: -1;
  position: absolute;
  bottom: 0;
  opacity: 0.95;
}
.clients-about-area .slider-carousel {
  padding: 5px 58px 0px;
}
.clients-about-area .slider-carousel .slider-content .text {
  padding: 34px 40px 37px 43px;
  margin-bottom: 30px;
  border-radius: 3px;
  box-shadow: 0px 11px 40px 0px rgba(0, 0, 0, 0.055);
}
.clients-about-area .slider-carousel .slider-content .text p {
  font-size: 14px;
  /* line-height: 28px; */
  margin-bottom: 0px;
}
.clients-about-area .slider-carousel .slider-content .media .img {
  padding-right: 40px;
}
.clients-about-area .slider-carousel .slider-content .media .img img {
  width: 70px;
  height: 70px;
}
.clients-about-area .slider-carousel .slider-content .media .media-body {
  vertical-align: middle;
}
.clients-about-area .slider-carousel .slider-content .media .media-body span {
  font: 400 16px/24px "Oxygen", sans-serif;
  font-style: italic;
}
.clients-about-area .slider-carousel .owl-prev,
.clients-about-area .slider-carousel .owl-next {
  position: absolute;
  top: 50%;
  font-size: 40px;
  color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
}
.clients-about-area .slider-carousel .owl-prev {
  left: 0;
}
.clients-about-area .slider-carousel .owl-next {
  right: 0;
}
.clients-about-area .clients-btn {
  margin: 0 auto;
  max-width: 286px;
}

/*====================================================*/
/*====================================================*/
/*==== 4.7 about area css =====*/
.about-area .about-content {
  /* margin-top: 4rem; */
  display: flex;
  justify-content: center;
  /* align-items: start;
  flex-direction: column; */
  padding-block: 2rem;
}

.home-about-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  font-size: 1.05rem; /* slightly larger text */
}

.about-img, .home-about-texts {
  /* padding-top: 2rem; */
  flex: 1;
}

.about-img {
  /* padding-top: 3rem; */
  /* background: #dad5d5; */
  max-height: 450px;
  max-width: 450px;
  height: auto;
  width: 100%;
  /* aspect-ratio: 1 / 1; */
}

.about-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

.home-about-texts {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.home-about-texts h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.home-about-texts p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.home-about-texts .btn {
  margin-top: 1rem;
  text-transform: capitalize;
  font-weight: bold;
}

@media (max-width: 768px) {
  .home-about-content {
    flex-direction: row;
  }

  .about-area .about-content {
    flex-direction: column;
  }
  .about-img img {
    width: 100%;
    max-height: auto;
    height: auto;
    max-width: 100%;
  }
}

.about-body-home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.about-area .about-content .about-img {
  position: relative;
  z-index: 1;
  /* width: 300px; */
  /* width: 100%; */
  flex: 1;
}
/* .about-area .about-content .about-img:after {
  content: "";
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  display: block;
  z-index: 0;
  position: absolute;
} */
/* .about-area .about-content .about-img .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  display: block;
  z-index: 1;
  padding: 2rem;
} */
.about-area .about-content .about-img .content h3 {
  /* font: 700 25px/35px "Rufina", serif; */
  font: 700 2rem "Oxygen", sans-serif;
  /* padding-right: 125px; */
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -22%);
  width: max-content;
  text-align: center;
}
/* .about-area .about-content .about-img .content h3:after {
  content: "\7b";
  font-family: "ElegantIcons";
  speak: none;
  font-style: normal;
  font-size: 172px;
  position: absolute;
  transform: rotate(180deg);
  right: 63px;
  opacity: 0.141;
  top: 63px;
} */
.about-area .about-content .about-img .content span {
  font: 400 16px/26px "Oxygen", sans-serif;
  font-style: italic;
  color: #fff;
  display: inline-block;
}
.about-area .about-content .about-img .content h4 {
  font-family: "muller";
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  position: absolute;
  bottom: 20px;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -15%);
  width: max-content;
  text-align: center;
  color: rgba(255, 255, 255, 0.438);
  /* padding-left: 97px; */
}

.about-area .about-content .texts {
  padding: 0px 20px 0px 25px;
  flex: 1;
  flex-grow: 1;
}
.about-area .about-content .texts h2 {
  /* font: 700 25px "Rufina", serif; */
  font: 700 3rem "Oxygen", sans-serif;
  transition: all 400ms linear 0s;
}
.about-area .about-content .texts p {
  margin-bottom: 0px;
  padding-bottom: 27px;
}
.about-area .about-content .texts .button {
  margin-top: 46px;
}

/*====== 4.8 about-text-area css ======*/
/* .about-text-area {
  padding: 114px 0px 103px;
} */
 .about-page-container {
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }

.about-text-area {
  display: flex;
  flex-direction: column;
  column-gap: 8rem;
}
 .about-area-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* padding: 2rem; */
  /* max-width: 1500px; */
  /* width: 100%; */
  margin: 0 auto;
  /* gap: 8rem; */
}
.about-text-area .container {
  margin: 7rem 0;
}

.about-text-area .about-text h2 {
  /* font: 700 25px/35px "Rufina", serif; */
  font: 700 3rem "Oxygen", sans-serif;
  letter-spacing: 0px;
  position: relative;
  display: block;
  padding-bottom: 1.3rem;
}
/* .about-text-area .about-text h2:after {
  content: "";
  width: 100px;
  height: 2px;
  display: block;
  position: absolute;
  top: 13px;
  right: 221px;
} */
.about-text-area .about-text .text {
  /* width: 50%; */
  float: left;
  padding: 0px 46px 0px 0px;
  text-align: justify;
}
.about-text .text {
  margin: .8rem auto;
  font: 400 16px/26px "Oxygen", sans-serif;
  color: #5c5d5e;
}

.about-text .text strong {
  font-weight: 700;
  color: #000000;
}

.about-bottom-text {
  margin: 1rem auto 6rem;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
  padding: 0 0px 0 15px;
}
.about-text-area .about-bottom-text .text,  .about-bottom-text .text{
  padding: 0px 15px 0px 0px;
}
/* .about-text-area .about-text .text.text2 {
  padding: 0px 34px 0px 15px;
  position: relative;
} */
/* .about-text-area .about-text .text.text2:after {
  content: "";
  width: 100px;
  height: 2px;
  display: block;
  position: absolute;
  bottom: -60px;
  right: 34px;
  background: #f0efef;
} */
.about-text-area .about-img {
  position: relative;
  padding-left: 11px;
}
.about-text-area .about-img:before {
  content: "";
  display: block;
  position: absolute;
  right: 11px;
  top: 10px;
  bottom: -10px;
  left: 0px;
  z-index: -1;
}

/*====================================================*/
/*====================================================*/
/*==== 4.7 about area css =====*/
.vision-mission-area {
  /* width: 80%; */
  /* max-width: 1200px; */
  margin: 1rem auto;
  /* text-align: center; */
}

.vision-mission-area-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8rem;
}

@media (max-width: 768px) {
  .vision-mission-area-flex {
    flex-direction: column;
  }
}

h2.section-title {
  /* font-size: 36px; */
  margin-bottom: 3rem;
  /* color: #14b6f2; */
}

.section {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
}

.vision,
.mission {
  flex: 1;
  background-color: #fff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.vision:hover,
.mission:hover {
  transform: translateY(-10px);
}

.vision h2,
.mission h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #14b6f2;
}

.vision p,
.mission p {
  font-size: 18px;
  line-height: 1.6;
  color: #5c5d5e;
}

.vision {
  background-color: #f0f8ff;
}

.mission {
  background-color: #f0f8ff;
}

/* Responsive Design */
@media (max-width: 768px) {
  .vision-mission-area {
    width: 100%;
  }
  .section {
    flex-direction: column;
    align-items: center;
  }

  .vision,
  .mission {
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
  }
}

.products-area-home {
  background-color: rgba(0, 0, 0, 0.8);
  padding-block: 5rem;
}
/* products */
.products-area {
  background-color: rgba(0, 0, 0, 0.8);
  /* background-image: url("/image/products-box.png"); */
  padding-block: 5rem;
}

.slider-carous.products-area el {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.products-area .slider-carousel .item {
  flex: 1 1 calc(33.333% - 20px);
  display: flex;
}
.products-area .section-title {
  color: #ffffff;
}
.products-area .slider-content {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 100%;
  width: 100%;
  box-shadow: 0 12px 24px rgba(0, 123, 255, 0.15); /* Light blue shadow */
}

.products-area .slider-carousel .owl-prev {
  left: 0;
  display: none !important;
}
.products-area .slider-carousel .owl-next {
  right: 0;
  display: none !important;
}

.products-area .slider-content .img img {
  width: 100%;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.products-area .slider-content .text {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.products-area .slider-content .content-title {
  font-weight: bolder;
  font-size: 1.6rem;
  line-height: 1.3;
  margin-bottom: 10px;
  color: #14b6f2;
}

.products-area .slider-content .content-body {
  color: #000000;
}

.products-area .section-sub-description {
  color: #ebf3fc;
}
.products-area .slider-content .content-body {
  flex-grow: 1;
  margin-bottom: 15px;
}

.products-area .more-btn {
  color: #00b3ff;
  text-decoration: none;
  font-weight: 400;
}

.products-area .more-btn:hover {
  text-decoration: underline;
}

.products-area .clients-btn {
  margin: 4rem auto;
  text-align: center;
}
@media (max-width: 768px) {
  .slider-carousel .item {
    flex: 1 1 100%;
  }
}
/*====================================================*/
/* products page banner*/
.produts-area-banner {
  background-color: rgba(0, 0, 0, 0.8);
  background-image: url("/image/products-box.png");
  /* padding-block: 5rem; */
}
/*====================================================*/
/*=== 4.9 button css ===*/
.button {
  font: 700 14px/50px "Oxygen", sans-serif;
  letter-spacing: 2px;
  padding: 0px 20px;
  text-transform: uppercase;
  border: 0px;
  padding: 0px 31px;
  box-shadow: none;
  outline: none;
  color: #303030;
  background: #fff;
  border-radius: 0px;
  box-shadow: 0px 11px 40px 0px rgba(0, 0, 0, 0.055);
  position: relative;
  z-index: 2;
  border-radius: 3rem;
  z-index: 25;
}
.button:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #14b6f2;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: all 400ms linear 0s;
  z-index: -1;
}
.button i {
  color: #14b6f2;
  padding-left: 28px;
  vertical-align: middle;
  font-size: 16px;
  transform: translateX(0px);
  display: inline-block;
  transition: all 400ms linear 0s;
  z-index: 25;
}
.button:hover {
  color: #fff;
}
.button:hover:before {
  transform: scaleX(1);
  border-radius: 3rem;
}
.button:hover i {
  transform: translateX(10px);
  -webkit-transform: translateX(10px);
  color: #fff;
}

.submit {
  background: #14b6f2;
  font: 700 14px/50px "Oxygen", sans-serif;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 0px;
  border-radius: 0px;
  padding: 0px 81px;
  position: relative;
  z-index: 2;
}
.submit:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f4f4f6;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: all 400ms linear 0s;
  z-index: -1;
}
.submit i {
  padding-left: 26px;
  vertical-align: middle;
  transform: translateX(0px);
  display: inline-block;
  transition: all 400ms linear 0s;
}
.submit:hover {
  color: #14b6f2;
}
.submit:hover:before {
  transform: scaleX(1);
}
.submit:hover i {
  transform: translateX(10px);
  -webkit-transform: translateX(10px);
  color: #14b6f2;
}

/*====================================================*/
/*====================================================*/
/*=== 4.10 partner logo area css ====*/
.partner-logo-area {
  padding: 114px 0px 120px;
}
.partner-logo-area .partner-carousel {
  padding-top: 115px;
}
.partner-logo-area .partner-carousel .single-partner img {
  width: auto;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  opacity: 0.3;
  transition: all 400ms linear 0s;
}
.partner-logo-area .partner-carousel .single-partner:hover img {
  transform: scale(1.1);
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  opacity: 0.8;
}

/*====================================================*/
/*====================================================*/
/*=== 4.11 latest blog area css ===*/
.latest-blog-area {
  padding: 115px 0px 120px;
}
.latest-blog-area .latest {
  padding-top: 4rem;
}
.latest-blog-area .latest .blog {
  cursor: pointer;
  position: relative;
  max-width: 337px;
  padding-bottom: 89px;
}
.latest-blog-area .latest .blog.blog-info1 {
  margin-left: 16px;
}
.latest-blog-area .latest .blog.blog-info {
  margin-left: 33px;
}
.latest-blog-area .latest .blog .img-hover {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.latest-blog-area .latest .blog .img-hover:after {
  content: "";
  width: 100%;
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  height: 100%;
  transition: all 400ms linear 0s;
  opacity: 0;
  transform: translateY(-100%);
  border-radius: 2px;
}
.latest-blog-area .latest .blog .blog-content {
  padding: 18px 22px 17px 20px;
  margin-left: 17px;
  position: absolute;
  border-radius: 2px;
  bottom: 0;
  box-shadow: 0px 8px 40px -9px rgba(0, 0, 0, 0.155);
  transition: all 400ms linear 0s;
}
.latest-blog-area .latest .blog .blog-content .blog-content-inner {
  transition: all 400ms linear 0s;
}
.latest-blog-area .latest .blog .blog-content h2 {
  font: 700 16px "Rufina", serif;
}
.latest-blog-area .latest .blog .blog-content p {
  padding: 19px 0px 15px;
  margin-bottom: 0px;
  line-height: 24px;
  transition: all 0.5s ease-in-out;
}
.latest-blog-area .latest .blog:hover .img-hover:after {
  transform: translateY(0);
  opacity: 0.4;
}
.latest-blog-area .latest .blog:hover .blog-content {
  transform: rotateY(-180deg);
}
.latest-blog-area .latest .blog:hover .blog-content-inner {
  transform: rotateY(180deg);
}

.btn-button {
  margin: 80px auto 0 auto;
  text-align: center;
}

/*==== 4.12 question-area css ====*/
.question-area {
  background: url("../image/Contact-home.jpeg") no-repeat scroll center 0;
  background-size: cover;
  padding: 120px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.question-area:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0.859;
  display: block;
  z-index: -1;
}
/* .question-area:before {
  content: "Blue Marina";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: -1;
  font-size: 280px;
  font-family: "muller";
  color: #fff;
  opacity: 0.859;
  display: block;
  line-height: 1.2;
  text-align: center;
} */

@media screen and (max-width: 767px) {
  .question-area:before {
    font-size: 120px;
  }
}
.question-area .question-content {
  padding: 0px 70px;
}
.question-area .question-content h2 {
  font: 400 40px/50px "Rufina", serif;
}
.question-area .question-content p {
  padding: 33px 80px 0px 0px;
}
.question-area .question-contact-form {
  padding: 0 100px;
}
.question-area .question-contact-form .contact-form {
  padding: 33px 60px 40px;
  border-radius: 2px;
}
.question-area .question-contact-form .contact-form .form-control {
  border: 0px;
  border-bottom: 1px solid #dadada;
  background: none;
  outline: none;
  box-shadow: none;
  border-radius: 0px;
  font: 400 16px/26px "Oxygen", sans-serif;
  text-transform: capitalize;
  padding: 0px 0px 3px 12px;
}
.question-area .question-contact-form .contact-form .form-control.placeholder {
  color: #4b4b4b;
}
.question-area
  .question-contact-form
  .contact-form
  .form-control:-moz-placeholder {
  color: #4b4b4b;
}
.question-area
  .question-contact-form
  .contact-form
  .form-control::-moz-placeholder {
  color: #4b4b4b;
}
.question-area
  .question-contact-form
  .contact-form
  .form-control::-webkit-input-placeholder {
  color: #4b4b4b;
}
.question-area
  .question-contact-form
  .contact-form
  .form-control
  + .form-control {
  margin-top: 32px;
}
.question-area .question-contact-form .contact-form textarea {
  margin-bottom: 40px;
}
.question-area .question-contact-form .contact-form textarea.form-control {
  height: 123px;
  resize: none;
}

/*==== 4.13 work-progressbar-area ====*/
.work-progressbar-area {
  padding: 120px 0px 102px;
}
.work-progressbar-area .work-progress {
  padding-top: 83px;
}
.work-progressbar-area .work-progress .work-progressbar .circle {
  position: relative;
}
.work-progressbar-area .work-progress .work-progressbar .circle .chart-percent {
  position: absolute;
  top: 8px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  left: 8px;
  font-size: 30px;
  font-family: "Rufina", serif;
  font-weight: 700;
}
.work-progressbar-area
  .work-progress
  .work-progressbar
  .circle
  .chart-percent
  .text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.work-progressbar-area .work-progress .work-progressbar p {
  margin-bottom: 0px;
  padding-top: 17px;
  line-height: 22px;
}

/*===== 4.14 map-contact-area css ====*/
.map-contact-area #mapBox {
  height: 522px;
}
.map-contact-area .contact-info {
  padding: 78px 0px 76px;
}
.map-contact-area .contact-info .info {
  padding: 0px 0px 0px 91px;
}
.map-contact-area .contact-info .info .box .media-left {
  padding-right: 30px;
}
.map-contact-area .contact-info .info .box .media-left i {
  font-size: 61px;
}
.map-contact-area .contact-info .info .box .media-body h2 {
  font: 700 20px/21px "Oxygen", sans-serif;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  padding-bottom: 28px;
}
.map-contact-area .contact-info .info .box .media-body ul li {
  font: 400 16px/24px "Oxygen", sans-serif;
}
.map-contact-area .contact-info .info .box .icon {
  padding-right: 21px;
}

/*====================================================*/
/*====================================================*/
/*==== 4.15 team area css ====*/
/* --- Base Styles for All Team Cards --- */
/* These styles apply to the inner 'team' div and its content,
   ensuring consistency across both Board and Management sections. */

   .team-card-wrapper {
    /* This div now acts as the grid item. mb-4 ensures spacing if gap isn't enough,
       or you can rely purely on grid gap if you prefer. */
    margin-bottom: 2rem; /* Example: adjust as needed */
  }
  
  .team-area .teams .team {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally within the team card */
    justify-content: center;
    text-align: center; /* Centers text within the team card */
    transition: transform 0.3s ease;
    width: 100%; /* Ensures the team card takes full width of its grid cell */
  }
  
  /* Team image container */
  .team-area .teams .team .team-img {
    position: relative;
    width: 220px; /* Default size for overall consistency, can be adjusted in media queries */
    height: 220px;
    border-radius: 50%;
    padding-top: 17px;
    overflow: hidden;
    margin-bottom: 1rem;
    z-index: 1;
  }
  
  /* Hover overlay effect */
  .team-area .teams .team .team-img:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #14b6f2;
    opacity: 0;
    transition: all 400ms linear 0s;
    transform: translateY(-100%);
    z-index: -1;
  }
  
  .team-area .teams .team:hover .team-img:after {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Team image */
  .team-area .teams .team .team-img img {
    width: 100%;
    transition: all 0.4s ease;
    scale: 1;
  }
  
  .team-area .teams .team:hover .team-img img {
    scale: 1.1; /* Or .96 as per your previous code, depends on desired effect */
  }
  
  /* Text styles */
  .team-area .teams .team h2 {
    font: 700 16px "Oxygen", sans-serif;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    padding-top: 27px;
    transition: all 400ms linear 0s;
    text-align: center;
  }
  .team-area .teams .team p {
    font-size: 14px;
    font-style: italic;
    margin-bottom: 0px;
    display: inline-block;
    text-align: center;
  }
  
  .team-area .teams .team a {
    color: #3d3d3d;
    text-align: center;
    /* Removed fixed width like '300px' which could cause overflow */
  }
  
  .team-area .teams .team a:hover {
    color: #14b6f2;
  }
  
  /* --- Grid Layout for Board Of Directors --- */
  .board-teams {
    display: grid;
    /* Default to 1 column for very small screens */
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem; /* Adjust horizontal and vertical spacing */
    width: 100%;
    max-width: 1300px; /* Your desired max width for the grid */
    margin: 0 auto;
    padding: 2rem; /* Internal padding for the grid container */
    justify-items: center; /* Centers grid items within their cells */
  }
  
  @media (min-width: 576px) { /* Small screens (sm) and up */
    .board-teams {
      grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
    .board-teams .team-img { /* Adjust image size for 2 columns */
      width: 220px;
      height: 220px;
    }
  }
  
  @media (min-width: 768px) { /* Medium screens (md) and up */
    .board-teams {
      grid-template-columns: repeat(3, 1fr); /* 3 columns */
      gap: 3rem 1.5rem; /* Specific gap for medium screens */
    }
    .board-teams .team-img { /* Adjust image size for 3 columns */
      width: 200px;
      height: 200px;
    }
  }
  
  @media (min-width: 992px) { /* Large screens (lg) and up */
    .board-teams {
      grid-template-columns: repeat(4, 1fr); /* 4 columns */
      gap: 4rem 2rem; /* Specific gap for large screens */
    }
    .board-teams .team-img { /* Adjust image size for 4 columns */
      width: 180px;
      height: 180px;
    }
  }
  
  /* --- Grid Layout for Management Team --- */
  .management-teams-grid { /* Using the new class for management grid */
    display: grid;
    /* Default to 1 column for very small screens */
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem; /* Adjust horizontal and vertical spacing */
    width: 100%;
    max-width: 1300px; /* Can be adjusted if management needs a different max-width */
    margin: 0 auto;
    padding: 2rem; /* Internal padding for the grid container */
    justify-items: center; /* Centers grid items within their cells */
  }
  
  @media (min-width: 576px) { /* Small screens (sm) and up */
    .management-teams-grid {
      grid-template-columns: repeat(3, 1fr); /* 2 columns */
      /* grid-template-columns: repeat(2, 1fr); 2 columns */
    }
    .management-teams-grid .team-img { /* Adjust image size for 2 columns */
      width: 220px;
      height: 220px;
    }
  }
  
  /* Note: You specified 3, 2, 1. So 1 column for smallest, 2 for medium, 3 for large.
     I'll set 3 columns for 992px and up, keeping 2 columns for 768px-991px. */
  @media (min-width: 992px) { /* Large screens (lg) and up */
    .management-teams-grid {
      grid-template-columns: repeat(4, 1fr);
      /* grid-template-columns: repeat(3, 1fr); 3 columns */
      gap: 3rem 1.5rem; /* Specific gap for large screens */
    }
    .management-teams-grid .team-img { /* Adjust image size for 3 columns */
      width: 200px; /* Slightly smaller for 3 columns */
      height: 200px;
    }
  }
  
  /* --- General .teams styling (if needed for shared properties like overall margin/padding that don't relate to grid) --- */
  /* Your original .teams was overriding some board-teams properties, so I've removed it
     unless it serves a distinct, non-grid related purpose.
     If .teams is meant to be a general container for *all* team lists,
     ensure its properties don't conflict with the specific grid rules.
  */
  /*
  .teams {
    max-width: 900px !important;
    width: 100%;
    display: flex; // This would conflict with grid
    flex-direction: column; // This would conflict with grid
    align-items: center;
    justify-content: center;
  }
  */

/*====================================================*/
/*====================================================*/
/* Team member page */
.profile-card {
  width: 80%;
  margin: 150px auto;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(18, 181, 241, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.profile-card:hover {
  transform: translateY(-5px);
}

.profile-header {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 4rem;
  padding: 2.5rem;
  background: linear-gradient(
    45deg,
    rgba(18, 181, 241, 0.05),
    rgba(18, 181, 241, 0.1)
  );
}

.profile-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  height: 100%;
}

.profile-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
  transform: scale(.95)
}

.profile-image-wrapper:hover .profile-image {
  transform: scale(1.00);
}

.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-name {
  font-size: 2.7rem;
  font-weight: bold;
  /* color: #2c3e50; */
  margin-bottom: 0.5rem;
  border-bottom: 3px solid #12b5f1;
  padding-bottom: 0.5rem;
  display: inline-block;
}

.profile-position {
  font-size: 1.7rem;
  color: #726c6c;
  margin: 1.8rem 0;
  font-weight: 600;
}

.profile-description {
  font-size: 1.7rem;
  font-weight: 500;
  margin: 1.2rem 0;
}

.social-links {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
}

.social-link {
  color: #12b5f1;
  text-decoration: none;
  padding: 0.5rem 1.2rem;
  border: 2px solid #12b5f1;
  border-radius: 25px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.social-link:hover {
  background-color: #12b5f1;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(18, 181, 241, 0.2);
}

.profile-bio {
  padding: 100px 30px;
  border-top: 1px solid #eee;
  font-size: 1.6rem;
  color: #2c3e50;
  background: white;
}

.bio-section {
  margin-bottom: 2.5rem;
  padding-left: 1rem;
  border-left: 3px solid #12b5f1;
}

@media (max-width: 768px) {
  .profile-header {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .profile-image-wrapper {
    height: 400px;
    max-width: 300px;
    margin: 0 auto;
  }

  .profile-image {
    height: 100%;
  }

  .social-links {
    justify-content: center;
  }

  .bio-section {
    border-left: none;
    padding-left: 0;
    text-align: center;
  }

  .profile-name {
    display: inline-block;
    margin: 0 auto;
  }
}

/*====================================================*/
/*====================================================*/
/*===== 4.16 services area css =====*/
.services-area {
  background-color: rgb(15, 15, 15); 
  padding-block: 4rem; 
  /* margin-inline: 10rem;  */
  margin-block: 10rem;
  color: #ffffff;
}

.services-area .service + .service {
  padding-top: 87px;
}
.services-area .service .common {
  float: right;
}
.services-area .service .services-item {
  padding-right: 92px;
}
.services-area .service .services-item h2 {
  font: 700 3rem "Oxygen", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 0px 18px;
  transition: all 400ms linear 0s;
}
.services-area .service .services-item p {
  margin: 0px;
}
.learn-more-btn {
  display: inline-block;
  margin: 20px 0;
  padding: 10px 20px;
  background-color: transparent; /* Blue Marina-like blue */
  border: 1px solid #12b5f1;
  color: #12b6f1;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.learn-more-btn::after {
  color: #12b5f1;
}

.learn-more-btn:hover {
  background-color: #12b6f1c8;
  color: #fff;
  border: 2px solid #12b5f1;
}
.services-area .service .service-img {
  margin-top: 30px;
  padding-left: 68px;
  max-width: 550rem;
}
.services-area .service .service-img .img {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
}
.services-area .service .service-img .img:before {
  content: "";
  display: block;
  position: absolute;
  right: 10px;
  top: 10px;
  bottom: -10px;
  left: -10px;
  z-index: -1;
}
.services-area .service .service-img .img:after {
  content: "";
  width: 100px;
  height: 400px;
  height: 2px;
  background: #515151;
  position: absolute;
  left: -50px;
  top: 37px;
}
.services-area .service.services2 .services-item {
  padding-right: 0px;
  padding-left: 60px;
}
.services-area .service.services2 .service-img {
  padding-left: 15px;
}
.services-area .service.services2 .service-img .img:after {
  left: auto;
  right: -50px;
}

/* Celebration Design  */

 /* Your existing CSS animations - these are already plain CSS */
 @keyframes neon-pulse {
  0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00ffff, 0 0 35px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff, 0 0 75px #00ffff; }
  50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #00ffff, 0 0 17px #00ffff, 0 0 20px #00ffff, 0 0 25px #00ffff, 0 0 37px #00ffff; }
}

.neon-text {
  animation: neon-pulse 1.5s infinite alternate;
}

.bg-animated {
  background: linear-gradient(-45deg, #000000, #1a1a1a, #000033, #003366);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00de;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #00ffff;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(39px, 9999px, 71px, 0); }
  5% { clip: rect(76px, 9999px, 53px, 0); }
  10% { clip: rect(42px, 9999px, 16px, 0); }
  15% { clip: rect(94px, 9999px, 33px, 0); }
  20% { clip: rect(3px, 9999px, 5px, 0); }
  25% { clip: rect(21px, 9999px, 100px, 0); }
  30% { clip: rect(79px, 9999px, 82px, 0); }
  35% { clip: rect(56px, 9999px, 18px, 0); }
  40% { clip: rect(6px, 9999px, 38px, 0); }
  45% { clip: rect(65px, 9999px, 91px, 0); }
  50% { clip: rect(31px, 9999px, 56px, 0); }
  55% { clip: rect(88px, 9999px, 71px, 0); }
  60% { clip: rect(13px, 9999px, 43px, 0); }
  65% { clip: rect(50px, 9999px, 9px, 0); }
  70% { clip: rect(27px, 9999px, 68px, 0); }
  75% { clip: rect(85px, 9999px, 25px, 0); }
  80% { clip: rect(44px, 9999px, 93px, 0); }
  85% { clip: rect(19px, 9999px, 39px, 0); }
  90% { clip: rect(71px, 9999px, 86px, 0); }
  95% { clip: rect(2px, 9999px, 62px, 0); }
  100% { clip: rect(54px, 9999px, 47px, 0); }
}

.hover-3d {
  transition: transform 0.3s;
}

.hover-3d:hover {
  transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(2deg);
}

.particle {
  position: absolute;
  border-radius: 50%;
}

@keyframes float-up {
  to {
      transform: translateY(-100vh) rotate(360deg);
      opacity: 0;
  }
}

.z-10-custom {
  z-index: 10;
}

.text-cyan-300-custom {
  color: #67e8f9; /* Approximate for Tailwind's cyan-300 */
}


/*====================================================*/
/*====================================================*/
/*===== 4.17 blog-area css =====*/
.blog-area {
  padding: 114px 0px 110px;
}
.blog-area .blog-section h2 {
  font: 700 30px/39px "Rufina", serif;
}
.blog-area .blog-section .blog-inner {
  padding: 22px 0px 15px;
}
.blog-area .blog-section .blog-inner .date {
  font-size: 16px;
}
.blog-area .blog-section .blog-inner .blog-social-icon {
  display: inline-block;
  float: right;
}
.blog-area .blog-section .blog-inner .blog-social-icon li {
  display: inline-block;
}
.blog-area .blog-section .blog-inner .blog-social-icon li a {
  font-size: 18px;
}
.blog-area .blog-section .blog-inner .blog-social-icon li + li {
  padding-left: 16px;
}
.blog-area .blog-section .blog-inner .blog-social-icon li:last-child {
  padding-left: 14px;
}
.blog-area .blog-section p {
  font-size: 18px;
  line-height: 32px;
  letter-spacing: -0.1px;
  padding-top: 31px;
}
.blog-area .blog-section p + p {
  padding-top: 23px;
}
.blog-area .blog-section .tag {
  font: 700 14px/32px "Oxygen", sans-serif;
  text-transform: uppercase;
  padding-top: 31px;
  margin-top: 36px;
}
.blog-area .blog-section .tag h3 {
  display: inline-block;
  font: 700 14px/32px "Oxygen", sans-serif;
}
.blog-area .blog-section .tag ul {
  display: inline-block;
}
.blog-area .blog-section .tag ul li {
  display: inline-block;
}
.blog-area .side-bar-section {
  padding: 30px 20px 0px;
}
.blog-area .side-bar-section .widget .widget-tittle {
  font: 700 20px/28px "Oxygen", sans-serif;
  letter-spacing: 2.2px;
  text-align: center;
  text-transform: uppercase;
}
.blog-area .side-bar-section .widget .recent-post {
  margin-top: 40px;
}
.blog-area .side-bar-section .widget .widget-inner .recent-post .media-left {
  padding-right: 30px;
  vertical-align: middle;
}
.blog-area
  .side-bar-section
  .widget
  .widget-inner
  .recent-post
  .media-body
  .post-title {
  font: 700 18px/28px "Rufina", serif;
}
.blog-area
  .side-bar-section
  .widget
  .widget-inner
  .recent-post
  .media-body
  .post-date {
  font: 400 14px/35px "Rufina", serif;
}

/*==== 4.18 blog-post css ====*/
.blog-post-area {
  background: #fff;
  padding: 120px 0px 80px;
}
.blog-post-area .latest {
  padding-top: 0px;
}
.blog-post-area .latest .blog {
  margin-bottom: 30px;
}
.blog-post-area .btn-button {
  margin: 50px auto 0 auto;
}
.blog-post-area .btn-button .submit {
  padding: 0px 31px;
}

/*====================================================*/
/*====================================================*/
/*===== 4.19 contact area css =====*/
/* .contact-area {
  background: url("https://img.freepik.com/free-photo/medium-shot-bored-people-working_23-2150697631.jpg?ga=GA1.1.935584956.1739534141&semt=ais_hybrid&w=740") no-repeat scroll center 0;
  background-size: cover;
  padding-top: 220px;
  padding-bottom: 80px;
  z-index: 1;
  position: relative;
  
} */

.contact-area {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 220px;
  padding-bottom: 80px;
  z-index: 0;
}

/* Background image with blur */
.contact-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("https://img.freepik.com/free-photo/medium-shot-bored-people-working_23-2150697631.jpg?ga=GA1.1.935584956.1739534141&semt=ais_hybrid&w=740");
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  z-index: 0;
  /* transform: scale(1.1); Prevents edge cutoff */
}

/* Dark overlay on top of blur */
.contact-area::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(76, 76, 76, 0.5);
  z-index: 1;
}

/* Child content stays sharp */
.contact-content {
  position: relative;
  z-index: 2;
  color: white;
}


.contact-area .contact-info-section, .page-cover {
  padding-bottom: 50px;
  position: relative;
  z-index: 2;
}
.contact-area .contact-info-section .contact-info {
  text-align: center;
}
.contact-area .contact-info-section .contact-info .info-icon {
  background: url("../image/blog/polygon-shape.png") no-repeat;
  background-position: center;
  text-align: center;
  display: inline-block;
  font-size: 30px;
  background-size: cover;
  width: 74px;
  height: 85px;
  line-height: 85px;
}
.contact-area .contact-info-section .contact-info h5 {
  font: 400 16px/24px "Oxygen", sans-serif;
  /* padding-top: 26px; */
  padding-top: 8px;
}
/* .contact-area .contact-info-section .contact-info.first-info {
  padding-right: 140px;
}
.contact-area .contact-info-section .contact-info.info {
  padding-right: 30px;
}
.contact-area .contact-info-section .contact-info.info-middle {
  padding-left: 60px;
}
*/
.contact-area .contact-info-section .contact-info.last-info {
  /* padding-left: 147px; */
  text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
} 
.contact-area .contact-form-box {
  padding-block: 30px;
  background-color: #3f3f3f;
  z-index: 3;
}
.contact-area .contact-form-box .form-group.name {
  padding-right: 27px;
}
/* .contact-area .contact-form-box .form-group.email {
  padding-left: 14px;
  padding-right: 13px;
} */
.contact-area .contact-form-box .form-group.tel {
  padding-left: 27px;
  color: #f2f2f2;
}
.contact-area .contact-form-box .form-group .form-control {
  background: none;
  outline: none;
  border-bottom: 1px solid #000;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-radius: 0px;
  padding: 0px 0px 0px 0px;
  font: 400 18px/47px "Oxygen", sans-serif;
  color: #f2f2f2;
  height: auto;
  box-shadow: none;
  text-shadow: none;
}
.contact-area .contact-form-box .form-group .form-control.placeholder {
  color: #f2f2f2;
}
.contact-area .contact-form-box .form-group .form-control:-moz-placeholder {
  color: #f2f2f2;
}
.contact-area .contact-form-box .form-group .form-control::-moz-placeholder {
  color: #f2f2f2;
}
.contact-area
  .contact-form-box
  .form-group
  .form-control::-webkit-input-placeholder {
  color: #f2f2f2;
}
.contact-area .contact-form-box .form-group .form-control.error {
  margin-bottom: 0;
}
.contact-area .contact-form-box .form-group .form-control.error + .error {
  font: 13px/24px "Oxygen", sans-serif;
  margin-bottom: 20px;
  margin-top: 5px;
  font-weight: normal;
}
.contact-area .contact-form-box .form-group .message {
  margin-bottom: 35px;
}
.contact-area .contact-form-box .form-group .message .form-control {
  resize: none;
  height: 185px;
  padding-top: 19px;
}

#success,
#error {
  display: none;
  margin-top: 15px;
  text-align: center;
}
#success {
  color: lawngreen;
}

#error {
  color: orangered;
}

.contact-area .contact-form-box .submit {
  width: 100%;
  font-size: 16px;
  line-height: 74px;
}
.contact-area .contact-form-box .submit i {
  font-size: 21px;
}

/*====================================================*/
/*====================================================*/
/*==== 4.20 footer area css ====*/
.footer-area .footer-top {
  padding: 75px 0px 50px;
}
.footer-area .footer-top .widget .widget-tittle {
  font: 700 16px/24px "Oxygen", sans-serif;
  text-transform: uppercase;
  padding-bottom: 17px;
  letter-spacing: 2.2px;
}
.footer-area .footer-top .widget.about-widget p {
  font: 300 14px/24px "Oxygen", sans-serif;
  font-weight: lighter;
  letter-spacing: -0.1px;
  /* padding-bottom: 37px; */
}
.footer-area .footer-top .widget .widget-inner {
  padding-top: 7px;
}
.footer-area .footer-top .widget-link {
  padding: 0px 70px 0px 75px;
}
.footer-area .footer-top .widget-link ul li a {
  font: 400 16px/24px "Oxygen", sans-serif;
}
.footer-area .footer-top .recent-widget {
  padding: 0px;
}
.footer-area .footer-top .recent-widget li {
  cursor: pointer;
}
.footer-area .footer-top .recent-widget li img {
  width: 70px;
  height: 60px;
}
.footer-area .footer-top .recent-widget li .recent-post-text {
  vertical-align: middle;
  width: 70%;
  float: right;
}
.footer-area .footer-top .recent-widget li .recent-post-text h5 a {
  font: 700 14px/24px "Rufina", serif;
  margin: 0px;
}
.footer-area .footer-top .recent-widget li .recent-post-text a {
  font: 700 12px/24px "Rufina", serif;
}
.footer-area .footer-top .recent-widget li + li {
  margin-top: 30px;
  padding-top: 30px;
  position: relative;
}
.footer-area .footer-top .recent-widget li + li:after {
  width: 85%;
  content: "";
  height: 1px;
  background: #3d3d3d;
  position: absolute;
  top: 0;
  left: 0;
  position: absolute;
}
.footer-area .footer-top .widget-news {
  padding-left: 60px;
}
.footer-area .footer-top .widget-news .search-form .input-group .form-control {
  font: 400 12px/36px oxyzen;
  outline: none;
  border: 0px;
  box-shadow: none;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  height: auto;
  padding: 0px 0px 0px 15px;
}
.footer-area
  .footer-top
  .widget-news
  .search-form
  .input-group
  .form-control.placeholder {
  color: #9a9a9a;
}
.footer-area
  .footer-top
  .widget-news
  .search-form
  .input-group
  .form-control:-moz-placeholder {
  color: #9a9a9a;
}
.footer-area
  .footer-top
  .widget-news
  .search-form
  .input-group
  .form-control::-moz-placeholder {
  color: #9a9a9a;
}
.footer-area
  .footer-top
  .widget-news
  .search-form
  .input-group
  .form-control::-webkit-input-placeholder {
  color: #9a9a9a;
}
.footer-area
  .footer-top
  .widget-news
  .search-form
  .input-group
  .input-group-addon {
  padding: 0px;
  background: none;
  border: 0px;
}
.footer-area
  .footer-top
  .widget-news
  .search-form
  .input-group
  .input-group-addon
  button {
  padding: 0px 15px;
  border: 0px;
  border-radius: 3px;
}
.footer-area
  .footer-top
  .widget-news
  .search-form
  .input-group
  .input-group-addon
  button
  i {
  font-size: 15px;
  line-height: 36px;
}
footer .logo {
  padding-bottom: 2rem;
  max-width: 170px;
  height: auto;
  width: 100%;
}
.footer-area .footer-bottom {
  font: 400 12px/24px "Oxygen", sans-serif;
  padding: 34px 0px;
}
.footer-area .footer-bottom .footer-nav {
  width: 100%;
  text-align: center;
}
.footer-area .footer-bottom .footer-nav li {
  display: inline-block;
}
.footer-area .footer-bottom .footer-nav li a {
  padding: 0px;
  position: relative;
  transition: all 400ms linear 0s;
}
.footer-area .footer-bottom .footer-nav li a:hover {
  background: none;
}
.footer-area .footer-bottom .footer-nav li + li {
  padding-left: 34px;
}
.footer-area .footer-bottom .footer-nav li + li:after {
  content: "";
  width: 1px;
  height: 13px;
  background: #f0f0f0cc;
  display: block;
  position: absolute;
  top: 5px;
  left: 13px;
}
.footer-area .footer-bottom .social-nav ul {
  text-align: right;
}
.footer-area .footer-bottom .social-nav ul li {
  display: inline-block;
}
.footer-area .footer-bottom .social-nav ul li a {
  padding: 0px;
  font-size: 18px;
  transition: all 400ms linear 0s;
}
.footer-area .footer-bottom .social-nav ul li a:hover {
  background: none;
}
.footer-area .footer-bottom .social-nav ul li + li {
  padding-left: 30px;
}

.footer-socials-area ul {
  display: flex;
  justify-content: left;
  align-items: first baseline;
  column-gap: 1rem;
}
/*====================================================*/

/* Product area start
.product-container {
  max-width: 1200px;
  margin: 100px auto;
}

.product-container .hero-section {
  text-align: center;
  margin-bottom: 60px;
}

.product-container .hero-section h1 {
  font-size: 39px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 40px;
  line-height: 1.2;
}

.product-container.hero-section .subheading {
  font-size: 18px;
  line-height: 1.7;
  color: #4a5568;
  margin-bottom: 16px;
}

.product-container .hero-section .subheading span {
  color: #14b6f2;
  font-style: italic;
}

.product-container .hero-section .cta-text {
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  margin: 30px 0 0;
}

.product-container .cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 30px;
}

.product-container .bottom-card {
  width: 60%;
  margin: 0 auto;
} */

/* Main product page */

/* sub-product page */
/* .sub {
  font-size: 20px; 
} */
.showcase-container {
  background: white;
  border-radius: 16px;
  /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); */
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  /* border: 1px solid #e2e8f0; */
}

.product-header {
  /* background-color: #12b6f159; */
  padding: 20px 40px;
  text-align: center;
  position: relative;
  color: white;
}

.product-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
  pointer-events: none;
}

.product-name {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 0 2px 2px rgb(0, 0, 0);
  color: #12b5f1;
  position: relative;
  z-index: 1;
}

.product-subtitle {
  font-size: 1.4rem;
  color: rgba(0, 0, 0, 0.9);
  font-weight: 400;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.content-wrapper {
  padding: 50px 40px;
  background: white;
}

.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 50px;
  align-items: start;
}

.main-content {
  flex: 1;
}

.product-description {
  font-size: 1.5rem;
  line-height: 1.7;
  color: #ffffff;
  margin-bottom: 40px;
  padding: 25px;
  background: #111111ec;
  border-radius: 12px;
  border-left: 4px solid #0ea5e9;
}

.section-title {
  font-size: 1.7rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 8px;
}

.section-title::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 0;
  width: 40px;
  height: 3px;
  background: #12b5f1;
  border-radius: 2px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.feature-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.product-container .card .cta {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #4a9eff;
  padding: 6px;
  border-radius: 5px;
}
.feature-card:hover {
  border-color: #12b5f1;
  box-shadow: 0 5px 20px rgba(14, 165, 233, 0.1);
  transform: translateY(-2px);
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #12b5f1;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.feature-card:hover::before {
  transform: scaleY(1);
}

.feature-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #12b5f1, #0284c7);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  color: white;
  font-size: 18px;
}

.feature-title {
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
  font-size: 1.6rem;
}

.product-container .arrow::after {
  content: "→";
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.product-container .card.trading .arrow::after {
  color: #1a202c;
}
.feature-text {
  color: #64748b;
  font-size: 1.5rem;
  line-height: 1.5;
}

.visual-section {
  background: #f8fafc;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  border: 1px solid #e2e8f0;
}
.visual-section img {
  width: 100%;
}
.visual-section h3 {
  color: #1e293b;
  margin: 15px 0;
}
.visual-section ul {
  list-style: disc;
  text-align: left;
}

.visual-section ul li {
  padding: 7px;
  font-size: 1.5rem;
}

.asset-classes-section {
  margin-top: 40px;
}

.asset-classes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.asset-classes span {
  font-size: 1.4rem;
}

.asset-tag {
  background: linear-gradient(135deg, #1e293b, #334155);
  color: white;
  padding: 10px 18px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.asset-tag:hover {
  background: white;
  color: #1e293b;
  border-color: #0ea5e9;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.cta-section {
  background: #111111;
  border-radius: 12px;
  height: 220px;
  padding: 50px 30px;
  text-align: center;
  margin-top: 40px;
  border: 1px solid #cbd5e1;
}

.cta-section h3 {
  color: #ffffffc8;
  margin-bottom: 15px;
  font-weight: 700;
}
.cta-section p {
  color: #12b6f1af;
  margin-bottom: 20px;
  font-size: 1.4rem;
}

.cta-button {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: white;
  padding: 10px 30px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-block;
}

.cta-button:hover {
  background: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3);
  color: #12b6f1ec;
  border: 1px solid #12b6f196;
}

.contact-link {
  color: #0ea5e9;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.3s ease;
}

.contact-link:hover {
  color: #0284c7;
}

@media (max-width: 920px) {
  .content-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 850px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .product-name {
    font-size: 2rem;
  }

  .content-wrapper {
    padding: 30px 20px;
  }

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

/*==== 4.20 terms area css ====*/
.terms_container {
  width: 100%;
  min-height: 100vh;
}

.banner-area-terms {
  /* background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url('https://example.com/terms-banner.jpg') no-repeat center center; */
  background-image: url('/image/terms-banner.jpg');
  background-size: cover;
  padding: 160px 0 50px;
  color: white;
  /* text-align: center; */
  position: relative;
  z-index: 1;
  /* box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); */
}
.terms_header {
  background-color: var(--terms-bg-color);
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--terms-border-color);
  margin-bottom: 2rem;
}

.terms_main_title {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--terms-primary-color);
  margin-bottom: 0.5rem;
  text-align: center;
  line-height: 1.2;
}

.terms_company_name {
  font-size: 1.5rem;
  color: var(--terms-secondary-color);
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: 600;
}

.terms_intro_text {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.1rem;
  color: var(--terms-text-light);
}

.terms_content {
  padding: 2rem 0 4rem;
}

.terms_section {
  margin-bottom: 3rem;
}

.terms_section_title {
  font-size: 1.7rem;
  font-weight: bold;
  color: var(--terms-primary-color);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.terms_section_content {
  margin-left: 0;
}

.terms_section_content p {
  font-size: 1.5rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  text-align: justify;
  color: var(--terms-text-color);
}

.terms_section_content p:last-child {
  margin-bottom: 0;
}

.terms_link {
  color: var(--terms-link-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.terms_link:hover {
  color: var(--terms-link-hover);
  text-decoration: underline;
}

.terms_footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--terms-border-color);
  text-align: center;
}

.terms_footer p {
  font-size: 1rem;
  color: var(--terms-text-light);
  font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
  .terms_header {
      padding: 2rem 0 1.5rem;
  }
  
  .terms_main_title {
      font-size: 2rem;
  }
  
  .terms_company_name {
      font-size: 1.3rem;
  }
  
  .terms_intro_text {
      font-size: 1rem;
  }
  
  .terms_content {
      padding: 1.5rem 0 3rem;
  }
  
  .terms_section {
      margin-bottom: 2.5rem;
  }
  
  .terms_section_title {
      font-size: 1.3rem;
  }
  
  .terms_section_content p {
      font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .terms_main_title {
      font-size: 1.75rem;
  }
  
  .terms_company_name {
      font-size: 1.2rem;
  }
  
  .terms_section_title {
      font-size: 1.2rem;
  }
  
  .terms_section_content p {
      font-size: 0.9rem;
      text-align: left;
  }
}

/* Print Styles */
@media print {
  .terms_container {
      width: 100%;
      margin: 0;
      padding: 0;
  }
  
  .terms_header {
      border-bottom: 2px solid #000;
      margin-bottom: 1rem;
  }
  
  .terms_section {
      margin-bottom: 1.5rem;
      page-break-inside: avoid;
  }
  
  .terms_section_title {
      color: #000;
      font-size: 1.2rem;
  }
  
  .terms_section_content p {
      color: #000;
      font-size: 0.9rem;
      line-height: 1.5;
  }
}

        /* Modal Styles */
        .modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.6);
          display: none;
          justify-content: center;
          align-items: center;
          z-index: 1000;
          animation: fadeIn 0.3s ease-out;
      }
      
      .modal-content {
          background: white;
          padding: 30px;
          border-radius: 12px;
          max-width: 500px;
          width: 90%;
          max-height: 80vh;
          overflow-y: auto;
          position: relative;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
          animation: slideIn 0.3s ease-out;
      }
      
      .modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding-bottom: 15px;
          border-bottom: 1px solid #eee;
      }
      
      .modal-title {
          font-size: 24px;
          font-weight: bold;
          color: #2c3e50;
          margin: 0;
      }
      
      .close-button {
          background: none;
          border: none;
          font-size: 28px;
          cursor: pointer;
          color: #999;
          padding: 0;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          transition: all 0.2s;
      }
      
      .close-button:hover {
          background-color: #f0f0f0;
          color: #666;
      }
      
      .modal-body {
          margin-bottom: 25px;
          line-height: 1.6;
          color: #555;
      }
      
      .modal-body p {
          margin-bottom: 15px;
      }
      
      .highlight {
          background: linear-gradient(135deg, #0ea5e9, 0%, #0284c7 100%);
          color: white;
          padding: 15px;
          border-radius: 8px;
          margin: 15px 0;
          text-align: center;
          font-weight: bold;
      }
      
      .modal-actions {
          display: flex;
          gap: 10px;
          justify-content: flex-end;
      }
      
      .modal-actions .btn {
          padding: 12px 24px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          font-size: 16px;
          font-weight: 500;
          transition: all 0.2s;
      }
      
      .modal-actions .btn-primary {
          background: linear-gradient(135deg, #14b6f2, 0%, #14b6f2 100%);
          color: white;
      }
      
      .modal-actions .btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
      }
      
      .modal-actions .btn-secondary {
          background: #f8f9fa;
          color: #6c757d;
          border: 1px solid #14b6f2;
      }
      
      .modal-actions .btn-secondary:hover {
          background: #e9ecef;
          color: #495057;
      }
      
      /* Animations */
      @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
      }
      
      @keyframes slideIn {
          from { 
              opacity: 0;
              transform: translateY(-30px) scale(0.9);
          }
          to { 
              opacity: 1;
              transform: translateY(0) scale(1);
          }
      }
      
      /* Timer display for demo */
      .timer-display {
          position: fixed;
          top: 20px;
          right: 20px;
          background: #333;
          color: white;
          padding: 10px 15px;
          border-radius: 6px;
          font-family: monospace;
          z-index: 999;
      }
      
      /* Responsive design */
      @media (max-width: 600px) {
          .modal-content {
              padding: 20px;
              margin: 20px;
          }
          
          .modal-actions {
              flex-direction: column;
          }
          
          .modal-actions .btn {
              width: 100%;
          }
      }