html {
  scroll-behavior:smooth ;
}

body {
  margin:0 ;
  font-family:system-ui ;
  overflow-x:hidden ;
  user-select:none ;
}

nav {
  width:100% ;
  height:100px ;
  background-image:linear-gradient(lightblue, pink) ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  display:flex ;
  align-items:center ;
  justify-content:space-between ;
  position:fixed ;
  z-index:99998 ;
  transition:0.1s ;
  overflow:hidden ;
  text-align:center ;
}

nav img {
  height:100% ;
  margin-right:10px ;
  cursor:pointer ;
}

nav button {
  margin-left:10px ;
  background-color:gold ;
  color:black ;
  font-size:1.5rem ;
  border:none ;
  margin:10px ;
  padding:10px ;
  border-radius:100px ;
  transition:0.1s ;
  cursor:pointer ;
}

nav button:hover {
  background-color:teal ;
  color:white ;
}

#home {
  width:100vw ;
  height:100vh ;
  background-image:linear-gradient(45deg, blue, blue, red) ;
  background-size: 100% 100% ;
}

#slideshow {
  width:50% ;
  height:60vh ;
  margin-left:25% ;
  margin-top:20vh ;
  position:absolute ;
  background-size: 100% 100% ;
  transition:0.2s ;
  cursor:pointer ;
}

.prextBtn {
  margin-top:calc(25% - 25px) ;
  margin-left:10px ;
  width:50px ;
  height:50px ;
  background-color:rgba(0, 0, 0, .5) ;
  color:white ;
  border-radius:50% ;
  position:absolute ;
  border:none ;
  font-size:2rem ;
  padding:0 ;
  transition:0.5s ;
  cursor:pointer ;
  z-index:99999 ;
}

.prextBtn:hover {
  background-color:black ;
}

.slideshowProgress {
  width:200px ;
  height:25px ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  position:absolute ;
  margin-top:calc(50% - 150px) ;
  margin-left:calc(50% - 100px) ;
}

.slideshowIndex {
  width:25px ;
  height:25px ;
  background-color:rgba(0, 0, 0, .5) ;
  border-radius:50% ;
  transition:0.1s ;
  cursor:pointer ;
}

.slideshowIndex:hover {
  border: 1px solid white ;
}

#content {
  width:100% ;
  padding:10px ;
  background-color:#222222 ;
  color:white ;
  text-align:center ;
}

.window {
  width:50vw ;
  height:60vh ;
  position:fixed ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  z-index:99999 ;
  transition:0.2s ;
  overflow:auto ;
  resize:auto ;
  display:none ;
  transform:rotateX(90deg) ;
  opacity:0% ;
}

.windowBar {
  width:100% ;
  height:50px ;
  background-image:linear-gradient(45deg, rgba(0, 0, 255, .5), rgba(255, 0, 0, .5)) ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
}

.draggableArea {
  width:calc(100% - 150px) ;
  height:100% ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  padding-left:10px ;
  cursor:default ;
}

.draggableArea h1 {
  color:white ;
  -webkit-text-stroke: 1px black ;
}

.windowActionButtons {
  width:150px ;
  height:100% ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
}

.windowActionButtons button {
  width:50px ;
  height:100% ;
  margin:0 ;
  padding:0 ;
  border:none ;
  outline:none ;
  font-size:2rem ;
  transition:0.1s ;
  cursor:pointer ;
  color:white ;
}

.windowActionButtons button:hover {
  color:black ;
}

.minimizeBtn {
  background-color:yellow ;
}

.minimizeBtn:hover {
  background-color:lightyellow ;
}

.maximizeBtn {
  background-color:green ;
}

.maximizeBtn:hover {
  background-color:lightgreen ;
}

.closeBtn {
  background-color:red ;
}

.closeBtn:hover {
  background-color:pink ;
}

.windowContent {
  width:100% ;
  height:calc(100% - 50px) ;
  background-color:#222222 ;
}

.task {
  position:fixed ;
  width:50px ;
  height:50px ;
  margin-left:10px ;
  margin-top:calc(100vh - 60px) ;
  background-color:rgba(0, 0, 0, .5) ;
  border-radius:50% ;
  transition:0.1s ;
  cursor:pointer ;
  color:white ;
  font-size:2rem ;
  display:none ;
  align-items:center ;
  justify-content:center ;
}

.task:hover {
  background-color:black ;
}

#imageContent {
  background-size: 100% 100% ;
}

