title{font-family: "Roboto", serif; font-weight: 900;}
title, p.subtitle{line-height: 2.2rem;}

section.open{
	--x: 90%; /* Initial horizontal position */
  --y: 80%; /* Initial vertical position */
	background: radial-gradient(circle at var(--x) var(--y), rgba(163,218,231,1) 0%, rgba(8,14,25,1) 88%);
	height: 100vh;
  background-size: cover;
  background-position: 100% 50%;
  position: relative;
  
}

section.open p.title{font-family: "Roboto", serif; font-weight: 900;}

.sticky-CTA{
  font-family: "Shadows Into Light", serif;
  color:#efefef;
  right: 0;
  padding: 10px;
  border-radius: 5px;
  float: right;
  transform: rotate(5deg);

}


section.clients{
	background: rgba(8,14,25,1);
    background-size: cover;
    height: 100vh;
}

section.open2{
	--x: 90%; /* Initial horizontal position */
  	--y: 80%; /* Initial vertical position */
	background: radial-gradient(circle at var(--x) var(--y), rgba(163,218,231,1) 0%, rgba(8,14,25,1) 88%);
	height: 100vh;
    background-size: cover;
    background-position: 100% 50%;
}

.scroll-section {
  height: 100vh; /* Full viewport height */
  overflow: hidden; /* Prevent default scrolling */
  position: relative;
}

.scroll-header {
  height: 10vh;
  position: absolute;
  top: 30;
  width: 100%; /* Make it span the full width */
  text-align: center; /* Center the text */
  color: #333;
  line-height: 10vh; /* Optional: vertically align single-line text */
  z-index: 10;
}

.horizontal-scroll {
  display: flex;
  position: relative; /* Prevent it from interacting with the sticky header */
  height: 80vh; /* Remaining space below the header */
  top: 0; /* Reset any offset that may be applied by sticky positioning */
  width: max-content; /* Ensure horizontal scrolling works */
  top: 10vh; /* Offset to match the header's height */
}

.panel {
  flex: 0 0 30vw; /* Each panel takes the full viewport width */
  height: 100%; /* Full height of the viewport */
  justify-content: center;
  align-items: center;
  background-color: #333;
  color: #fff;
  margin-right: 40px;
}

.panel:nth-child(odd) {
  background-color: #444;
}
.panel:nth-child(even) {
  background-color: #555;
}


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

/* Mobile (up to 768px) */
@media screen and (max-width: 768px) {
  /* mobile-specific styles */
  .panel {
  	flex: 0 0 95vw; /* Each panel takes the full viewport width */
	}
}

/* Tablet (769px and above) */
@media screen and (min-width: 769px) {
  /* tablet-specific styles */
  .panel {
  	flex: 0 0 47vw; /* Each panel takes the full viewport width */
	}
}

/* Desktop (1024px and above) */
@media screen and (min-width: 1024px) {
  /* desktop-specific styles */
  .panel {
  	flex: 0 0 30vw; /* Each panel takes the full viewport width */
	}
}

/* Widescreen (1216px and above) */
@media screen and (min-width: 1216px) {
  /* widescreen-specific styles */

}

/* Full HD (1408px and above) */
@media screen and (min-width: 1408px) {
  /* full HD-specific styles */

}

/*#A3DAE7
#080E19*/