/********** Template CSS **********/

:root {

  --primary: #06A3DA;

  --secondary: #34AD54;

  --light: #EEF9FF;

  --dark: #091E3E;

}



/* ===== Scrollbar CSS ===== */

/* Firefox */

* {

  scrollbar-width: auto;

  scrollbar-color: #dbdbdb #646464;

  font-family: sans-serif;

  /* color: ; */

}



/* Chrome, Edge, and Safari */

*::-webkit-scrollbar {

  width: 16px;

}



*::-webkit-scrollbar-track {

  background: #ff0000;

}



*::-webkit-scrollbar-thumb {

  background-color: #8f54a0;

  border-radius: 10px;

  border: 3px solid #ffffff;

}



/*** Spinner ***/

.spinner {

  width: 40px;

  height: 40px;

  background: var(--primary);

  margin: 100px auto;

  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;

  animation: sk-rotateplane 1.2s infinite ease-in-out;

}



@-webkit-keyframes sk-rotateplane {

  0% {

    -webkit-transform: perspective(120px)

  }



  50% {

    -webkit-transform: perspective(120px) rotateY(180deg)

  }



  100% {

    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)

  }

}



@keyframes sk-rotateplane {

  0% {

    transform: perspective(120px) rotateX(0deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

  }



  50% {

    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

  }



  100% {

    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

  }

}



#spinner {

  opacity: 0;

  visibility: hidden;

  transition: opacity .5s ease-out, visibility 0s linear .5s;

  z-index: 99999;

}



#spinner.show {

  transition: opacity .5s ease-out, visibility 0s linear 0s;

  visibility: visible;

  opacity: 1;

}





/*** Heading ***/

h1,

h2,

.fw-bold {

  font-weight: 800 !important;

}



h3,

h4,

.fw-semi-bold {

  font-weight: 700 !important;

}



h5,

h6,

.fw-medium {

  font-weight: 600 !important;

}



.h5 {

  font-weight: 900;

  /* color: brown; */

  font-size: 23px;

}



p.paragraph {

  text-align: justify;

}



/*** Button ***/

.btn {

  font-family: 'Nunito', sans-serif;

  font-weight: 600;

  transition: .5s;

}



.btn-primary,

.btn-secondary {

  color: #FFFFFF;

  box-shadow: inset 0 0 0 50px transparent;

}



.btn-primary:hover {

  box-shadow: inset 0 0 0 0 var(--primary);

}



.btn-secondary:hover {

  box-shadow: inset 0 0 0 0 var(--secondary);

}



.btn-square {

  width: 36px;

  height: 36px;

}



.btn-sm-square {

  width: 30px;

  height: 30px;

}



.btn-lg-square {

  width: 48px;

  height: 48px;

}



.btn-square,

.btn-sm-square,

.btn-lg-square {

  padding-left: 0;

  padding-right: 0;

  text-align: center;

}





.nav-tabs {
  border-bottom: 1px solid #ffffff;
}
.nav-tabs .nav-link {
  /* background: #f8f9fa; */
  /* box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  /* border-radius: 30px; */
  padding: 10px 20px;
  transition: all 0.3s ease-in-out;
  border: none;
  margin: 5px;
  /* font-weight: bold; */
  border-bottom: hidden;
}

.nav-tabs .nav-link:hover {
  background: #06A3DA;
  color: white;
  transform: scale(1.05);
}

