/* FONT IMPORT */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* ROOT VARIABLES */
:root {
  --var-main-font: "Poppins";
  --var-text-color: #333;
  --var-white-color: #fff;
  --var-primary-color: #061b34;
  --var-accent-color: #c6d402;
}

/* GENERAL STYLES */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--var-main-font), sans-serif;
  color: var(--var-text-color);
}
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
a,
button {
  text-decoration: none !important;

  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a:hover,
button:hover {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.theme-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;

  color: #333;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--var-accent-color);
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 0px;
  align-items: center;
  justify-content: center;

  position: relative;
}
.theme-btn:hover {
  background: var(--var-accent-color);
  color: #333;
}
.theme-btn.outline {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.theme-btn.outline--dark {
  background: transparent;
  border: 1px solid var(--var-primary-color);
  color: var(--var-primary-color);
}
.btn-group {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.section {
  padding: 7rem 0;
}
.section-intro h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--var-primary-color);
  text-transform: uppercase;
  letter-spacing: 8px;
}
.section-intro h2 {
  font-size: 4.5rem;
  font-weight: 800;
  text-transform: capitalize;
  margin-bottom: 2rem;
}
.section-intro p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}
.text--green {
  color: var(--var-accent-color);
}
.section--bg {
  background: var(--var-primary-color);
  color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
  text-transform: capitalize;
}
.mail-link {
  text-transform: lowercase;
}

/* HEADER */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  padding: 0rem;
  transition: all 0.3s;
}
.header.sticky {
  /*background: var(--var-primary-color);*/
  background:#0c2e4ca8!important;
  /* border-radius: 0 0 10px 10px; */
}
.navbar {
  align-items: center;
}
.navbar-toggler i {
  color: #fff;
}
.top-nav {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 2rem;
  margin-bottom: 0.5rem;
}
.top-nav .show-on-pc {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
  font-weight: 600;
}
.top-nav a .icon {
  font-size: 1.5rem;
  color: var(--var-accent-color);
}
.navbar-nav {
  gap: 1.2rem;
}
.navbar-light .navbar-nav .show > .nav-link {
  color: #fff;
}
.navbar-nav .nav-item .nav-link {
  color: #fff;
  font-weight: 600;
  font-size: 1.2rem;
  text-transform: capitalize;
}
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item .nav-link:hover {
  color: var(--var-accent-color);
}
.nav-item.dropdown {
  position: inherit;
}
.nav-link.dropdown-toggle:focus {
  color: #fff;
}
.dropdown-menu {
  width: 100%;
  padding: 2rem;
}
.dropdown-card {
  margin-bottom: 2rem;
}
.dropdown-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
/* HEADER */

/* INNER MAIN */
.section--inner-main {
  background: url(../img/main-bg.png);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 700px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 128px 128px;
}
.section--inner-main h2 {
  font-size: 5rem;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--var-accent-color);
  margin-bottom: 1.5rem;
}
.section--inner-main p {
  font-size: 1.2rem;
  color: #fff;
  text-transform: capitalize;
}
/* INNER MAIN */

/* MAIN SECTION */
.section--main {
  background: url(../img/main-bg.png);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 900px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 128px 128px;
  margin-top: -24px !important;
}
.main-content {
}
.main-content h3 {
  font-size: 1.2rem;
  text-transform: capitalize;
  color: #fff;
}
.main-content h1 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--var-accent-color);
  text-transform: capitalize;
  margin-bottom: 2rem;
}
.main-content p {
  color: #fff;
  margin-bottom: 2rem;
}
.main-content .list-div {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.main-content ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  color: #fff;
}
.main-content ul li {
  position: relative;
  font-size:.9rem;
}
.main-content ul li::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -20px;
  content: "\f058";
  font-family: "Font Awesome 5 Pro";
  color: var(--var-accent-color);
  font-size: 0.7rem;
  font-weight: 700;
}
.main-content .btn-group {
  margin-bottom: 2rem;
}
.banner-form {
  background: #fff;
  position: relative;
  z-index: 2;
}
.banner-form::before {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid var(--var-accent-color);
  left: -8%;
  top: 8%;
  content: "";
  z-index: -1;
  border-radius: 20px;
}
.banner-form::after {
  position: absolute;
  top: -15%;
  right: -12%;
  content: "50% OFF";
  background: var(--var-accent-color);
  width: 130px;
  height: 130px;
  border-radius: 100%;
  border: 5px solid var(--var-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}
.banner-form form {
  background: #fff;
}
.form-head {
  background: var(--var-accent-color);
  padding: 1.2rem 2rem;
}
.form-head h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0;
}
.form-main {
  padding: 1rem;
}
/* MAIN SECTION */

/* BADGES */
.section--badges {
  padding: 3rem 0;
}
.badge-card {
  text-align: center;
}
.badge-card h4 {
  font-size: 1.2rem;
  margin-top: 2rem;
}
/* BADGES */

