body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #121212;
    color: #E0E0E0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* This ensures padding doesn't affect the total width of elements */
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}




.section-margin {
    margin-bottom: 50px; /* This will apply a 50px margin to the bottom of each section. Adjust the value as needed. */
}




/* Typography */

body, p {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Regular weight for body text */
    color: #E0E0E0; /* Light grey for high contrast in dark mode */
}

p.lead {
	 font-family: 'Poppins', sans-serif;
    font-weight: 300; /* Medium weight for lead paragraphs */
}

a,
button {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: #76ACEA; /* Primary color */
    font-size: 1rem;
    text-decoration: none; /* Remove underline from links */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

a:hover,
button:hover {
    color: #5797ED; /* Adjusted color for hover effect */
    cursor: pointer; /* Change cursor to pointer on hover */
}



h1 {
   font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Semi-bold for headings; adjust as needed */
    letter-spacing: -0.5px;
	font-size: 7rem;
	  background: linear-gradient(to right, #3DCFFF, #76ACEA, #66FFFF);
    -webkit-background-clip: text;
    color: transparent;
}




.container-heading {
    position: relative; /* Needed for pseudo-element positioning */
    padding-bottom: 20px; /* Adjust based on your layout */
    margin-bottom: 20px; /* Space below the container */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Light border for subtle separation */

    /* Create the bottom shadow */
    box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.2);
}

.section-heading {
    display: inline-block; /* Makes the shadow fit the text width */
    background: linear-gradient(to right, #76ACEA, #ffffff, #76ACEA); /* Gradient background */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Chrome and Safari specific styles for text fill */
    margin-bottom: 20px; /* Space below the heading */
    padding: 0 10px; /* Padding on the sides for the text */
	padding: 0px 30px;
    font-family: 'Montserrat', sans-serif; /* Use the desired font family */
    font-size: 4rem; /* Adjust the font size as needed */
    font-weight: bold; /* Optionally, adjust font weight */
   
}





/* Add this to your existing CSS */
.animate {
    visibility: visible; /* Initially hide the content until scrolled into view */
    animation-fill-mode: both;
    animation-duration: 1s;
}

.fadeInUp {
    animation-name: fadeInUp;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}





.grid-container-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Changed to 1fr for equal fractions */
    gap: 30px;
    margin-bottom: 100px;
    margin-top: 30px;
    padding: 30px;
}

.grid-container-2col > .grid-item-2col {
    opacity: 0; /* Changed from 0 to 1 to make them visible */
}

/* Apply animations */
.animate-left {
    animation: slideInFromLeft 0.5s forwards;
}

.animate-right {
    animation: slideInFromRight 0.5s forwards;
}



@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide in from right */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Apply animations */
.animate-left {
    opacity: 1; /* Ensure element is visible when animating */
    animation: slideInFromLeft 0.5s forwards;
}

.animate-right {
    opacity: 1; /* Ensure element is visible when animating */
    animation: slideInFromRight 0.5s forwards;
}



.text-container {
    position: relative;
    z-index: 2; /* Ensures the text is above the shape */
}


.container-decorated-link {
	margin-top: 50px;
    position: relative;
    text-align: start; /* Center aligns all content */
}




button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}

button.learn-more {
  width: 12rem;
  height: auto;
}

button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, .076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
    background-color: rgba(255, 255, 255, 0.1);
	   border: 1px solid rgba(255, 255, 255, 0.2);
	
  border-radius: 1.625rem;
}

button.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, .076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}

button.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, .076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}

button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: '';
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}

button.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, .076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #fff;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  text-transform: capitalize;
}

button:hover .circle {
  width: 100%;
}

button:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}

button:hover .button-text {
	 font-weight: 600;
  color: #fff;
	 text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
                 0 0 20px rgba(255, 255, 255, 0.8), 
                 0 0 30px rgba(255, 255, 255, 0.8); /* Glowing effect */
}