.nav-tabs .nav-link.active {
  background: #007bff;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}



/*** Navbar ***/

.navbar-dark .navbar-nav .nav-link {

  font-family: sans-serif;

  position: relative;

  margin-left: 45px;

  padding: 15px 0;

  color: black;

  font-size: 18px;

  font-weight: 300;

  outline: none;

  transition: .5s;

}



.sticky-top.navbar-dark .navbar-nav .nav-link {

  padding: 20px 0;

  color: var(--dark);

}



.navbar-dark .navbar-nav .nav-link:hover,

.navbar-dark .navbar-nav .nav-link.active {

  color: rgb(255, 36, 36);

}



.navbar-dark .navbar-brand h1 {

  color: #FFFFFF;

}



.navbar-dark .navbar-toggler {

  color: var(--primary) !important;

  border-color: var(--primary) !important;

}



@media (max-width: 991.98px) {

  .sticky-top.navbar-dark {

    position: relative;

    background: #FFFFFF;

  }



  .navbar-dark .navbar-nav .nav-link,

  .navbar-dark .navbar-nav .nav-link.show,

  .sticky-top.navbar-dark .navbar-nav .nav-link {

    padding: 10px 0;

    color: var(--dark);

  }



  .navbar-dark .navbar-brand h1 {

    color: var(--primary);

  }

}



@media (min-width: 992px) {

  .navbar-dark {

    width: 100%;

    top: 0;

    left: 0;

    border-bottom: 1px solid rgba(256, 256, 256, .1);

    z-index: 999;

  }



  .sticky-top.navbar-dark {

    position: fixed;

    background: #FFFFFF;

  }



  .navbar-dark .navbar-nav .nav-link::before {

    position: absolute;

    content: "";

    width: 0;

    height: 2px;

    bottom: -1px;

    left: 50%;

    background: var(--primary);

    transition: .5s;

  }



  .navbar-dark .navbar-nav .nav-link:hover::before,

  .navbar-dark .navbar-nav .nav-link.active::before {

    width: 100%;

    left: 0;

  }



  .navbar-dark .navbar-nav .nav-link.nav-contact::before {

    display: none;

  }



  .sticky-top.navbar-dark .navbar-brand h1 {

    color: var(--primary);

  }

}



/*** Carousel ***/

.carousel-caption {

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(9, 30, 62, .7);

  z-index: 1;

}



@media (max-width: 576px) {

  .carousel-caption h5 {

    font-size: 14px;

    font-weight: 500 !important;

  }



  .carousel-caption h1 {

    font-size: 30px;

    font-weight: 600 !important;

  }

}



.carousel-control-prev,

.carousel-control-next {

  width: 10%;

}



.carousel-control-prev-icon,

.carousel-control-next-icon {

  width: 3rem;

  height: 3rem;

}





/*** Section Title ***/

.section-title::before {

  position: absolute;

  content: "";

  width: 150px;

  height: 5px;

  left: 0;

  bottom: 0;

  background: var(--primary);

  border-radius: 2px;

}



.section-title.text-center::before {

  left: 50%;

  margin-left: -75px;

}



.section-title.section-title-sm::before {

  width: 90px;

  height: 3px;

}



.section-title::after {

  position: absolute;

  content: "";

  width: 6px;

  height: 5px;

  bottom: 0px;

  background: #FFFFFF;

  -webkit-animation: section-title-run 5s infinite linear;

  animation: section-title-run 5s infinite linear;

}



.section-title.section-title-sm::after {

  width: 4px;

  height: 3px;

}



.section-title.text-center::after {

  -webkit-animation: section-title-run-center 5s infinite linear;

  animation: section-title-run-center 5s infinite linear;

}



.section-title.section-title-sm::after {

  -webkit-animation: section-title-run-sm 5s infinite linear;

  animation: section-title-run-sm 5s infinite linear;

}



@-webkit-keyframes section-title-run {

  0% {

    left: 0;

  }



  50% {

    left: 145px;

  }



  100% {

    left: 0;

  }

}



@-webkit-keyframes section-title-run-center {

  0% {

    left: 50%;

    margin-left: -75px;

  }



  50% {

    left: 50%;

    margin-left: 45px;

  }



  100% {

    left: 50%;

    margin-left: -75px;

  }

}



@-webkit-keyframes section-title-run-sm {

  0% {

    left: 0;

  }



  50% {

    left: 85px;

  }



  100% {

    left: 0;

  }

}





/*** Service ***/

.service-item {

  position: relative;

  height: auto;

  padding: 30px;

  transition: .5s;

  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

}



.service-item .service-icon {

  margin-bottom: 30px;

  width: 60px;

  height: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--primary);

  border-radius: 2px;

  /* transform: rotate(-45deg); */

}



.service-item .service-icon i {

  transform: rotate(45deg);

}



.service-item a.btn {

  position: absolute;

  width: 60px;

  bottom: -48px;

  left: 50%;

  margin-left: -30px;

  opacity: 0;

}



.service-item:hover a.btn {

  bottom: -24px;

  opacity: 1;

}



/*** Testimonial ***/

.testimonial-carousel .owl-dots {

  margin-top: 15px;

  display: flex;

  align-items: flex-end;

  justify-content: center;

}



.testimonial-carousel .owl-dot {

  position: relative;

  display: inline-block;

  margin: 0 5px;

  width: 15px;

  height: 15px;

  background: #DDDDDD;

  border-radius: 2px;

  transition: .5s;

}



.testimonial-carousel .owl-dot.active {

  width: 30px;

  background: var(--primary);

}



.testimonial-carousel .owl-item.center {

  position: relative;

  z-index: 1;

}



.testimonial-carousel .owl-item .testimonial-item {

  transition: .5s;

}



.testimonial-carousel .owl-item.center .testimonial-item {

  background: #FFFFFF !important;

  box-shadow: 0 0 30px #DDDDDD;

}



/*** Team ***/

.team-item {

  transition: .5s;

}



.team-social {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: .5s;

}



.team-social a.btn {

  position: relative;

  margin: 0 3px;

  margin-top: 100px;

  opacity: 0;

}



.team-item:hover {

  box-shadow: 0 0 30px #DDDDDD;

}



.team-item:hover .team-social {

  background: rgba(9, 30, 62, .7);

}



.team-item:hover .team-social a.btn:first-child {

  opacity: 1;

  margin-top: 0;

  transition: .3s 0s;

}



.team-item:hover .team-social a.btn:nth-child(2) {

  opacity: 1;

  margin-top: 0;

  transition: .3s .05s;

}



.team-item:hover .team-social a.btn:nth-child(3) {

  opacity: 1;

  margin-top: 0;

  transition: .3s .1s;

}



.team-item:hover .team-social a.btn:nth-child(4) {

  opacity: 1;

  margin-top: 0;

  transition: .3s .15s;

}



.team-item .team-img img,

.blog-item .blog-img img {

  transition: .5s;

}



.team-item:hover .team-img img,

.blog-item:hover .blog-img img {

  transform: scale(1.15);

}



