/**
* Template Name: Vesperr
* Template URL: https://bootstrapmade.com/vesperr-free-bootstrap-template/
* Updated: Jun 06 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #222222; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #3498db; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #444444;  /* The default color of the main navmenu links */
  --nav-hover-color: #3498db; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #3498db; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 7px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: #000;
  background-color: #fff;
  border: 1px solid var(--accent-color);
  transform: scale(1.2);

}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding: 40px 0;
  position: relative;
  box-shadow: 0px 0px 12px 0px color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .social-links {
  margin-top: 20px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin: 0 5px;
  transition: 0.3s;
}

.social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer .credits {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  position: relative;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 30px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  position: relative;
}

.section-title h2:before,
.section-title h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  display: inline-block;
}

.section-title h2:before {
  margin: 0 15px 10px 0;
}

.section-title h2:after {
  margin: 0 0 10px 15px;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  position: relative;
  background: url("../img/home-bg.png") center bottom no-repeat;
  background-size: cover;
  padding: 85px 0 100px 0;
}

.hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 5px 0 20px 0;
  font-size: 22px;
  font-weight: 400;
}

.hero .btn-get-started {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 36px;
  border-radius: 50px;
  transition: 0.3s;
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.hero .btn-get-started:hover {
  color: #000;
  background-color: #fff;
  border: 1px solid var(--accent-color);
  transform: scale(1.1);
}

.hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
  padding-bottom: 40px;

}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 13px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(40px);  
  }
  100% {
    transform: translateY(-20px);  
  }

}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  opacity: 0.5;
  filter: grayscale(100);
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 30px;
}

.about .content p {
  margin-bottom: 1px;
  text-align: justify;
}
.about .content {
  margin-bottom: 0;
  padding-bottom: 0;

}

.about .content .about-btn {
  padding: 8px 30px 9px 30px;
  color: var(--accent-color);
  border-radius: 50px;
  transition: 0.3s;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--accent-color);
}

.about .content .about-btn i {
  font-size: 16px;
  padding-left: 5px;
}

.about .content .about-btn:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.about .icon-box i {
  font-size: 40px;
  color: var(--accent-color);
  margin-bottom: 1px;
}

.about .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.about .icon-box h4 a {
  color: var(--heading-color);
  transition: 0.3s;
}

.about .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

.about .icon-box:hover h4 a {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.about.section {
  margin-bottom: 0;
  padding-bottom: 0;
}
.stats .stats-item {
  padding: 0;
  margin-top: 0;
  margin-bottom: 55px;
}

.stats .stats-item i {
  font-size: 44px;
  color: var(--accent-color);
  line-height: 0;
  margin-right: 15px;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 30px;
  display: inline;
  font-weight: 500;
  line-height: 30px;
}
.stats .stats-item .separator {
  color: var(--heading-color);
  font-size: 30px;
  display: inline;
  font-weight: 500;
  line-height: 30px;
}


.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 0 0 0 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  box-shadow: 0px 0 30px 0 color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 20px 10px;
  transition: all ease-in-out 0.4s;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.services .service-item:before {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
  right: -80px;
  top: -80px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transition: all 0.3s;
  z-index: -1;
}

.services .service-item:after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--accent-color), transparent 97%);
  right: -140px;
  top: -140px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  transition: all 0.3s;
  z-index: -1;
}

