@import url(./shared.css);

/*/ /////////////Banner//////////////// */

.banner {
  margin: auto;
  position: relative;
  height: 569px;
}

#banner-image,
.banner-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 10px 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.banner-content p {
  font-family: "Raleway";
  font-size: 18px;
  font-weight: normal;
  line-height: 37px;
  font-style: normal;
  text-align: left;
  color: #ffffff;
  text-align: center;
}

.banner-content-layer {
  position: relative;
}

.banner-content-layer p {
  position: absolute;
  top: 25px;
  left: 35%;
  font-family: "Raleway";
  font-size: 21px;
  font-weight: bold;
  line-height: 37px;
  font-style: normal;
  text-align: left;
  color: #006cd1;
}

.right-side-arrow img,
.left-side-arrow img {
  padding: 0;
}

.right-side-arrow img:hover,
.left-side-arrow img:hover {
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/*/ /////////////Our services//////////////// */

#our-services {
  padding: 79px 0 49px 0;
}

.our-services h3,
.our-services h4 {
  text-align: left;
}
.our-services {
  display: flex;
}

.our-services-title {
  margin-right: 58px;
}

#our-services-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

#our-services-container div {
  width: 270.1px;
  height: 327.4px;
}

#our-services-container h5,
#our-services-container p {
  padding: 0 3px;
}

#our-services-container div:hover {
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#our-services-container img {
  width: 100%;
  height: 181px;
}

#our-services-container h5 {
  margin: 26px 0 12px 0;
}

#our-services-container p {
  margin-top: 29px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #ffffff;
  margin: 15% auto;
  padding: 30px;
  border: 1px solid #888;
  width: 500px;
  height: 400px;
  text-align: center;
}

.modal-content h5,
.modal-content p {
  margin: 35px;
}

