@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Roboto:wght@100;300;400;500;700;900&display=swap");

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

:active,
:hover,
:focus {
  outline: 0 !important;
  outline-offset: 0;
}

a,
a:hover {
  text-decoration: none;
}

a:hover {
  color: var(--secondry-color) !important;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/* Add to style.css */
/* @media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
  }
} */

.navbar-nav .nav-link.active {
  color: #de1b78 !important;
  font-weight: 600;
}
/* Dropdown container */
.dropdown-menu {
  background: #f2f2f2;
  border: none;
  border-radius: 12px;
  padding: 8px 0;
  min-width: 260px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Dropdown items */
.dropdown-item {
  padding: 7px 18px;
  font-weight: 500;
  color: #333;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Hover effect like image */
.dropdown-item:hover {
  background: linear-gradient(90deg, #7b2c83, #de1b78);
  color: #ffffff !important;
}

/* Remove default blue active background */
.dropdown-item:active {
  background: linear-gradient(90deg, #7b2c83, #de1b78);
  color: #fff;
}

/* Desktop hover open */
@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

.navbar .dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

/* Smooth effect */
.dropdown-menu {
  transition: all 0.3s ease;
}

/*===== Variable Define =====*/
:root {
  --primary-color: #de1b78;
  --secondry-color: #50266c;
  --third-color: #f98169;
  --white-color: #fff;
  --text-color: #555;
  --text-gray: #999;
  --black-color: #000;
  --primary-font: "Roboto", sans-serif;
  --secondry-font: "Quicksand", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--primary-font);
  font-size: 100%;
  font-weight: 400;
}

/*
=========================================
    Custom Scrollbar
=========================================
*/

::-webkit-scrollbar {
  width: 0.625rem;
}

::-webkit-scrollbar-track {
  background: var(--white-color);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
}

/*
==========================================
   Custom CSS Design
==========================================
*/

h1 {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 3rem;
  color: var(--secondry-color);
}

h2 {
  font-weight: 700;
  font-size: 2.25rem;
  text-transform: capitalize;
  font-family: var(--secondry-font);
  color: var(--secondry-color);
  line-height: 3rem;
}

h4 {
  color: var(--secondry-color);
  font-family: var(--secondry-font);
  text-transform: capitalize;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

h5 {
  color: var(--primary-color);
  text-transform: capitalize;
  font-family: var(--secondry-font);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

p {
  font-size: 1rem;
  color: var(--text-color);
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 1px;
}

header .logo {
  width: auto;
  height: 55px;
}

.main-btn {
  display: inline-block;
  padding: 0.625rem 1.875rem;
  line-height: 1.5625rem;
  background-color: var(--primary-color);
  border: 0.1875rem solid var(--primary-color);
  color: var(--white-color);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: capitalize;
  box-shadow: 0px 2px 10px -1px rgb(0 0 0 / 19%);
  -webkit-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
}

.white-btn {
  padding: 0.625rem 1.875rem;
  line-height: 25px;
  background-color: var(--white-color);
  border: 0.1875rem solid var(--white-color);
  color: var(--text-color);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: capitalize;
  box-shadow: 0px 2px 10px -1px rgb(0 0 0 / 19%);
  -webkit-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
}

.main-btn:hover {
  background-color: transparent;
  color: var(--primary-color);
}

.white-btn:hover {
  background-color: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.wrapper {
  padding-top: 2.25rem;
  padding-bottom: 8.25rem;
}

.text-content {
  width: 70%;
  margin: auto;
}

/* Mobile navbar white background when toggled */
@media (max-width: 991px) {
  .navbar-collapse {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 5px;
  }

  .navbar-nav .nav-link {
    color: #000 !important;
  }

  .dropdown-menu {
    background-color: #ffffff;
  }
}

.counter-section h2,
.testimonial-section h2,
.book-food-text h2 {
  color: var(--white-color);
}

/* top-bar design */

#top-bar {
  display: block;
  position: relative;
  z-index: 999;
  background: var(--secondry-color);
  height: auto;
  color: var(--white-color);
  font-size: 10px;
}

.top-bar-welcome li {
  list-style: none;
  padding: 0px 5px 0px 5px;
  letter-spacing: 1px;
}

.top-bar-info li {
  padding: 0px 5px 0px 5px;
  letter-spacing: 1px;

  list-style: none;
}

.social-icons li {
  list-style: none;
  padding: 0px 5px 0px 5px;
}

.social-icons a {
  color: var(--white-color);
}

.social-icons a:hover {
  color: var(--primary-color) !important;
}

/*
==========================================
Header Design
==========================================
*/
.navigation-wrap {
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 1000;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.navigation-wrap .nav-item {
  padding: 0 0.625rem;
  transition: all 200ms linear;
}

.navbar-toggler:focus {
  outline: unset;
  border: unset;
  box-shadow: none;
}

.nav-link {
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--white-color);
  letter-spacing: 1px;
}

.navigation-wrap .main-btn {
  padding: 0.3125rem 1.4375rem;
  box-shadow: none;
  margin-left: 0.625rem;
}

/* Change navbar styling on scroll */

.navigation-wrap.scroll-on {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--white-color);
  box-shadow: 0 0.125rem 1.75rem 0 rgb(0, 0, 0, 0.09);
  transition: all 0.15s ease-in-out 0s;
}
.navigation-wrap.scroll-on .nav-link{
  color: var(--primary-color);
}

/*
==========================================
top-banner Design
==========================================
*/
.top-banner {
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("../images/background-internet-min.jpg") no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  padding: 16.875rem 0 9.375rem;
  min-height: 100vh;
}

.top-banner h1 {
  letter-spacing: 2px;
  text-align: center;
  padding-top: 1rem;
  text-shadow: 2px 2px #80808080;
  text-transform: uppercase;
}


.top-banner h3 {
  color: var(--white-color);
  text-align: center;
  letter-spacing: 5px;
  text-shadow: 1px 1px #404040;
  font-size: 20px;
}
.top-banner p {
  text-align: center;
  text-shadow: 1px 1px #404040;
  letter-spacing: 2px;
  font-size: 10px;
}
.top-banner a {
  text-decoration: none;
  color: white;
}

/*
==========================================
  counter Design
==========================================
*/
.counter-section {
  background-color: var(--primary-color);
  padding: 2.5rem 0;
}

.counter-section p {
  color: var(--white-color);
  text-transform: uppercase;
}

/*
==========================================
cloud section Design
==========================================
*/
.cloud-section {
  background: var(--white-color);
  padding-top: 10rem;
}

.cloud-section h2 {
  color: #de1b78;
  letter-spacing: 1px;
}

.cloud-section p {
  color: #50266c;
  font-weight: 400;
}

.cloud-section .pay-roll {
  padding-top: 10rem;
}

.cloud-section .pay-roll ul li {
  color: #50266c;
  padding-top: 2px;
  font-weight: 500;
}

.cloud-section ul li::before {
  position: absolute;
  left: -2.1875rem;
  color: var(--primary-color);
  font-size: 1.25rem;
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight: 900;
}

.cloud-section .card,
.cloud-section .card img {
  border-radius: 0.625rem;
}

.cloud-section .card img {
  width: 90%;
}

.cloud-section .text-sec {
  padding-left: 2rem;
}

/*
==========================================
why-tori section Design
==========================================
*/
.why-tori {
  padding-top: 5rem;
}
.why-tori h2 {
  padding-bottom: 3rem;
  letter-spacing: 2px;
  color: var(--primary-color) !important;
}

.why-tori p {
  color: black;
  font-weight: 500;
  letter-spacing: 1px;
}

.why-tori ul li {
  font-size: 1rem;
  color: var(--text-color);
  line-height: 32px;
  position: relative;
  margin-left: 30px;
}

.why-tori ul li::before {
  position: absolute;
  left: -2.1875rem;
  color: var(--primary-color);
  font-size: 1.25rem;
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight: 900;
}

.story-section {
  width: 100%;
  height: 28.125rem;
  background: url("../images/bg/bg-2.jpg") no-repeat center;
  background-size: cover;
  padding-top: 100px;
  text-align: center;
}

.story-section h2 {
  color: var(--primary-color);
}

/*
==========================================
quality section Design
==========================================
*/
.quality {
  padding-top: 10rem;
}
.quality h2 {
  color: #de1b78;
}

.quality p {
  color: #50266c;
}

/*
==========================================
 explore food section Design
==========================================
*/
.explore-tori .card {
  border: none;
  background-color: transparent;
  border-radius: 0.9375rem;
}

.explore-tori {
  padding-top: 10rem;
}

.explore-tori h2 {
  color: #de1b78;
  letter-spacing: 2px;
}
.explore-tori h4 {
  color: #de1b78;
  text-align: center;
  letter-spacing: 1px;
  padding-top: 1rem;
}

.explore-tori p {
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: #50266c;
}

.explore-tori .card img {
  border-radius: 0.9375rem;
  object-fit: cover;
}

.explore-tori .card span {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid #eee;
}

.explore-tori .card span del {
  color: var(--text-gray);
  margin-left: 0.5rem;
}

.explore-tori .card button a {
  color: white;
}
.explore-tori .card button a:hover {
  color: #de1b78 !important;
  text-decoration: none;
}

.explore-tori .card button:hover {
  color: #de1b78 !important;
}

/*
==========================================
 testimonial section Design
==========================================
*/

#testimonial {
  padding-top: 5rem;
}
.testimonial-section {
  width: 100%;
  background: url("../images/contact-bg-min.jpg") no-repeat center;
  background-size: cover;
  background-attachment: fixed;

  /* background-position:0 71.9125px; */
}

.testimonial-section h2 {
  color: var(--primary-color);
  letter-spacing: 2px;
}
.testimonial-section p {
  color: var(--white-color);
  font-weight: 300;
  font-size: 15px !important;
  padding-top: 10px ;
  
}
.testimonial-section h5{
  color: white;
  font-size: 15px;
  letter-spacing: 1px;
}

.testimonial-section .carousel-item {
  margin-top: 4rem;
  padding: 10rem 3.125rem;
  background-color: #0000006b;
  border-radius: 0.9375rem;
  text-align: center;
}

.testimonial-section .carousel-caption img {
  max-width: 10rem;
  border-radius: 50%;
  padding: 1.3125rem;
}

.testimonial-section .carousel-item .carousel-caption p {
  font-size: 1.3125rem;
  line-height: 2.0625rem;
  padding: 0 11% 0.625rem;
}

.testimonial-section .carousel-indicators {
  bottom: -2.8125rem;
}

.testimonial-section .carousel-indicators button {
  width: 15px;
  height: 15px;
  outline: none;
  border-radius: 50%;
  border: none;
  margin-right: 1rem;
  opacity: 0.2;
}

.testimonial-section .carousel-indicators button.active {
  opacity: 1;
}

/*
==========================================
FAQ section Design
==========================================
*/
/* .faq {
  padding-top: 10rem;
} */
.faq h4 {
  color: var(--primary-color);
  letter-spacing: 1px;
}

.faq h4 span {
  margin-right: 0.3125rem;
}
.faq h2 {
  color: #de1b78;
  letter-spacing: 1px;
}
.faq p {
  color: #50266c;
}

.book-food {
  width: 100%;
  background: url("../images/bg/net-service.jfif") no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  /* background-position:0 71.9125px; */
  padding: 10rem 0;
}

/* Form Control */
.newsletter {
  width: 55%;
  margin: 0 auto;
}

.newsletter h2 span {
  color: var(--primary-color);
}

.newsletter .form-control {
  height: 3.225rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  border: 0.1875rem solid var(--text-gray);
  color: var(--black-color);
  font-weight: 700;
}

.newsletter .form-control:hover,
.newsletter .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--primary-color);
}

/*
==========================================
footer section Design
==========================================
*/
/* footer {
  background-color: #111;
  padding: 60px 0px 20px 0px;
  padding-bottom: 10px !important;
   font-family: "Open Sans", sans-serif;
  
}

footer h3 {
  color: var(--white-color);
  letter-spacing: 2px;
 
    font-family: "Open Sans", sans-serif;
}

footer h3:after {
  content: "";
  display: block;
  width: 150px;
  height: 2px;
  background: var(--secondry-color);
  margin-top: 12px;
}

footer p {
  color: var(--text-gray);
  letter-spacing: 1px;
   font-family: "Open Sans", sans-serif;
  
}

.footer-list {
  margin-top: 20px;
  list-style: none;

}

.footer-list a {
  text-decoration: none;
  color: var(--text-gray);
  letter-spacing: 2px;
   font-family: "Open Sans", sans-serif;
}

.footer-image img {
  width: 25%;
} */


  
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: "Poppins", sans-serif;
        background: #f8f9fa;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }
      .content {
        flex: 1;
      }

      .modern-footer {
        background: linear-gradient(
          135deg,
          #0a0f2a 0%,
          #1a1f3a 50%,
          #2d1a3a 100%
        );
        color: #fff;
        position: relative;
        padding: 60px 0 30px;
        overflow: hidden;
      }

      /* ===== UPDATED LOGO AREA CSS ===== */
      .footer-logo-area {
        position: relative;
        width: 80px; /* Fixed width to prevent layout shift */
        margin-bottom: 30px;
      }

      .footer-logo {
        width: 80px;
        height: auto;
        transition:
          opacity 0.3s ease,
          transform 0.3s ease;
      }

      .logo-default {
        display: block;
        opacity: 1;
      }

      .logo-hover {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }

      .footer-logo-area:hover .logo-default {
        opacity: 0;
      }

      .footer-logo-area:hover .logo-hover {
        opacity: 1;
        transform: scale(1.05);
      }

      /* ===== REMAINING CSS UNCHANGED ===== */
      .modern-footer::before {
        content: "";
        position: absolute;
        top: -50%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(
          circle,
          rgba(222, 27, 120, 0.15) 0%,
          transparent 70%
        );
        border-radius: 50%;
        z-index: 0;
        animation: float 15s infinite ease-in-out;
      }
      .modern-footer::after {
        content: "";
        position: absolute;
        bottom: -30%;
        left: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(
          circle,
          rgba(80, 38, 108, 0.2) 0%,
          transparent 70%
        );
        border-radius: 50%;
        z-index: 0;
        animation: floatReverse 18s infinite ease-in-out;
      }
      @keyframes float {
        0%,
        100% {
          transform: translate(0, 0) rotate(0deg);
        }
        33% {
          transform: translate(-30px, 30px) rotate(5deg);
        }
        66% {
          transform: translate(20px, -20px) rotate(-5deg);
        }
      }
      @keyframes floatReverse {
        0%,
        100% {
          transform: translate(0, 0) rotate(0deg);
        }
        33% {
          transform: translate(30px, -30px) rotate(-5deg);
        }
        66% {
          transform: translate(-20px, 20px) rotate(5deg);
        }
      }
      .footer-content {
        position: relative;
        z-index: 2;
      }
      .company-tagline {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 25px;
      }
      .social-links {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .social-icon {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        text-decoration: none;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }
      .social-icon:hover {
        background: linear-gradient(135deg, #de1b78, #50266c);
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(222, 27, 120, 0.3);
        border-color: transparent;
      }
      .footer-heading {
        color: #fff;
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 25px;
        position: relative;
        padding-bottom: 12px;
      }
      .footer-heading::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 120px;
        height: 3px;
        background: linear-gradient(90deg, #de1b78, #50266c);
        border-radius: 3px;
        transition: width 0.3s ease;
      }
      .footer-heading:hover::after {
        width: 70px;
      }
      .contact-info {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .contact-info li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.9rem;
        line-height: 1.5;
      }
      .contact-info li i {
        color: #de1b78;
        font-size: 1rem;
        margin-top: 4px;
        min-width: 20px;
      }
      .contact-info li a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: color 0.3s ease;
      }
      .contact-info li a:hover {
        color: #de1b78;
      }
      .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .footer-links li {
        margin-bottom: 2px;
      }
      .footer-links li a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        display: inline-block;
        position: relative;
      }
      .footer-links li a::before {
        content: "\f105";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: #de1b78;
        margin-right: 8px;
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.3s ease;
        display: inline-block;
      }
      .footer-links li a:hover {
        color: #fff !important;
        transform: translateX(5px);
      }
      .footer-links li a:hover::before {
        opacity: 1;
        transform: translateX(0);
      }
      .back-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #de1b78, #50266c);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        box-shadow: 0 5px 15px rgba(222, 27, 120, 0.3);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
      }
      .back-to-top.show {
        opacity: 1;
        visibility: visible;
      }
      @media (max-width: 768px) {
        .footer-logo-area {
          margin-left: auto;
          margin-right: auto;
        }
        .footer-heading::after {
          left: 50%;
          transform: translateX(-50%);
        }
        .footer-heading,
        .footer-links,
        .social-links,
        .contact-info li {
          text-align: center;
          justify-content: center;
        }
      }
   

/* ===========about_part_start============= */

.about-part {
  padding-top: 1rem;
  text-align: center;
}

.about-part h2 {
  padding-top: 3rem;
  color: #de1b78;
  text-shadow: 1px 1px #50266c;
  letter-spacing: 2px;
}

.about-part .about_content p {
  padding: 2rem 0;
  color: #50266c;
  letter-spacing: 1px;
  font-weight: 500;
}

.about-mission-content {
  text-align: center;
}

.about-mission-content h2 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  color: #de1b78;
}