/*** Miscellaneous ***/

@media (min-width: 991.98px) {

  .facts {

    position: relative;

    margin-top: -75px;

    z-index: 1;

  }

}



.back-to-top {

  position: fixed;

  display: none;

  right: 45px;

  bottom: 45px;

  z-index: 99;

}



.bg-header {

  background: linear-gradient(rgba(9, 30, 62, .7), rgba(9, 30, 62, .7)), url(../website-image/carousel-1.jpg) center center no-repeat;

  background-size: cover;

}



.link-animated a {

  transition: .5s;

}



.link-animated a:hover {
color: red !important;
  padding-left: 10px;

}



@media (min-width: 767.98px) {

  .footer-about {

    margin-bottom: -75px;

  }

}



.btn-clr {

  background-color: #06A3DA;

  color: white;

}



.bg-ftr {

  /* background-color: #34AD54; */

  background-color: #4064F42E;

  border-radius: 50%;

  /* border: 1px solid white; */

  box-shadow: rgba(255, 255, 255, 0.486) 0px 2px 4px 0px, rgba(255, 255, 255, 0.678) 0px 2px 16px 0px;

  /* box-shadow: rgba(255, 255, 255, 0.685) 10px 13px 27px -5px, rgba(255, 255, 255, 0.719) 0px 8px 16px -8px; */

  padding: 25px;

}



.text-align-justify p {

  text-align: justify;

}



.form-row {

  display: flex;

  /* padding: 5px; */

}



.video-background {

  position: relative;

  top: 0;

  left: 0;

  width: 100%;

  /* height: 100%; */

  overflow: hidden;

}



#bgVideo {

  width: 100%;

  /* height: 100%; */

  object-fit: cover;

}



.gallery-images {

  margin: 0;

  width: 100vw;

  height: 100vh;

}



.wrapper {

  display: table;

  width: 100%;

  height: 100%;

}







.carousels {

  display: inline-block;

  position: relative;

  width: 80vw;

  height: 30vw;

  overflow: hidden;

}



.carousel__item {

  display: inline-block;

  position: absolute;

  top: 0;

  left: 50%;

  margin-left: -25%;

  width: 50%;

  height: 100%;

  background-position: center;

  background-size: cover;

  transition: transform 0.5s, opacity 0.5s;

}



.carousel__item.static {

  transition: none;

}



.carousel__item--left {

  transform: translateX(-75%) scale(0.5);

}



.carousel__item--center {

  box-shadow: 0px 0px 8px #000;



  z-index: 1;

}



.carousel__item--right {

  transform: translateX(75%) scale(0.5);

}



.carousel__item--out {

  /* ¯\_(ツ)_/¯ */

}



.carousel__item--out.carousel__item--left {

  transform: translateX(-125%) scale(0.5);

}



.carousel__item--out.carousel__item--right {

  transform: translateX(125%) scale(0.5);

}



.carousel__arrow {

  display: table-cell;

  vertical-align: middle;

  position: absolute;

  top: 0;

  width: 40px;

  height: 100%;

  background-color: rgba(255, 255, 255, 0.5);

}



.carousel__arrow::before {

  display: inline-block;

  position: relative;

  top: 50%;

  font-size: 24px;

  transform: translateY(-50%);

}



.carousel__arrow--left {

  left: 0;

}



.carousel__arrow--left::before {

  content: '«';

}



.carousel__arrow--right {

  right: 0;

}



.carousel__arrow--right::before {

  content: '»';

}

















.img img {

  width: 100%;

  height: 350px;

  padding: 20px;

}







.users-color-container img {

  width: 100%;

  pointer-events: none;

  user-select: none;

}



/* SECTION - HOME */

.glryimg {

  background: rgb(67, 69, 112);

  background: radial-gradient(circle,

      rgba(67, 69, 112, 1) 3%,

      rgba(35, 36, 57, 1) 60%);

  overflow: hidden;

  padding: 80px 0px;

}



.home {

  display: grid;

  grid-template-columns: 45% 50%;

  place-items: center;

  gap: 50px;

  background: rgb(67, 69, 112);

  background: radial-gradient(circle,

      rgba(67, 69, 112, 1) 3%,

      rgba(35, 36, 57, 1) 60%);

  overflow: hidden;

  padding: 130px 80px;

}



.homees {

  /* display: grid; */

  /* grid-template-columns: 45% 50%; */

  place-items: center;

  /* gap: 50px; */

  background: rgb(67, 69, 112);

  background: radial-gradient(circle,

      rgba(67, 69, 112, 1) 3%,

      rgba(35, 36, 57, 1) 60%);

  overflow: hidden;

  padding: 130px 0px 30px 0px;

}





.description {

  color: #fff;

  padding: 0 50px;

}



.description>h1 {

  font-family: "Tilt Neon", sans-serif;

  font-size: clamp(2.3rem, 5vw, 4rem);

  line-height: 1;

  margin-bottom: 30px;

}



.gradient-text {

  font-family: "Tilt Neon", sans-serif;

  background-image: linear-gradient(90deg,

      rgb(118, 167, 63) 0%,

      rgb(51, 143, 118) 40%,

      rgb(55, 141, 167) 50%,

      rgb(117, 152, 242) 70%,

      rgb(144, 118, 236) 100%);

  color: transparent;

  background-size: contain;

  background-clip: text;

  -webkit-background-clip: text;

}



