@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Jost:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --font-family-dm-sans: "DM Sans", sans-serif;
  --font-family-jost: "Jost", serif;
  --font-family-manrope: "Manrope", sans-serif;
  --font-family-montserrat: "Montserrat", sans-serif;
  --font-family-playfair: "Playfair Display", serif;
  --font-family-plus-jakarta: "Plus Jakarta Sans", sans-serif;
  --font-family-raleway: "Raleway", sans-serif;
  --theme-blue: #06538d;
  --theme-orange: #ef6124;
  /* --theme-blue: #073c65; */
  --theme-grey: #f2f2f2;
  --color-light-blue: #c1e3fd;
  --color-light-skyblue: #e0f0fc;
  --color-anchor-blue: #b2d4fd;
}

* {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-plus-jakarta);
}

/*----- GLOBAL -------*/

a {
  text-decoration: none !important;
}

.text-theme,
.section-title {
  color: var(--theme-blue);
}

.bg-theme {
  background-color: var(--theme-blue);
}

.bg-grey {
  background-color: var(--theme-grey);
}

.bg-light-skyblue {
  background-color: var(--color-light-skyblue);
}

.btn-theme {
  background-color: var(--theme-blue);
  color: #ffffff;
  transition: all 0.3s ease-in;
}

.btn-theme:hover {
  background-color: #ffffff;
  color: var(--theme-blue);
}

.btn-theme-outline {
  background-color: #ffffff;
  color: var(--theme-blue);
  border: 1px solid var(--theme-blue);
  transition: all 0.3s ease-in;
}

.btn-theme-outline:hover {
  background-color: var(--theme-blue);
  color: #ffffff;
  border: 1px solid #ffffff;
}

.first-section-fc {
  padding-top: 5rem;
}

.line {
  background-color: var(--theme-blue);
  height: 2px;
  width: 60px;
}

.text-sub {
  color: var(--color-light-blue);
}

.services .tri img,
.testimonial .tri img {
  filter: brightness(100);
}

.bright {
  filter: brightness(100);
}

.highlight {
  color: #000000;
  font-weight: 500;
}

.subtitle {
  text-transform: uppercase;
}

.container-1420 {
  max-width: 1426px;
}

.about-2 .container-xl > div{
  position: relative;
}

.font-11{
  font-size: 1.2rem;
}
/*----- HEADER -------*/
.logo {
  height: 3rem;
}

header {
  margin-bottom: -4.5rem;
  background: #00000080;
  backdrop-filter: blur(5px);
}

.header-link .nav-link {
  font-weight: 600;
  color: #ffffff;
}

.header-link .nav-link.active,
header .navbar-nav .nav-link.show,
.header-link .nav-link:hover,
.header-link .nav-link:focus {
  color: var(--theme-orange) !important;
}

header .dropdown-menu {
  --bs-dropdown-bg: #ffffffea !important;
}


header .dropdown-item {
  padding: 1rem;
}

header .dropdown-item.active,
header .dropdown-item:hover {
  background-color: var(--theme-blue) !important;
  color: #ffffff !important;
}
/* contact-link-btn */
.contact-link-btn {
  background: var(--theme-orange);
  color: #ffffff;
  padding: 0.5em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  font-weight: 600;
}

.contact-link-btn span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

.contact-link-btn svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

.contact-link-btn:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

.contact-link-btn:hover svg {
  transform: translateX(2em) rotate(45deg) scale(1.1);
}

.contact-link-btn:hover span {
  transform: translateX(5em);
}

.contact-link-btn:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}

/* HERO */

.hero {
  height: 800px;
}
.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-bg video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hero > div:not(.video-bg, .anim-circle) {
  position: relative;
}

.anim-circle {
  position: absolute;
  top: 0;
  background-image: url("../asset/circle.png");
  width: 400px;
  height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  left: -20%;
  animation: blobAnimation 8s ease-in-out infinite;
}

.anim-circle-2 {
  top: 60%;
  left: auto;
  right: -20%;
}

@keyframes blobAnimation {
  0% {
    transform: scale(1) translateY(0) translateX(0);
  }
  25% {
    transform: scale(1.1) translateY(-20px) translateX(20px);
  }
  50% {
    transform: scale(1) translateY(0) translateX(0);
  }
  75% {
    transform: scale(1.1) translateY(20px) translateX(-20px);
  }
  100% {
    transform: scale(1) translateY(0) translateX(0);
  }
}

.btn-hero{
  background-color: var(--theme-orange);
  color: #ffffff;
  border: 1px solid var(--theme-orange);
  transition: all 0.3s ease;
}
.btn-hero:hover{
  background-color: transparent;
  color: var(--theme-orange);
}
/* ABOUT */

