:root {
  --primary-font: "Cinzel";
  --secondary-font: "Discover";
  --tertiary-font: "Trajan Pro";
  --primary-color: #9e7f53;
  --secondary-color: #c4a15c;
  --tertiary-color: #6e4b1a;
  --white-color: #fff;
  --black-color: #0f102e;
  --transition: all 320ms ease-in-out;
}
@media all and (max-width: 767px) {
}
/* Large Mobile === 576px to 766px */
@media all and (min-width: 576px) {
  /* === CTA Area Styles === */
  .custom-btn-link {
    padding: 10px 20px 12px 20px;
  }
  /* === Counter Area Styles === */

  .counter-wrapper {
    margin-left: -54px;
    margin-right: -54px;
  }
}

/* Ipad View === 767px to 991px */
@media all and (min-width: 767px) {
  /* === Header Area Styles === */
  .header {
    padding: 16px 0;
  }
  .header-logo {
    width: 150px;
  }

  /* === Banner Area Styles === */
  .banner-sec {
    padding-bottom: 60px;
  }
  .header-spacing {
    padding-top: 130px;
  }
  .banner-content-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .banner-content h1 {
    max-width: 90%;
  }
  .banner-form {
    min-width: 340px;
  }

  /* === Footer Area Styles === */
  .footer {
    padding: 50px 0 40px 0;
  }
  .logo-area img {
    width: 220px;
  }
  .logo-area address a {
    font-size: 16px;
  }
  .footer-link-list {
    margin-bottom: 0;
  }
  .footer-link-list li a {
    font-size: 16px;
  }

  /* === Gallery Area Styles === */
  .gallery-sec {
    padding: 60px 0;
  }
  .small-text-title {
    font-size: 38px;
  }
  .gallery-container .row > * {
    --bs-gutter-x: 0.75rem;
  }
  .gallery-single-item {
    margin-bottom: 12px;
  }

  /* === CTA Area Styles === */
  .custom-btn-link {
    padding: 12px 25px 14px 25px;
    font-size: 14px;
  }
  .cta-sec {
    padding: 25px 0;
  }
  .cta-title {
    font-size: 26px;
    margin-bottom: 0;
  }

  /* === Wedding Features Area Styles === */
  .features-sec {
    padding: 80px 0 70px 0;
  }
  .medium-title {
    padding-left: 85px;
  }
  .medium-title::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 0;
    width: 60px;
    height: 1.5px;
    background-color: var(--primary-color);
    pointer-events: none;
  }
  .medium-title::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 60px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background-color: var(--primary-color);
    pointer-events: none;
  }

  /* === About Area Styles === */
  .about-sec {
    padding: 60px 0 0 0;
  }
  .about-img {
    max-width: 100%;
  }
  .about-content h2 {
    font-size: 24px;
  }
  .about-content p {
    font-size: 16px;
  }

  /* === Counter Area Styles === */
  .counter-sec {
    padding: 50px 0;
  }
  .counter-sec::after,
  .counter-sec::before {
    display: none;
  }
  .counter-title {
    font-size: 32px;
    max-width: 70%;
    margin: 0 auto;
  }
  .counter-wrapper {
    margin-left: 0;
    margin-right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .single-counter-item {
    margin-bottom: 0;
  }
  .single-counter-item h6 {
    font-size: 31px;
  }
  .single-counter-item p {
    margin-bottom: 0;
    font-size: 19.5px;
  }

  /* === Testimonial Area Styles === */
  .testimonial-sec {
    padding: 50px 0;
  }

  /* === Bottom About Us Area Styles === */
  .btm-abt-sec {
    padding: 40px 0 60px 0;
  }
}

