/*(232,240,246,1)*/
/*(250,252,255,1)*/
/*(200,210,220,1)*/

html {
  scroll-behavior: smooth;
	scroll-padding-top: 100px;
	box-sizing: border-box;
	overflow-x: hidden;
}
body {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	/*background: linear-gradient(180deg, #fdf0c7, #fff9f1);*/
	color: #333;
	overflow-x: hidden;
	background-color: rgba(250,252,255,1);
}
a:checked,
a:link,
a:visited {
    text-decoration: none;
    color: inherit;
}
/*------------ color schemes ---------------*/
.header .screen_brand,
.header .mobile_brand,
.gallery,
.contact,
.footer {
	background-color: rgba(200,210,220,1);
}

.hero,
.about {
	background-color: rgba(232,240,246,1);
}

.header nav {
	background-color: rgba(250,252,255,1);
}

/* ---------- makes sections appear and disappear ---------- */
.scroll_fade_in_out {
  opacity: 0;
	transform: scale(0.5);
  transition: opacity .6s ease, transform .6s ease;
}
.scroll_fade_in_out.visible {
  opacity: 1;
	transform: scale(1);
}
.scroll_fade_in_out.fade_out {
  opacity: 0;
	transform: scale(0.5);
}
/*---------- back to top button ------------*/
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #ff7b00;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
	overflow: hidden;
  display: none;
  z-index: 1000;
	box-sizing: border-box;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
#backToTop:hover {
  background-color: #ff9900;
  transform: scale(1.05);
	box-shadow: 0 2px 0 rgba(0,0,0,0.5);
}


/*------------ header slider -----------*/
.top_slider {
  width: 100%;
  height: 120px; /* adjust as needed */
  overflow: hidden;
  position: relative;
  background: #000; /* or transparent */
}

.top_slider_track {
  display: flex;
  width: max-content;
  animation: slideLeft 30s linear infinite;
}

.top_slider img {
  height: 120px;     /* match slider height */
  width: auto;
  object-fit: cover;
  flex-shrink: 0;
}

/* Infinite sliding from right → left */
@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}