.about-mission-content p {
  margin: 0px;
  padding: 30px 0px;
  color: #50266c;
  font-weight: 500;
}

.about-mission-content span {
  display: block;
  width: 150px;
  height: 2px;
  background: #de1b78;
  margin: 0 auto;
  margin-bottom: 80px;
}

.about_box {
  text-align: center;
  margin-bottom: 90px;
}

.about_box img {
  max-width: 10%;
}

.about_box h6 {
  font-weight: 600;
  padding: 20px 0px;
  font-size: 18px;
  color: #de1b78;
  letter-spacing: 2px;
}

.about_box p {
  color: var(--black-color);
  font-weight: 500;
  letter-spacing: 1px;
}

.about_btn a {
  text-align: center;
  display: block;
  text-decoration: none;
  color: #0e0e0e;
  max-width: 130px;
  border: 1px solid #c5b9b9ab;
  border-radius: 30px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  margin: 0 auto;
  padding: 8px 0;
  transition: all 0.4s ease;
}

.about_btn a:hover {
  color: #ff9b1a;
  border: 1px solid #ff9b1a;
}

/* ===========about_part_end============= */

/* ===========our value start============= */
.our-values .our-values-content-1 h2 {
  color: var(--primary-color);
  letter-spacing: 2px;
  padding: 3rem 0rem;
}
.our-values .our-values-content-1 p {
  letter-spacing: 1px;
  color: var(--black-color);
  padding-bottom: 3rem;
}

