@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');
body { font-family: "Poppins", sans-serif; margin: 0; padding: 0; }
header { padding: 10px 0; text-align: center; background: linear-gradient(to right,  #c90781 0%,#50016d 25%,#50016d 75%,#c90781 100%); float: left;
    width: 100%;}
header .logo { float: left;}
header .logo img{ height: 50px;}
header .header-text{ float: right;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    padding-top: 12px;}
.banner .owl-carousel {width: 100%; display: block; }
.banner { position: relative; }
.main{ margin: 0 auto; text-align: center; position: relative; clear: both; width: 100%; max-width: 1200px; }
.clear{ margin: 0; padding: 0; clear: both;}
.owl-item img{ width: 100%; height: 100vh; object-fit: cover;}
.owl-item .text{     font-size: 56px;
    color: #fff;
    text-transform: uppercase;
    position: absolute;
    top: 25%;
    left: 10%;
    font-weight: 700;
    width: 333px;
    text-align: left;
    line-height: 58px;}
.main-form{ background: #fff; position: absolute;  padding: 40px; z-index: 1; right: 10%; top: 17%; width: 300px;}
.main-form .top-text{ float: left; width: 100%; font-size: 30px; color: #000000; font-weight: 400; line-height: 36px;}
.main-form .top-text span{ color: #5c2b80; font-weight: 700;}
.main-form .top-sub{ float: left; width: 100%; font-size: 15px; color: #000000; font-weight: 400; line-height:20px; padding: 25px 0;}
.main-form input{background: #e3e2e2; padding: 5% 3%; width: 94%; margin-bottom: 15px; border: 0; float: left;}
.main-form select{background: #e3e2e2; padding: 0; width: 25%; margin-bottom: 15px; border: 0; float: left; height: 46px;}
.main-form .mobile{background: #e3e2e2; padding: 5% 3%; width: 67%; margin-bottom: 15px; border: 0; float: left; margin-left: 2%;}
.left-img{ float: left; width: 60%; text-align: left;}
.right-info{ float: right;}
.box{ float: left; margin-bottom: 50px; width: 100%; display: flex; justify-content: space-around;}
.box .right-info{ float: right; width: 40%;}
.box .right-info .download-row{ float: left;  border-bottom: 1px solid transparent;   border-image: linear-gradient(45deg, #5c2b80 , #c90781);
  border-image-slice: 1; padding-bottom: 10px; margin-bottom: 10px; width: 100%;}
.box .right-info .download-row .name-box{ float: left; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #6c6c6c; padding-top: 7px;}
.box .right-info .download-row .download-box {float: right;  }
.box .right-info .download-row .download-box img{ width: 24px;}
.box .right-info .download-row .download-box a + a{ padding-left: 10px;}
.exi-stall{ padding: 80px 0;}
.thumbnails{display: none;
      transition: all 0.3s ease; padding-top:70px;}
footer { background-color: #5c2b80; padding: 10px 0; text-align: center; color: #fff; font-size: 14px; width: 100%;}

    /* Modal form */
    #form-modal {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: rgba(0,0,0,0.6);
      justify-content: center;
      align-items: center;
    }

    #form-container {
      background: white;
      padding: 20px;
      border-radius: 10px;
      max-width: 400px;
      width: 100%;
    }

    label, input {
      display: block;
      width: 100%;
      margin-bottom: 10px;
    }

    input {
      padding: 8px;
    }

    button {
      padding: 7px 30px;
      background-color: #5c2b80;
      color: white;
      border: none;
      cursor: pointer;
	  border-radius: 30px;
	  font-weight: 600;
	  letter-spacing: 1px;

    }

    button:hover {
      background-color: #5c2b80;
    }
	.owl-theme .owl-controls {
    margin-top: -50px;
    z-index: 1;
    position: relative;
}
	/* Overlay background */
#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* semi-transparent black */
  display: none;
  z-index: 999; /* below popup */
}

/* Popup visibility control */
#popup-overlay.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

#message-popup {
  background: white;
  border: 2px solid #5c2b80;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  padding: 20px;
  border-radius: 8px;
  max-width: 300px;
  text-align: center;
  animation: fadeIn 0.3s ease-in-out;
}

#message-popup button {
  margin-top: 15px;
  background: #007bff;
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media only screen and (max-width: 1000px) {
.main {
   
    width: 96%;
    max-width: 100%;
	padding: 0 2%;
}
.box {
    flex-wrap: wrap;
}
.left-img{ width: 100%;}
.box .right-info{ width: 100%;}
.exi-stall{ padding: 20px 0; }
.exi-stall img{ width: 100%;}
.left-img img{ width: 100%;}
.main-form {         position: inherit;
        width: 90%;
        padding: 3%;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 0; border: 1px solid #dddddd;  margin-top: 50px;         margin-bottom: 15px;}
		.main-form .top-sub{ padding: 15px 0;}
    .owl-item .text{ font-size: 20px;
        top: 50%;
        left: 5%;
        width: 200px;
        line-height: 28px;}
header .header-text {
   
    font-size: 12px;
    padding-top: 5px;
}
header .logo img {
    height: 35px;
}
.owl-item img{ height: auto;}
}