/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
	  background: #193c6d;
    scroll-behavior: smooth;
}

/* Section Containers */
.section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    position: relative;
}

/* Particle Canvas Integration */
#particle-canvas {
	Background:#000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: radial-gradient(circle at 75% 25%, #000 0%, #000 100%);
}

/* Content Container */
.center-god {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
    width: 100%;
    
}

@media only screen and (max-width: 767px) {
  .center-god {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
    font-size: 0.4rem;
    width: 100%;
}

	
}


/* Animated Text System */
.bounce1 {
    display: flex;
    justify-content: center;
    font: normal bold clamp(4rem, 10vw, 6rem) 'Product Sans', sans-serif;
    letter-spacing: -0.05em;
    perspective: 1000px;
    flex-wrap: wrap;

}

@media only screen and (max-width: 767px) {
  .bounce1 {
    display: flex;
    justify-content: center;
    font: normal bold clamp(4rem, 10vw, 3rem) 'Product Sans', sans-serif;
    letter-spacing: -0.10em;
    perspective: 1000px;
    flex-wrap: wrap;
	
}
}


.letter {
    animation: bounce1 0.85s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate;
    display: inline-block;
    will-change: transform;
    margin-top: 0.5em;
    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
}

/* Color Sequence Preservation */
.letter:nth-child(1) { animation-delay: 0s; color: #4285f4; }
.letter:nth-child(2) { animation-delay: 0.08s; color: #ea4335; }
.letter:nth-child(3) { animation-delay: 0.16s; color: #fbbc05; }
.letter:nth-child(4) { animation-delay: 0.24s; color: #4285f4; }
.letter:nth-child(5) { animation-delay: 0.32s; color: transparent; }
.letter:nth-child(6) { animation-delay: 0.40s; color: #34a853; }
.letter:nth-child(7) { animation-delay: 0.48s; color: #ea4335; }
.letter:nth-child(8) { animation-delay: 0.56s; color: #fbbc05; }
.letter:nth-child(9) { animation-delay: 0.64s; color: #4285f4; }
.letter:nth-child(10) { animation-delay: 0.72s; color: #34a853; }
.letter:nth-child(11) { animation-delay: 0.80s; color: #ea4335; }
.letter:nth-child(12) { animation-delay: 0.88s; color: #fbbc05; }
.letter:nth-child(13) { animation-delay: 0.96s; color: #4285f4; }
.letter:nth-child(14) { animation-delay: 1.04s; color: #34a853; }

@keyframes bounce1 {
    0% {
        transform: translate3d(0, 0, 0) rotateX(20deg);
    }
    100% {
        transform: translate3d(0, -1.2em, 0) rotateX(0);
        text-shadow: 0 1em 1.2em rgba(255, 255, 255, 0.3);
    }
}

.title {
 font-family: sans-serif;
  font-size: 1.1rem;
  line-height: 70px;
  text-transform: uppercase;
  text-align: center;
  background: #f7f7fd7;
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #f7f7f7;
  animation: animate-gradient 2.5s linear infinite;
  text-decoration: none;
  margin: 20px 20px;
  font-size: 2rem;
  justify-content: center; /* horizontal center */
  
}


.title2025 {
 font-family: sans-serif;
  font-size: 3.5rem;
  opacity: 0.8;
  text-transform: uppercase;
  text-align: center;
  background: #000;
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 20px 20px;
  font-size: 2rem;
  justify-content: center; /* horizontal center */
  
}


@media only screen and (max-width: 767px) {
  .title {
    font-family: 'Arial';
    font-size: 0.5rem;
    line-height: 50px;
    opacity: 0.8;
    text-transform: uppercase;
    text-align: center;
    background: #fff;
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-gradient 2.5s linear infinite;
    text-decoration: none !important;
    margin: 20px 20px;
    justify-content: center; /* horizontal center */
    
  }
}

.title5 {
  font-family: sans-serif;
  font-size: 2rem;
  font-weight: 10px;
  text-transform: uppercase;
  text-align: center;
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #fff;
  animation: animate-gradient 2.5s linear infinite;
  text-decoration: none !important;
  margin: 20px 20px;
  
}

@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}

a:hover .title {
    text-shadow: 0 0 12px rgba(255, 255, 255, 1);
	text-decoration: none;
}

.social-links {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-icon {
    font-size: 1.5rem;
    color: #005587;
    transition: color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.social-icon:hover {
    color: #fff;
    transform: translateY(-0.25rem) scale(1.15);
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3));
}

/* Responsive Adaptation */
@media (max-width: 768px) {
    .bounce {
        font-size: 4rem;
        line-height: 1.2;
    }
    
    .letter {
        animation-duration: 1.1s;
    }
    
    .nav-links {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .social-links {
        gap: 1.5rem;
    }
}

/* Section Background Overrides */
.section.one {
    background: transparent !important;
}

.section.two {
    Background: #fff;
}
        
/* Styling for section two */
.section.two {
	 height: 450px;
    align-items: flex-start; /* Align content to the top of the section */
    position: relative; /* Position for absolute elements inside */
}

@media only screen and (max-width: 767px) {
  .section.two {
	 height: 700px;
   color: #fff;
  }

     .title {
            color: white;
        }

        /* For the text inside the buttons */
        .btn-0 span {
            color: white;
        }
}




/* Styling for the centered round image */
.centered-round-image {
    max-width: 200px; /* Set the maximum width to 400px */
    max-height: 200px; /* Set the maximum height to 400px (adjust based on aspect ratio) */
    width: 100%; /* Ensure it scales within the max width */
    height: 100%; /* Ensure the height also scales within the max height */
    aspect-ratio: 1; /* Make the aspect ratio 1:1 to keep it square for the round effect */
    border-radius: 50%; /* Make the image round */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    box-shadow: 0 12px 40px rgba(108, 92, 231, 0.2); /* Soft shadow for depth */
    transform: translateZ(0) scale(0.98); /* Slight zoom out the image */
    position: relative; /* Position relative to adjust 'top' value */
    top: 5px; /* Move the image slightly downward */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease; /* Smooth transition for transformation */
   justify-content: center; /* horizontal center */
      align-items: center;     /* vertical center */
}


/* Hover effect for the centered image */
.centered-round-image:hover {
    transform: scale(1.02) translateZ(0); /* Slight zoom-in effect on hover */
    box-shadow: 0 15px 50px rgba(108, 92, 231, 0.3); /* Increase shadow intensity on hover */
}

.subtitle {
	font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    color: var(--text);
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
}
      :root {
    --primary: #6c5ce7;
    --secondary: #a29bfe;
    --accent: #fd79a8;
    --bg: #f8f9fa;
    --text: #2d3436;
    --card-bg: #ffffff;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        }
.container {
    max-width: 1200px;
    width: 100%;
    padding: 2rem;
}

.header {
    text-align: center;
    margin-bottom: 3rem;
}

.title {
	font-family: sans-serif;
    font-size: 2.75rem;
    font-weight: 200;
    color: var(--primary);
    margin-bottom: 1rem;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: white;
}






@media only screen and (max-width: 767px) {
  .title {
    font-size: 1rem;
    font-weight: 100;
    color: var(--primary);
    margin-bottom: 1rem;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: white;
}
  
}

.subtitle1 {
	font-family: 'Segoe UI';
    color: #777777;
    font-size: 18px;
    line-height: 1.6;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.icon-card {
    perspective: 1000px;
    cursor: pointer;
}

.icon-3d {
    width: 100%;
    height: 160px;
    position: relative;
    transform-style: preserve-3d;
    transition: var(--transition);
    border-radius: 16px;
    box-shadow: var(--shadow);
    background: var(--card-bg);
    overflow: hidden;
}

.icon-front, .icon-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    transition: var(--transition);
}

.icon-front {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
}

.icon-back {
    background: var(--card-bg);
    transform: rotateY(180deg);
    color: var(--primary);
}

.icon-card:hover .icon-3d {
    transform: rotateY(180deg);
}

.icon-card:hover .icon-front i {
    transform: translateY(-10px);
}

.icon-card:hover .icon-back {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.icon-card i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    transition: var(--transition);
}

.icon-name {
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}

.icon-desc {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.5rem;
    text-align: center;
}

/* Floating animation */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.icon-front i {
    animation: float 4s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }

    .icon-3d {
        height: 200px;
    }

/* .title5 {  */
        /* font-size: 2rem;  */
/* } */
}

/* Loading animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.icon-card {
    opacity: 0;
    animation: fadeIn 0.6s forwards;
}

/* Delay animations for each card */
.icon-card:nth-child(1) { animation-delay: 0.1s; }
.icon-card:nth-child(2) { animation-delay: 0.2s; }
.icon-card:nth-child(3) { animation-delay: 0.3s; }
.icon-card:nth-child(4) { animation-delay: 0.4s; }
.icon-card:nth-child(5) { animation-delay: 0.5s; }
.icon-card:nth-child(6) { animation-delay: 0.6s; }
.icon-card:nth-child(7) { animation-delay: 0.7s; }
.icon-card:nth-child(8) { animation-delay: 0.8s; }
.icon-card:nth-child(9) { animation-delay: 0.9s; }
.icon-card:nth-child(10) { animation-delay: 1.0s; }
.icon-card:nth-child(11) { animation-delay: 1.1s; }
.icon-card:nth-child(12) { animation-delay: 1.2s; }
.icon-card:nth-child(12) { animation-delay: 1.2s; }


/* Scroll to Top Button Styles */
#scroller {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  background: #47458B;
  color: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  cursor: pointer;
  font-size: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#scroller.show {
  opacity: 0.85;
  visibility: visible;
  transform: translateY(0);
}

#scroller:hover {
  transform: scale(1.1) translateY(0);
  opacity: 1;
  background-color: #005ecc;
}

#scroller:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.3);
}


@-moz-keyframes bounce100 {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce100 {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce100 {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}


.arrow100 {
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: contain;
}


.bounce100 {
  -moz-animation: bounce100 2s infinite;
  -webkit-animation: bounce100 2s infinite;
  animation: bounce100 2s infinite;
}




footer #scroller {
  display: none !important;
}



footer {
	  position: relative;
  padding: 2rem 0 1rem;
  padding: 1rem 0;
  background: #f7f7f7;
  text-align: center;
}


.grid111 {
  display: flex;
  flex-direction: column;
  flex-flow: row wrap;
}
.grid111 > [class*=column-] {
  display: block;
}

.column-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}


.column-xs-12 {
    grid111-column-start: span 12;
    grid111-column-end: span 12;
  }
 
 .column-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}


.socia, .copyright {
  margin: 1rem;
  font-family: 'Roboto';
}

.socia li {
  display: inline-block;
}


.container111 {
  margin: auto;
  padding: 0 1rem;
  max-width: 71.25rem;
  width: 100%;
}

.socia a:hover {
  transform: scale(1.1);
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1877F2;
  color: #ffffff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
  background: #1DA1F2;
  color: #ffffff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #E4405F;
  color: #ffffff;
}

.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
  background: #333333;
  color: #ffffff;
}

.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
  background: #CD201F;
  color: #ffffff;
}


.socia a {
width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}


@supports (display: grid111) {
  .gallery .grid111 {
    grid111-gap: 1rem;
  }
}












        .image-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 20px;
        }

        .grid-item {
            position: relative;
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .grid-item:hover {
            transform: scale(0.98);
            box-shadow: 0 8px 30px rgba(0,0,0,0.3);
        }

        .grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.9) saturate(0.8);
            transition: all 0.5s ease;
        }

        .grid-item:hover img {
            filter: brightness(0.7) saturate(1);
            transform: scale(1.05);
        }

        .hover-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 25px;
            color: white;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.5s ease;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 30%, transparent);
        }

        .grid-item:hover .hover-content {
            opacity: 1;
            transform: translateY(0);
        }

        .info-icon {
            width: 24px;
            height: 24px;
            margin-bottom: 15px;
            fill: #f59e0b;
        }

/* .title5 {  */
    /* font-size: 1.4rem;  */
    /* font-weight: 600;  */
    /* margin-bottom: 8px;  */
/* }  */

        .description {
            font-size: 0.85rem;
            line-height: 1.4;
            opacity: 0.9;
        }
		
	@media only screen and (max-width: 767px) {
  .description {
            font-size: 0.7rem;
            opacity: 0.9;
        }
	
	.title5 {
  font-family: 'Arial';
  font-size: 1.2rem;
  font-weight: 10px;
  /* line-height: 30px; */
  /* opacity: 1; */
  text-transform: uppercase;
  text-align: center;
  background: #fff;
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradient 2.5s linear infinite;
  text-decoration: none !important;
  margin: 20px 20px;
  /* justify-content: center; /* horizontal center */ */
  
}
    
  }
	
		
		
		
		
	

        @media (max-width: 768px) {
            .image-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }
        }
		
		
		
		

.wrapper {
  display: inline-flex;
  list-style: none;
}

.wrapper .icon {
  position: relative;
  background: #ffffff;
  border-radius: 50%;
  padding: 15px;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1DA1F2;
  color: #ffffff;
}



.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #1DA1F2;
  color: #ffffff;
}

.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
  background: #2d2d30;
  color: #ffffff;
}

