* {
  margin: 0;  padding: 0;  box-sizing: border-box;  text-decoration: none;}
.slider-container {  width: 100%;  position: relative; color: #fff; display: block;}
.slide {  width: 100%;  display: none; }
.slide-image {  width: 100%;  height: 100vh;  object-fit: cover;  filter: brightness(0.6); display: block;}
.slider img{display: block;}
.slide-content {  position: absolute;  top: 0;  left: 0;  z-index: 5;  width: 100%;  height: 100%;  display: flex;
  flex-direction: column;  align-items: center;  justify-content: center;
  gap: 1rem;  text-align: center;  padding: 1rem;}
.slide-title {  width: 100%; max-width: 60rem; font-size: 60px; line-height: 70px; font-weight: 200; }
.slide-desc {  width: 100%;  max-width: 60rem; font-size: 34px; line-height: 44px; font-weight: 500;}
.slide-btn {  color: black;  background-color: white;  display: flex;  align-items: center;  justify-content: center;
  gap: 0.5rem;  font-size: 16px;  font-weight: bold;  text-transform: uppercase; margin-top: 2rem;  
  padding: 1rem 2rem;  transition: ease 0.3s;}
.slide-btn:hover {  gap: 1rem; background: #e9473f; color: #fff;}
.slide-number-container {  position: absolute;  bottom: 1rem;  left: 1rem;  z-index: 5;  font-size: 1.5rem;  display: flex; font-weight: 200;
  gap: 0.5rem;  align-items: center;  color: #fff;  letter-spacing: 0.2rem;}
.slide-number-container hr {  width: 3rem;  transform: rotate(130deg);  border-color: #fff;}
.slider-nav {  position: absolute;  bottom: 1rem;  right: 1rem;  z-index: 5;  display: flex;
  align-items: center;  justify-content: center;  gap: 1rem;}
.slider-nav-btn {  cursor: pointer;  background-color: rgba(211, 211, 211, 0.226);  color: white;
  font-size: 1.5rem;  padding: 0.5rem;  display: flex;  align-items: center;  justify-content: center;  
  transition: ease 0.3s;}
.slider-nav-btn:hover {  background-color: white;  color: black;}
.dot-container {  position: absolute;  bottom: 1rem;  left: 0;  z-index: 4;  width: 100%;  display: flex;
  align-items: center;  justify-content: center;  gap: 0.5rem;}
.dot {  cursor: pointer;  height: 1rem;  width: 1rem;  background-color: rgba(211, 211, 211, 0.226);
  border-radius: 50%;  display: inline-block;  transition: ease 0.3s;}
.active, .dot:hover {  background-color: white;}
.fade {  animation-name: fade;  animation-duration: 1s;}
	.slide-number-container p{margin-top: 0;}

@keyframes fade {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}
@media only screen 
and (max-width : 700px){
	.slide-image{height: auto; width: 100%; }
	.slide-number-container, .dot-container{display: none;}
	.slide-content { top: 10%; }
	.slide-title {font-size: 22px; line-height: 24px; font-weight: 500; }
	.slide-desc {font-size: 16px; line-height: 20px; margin-top: 0;}
	.slide-btn { gap: 0.2rem;  font-size: 14px; margin-top: 1rem; padding: 10px;}
}
@media only screen 
and (min-width : 701px)
and (max-width : 1149px) {
	.slide-image{height: 60vh; min-height: 400px;}
	.slide-title {font-size: 40px; line-height: 50px;}
	.slide-desc {font-size: 20px; line-height: 28px; margin-top: 5px;}
	.slide-content { top: 10%;}
	.slide-number-container{font-size: 18px; }
	.slide-number-container hr {width: 1.2rem;}
}
@media only screen 
and (min-width : 1150px)
and (max-width : 1599px) {
	.slide-image{height: 60vh; min-height: 750px;}
	.slide-title {font-size: 50px; line-height: 60px;}
	.slide-desc {font-size: 26px; line-height: 30px; margin-top: 5px;}
	.slide-content { top: 5%;}
}