.description>p {

  font-family: "Nunito", sans-serif;

  font-size: 1.2rem;

  line-height: 1.5;

  margin-bottom: 30px;

}











.users-color-container {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(3, 1fr);

  gap: 20px;

}



.item {

  max-width: 200px;

  aspect-ratio: 1/1;

  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5),

    inset 0px 2px 2px rgba(255, 255, 255, 0.2);

  animation: fadeIn 0.5s linear 1 forwards;

  animation-delay: calc(0.2s * var(--i));

  opacity: 0;

}



.item:nth-child(1) {

  background-color: #67d7e1;

  border-radius: 50% 50% 0 50%;

}



.item:nth-child(2) {

  border-radius: 50% 50% 0 0;

}



.item:nth-child(3) {

  background-color: #6cc164;

  border-radius: 50%;

}



.item:nth-child(4) {

  border-radius: 0 0 0 50%;

}



.item:nth-child(5) {

  border-radius: 0 50% 50% 0;

}



.item:nth-child(6) {

  background-color: #8071a8;

  border-radius: 0 50% 50% 50%;

}



.item:nth-child(7) {

  border-radius: 50% 50% 0 50%;

}



.item:nth-child(8) {

  background-color: #fe7519;

  border-radius: 50% 0 0 50%;

}



.item:nth-child(9) {

  background-color: #f5bec3;

  border-radius: 0 50% 50% 0;

}



.item:nth-child(10) {

  border-radius: 50%;

}



.item:nth-child(11) {

  background-color: #fcd659;

  border-radius: 50% 0 50% 50%;

}



.item:nth-child(12) {

  border-radius: 50% 0 0 0;

}



@keyframes fadeIn {

  0% {

    opacity: 0;

    transform: scale(0);

  }



  100% {

    opacity: 1;

    transform: scale(1);

  }

}



/* SECTION - CARD CONTAINER */



@media (max-width: 1215px) {

  .description>p {

    font-size: 1rem;

  }



  .btn {

    font-size: 1rem;

  }

}



@media (max-width: 1015px) {

  .home {

    grid-template-columns: 45% 50%;

    gap: 50px;

    padding: 140px 50px;

  }



  .description>p {

    font-size: 1rem;

  }



  .btn {

    padding: 8px 12px;

  }



  .btn-grad {

    padding: 8px 12px;

  }

}



@media (max-width: 865px) {

  .home {

    grid-template-columns: 45% 50%;

    gap: 60px;

    padding: 130px 70px;

  }

}



@media (max-width: 815px) {

  .home {

    grid-template-columns: 1fr;

    grid-template-rows: 1fr 1fr;

    grid-template-areas:

      "userscolorcontainer"

      "description";

    gap: 30px;

    padding: 90px 80px 70px;

  }



  .users-color-container {

    grid-area: userscolorcontainer;

  }



  .description {

    grid-area: description;

    padding: 0;

    text-align: center;

  }



  .description>p {

    font-size: 1.1rem;

  }



  #form {

    justify-content: center;

  }

}



@media (max-width: 815px) {

  .description>p {

    font-size: 1rem;

  }

}



@media (max-width: 460px) {

  .home {

    gap: 0;

    padding: 30px 40px;

  }







}











.cardBox {

  width: 300px;

  height: 400px;

  position: relative;

  display: grid;

  margin: 0 auto;

  place-items: center;

  overflow: hidden;

  border-radius: 20px;

  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px,

    rgba(0, 0, 0, 0.5) 0px 2px 25px 0px;

}



.cards {

  position: absolute;

  width: 95%;

  height: 95%;

  background: #000814;

  border-radius: 20px;

  z-index: 5;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  text-align: center;

  color: #ffffff;

  overflow: hidden;

  padding: 20px;

  cursor: pointer;

  box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 60px -12px inset,

    rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;

}



.cards h2 {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 3rem;

  font-weight: 800;

  pointer-events: none;

  opacity: 0.5;

}



span {

  top: 75%;

}



.cards .content h3 {

  font-size: 3rem;

  padding-bottom: 10px;

}



.cards .content p {

  font-size: 1.6rem;

  line-height: 25px;

}



.cards .content {

  transform: translateY(100%);

  opacity: 0;

  transition: 0.3s ease-in-out;

}



.cards:hover .content {

  transform: translateY(0);

  opacity: 1;

}



.cards:hover h2,

.cards:hover span {

  opacity: 0;

}



.cardBox::before {

  content: "";

  position: absolute;

  width: 40%;

  height: 150%;

  background: #40E0D0;

  background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);

  background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);

  animation: glowing01 5s linear infinite;

  transform-origin: center;

  animation: glowing 5s linear infinite;

}



@keyframes glowing {

  0% {

    transform: rotate(0);

  }



  100% {

    transform: rotate(360deg);

  }

}



.cards a {

  font-size: 20px;

  font-weight: 700;

  color: white;

  padding: 15px;

}