.services .service-item i {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 24px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.services .service-item h4 {
  font-weight: 60;
  margin: 15px 0 0 0;
  transition: 0.3s;
  font-size: 16px;
}

.services .service-item h4 a {
  color: var(--heading-color);
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin: 10px 0 0 0;
}

.services .service-item:hover:before,
.services .service-item:hover:after {
  background: var(--accent-color);
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.services .service-item:hover h4 a,
.services .service-item:hover p {
  color: var(--contrast-color);
}

.services .service-item:hover i {
  background: var(--contrast-color);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Alt Services Section
--------------------------------------------------------------*/
.alt-services .img {
  border-radius: 8px;
  overflow: hidden;
}

.alt-services .img img {
  transition: 0.6s;
}

.alt-services .details {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 30px;
  transition: all ease-in-out 0.3s;
  background: color-mix(in srgb, var(--contrast-color), transparent 5%);
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 0 25px color-mix(in srgb, var(--default-color), transparent 92%);
}

.alt-services .details h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.alt-services .details p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.alt-services .service-item:hover .details h3 {
  color: var(--accent-color);
}

.alt-services .service-item:hover .img img {
  transform: scale(1.2);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features{
  padding-top: 20px;
}
.features .features-item {
  box-shadow: 0px 0 30px 0 color-mix(in srgb, var(--default-color), transparent 70%);
  transition: all ease-in-out 0.4s;
  overflow: hidden;
  z-index: 1;
  background-color: var(--box-background-color);
  display: flex;
  align-items: center;
  /*padding: 20px;*/
  padding: 20px 10px;
  height: 100%;
  transition: 0.3s;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  position: relative;
}

.features .features-item:before {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--accent-color), transparent 94%);
  right: -80px;
  top: -80px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transition: all 0.3s;
  z-index: -1;
}

.features .features-item:after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  right: -140px;
  top: -140px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  transition: all 0.3s;
  z-index: -1;
}

.features .features-item i {
  background: var(--accent-color);
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--contrast-color);
  font-size: 24px;

  line-height: 0;
}
.features .features-item h3 {
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 16px;
}

.features .features-item h3 a {
  color: var(--accent-color);
  transition: 0.3s;
}

.features .features-item:hover {
  border-color: var(--accent-color);
}

.features .features-item h3 {
  font-weight: 60;
  margin: 15px 0 0 0;
  transition: 0.4s;
  font-size: 16px;
  font-weight: 500;
}

.features .features-item h3 a {
  color: var(--heading-color);
  padding-left: 5px;
}

.features .features-item p {
  line-height: 24px;
  font-size: 14px;
  margin: 10px 0 0 0;
    font-weight: 1000;
}