.about .container-xl > div {
  position: relative;
  z-index: 1;
}

.about-link {
  color: var(--theme-orange);
  font-weight: 500 !important;
}

.about-link:hover {
  color: var(--theme-blue) !important;
}

/* MOVING CIRCLE */

.moving-circle {
  position: absolute;
  top: 20%;
  left: -15%;
  width: 350px;
  height: 450px;
  filter: blur(100px);
  z-index: 0;
  border-radius: 50%;
  background-color: #80b5dd;
  animation: rotateCircle 15s steps(5, end) infinite;
}

.moving-circle-2 {
  right: -15%;
  left: auto;
}

@keyframes rotateCircle {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(72deg);
  }
  40% {
    transform: rotate(144deg);
  }
  60% {
    transform: rotate(216deg);
  }
  80% {
    transform: rotate(288deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* LOGO OVERLAY */

.logo-overlay {
  position: absolute;
  width: 40%;
  top: 0;
  right: 0px;
}

.logo-overlay-img {
  filter: opacity(0.2);
}

/* SERVICES */
.services {
  background: url("../asset/home/service.jpg") no-repeat center center;
  background-size: cover;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
  .services {
    background-attachment: scroll;
  }
}

.services-card-item {
  border: 1px solid #ffffff67;
  background-color: #ffffff15;
  backdrop-filter: blur(5px);
  margin-top: 0rem;
  transition: all 0.3s ease-in;
}

.services-card-item:hover{
  margin-top: -0.5rem;
  background-color: #ef61247e;
}

/* METHODLOGY */

.methodology .moving-circle {
  left: -20%;
}

.methodology .moving-circle-2 {
  right: -20%;
  left: auto;
}
.timeline-list {
  --col-gap: 2rem;
  --row-gap: 2rem;
  --line-w: 0.25rem;
  display: grid;
  grid-template-columns: var(--line-w) 1fr;
  grid-auto-columns: max-content;
  column-gap: var(--col-gap);
  list-style: none;
  width: min(60rem, 90%);
  margin-inline: auto;
}

.timeline-list::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 20;
  background: rgb(225, 225, 225);
  border-radius: calc(var(--line-w) / 2);
}

.timeline-list li:not(:last-child) {
  margin-bottom: var(--row-gap);
}

.timeline-list li {
  grid-column: 2;
  --inlineP: 1.5rem;
  margin-inline: var(--inlineP);
  grid-row: span 2;
  display: grid;
  grid-template-rows: min-content min-content min-content;
}

.timeline-list li .title {
  --titleH: 3rem;
  height: var(--titleH);
  margin-inline: calc(var(--inlineP) * -1);
  text-align: center;
  background-color: var(--accent-color);
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  display: grid;
  place-content: center;
  position: relative;
  border-radius: calc(var(--titleH) / 2) 0 0 calc(var(--titleH) / 2);
}

.timeline-list li .title::before {
  content: "";
  width: var(--inlineP);
  aspect-ratio: 1;
  background: var(--accent-color);
  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
  position: absolute;
  top: 100%;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  right: 0;
}

.timeline-list li .title::after {
  content: "";
  position: absolute;
  width: 1.5rem;
  aspect-ratio: 1;
  background: var(--bgColor);
  border: 0.3rem solid var(--accent-color);
  border-radius: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}

.timeline-list li .descr {
  background: var(--bgColor);
  position: relative;
  padding-inline: 1.5rem;
  padding-block-start: 2rem;
}

.timeline-list li .descr {
  padding-block-end: 1.5rem;
  font-weight: 300;
}

.timeline-list li .descr::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  left: 50%;
  border-radius: 50%;
  filter: blur(4px);
  transform: translate(-50%, 50%);
}

.timeline-list li .descr::before {
  z-index: -1;
  bottom: 0.25rem;
}

@media (min-width: 40rem) {
  .timeline-list {
    grid-template-columns: 1fr var(--line-w) 1fr;
  }
  .timeline-list::before {
    grid-column: 2;
  }
  .timeline-list li:nth-child(odd) {
    grid-column: 1;
  }
  .timeline-list li:nth-child(even) {
    grid-column: 3;
  }
  .timeline-list li:nth-child(2) {
    grid-row: 2/4;
  }

  .timeline-list li:nth-child(odd) .title::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    left: 0;
  }

  .timeline-list li:nth-child(odd) .title::after {
    transform: translate(-50%, -50%);
    left: calc(100% + var(--col-gap) + var(--line-w) / 2);
  }
  .timeline-list li:nth-child(odd) .title {
    border-radius: 0 calc(var(--titleH) / 2) calc(var(--titleH) / 2) 0;
  }
}

