* {
    margin: 0;
    padding: 0;
}

header {
    background-color: rgb(37, 36, 35, 0.8);
    text-align: center;
}

/*@keyframes enlarge-image {
    0% {transform: scale(1);}
    50% {transform: scale(1.25);}
    100% {transform: scale(1);}
} 
*/


.logo-container {
    text-align: center;
    background-color: teal;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    padding: 0px;     
    /* display: grid; 
    grid-template-rows: auto 1fr auto; */
    min-height: 100vh;
    /* new per front end web design bot 2025-12-18 */
   /* background: #181B1F;  */
    background: #181d27;
    color: #F5F6F7; 
} 

body p {
    font-size: 1.25rem;
}

/* .container {
    justify-content: stretch;
    background: cadetblue;
    display: flex;
    flex-flow: row wrap;
} */

/* .container li {
    list-style-type: none;
    padding: 5px;
    flex: auto;
}

.container li a:hover {
    text-shadow: black 0px 0px 20px;
    font-weight: bolder;
}

.container a {
    display: inline-block  ;
    text-align: center;
    padding: 10px 15px;
    margin: 0px 5px;
    text-decoration: none;
    color: white;
} */

/*Navbar styles */
nav ul {
    justify-content: stretch;
    background: cadetblue;
    display: flex;
    flex-flow: row wrap;
}

nav li {
    list-style-type: none;
    padding: 5px;
   /* display: inline-flex;    */
    flex: auto;
    font-size: 1.25rem;
}

nav a:hover {
    /*background-color: #45a049;  */
    text-shadow: black 0px 0px 20px;
    font-weight: bolder;
}

nav a {
    display: inline-block  ;
    text-align: center;
    padding: 10px 15px;
    margin: 0px 5px;
    text-decoration: none;
    color: white;
}

/* Override Bootstrap's default navbar padding */
.navbar {
    --bs-navbar-padding-y: 0px;
    --bs-navbar-padding-x: 0px;
}

#navdiv {
    padding: 0px;
    max-width: 100%;
    background-color: cadetblue;
}

main {
   /* background: linear-gradient(rgba(24, 29, 39, 0.8), rgba(24, 29, 39, 0.8)); */
    padding: 10px;
    min-height: 10px; 
    display: grid;
    grid-gap: 10px;
}

main::before {
    content: "";
    background-image: url('../img/connected-earth-3537401.jpg') ;
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    position: fixed;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%; 
    z-index: -1; 
}

main a {
    color: skyblue;     /* current background is dark blue, so light blue is needed to be visible */
}

main p {
    font-size: 1.25rem;
}

section {
    border-radius: 10px;
}

section h2 {
    text-align: center;
    padding: 5px;
}

section h3 {
    text-align: left;
    padding: 5px;
}

section p {
    padding: 5px;
    text-align: left;
    font-size: 1.25rem;
}

.focus {
    grid-column: 1 / span 3;
    height: auto;
}

/*.focus:hover {
    box-shadow: black 0px 0px 20px;
} */

.secondary {
   /* background: linear-gradient(rgba(24, 29, 39, 0.8), rgba(24, 29, 39, 0.8)), url('../images/hero-bg.jpg') no-repeat center center; */
    width: auto;
    height: auto;
    display: block;
    margin: 10px 0px; 
}

/* .secondary img {
    padding: 5px;
    max-width: 50px;
    max-height: 50px;
} */

.secondary p:not(:first-of-type) {
    display: none;
}

/*.secondary:hover {
    box-shadow: black 0px 0px 20px;
} */

.secondary:hover p:not(:first-of-type) {
    display: block;
}