.containers {

  width: 100vw;

  overflow-x: scroll;

  white-space: nowrap;

  /* background-color: #fff; */

  display: flex;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.scroll-disabler {

  width: 100vw;

  height: 450px;

  position: absolute;

  background-color: rgba(0, 0, 0, 0.0001);

}



::-webkit-scrollbar {

  display: none;

}



article {

  min-width: 350px;

  height: 400px;

  padding: 1rem;

}



article .wrapper {

  padding: 1rem;

  background-color: #fff;

  height: 100%;

  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

  border-radius: 25px;

}



article .img {

  /* height: 50%; */

  background-color: lightgray;

  border-radius: 25px 25px 0 0;

  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);

}



article .content>div {

  height: 2rem;

  background-color: lightgray;

  margin: 2rem auto 0 auto;

  width: 85%;

  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);

  border-radius: 5px;

}



article .content>div:last-child {

  height: 5rem;

}





/* Add these styles in your CSS or within a <style> tag in your HTML head */

.nav-item.active a {

  color: red;

  /* Change this to the desired color */

  /* You can also add additional styling here, such as font-weight, background-color, etc. */

}



.card-body span {

  color: black;

  font-weight: 600;

  font-size: 15px;

}



.cards-portfoliyo img {

  width: 370px;
  height: 350px;
  border: 1px solid rgba(83, 83, 83, 0.623);

}



.cards-portfoliyo {

  position: absolute;

  width: 98%;

  height: 98%;

  background: white;

  border-radius: 20px;

  z-index: 5;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  text-align: center;

  color: #ffffff;

  overflow: hidden;

  padding: 20px;

  cursor: pointer;

  /* box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 60px -12px inset,

    rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset; */

}



.cards-portfoliyo h2 {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 3rem;

  font-weight: 800;

  pointer-events: none;

  opacity: 0.5;

}



span {

  top: 75%;

}



.cards-portfoliyo h3 {

  font-size: 1.5rem;

  /* color: rgb(224, 157, 157); */

  font-weight: 400;

  /* padding-bottom: 5px; */

  text-shadow: 1px 1px #ce9c64

}



.cards-portfoliyo .content p {

  font-size: 1.6rem;

  line-height: 25px;

}



.cards-portfoliyo .content {

  transform: translateY(100%);

  opacity: 0;

  transition: 0.3s ease-in-out;

}



.cards-portfoliyo:hover .content {

  transform: translateY(0);

  opacity: 1;

}



.cardBoxes::before {

  content: "";

  position: absolute;

  /* width: 90%;

  height: 150%; */

  background: #40E0D0;

  background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);

  background: linear-gradient(to right, #ffffff, #020202, #ffffff);

  animation: glowing01 5s linear infinite;

  /* animation: glowing01 5s linear infinite; */

  transform-origin: center;

  animation: glowing 9s linear infinite;

}



@keyframes glowing {

  0% {

    transform: rotate(0);

  }



  100% {

    transform: rotate(360deg);

  }

}



.cards-portfoliyo {

  font-size: 17px;

  /* font-weight: 700; */

  color: black;

  padding: 15px;

}



.cardBoxes {

  width: 100%;

  height: 518px;

  position: relative;

  display: grid;

  place-items: center;

  overflow: hidden;

  border-radius: 20px;

  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px,

    rgba(0, 0, 0, 0.5) 0px 2px 25px 0px;

}





.coverflow {

  position: relative;

  height: 460px;

  padding: 30px;

  overflow: hidden;

  -webkit-perspective: 1000px;

  perspective: 1000px;

}





.prev-arrow,

.next-arrow {

  cursor: pointer;

  z-index: 10;

  position: absolute;

  top: 50%;

  padding: 1.5rem 2rem;

  color: rgba(255, 255, 255, 0.5);

  font-size: 3rem;

  line-height: 3rem;

  background: transparent;

  border-radius: 1rem;

  -webkit-transform-origin: 50% 50%;

  transform-origin: 50% 50%;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

  -webkit-transition: color 200ms, background 200ms;

  transition: color 200ms, background 200ms;

}



.prev-arrow:hover,

.next-arrow:hover,

.prev-arrow:focus,

.next-arrow:focus {

  color: rgba(255, 255, 255, 0.9);

  background: rgba(0, 0, 0, 0.5);

}



.prev-arrow {

  left: 0%;

}



.prev-arrow:before {

  content: "❮";

}



.next-arrow {

  right: 0%;

}



.next-arrow:after {

  content: "❯";

}



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

  .navbar-brand img {

    width: 150px;

  }

}



.font-style ul li {

  font-weight: 600;

  color: #091E3E;

  line-height: 2;

}



.glow-on-hover {

  width: 220px;

  height: 50px;

  border: none;

  outline: none;

  color: #fff;

  background: #111;

  cursor: pointer;

  position: relative;

  z-index: 0;

  border-radius: 10px;

}



.glow-on-hover:before {

  content: '';

  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);

  position: absolute;

  top: -2px;

  left: -2px;

  background-size: 400%;

  z-index: -1;

  filter: blur(5px);

  width: calc(100% + 4px);

  height: calc(100% + 4px);

  animation: glowing 20s linear infinite;

  opacity: 0;

  transition: opacity .3s ease-in-out;

  border-radius: 10px;

}



