style.css

*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: inherit; }

html {
font-size: 62.5%; }

body {
box-sizing: border-box; }

::selection {
background-color: #9e7f66;
color: #fff; }

@keyframes slideLeft {
0% {
  transform: translateX(70rem);
  opacity: 0; }
100% {
  transform: translateX(0);
  opacity: 1; } }

@keyframes slideRight {
0% {
  transform: translateX(-70rem);
  opacity: 0; }
100% {
  transform: translateX(0);
  opacity: 1; } }

body {
font-family: "Spartan", sans-serif;
color: #242b37;
font-weight: 400; }

.heading-1 {
font-size: 6.4rem;
font-weight: 300;
line-height: 1.125;
letter-spacing: -0.8px; }
@media only screen and (max-width: 1000px) {
  .heading-1 {
    font-size: 4.8rem;
    line-height: 1.333;
    letter-spacing: -0.6px; } }
@media only screen and (max-width: 700px) {
  .heading-1 {
    font-size: 3.2rem;
    line-height: 1.25;
    letter-spacing: -0.4px; } }

.heading-2 {
font-size: 4rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.5px; }
@media only screen and (max-width: 700px) {
  .heading-2 {
    font-size: 3.2rem;
    line-height: 1.25;
    letter-spacing: -0.4px; } }

.heading-3 {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.556;
letter-spacing: -0.23px; }

.paragraph {
font-size: 1.8rem;
line-height: 1.667;
letter-spacing: -0.23px; }
@media only screen and (max-width: 700px) {
  .paragraph {
    font-size: 1.5rem;
    line-height: 1.667;
    letter-spacing: -0.19px; } }

.paragraph-sm {
font-size: 1.5rem;
line-height: 1.867;
letter-spacing: -0.19px; }
@media only screen and (max-width: 700px) {
  .paragraph-sm {
    line-height: 1.667; } }

.mb-small {
margin-bottom: 2rem; }

.btn {
text-decoration: none;
text-transform: uppercase;
font-size: 1.4rem;
letter-spacing: 2px;
color: #fff;
border: 1px solid #fff;
padding: 2rem 5rem 1.8rem;
font-weight: 600;
transition: all 0.6s;
cursor: pointer;
outline: none;
font-family: "Spartan", sans-serif; }
.btn:hover {
  background-color: #fff;
  color: #111; }
.btn--dark {
  background-color: #111; }
  .btn--dark:hover {
    border-color: #111; }
.btn--light {
  background-color: transparent; }

.picture {
width: 37.5vw;
box-shadow: 0 7.5rem 10rem -5rem rgba(56, 66, 85, 0.5); }
@media only screen and (max-width: 1000px) {
  .picture {
    width: 100%;
    max-width: 58rem;
    margin-bottom: 4.3rem !important; } }
@media only screen and (max-width: 700px) {
  .picture {
    max-width: 33rem; } }

.seperator {
margin-bottom: 5.5rem; }
@media only screen and (max-width: 1000px) {
  .seperator {
    margin-bottom: 4.3rem; } }
@media only screen and (max-width: 700px) {
  .seperator {
    margin-bottom: 4rem; } }

.footer {
display: flex;
align-items: flex-start;
background-color: #111;
color: #fff;
padding: 7.8rem 11vw;
margin-top: -4px; }
@media only screen and (max-width: 1000px) {
  .footer {
    padding: 6.4rem 5.1vw;
    margin-top: -5px; } }
@media only screen and (max-width: 700px) {
  .footer {
    flex-direction: column;
    align-items: center;
    padding: 8rem 6.4vw; } }

.home-intro {
position: relative; }
@media only screen and (max-width: 1000px) {
  .home-intro {
    text-align: center;
    background-color: #111;
    height: 99.2rem; } }
@media only screen and (max-width: 700px) {
  .home-intro {
    height: 74.8rem; }
    .home-intro .logo {
      width: 8.3rem; } }
.home-intro__bg {
  width: 100%; }
  @media only screen and (max-width: 1000px) {
    .home-intro__bg {
      max-width: 76.8rem; } }
@media only screen and (max-width: 1000px) and (max-width: 700px) {
  .home-intro__bg {
    max-width: 37.5rem; } }
.home-intro__container {
  position: absolute;
  top: 6.5rem;
  left: 11vw; }
  @media only screen and (max-width: 1000px) {
    .home-intro__container {
      top: 39rem;
      left: 12.6vw;
      right: 12.6vw; } }
  @media only screen and (max-width: 725px) {
    .home-intro__container {
      top: 35rem; } }
  @media only screen and (max-width: 700px) {
    .home-intro__container {
      top: 23rem;
      left: 6.4vw;
      right: 6.4vw; } }
.home-intro__content {
  width: 53rem;
  color: #fff;
  margin: 12rem 0 5rem; }
  @media only screen and (max-width: 1250px) {
    .home-intro__content {
      margin-top: 8rem; } }
  @media only screen and (max-width: 1000px) {
    .home-intro__content {
      width: 100%;
      max-width: 57rem;
      margin: 3.2rem auto 6rem; } }
  @media only screen and (max-width: 700px) {
    .home-intro__content {
      max-width: 32.7rem; } }
@media only screen and (max-width: 1000px) {
  .home-intro__heading {
    margin-bottom: 3.2rem; }
    .home-intro__heading span {
      display: block; } }
.home-intro__text {
  width: 85%; }
  @media only screen and (max-width: 1000px) {
    .home-intro__text {
      width: 100%; } }
.home-intro__btn:hover {
  border-color: #fff; }

.features__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 11vw;
position: relative; }
@media only screen and (max-width: 1000px) {
  .features__row {
    padding: 0 12.6vw;
    flex-direction: column !important;
    text-align: center; } }
@media only screen and (max-width: 700px) {
  .features__row {
    padding: 0 6.4vw; } }
.features__row::after {
  content: "";
  position: absolute;
  width: 62vw;
  height: 45vw;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: -1; }
  @media only screen and (max-width: 1000px) {
    .features__row::after {
      width: 50vw;
      height: 32rem;
      background-image: none !important;
      background-color: rgba(92, 103, 121, 0.08); } }
  @media only screen and (max-width: 700px) {
    .features__row::after {
      display: none; } }
.features__row--left::after {
  top: 38.5%;
  left: 0;
  background-image: url(../images/patterns/pattern-curve-top-right.svg);
  background-position: right top; }
  @media only screen and (max-width: 1000px) {
    .features__row--left::after {
      top: 10rem; } }
.features__row--right {
  flex-direction: row-reverse; }
  .features__row--right::after {
    right: 0;
    bottom: 0;
    top: 53%;
    background-image: url(../images/patterns/pattern-curve-top-left.svg);
    background-position: left top; }
    @media only screen and (max-width: 1000px) {
      .features__row--right::after {
        bottom: 0;
        top: none;
        border-top-left-radius: 100px;
        transform: translateY(6rem); } }
.features__row:not(:last-child) {
  padding-bottom: 12rem; }
@media only screen and (max-width: 1000px) {
  .features__row:last-child {
    padding-bottom: 12rem; } }
@media only screen and (max-width: 700px) {
  .features__row {
    padding-bottom: 8rem !important; } }

.features__content {
width: 31vw; }
@media only screen and (max-width: 1000px) {
  .features__content {
    width: 100%;
    max-width: 46rem; } }
@media only screen and (max-width: 700px) {
  .features__content {
    max-width: 32.7rem; } }

.features__row:first-child .features__img {
margin-top: -7rem; }
@media only screen and (max-width: 1000px) {
  .features__row:first-child .features__img {
    margin-top: -9rem; } }
@media only screen and (max-width: 700px) {
  .features__row:first-child .features__img {
    margin-top: -6rem; } }

.features__row:last-child .features__img {
margin-bottom: -7rem; }

.features__img-container {
position: relative; }

.features__row--right .features__img-container::before {
content: url(../images/patterns/pattern-lines.svg);
position: absolute;
right: -11rem;
top: 50%;
transform: translateY(-50%); }
@media only screen and (max-width: 1000px) {
  .features__row--right .features__img-container::before {
    top: 50%;
    right: -6rem;
    transform: none; } }
@media only screen and (max-width: 700px) {
  .features__row--right .features__img-container::before {
    display: none; } }

.highlights {
background-color: #111;
color: #fff;
padding: 20rem 11vw 12rem; }
@media only screen and (max-width: 1000px) {
  .highlights {
    padding: 9.5rem 12.6vw;
    display: flex;
    flex-direction: column;
    align-items: center; } }
@media only screen and (max-width: 700px) {
  .highlights {
    padding: 7.5rem 6.4vw;
    text-align: center; } }
.highlights__container {
  display: flex;
  justify-content: space-between; }
  @media only screen and (max-width: 1000px) {
    .highlights__container {
      flex-direction: column;
      align-items: center; } }
.highlights__left {
  width: 31vw; }
  @media only screen and (max-width: 1000px) {
    .highlights__left {
      width: 100%;
      max-width: 44.5rem;
      margin: 0 auto 6rem;
      text-align: center; } }
  @media only screen and (max-width: 700px) {
    .highlights__left {
      max-width: 32.7rem; } }
.highlights__right {
  width: 37.5vw; }
  @media only screen and (max-width: 1000px) {
    .highlights__right {
      width: 100%;
      max-width: 58rem; } }
  @media only screen and (max-width: 700px) {
    .highlights__right {
      max-width: 32.7rem; } }
.highlights__item {
  display: flex;
  align-items: center;
  padding: 2.6rem 0; }
  @media only screen and (max-width: 700px) {
    .highlights__item {
      flex-direction: column; } }
  .highlights__item:first-child {
    padding-top: 0; }
  .highlights__item:last-child {
    padding-bottom: 0; }
  .highlights__item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
@media only screen and (max-width: 700px) {
  .highlights__img {
    width: 100%;
    max-width: 32.7rem;
    margin-bottom: 3rem; } }
.highlights__title-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem; }
  @media only screen and (max-width: 700px) {
    .highlights__title-row {
      display: block; } }
.highlights__line {
  width: 3.2rem;
  height: 1px;
  background-color: #9e7f66;
  margin-right: 3rem; }
  @media only screen and (max-width: 700px) {
    .highlights__line {
      display: none; } }
.highlights__text {
  margin-left: 6.2rem; }
  @media only screen and (max-width: 700px) {
    .highlights__text {
      margin-left: 0;
      padding: 0 2rem;
      margin-top: 0.5rem; } }


.slider {
padding: 15rem 11vw;
position: relative;
overflow: hidden; }
@media only screen and (max-width: 1000px) {
  .slider {
    padding: 11rem 5.1vw; } }
@media only screen and (max-width: 700px) {
  .slider {
    padding: 8rem 6.4vw 11rem; } }
.slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 37vw;
  height: 30rem;
  background-color: rgba(92, 103, 121, 0.08);
  border-top-right-radius: 100px;
  z-index: -1; }
  @media only screen and (max-width: 1000px) {
    .slider::before {
      width: 50vw;
      height: 32rem; } }
  @media only screen and (max-width: 700px) {
    .slider::before {
      display: none; } }
.slider__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; }
  @media only screen and (max-width: 1000px) {
    .slider__container {
      flex-direction: column;
      text-align: center; } }
.slider__img-container {
  position: relative; }
  .slider__img-container::before {
    content: url(../images/patterns/pattern-lines.svg);
    position: absolute;
    left: -4rem;
    top: 0;
    transform: translateY(-50%); }
    @media only screen and (max-width: 1000px) {
      .slider__img-container::before {
        left: -5rem; } }
    @media only screen and (max-width: 700px) {
      .slider__img-container::before {
        display: none; } }
@media only screen and (max-width: 1000px) {
  .slider__right {
    display: flex;
    flex-direction: column-reverse;
    align-items: center; } }
.slider__content {
  display: none;
  width: 31vw;
  margin-left: 8.5vw;
  margin-bottom: 6.5rem;
  animation: slideLeft 0.6s ease-out; }
  .slider__content.active {
    display: block; }
  @media only screen and (max-width: 1000px) {
    .slider__content {
      width: 100%;
      max-width: 46rem;
      margin: 5rem auto 0; } }
  @media only screen and (max-width: 700px) {
    .slider__content {
      max-width: 32.7rem;
      margin-top: 4rem; } }
.slider__btn {
  display: inline-block;
  margin-top: 3.5rem;
  border-color: #111; }
.slider__img {
  display: none;
  animation: slideRight 0.6s ease-out; }
  .slider__img.active {
    display: block; }
  @media only screen and (max-width: 1000px) {
    .slider__img {
      margin-bottom: 5rem !important; } }
@media only screen and (max-width: 1000px) {
  .slider__tabs {
    display: flex;
    justify-content: space-between;
    width: 90vw;
    max-width: 69rem;
    padding: 0 2rem;
    margin: auto; } }
@media only screen and (max-width: 700px) {
  .slider__tabs {
    flex-direction: column; } }
.slider__tab {
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 1000px) {
    .slider__tab {
      flex-direction: column-reverse; } }
  .slider__tab:not(:last-child) {
    margin-bottom: 2rem; }
    @media only screen and (max-width: 1000px) {
      .slider__tab:not(:last-child) {
        margin-bottom: 0; } }
    @media only screen and (max-width: 700px) {
      .slider__tab:not(:last-child) {
        margin-bottom: 1.5rem; } }
.slider__tab-line {
  background-color: #9e7f66;
  height: 1px;
  width: 6.5vw;
  visibility: hidden; }
  @media only screen and (max-width: 1000px) {
    .slider__tab-line {
      margin-top: 0.5rem;
      width: 4.8rem; } }
  @media only screen and (max-width: 700px) {
    .slider__tab-line {
      margin-top: 0; } }
.slider__tab.active .slider__tab-line {
  visibility: visible; }
.slider__tab-title {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #111;
  opacity: 0.5;
  margin-left: 2vw;
  cursor: pointer;
  transition: opacity 0.4s; }
  .slider__tab-title:hover {
    opacity: 1; }
  @media only screen and (max-width: 1000px) {
    .slider__tab-title {
      letter-spacing: 2px;
      line-height: 2; } }
.slider__tab.active .slider__tab-title {
  opacity: 1; }







/* yaha se bokking vale page ki css hai || from here css of booking page is started but some elements are in above css */
.booking-container {
position: relative; }
.booking-container__bg {
  width: 100%; }
.booking-container__logo {
  position: absolute;
  top: 6.5rem;
  left: 11vw; }
  @media only screen and (max-width: 1000px) {
    .booking-container__logo {
      top: 5.6rem;
      left: 5.1vw; } }
  @media only screen and (max-width: 700px) {
    .booking-container__logo {
      width: 8.3rem;
      left: 50%;
      transform: translateX(-50%); } }
.booking-container__content {
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 11vw;
  right: 11vw;
  top: 42.5%; }
  @media only screen and (max-width: 1000px) {
    .booking-container__content {
      flex-direction: column;
      align-items: center;
      top: 27%; } }
  @media only screen and (max-width: 700px) {
    .booking-container__content {
      left: 6.4vw;
      right: 6.4vw;
      top: 22%; } }
.booking-container__intro {
  width: 31vw;
  color: #fff; }
  @media only screen and (max-width: 1000px) {
    .booking-container__intro {
      width: 100%;
      max-width: 54rem;
      text-align: center;
      margin: 0 auto 6vw; } }
  @media only screen and (max-width: 700px) {
    .booking-container__intro {
      max-width: 40rem;
      margin-bottom: 9.1rem; } }
.booking-container__intro-btn {
  display: none; }
  @media only screen and (max-width: 700px) {
    .booking-container__intro-btn {
      display: inline-block;
      margin-top: 2.4rem; } }
.booking-container__bottom-bg {
  position: relative;
  z-index: -1;
  width: 69vw;
  height: 32rem;
  background-color: rgba(92, 103, 121, 0.08);
  border-bottom-right-radius: 100px;
  margin-top: -3px; }
  @media only screen and (max-width: 1000px) {
    .booking-container__bottom-bg {
      opacity: 0;
      height: 45rem; } }
@media only screen and (max-width: 1000px) and (min-width: 900px) {
  .booking-container__bottom-bg {
    height: 35rem; } }
@media only screen and (max-width: 1000px) and (min-width: 1050px) {
  .booking-container__bottom-bg {
    height: 30rem; } }
  @media only screen and (max-width: 700px) {
    .booking-container__bottom-bg {
      height: 55rem; } }
@media only screen and (max-width: 700px) and (min-width: 450px) {
  .booking-container__bottom-bg {
    height: 40rem; } }
@media only screen and (max-width: 700px) and (min-width: 500px) {
  .booking-container__bottom-bg {
    height: 35rem; } }
@media only screen and (max-width: 700px) and (min-width: 600px) {
  .booking-container__bottom-bg {
    height: 20rem; } }

.form {
background-color: #fff;
width: 37.5vw;
min-width: 49rem;
max-width: 54rem;
padding: 3.3vw;
box-shadow: 0 7.5rem 10rem -5rem rgba(56, 66, 85, 0.5);
display: flex;
flex-direction: column;
position: relative; }
@media only screen and (min-width: 1500px) {
  .form {
    padding: 4.8rem; } }
@media only screen and (max-width: 1000px) {
  .form {
    width: 100%;
    padding: 4.8rem;
    margin: auto; } }
@media only screen and (max-width: 700px) {
  .form {
    min-width: 0;
    max-width: 40rem;
    padding: 3.2rem; } }
@media only screen and (max-width: 370px) {
  .form {
    padding: 8.5vw; } }
.form::after {
  content: url(../images/patterns/pattern-lines.svg);
  position: absolute;
  left: -7rem;
  bottom: -3rem;
  z-index: -1; }
  @media only screen and (max-width: 1000px) {
    .form::after {
      display: none; } }
.form *.error::after {
  position: absolute;
  font-size: 1rem;
  letter-spacing: -0.13px;
  color: #b54949; }
.form__input-container {
  height: 4.5rem;
  margin-bottom: 3.5rem;
  position: relative; }
  .form__input-container--lg {
    width: 100%; }
  .form__input-container--md {
    width: 9.7rem; }
    @media only screen and (max-width: 700px) {
      .form__input-container--md {
        width: 33.5%; } }
  .form__input-container--sm {
    width: 8rem; }
    @media only screen and (max-width: 700px) {
      .form__input-container--sm {
        width: 27.7%; } }
  .form__input-container.error::after {
    content: "This field is required";
    top: 115%;
    left: 1.6rem; }
  .form__input-container#email-container.error.invalid::after {
    content: "Invalid email"; }
.form__input {
  width: 100%;
  height: 100%;
  padding: 2px 0 1.6rem 1.7rem;
  border: none;
  border-bottom: 1px solid #8e8e8e;
  font-size: 1.8rem;
  color: inherit;
  font-family: inherit;
  outline: none; }
  @media only screen and (max-width: 700px) {
    .form__input {
      padding-left: 1.45rem; } }
  @media only screen and (max-width: 350px) {
    .form__input {
      padding-left: 8px; } }
  .form__input:focus {
    color: #111 !important;
    border-color: #111 !important;
    cursor: pointer; }
  .form__input.error {
    color: #b54949;
    border-color: #b54949; }
  .form__input::placeholder {
    font-size: 1.8rem;
    font-family: "Spartan", sans-serif;
    color: #111;
    opacity: 0.5; }
  .form__input.error::placeholder {
    color: #b54949; }
.form__row {
  display: flex; }
  @media only screen and (max-width: 700px) {
    .form__row {
      flex-direction: column; } }
.form__label {
  font-size: 1.8rem;
  color: #111;
  align-self: flex-start;
  padding-top: 0.75rem;
  position: relative; }
  @media only screen and (max-width: 700px) {
    .form__label {
      margin-bottom: 1rem; } }
  .form__label.error::after {
    content: "This field is incomplete";
    top: 105%;
    left: 0;
    width: 200%; }
    @media only screen and (max-width: 700px) {
      .form__label.error::after {
        top: 90%; } }
  .form__label#date-label.error.invalid::after {
    content: "Invalid date"; }
  .form__label#time-label.error.invalid::after {
    content: "Invalid time"; }
.form__group {
  display: flex;
  margin-left: auto; }
  @media only screen and (max-width: 700px) {
    .form__group {
      justify-content: space-between;
      margin-left: 0; } }
.form__row .form__input-container:not(:last-child) {
  margin-right: 1.6rem; }
  @media only screen and (max-width: 700px) {
    .form__row .form__input-container:not(:last-child) {
      margin-right: 0; } }
.form__select {
  height: auto;
  cursor: pointer;
  color: #111;
  font-size: 1.8rem; }
.form__select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 1.6rem;
  height: 4.5rem; }
  @media only screen and (max-width: 700px) {
    .form__select-trigger {
      padding-left: 1.45rem; } }
  @media only screen and (max-width: 350px) {
    .form__select-trigger {
      padding-right: 8px;
      padding-left: 8px; } }
.form__arrow {
  transition: all .5s; }
.form__select-trigger:hover .form__arrow {
  opacity: 0.6; }
.form__select.open .form__arrow {
  transform: rotate(180deg); }
.form__options {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  width: 10.6rem;
  box-shadow: 0 1.5rem 2.5rem 0 rgba(56, 66, 85, 0.25);
  background-color: #fff;
  z-index: 999;
  padding: 1.8rem 3rem 1.6rem 1.6rem;
  visibility: hidden;
  opacity: 0;
  transition: all .75s; }
.form__select.open .form__options {
  visibility: visible;
  opacity: 1; }
.form__option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; }
  .form__option:not(:last-child) {
    margin-bottom: 1.6rem; }
  .form__option span {
    transition: opacity .25s; }
  .form__option:hover span {
    opacity: 0.5; }
.form__check {
  visibility: hidden;
  opacity: 0; }
.form__option.selected .form__check {
  visibility: visible;
  opacity: 1; }
.form__operator-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 3rem 1.7rem; }
.form__operator {
  color: #9e7f66;
  cursor: pointer;
  transition: opacity 0.4s; }
  .form__operator:hover {
    opacity: 0.5; }