/* footer {
    background-color: rgb(37, 36, 35, 0.8);
    color: white;
    padding: 5px;
    height: auto; 
    vertical-align: middle;
    display: flex;
    justify-content: space-between;   
    list-style-type: none;
}

footer img {
    justify-content: left;
    padding: 5px;
    box-sizing: content-box;
}

footer p {
    justify-content: right;
    align-items: center;
    padding: 5px;
}

footer ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style-type: none;
}

footer ul li {
    margin: 0px 10px;
    padding: 10px 10px; 
}
 
footer ul li a{
    color: white;
    font-size: 1.25rem;
    text-decoration: none;
}

footer ul li a:hover {
    text-shadow: #F5F6F7 0px 0px 20px;
    font-weight: bolder;
} 
*/
footer a {  
    color: white;  
    font-size: 1.25rem;  
    text-decoration: none;  
    transition: text-shadow 0.2s, font-weight 0.2s;  
}  
footer a:hover, footer a:focus {  
    text-shadow: #F5F6F7 0px 0px 20px;  
    font-weight: bolder;  
}  



/* Service List Styles */
  
.service-list {  
  list-style: none;  
  padding: 0;  
  margin: 0.5rem auto;  
}  
  
.service-item {  
  background: linear-gradient(rgba(24, 29, 39, 0.8), rgba(24, 29, 39, 0.8)); 
  border-bottom: 1px solid #2C3238;  
  display: flex;
  flex-direction: column;
}  
  
.service-toggle {  
  width: 100%;  
  text-align: left;  
  background: none;  
  border: none;  
  color: inherit;  
  font-size: 2rem;  
  padding: 1rem;  
  cursor: pointer;  
  display: grid;  
  grid-template-columns: auto 1fr; /* First column for chevron (auto width), second for text (takes remaining space) */  
  /*flex-direction: column;*/
  /*justify-content: space-between;     */
  grid-template-areas:   
        "chevron title"  
        "chevron description"; /* Define areas for chevron, title, and description */  
  
  align-items: center;  
  margin: 10px;
}  

.service-toggle:hover {  
  background-color: #000068;  
}
  
.service-toggle .chevron {  
  grid-area: "chevron"; /* Place chevron in its defined area */
    border: solid #A7AFBD;  
  border-width: 0 3px 3px 0;  
  display: inline-block;  
  padding: 6px;  
  transform: rotate(-45deg); /* right arrow */  
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;  
  margin-right: 10px; /* Spacing from text */ 
}  

.service-toggle .service-title {  
    grid-area: title; /* Place title in its grid area */  
    font-size: 2rem; /* Match existing font size */  
}  

/* Added by Dan for better alignment */

.service-toggle p {
    grid-area: description; /* Place paragraph in its grid area */  
    font-size: 1.25rem; 
    margin: 0; /* Reset margin to avoid extra spacing */  
}
  
.service-item.open .service-toggle .chevron {  
    transform: rotate(45deg); /* down arrow */  
    border-color: #00C37A;  
    box-shadow: 0 0 8px #3476df;  
    animation: highlightFade 1.2s; 
}  
  
.sub-services {  
  display: none;  
  /*background: #22262B;  */
  padding: 1rem 1.5rem;  
}  
  
.service-item.open .sub-services {  
  display: block;  
  animation: fadeIn 0.5s;  
}  
  
