body{
    overflow-x: hidden;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: black;
    
    
}

.navbar {
  background-color: #333333; /* Gray background color */
  backdrop-filter: blur;    
  padding: 25px;
  padding-bottom: 10px;
   
  display: flex;
  margin: -10px;
  justify-content: space-between;
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 100;
}
  
.logo img {
    max-height: 40px; /* Adjust the height as needed */
}
  
.nav-links a {
    text-decoration: none;
    color: #fff; /* White text color */
    margin: 0 15px;
}
  
.nav-links a:hover {
    color: gray;
}


.landing-section {
  background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1)), url('images/landing1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  color: #fff; /* Text color on the landing section */
  text-align: center;
  
  
   
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

 
  padding: 20px;  
    
}
  
.landing-section h1 {
  
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;;
  font-size: 2.5em;
  font-weight: 100;
  margin-bottom: -12px;
  letter-spacing: 10px;
  bottom: 0;
  

  margin-top: 2%;
 
  
}
  
.landing-section p {
  
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 100;
  font-size: 1.3em;
  
  bottom: 0  ;
}

.bn32 {
  border-color:rgba(0,0,0,0);
  border-style: none;
  padding: 0.6em 2.3em;
  cursor: pointer;
  font-size: 1em;
  color: #2c2b2b;
  background-image: linear-gradient(45deg, rgb(235, 178, 64, 252) 50%, transparent 50%);
  background-position: 25%;
  background-size: 400%;
  -webkit-transition: background 500ms ease-in-out, color 500ms ease-in-out;
  transition: background 500ms ease-in-out, color 500ms ease-in-out;
}

.bn32:hover {
  color: #050505;
  background-position: 100%;
}

.about-section{
  background-image:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,1)), url('images/landing.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(1.5);

  color: #fff; /* Text color on the landing section */
  text-align: center;
   
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  flex-wrap: wrap;

   
  padding: 20px;  

}





.borderless-table {
  border-collapse: collapse;
  max-width: 100%;
  margin-top: 7%;
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  
  
}

.borderless-table td {
  padding: 15px;
  width: 33%;
  
  min-width: 200px;
 
  flex: 33.33%;
  max-width: 33.33%;
  box-sizing: border-box;
  

  

}

.tile {
  text-align: center;

 
}

@media screen and (max-width:960px) {
  .borderless-table td{
    flex: 100%;
    width: 100%;

    
    align-items: center;

  }
  }
  
  @media screen and (max-width:700px) {
    .borderless-table td{
    flex: 100%;
    max-width: 100%;

    display:flex;
    flex-direction: column;
    flex-wrap: wrap;

    align-items: center;
  }
}



.tile h2 {
  margin: 0;
  font-size: 2em;
  font-weight: 100;
  font-weight: 100;  
}

.tile img {
  max-width: 100%;
  height: 20vh;
  margin-top: 10px;
}

.tile p {
  margin: 10px 0 0;
  font-size: 1em;
  text-align: justify;
  margin: 40px;
  font-weight: 20;  
}

.slanted-container {
  display: flex;
  overflow: hidden;
  height: 85vh;
  
}

.section {
  flex: 1;

 

  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: filter 0.9s ease-in-out;
  
  filter: brightness(0.5);
  -moz-transition: padding-right .9s ease-in-out;
     -o-transition: padding-right  .9s ease-in-out;
     -webkit-transition: padding-right  .9s ease-in-out;
     transition: padding-right  .9s ease-in-out;
}





.section:hover {
  filter: brightness(1);
  padding-right: 200px; 
 
  
  
}

.section h1{
  
  color: #00000000;
}

.section p{
  
  color: #00000000;
}


.section:hover h1{
  
  
  color: #fff;
  
  
}
.section:hover h2{
  
  
  color: #fff;
  
}


.section:before {
  content: '';
  display: flex;
  justify-content: left;
  position: absolute;

  top: 0;
  left: -100vw;
  width: 100vw;
  height: 100%;
  background: linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0.7));
  
  /*background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.5) 60%, transparent 60%);*/
  pointer-events: none;
}