.glow-on-hover:active {

  color: #000

}



.glow-on-hover:active:after {

  background: transparent;

}



.glow-on-hover:hover:before {

  opacity: 1;

}



.glow-on-hover:after {

  z-index: -1;

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  background: #111;

  left: 0;

  top: 0;

  border-radius: 10px;

}



@keyframes glowing {

  0% {

    background-position: 0 0;

  }



  50% {

    background-position: 400% 0;

  }



  100% {

    background-position: 0 0;

  }

}





.sec-icon {

  position: relative;

  display: inline-block;

  padding: 0;

  margin: 0 auto;

}



.sec-icon::before {

  content: "";

  position: absolute;

  height: 1px;

  left: -70px;

  margin-top: -5.5px;

  top: 60%;

  background: #f5f5f5;

  width: 50px;

}



.sec-icon::after {

  content: "";

  position: absolute;

  height: 1px;

  right: -70px;

  margin-top: -5.5px;

  top: 60%;

  background: #333;

  width: 50px;

}



.advertisers-service-sec {

  background-color: #f5f5f5;

}



.advertisers-service-sec span {

  color: rgb(255, 23, 131);

}



.advertisers-service-sec .col {

  padding: 0 1em 1em 1em;

  text-align: center;

}



.advertisers-service-sec .service-card {

  width: 100%;

  height: 100%;

  padding: 2em 1.5em;

  border-radius: 5px;

  box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);

  cursor: pointer;

  transition: 0.5s;

  position: relative;

  z-index: 2;

  overflow: hidden;

  background: #fff;

  list-style: none;

  text-decoration: none;

}



.advertisers-service-sec .service-card::after {

  content: "";

  width: 100%;

  height: 100%;

  background: linear-gradient(#0dcaf0, rgba(255, 23, 131, 0.425));

  position: absolute;

  left: 0%;

  top: -98%;

  z-index: -2;

  transition: all 0.4s cubic-bezier(0.77, -0.04, 0, 0.99);

}



.advertisers-service-sec h3 {

  font-size: 22px;

  text-transform: capitalize;

  font-weight: 600;

  color: #1f194c;

  margin: 1em 0;

  z-index: 3;

}



.advertisers-service-sec h4 {

  font-size: 15px;

  text-transform: capitalize;

  font-weight: 600;

  color: #1f194c;

  margin: 1em 0;

  z-index: 3;

}





.advertisers-service-sec p {

  color: #575a7b;

  font-size: 15px;

  line-height: 1.6;

  letter-spacing: 0.03em;

  z-index: 3;

}



.advertisers-service-sec .icon-wrapper {

  background-color: #2c7bfe;

  position: relative;

  margin: auto;

  font-size: 30px;

  height: 2.5em;

  width: 2.5em;

  color: #ffffff;

  border-radius: 50%;

  display: grid;

  place-items: center;

  transition: 0.5s;

  z-index: 3;

}



.advertisers-service-sec .service-card:hover:after {

  top: 0%;

}



.service-card .icon-wrapper {

  background-color: #ffffff;

  color: rgb(255, 23, 131);

}



.advertisers-service-sec .service-card:hover .icon-wrapper {

  color: #0dcaf0;

}



.advertisers-service-sec .service-card:hover li {

  color: #000000;

}



.modal-body-content {

  display: flex;

  align-items: center;

}



.modal-image {

  width: 40%;

  margin-right: 20px;

}



.modal-text {

  width: 60%;

}



.modal-text p {

  margin: 0;

}



.modal-image img {

  max-width: 100%;

  border-radius: 8px;

}



.custom-video {

  width: 100%;

  height: 500px;

  object-fit: inherit;

}



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

  .custom-video {

    width: 100%;

    height: 625px;

    object-fit: inherit;

  }

}



@media only screen and (min-width: 768) {

  .custom-video {

    width: 100%;

    height: 125px;

    object-fit: inherit;

  }

}





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

  .custom-video {

    width: 100%;

    height: 300px;

    object-fit: inherit;

  }

}



/* ADVERTISERS SERVICE CARD ENDED */



.image-slider {

  display: flex;

  flex-direction: column;

  /* Ensure proper stacking in a column */

  width: clamp(360px, 96vw, 830px);

  aspect-ratio: 16 / 9;

  min-height: 300px;

  overflow: hidden;

  border-radius: 8px;

  container-type: inline-size;

  contain: content;

  /* background-color: rgba(0, 0, 0, 0.4); */

  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px,

    rgba(0, 0, 0, 0.3) 0px 2px 4px,

    rgba(0, 0, 0, 0.25) 0px 4px 8px,

    rgba(0, 0, 0, 0.2) 0px 8px 16px,

    rgba(0, 0, 0, 0.15) 0px 16px 32px;

  transition: all 0.3s ease;

  /* Smooth transitions */

  margin: 0 auto;

}



@media (max-width: 800px) {

  .image-slider {

    width: 90vw;

    /* Adjust width for smaller screens */

    min-height: 250px;

    /* Adjust minimum height */

  }

}



@media (max-width: 600px) {

  .image-slider {

    min-height: 200px;

    /* Further adjust minimum height for very small screens */

    border-radius: 4px;

    /* Slightly reduce border radius */

  }

}