.modal-content img {
  width: 350px;
  height: 200px;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/*/ ///////////////Watch our video tour/////////////// */

.video-bg,
.video-cover {
  position: absolute;
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.watch-our-video-tour {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.watch-our-video-tour-title {
  z-index: 99;
  margin: 70px 0 23px 0;
}

.watch-our-video-tour-title h3,
.watch-our-video-tour-title h4 {
  color: #ffffff;
}

.watch-our-video-tour-content {
  margin: 0 auto;
  z-index: 1000;
  width: 663px;
  height: 314px;
}

.video {
  width: 100%;
  height: 100%;
}

/*/ ///////////////We achieved/////////////// */

#we-achieved {
  padding: 107px 154px 69px 154px;
}

.achievement-title {
  font-family: "Raleway";
  font-size: 16px;
  font-weight: normal;
  line-height: 22px;
  font-style: normal;
  text-align: left;
  color: #1a1a1b;
}

.number {
  font-family: "Lato";
  font-size: 32px;
  font-weight: bold;
  line-height: 22px;
  font-style: normal;
  text-align: left;
  color: #1a1a1b;
}

.we-achieved {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.we-achieved img {
  margin-bottom: 32px;
}

.achievement p {
  text-align: center;
  padding-bottom: 14px;
}

/*/ ///////////////Popular package/////////////// */

#popular-package {
  padding: 69px 252px 71px 248px;
}

.popular-package {
  text-align: center;
}

.popular-package-title {
  margin-bottom: 67px;
}

.popular-package-content {
  display: flex;
  justify-content: space-between;
}

.popular-package-card {
  width: 267px;
  height: 358px;
  filter: drop-shadow(0px 0px 6px rgba(101, 101, 101, 0.2));
  background: #ffffff;
}

.popular-package-card:hover {
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.popular-package-card p {
  font-family: "Raleway";
  font-size: 14px;
  font-weight: 500;
  line-height: 37px;
  font-style: normal;
  text-align: left;
  color: #1a1a1b;
  text-align: center;
}

.popular-package-btn {
  position: absolute;
  background-color: #f8e918;
  border: none;
  padding: 5px 10px;
  top: 10px;
  left: 10px;
}

/*/ ///////////////Get off/////////////// */

.get-off-bg,
.get-off-cover {
  position: absolute;
  width: 100%;
  height: 350px;
  object-fit: cover;
}

.get-off {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.get-off-title,
.get-off-content {
  z-index: 99;
}

.get-off h2 {
  margin: 82px 0 31px 0;
}

.get-off h6 {
  color: #ffffff;
  margin-bottom: 60px;
}

.get-off-content {
  display: flex;
  justify-content: center;
}

.get-off-content input {
  width: 395px;
  height: 50px;
  border-color: #ffffff;
  border-width: 2px;
  border-style: solid;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.03);
  padding: 17px 30px;
}

.get-off-content input:focus {
  color: #ffffff;
  outline: none;
  box-shadow: 0 0 10px 0 #006cd1;
  background: rgba(255, 255, 255, 0.3);
}

.btn {
  width: 155px;
  height: 50px;
  border-color: #ffffff;
  border-width: 2px;
  border-style: solid;
  border-radius: 25px;
  background: #ffffff;
  font-family: "Raleway";
  font-size: 16px;
  font-weight: normal;
  line-height: 37px;
  font-style: normal;
  text-align: center;
  color: #08aeea;
}

.get-off button:hover {
  cursor: pointer;
  background: rgba(0, 97, 205, 0.4);
  color: #ffffff;
  border: none;
}

.get-off form {
  display: flex;
  gap: 22px;
}

/*/ ///////////////Happy travelers/////////////// */

#happy-travelers {
  margin-top: 100px;
}

.happy-travelers {
  text-align: center;
}
.happy-travelers-content {
  display: flex;
  justify-content: space-between;
}

.happy-travelers-card {
  width: 368px;
  height: 409px;
  background: #f4f4f4;
  padding: 65px 35px;
  margin-top: 82px;
}

.happy-travelers-card p {
  width: 298px;
  height: 130px;
  margin: 37px 0 0 0;
  padding: 0 15px;
}

.happy-travelers-card img {
  margin-top: -13px;
}

/*/ ///////////////Plan a trip/////////////// */
#plan-your-trip {
  height: 505px;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

#plan-your-trip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-your-trip {
  position: absolute;
  width: 100%;
  z-index: 99;
  padding-top: 320px;
}

.plan-your-trip h2 {
  font-size: 36px;
  font-weight: 500;
  color: #fefeff;
}

.plan-your-trip button {
  background: linear-gradient(-2deg, #08aeea 0%, #2af598 100%);
  color: #ffffff;
  border: none;
  margin-top: 50px;
}

/* /////////.popular-tourism-country//////// */

.plan-your-trip button:hover,
.arrow-btn:hover {
  background: linear-gradient(-2deg, #2af598 0%, #08aeea 100%);
  cursor: pointer;
}

.arrow-btn a {
  color: #ffffff;
}

.popular-tourism-country-title {
  text-align: center;
  margin: 70px 0;
}
.popular-tourism-country-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  place-items: center;
}

.popular-tourism-country-card {
  width: 271px;
  height: 425px;
  position: relative;
}

.popular-tourism-country-card:hover .card-overlay {
  opacity: 0.2;
  cursor: pointer;
}

.popular-tourism-country-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popular-tourism-country-card h3 {
  font-size: 30px;
  color: #fefeff;
}

.card-content {
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 99;
  bottom: 0;
  left: 0;
  width: 100%;
  justify-content: space-between;
  padding: 17px;
}

.card-content h3 {
  text-align: left;
}

.card-content p {
  color: #ffffff;
}

.arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: none;
  background: linear-gradient(-2deg, #08aeea 0%, #2af598 100%);
  color: #ffffff;
  font-size: 20px;
}

/* ////////////map///////////// */

#map {
  margin-top: 70px;
  width: 100%;
  height: 350px;
  display: flex;
  justify-content: center;
  position: relative;
}

.map iframe {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* /////////responsive////////// */

@media screen and (max-width: 1300px) {
  #popular-package {
    padding: 69px 5% 71px 5%;
  }
}
@media screen and (max-width: 1200px) {
  #our-services-container {
    gap: 10px;
  }
  #our-services-container div {
    width: 260px;
  }
  .our-services {
    padding: 0 10px;
  }
  .our-services-title {
    margin-right: 10px;
  }

  #happy-travelers {
    width: 100%;
  }
  .happy-travelers-content {
    justify-content: center;
    gap: 30px;
  }
  .happy-travelers-card {
    padding: 65px 15px;
    width: 300px;
  }
  .happy-travelers-card p {
    padding: 0;
  }
  .popular-tourism-country {
    width: 100%;
    justify-content: center;
  }
  .popular-tourism-country-content {
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  .popular-tourism-country-card {
    width: 400px;
    height: 250px;
  }
}

