@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  /* vc_style.css */
  --primary-color: #8572e5;
  --primary-color-dark: #575ea0;
  --primary-color-light: #e2e5ff;
  --secondary-color: #72c3e5;
  --background-color: #f3f9ff;
  --primary-font--color: #fff;
  --border-radius: 5px;
  --font-family: "Poppins", sans-serif;
  --bg-image: url("../vc_img/vcomm/companylogo-transparent.png");
  --bg-login-image: url("../vc_img/vcomm/login-bg.png");
  --table-header: #fff;

  /* style.css */
  --font-color: rgba(51, 51, 51, 1);
  --login-input-bg: #fff;
  --login-label-color: #6f6767;
  --border-color: #ddd;
  --box-shadow: 0px 0px 5px 1px rgb(174 174 174);
  --transition: 0.2s ease-out;
  --cart-shadow: rgba(222, 222, 222, 1);
  --add-btn: #e47e4d;
  --product-price-color: #4e4e4e;
  --header-gradient: #8572e5;
  --box-container: #e7e3fa;
  --box-container-border: #333;
  --menu-burger: #8572e5;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #fefcf9;
  font-family: "Poppins", sans-serif;
  color: #333;
  font-size: 1rem;
  font-weight: 400;
}
.navbar {
  position: fixed; /* Keep navbar fixed at the top */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  z-index: 1000; /* Ensure it stays above other elements */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background: #ffffff;
  border-bottom: 1px solid #ddd;
}
/* Logo Section */
.logo {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.logo img {
  width: 150px; /* Adjust based on your logo size */
  margin-right: 8px;
}
body .left-side:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 318px;
  width: 477px;
  background-image: url("download.svg");
  left: 0;
  transform: scaleX(-1);
}
p {
  font-size: 14px;
}

input,
select,
button {
  width: 100%;
  height: 45px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 10px;
  font-family: var(--font-family);
}
select {
  width: 100%;
  height: 45px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 6px;
  cursor: pointer;
  font-size: 14px;
}
button {
  color: white;
}
button:hover {
  background: #5e54ad;
}
.btn,
.affiliate-btn {
  width: 100%;
  height: 50px;
  border: none;
  background: #524a96;
  font-weight: 500;
  font-family: var(--font-family);
  border-radius: 5px;
  cursor: pointer;
}
.affiliate--info {
  width: 100%;
  margin-top: 15px;
}
.affiliate--info input {
  width: 100%;
  height: 45px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 6px;
  cursor: pointer;
}

.container {
  display: flex;
  width: 70%;
  background: #fefcf9;
  border-radius: 10px;
  overflow: hidden;
}

/* Left Side - Content */
.left-side {
  width: 50%;
  padding: 40px;
  /* background: linear-gradient(to right, #eff7ee, #f3f9f2); */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.left-side h2 {
  font-size: 30px;
  color: #333;
  margin-bottom: 25px;
}

.left-side p {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.6;
}

.left-side ul {
  list-style: none;
  padding: 0;
}

.left-side ul li {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.left-side ul li::before {
  content: "✔";
  color: #28a745;
  margin-right: 10px;
}

/* Right Side - Form */
.right-side {
  width: 50%;
  display: flex;
  flex-direction: column;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(224, 224, 224);
  border-radius: 16px;
  box-shadow: rgb(247, 252, 248) 0px 0px 10px 0px;
  padding: 30px;
}

.right-side h2 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

label {
  font-weight: bold;
  font-size: 14px;
  color: #555;
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}
.d-flex {
  display: flex;
}
.mr-10 {
  margin-right: 10px;
}
.mt-30 {
  margin-top: 30px;
}
.form-tnc--section {
  position: relative;
  padding: 1px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.form-tnc--header {
  padding: 10px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom: 1px solid #ddd;
  font-weight: 500;
}

.form-tnc--box {
  position: relative;
  padding: 10px;

  background: #fafafa;
  height: fit-content;
  max-height: 150px;
  overflow: auto;
}

.form-tnc--footer {
  padding: 10px;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  display: flex;
  align-items: center;
}

.form-tnc--footer input {
  position: relative;
  width: 13px;
  margin-right: 10px;
  cursor: pointer;
}

.form-container {
  width: 400px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.form-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.form-content {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}
.form-footer {
  background: white;
  /* padding: 15px; */
  text-align: center;
  position: sticky;
  bottom: 0;
  z-index: 100;
}
.form-content::-webkit-scrollbar {
  width: 6px;
}

.form-content::-webkit-scrollbar-thumb {
  background: #eee;
  border-radius: 5px;
}

.form-content::-webkit-scrollbar-track {
  background: #f9f9f9;
}
.close-btn-red {
  width: 100%;
  height: 50px;
  border: none;
  background: red;
  font-weight: 500;
  font-family: var(--font-family);
  border-radius: 5px;
  cursor: pointer;
}
/* Modal background (hidden by default) */
.modal {
  display: none; /* Initially hidden */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Modal content box */
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 900px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
}
/* Modal Header */
.modal-header {
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

/* Modal Body (Scrollable) */
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  max-height: 300px; /* Set max height for scrolling */
}
/* Sticky Footer */
.modal-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 15px;
  border-top: 1px solid #ddd;
  text-align: center;
}
.modal-footer .btn{
  width: 150px;
}
/* Close button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
}
/* Responsive */
@media (max-width: 768px) {
  .select2-container{
    width: 100%;
  }
  .d-block{
    display: block !important;
  }
  .form-content {
    max-height: none; /* Allow full height */
    overflow-y: visible; /* Disable scrolling */
  }
  .container {
    flex-direction: column;
    margin: 20% 0 20px 0;
    width: 90%;
  }

  .left-side,
  .right-side {
    width: 100%;
    padding: 20px;
  }
  body .left-side:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 318px;
    width: 477px;
    background-image: url("download.svg");
    z-index: -1;
    transform: none;
    display: none;
  }
  body {
    height: 100%;
  }
 
}
@media (min-width: 820px) and (max-width: 1024px) {
  .container {
    margin: 0 0 20px 0;
    width: 95%;
  }

  .left-side,
  .right-side {
    width: 100%;
    padding: 20px;
  }

}