.intro-content {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.col-md-8 {
    width: 66.66667% !important;
}

.col-md-4 {
    width: 33.33333% !important;
}

.h1 {
    font-size: 30px !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.row {}

.bg-white {
    --bs-bg-opacity: 1;
    background-color: rgb(255 255 255 / 0%) !important;
}

.gradient-bg {
    background: linear-gradient(135deg, #6366f124 0%, #8b5cf663 100%) !important;
}

.contact-item {
    transition: all 0.3s ease;
}

.contact-item:hover {
    transform: translateY(-5px);
}

.profile-container {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 100% !important;
}
.rounded-full{
    width: 300px;
    height: 300px;
}
.intro-social li{
    transform: rotate(90deg) !important;
}
.intro-social a {
    color: var(--color-text-light);
    font-size: 30px;
}
.border-4{
    border: 4px solid white !important;
}
.mobile-hidden{
    display: none !important;
}
.justified-text {

    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    text-align: justify; /* optional, keeps edges aligned */
}
.swiper-pagination-bullet{
    background: white !important;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
    width: 50% !important;
    bottom: -5px !important;
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: false;
}

:root {
  --bg-background: #111827;
  --clr-card: #1f2937;
  --clr-1: #6420aa;
  --clr-2: #ff3ea5;
  --clr-3: #ff7ed4;
}

.card {
    position: relative;
    width: 100%;
    border-radius: 0.45rem;
    cursor: pointer;
    background-color: var(--clr-card);
    padding: 13px;
    text-align: center;
    color: white;
}

.card::after,
.card::before {
  content: " ";
  position: absolute;
  z-index: -1;
  inset: -0.5rem;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--clr-card),
    var(--clr-1),
    var(--clr-2),
    var(--clr-3),
    var(--clr-2),
    var(--clr-1),
    var(--clr-card)
  );
  border-radius: inherit;
  animation: rotate 2.5s linear infinite;
}

.card::after {
  filter: blur(3rem);
}

@keyframes rotate {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

.loader-custom {
  width: 28px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #00a652 ;
  animation: l2 1.5s infinite;
}
@keyframes l2 {
  0%,
  100%{transform:translate(-35px);box-shadow:  0     0 #f8a619, 0     0 #F10C49}
  40% {transform:translate( 35px);box-shadow: -15px  0 #f8a619,-30px  0 #F10C49}
  50% {transform:translate( 35px);box-shadow:  0     0 #f8a619, 0     0 #F10C49}
  90% {transform:translate(-35px);box-shadow:  15px  0 #f8a619, 30px  0 #F10C49}
}

@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
    }
    .mobile-hidden {
        display: block !important;
        position: fixed;
        height: 100vh;
        top: 0;
        right: 5px;
    }
    .mobile-hidden .iconsss{
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .mobile-hidden .iconsss .bg{
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;
        background: #ffffff0f;
        backdrop-filter: blur(10px);
        padding: 10px;
        border-radius: 10px;
    }
    .mobile-hidden a{
        font-size: 30px !important;
    }
    .mobile-hidden a:hover {
        color: white !important;
    }
    .intro-social{
        display: none !important;
    }
    .text-huge-title{
        font-size: 38px !important;
        text-align: center !important;
    }
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
        width: 100% !important;
        bottom: -5px !important;
    }
}