@media screen and (max-width: 1024px) {
  .our-services {
    flex-direction: column;
    text-align: center;
    width: 100%;
  }
  .our-services h3,
  .our-services h4,
  .our-services-title p {
    text-align: center;
  }
  #our-services-container {
    margin: 20px auto;
    gap: 30px;
    justify-content: center;
  }

  #our-services-container div {
    width: 270.1px;
  }

  #we-achieved {
    padding: 107px 30px 69px 30px;
  }

  .achievement {
    padding: 0 10px;
  }

  #popular-package {
    padding: 69px 10px 71px 10px;
  }

  .happy-travelers-content {
    flex-wrap: wrap;
  }
  .happy-travelers-card {
    margin-top: 30px;
    gap: 0;
  }
}

@media screen and (max-width: 925px) {
  #our-services-container {
    grid-template-columns: 1fr 1fr;
  }
  .banner-content h1 {
    font-size: 60px;
  }

  .popular-package-card img {
    width: 100%;
  }
  .popular-package-content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }
  .popular-tourism-country-content {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  .banner-content-layer img {
    display: none;
  }
  .banner-content-layer p {
    display: none;
  }
  .watch-our-video-tour-content {
    width: 100%;
    height: 314px;
  }
  .popular-package-card {
    width: 267px;
  }
  .get-off input {
    width: 290px;
    height: 45px;
  }
  .get-off button {
    width: 100px;
    height: 45px;
    font-size: 14px;
  }
  .plan-your-trip {
    height: 405px;
    padding-top: 280px;
  }
}

@media screen and (max-width: 600px) {
  #our-services-container {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 525px) {
  .banner-content h1 {
    font-size: 45px;
  }
  .banner-content {
    flex-direction: column;
  }
  .right-side-arrow img,
  .left-side-arrow img {
    width: 40px;
    height: 40px;
    margin: 0;
  }
  .modal-content {
    background-color: #ffffff;
    margin: 15% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 300px;
    height: 400px;
    text-align: center;
  }
  .modal-content h5,
  .modal-content p {
    margin: 20px 5px;
  }
  .modal-content img {
    width: 230px;
    height: 150px;
  }
  .we-achieved {
    flex-direction: column;
  }
  .plan-your-trip h2 {
    font-size: 30px;
  }
  .plan-your-trip button {
    width: 130px;
    height: 45px;
    font-size: 14px;
  }
  .achievement {
    padding-bottom: 30px;
  }
  .achievement img {
    margin-bottom: 5px;
  }

  .get-off h2 {
    margin-top: 30px;
    font-size: 30px;
  }
  .get-off h6 {
    margin-bottom: 30px;
  }
  .get-off form {
    flex-direction: column;
    align-items: center;
  }
  .popular-tourism-country-card {
    width: 271px;
    height: 425px;
  }
}

@media screen and (max-width: 414px) {
  #our-services-container {
    grid-template-columns: 1fr;
  }
  .happy-travelers-card {
    width: 267px;
  }
  .happy-travelers-card p {
    width: 100%;
  }
}