/* PROCESS */
.section--process {
  background: url(../img/process-bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 128px 128px 0 0;
}
.section--process .section-intro {
  color: #fff;
  margin-bottom: 5rem;
}
.process-list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-list li {
  flex: 0 0 33%;
}
.process-list {
  flex-wrap: wrap;
}
.process-list li figure {
  text-align: center;
  color: #fff;
  position: relative;
}
.process-list li figure:before {
  background-image: url(../img/eclipse.png);
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.process-list li figure:after {
  content: "";
  position: absolute;
}
.process-list li figure.stick-down:after {
  content: url(../img/stick-down.png);
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: -30px;
  right: 60px;
  /* transform: translate(-50%, -50%); */
}
.process-list li figure.stick-up:after {
  content: url(../img/stick-up.png);
  position: absolute;
  width: 40px;
  height: 40px;
  top: -40px;
  right: 60px;
  /* transform: translate(-50%, -50%); */
}
.process-list li figure h4 {
  font-size: 1.5rem;
  margin-top: 1rem;
}
/* PROCESS */

/* PORTFOLIO */
.section--portfolio {
}
.section--portfolio .section-intro {
  margin-bottom: 5rem;
}
.portfolio-tabs {
  margin-bottom: 3rem;
  gap: 1rem;
}
.portfolio-tabs .nav-link {
  background: var(--var-primary-color);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0px;
}
.portfolio-tabs .nav-link:hover,
.portfolio-tabs .nav-link.active {
  background: var(--var-accent-color);
}
.section--portfolio .tab-pane a img {
  width: 100%;
  /* height: 300px; */
  object-fit: cover;
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}
.section--portfolio .tab-pane a img:hover {
  transform: scale(1.1);
}
/* PORTFOLIO */

/* NEED */
.section--need {
  background: url(../img/need-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section--need .section-intro {
  color: #fff;
  margin-bottom: 5rem;
}
.need-card {
  transition: all 0.3s;
  margin: 1rem;
  padding: 1.2rem;
  border-radius: 8px;
}
.need-card:hover {
  background: rgba(255, 255, 255, 0.3);
}
.need-card figure {
  text-align: center;
}
.need-card figure img {
  margin: 0 auto;
}
.need-card figure h4 {
  font-size: 1rem;
  color: #fff;
  margin-top: 1rem;
}
/* NEED */

/* PACKAGES */
.section--packages {
  padding: 7rem 0 3rem 0;
}
.section--packages .section-intro {
  margin-bottom: 5rem;
}
.package-card {
  padding: 2rem;
  border: 1px solid var(--var-primary-color);
  margin: 1rem;
  transition: all 0.3s;
}
.package-card:hover {
  background: var(--var-primary-color);
  color: #fff;
  transform: scale(1.03);
}
.package-name {
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
}
.package-card .prices {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 1.2rem;
}
.main-price {
  font-size: 2rem;
}
.cut-price {
  font-size: 1.2rem;
  text-decoration: line-through;
}
.package-card ul {
  list-style: none;
  height: 200px;
  overflow-y: scroll;
  margin-bottom: 1.2rem;
  padding: 0 2rem;
}
.package-card ul li {
  position: relative;
}
.package-card ul li::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -20px;
  content: "\f058";
  font-family: "Font Awesome 5 Pro";
  color: var(--var-accent-color);
  font-size: 0.7rem;
  font-weight: 700;
}
.package-card ul::-webkit-scrollbar {
  width: 5px;
}
.package-card ul::-webkit-scrollbar-track {
  background: var(--var-primary-color);
  border: 1px solid #fff;
}
.package-card ul::-webkit-scrollbar-thumb {
  background: var(--var-accent-color);
}
.addon-text {
  text-align: center;
}
.theme-btn.order {
  display: block;
  text-align: center;
  margin-bottom: 1.2rem;
}
.package-contact-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
.package-contact h4 {
  font-size: 0.8rem;
}
.package-contact .theme-btn {
  font-size: 0.6rem;
}
.package-contact .theme-btn.green {
  background: #fff;
}
/* PACKAGES */

/* COMBO */
.section--combo-package {
  padding: 3rem 0 7rem 0;
}
.section--combo-package .container {
  background: url(../img/combo-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5rem 3rem 3rem 3rem;
  color: #fff;
  position: relative;
}
.section--combo-package .container:before {
  position: absolute;
  top: -5%;
  left: -5%;
  content: "All in one combo package";
  font-size: 2rem;
  color: var(--var-primary-color);
  text-transform: capitalize;
  font-weight: 700;
  background: var(--var-accent-color);
  padding: 1.2rem;
}
.combo-package-content {
  margin-bottom: 2rem;
}
.combo-package-content h3 {
  text-transform: capitalize;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.combo-package-content ul {
  list-style: none;
  padding: 0 1rem;
}
.combo-package-content ul li {
  position: relative;
}
.combo-package-content ul li::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -20px;
  content: "\f058";
  font-family: "Font Awesome 5 Pro";
  color: var(--var-accent-color);
  font-size: 0.8rem;
  font-weight: 400;
}
.package-content-card {
  padding: 2rem;
  border: 3px solid var(--var-accent-color);
  text-align: center;
}
.package-content-card h3 {
  font-size: 2rem;
  font-weight: 400;
  text-transform: capitalize;
}
.package-content-card .price {
  font-size: 4rem;
  color: var(--var-accent-color);
  margin-bottom: -1rem;
}
.package-content-card .only {
  /* text-align: right; */
  display: block;
  margin-bottom: 1.2rem;
}
.package-content-card .price-cut {
  font-size: 2rem;
  text-decoration: line-through;
}
.package-content-card .limited {
  text-transform: capitalize;
  font-size: 1.2rem;
  margin-bottom: -0.2rem;
}
.package-content-card .discount {
  margin-bottom: 1rem;
}
.package-content-card .theme-btn {
  display: block;
  margin-bottom: 1rem;
}
.package-content-card .theme-btn.white {
  background: #fff;
}
/* COMBO */

/* TESTIMONIAL */
.section--testimonials {
  background: url(../img/testimonial-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section--testimonials .section-intro {
  color: #fff;
  margin-bottom: 5rem;
}
.testimonial-card {
  padding: 1rem 1rem 3rem 1rem;
  background: #fff;
  margin: 0 0.5rem;
}
.testimonial-card h3 {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}
.testimonial-card h4 {
  font-size: 1.2rem;
  font-weight: 600;
}
.testimonial-card p {
  margin-bottom: 2rem;
  height: 200px;
  overflow-y: scroll;
}
.testimonial-card p::-webkit-scrollbar {
  width: 5px;
}
.testimonial-card p::-webkit-scrollbar-track {
  background: #cecece;
  border: 1px solid #fff;
}
.testimonial-card p::-webkit-scrollbar-thumb {
  background: var(--var-primary-color);
}
/* TESTIMONIAL */

/* CTA */
.section--cta {
  background: url(../img/cta-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section--cta h2 {
  color: var(--var-primary-color);
  font-size: 4.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.section--cta ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 3rem;
}
.section--cta ul li a {
  color: var(--var-primary-color);
  font-size: 2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.section--cta .theme-btn {
  background: var(--var-primary-color);
  color: #fff;
  padding: 0.5rem 2rem;
}
/* CTA */

/* AWARDS */
.awards-slider .slick-track {
  padding: 2rem 0;
}
.awards-slider .inner-slide figure {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  margin: 0 1rem;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.awards-slider .inner-slide figure img {
  margin: 0 auto;
}
/* AWARDS */

.slick-next,
.slick-prev {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: #000;
  border: none;
  outline: 0;
  background: 0 0;
}
.slick-next {
  right: -30px;
}
.slick-prev {
  left: -50px;
}
.slick-next:before {
  content: "\f0a9";
}
.slick-prev:before {
  content: "\f0a8";
}
.packages-slider .slick-next:before,
.packages-slider .slick-prev:before {
  font-family: "Font Awesome 5 Pro";
  font-size: 40px;
  line-height: 1;
  opacity: 0.75;
  color: #000;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.need-slider .slick-next:before,
.need-slider .slick-prev:before {
  font-family: "Font Awesome 5 Pro";
  font-size: 40px;
  line-height: 1;
  opacity: 0.75;
  color: #fff;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* FOOTER */
.footer {
  background: url(../img/footer-bg.png);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  padding: 11rem 0 0 0;
}
.footer-logo {
  margin-bottom: 2rem;
  display: block;
}
.footer-social {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.footer-social li a {
  font-size: 2rem;
  color: #fff;
}
.footer-social li a:hover {
  color: var(--var-accent-color);
}
.footer-form .form-group input,
.footer-form .form-group textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  border-radius: 0px;
  padding: 1rem;
  margin-bottom: 1rem;
  resize: none;
  color: #fff;
}
.footer-form .form-group input::placeholder,
.footer-form .form-group textarea::placeholder {
  color: #fff;
}
.footer-form .form-group input:focus,
.footer-form .form-group textarea:focus {
  box-shadow: none;
}
.footer-form .theme-btn {
  display: block;
  width: 100%;
}
.footer-link-div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-content h3 {
  font-size: 1.5rem;
  text-transform: capitalize;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-content ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.footer-content ul li a {
  color: #fff;
}
.footer-content ul li a .icon {
  font-size: 1.2rem;
  color: var(--var-accent-color);
}
.footer-content ul li a:hover {
  color: var(--var-accent-color);
}
.footer-content img {
  margin-bottom: 1rem;
  display: block;
}
.footer-bottom {
  margin-top: 4rem;
  padding: 1rem;
  background: var(--var-primary-color);
}
.copyright-text {
  color: #fff;
  margin: 0;
  text-transform: capitalize;
}
.policy-links {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 2rem;
  margin: 0;
}
.policy-links li a {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
}
/* FOOTER */

/* CONTACT PAGE */
.contact-us-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact-us-list li a {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--var-white-color);
}
.contact-us-list li a .icon {
  font-size: 2rem;
  color: var(--var-accent-color);
}
.contact-us-list li a:hover {
  color: var(--var-accent-color);
}
.contact-page-form h3 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-transform: capitalize;
  color: var(--var-white-color);
}
.contact-page-form p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: var(--var-white-color);
}
/*.contact-page-form .form-group .form-control {*/
/*  border: none;*/
/*  border-bottom: 1px solid #000;*/
/*  padding: 1rem;*/
/*  margin-bottom: 2rem;*/
/*  box-shadow: none;*/
/*  border-radius: 0;*/
/*  resize: none;*/
/*}*/

.contact-page-form .form-group .form-control {
    border: none;
    border-bottom: 1px solid #000;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: none;
    border-radius: 0;
    resize: none;
    border-radius: 4px;
}
 

.contact-page-form .form-group input::placeholder,
.contact-page-form .form-group textarea::placeholder {
  color: #737373;
}
.contact-page-form .theme-btn {
  display: block;
  width: 100%;
}
.section--contact-us{
    background:url(../img/footer_bg.png);
    background-size:cover;
    background-repeat:no-repeat;
}
/* CONTACT PAGE */

/* ABOUT PAGE */
.section--strength {
  background: url(../img/strength-bg.png);
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
}
.section--strength .section-intro h2 {
  font-size: 3rem;
}
/* ABOUT PAGE */

/* SERVICES PAGE */
.service-content {
  margin: 5rem 0;
}
.service-content h1 {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 2.5rem;
}
.service-content h4 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
.service-content h5 {
  font-size: 1.2rem;
  font-weight: 400;
}
.service-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.service-content ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 2rem;
}
.service-content ul li {
  font-size: 1rem;
}

span.swiper-pagination-bullet {
  background: #464646;
  display: inline-block;
  width: 9px;
  height: 9px;
  line-height: 18px;
  position: relative;
  opacity: 1;
}

span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #c6d402;
  height: 18px;
  width: 18px;
}

span.swiper-pagination-bullet + span.swiper-pagination-bullet {
  margin-left: 15rem !important;
}

.swiper-custom-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

span.swiper-pagination-bullet + span.swiper-pagination-bullet:after {
  content: "";
  width: 200px;
  height: 1px;
  background: #464646;
  position: absolute;
  left: -220px;
  top: 9px;
  opacity: 1 !important;
}

span.swiper-pagination-bullet span:before {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  color: var(--var-accent-color);
}
span.swiper-pagination-bullet:nth-child(1) span:before {
  content: "Logo";
}
span.swiper-pagination-bullet:nth-child(2) span:before {
  content: "Brand";
}
span.swiper-pagination-bullet:nth-child(3) span:before {
  content: "Graphic";
}
span.swiper-pagination-bullet:nth-child(4) span:before {
  content: "Print";
}

span.swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  content: "";
  height: 40px;
  width: 40px;
  border: 1px solid var(--var-accent-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
}

.swiper-controls {
  position: relative;
}
/* SERVICES PAGE */

/* MODAL */

.modal-anim {
  position: absolute;
  bottom: 0;
  right: 0;
}
.modal-content {
  padding: 1rem;
  border-radius: 8px;
  gap: 2rem;
}
.modal-form .form-head {
  margin-bottom: 1rem;
  border-radius: 4px;
}
.modal-form .theme-btn {
  border-radius: 4px;
}
.form-control {
  resize: none;
}
/* MODAL */
.loader{
    text-align:center;
}
.loader img{
    width:40px;
    margin: 0 auto;
}

/*BACK TO TOP*/
#button {
  display: flex;
  align-items:center;
  justify-content:center;
  background-color: var(--var-accent-color);
  color:#fff;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  left: 30px;
  transition: all .3s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}

 .webDesImg {
    overflow:hidden;
    object-fit: cover;
    object-position: top;
    height: 500px;}
.nav-link {
    display: block;
    padding: 0.5rem 0.4rem;
}
span.mo {
    font-size: 16px;
    text-transform: lowercase;
}

h4.pack_bon {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

p.pack_bonus_span {
    display: flex;
    text-align: left;
    align-items: center;
    margin: 0.3px;
}
i#star {
    color: #c6d402;
    margin-right: 10px;
}
#box_height_same{
    display:flex;
}