h2, h3 {
   font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Semi-bold for headings; adjust as needed */
    letter-spacing: -0.5px;
	
	  background: linear-gradient(to right, #66FFFF, #76ACEA);
    -webkit-background-clip: text;
    color: transparent;
}

h4, h5, h6 {
   font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Semi-bold for headings; adjust as needed */
    letter-spacing: -0.5px;
	
	  background: linear-gradient(to right, #C4D9F8, #76ACEA);
    -webkit-background-clip: text;
    color: transparent;
}



/* Primary Button - Use a standout blue that complements your primary color */
/* Base Styles for Glassmorphism Buttons */
.btn-primary, .btn-secondary {
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    backdrop-filter: blur(10px); /* Blur effect for the glassmorphism */
    border-radius: 10px; /* Rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff; /* White text for better readability */
    padding: 10px 20px; /* Spacious padding */
    font-size: 16px; /* Legible font size */
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Primary Button - Specific Styles */
.btn-primary {
    background-color: rgba(46, 164, 255, 0.6); /* Brighter vibrant blue for primary button */
}

.btn-primary:hover {
    background-color: rgba(46, 164, 255, 0.8); /* Even brighter on hover */
    border-color: rgba(46, 164, 255, 0.8); /* Matching border color on hover */
    box-shadow: 0 0 15px rgba(46, 164, 255, 0.5); /* Enhanced glow for emphasis */
}

/* Secondary Button - Specific Styles */
.btn-secondary {
    background-color: rgba(192,192,192, 0.4); /* Silver color for secondary button */
}

.btn-secondary:hover {
    background-color: rgba(192,192,192, 0.6); /* Brighter silver on hover */
    border-color: rgba(192,192,192, 0.6); /* Matching border color on hover */
    box-shadow: 0 0 15px rgba(192,192,192, 0.5); /* Enhanced glow for emphasis */
}









	


/* Basic styles for the navigation bar */
.nav {
    position: fixed; /* Fix the navbar to the viewport */
    top: 0; /* Align the top edge of the navbar with the top of the viewport */
    left: 0; /* Align the left edge of the navbar with the left of the viewport */
    width: 100%; /* Make the navbar full width */
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* Adjusted for spacing */
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #333333; /* Very dark gray border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Branding styles */

.nav-brand svg {
    display: flex; /* Show your SVG logo */
    width: 50px; /* Adjust as per your SVG size */
    height: 50px; /* Maintain aspect ratio */
}

#outerA, #innerA {
    transition: transform 0.1s; /* Smoother rotation transition */
    transform-origin: 50% 60%; /* Adjust this value based on your SVG's design */
}


/* Navigation link styles */
.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding-left: 0;
}

.nav-links li a {
    color: #ffffff;
    padding: 14px 16px;
    text-decoration: none;
    display: block;
}

.nav-links li a:hover {
    background-color: transparent;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}



.nav-btn {
    display: none;
}


.nav-btn .fa-bars {
    display: block;
    height: 1px;
    width: 100%;
    background-color: #ffffff;
    position: relative;
    transition: background-color 0.3s ease;
	padding-right: 25px;

}
.nav-btn {
    display: none; /* Shows the button */
    width: 30px; /* Width of the button */
    height: 25px; /* Total height of the button */
    position: relative; /* Positioning context for pseudo-elements */
    cursor: pointer; /* Changes cursor to pointer type */
    background: none;
    border: none;
    outline: none;
    padding: 0; /* Removes padding */
}

.nav-btn .fa-bars,
.nav-btn .fa-bars:before,
.nav-btn .fa-bars:after {
    display: block; /* Ensures elements are block level */
    background-color: #ffffff; /* Color of the bars */
    height: 2px; /* Height of the bars */
    width: 100%; /* Full width of the button */
    position: absolute;
    transition: transform 0.3s ease; /* Smooth transformation */
}

.nav-btn .fa-bars {
    top: 50%; /* Center the middle bar vertically */
    transform: translateY(-50%); /* Offset the middle bar by half its height */
}

.nav-btn .fa-bars:before {
    content: '';
    top: -8px; /* Position the top bar */
}

.nav-btn .fa-bars:after {
    content: '';
    top: 8px; /* Position the bottom bar */
}

/* Animation */
.nav-btn.active .fa-bars:before {
    transform: translateY(8px) rotate(45deg); /* Moves top bar down and rotates */
}

.nav-btn.active .fa-bars:after {
    transform: translateY(-8px) rotate(-45deg); /* Moves bottom bar up and rotates */
}

.nav-btn.active .fa-bars {
    background-color: transparent; /* Makes the middle bar disappear */
}

/* Social media icons */
.nav-social-media-icons {
    list-style: none;
    display: flex;
    margin: 0;
    padding-left: 0;
}

.nav-social-media-icons li a {
    color: #FFFFFF;
    padding: 14px 16px;
    text-decoration: none;
}

/* Search input styles */
.search-input {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
    backdrop-filter: blur(10px); /* Blur effect for the glassmorphism */
   border: 1px solid rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 15px; /* Adds rounded corners */
    color: white; /* Sets the font color to white */
}



/* Hero Section Styles */



.container-hero {
    display: flex;
    flex-direction: row; /* Side by side elements on large screens */
    min-height: 100vh;
    align-items: center;
    justify-content: space-between; /* Ensure there's space between the two columns */
    gap: 30px; /* Space between items, works for both directions */
	 padding-top: 80px;
}

.hero-text-col {
    flex: 1; /* Both columns take available space equally */
    position: relative; /* Standard positioning */
    width: 100%; /* Adjust width for the gap */
	 max-width: 100%; /* Ensure content does not overflow the column width */
    height: auto; /* Ensure proper height based on content */
}

.hero-image-col {
    flex: 1; /* Both columns take available space equally */
    position: relative; /* Standard positioning */
    width: calc(50% - 15px); /* Adjust width for the gap */
	overflow: hidden; /* Hide overflow */
    display: block; /* Ensure it does not collapse and is visible */
	 max-width: 100%; /* Ensure content does not overflow the column width */
    height: auto; /* Ensure proper height based on content */
}


.hero-h1 {
	margin: 50px 0px;
    line-height: 1.0; /* Adjust line-height for better readability and visual appeal */
    letter-spacing: 0.05em; /* Adjust letter-spacing for better kerning and clarity */
    font-family: 'Montserrat', sans-serif; /* Use the desired font family */
    font-size: 6rem; /* Adjust the font size as needed */
    font-weight: bold; /* Optionally, adjust font weight */
    display: inline-block; /* Required for some browsers to apply the gradient */
    color: #121212; /* Solid color for the text */
    text-shadow: -1px -1px 0 #3DCFFF,  
                  1px -1px 0 #76ACEA,
                 -1px 1px 0 #3DCFFF,
                  1px 1px 0 #76ACEA; /* Shadow directions to create the outline */
}


.hero-h2 {
    display: inline-block; /* Makes the shadow fit the text width */
    background: linear-gradient(to right, #76ACEA, #ffffff, #76ACEA); /* Gradient background */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Chrome and Safari specific styles for text fill */
    word-wrap: break-word; /* Allows the words to break and wrap onto the next line */
    white-space: normal; /* Ensures whitespace is handled normally */
}

.hero-lead {
	margin: 20px 0px;
}

.hero-buttons {
	margin: 30px 0px;
	gap: 30px;
}

.hero-image-col svg {
    width: 100%; /* Ensure SVG takes the full width of its container */
    height: auto; /* Adjust height automatically to preserve aspect ratio */
    display: block; /* Ensure SVG is displayed */
}



/* Keyframes for fading in and removing blur */
@keyframes fadeInBlurOut {
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    50% {
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    }
}

/* Base styles for rectangles, include initial transparent and blurred state */
.st0 {
    stroke-width: 0.5616;
    stroke-miterlimit: 10;
    fill: rgba(0, 0, 0, 0.4);
    stroke: rgba(255, 255, 255);
    opacity: 0; /* Start fully transparent */
    filter: blur(10px); /* Start with blur */
    transition: filter 0.3s ease-out, opacity 0.3s ease-out; /* Smooth transition for filter and opacity */
    box-shadow: none; /* Start without shadow */
}

/* Adding animation with delay for each rectangle, replace 'rectX' with actual class names */
.rect1 { animation: fadeInBlurOut 3s forwards; /* No delay for the first one */ }
.rect2 { animation: fadeInBlurOut 3s forwards; animation-delay: 1s; }
.rect3 { animation: fadeInBlurOut 3s forwards; animation-delay: 2s; }
.rect4 { animation: fadeInBlurOut 3s forwards; animation-delay: 3s; }
.rect5 { animation: fadeInBlurOut 3s forwards; animation-delay: 4s; }
.rect6 { animation: fadeInBlurOut 3s forwards; animation-delay: 5s; }
.rect7 { animation: fadeInBlurOut 3s forwards; animation-delay: 6s; }
.rect8 { animation: fadeInBlurOut 3s forwards; animation-delay: 7s; }



/* Blue hues for all rectangles, adjusting previous pink to blue */
.rect1 {
    fill: rgba(173, 216, 230, 0.3); /* Light blue with reduced transparency */
    stroke: rgba(0, 191, 255, 0.9); /* Deep sky blue with reduced transparency */
}
.rect2 {
   fill: rgba(135, 206, 235, 0.3); /* Sky blue with reduced transparency */
    stroke: rgba(30, 144, 255, 0.9); /* Dodger blue with reduced transparency */
}
.rect3 {
     fill: rgba(0, 191, 255, 0.3); /* Alternate light blue with reduced transparency */
    stroke: rgba(0, 191, 255, 0.9); /* Alternate deep sky blue with reduced transparency */
}
.rect4 {
    fill: rgba(30, 144, 255, 0.3); /* Alternate sky blue with reduced transparency */
    stroke: rgba(30, 144, 255, 0.9); /* Alternate dodger blue with reduced transparency */
}
.rect5 {
   fill: rgba(100, 149, 237, 0.3);  /* Another variation of light blue with reduced transparency */
    stroke: rgba(0, 191, 255, 0.9); /* Another variation of deep sky blue with reduced transparency */
}
.rect6 {
    fill: rgba(70, 130, 180, 0.3); /* Another variation of sky blue with reduced transparency */
    stroke: rgba(30, 144, 255, 0.9); /* Another variation of dodger blue with reduced transparency */
}
.rect7 {
    fill: rgba(176, 224, 230, 0.3); /* Yet another variation of light blue with reduced transparency */
    stroke: rgba(0, 191, 255, 0.9); /* Yet another variation of deep sky blue with reduced transparency */
}
.rect8 {
    fill: rgba(0, 206, 209, 0.3); /* Yet another variation of sky blue with reduced transparency */
    stroke: rgba(30, 144, 255, 0.9); /* Yet another variation of dodger blue with reduced transparency */
}






.st0-swirl {
    stroke-dasharray: 3000; /* Adjust based on the total length of your swirl path */
    stroke-dashoffset: 3000; /* Same as stroke-dasharray to hide the swirl */
    animation: drawSwirl 10s ease forwards; /* Animation to draw the swirl */
    animation-delay: 10s; /* Adjust this based on how long after the rectangles you want it to start */
    fill: none;
    stroke: #ffffff;
    stroke-width: 0.5616;
    stroke-miterlimit: 10;
}

@keyframes drawSwirl {
    to {
        stroke-dashoffset: 0;
    }
}



.accent-text {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}






.grid-container-3col {
	display: grid;
    grid-template-columns: repeat(3, 33.3%); /* Creates a 3-column layout */
    grid-gap: 30px; /* Spacing between grid items */
	margin-bottom: 100px;
	margin-top: 30px;
	padding: 30px;
} 



  svg {
    display: none;
  }


.circle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensure circles are behind the text */
}


.gradients-container {
    width: 100%;
    height: 100%;
    filter: blur(40px); 
}





.goo1 {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(10, 20, 70, 1) 0%, rgba(10, 20, 70, 0) 50%) no-repeat;
top: calc(50% - 50px); /* Assuming the circle size is 100px, so half is 50px */
left: calc(50% - 50px); /* Same as above */
	transform-origin: calc(20% - 500px);
    animation: moveVertical 30s ease infinite;
}

.goo2 {
    width: 100%;
    height: 100%;
     background: radial-gradient(circle at center, rgba(25, 40, 100, 1) 0%, rgba(25, 40, 100, 0) 50%) no-repeat;
top: calc(50% - 50px); /* Assuming the circle size is 100px, so half is 50px */
left: calc(50% - 50px); /* Same as above */
	transform-origin: calc(70% - 300px);
    animation: moveHorizontal 20s reverse infinite;
}

.goo3 {
    width: 100%;
    height: 100%;
   background: radial-gradient(circle at center, rgba(50, 30, 72, 1) 0%, rgba(50, 30, 72, 0) 50%) no-repeat;
top: calc(50% - 50px); /* Assuming the circle size is 100px, so half is 50px */
left: calc(50% - 50px); /* Same as above */
	transform-origin: calc(50% + 400px);
    animation: moveVertical 40s linear infinite;
}

.goo4 {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(95, 60, 130, 1) 0%, rgba(95, 60, 130, 0) 50%) no-repeat;
top: calc(50% - 50px); /* Assuming the circle size is 100px, so half is 50px */
left: calc(50% - 50px); /* Same as above */
	transform-origin: calc(20% - 200px);
    animation: moveHorizontal 40s ease infinite;
}