/* TESTIMONIAL */

.testimonial {
  background: url("../asset/home/testimonial.jpg") center/cover no-repeat;
}

.testimonialSwiper .swiper-slide {
  background-color: #ffffff7c;
}

.profile {
  width: 50px;
  height: auto;
}

.testimonialSwiper .swiper-button-next,
.testimonialSwiper .swiper-button-prev {
  top: 90% !important;
}

.testimonialSwiper .swiper-button-prev {
  left: auto !important;
  right: calc(50px + var(--swiper-navigation-sides-offset, 10px)) !important;
}

.testimonialSwiper .swiper-button-next:after,
.testimonialSwiper .swiper-button-prev:after {
  font-size: 1.5rem !important;
}

/* CLIENTS */
.client-swiper .swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  background-color: var(--theme-grey);
  align-items: center;
  padding: 0.5rem;
  border-radius: 1em;
  box-shadow: 0 0.1rem 1.5rem rgba(0, 0, 0, 0.15);
}

.client-swiper .swiper-wrapper {
  padding: 1em 0;
}

.clients::before {
  top: 0;
  left: 0;
  background: linear-gradient(
    to right,
    rgb(245, 245, 245) 0%,
    rgba(121, 144, 145, 0) 100%
  );
}

.clients::after {
  top: 0;
  right: 0;
  background: linear-gradient(
    to left,
    rgb(245, 245, 245) 0%,
    rgba(121, 144, 145, 0) 100%
  );
}

.clients {
  &::before,
  &::after {
    content: " ";
    position: absolute;
    z-index: 2;
    width: 100px;
    height: 100%;
  }
}

/*----- FOOTER -------*/

.footer-logo {
  width: 40%;
}

footer {
  background-color: #f1f1f1;
}

.footer-top i {
  margin: 0 10px;
  color: white;
}

.footer p,
.footer a {
  font-size: 0.875rem;
  color: #333;
}

.footer a {
  font-weight: 500;
}

.footer a:hover {
  color: var(--theme-orange);
}

.footer-contact-list li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.footer-bottom {
  border-top: 1px solid var(--theme-blue);
  font-size: 0.9rem;
}