/* Small Laptop View === 992px to 1199px */
@media all and (min-width: 992px) {
  /* === Footer Area Styles === */
  .footer {
    padding: 10px 0 50px 0;
  }
  .footer-bkgd {
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/surya-palace-hotel-front-view.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100%;
    height: 100%;
    width: 325px;
    z-index: 0;
  }
  .footer .container {
    padding-left: 30%;
    padding-top: 50px;
  }

  /* === CTA Area Styles === */
  .cta-sec {
    padding: 40px 0;
  }
  .cta-title {
    font-size: 30px;
  }

  /* === Wedding Features Area Styles === */
  .medium-title {
    font-size: 32px;
  }
  .medium-title::before {
    top: 17px;
  }
  .medium-title::after {
    top: 12px;
  }

  /* === About Area Styles === */
  .about-img {
    max-width: 90%;
  }
  .about-content h2 {
    font-size: 32px;
  }
  .about-content p {
    font-size: 18px;
  }

  /* === Counter Area Styles === */
  .counter-sec {
    padding: 60px 0;
  }
  .counter-title {
    font-size: 36px;
    max-width: 60%;
  }
  .counter-wrapper {
    max-width: 84%;
    margin-left: auto;
    margin-right: auto;
  }
  .single-counter-item h6 {
    font-size: 34px;
  }
  .single-counter-item p {
    font-size: 20.5px;
  }

  /* === Bottom About Us Area Styles === */
  .btm-abt-sec {
    padding: 50px 0 70px 0;
  }
  .btm-about-img {
    text-align: center;
  }
  .btm-about-img img {
    width: 84%;
    max-width: 84%;
  }
  .btm-abt-content p {
    font-size: 17px;
    line-height: 1.45;
  }

  /* === Banner Area Styles === */
  .banner-sec {
    padding-bottom: 90px;
  }
  .banner-content h1 {
    max-width: 90%;
    font-size: 40px;
  }
  .banner-content p {
    font-size: 22px;
    line-height: 1.4;
  }
  .banner-form {
    min-width: 430px;
  }
}