.form__count {
  color: #151515;
  font-weight: 700; }
.form__btn {
  border-color: #111;
  padding-left: 0;
  padding-right: 0; }


  /* success msg css starts form here */
.success {
visibility: hidden;
opacity: 0;
background-color: rgba(17, 17, 17, 0.8);
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
padding: 6.4vw;
z-index: 9999;
transition: all 0.3s; }
.success.active {
  visibility: visible;
  opacity: 1; }
.success__content {
  position: absolute;
  top: 50vh;
  left: 50vw;
  width: 90%;
  max-width: 40rem;
  height: 20rem;
  background-color: #fff;
  box-shadow: 0 1.5rem 2.5rem 0 rgba(56, 66, 85, 0.25);
  font-size: 1.8rem;
  transform: translate(-50%, 80%);
  opacity: 0;
  transition: all 0.5s 0.2s; }
.success.active .success__content {
  opacity: 1;
  transform: translate(-50%, -50%); }
.success__close {
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  color: #9e7f66;
  cursor: pointer;
  transition: opacity 0.25s; }
  .success__close:hover {
    opacity: 0.5; }
.success__text {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  font-weight: 700;
  transform: translateY(-50%); }


/* the extera footer given in project Css starts here it is in the end of both the HTML */
.footer-section{
    background-color: black;
}
.footer{
    display:flex;
    gap: 30px
}
.icon{
    display: flex;
    gap: 12px;
    margin: 10px;
}
.icon p{
    margin-top: -2px;
    font-size: 1.25rem;
}
.col1,.col2{
    color: white;
    width: 50%;
    font-size: 1.75rem;
}
#send1{
    background-color: #ff7c4b;
    border-radius: 4px;
    border: none;
    padding: 8px 16px;
    width: 80px;
    color: white;
}
.col2{
    display: flex;
    flex-direction: column;
    gap: 20px
}
.col3{
    color: white;
    display: flex;
    justify-content: center;
    font-size: 1.5rem;

}
#name1,#email1,#message1{
    padding: 5px;
    background-color: gray;
    color: #fff;
    border-radius: 3px;
    border: none;
    overflow: hidden;
}
#name1:hover{
    background-color: rgb(207, 238, 246);
}
#email1:hover{
    background-color: rgb(207, 238, 246);
}
#message1:hover{
    background-color: rgb(207, 238, 246);
}

/* reservation banner css starts from here */
.resrv{
  padding: 50px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
  background-image: url("https://d3dyfaf3iutrxo.cloudfront.net/general/upload/03479a3952a4415d8e5e23e7ce9e61ce.jpg");
  background-size: cover;
}
@media only screen and (max-width: 700px) {
  .resrv{
    flex-direction: column;
  }
}
.resrv-btn{
  color: white;
  background: none;
  border: 1px solid white;
  padding: 15px 40px;
  text-decoration: none;
}
.resrv-btn:hover{
  background-color: white;
  color: black;
}