.content {
  display: flex;
  align-items: left;
  justify-content: left;
  height: 100%;
  
  padding-left: 5%;

  flex-direction: column;
  

}


.content h1{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 7vh;
  font-weight: 100;
  
  color: #00000000;

}

.content h2{
 
 
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 2.5em;
  font-weight: 100;
  text-align: center;
  
  letter-spacing: 10px;
  


}

.content p{

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 2.5vh;
  font-weight: 100;
  color: #00000000;
  
}
.section:hover h1{
  color: #fff;
}
.section:hover h2{
  color: #00000000;  
}
.section:hover p{
  color: #fff;
}

@media screen and (max-width:700px) {
  .slanted-container {    
    height: 0px;
    
  }
  
}









.slanted-container-mobile {
  flex: 100%;
  max-width: 100%;

  display:flex;
  flex-direction: column;
  flex-wrap: wrap;

  align-items: center;
  height: 100%;
  
  
  
}
.content-mobile{
  margin:7%;
     
}

.section-mobile{
  filter: brightness(1);
  background-size: 200%;
  background-repeat: no-repeat;
  height: 40vh;
  
}

.section-mobile:hover {
  filter: brightness(1);
  
  
}

.section-mobile h1{
  font-size: 3vh;
  color: #fff;
}

.section-mobile h2{

  color: #ffffff00;
}

.section-mobile p{
  
  color: #ffffff;
  font-size: 2vh;
}

.section-mobile:before {
  content: '';
  display: flex;
  justify-content: left;
  position: absolute;

  background: linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0.7));
  background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.7));
  /*background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.5) 60%, transparent 60%);*/
  pointer-events: none;
}


@media screen and (min-width: 700px) {
  .slanted-container-mobile {
   
    height: 0px;
    width: 0px;

    
  }
  .section-mobile{

    height: 0px;
    width: 0px;
  }
  .section-mobile h1{
    
    font-size: 0;
    color: #00000000;
  }
  .section-mobile h2{
    font-size: 0;
    color: #00000000;
  }
  .section-mobile p{
    font-size: 0;
    color: #00000000;
  }
}






/*
.carousel{
  background-image: url("images/reviews.jpg");
  
  height: 90vh !important; 
  perspective: 250px;  
  padding: 0px;
  
  
}

.carousel h1{
  
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 2.5em;
  font-weight: 100;
  text-align: center;
  margin:5vh;
 

}
.carousel .carousel-item {
  width: 60vw !important;
  background: #fff;
  padding: 5vw;
  height: 70vh !important;
  text-align: center;
  border-radius: 10px;
  margin-top:2vh;
  
}
.img-area {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;

}
      
.img-area img{
  width: 100%;
}
      
      
.testi p {
  color: #262626;
  font-size: 1.2em;
  line-height: 1.9;
  }
      
.testi h4 {
  font-size: 1.7em;
  margin: 0;
  color: #000;
}
*/     





.review{
  height:100%;
  font: normal 1em/1.5 "Open Sans";
  /*background:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,0)), url(images/reviews.jpg );*/
  background-image: url(images/reviews.jpg);
  
  background-size:cover;
  box-sizing:border-box;
  margin-top: -42px;
  padding-bottom: 30px;

}

.review .container{
  width:50vw;
  min-height:315px;
  margin:0 auto;
  position:relative;
  padding-bottom:30px;
  overflow:hidden;
  /*background: rgba(0,0,0,0.7);*/
}

.review a{
  color:#ccc;
}
.review h1{
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 3rem;
  font-weight: 100;
  text-align: center;
  padding: 20px;
  letter-spacing: 10px;
  
}
.review h2{
  
  margin:15px 0 5px;
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 3rem;
  font-weight: 100;
  text-align: left;
  letter-spacing: 5px;
}
.review h6{
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.2rem;
  font-weight: 100;
  text-align: center;
  margin:0;
}