.features .features-item:hover:before,
.features .features-item:hover:after {
  background: var(--accent-color);
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.features .features-item:hover h3 a,
.features .features-item:hover p {
  color: var(--contrast-color);
}

.features .features-item:hover i {
  background: var(--contrast-color);
  color: var(--accent-color);
 }
/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  padding-top: 15px;
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.testimonials .testimonial-wrap {
  padding-left: 60px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  background-color: var(--contrast-color);
  box-shadow: 10px 12px 25px color-mix(in srgb, var(--default-color), transparent 80%);
  box-sizing: content-box;
  padding: 20px 20px 20px 50px;
  margin: 30px 15px;
  min-height: 200px;
  position: relative;
}

.testimonials .testimonial-item .testimonial-img {
  width: 100px;
  border-radius: 100px;
  border: 6px solid var(--background-color);
  position: absolute;
  left: -45px;
}
.testimonials .testimonial-item .testimonial-img:hover {
  transform: scale(1.2);
  border: 1px solid var(--default-color);


}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 60%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

@media (max-width: 767px) {
  .testimonials .testimonial-wrap {
    padding-left: 0;
  }

  .testimonials .testimonials-carousel,
  .testimonials .testimonials-slider {
    overflow: hidden;
  }

  .testimonials .testimonial-item {
    padding: 30px;
    margin: 15px;
  }

  .testimonials .testimonial-item .testimonial-img {
    position: static;
    left: auto;
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/

.video {
  color: #fff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 100%;
  position: absolute;
  left: 53%;
  top: 55%;
  margin-left: -35px;
  margin-top: -35px;
  font-size: 21px;
  background: #f00;
  padding-left: 4px;
}
.video:hover{
  transform:scale(1.3);
}
.portfolio-infor .waves-block .waves {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #fff;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  border-radius: 100%;
  -webkit-animation: waves 3s ease-in-out infinite;
  animation: waves 3s ease-in-out infinite;
  left: 64%;
  margin-left: -100px;
  top: 70%;
  margin-top: -100px;
}
.portfolio-infor .waves-block .wave-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.portfolio-infor .waves-block .wave-2 {
    -webkit-animation-delay: 2s;
    animation-delay: 1s;
}
.portfolio-infor .waves-block .wave-3 {
    -webkit-animation-delay: 3s;
    animation-delay: 2s;
}
.why-choose .choose-right {
  height: 250px;
  margin-top: 30px;
}

.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-content img {
  transition: 0.3s;
}


.portfolio .portfolio-content .portfolio-infor {
  opacity: 100%;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.4);
  padding: 15px;
}
.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.portfolio .portfolio-content .portfolio-infor h4,
.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p,
.portfolio .portfolio-content .portfolio-infor p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-content:hover img {
  transform: scale(1.2);
}


/* Video Animations */

@-webkit-keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    50% {
        opacity: 0.9;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    }
    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}
@keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    50% {
        opacity: 0.9;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    }
    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

@-webkit-keyframes lineanim {
 50% {
  -webkit-transform:scaleY(1);
  transform:scaleY(1);
  -webkit-transform-origin:top left;
  transform-origin:top left
 }
 50.1% {
  -webkit-transform-origin:bottom left;
  transform-origin:bottom left
 }
 100% {
  -webkit-transform:scaleY(0);
  transform:scaleY(0);
  -webkit-transform-origin:bottom left;
  transform-origin:bottom left
 }
}
@keyframes lineanim {
 50% {
  -webkit-transform:scaleY(1);
  transform:scaleY(1);
  -webkit-transform-origin:top left;
  transform-origin:top left
 }
 50.1% {
  -webkit-transform-origin:bottom left;
  transform-origin:bottom left
 }
 100% {
  -webkit-transform:scaleY(0);
  transform:scaleY(0);
  -webkit-transform-origin:bottom left;
  transform-origin:bottom left
 }
}


/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team {
--background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.team .member {
  position: relative;
}

.team .member .member-img {
  margin: 0 80px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 4px solid var(--background-color);
  box-shadow: 0 25px 35px -10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1024px) {
  .team .member .member-img {
    margin: 0 60px;
  }
}

.team .member .member-img img {
  position: relative;
  z-index: 1;
}

.team .member .member-img .social {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding-bottom: 20px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}

.team .member .member-img .social a {
  transition: 0.3s;
  color: var(--contrast-color);
  font-size: 20px;
  margin: 0 8px;
}

.team .member .member-img .social a:hover {
  color: var(--accent-color);
}

.team .member .member-info {
  margin-top: 30px;
}

.team .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 18px;
}

.team .member .member-info span {
  font-style: italic;
  display: block;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.team .member .member-info p {
  margin-bottom: 0;
  font-size: 14px;
}

.team .member:hover .member-img {
  padding-bottom: 0;
  visibility: visible;
  transform: scale(1.2);
  border: 2px solid var(--accent-color);
}


/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item1,
.pricing .pricing-item3 {
  box-shadow: 0 12px 60px -10px color-mix(in srgb, var(--default-color), transparent 10%);
  border-top: 4px solid var(--background-color);
  padding: 20px 10px;
  height: 96%;
  border-radius: 5px;
  text-align: center;
}
.pricing .pricing-item2 {
  box-shadow: 0 12px 60px -10px color-mix(in srgb, var(--default-color), transparent 10%);
  border-top: 4px solid var(--background-color);
  padding: 20px 10px;
  height: 100%;
  border-radius: 5px;
  text-align: center;
}
.pricing .pricing-item2{
    transform: scale(1.1);
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
}

.pricing h4 {
  color: var(--accent-color);
  font-size: 48px;
  font-weight: 400;
  font-family: var(--heading-font);
  margin-bottom: 0;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
}

.pricing ul {
  padding: 10px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  font-weight: 400;
  padding: 3px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 10px;
  transition: none;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--heading-font);
  transition: 0.3s;
  border: 1px solid var(--accent-color);

}

.pricing .buy-btn:hover,
.pricing .featured .buy-btn:hover
 {
 color: #000;
 background-color: #fff;
border-color: var(--accent-color);
transform: scale(1.2);
}

.pricing .featured {
  border-top-color: var(--accent-color);
}

.pricing .featured .buy-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
}