/* Normal Laptop View === 1200px to 1399px */
@media all and (min-width: 1200px) {
  /* === Footer Area Styles === */
  .footer-bkgd {
    width: 380px;
  }
  .footer .container {
    padding-left: 25%;
    padding-top: 110px;
  }

  /* === Gallery Area Styles === */
  .gallery-sec {
    padding: 80px 0;
  }
  .small-text-title {
    font-size: 46px;
  }
  .gallery-container {
    margin-top: 50px;
  }
  .gallery-container .row > * {
    --bs-gutter-x: 1.5rem;
  }
  .gallery-single-item {
    margin-bottom: 24px;
  }

  /* === CTA Area Styles === */
  .custom-btn-link {
    padding: 14px 40px 16px 40px;
    font-size: 20px;
    border-radius: 30px;
  }
  .cta-sec {
    padding: 50px 0;
  }
  .cta-title {
    font-size: 34px;
  }

  /* === Wedding Features Area Styles === */
  .medium-title {
    font-size: 38px;
  }
  .features-sec .col-md-6:first-of-type .single-feature-item {
    padding-left: 87px;
  }
  .features-sec .col-md-6:last-of-type .single-feature-item {
    padding-right: 87px;
  }
  .features-sec .col-md-6:last-of-type {
    margin-top: 35px;
  }
  .features-content h6 {
    font-size: 26px;
  }
  .features-content p {
    font-size: 16px;
  }

  /* === About Area Styles === */
  .about-sec {
    padding: 80px 0 0 0;
  }
  .about-img {
    max-width: 76%;
  }
  .about-content p {
    line-height: 1.5;
  }

  /* === Counter Area Styles === */
  .counter-sec {
    padding: 70px 5%;
  }
  .counter-sec::after,
  .counter-sec::before {
    background-size: 86%;
    display: block;
  }
  .counter-title {
    font-size: 36px;
    max-width: 100%;
    text-align: left;
  }
  .counter-wrapper {
    max-width: 100%;
    margin-top: 0;
  }
  .single-counter-item h6 {
    font-size: 34px;
  }
  .single-counter-item p {
    font-size: 20px;
  }

  /* === Testimonial Area Styles === */
  .testimonial-sec {
    padding: 70px 0;
  }
  .testimonial-area {
    padding: 45px 0;
    margin-top: 30px;
  }
  .testimonialSlider::before {
    width: 70px;
    height: 54px;
    margin: 0 auto 14px;
  }
  .testimonial-content p {
    font-size: 22px;
    max-width: 68%;
    line-height: 1.55;
    margin-left: auto;
    margin-right: auto;
  }
  .testimonial-content span {
    font-size: 21px;
  }
  .custom-swiper-pagination {
    margin-top: 15px;
  }
  .custom-swiper-pagination .swiper-pagination-bullet {
    width: 46px;
    height: 5px;
  }

  /* === Bottom About Us Area Styles === */
  .btm-about-img img {
    width: 72%;
    max-width: 72%;
    position: relative;
    top: 20px;
  }
  .btm-abt-content p {
    font-size: 19px;
    line-height: 1.5;
    max-width: 94%;
  }

  /* === CTA Two Area Styles === */
  .cta-two-sec .cta-title {
    max-width: 80%;
  }

  /* === Banner Area Styles === */
  .banner-sec {
    padding-bottom: 70px;
  }
  .banner-content h1 {
    max-width: 74%;
    font-size: 44px;
  }
  .banner-form {
    min-width: 470px;
  }
  .form-title h6 {
    font-size: 24px;
  }
  .form-title p {
    font-size: 16px;
  }
  .form-control,
  .form-select {
    padding: 12px 20px 14px 20px;
    font-size: 16px;
  }
  .checkbox-container {
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 0;
  }
  .form-group label {
    display: block;
    font-size: 15px;
  }
  .form-group label::before {
    top: -1px;
    margin-right: 7px;
  }
  .form-group label::after {
    left: 10px;
    top: 5px;
  }

  /* === Thank You === */
  .thank-you-container {
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .icon-holder {
    width: 280px;
  }
  .thank-you-content h1 {
    margin-top: 45px;
  }
  iframe {
    height: 90vh;
  }
  .form-img {
    top: 40px;
    left: -65px;
  }
  .form-img img {
    max-width: 135%;
    width: 135%;
  }
}

/* Desktop View === 1400px to 1920px */
@media all and (min-width: 1400px) {
  /* === CTA Area Styles === */
  .custom-btn-link {
    padding: 12px 35px 14px 35px;
    font-size: 18px;
  }
  .btn-link-border::before,
  .btn-link-border::after {
    width: 54px;
  }
  .btn-link-border::before {
    left: -54px;
  }
  .btn-link-border::after {
    right: -54px;
  }

  /* === Wedding Features Area Styles === */
  .medium-title {
    padding-left: 120px;
    font-size: 42px;
    margin-bottom: 30px;
  }
  .medium-title::before {
    top: 23px;
    width: 90px;
  }
  .medium-title::after {
    top: 18px;
    left: 90px;
  }
  .features-sec .col-md-6:first-of-type .single-feature-item {
    padding-left: 120px;
  }
  .features-sec .col-md-6:last-of-type .single-feature-item {
    padding-right: 120px;
  }
  .features-sec .col-md-6:last-of-type {
    margin-top: 55px;
  }
  .features-content h6 {
    font-size: 30px;
  }
  .features-content p {
    font-weight: 400;
  }

  /* === About Area Styles === */
  .about-content h2 {
    font-size: 36px;
  }
  .about-content p {
    font-size: 20px;
  }

  /* === Counter Area Styles === */
  .counter-sec {
    padding: 70px 8%;
  }
  .counter-sec::after,
  .counter-sec::before {
    background-size: 90%;
  }

  /* === Bottom About Us Area Styles === */
  .btm-abt-sec {
    padding: 40px 0 90px 0;
  }
  .btm-abt-content p {
    font-size: 19px;
    line-height: 1.6;
    max-width: 90%;
  }

  /* === CTA Two Area Styles === */
  .cta-two-sec .cta-title {
    max-width: 70%;
  }

  /* === Banner Area Styles === */
  .banner-content h1 {
    max-width: 64%;
    font-size: 46px;
  }
}

/* Large Desktop View === 1920px & Large */
@media all and (min-width: 1700px) {
  /* === Footer Area Styles === */
  .footer {
    padding: 60px 0 50px 0;
  }
  .footer-bkgd {
    width: 450px;
  }
  .footer .container {
    padding-left: 10%;
    padding-top: 110px;
  }

  /* === Gallery Area Styles === */
  .gallery-sec {
    padding: 90px 0;
  }
  .small-text-title {
    font-size: 50px;
  }
  .gallery-container {
    margin-top: 60px;
  }

  /* === About Area Styles === */
  .about-sec {
    padding-top: 100px;
  }

  /* === Testimonial Area Styles === */
  .testimonial-area {
    padding: 60px 0;
    margin-top: 40px;
  }
  .testimonial-content {
    margin-top: 10px;
  }
  .testimonial-content p {
    max-width: 60%;
  }
  .testimonialSlider .swiper-slide:nth-child(3) .testimonial-content p {
    max-width: 66%;
  }
}

@media all and (min-width: 1200px) and (max-width: 1400px) and (max-height: 690px) {
}

@media all and (min-width: 1200px) and (max-width: 1400px) and (max-height: 560px) {
}
@media all and (min-width: 2400px) {
  /* === Footer Area Styles === */
  .footer {
    padding: 150px 0 50px 0;
  }
  .footer-bkgd {
    width: 560px;
  }
  .footer .container {
    padding-left: 0;
    padding-top: 110px;
  }
}