.goo5 {
    width: 100%;
    height: 100%;
   background: radial-gradient(circle at center, rgba(170, 100, 150, 1) 0%, rgba(170, 100, 150, 0) 50%) no-repeat;
top: calc(50% - 50px); /* Assuming the circle size is 100px, so half is 50px */
left: calc(50% - 50px); /* Same as above */
	transform-origin: calc(10% - 300px) calc(50% + 200px);
     animation: moveInCircle 20s ease infinite;
}











@keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveVertical {
  0% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes moveHorizontal {
  0% {
    transform: translateX(-50%) translateY(-10%);
  }
  50% {
    transform: translateX(50%) translateY(10%);
  }
  100% {
    transform: translateX(-50%) translateY(-10%);
  }
}




/* Services Section Styles */



#services .services-card {
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
    backdrop-filter: blur(10px); /* Blur effect for the glassmorphism */
   border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
   color: #ffffff; /* White text for better readability */
    margin-bottom: 20px;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Ensures the gradient animation is contained within the card borders */
}

#services .services-card:hover {
    transform: scale(1.05) translateY(-5px); /* Combines lifting and enlarging effect */
   box-shadow: 
    0 0 10px rgba(61, 207, 255, 0.1), /* Light blue with reduced brightness */
    0 0 20px rgba(118, 172, 234, 0.1), /* Medium blue with reduced brightness */
    0 0 30px rgba(102, 255, 255, 0.1); /* Cyan with reduced brightness */


}