@keyframes fadeIn {  
  from { opacity: 0; }  
  to { opacity: 1; }  
}  
@keyframes highlightFade {  
    0% { box-shadow: 0 0 24px #3476df; }  
    100% { box-shadow: 0 0 8px #3476df; }  
} 

@keyframes pulseChevron {
0% { transform: rotate(45deg) scale(1); }
50% { transform: rotate(45deg) scale(1.2); }
100% { transform: rotate(45deg) scale(1); }
}
/*
.service-item.open .service-toggle:hover .chevron {
animation: pulseChevronOpen 1s infinite;
}

@keyframes pulseChevronOpen {
0% { transform: rotate(45deg) scale(1); }
50% { transform: rotate(45deg) scale(1.2); }
100% { transform: rotate(45deg) scale(1); }
} */
  
.service-toggle.invite-click {  
    animation: pulse 2s ease-in-out 2;  
    background-color: rgba(0, 123, 255, 0.2); /* Subtle blue tint */  
}  

.sub-service {  
  margin-bottom: 1rem;  
}  
  
.short-desc {  
  color: #A7AFBD;  
  font-size: 0.98rem;  
}  

.content-block img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 40vh;
}

.content-block ul li {
    margin-left: 20px;
    list-style-type: none;
}


.hero-section {
   /* background: linear-gradient(rgba(24, 29, 39, 0.8), rgba(24, 29, 39, 0.8)),  no-repeat center center; /*url('../images/hero-bg.jpg')*/
    background-size: cover;
    color: white;
    text-align: center;
    padding: 25px 20px;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hero-image {  
    display: block;  
    margin: 2rem auto 0 auto;    /* Center the image below your hero content */  
    max-width: 100vw;            /* Prevent image from being too large */  
    width: 100%;                 /* Responsive scaling */  
    height: auto;                /* Maintain aspect ratio */  
    border-radius: 8px;          /* Optional: Slightly rounded corners for modern look */  
    box-shadow: 0 8px 32px rgba(0,0,0,0.12); /* Soft shadow for depth */  
    opacity: 0.93;               /* Slight transparency for subtlety */  
    transition: box-shadow 0.3s, opacity 0.3s;  
}  
  
.hero-image:hover {  
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);  
    opacity: 1;  
}  


/* Service Cards Grid Layout */  
.service-cards {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: center;  
    gap: 2rem;  
    margin: 2.5rem 0;  
}  
  
.service-card {  
    background: teal;  
    border-radius: 12px;  
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);  
    padding: 2rem 1.5rem 1.5rem 1.5rem;  
    max-width: 250px;  
    text-align: center;  
    transition: transform 0.2s, box-shadow 0.2s;  
    opacity: 0;  
    transform: translateY(40px) scale(0.98);  
    will-change: opacity, transform;  
    pointer-events: auto;  
    cursor: pointer;  
    text-decoration: none;  
    color: inherit;  
}  
  
/* Animated state */  
.service-card.visible {  
    opacity: 1;  
    transform: translateY(0) scale(1);  
    transition: opacity 0.7s cubic-bezier(.25,.8,.25,1), transform 0.7s cubic-bezier(.25,.8,.25,1);  
}  
  
/* Icon styling */  
.service-card img {  
    max-height: 54px;  
    max-width: 96px;  
    margin-bottom: 1rem;  
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));  
}  
  
/* Card hover effect */  
.service-card:hover {  
    transform: translateY(-10px) scale(1.04);  
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
    background: steelblue;    
}  
  
/* Responsive adjustments */  
@media (max-width: 900px) {  
    .service-cards {  
        flex-direction: column;  
        align-items: center;  
    }  
    .service-card {  
        max-width: 90vw;  
    }  
}  

#approach > div {  
  max-width: 1060px;  
  margin-left: auto;  
  margin-right: auto;  
  text-align: left;  
  padding-left: 24px;  
  padding-right: 24px;  
}  

.timeline-step {
   /* background: linear-gradient(rgba(24, 29, 39, 0.8), rgba(24, 29, 39, 0.8));    */
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    font-size: 1.25rem;
}

.cta-section p {
    text-align: center;
    padding: 25px 20px;
    border-radius: 10px;
}

.cta-buttons {
    text-align: center;
}

/* Benefits Grid Layout for a carousel effect */
.benefits-grid {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  
  gap: 1.5rem;  
  margin-top: 1.5rem;  
}  
  
.benefit-card {  
  background: teal;  
  border-radius: 8px;  
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);  
  text-align: center;  
  padding: 1.5rem 1rem;  
  transition: box-shadow 0.2s;  
}  
  
.benefit-card:hover {  
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);  
}  
  
.benefit-icon {  
  max-width: 48px;  
  max-height: 48px;  
  margin-bottom: 1rem;  
}  

/* Carousel Layout for horizontal scrolling benefits */

.carousel {  
  overflow: hidden;  
  position: relative;  
  width: 100%;  
  /* Optional: set a max width */  
  max-width: 600px;  
  margin: 0 auto;  
}