:root{
    --bg: #F1F1F1;
    --bg-gradient: radial-gradient(circle,rgba(241, 241, 241, 1) 0%, rgba(201, 201, 201, 1) 54%, rgba(201, 201, 201, 1) 100%);
    --text: #000;
    --heading: #FFC50C;
    --sub-heading: #0d6efd;

}

body {
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
    background: var(--bg);
    background: var(--bg-gradient);
    color: var(--text);
}


.container-fluid{
    max-width: 1920px;
}


.logo, small {
    font-size: 0.975em;
}

.logo .lh-1 {
    line-height: 1.2 !important;
}




.heading span{
    color: var(--heading);
}
.sub-heading span{
    color: var(--sub-heading);
    font-weight: bold;
}








/*------Background art and clouds start-------*/
.bottom-art {
    position: fixed;
    bottom: -40px;
    left: 0;
    width: 100%;
    z-index: -1;
    pointer-events: none;
}


/* Sky layer that holds clouds */
.sky-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Cloud base style */
.cloud {
    position: absolute;
    top: 60px;
    width: 220px;
    height: auto;
    opacity: 0.85;
    filter: blur(0.2px);
    animation-name: cloudMove;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Cloud variants (different sizes/speeds/positions) */
.cloud-1 {
    top: 70px;
    width: 220px;
    animation-duration: 38s;
    animation-delay: -10s;
}

.cloud-2 {
    top: 140px;
    width: 300px;
    opacity: 0.7;
    animation-duration: 55s;
    animation-delay: -25s;
}

.cloud-3 {
    top: 210px;
    width: 180px;
    opacity: 0.6;
    animation-duration: 32s;
    animation-delay: -5s;
}

.cloud-4 {
    top: 310px;
    width: 110px;
    opacity: 0.6;
    animation-duration: 60s;
    animation-delay: -5s;
}


.cloud-5 {
    top: 10px;
    width: 110px;
    opacity: 0.6;
    animation-duration: 90s;
    animation-delay: -5s;
}


.cloud-6 {
    top: 20px;
    width: 310px;
    opacity: 0.6;
    animation-duration: 40s;
    animation-delay: -5s;
}

/* Move clouds from left to right across the screen */
@keyframes cloudMove {
    0%   { transform: translateX(-350px); }
    100% { transform: translateX(calc(100vw + 350px)); }
}


/*------Background art and clouds End-------*/






/*-----------hanging ramadan animation start-----------------*/

/* Background hanging layer */
.hang-layer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    pointer-events: none;
}

/* Each hanging item */
.hang{
    position: absolute;
    top: 0;
    transform-origin: top center;
    animation: swing 4s ease-in-out infinite;
}

/* Image */
.hang img{
    display: block;
    height: 160px;   /* adjust size here */
    width: auto;
    opacity: 0.95;
}

/* Position across width */
.h1{ left: 5%;  animation-delay: -1s; }
.h2{ left: 18%; animation-delay: -2s; }
.h3{ left: 31%; animation-delay: -0.5s; }
.h4{ left: 44%; animation-delay: -1.5s; }
.h5{ left: 57%; animation-delay: -2.2s; }
.h6{ left: 70%; animation-delay: -0.8s; }
.h7{ left: 83%; animation-delay: -1.8s; }
.h8{ left: 92%; animation-delay: -2.6s; }

/* Swing animation only */
@keyframes swing{
    0%,100% { transform: rotate(-3deg); }
    50%     { transform: rotate(3deg); }
}

/*----------/hanging ramadan animation end-----------------*/





/*------footer social icons start-------*/

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s ease;
}

.social-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #000000;
    border-radius: 50%;
    font-size: 18px;
    transition: 0.3s ease;
}

.social-link:hover .social-icon {
    background-color: #0d6efd;
    color: #ffffff;
}

.social-link:hover {
    color: #0d6efd;
}

/*-----/footer social icons end-------*/


/*-----/footer copyright and links start-------*/

.footer-links a {
    color: var(--text);
    text-decoration: none;
    margin: 0 4px;
    transition: 0.3s ease;
}

.footer-links a:hover {
    color: blue;
}
/*-----/footer copyright and links end-------*/