.services-card-body {
 padding: 30px;
}

.services-card-header {
	 padding-left: 30px; /* Adjust padding as needed */
	padding-top: 20px; /* Adjust padding as needed */
	padding-bottom: 5px; /* Adjust padding as needed */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
}

.services-card-number {
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  margin-right: 10px; /* Ensure spacing between number and title */
}

.services-card-footer {
	 padding-left: 30px; /* Adjust padding as needed */
	padding-top: 20px; /* Adjust padding as needed */
	padding-bottom: 5px; /* Adjust padding as needed */
  border-top: 1px solid rgba(255, 255, 255, 0.3); /* Optional, if you want a dividing line */
}






/* Portfolio Card Styles */
/* Styles for carousel container and its elements */



#portfolio .portfolio-card {
  background-color: transparent;
    backdrop-filter: blur(10px); /* Blur effect for the glassmorphism */
   color: #ffffff; /* White text for better readability */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	align-content: flex-end;
}




.portfolio-card-header {
font-family: 'Poppins', sans-serif;
    font-size: 3rem; /* Adjust size as needed */
	font-weight: 500;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Optional: adds a text shadow for better visibility */
}



.portfolio-card-body {
	color: white;
	 background-color: transparent; /* No background */
}



/* Portfolio Gallery Styles */
.grid-container-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Adjust based on your design */
    gap: 20px;
	padding: 30px;
}