.our-values .our-values-content-2 h4 {
  letter-spacing: 1px;
  font-size: 25px;
  font-weight: 700;
}
.our-values .our-values-content-2 p {
  color: var(--black-color);
}
.our-values .our-values-content-2 p span {
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-color);
}
.our-values .our-values-content-img img {
  width: 50%;
}
.values-total {
  padding-bottom: 3rem;
}

/* price part start       */
.table {
  padding-bottom: 20px;
  position: relative;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  transition: all 0.3s ease 0s;
}

.price-title {
  background: linear-gradient(to bottom right, #de1b78, #50266c);
  padding: 40px 20px 170px;
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
  color: #fff;
  overflow: hidden;
}

.price-title::before {
  content: "";
  height: 200px;
  width: 280px;
  position: absolute;
  bottom: -175px;
  left: -46px;
  background: #fff;
  border-radius: 80px;
  transform: rotate(-85deg);
}

.price-title::after {
  content: "";
  height: 200px;
  width: 280px;
  position: absolute;
  top: 150px;
  right: -70px;
  bottom: auto;
  left: auto;
  background: #fff;
  border-radius: 100px;
  transform: rotate(-40deg);
}

.price {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 100px;
  left: 50%;
  background: #fff;
  color: #404040;
  display: inline-block;
  padding: 30px 0;
  font-size: 30px;
  line-height: 50px;
  font-weight: 600;
  border-radius: 50%;
  transform: translate(-50%);
  transition: all 0.3s ease 0s;
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.3);
}