.review input[type="radio"] {
position: absolute;
width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
.review label{
  display:block;
  width:32%;
  border: 4px solid white;
  position:absolute;
  bottom:5px;
  cursor: pointer;
  transition: border-color 0.3s linear;
}

.review label.second{
  left:34%;
}
.review label.third{
  left:68%;
}

.review blockquote{
  margin:0;
  padding:30px;
  width:50vw;
  background-color: #DB532B;
  color:white;
  box-shadow: 0 5px 2px rgba(0,0,0,0.1);
  position:relative;
  transition: background-color 0.6s linear;
}

.review blockquote:after { 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  top: 100%; 
  border: solid transparent; 
  border-top-color: #DA532B;
  border-left-color:#DA532B;
  border-width: 10px; 
  left: 10%; 
} 
#second:checked ~ .two blockquote {
  background-color:rgb(0, 124, 128);
}
.review .two blockquote:after{
  border: solid transparent; 
  border-top-color: rgb(0, 124, 128);
  border-left-color:rgb(0, 124, 128);
  border-width: 10px;
}
#third:checked ~ .three blockquote{
  background-color:#54885F;
}
.review .three blockquote:after{
  border: solid transparent; 
  border-top-color: #54885F;
  border-left-color: #54885F;
  border-width: 10px;
}
.review .quotes{
  position:absolute;
  color:rgba(255,255,255,0.5);
  font-size:5em;
}
.review .leftq{
  top:-25px;
  left:5px;
}
.review .rightq{
  bottom:-10px;
  right:5px;
}
.review img{
  float:left;
  margin-right: 20px;
}
.review .slide{
  position:absolute;
  left:-100%;
  opacity:0;
  transition: all 0.6s ease-in;
}

#first:checked ~ label.first {
  border-width:6px;
  border-color:#DB532B;
}
#second:checked ~ label.second {
  border-width:6px; border-color:rgb(0, 124, 128);
}
#third:checked ~ label.third {
  border:6px solid #54885F;
}

#first:checked ~ div.one {
  left:0;
  opacity:1;
}
#second:checked ~ div.two {
  left:0;
  opacity:1;
}
#third:checked ~ div.three {
  left:0;
  opacity:1;
}



/*  REVIEW SECTION */



.testimonials{
  padding: 40px 0;
  background: url("images/reviews.jpg");
  
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
}

.inner{
  
  margin: auto;
  overflow: hidden;
  
  padding: 0 20px;
}

.border{
  width: 160px;
  height: 5px;
  background: #cfa51a;
  margin: 26px auto;
}

.row{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  
}
.col{
  flex: 33.33%;
  max-width: 33.33%;
  min-width: 300px;
  box-sizing: border-box;
  padding: 15px;
  margin-left: -50px;
}
.testimonial{
  background: #dadada;
  padding: 30px;
  margin: 10%;
  border-radius: 2%;
}
.testimonial img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.name{
  font-size: 20px;
  text-transform: uppercase;
  margin: 20px 0;
}
.stars{
  color: #cfa51a;
  margin-bottom: 20px;
}

.inner h1{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  color: #fff8f8;
  font-weight: 200;
  letter-spacing: 5px;
  font-size: 2.5em;
}


@media screen and (max-width:960px) {
.col{
  flex: 100%;
  max-width: 80%;
}

.row{
  display: flex;
  flex-wrap: nowrap;
  justify-content: left;
  overflow: scroll;
}
}

@media screen and (max-width:600px) {
.col{
  flex: 100%;
  max-width: 100%;
}

.row{
  display: flex;
  flex-wrap: nowrap;
  justify-content: left;
  
}

}


/*  REVIEW SECTION  END */






  
@media only screen and (max-width: 600px) {
  .navbar {
    flex-direction: column;
    align-items: center;
  }

  .nav-links {
    margin-top: 15px;
  }

  .nav-links a {
    margin: 10px 0;
  }

  .landing-section {
    padding: 10px;
  }

  .landing-section h1 {
    font-size: 1.5em;
    margin-bottom: 10px;
  }

  .landing-section p {
    font-size: 1em;
    margin-bottom: 15px;
  }
}