@media (max-width: 400px) {

  .image-slider {

    width: 95vw;

    /* Take more width on very small screens */

    aspect-ratio: 4 / 3;

    /* Change aspect ratio for better fitting */

  }

}



.slider__content {

  flex-grow: 1;

  display: flex;

  justify-content: space-between;

}



.slider-control--button {

  border: 0;

  background: transparent;

  /* Use transparent instead of 0 */

  outline: 0;

  cursor: pointer;

  place-content: center;

  padding-inline: 3vw;

  /* Consider using rem or em for better scaling */

  z-index: 1;

  display: grid;

}



.icon {

  height: 2rem;

  width: 2rem;

  fill: var(--icon-default);

  border-radius: 50%;

}



.slider-control--button:hover {

  background-image: linear-gradient(to var(--position),

      rgba(0, 0, 0, 0) 0%,

      rgba(0, 0, 0, 0.01) 80%,

      rgba(0, 0, 0, 0.4) 100%);

}



.slider-control--button:active {

  outline: 0.2em solid hsl(204, 100%, 53%);

  outline-offset: -0.5em;

}



.prev-button {

  --position: left;

}



.next-button {

  --position: right;

}



.image-display {

  position: relative;

  /* Changed from fixed to relative for better responsiveness */

  width: 100%;

  /* Ensure it fills its container */

  height: 100%;

  /* Ensure it fills its container */

}



.slider-navigation {

  z-index: 10;

  display: grid;

  grid-auto-flow: column;

  grid-template-columns: repeat(6, 1fr);

  gap: 1.25rem;

  padding: 1rem;

  place-content: center;

  background-color: var(--navigation-color);

  backdrop-filter: blur(6px);

}



.nav-button {

  display: grid;

  width: 100%;

  height: 100%;

  border-radius: 0.5em;

  overflow: hidden;

  align-items: center;

  justify-content: center;

  border: 0;

  aspect-ratio: 16 / 9;

  transition: filter 150ms linear, scale 266ms ease;

}



.thumbnail {

  display: block;

  height: 500px;

  width: 100%;

  /* object-fit: cover; */

  /* height: 100%; */

}



.nav-button[aria-selected="true"] {

  scale: 1.1;

}



.nav-button[aria-selected="true"],

.nav-button:focus-visible {

  outline: 0.2em solid var(--active-color);

  outline-offset: 0.2em;

}



.nav-button[aria-selected="false"] {

  filter: opacity(0.7);

}



.nav-button[aria-selected="false"]:hover,

.nav-button[aria-selected="false"]:focus-visible {

  filter: opacity(1);

}



@media (max-width: 660px) {

  .nav-button:not(:has(img)) {

    background-color: rgb(241, 235, 232);

  }



  .slider-navigation {

    display: flex;

    justify-content: center;

    padding-block: 1.5em;

  }



  .nav-button {

    inline-size: 0.625rem;

    /* Adjust button size for smaller screens */

    aspect-ratio: 1;

    border-radius: 50%;

  }



  .nav-button>.thumbnail {

    display: none;

    /* Hide thumbnails on smaller screens */

  }



  .nav-button[aria-selected="true"] {

    background-color: black;

    scale: 1.5;

    /* Scale up selected button */

  }

}



.cardese {

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  border: none;

  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

}



.cardese:hover {

  transform: scale(1.05);

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

}



.card-title {

  font-weight: bold;

  color: #333;

  font-size: 1.3rem;

}



.card-text {

  font-size: 1rem;

  color: #555;

}



.img-fluid {

  border-radius: 10px;

}



.card-body {

  padding: 20px;

}



.container1 {

  margin-top: 50px;

}



/* Slicebox Style */

.sb-slider {

  margin: 10px auto;

  position: relative;

  overflow: hidden;

  width: 100%;

  list-style-type: none;

  padding: 0;

}



.sb-slider li {

  margin: 0;

  padding: 0;

  display: none;

}



.sb-slider li>a {

  outline: none;

}



.sb-slider li>a img {

  border: none;

}



.sb-slider img {

  max-width: 100%;

  display: block;

}



.sb-description {

  padding: 20px;

  bottom: 10px;

  left: 10px;

  right: 10px;

  z-index: 1000;

  position: absolute;

  background: #CBBFAE;

  background: rgba(190, 176, 155, 0.4);

  border-left: 4px solid rgba(255, 255, 255, 0.7);

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter: alpha(opacity=0);

  opacity: 0;

  color: #fff;



  -webkit-transition: all 200ms;

  -moz-transition: all 200ms;

  -o-transition: all 200ms;

  -ms-transition: all 200ms;

  transition: all 200ms;

}



.sb-slider li.sb-current .sb-description {

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

  filter: alpha(opacity=80);

  opacity: 1;

}



.sb-slider li.sb-current .sb-description:hover {

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";

  filter: alpha(opacity=99);

  background: rgba(190, 176, 155, 0.7);

}



.sb-perspective {

  position: relative;

}