.table:hover .price {
  background: linear-gradient(to bottom right, #de1b78, #50266c);
  color: #fff;
}

.month {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 0;
}

.content-ul {
  list-style: none;
  padding: 0;
  margin: 20px;
  text-align: left;
  transition: all 0.3s ease 0s;
}

.content-ul li {
  padding: 7px 0 7px 50px;
  position: relative;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

.content-ul li::before {
  content: "";
  height: 24px;
  width: 24px;
  font-weight: 900;
  line-height: 20px;
  border-radius: 50%;
  border: 2px solid none;
  background: linear-gradient(to bottom right, #de1b78, #50266c);
  text-align: center;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.signup {
  background: linear-gradient(to bottom right, #de1b78, #50266c);
  position: relative;
  padding: 10px 40px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 30px;
  display: inline-block;
  color: #404040;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  z-index: 1;
}

.signup:hover {
  color: #fff;
  text-decoration: none;
}

.signup::before {
  content: "";
  height: 92%;
  width: 98%;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #fff;
  border-radius: 30px;
  z-index: -1;
}

.signup:hover::before {
  background: 0 0;
}

/* price part end       */

/*
==========================================
  Contact start
==========================================
*/
/* #contact-us {
  background-color: red;
  background: url(images/backgroung-contact.jpg);
  font-family: var(--secondry-font);
} */

.contact {
  padding-top: 5rem;
  /* background-image: 
    url(images/contact-bg-w-min.jpg);
  background-position: center;
  background-size: cover; */

}

.contactInfo p {
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--black-color) !important;
}
.contactInfo h2 {
  color: var(--black-color) !important;
  letter-spacing: 2px;
  text-shadow: 1px 1px #888888;
}
.contactInfo h3 {
  color: var(--black-color) !important;
  letter-spacing: 2px;
  text-shadow: 1px 1px #888888;
}

.contactInfo .text {
  letter-spacing: 1px;
  text-shadow: 1px 1px #50266c;
}

.contact-form {
  width: 100%;
  /* background: transparent; */
}
.contact-form h2 {
  color: var(--black-color) !important;
  letter-spacing: 2px;
  text-shadow: 1px 1px #888888;
}

.contact-form .input-box {
  position: relative;
  width: 100%;
  margin-top: 10px;
}

.contact-form .input-box span {
  letter-spacing: 2px !important;
  text-transform: uppercase;
}

.contact-form .input-box input,
textarea {
  width: 100%;
  padding: 5px 0;
  font-size: 16px;
  margin: 10px 0;
  padding: 1rem;
  border-color: var(--black-color);
  box-shadow: 1px 1px #888888;
  /* border: none;
      border-bottom: 2px solid var(--black-color);
      outline: none; */
  background: transparent;
  border-radius: 15px;
  color: var(--black-color);
}

.contact-form .input-box span {
  font-weight: 400;
  color: var(--black-color);
  letter-spacing: 1px;
}

.contact-btn button {
  border-radius: 25px;
}
.content p {
  color: white;
  font-weight: 400;
}

.contact-form ::placeholder {
  color: var(--black-color);
  letter-spacing: 1px;
}

/*
==========================================
  Contact end
==========================================
*/

.get-connected-steps-section {
  position: relative;
  padding: 50px 200px;
  background: #f2f3f4;
}

.get-connected-steps-container {
  position: relative;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: center;
}

.get-connect .step-box {
  width: 33.33%;
  position: relative;
  text-align: center;
}

.get-connect .step-box .icon {
  margin-bottom: 25px;
}

.get-connect .icon i {
  color: #50266c;
}
.get-connect .step-box .text-box p {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  color: #de1b78;
}

/* .get-connect .step-box.has-step-arrow::before {
  position: absolute;
  right: -15%;
  top: -8%;
  transform: translate(-50%, 50%);
  content: "";
  width: 65px;
  height: 65px;
  background-image: url(https://img.icons8.com/color/48/000000/long-arrow-right.png);
  background-size: 100%;
  background-repeat: no-repeat;
} */

.get-connect {
  padding-top: 10rem;
}

.pricing-banner {
  width: 100%;
  background: url("../images/pricing-banner-1.jpg") no-repeat center;
  background-size: cover;
  padding: 16.875rem 0 14.775rem;
  min-height: 100vh;
}
.pricing-content {
  padding-top: 10rem;
}
.pricing-content h1 {
  color: var(--primary-color);
  letter-spacing: 2px;
  padding-bottom: 2rem;
}

.pricing-banner h1 {
  letter-spacing: 2px;
}

.product-banner {
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../images/product-1.png") no-repeat center;
  background-size: cover;
  padding: 16.875rem 0 14.775rem;
  background-attachment: fixed;
  min-height: 100vh;
}

.product-banner h1 {
  color: var(--white-color);
  letter-spacing: 2px;
  text-shadow: 2px 2px #888888;
}

.product-banner p {
  color: snow;
}

/*
==========================================
 explore productsection Design
==========================================
*/
.explore-product {
  padding-bottom: 5rem;
}
.explore-product .card {
  background-color: transparent;
  border-radius: 2rem;
  box-shadow: 5px 5px #888888;
  padding: 2rem;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

.explore-product .card:hover {
  transition: 0.5s;
  transform: scale(1.1);
  border-color: var(--primary-color);
}

.explore-product .card img {
  border-radius: 0.9375rem;

  width: 100%;
  height: 25vh;
  object-fit: cover;
}

.explore-product .card span {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid #eee;
}

.explore-product .card span del {
  color: var(--text-gray);
  margin-left: 0.5rem;
}

.explore-product .card h4 {
  text-align: center;
  margin: 25px 0;
  color: #de1b78;
}
.explore-product .card h3 {
  color: var(--primary-color);
  text-align: center;
  font-size: 20px;
  letter-spacing: 1px;
}

.explore-product h2 {
  color: #de1b78;
  letter-spacing: 2px;
  text-align: center;
}

.explore-product p {
  color: #50266c;
  font-weight: 400;
  text-align: start;
}

.explore-product {
  padding-top: 10rem;
}

.about-banner {
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../images/contact-us-banner.png") no-repeat center;
  background-size: cover;
  padding: 16.875rem 0 14.775rem;
  background-attachment: fixed;
  min-height: 100vh;
}

.about-banner h3 {
  color: white;
  padding-top: 3rem;
  padding-bottom: 2rem;
  letter-spacing: 1px;
}

.about-banner h3 span {
  color: var(--primary-color);
  text-transform: capitalize;
}

.about-banner p {
  color: var(--white-color);
}

/* about misson vision */

.about-mission {
  padding-top: 10rem;
  padding-bottom: 3rem;
}

.about-mission-content {
  text-align: center;
}

.about-mission-content h4 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.2em;
  color: #de1b78;
}

.about-mission-content p {
  margin: 0px;
  padding: 30px 0px;
  font-size: 18px;
  color: var(--black-color);
  font-weight: 500;
}
.mission-vision {
  padding-bottom: 10rem;
}
.mission-vision .objective h2 {
  padding-bottom: 2rem;
  color: var(--primary-color);
  letter-spacing: 2px;
}

.mission-vision .objective p {
  letter-spacing: 1px;
  font-weight: 500;
  color: var(--black-color);
}

.mission-vision .card {
  border-color: transparent;
}

.mission-vision img {
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)),
    no-repeat center;
  background-size: cover;
  opacity: 9;
}

.mission-vision .card h3 {
  color: var(--secondry-color);
  letter-spacing: 2px;
  padding-bottom: 3rem;
  padding-top: 2rem;
  text-align: center;
}
.mission-vision .card p {
  color: var(--black-color);
  letter-spacing: 1px;
  font-weight: 400;
  /* padding-top: 3rem; */
  text-align: center;
  font-size: 17px;
  text-transform: uppercase;
}

.mission-vision .card h3:hover {
  transform: scale(1.2);
  transition: 0.5s;
}

/* service section */

.service-banner {
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../images/services-banner-min.jpg") no-repeat center;
  background-size: cover;
  padding: 16.875rem 0 14.775rem;
  background-attachment: fixed;
  min-height: 100vh;
}

.service-banner h1 {
  color: var(--white-color);
  letter-spacing: 2px;
  text-shadow: 2px 2px #888888;
}

.service-banner p {
  color: var(--white-color);
  letter-spacing: 1px;
}
.explore-service {
  padding-bottom: 5rem;
}

.explore-service .card {
  background-color: transparent;
  border-radius: 2rem;
  box-shadow: 5px 5px var(--secondry-color);
  padding: 2rem;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

.explore-service .card:hover {
  transition: 0.5s;
  transform: scale(1.1);
  border-color: var(--secondry-color);
}

.explore-service .card img {
  border-radius: 0.9375rem;
  object-fit: cover;
  width: 100%;
  height: 30vh;
}

.explore-service .card span {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid #eee;
}

.explore-service .card span del {
  color: var(--text-gray);
  margin-left: 0.5rem;
}

.explore-service .card h4 {
  text-align: center;
  margin: 25px 0;
  color: #de1b78;
}

.explore-service h3 {
  color: var(--secondry-color);
  letter-spacing: 2px;
  text-align: center;
  font-size: 20px;
}

.explore-service p {
  color: var(--primary-color);
  font-weight: 400;
  text-align: start;
}

.explore-service {
  padding-top: 10rem;
}

.explore-service .card .card-footer {
  background: transparent;
}

.dummy-card .card {
  height: 20rem;
  margin: 10px;
}

.dummy-card .card img {
  height: 5rem;
  width: 10rem;
  object-fit: contain;
}

.dummy-card .card h4 {
  color: var(--secondry-color);
}

.dummy-card .card p {
  font-size: 12px;
}

.profile-area{
  padding: 4rem 0;

}
.profile-area .card{
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  /* margin: 1rem; */
}
.profile-area .card:hover {
  transition: 0.5s;
  transform: scale(1.1);
  border-color: var(--primary-color);
}

.img1 img{
  height: 20vh;

  width: 100%;
  padding-top: 2rem;
}

.main-text {
padding: 1rem 0;
text-align: center;
}
.main-text h2{
  text-transform: uppercase;
  font-weight: 900;
  font-size: 20px;
  margin: 0 0 15px;
  letter-spacing: 1px;
}


.main-text p{
  font-size: 13px;
  padding: 0 35px;
  font-weight: 500;
}


.product-card .main-text h2{
  color: var(--primary-color);
}

.product-card .main-text p{
  color: var(--black-color);
}

.service-card .main-text h2{
  color: var(--secondry-color);
}

.service-card .main-text p{
  color: var(--black-color);
}


.contact-banner {
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../images/contact-img.jpeg") no-repeat center;
  background-size: cover;
  padding: 16.875rem 0 14.775rem;
  background-attachment: fixed;
  min-height: 100vh;
}

.contact-banner h1 {
  color: var(--white-color);
  letter-spacing: 2px;
  text-shadow: 2px 2px #888888;
}
.contact-banner p {
  color: snow;
}