.icons-container {
    display: flex;
    align-items: center; /* Align items in the center of the container vertically */
    justify-content: center; /* Align items to the start of the container horizontally */
    gap: 10px; /* Adjust the space between icons */
}

.portfolio-font-icon {
 font-family: 'Montserrat', sans-serif; 
    font-weight: bold; /* Make it bold */
    color: white; /* Text color */
    display: inline-block; /* Treat the div like an inline element */
    text-align: center; /* Center the text */
    font-size: 15px; /* Increase font size */
	width: 50px;
	height: 50px;
}

.applications-icon {
	width: 50px;
	height: 50px;
}


.grid-item {
    position: relative;
    overflow: hidden; /* To ensure the content does not overflow */
    perspective: 1000px; /* Setup perspective for 3D animations */
    border: 1px solid #333333; /* Very dark gray border */
    border-radius: 15px;
    display: flex; /* Use flex layout */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    width: 100%; /* Adjust based on your design */
    height: auto; /* Adjust based on your design */
}

.grid-item img {
    width: 100%; /* Image takes the full width of the container */
    height: 100%; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the area without stretching */
    border-radius: 15px; 
}


.info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8); /* Light background with transparency */
    backdrop-filter: blur(10px); /* Blur effect for the background */
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    display: flex; /* Use flex layout */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    text-align: center; /* Center text */
    border-radius: 15px; /* Rounded corners */
    opacity: 0; /* Start hidden */
    pointer-events: none; /* Disable pointer events when hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
	transform: rotate3d(1,0,0, 90deg);
    padding: 20px;

}


.info p {
    display: block; /* Ensure block level so they take up the full width */
    width: 100%; /* Full width within the .info container */
    margin: 10px 0; /* Margin for spacing */
    padding: 15px 20px; /* Padding on sides for not touching the borders */
}

.info h3 {
	border-bottom: 1px solid #333333; /* Very dark gray border */
	display: block; /* Ensure block level so they take up the full width */
    width: 100%; /* Full width within the .info container */
    margin: 10px 0; /* Margin for spacing */
    padding: 15px 20px; /* Padding on sides for not touching the borders */
	
}

.gradient-silver-text {
  background: linear-gradient(to right, #c0c0c0, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
  display: inline; /* This makes sure the span does not break onto a new line */
}


/* Hover effect to show .info */
.grid-item:hover .info {
    opacity: 1; /* Make .info visible when parent is hovered */
}

/* Animation setup */
@keyframes in-top {
    from {transform: rotate3d(-1, 0, 0, 90deg);}
    to {transform: rotate3d(0, 0, 0, 0deg);}
}

@keyframes in-right {
    from {transform: rotate3d(0, -1, 0, 90deg);}
    to {transform: rotate3d(0, 0, 0, 0deg);}
}

@keyframes in-bottom {
    from {transform: rotate3d(1, 0, 0, 90deg);}
    to {transform: rotate3d(0, 0, 0, 0deg);}
}

@keyframes in-left {
    from {transform: rotate3d(0, 1, 0, 90deg);}
    to {transform: rotate3d(0, 0, 0, 0deg);}
}

@keyframes out-top {
    from {transform: rotate3d(0, 0, 0, 0deg);}
    to {transform: rotate3d(-1, 0, 0, 104deg);}
}

@keyframes out-right {
    from {transform: rotate3d(0, 0, 0, 0deg);}
    to {transform: rotate3d(0, -1, 0, 104deg);}
}

@keyframes out-bottom {
    from {transform: rotate3d(0, 0, 0, 0deg);}
    to {transform: rotate3d(1, 0, 0, 104deg);}
}

@keyframes out-left {
    from {transform: rotate3d(0, 0, 0, 0deg);}
    to {transform: rotate3d(0, 1, 0, 104deg);}
}

/* Correcting transform-origin for hover animations */
.grid-item.in-top .info {
    transform-origin: 50% 0%;
    animation: in-top 300ms ease forwards;
}

.grid-item.in-right .info {
    transform-origin: 100% 0%;
    animation: in-right 300ms ease forwards;
}

.grid-item.in-bottom .info {
    transform-origin: 50% 100%;
    animation: in-bottom 300ms ease forwards;
}

.grid-item.in-left .info {
    transform-origin: 0% 0%;
    animation: in-left 300ms ease forwards;
}

.grid-item.out-top .info {
    transform-origin: 50% 0%;
    animation: out-top 300ms ease forwards;
}

.grid-item.out-right .info {
    transform-origin: 100% 50%;
    animation: out-right 300ms ease forwards;
}

.grid-item.out-bottom .info {
    transform-origin: 50% 100%;
    animation: out-bottom 300ms ease forwards;
}

.grid-item.out-left .info {
    transform-origin: 0% 0%;
    animation: out-left 300ms ease forwards;
}







 /* Testimonials Styles */


#testimonials .testimonial-card  {
	 position: relative; /* Context for absolute positioning */
 background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
    backdrop-filter: blur(10px); /* Blur effect for the glassmorphism */
   border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
   color: #ffffff; /* White text for better readability */
    margin-bottom: 20px;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	  padding: 50px 30px 50px 30px; /* Space between image and border */
}