.sb-perspective>div {

  position: absolute;



  -webkit-transform-style: preserve-3d;

  -moz-transform-style: preserve-3d;

  -o-transform-style: preserve-3d;

  -ms-transform-style: preserve-3d;

  transform-style: preserve-3d;



  -webkit-backface-visibility: hidden;

  -moz-backface-visibility: hidden;

  -o-backface-visibility: hidden;

  -ms-backface-visibility: hidden;

  backface-visibility: hidden;

}



.sb-side {

  margin: 0;

  display: block;

  position: absolute;



  -moz-backface-visibility: hidden;



  -webkit-transform-style: preserve-3d;

  -moz-transform-style: preserve-3d;

  -o-transform-style: preserve-3d;

  -ms-transform-style: preserve-3d;

  transform-style: preserve-3d;

}





/* custom style */

/* .container {

  margin: 30px;

} */



.shadow {

  width: 100%;

  height: 168px;

  position: relative;

  margin-top: -110px;

  background: transparent url(https://tympanus.net/Development/Slicebox/images/shadow.png) no-repeat bottom center;

  background-size: 100% 100%;

  /* stretches it */

  z-index: -1;

  display: none;

}



.sb-description h3 {

  font-size: 20px;

  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);

}



.sb-description h3 a {

  color: #4a3c27;

  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);

}



.nav-arrows {

  display: none;

}



.nav-arrows a {

  width: 42px;

  height: 42px;

  background: #cbbfae url(https://tympanus.net/Development/Slicebox/images/nav.png) no-repeat top left;

  position: absolute;

  top: 50%;

  left: 2px;

  text-indent: -9000px;

  cursor: pointer;

  margin-top: -21px;

  opacity: 0.9;

  border-radius: 50%;

  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);

}



.nav-arrows a:first-child {

  left: auto;

  right: 2px;

  background-position: top right;

}



.nav-arrows a:hover {

  opacity: 1;

}



.nav-dots {

  text-align: center;

  position: absolute;

  bottom: -5px;

  height: 30px;

  width: 100%;

  left: 0;

  display: none;

}



.nav-dots span {

  display: inline-block;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  margin: 3px;

  background: #cbbfae;

  cursor: pointer;

  box-shadow:

    0 1px 1px rgba(255, 255, 255, 0.6),

    inset 0 1px 1px rgba(0, 0, 0, 0.1);

}



.nav-dots span.nav-dot-current {

  box-shadow:

    0 1px 1px rgba(255, 255, 255, 0.6),

    inset 0 1px 1px rgba(0, 0, 0, 0.1),

    inset 0 0 0 3px #cbbfae,

    inset 0 0 0 8px #fff;

}



.nav-options {

  width: 70px;

  height: 30px;

  position: absolute;

  right: 70px;

  bottom: 0px;

  display: none;

}



.nav-options span {

  width: 30px;

  height: 30px;

  background: #cbbfae url(https://tympanus.net/Development/Slicebox/images/options.png) no-repeat top left;

  text-indent: -9000px;

  cursor: pointer;

  opacity: 0.7;

  display: inline-block;

  border-radius: 50%;

}



.nav-options span:first-child {

  background-position: -30px 0px;

  margin-right: 3px;

}



.nav-options span:hover {

  opacity: 1;

}











.slide {

  /* height: 150px; */

  width: 350px;

  display: grid;

  place-items: center;

  padding: 15px;

  perspective: 100px;

}



.slide img {

  height: 250px;

  width: 100%;

  transition: transform 1s;

}



.image-slider {

  display: grid;

  place-items: center;



  position: relative;



  overflow: hidden;

  height: 250px;

  width: 80%;

}



.image-slider-track {

  display: flex;

  width: calc(200px*12);

  animation: play 40s linear infinite;

}



@keyframes play {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(calc(-250px*6));

  }

}





.image-slider::before {

  left: 0;

  top: 0;

}



.image-slider::after {

  right: 0;

  top: 0;

  background: linear-gradient(to left, rgba(255, 255, 255, 1)0%, rgba(255, 255, 255, 0)100%);



}



.slide img:hover {

  transform: translateZ(20px);

}

.height{

  height: 105px;

}

/*** Events Start ***/
.events .events-item {
  width: 100%;
  height: 100%;
  border-radius: 30%;
  position: relative;
}

.events .events-item .events-inner .events-rate {
  position: absolute;
  width: 120px; 
  top: -20px; 
  left: 50%; 
  margin-left: -60px; 
  border-radius: 10% / 50%;
}

.events .events-item .events-inner .events-img .event-overlay {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s;
  z-index: 1;
  opacity: 0;
}

.events .events-item .events-inner .events-img:hover .event-overlay {
  opacity: 1;
}

.events .events-item .events-img::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  bottom: auto;
  background: rgba(26, 183, 157, 0.432);
  border-radius: 10px;
  transition: 0.5s;
}

.events .events-item:hover .events-img::after {
  height: 100%;
  opacity: 1;
}

.events .events-item .events-text a.h4,
.events .events-item .events-img img {
  transition: 0.5s;
}

.events .events-item:hover .events-text a.h4 {
  color: var(--bs-primary) !important;
}

.events .events-item:hover .events-img img {
  transform: scale(1.3);
}

.height-300{
  height: 300px;
}
/*** Events End ***/
.link-animated i{
  margin-right: 10px;
}