.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
  background: #4FCE5D ;
  color: #ffffff;
}



.wrapper .icon i {
  color: #202020;
}

 /* Reset and base styles */


/* Loader styles */
#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.logo-text {
  font-size: 2rem;
  letter-spacing: 4px;
  margin-top: 20px;
  opacity: 0;
  animation: fadeIn 2s ease forwards 1s;
}

.dot-pulse {
  display: flex;
  gap: 6px;
  margin-top: 30px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  animation: pulse 1s infinite ease-in-out;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Content */
.content {
  opacity: 0;
  transition: opacity 1s ease;
}

.content.visible {
  opacity: 1;
}



.sectionthree{
	 background-color: #f3f2ef;
      font-family: 'Segoe UI', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      padding: 40px 20px;
      box-sizing: border-box;
}




.card1-reference {
    display: flex;
    flex-direction: column;
     gap: 40px;
    }

.card1-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
     gap: 20px;
    }

.ardo {
    position: relative;
    background-color: #FCFCFC;
    border-radius: 20px;
    padding: 25px;
    width: 280px;
	height:280px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    z-index: 1; /* This z-index is for the card itself relative to other elements on the page */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .ardo:hover {
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      transform: translateY(-5px);
    }

    .ardo::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background-color: #cce9ff;
      z-index: 0; /* The background hover effect is behind the content */
      transition: left 0.4s ease-out;
    }

    .ardo:hover::before {
      left: 0;
    }

    /* Add z-index to the content elements within the card */
    .ardo .icon1-wrapper,
    .ardo h3,
    .ardo p {
      position: relative; /* Essential for z-index to work on non-positioned elements */
      z-index: 2; /* Ensures content is above the ::before pseudo-element */
    }

    .icon1-wrapper {
      margin-bottom: 15px;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .icon1-wrapper svg {
      width: 40px;
      height: 40px;
      stroke: #193c6d;
      stroke-width: 2;
      fill: none;
      transition: stroke 0.3s ease;
    }

    .ardo:hover .icon1-wrapper svg {
      animation: subtleScale 0.8s ease-in-out infinite alternate;
      stroke: #193c6d;
    }

    @keyframes subtleScale {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    .ardo h3 {
      margin: 0 0 10px;
      font-weight: 600;
      color: #333333;
      transition: color 0.3s ease;
    }

    .ardo:hover h3 {
      color: #1a2a4f;
    }

    .ardo p {
      color: #777777;
      font-size: 14px;
      line-height: 1.6;
      transition: color 0.3s ease;
    }

    .ardo:hover p {
      color: #333333;
    }

    .arrow2-wrapper {
      margin-top: auto;
      align-self: flex-end;
      background: #FCFCFC;
      border-radius: 12px;
      width: 50px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
      z-index: 2; /* The arrow wrapper is already positioned and has a higher z-index */
    }

    .ardo:hover .arrow2-wrapper {
      background: #193c6d;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
      transform: translateY(-2px) scale(1.05);
    }

    .arrow2-wrapper svg {
      width: 24px;
      height: 24px;
      fill: #5F73DD;
      transition: fill 0.3s ease;
    }

    .ardo:hover .arrow2-wrapper svg {
      fill: white;
    }
	

	
	
	
	








        /* Custom CSS Variables */
        :root {
            --color-text: black;
            --color-bg: #fff;
            --color-bg-accent: #f3f2ef; /* Adjusted for closer match to image background cards */
            --card-base-size: clamp(10rem, 1rem + 40vmin, 30rem); /* Define the size of each card */
            --spacing-gap: calc(var(--card-base-size) / 10); /* Increased gap for better spacing */
            --animation-duration: 170s; /* ANIMATION SPEED: Increased duration for slower movement (was 60s) */
            --scroll-start: 0;
            --scroll-end: calc(-100% - var(--spacing-gap)); /* Scrolls exactly one full group + gap */

            /* Gradient mask variables */
            --mask-gradient-start: hsl(0 0% 0% / 0);
            --mask-gradient-middle-start: hsl(0 0% 0% / 1) 20%;
            --mask-gradient-middle-end: hsl(0 0% 0% / 1) 80%;
            --mask-gradient-end: hsl(0 0% 0% / 0);
        }

        /* Dark mode preference (optional) */
        @media (prefers-color-scheme: dark) {
            :root {
                --color-text: #005ecc;
                --color-bg: white;
                --color-bg-accent: #f3f2ef;
            }
        }

        /* Universal box-sizing for consistent layout */
        * {
            box-sizing: border-box;
        }

        /* Body styles */
           .sect {
            display: grid;
            align: center;
            overflow: hidden; /* Hide scrollbars */
            gap: var(--spacing-gap); /* Gap between marquee rows */
            width: 100%;
            min-height: 40vh;
            font-family: system-ui, sans-serif;
            font-size: 0.8rem;
            line-height: 1.5;
            color: var(--color-text); /* Text color */
            background-color: #fff; /* Background color */
            transition: background-color 0.3s ease; /* Smooth transition for theme change */
            padding: var(--spacing-gap); /* Overall body padding */
        }

        @media only screen and (max-width: 767px) {
          .sect {
          display: grid;
            align-content: center;
            overflow: hidden; /* Hide scrollbars */
            gap: var(--spacing-gap); /* Gap between marquee rows */
            width: 100%;
            min-height: 40vh;
            font-family: Roboto;
            font-size: 0.8rem;
            line-height: 1.5;
            color: var(--color-text); /* Text color */
            background-color: var(--color-bg); /* Background color */
            transition: background-color 0.3s ease; /* Smooth transition for theme change */
            padding: var(--spacing-gap); /* Overall body padding */
        }

}


        /* Main marquee container */
        .marquee {
            display: flex;
            overflow: hidden;
            -webkit-user-select: none; /* Prevent text selection */
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            gap: var(--spacing-gap); /* Gap between marquee groups */
             background: #fff;
            aria-live: off; /* Announce changes to screen readers */


            /* Mask image for fading effect at edges */
            -webkit-mask-image: linear-gradient(
                var(--mask-direction, to right),
                var(--mask-gradient-start),
                var(--mask-gradient-middle-start),
                var(--mask-gradient-middle-end),
                var(--mask-gradient-end)
            );
            mask-image: linear-gradient(
                var(--mask-direction, to right),
                var(--mask-gradient-start),
                var(--mask-gradient-middle-start),
                var(--mask-gradient-middle-end),
                var(--mask-gradient-end)
            );
        }

        /* Marquee group (the actual scrolling content) */
        .marquee__group {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
            gap: var(--spacing-gap); /* Gap between individual items within the group */
            min-width: 100%;
            animation: scroll-x var(--animation-duration) linear infinite;
        }

        /* Pause animation for users who prefer reduced motion */
        @media (prefers-reduced-motion: reduce) {
            .marquee__group {
                animation-play-state: paused;
            }
        }

        /* Styles for vertical marquee */
        .marquee--vertical {
            --mask-direction: to bottom; /* Change mask direction for vertical fade */
            flex-direction: column;
            min-height: 100%;
            height: 100%;
        }

        .marquee--vertical .marquee__group {
            flex-direction: column;
            animation-name: scroll-y;
            min-height: 100%;
            min-width: auto;
            width: 100%;
        }

        /* Reverse direction for alternating rows */
        .marquee--reverse .marquee__group {
            animation-direction: reverse;
            animation-delay: -3s;
        }

        /* Keyframe animations for horizontal scrolling */
        @keyframes scroll-x {
            from {
                transform: translateX(var(--scroll-start));
            }
            to {
                transform: translateX(var(--scroll-end));
            }
        }

        /* Keyframe animations for vertical scrolling */
        @keyframes scroll-y {
            from {
                transform: translateY(var(--scroll-start));
            }
            to {
                transform: translateY(var(--scroll-end));
            }
        }

        /* Element styles for the icon "cards" */
        .marquee .icon-card {
            display: flex; /* Use flexbox for icon and text alignment */
            flex-direction: column; /* Stack icon and text vertically */
            align-items: center; /* Center horizontally */
            justify-content: center; /* Center vertically */
            width: var(--card-base-size);
            color: var(--color-text);
            background: var(--color-bg-accent);
            aspect-ratio: 16/9;
            padding: calc(var(--card-base-size) / 10);
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: all 0.2s ease;
            text-align: center; /* Ensure text is centered below the icon */
            gap: calc(var(--card-base-size) / 20); /* Small gap between icon and text */
        }

        /* Font Awesome icon specific styling within the card */
        .marquee .icon-card i {
            font-size: calc(var(--card-base-size) / 5); /* Adjust icon size dynamically */
            line-height: 1; /* Reset line height for icon itself */
        }

        /* Text label specific styling within the card */
        .marquee .icon-card .label {
            font-size: 1.2rem; /* Adjust text size dynamically */
            font-weight: 600;
            margin-top: calc(var(--card-base-size) / 60); /* Small margin above text */
            line-height: 1.2; /* Ensure text fits well */
        }

        /* Vertical icon-card styles */
        .marquee--vertical .icon-card {
            aspect-ratio: 1; /* Square aspect ratio for vertical items */
            width: calc(var(--card-base-size) / 1.5); /* Adjust width for vertical display */
            padding: calc(var(--card-base-size) / 8); /* Adjust padding for vertical cards */
        }

        .marquee--vertical .icon-card i {
            font-size: calc(var(--card-base-size) / 4); /* Smaller icon in vertical mode */
        }

        .marquee--vertical .icon-card .label {
            font-size: calc(var(--card-base-size) / 12); /* Smaller text in vertical mode */
        }

        /* Parent rep2025 for the entire carousel */
        .rep2025 {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-gap);
            margin: auto;
            max-width: 100vw;
            padding-top: calc(var(--spacing-gap) * 2);
            padding-bottom: calc(var(--spacing-gap) * 2);
            height: auto;
            transition: all 0.3s ease;
        }

        /* Vertical rep2025 */
        .rep2025--vertical {
            flex-direction: row;
            height: 100vh;
            width: auto;
            padding-left: calc(var(--spacing-gap) * 2);
            padding-right: calc(var(--spacing-gap) * 2);
            padding-top: var(--spacing-gap);
            padding-bottom: var(--spacing-gap);
        }

        /* Adjust body content alignment for vertical mode */
		.rep2025.vertical-mode {
            align-content: stretch;
            display: flex;
            flex-direction: row;
        }

        /* Toggle direction button */
        .toggle {
            --toggle-size: 3rem; /* Use a more specific variable for toggle size */
            position: relative;
            width: var(--toggle-size);
            height: var(--toggle-size);
            font: inherit;
            text-align: center;
            cursor: pointer;
            outline: none;
            border: none;
            border-radius: 50%;
            color: inherit;
            background-color: var(--color-bg-accent);
            z-index: 10;
            bottom: calc(var(--spacing-gap) * 2);
            transform: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .toggle:focus-visible {
            box-shadow: 0 0 0 2px var(--color-text);
        }

        /* Styles for the SVG inside the toggle button */
        .toggle svg {
            --svg-icon-size: 1.5rem; /* Specific variable for SVG size */
            position: absolute;
			top:calc(var(--spacing-gap));
            top: 50%;
            left: 50%;
            width: var(--svg-icon-size);
            height: var(--svg-icon-size);
            fill: currentcolor;
            transform: translate(-50%, -50%); /* Initial state */
            transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* Apply animation based on direction */
        toggle svg.horizontal-icon {
            animation: spin-horizontal 0.3s forwards; /* Use forwards to keep the final state */
        }

        .toggle svg.vertical-icon {
            animation: spin-vertical 0.3s forwards; /* Use forwards to keep the final state */
        }

        /* Keyframe animations for the toggle icon */
        @keyframes spin-horizontal {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(0deg); } /* Stays horizontal */
        }

        @keyframes spin-vertical {
            from { transform: translate(-50%, -50%) rotate(0deg); } /* Start from 0 to smoothly transition */
            to { transform: translate(-50%, -50%) rotate(90deg); } /* Rotates to vertical */
        }


        /* Responsive adjustments for smaller screens in vertical mode */
        @media (max-width: 768px) {
            .vertical-mode .rep2025 {
                flex-direction: column;
                max-height: none;
                padding-left: var(--spacing-gap);
                padding-right: var(--spacing-gap);
            }
            .vertical-mode .marquee--vertical .icon-card {
                width: var(--card-base-size);
                aspect-ratio: 16/9;
            }
            .sect .toggle {
                top: var(--spacing-gap);
                left: var(--spacing-gap);
                transform: none;
            }
        }	
	
	


        /* Design 4: Outline with Bold Text and Blue Hover */
        .btn-0 {
            padding: 14px 30px;
            border: 1.5px solid #a0a0a0;
            background-color: transparent;
			      font-family: 'Segoe UI';
            color: #fff;
            font-size: 17px;
            font-weight: 100;
            border-radius: 12px;
        }
        .btn-0:hover {
            border-color: #005ecc;
            color: #005ecc;
            background-color: rgba(0, 122, 255, 0.05);
            transform: translateY(-1px);
        }
        .btn-0:active {
            background-color: rgba(0, 122, 255, 0.1);
            transform: translateY(0);
        }