.testimonial-card-body {
	    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally */
    text-align: left; /* Center text */
}


#testimonials .testimonial-card:hover {
    transform: scale(1.05) translateY(-5px); /* Combines lifting and enlarging effect */
   box-shadow: 
    0 0 10px rgba(61, 207, 255, 0.1), /* Light blue with reduced brightness */
    0 0 20px rgba(118, 172, 234, 0.1), /* Medium blue with reduced brightness */
    0 0 30px rgba(102, 255, 255, 0.1); /* Cyan with reduced brightness */
}





.testimonial-image-wrapper {
	  position: absolute;
  top: -25px; /* Adjust this value to move the logo up, half outside the card */
  left: 50%; /* Center the logo */
  transform: translateX(-50%); /* Align the center of the logo with the center of the card */
  width: 60px; /* Adjust as needed */
  height: 60px; /* Adjust as needed */
  border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px; /* Space between image and border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
   z-index: 2;
}

.testimonial-image {
 width: 100%; /* Use 100% of the wrapper's size */
  height: 100%;
  border-radius: 50%;
  object-fit: cover; /* In case the image needs to be resized */
}





.stars {
	 display: flex;
    justify-content: flex-start; /* Aligns the footer content to the right */
	gap: 5px;
	padding-bottom: 20px 30px 20px 30px;
}


/* Checked Class */

.checked {
    color: orange;
}





/* Pricing Card Styles */



.pricing-card {
 background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
    backdrop-filter: blur(10px); /* Blur effect for the glassmorphism */
   border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
   color: #ffffff; /* White text for better readability */
    margin-bottom: 20px;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.pricing-card:hover {
    transform: scale(1.05) translateY(-5px); /* Combines lifting and enlarging effect */
   box-shadow: 
    0 0 10px rgba(61, 207, 255, 0.1), /* Light blue with reduced brightness */
    0 0 20px rgba(118, 172, 234, 0.1), /* Medium blue with reduced brightness */
    0 0 30px rgba(102, 255, 255, 0.1); /* Cyan with reduced brightness */
}

.pricing-card-header {
    display: flex;
   align-items: flex-start;
	padding-left: 30px;
	padding-top: 30px;
	 margin: 0; /* Sets margin to 0 to remove any default margins */
	 transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  
}



.pricing-card-body {
  padding: 30px;
}

.pricing-list {
  list-style: none;
  padding: 0;
	padding-top: 20px;
}

.pricing-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.pricing-span {
  font-size: 0.85em;
  color: #ADE8F4;
}

.pricing-card-footer {
  text-align: center;
	padding: 30px;
}

.pricing-card-footer button {
  width: 100%;
  padding: 10px 0;
  font-size: 18px;
}





/* Compare Plans Styles */


#compare-plans .compare-plans-card  {
 background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
    backdrop-filter: blur(10px); /* Blur effect for the glassmorphism */
   border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
   color: #ffffff; /* White text for better readability */
    margin-bottom: 20px;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#compare-plans .compare-plans-card:hover {
    transform: scale(1.05) translateY(-5px); /* Combines lifting and enlarging effect */
   box-shadow: 
    0 0 10px rgba(61, 207, 255, 0.1), /* Light blue with reduced brightness */
    0 0 20px rgba(118, 172, 234, 0.1), /* Medium blue with reduced brightness */
    0 0 30px rgba(102, 255, 255, 0.1); /* Cyan with reduced brightness */
}




.grid-container-compare-plans {
    display: grid;
    grid-template-columns: repeat(4, 25%); /* Creates a 4-column layout */
    align-items: center;
    gap: 20px; /* Adjust gap between columns if needed */
	padding: 5px 30px;
}



/* Contact Section Styles */


#connect .newsletter-subscribe-card,
#connect .request-a-quote,
#connect .contact-card  {
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
    backdrop-filter: blur(10px); /* Blur effect for the glassmorphism */
   border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
   color: #ffffff; /* White text for better readability */
    margin-bottom: 20px;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#connect .newsletter-subscribe-card:hover,
