@font-face {
  font-family: font-regular;
  src: url('./Font/OpenSans-Regular.ttf');
}

@font-face {
  font-family: font-semi;
  src: url('./Font/OpenSans-SemiBold.ttf');
}

@font-face {
  font-family: font-medium;
  src: url('./Font/OpenSans-Medium.ttf');
}

@font-face {
  font-family: font-bold;
  src: url('./Font/OpenSans-Bold.ttf');
}

.body,
html {
  overflow-y: scroll;
  overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-margin-top: -200px;
}

img {
  width: 100%;
}

:root {
  --bs-font-sans-serif: font-regular, font-semi, font-medium, font-bold;
}



/* card flipping animation start */

.flip-card-one {
  animation-name: fliping;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.86, -0.13, 0.56, 1.16);
}

@keyframes fliping {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  75% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

/* card flipping animation end */



.busi-analysis {
  height: 70vh;
}

body {
  font-family: var(--bs-font-sans-serif);
  background: #0F0F0F;
}

.buiz-content {
  width: 100%;
  max-width: 60rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.line {

  width: 97px;
  height: 2px;
  background-color: #EDB21B;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  padding: 15px;

  background-color: #000000;
  color: white;
  transform: rotateY(180deg);
  display: flex;
  gap: 8px;
  flex-direction: column;
  /* alig */
  justify-content: center;
}

.blob {
  width: 570px;
  position: absolute;
  right: 0px;
  top: 180px;
  z-index: -1;
  /* bottom: 5px; */
}

.blob2 {
  width: 680px;
  position: absolute;
  left: -50px;
  top: 130px;

  z-index: -1;
  /* bottom: 5px; */
}

.buiz {
  height: 100vh;
}

.marketing {
  height: 100vh;
}

.blob1 {
  opacity: 0.1;

}

.blob2 {
  opacity: 0.3;

}

.nav-link1 {
  color: black;
  text-decoration: none;
}

.nav-link1:hover {
  color: #EDB21B;
  margin-top: 5px;
}


#read-more {
  display: inline;
  /* Hide the content by default */
}

/* Add some styling to the "Read more" link */
#read-more-link {
  display: none;
  color: #EDB21B;
  cursor: pointer;
  text-decoration: underline;
}

/* media queries */
@media (max-width:953px) {
  .busi-analysis {
    padding: 20px;
    height: auto;
  }

  .buiz-content {
    width: 100%;
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
  }

  .line {

    width: 97px;
    height: 2px;
    background-color: #EDB21B;
  }

  .flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
  }

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  }

  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .flip-card-front {
    background-color: #bbb;
    color: black;
  }

  .flip-card-back {
    padding: 5px;
    background-color: #000000;
    color: white;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    /* alig */
    justify-content: center;
  }

  .blob {
    width: 570px;
    position: absolute;
    right: 0px;
    top: 180px;
    z-index: -1;
    /* bottom: 5px; */
  }

  .blob2 {
    width: 680px;
    position: absolute;
    left: -50px;
    top: 130px;

    z-index: -1;
    /* bottom: 5px; */
  }

  .buiz {
    height: auto;
  }

  .marketing {
    height: auto;
  }

  .blob1 {
    opacity: 0.1;

  }

  .blob2 {
    opacity: 0.3;

  }

  .nav-link1 {
    color: black;
    text-decoration: none;
  }

  .nav-link1:hover {
    color: #EDB21B;
    margin-top: 5px;
  }
}