@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

body{
	font-family: "Montserrat", sans-serif;
}


.bg-email {width: 60px; height: 60px;     background: url('../img/css_sprites.png') -505px -269px; }
.bg-fb {width: 60px; height: 60px;     background: url('../img/css_sprites.png') -585px -269px; }
.bg-insta {width: 60px; height: 60px;     background: url('../img/css_sprites.png') -665px -269px; }
.bg-left {width: 100px; height: 133px;     background: url('../img/css_sprites.png') -10px -410px; }
.bg-location {width: 60px; height: 60px;     background: url('../img/css_sprites.png') -250px -410px; }
.bg-nagrik_base_logo {width: 245px; height: 239px;     background: url('../img/css_sprites.png') -505px -10px; }
.bg-nagrik_logo {width: 475px; height: 380px;     background: url('../img/css_sprites.png') -10px -10px; } 
.bg-right {width: 100px; height: 133px;     background: url('../img/css_sprites.png') -130px -410px; }
.bg-tw {width: 60px; height: 60px;     background: url('../img/css_sprites.png') -330px -410px; }
.bg-whats {width: 60px; height: 60px;     background: url('../img/css_sprites.png') -410px -410px; }

/****************/

.social-icons {
  display: flex;
  align-items: center;
  gap: 12px; /* auto gap between icons */
}

/* optional: cursor + hover */
.social-icons > div {
  cursor: pointer;
}
.social-icons img{width: 35px; padding: 5px;}
.img35{width:35px; padding:5px;}
.marquee-wrapper {
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}
.projSec{
	border-radius: 0% 10% 0% 10%;
}
.projColor{
	color: #7a480c;
}

 :root {
            --card-width: 350px;
            --card-gap: 20px;
            --animation-speed: 30s;
        }

        /* Container hides the overflow */
        .marquee-wrapper {
            overflow: hidden;
            padding: 20px 0; 
            position: relative;
            width: 100%;
        }

        /* The flex track that moves */
        .marquee-track {
            display: flex;
            width: max-content; /* Critical: allows the track to be as wide as its content */
            animation: scroll var(--animation-speed) linear infinite;
        }

        /* Individual Card Styling */
        .stat-card {
            width: var(--card-width);
            margin-right: var(--card-gap);
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border: 1px solid #eee;
            flex-shrink: 0;
        }

        .stat-card h3 {
            color: #0d6efd; /* Bootstrap primary color */
            font-weight: 800;
            margin-bottom: 0;
        }

        .stat-card p {
            margin-bottom: 0;
            line-height: 1.2;
            text-transform: uppercase;
            font-weight: 600;
            color: #333;
        }

        /* Infinite Loop Animation */
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-50%)); } 
            /* -50% because we will duplicate the cards once */
        }

        /* Pause on hover for better UX */
        .marquee-wrapper:hover .marquee-track {
            animation-play-state: paused;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            :root {
                --card-width: 280px;
                --animation-speed: 20s;
            }
            .stat-card h3 { font-size: 1.5rem; }
            .stat-card p { font-size: 0.85rem !important; }
        }
 
/******************media query **********************/
 
/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */



/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
	  
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	 
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	 
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
	 
}