#connect .request-a-quote:hover,
#connect .contact-card:hover {
    transform: scale(1.05) translateY(-5px); /* Combines lifting and enlarging effect */
   box-shadow: 
    0 0 10px rgba(61, 207, 255, 0.1), /* Light blue with reduced brightness */
    0 0 20px rgba(118, 172, 234, 0.1), /* Medium blue with reduced brightness */
    0 0 30px rgba(102, 255, 255, 0.1); /* Cyan with reduced brightness */
}


.contact-card-header {
    display: flex;
   align-items: flex-start;
	padding-left: 30px;
	padding-top: 20px;
	 margin: 0; /* Sets margin to 0 to remove any default margins */
	 transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  
}

.contact-card-body {
padding: 30px;

}

.subscribe-card-body {
	    display: flex;
    flex-direction: column;
    height: 100%;
padding: 30px;

}

.request-a-quote-card-body {
padding: 30px;

}


.social-icon img {
  width: 20px; /* Adjust based on your icon size */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-icon:hover img {
  transform: scale(1.2); /* Enlarge icon */
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.5); /* Glowing effect */
}


.subscribe-card-body button {
  width: 100%;
  padding: 10px 0;
  font-size: 18px;
}


.request-a-quote-card-body button {
  width: 100%;
  padding: 10px 0;
  font-size: 18px;
}




/* Back to Top Button Styles */

#back-to-top {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    position: fixed;
    bottom: 30px;
    right: 30px;
    backdrop-filter: blur(20px);
    transition: background-color 0.3s, opacity 0.5s, visibility 0.5s, border-color 0.3s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    border-radius: 50%; /* Make it round */
    background-color: rgba(0, 0, 0, 0.5); /* Background color with 50% opacity */

    line-height: 40px; /* Align icon vertically */
}

#back-to-top::before { /* Change from ::after to ::before for FontAwesome icon */
    content: "\f077"; /* FontAwesome icon code */
    font-family: 'Font Awesome 5 Free'; /* Adjusted for Font Awesome 5 */
    font-weight: 900; /* Necessary for solid icons */
    font-size: 20px; /* Icon size */
    color: #ffffff; /* Icon color */
}

#back-to-top:hover {
    cursor: pointer;
    box-shadow: 0 15px 30px rgba(135, 206, 250, 0.25), 0 0 20px rgba(135, 206, 250, 0.5), 0 0 40px rgba(135, 206, 250, 0.5);
}

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


/* Enhanced shadow and glow effect */


.footer {
	 border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding: 20px;
  display: flex;
	align-content: center;
  justify-content: center; /* Center align the icons */
  gap: 20px; /* Spacing between icons */
}



.footer ul {
  display: flex;
  justify-content: center; /* Center the list items horizontally */
  gap: 20px; /* Adjust the space between icons */
}

.footer ul li {
  list-style: none;
}

.footer ul li a {
  width: 50px;
  height: 50px;
	  display: flex; /* Use flexbox for centering */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
      background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent black for the glass effect */
    backdrop-filter: blur(10px); /* Blur the background behind the link */
	 border: 1px solid rgba(255, 255, 255, 0.25); /* Light white border for the glass effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  text-align: center;
  line-height: 80px;
  font-size: 25px;
  margin: 0 10px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: transform .5s; /* Smooth transition for hover effect */
  z-index: 1;
}



.footer ul li a .icon {
  position: relative;
  color: #fff;
  transition: color .5s, transform .5s; /* Smooth transition for color and rotation */
  z-index: 3;
}

.footer ul li a:hover .icon {
  color: #121212;
  transform: rotateY(360deg); /* Rotate icon on hover */
}

.footer ul li a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: top .5s; /* Smooth transition for hover effect */
  z-index: 2;
}

.footer ul li a:hover:before {
  top: 0; /* Move the colored background into view */
}

/* Primary Color Adjustments with Transparency and Color Variations */

.footer ul li:nth-child(1) a:before {
    background: rgba(118, 172, 234, 0.9); /* Adjusted transparency to 90% */
}

.footer ul li:nth-child(2) a:before {
    background: rgba(170, 100, 150, 0.8); /* Slightly darker and 80% transparency */
}

.footer ul li:nth-child(3) a:before {
    background: rgba(155, 120, 190, 0.8); /* Even darker and 70% transparency */
}

.footer ul li:nth-child(4) a:before {
    background: rgba(85, 100, 160, 0.8); /* Darkest and 60% transparency */
}





/* ===================== Base Styles ===================== */
/* Add your base styles here, which apply to all screen sizes */

/* ===================== Media Queries ===================== */

