.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    scroll-behavior: smooth;
}
/*  hwe-section words fade-in fade-out */
.fade-text {
    transition: opacity 0.5s ease;
    opacity: 1;
}

.fade-out {
    opacity: 0;
}
/* Arc positioning for overlapping cards */
.arc-container {
    position: relative;
    width: 80%;
    height: 260px;
}

.card-1 {
    width:150px;
    position: relative;
    top: 25%;
    right: -55%;
    z-index: 30;
    transform: rotate(0deg);
    animation: float 3s ease-in-out infinite;
}

.card-2 {
    width:200px;
    position: relative;
    top: -16%;
    left: 28%;
    transform: translateX(-50%) rotate(0deg);
    z-index: 20;
    animation: float 4s ease-in-out infinite;
}

.card-3 {
    width:220px;
    position: absolute;
    top: 12rem;
    left: 0%;
    z-index: 10;
    transform: rotate(0deg);
    animation: float 5s ease-in-out infinite;
}

/* Star badge */
.star-badge {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: linear-gradient(180deg, #00aaff, #0077c2);
    display: grid;
    place-items: center;
    color: white;
    font-weight: 700;
}

.arrow-badge {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: white;
    display: grid;
    place-items: center;
    color: black;
    font-weight: 700;
}

.bridge-1 {
    transform: rotate3d(1,1,1,68deg);
    position: absolute;
    height: 0rem;
    border: 8px solid white;
    left: -3px;
    width: 1.5rem;
    top: -0.5rem;
    z-index: 999;
}

.bridge-2 {
    transform: rotate3d(1,1,1,68deg);
    position: absolute;
    height: 0rem;
    border: 10px solid #01ACED;
    left: -3px;
    width: 1.5rem;
    top: -0.5rem;
    z-index: -1;
}

@media (max-width:1024px){
    .arc-container {
        top:7%;
    }

    .card-1 {
        width:150px;
        position: relative;        
        top: 5%;
        right: -65%;
    }

    .card-2 {
        position:absolute;
        top: 26%;
        left: 32%;
    }

    .card-3 {
        top:9.6rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .arc-container {
        top:0%;
        height: 42vh;
    }

    .card-1 {
        position:relative;
        width:150px;
        top: 4rem;
        right: -40%;
        transform: rotate(-3deg);
    }

    .card-2 {
        position:relative;
        width:200px;
        top: -11%;
        left:20%;
        transform: translateX(-50%) rotate(-1deg);
    }

    .card-3 {
        position:absolute;
        width:220px;
        top:77%;
        left: 0;
        transform: rotate(2deg);
    }
}

@media (max-width: 640px) {
    .arc-container {
        height: 300px;
    }

    .card-1 {
        width:150px;
        top: 4rem;
        right: -56%;
        position:relative;
    }

    .card-2 {
        width:200px;
        top: -0.05rem;
        left:16%;
        right:10px;
        position:relative;
    }

    .card-3 {
        top: 14rem;
        left: -2rem;
    }
}

/* Keyframes for floating animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.client-image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../assest/client-image.png) no-repeat center/cover;
}

.social-icon {
    transition: all 0.3s ease;
    transform-style: preserve-3d;
}

    .social-icon:hover {
        transform: translateY(-4px) rotateX(15deg);
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }

.facebook {
    background: linear-gradient(135deg, #1877f2, #42a5f5);
}

.instagram {
    background: linear-gradient(135deg, #e4405f, #f77737, #fccc63);
    color: white;
}

.whatsapp {
    background: linear-gradient(135deg, #25d366, #128c7e);
}

.linkedin {
    background: linear-gradient(135deg, #0077b5, #00a0dc);
}

.twitter {
    background: linear-gradient(135deg, #1da1f2, #0d8bd9);
}

#insta {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    font-size: 150px; /* change this to change the size*/
}


.back-to-top {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

    .back-to-top.visible {
        opacity: 1;
        visibility: visible;
    }

    .back-to-top:hover {
        background-color: #048BCD;
        transform: translateY(-3px);
    }

/*#mobile-menu-button {*/
/*    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;*/
/*        box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;*/
/*}*/

@media (max-width : 1200px){
    #about-us-para{
        font-size:1rem;
    }
}