.footer-link li::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.8rem;
  height: 0.8rem;
  background-image: url(../asset/right-chevron.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.footer-link li,
.footer-contact-link {
  position: relative;
  list-style-type: none;
  margin-left: 0;
  transition: all 0.3s ease-in;
}

.footer-link li:hover,
.footer-contact-link:hover {
  margin-left: 0.5rem;
}

.footer-link li:hover::before {
  background-image: url(../asset/right-orange.svg);
}

/*----- SERVICES COMMON -------*/
/* BOOKMARK || SECTION 1 */
.bookmark {
  background: url("../asset/service/bookmark-bg.jpg") center/cover no-repeat;
}

.breadcrumb li a, .breadcrumb-item + .breadcrumb-item::before {
  color: var(--theme-orange) !important;
}

.breadcrumb li a:hover {
  color: var(--color-anchor-blue) !important;
}

.breadcrumb li {
  font-size: 2rem;
  font-weight: 600;
}

.services-list-title{
  font-weight: 600;
}

.services-upper-card{
  background-color: #b6d3ee2c;
  backdrop-filter: blur(2px);
  padding: 1rem;
  border-radius: 1rem;
}

.services-title {
  background: var(--theme-orange);
  color: #fff;
  padding: 10px 20px;
  border-top-right-radius: 1rem;
  border-bottom-right-radius:  1rem;
  display: inline-block;
  margin-left: -2rem;
  position: relative;
}
.services-title::before{
  content: "";
  width: 1rem;
  aspect-ratio: 1;
  background: var(--theme-orange);
  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
  position: absolute;
  top: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  left: 0;
}
.services-upper-list {
  list-style: none;
  padding-left: 0;
}
.services-upper-list li::before, .services-list li::before {
  content: "✔";
  color: #4caf50;
  margin-right: 10px;
}
/* SECTION 2 */

.section-2 > div:not(.moving-circle, .moving-circle-2) {
  position: relative;
  z-index: 2;
}

.section2-content {
  background-color: var(--theme-blue);
  color: #ffffff;
  box-shadow: 0 0 4px var(--theme-blue);
}

.section2-content-img,
.section-3-card img {
  object-fit: cover;
  width: 100%;
}

/* SECTION 3 */

.section-3 {
  background: url("../asset/service/service why.jpg") center/cover no-repeat;
}

.section-3-card {
  background-color: #ffffff;
  color: #000000;
}

.services-benefits-swiper {
  width: 100%;
}

.services-benefits-swiper .swiper-slide {
  background-color: var(--bg-light);
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid #073c6557;
}

.services-benefits-swiper .swiper-slide:hover {
  background-color: var(--color-light-blue);
}

.services-benefits-icon svg {
  width: 5rem;
  height: 5rem;
}

.services-benefits-title {
  font-weight: 600;
  color: var(--color-blue);
}

/* SECTION 5 */
.section-5 {
  background: url("../asset/service/faq\ bg.jpg") center/cover no-repeat;
}

.accordion-button:not(.collapsed) {
  color: #ffffff !important;
  background-color: var(--theme-blue) !important;
  box-shadow: none !important;
}

.accordion-button:focus {
  box-shadow: none !important;
}

.accordion-button:not(.collapsed)::after {
  filter: brightness(100);
}

button.accordion-button {
  font-weight: 500;
  color: var(--theme-blue);
}

.section-5 .accordion {
  --bs-accordion-border-color: #d6d6d6 !important;
}

/*----- ABOUT PAGE -------*/
/* BOOKMARK */
.about-bookmark {
  background: url("../asset/about/about-bg.jpg") center/cover no-repeat;
}

/* ABOUT 3 */
.about-3-left-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-3-content {
  padding: 4rem;
  background: linear-gradient(135deg, #073c65, #0e4877, #1462a2);
}

/* ABOUT 4 */
.profile-btns a:hover svg {
  fill: var(--theme-blue);
}

/* ABOUT 5 */

.cta {
  background: url("../asset/about/cta-bg\ \(5\).jpg") center/cover no-repeat;
  box-shadow: 0 0 10px #9edfff;
}

.btn-cta {
  color: #ffffff;
  border: 2px solid #ffffff;
  transition: all 0.3s ease-in;
}

.btn-cta:hover {
  background-color: #ffffff;
  color: #0a54b7;
}

/*----- CONTACT PAGE -------*/
/* BOOKMARK */
.contact-bookmark {
  background: url("../asset/contact/contact-bg.jpg") center/cover no-repeat;
}
/* CONTACT 2 */
.contact-info-wrap .card {
  background: linear-gradient(135deg, #073c65, #0e4877, #1462a2);
  transition: all 0.3s ease-in;
}

.btn-contact-card {
  color: #ffffff;
  border: 1px solid #ffffff;
  transition: all 0.3s ease-in;
}

.btn-contact-card:hover {
  color: var(--theme-blue);
  background-color: #ffffff;
}

.contact-info-wrap .card:hover {
  box-shadow: 0 0 70px 0px #0e48779a;
}

.contact-card-img-wrap {
  border: 2px solid #ffffff;
  border-radius: 50%;
  width: max-content;
}

/* CONTACT 3 */
.contact-3 {
  background: url("../asset/contact/form-bg.jpg") center/cover no-repeat;
}

.contact-form,
.group-item {
  background-color: #ffffff13;
  backdrop-filter: blur(3px);
}

.group-item {
  border-radius: 10rem;
}

.btn-submit {
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 10rem !important;
  transition: all 0.3s ease-in;
}

.btn-submit:hover {
  color: var(--theme-blue) !important;
  background-color: #ffffff !important;
}

.form-control:focus {
  box-shadow: none !important;
}

/* CONTACT 4 */
.contact-4{
  height: 450px;
}

/*----- PORTFOLIO PAGE -------*/
/* BOOKMARK */
.portfolio-bookmark {
  background: url("../asset/portfolio/portfolio-bg.jpg") center/cover no-repeat;
}

.portfolio-card {
  border: none;
  overflow: hidden;
  transition: transform 0.3s;
  height: 100% !important;
}
.portfolio-card:hover {
  transform: translateY(-5px);
}
.portfolio-card .card-img-top {
  height: 400px;
  object-fit: cover;
  object-position: center;
}
.card-logo-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e4e4e4;
  padding: 1rem;
  border-radius: 50%;
}

.card-logo-overlay-img {
  width: 2rem;
}

.portoflio-2 .container-xl > div {
  position: relative;
}

.portfolio-tabs .nav-link {
  color: var(--theme-blue);
}

.portfolio-tabs .nav-tabs .nav-item.show .nav-link,
.portfolio-tabs .nav-tabs .nav-link.active {
  color: #ffffff !important;
  background-color: var(--theme-blue) !important;
}


.portfolio-tabs .nav-tabs{
  --bs-nav-tabs-border-radius: 0.75rem !important;
}


/* SCROLL TO TOP */
.scrolltop{
  position: fixed;
  z-index: 99999;
  bottom: 1rem;
  right: 1rem;
  cursor: pointer;
}