#btt {
  position:fixed ;
  width:50px ;
  height:50px ;
  margin-left:calc(100vw - 80px) ;
  margin-top:calc(100vh - 60px) ;
  background-color:rgba(0, 0, 0, .5) ;
  border-radius:50% ;
  transition:0.1s ;
  cursor:pointer ;
  color:white ;
  font-size:2rem ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  opacity:0% ;
}

#btt:hover {
  background-color:black ;
}

.service {
  width:100% ;
  height:500px ;
  background-color:rgba(255, 255, 255, .5) ;
  margin-bottom:10px ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  color:white ;
}

.service img {
  height:100% ;
  margin-right:10px ;
}

#contactUsBtn {
  background-color:cornflowerblue ;
  color:white ;
  border:none ;
  margin:10px ;
  padding: 10px 100px ;
  transition:0.1s ;
  cursor:pointer ;
  font-size:2rem ;
}

#contactUsBtn:hover {
  background-color:skyblue ;
  color:black ;
}

#callNowBtn2 {
  background-color:cornflowerblue ;
  color:white ;
  border:none ;
  margin:10px ;
  padding: 10px 100px ;
  transition:0.1s ;
  cursor:pointer ;
  font-size:2rem ;
}

#callNowBtn2:hover {
  background-color:skyblue ;
  color:black ;
}

.input {
  width:50% ;
  height:50px ;
  margin-left:25% ;
  font-size:1.5rem ;
  outline:0 ;
  border: 1px solid lightgrey ;
  padding:5px ;
  font-family:system-ui ;
}

#submitBtn {
  background-color:cornflowerblue ;
  color:white ;
  border:none ;
  margin:10px ;
  margin-left:25% ;
  padding: 10px 50px ;
  transition:0.1s ;
  cursor:pointer ;
  font-size:1.5rem ;
}

#submitBtn:hover {
  background-color:skyblue ;
  color:black ;
}

#callNowBtn {
  position:fixed ;
  width:50px ;
  height:50px ;
  margin-left:10px ;
  margin-top:10px ;
  background-color:rgba(0, 0, 0, .5) ;
  border-radius:50% ;
  transition:0.1s ;
  cursor:pointer ;
  color:white ;
  font-size:2rem ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  opacity:0% ;
  z-index:99999 ;
}

#callNowBtn:hover {
  background-color:black ;
}

#title {
  display:none ;
  color:white ;
  text-align:center ;
}

#uniqueImage {
  width:500px ;
  height:400px ;
}

#aboutText {
  width:90% ;
}

#callNowBtn3 {
  margin-left:150px ;
  margin-top:150px ;
}

@media screen and (max-width: 600px) {
  body {
    background-image:linear-gradient(45deg, blue, blue, red) ;
    width:110% ;
    background-size: 110% 100% ;
    overflow-x:hidden ;
  }
  #callNowBtn {
    opacity:100% ;
    margin-top:110px ;
    border-radius:25px ;
    width:200px ;
  }
  #callNowBtn:after {
    content:" Call Now" ;
  }
  #title {
    display:block ;
  }
  .service img {
    width:25% ;
  }
  .service {
    height:fit-content ;
    flex-direction:column ;
    margin-left:-25px ;
  }
  .service img {
    width:90% ;
    padding:10px ;
  }
  #uniqueImage {
    width:400px ;
    height:300px ;
    padding:60px ;
  }
  .circleBtn {
    font-size:4rem ;
    padding:10px ;
  }
  #slideshow {
    width:90% ;
    margin-left:5% ;
  }
  h1 {
    padding:10px ;
  }
  #home {
    width:100% ;
    background-image:none ;
  }
  #content {
    margin-top:200px ;
  }
  #commercialCleaningService {
    font-size:0.5rem ;
  }
  #aboutText {
    font-size:1.5rem ;
  }
  #contactUsBtn {
    margin-top:50px ;
    margin-bottom:50px ;
  }
  nav {
    font-size:0.7rem ;
    padding-right:10px ;
  }
  nav a {
    margin-right:25px ;
    font-size:0.5rem ;
    transform:scale(0.8) ;
    display:none ;
  }
  nav h1 {
    margin-right:25px ;
  }
  #title {
    margin-top:100px ; 
    display:none ;
  }
  .minimizeBtn, .maximizeBtn {
    display:none ;
  }
  .windowBar {
    height:100px ; 
  }
  .windowActionButtons button {
     width:100% ; 
  }
  .windowContent {
    height:calc(100% - 100px) ; 
  }
  .windowActionButtons {
    width:100px ; 
  }
  .draggableArea {
    width:calc(100% - 100px) ; 
  }
  .window {
    width:90vw ;
    height:40vh ;
  }
}