/* Medium screens (tablets, large phones) */
@media screen and (min-width: 768px) and (max-width: 991px) {

	    .section-heading {
        text-align: left; /* Center align headings */
        font-size: calc(4rem + 1vw); /* Responsive font size */
    }
	
		.hero-h2 {
        text-align: center; /* Center the text */ 
		order: 0; /* Ensure text stays above the image */
    }
	
	 .hero-text-col, .hero-h1 {
        text-align: center; /* Center the text */ 
		order: 0; /* Ensure text stays above the image */
    }
    .hero-buttons {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center buttons horizontally */
        width: 100%; /* Expand buttons to full width */
    }
    .hero-buttons button {
        width: 100%; /* Make each button full width */
        margin-top: 0px; /* Add space between buttons */
    }
	
	
	  .hero-image-col {
        width: 100%; /* Each column takes up the full container's width */
        position: relative; /* Resetting position for small screens */
        flex: none; /* Override the flex-grow */
    }

    .hero-image-col {
        order: 1; /* Make image go below the text on small screens */
    }
	
	      .container-hero {
        flex-direction: column; /* Stack elements vertically on small screens */
        align-items: center; /* Center items horizontally */
			  
    }
	
    .grid-container,
    .grid-container-2col,
    .grid-container-3col,
    .grid-container-gallery {
        grid-template-columns: 100%; /* Stack elements vertically */
    }
	
    .grid-container-gallery {
        grid-template-columns: repeat(2, 1fr); /* Two columns for gallery */
    }

	

    .nav-links,
    .nav-social-media-icons,
    .search-input {
        display: none; /* Hide navigation elements */
    }
    .nav-btn {
        display: block; /* Show the hamburger menu */
    }
    .nav.responsive .nav-links {
		margin-top: 20px;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .nav.responsive .nav-links li a {
        display: block;
        text-align: left;
    }

    .nav.responsive .search-input {
        display: block;
        text-align: left;
		width: 100%;
		margin-bottom: 20px;
    }
	
	
.nav.responsive .nav-social-media-icons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    list-style: none; /* Removes default list styling */
    padding: 0; /* Removes default padding */
}

.nav.responsive .nav-social-media-icons li {
    padding: 10px 0px; /* Adds horizontal padding */
}

.nav.responsive .nav-social-media-icons a {
    /* Any additional styles for the anchor tags if needed */
}
	
	

    /* Additional medium screen adjustments */
}

/* Large screens (desktops) */
@media screen and (min-width: 992px) {
    /* Adjustments for large screens */
    .grid-container,
    .grid-container-2col {
        grid-template-columns: repeat(2, 1fr); /* Keep two columns layout */
    }
    .grid-container-3col {
        grid-template-columns: repeat(3, 1fr); /* Three columns layout */
    }

    .grid-container-gallery {
        grid-template-columns: repeat(4, 1fr); /* Four columns for gallery */
    }

	
	
    .section-heading {
        text-align: left; /* Center align headings */
        font-size: calc(5rem + 1vw); /* Responsive font size */
    }
    /* Additional large screen adjustments */
}

/* Small screens (phones) */
@media screen and (max-width: 767px) {
    /* Adjustments for small screens */
    .grid-container,
    .grid-container-2col,
    .grid-container-3col,
    .grid-container-gallery {
        grid-template-columns: 100%; /* Stack elements vertically */
    }

	
      .container-hero {
        flex-direction: column; /* Stack elements vertically on small screens */
        align-items: center; /* Center items horizontally */
    }
	
	.hero-h2 {
        text-align: center; /* Center the text */ 
		order: 0; /* Ensure text stays above the image */
    }
	
	 .hero-text-col, .hero-h1 {
        text-align: center; /* Center the text */ 
		order: 0; /* Ensure text stays above the image */
    }
    .hero-buttons {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center buttons horizontally */
        width: 100%; /* Expand buttons to full width */
    }
    .hero-buttons button {
        width: 100%; /* Make each button full width */
        margin-top: 0px; /* Add space between buttons */
    }
	
	
	
	
	

  .hero-image-col {
        width: 100%; /* Each column takes up the full container's width */
        position: relative; /* Resetting position for small screens */
        flex: none; /* Override the flex-grow */
    }

    .hero-image-col {
        order: 1; /* Make image go below the text on small screens */
    }

	
	
	    .section-heading {
        text-align: left; /* Center align headings */
        font-size: calc(4rem + 1vw); /* Responsive font size */
    }
	
	
	    .info h3 {
        font-size: calc(1.5rem + 2vw); /* Increase size a bit more on smaller screens */
    }
    
    .info p {
        font-size: calc(0.8rem + 2vw); /* Slightly larger than normal text for readability */
    }
	
	
    .nav-links,
    .nav-social-media-icons,
    .search-input {
        display: none; /* Hide navigation elements */
    }
    .nav-btn {
        display: block; /* Show the hamburger menu */
    }
    .nav.responsive .nav-links {
		margin-top: 20px;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .nav.responsive .nav-links li a {
        display: block;
        text-align: left;
    }

    .nav.responsive .search-input {
        display: block;
        text-align: left;
		width: 100%;
		margin-bottom: 20px;
    }
	
	
.nav.responsive .nav-social-media-icons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    list-style: none; /* Removes default list styling */
    padding: 0; /* Removes default padding */
}

.nav.responsive .nav-social-media-icons li {
    padding: 10px 0px; /* Adds horizontal padding */
}

.nav.responsive .nav-social-media-icons a {
    /* Any additional styles for the anchor tags if needed */
}

}