@media (max-width: 992px) {
  .pricing .box {
    max-width: 60%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 767px) {
  .pricing .box {
    max-width: 80%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 420px) {
  .pricing .box {
    max-width: 100%;
    margin: 0 auto 30px auto;
  }
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.faq .faq-item {
  margin: 20px 0;
  padding: 20px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.faq .faq-item i {
  color: var(--accent-color);
  font-size: 18px;
  margin-right: 10px;
}

.faq .faq-item h4 {
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
}

.faq .faq-item p {
  font-size: 15px;
}

.faq .faq-item:first-child {
  padding-top: 0;
  margin-top: 0;
}

.faq .faq-item:last-child {
  border: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  background-image: url("../img/contact-bg.png");
  background-position: left center;
  background-repeat: no-repeat;
  position: relative;
}

@media (max-width: 640px) {
  .contact {
    background-position: center 50px;
    background-size: contain;
  }
}

.contact:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

.contact .info-item+.info-item {
  margin-top: 20px;
}

.contact .info-item a {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item a:hover {
  background: #fff;
  color: #000;
  padding-bottom: 0;
  visibility: visible;
  transform: scale(1.3);
}


.contact .info-item h3 {
  font-size: 20px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form .error-message {
  display: none;
  background: #34a6ef;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #34a6ef;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 20px;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}
.contact .php-email-form button[type=submit]:hover {
  color: #000;
  background-color: #fff;
  border: 1px solid var(--accent-color);
  transform: scale(1.2);
}


@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/

.service-details{
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  margin-bottom: 1px;
  padding: 20px 20px 8px 8px;
  box-shadow: inset 0px 0px 0px 10px color-mix(in srgb, var(--default-color), transparent 20%);
}

.service-details .services-list {
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
  box-shadow: 0px 0 40px color-mix(in srgb, var(--default-color), transparent 20%);

}
.vertical-align{
 display: flex;
 }
.service-details .services-list a{
  display: block;
  line-height: 1;
  padding: 1px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 10px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}
.service-details .services-list li{
  display: block;
  line-height: 1;
  padding: 1px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 10px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}
.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 10px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 900;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
  text-align: justify;
}

.service-details ul {
  list-style: none;
  padding-left: 20px;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}
.service-details.info-item+.info-item {
  margin-top: 20px;

}
.service-details .info-item{
  padding-left: 20px;
}

.service-details .info-item a {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
  visibility: visible;

}
.service-details .info-item a:hover
{
  background: #fff;
  color: #000;
  padding-bottom: 0;
  visibility: visible;
  transform: scale(1.3);
}

.service-details .pay-now {

  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 5px 18px;
  margin:10px 0 20px 180px;
  border-radius: 50px;
  transition: 0.3s;
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);

}
.service-details .pay-now h6{
  color: var(--contrast-color);
}


.service-details .pay-now:hover,
.service-details .pay-now:hover h6{
  color: #000;
  background: #fff;
  transition: 0.3s;
  transform: scale(1.1);
  visibility: visible;
 }
/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}
.made {
  text-align: center;
  padding-top: 10px;
  font-size: 18px;

}
.output-container-good {
  text-align: center;
  color: var(--contrast-color);
  background-color: var(--accent-color);
  margin-top: 10px;
  border-radius: 20px;
}
.output-container-bad {
  text-align: center;
  color: var(--contrast-color);
  background-color: #ff2000; 
  margin-top: 10px; 
  border-radius: 20px;
}
.formSubmit button,
.formSubmit button:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 16px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  border-color: var(--accent-color);
  transition: 0.3s;
}
.formSubmit button:hover,
.formSubmit button:focus:hover {
  color: #000;
  background-color: #fff;
  border: 1px solid var(--accent-color);
  transform: scale(1.2);
}
.allignButon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}
.h4space {
  margin-top: 23px;
  text-align: center;
}

 /* Styles for the popup */
.popup-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 70%;
  max-height: 80vh; /* Prevent overflow */
  background: #000;
  padding: 40px 4px 4px 4px;
  box-shadow: 10px 10px 20px rgba(0,0,0,0.4);
  z-index: 9999;
  cursor: grab;
  transition: 0.3s ease-in-out;
  border-radius: 8px; /* Slight rounded corners */
}

/* Responsive Adjustment Adjust for mobile screens */
@media (max-width: 768px) {
    .popup-container {
        width: 95%;
        height: 60%;
        max-height: 70vh; /* Make sure it fits on mobile */
        padding: 10px 4px 4px 4px;
    }
}

.popup-container:active {
  cursor: grabbing;
}
.popup-container iframe {
    width: 100%;
    height: 100%;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px; /* Smaller size */
    height: 30px;
    border-radius: 50%; /* Makes it round */
    background: red;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    border: none;
}
.close-btn:hover,
.close-btn:focus:hover {
  transform: scale(1.5);