@charset "utf-8";
/* CSS Document */
html {
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #00bbff;
line-height: 1.2;
font-weight: 600;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: #343434;
}
h1 {
font-size: 38px;
font-weight: 700;
text-align-last:center;
}
h2 {
font-size: 28px;
margin-bottom: 15px;
}
h3 {
font-size: 20px;
padding-bottom: 20px;
padding-left: 12px;
}
h4 {
font-size: 20px;
text-align:justify;
text-align-last:center;
padding-bottom: 20px;
}
h5 {
font-size: 22px;
color: var(--text-blue-to-darkblue-color);
padding-bottom: 10px;
padding-top: 15px;
padding-left: 12px;
}
h6 {
font-weight: 700;
font-size: 16px;
}
p {
font-size: 16px;
}
.hidden {
display: none !important;
}
/* Highly specific classes for toggling visibility */
.show-element {
display: block !important;
}
.hide-element {
display: none !important;
}
/* Medium devices (desktops, tablets, 992px and up) */
@media (min-width: 992px) {
.title {
margin-top: 0;
}
}
.sidebar .title {
margin-bottom: 15px;
margin-top: 20px;
position: relative;
}
.page-header {
margin-top: 20px;
padding-top: 20px;
}
p {
margin-bottom: 6px;
}
a {
color: #00bbff;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
text-decoration: none;
}
a:hover {
color: #00bbff;
}
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
ul,
ol {
padding: 0;
margin: 0;
}
img {
/* display: block;*/
max-width: 100%;
height: auto;
border-radius: 8px;
}
/*
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
*/
/*---------------------
Helper CSS
-----------------------*/
.section-title {
text-align: center;
padding: 0 px;
margin-bottom: 20px;
}
.section-title h2 {
font-size: 24px;
font-weight: 600;
margin-bottom: 25px;
color: white;
}
.section-title p {
margin-bottom: 0;
font-weight: 500;
color: white
}
.section-title2 {
text-align: left;
color: #000000;
font-weight: 500;
padding: 0px;
margin-bottom: 20px;
}
.set-bg {
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
border-radius: 12px;
justify-content: center;
}
.spad {
padding-top: 40px;
padding-bottom: 40px;
}
.spad2 {
padding-top: 40px;
padding-bottom: 40px;
}
.spad3 {
padding-top: 40px;
padding-bottom: 115px;
text-align: center;
}
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
color: var(--text-color);
padding-left: 10px;
text-decoration: none;
}
.text-blue h1,
.text-blue h2,
.text-blue h3,
.text-blue h4,
.text-blue h5,
.text-blue h6,
.text-blue p,
.text-blue span,
.text-blue li,
.text-blue a {
color: #00bbff;
padding-left: 10px;
}
.text-orange a {
color: var(--text-blue-to-darkblue-color);
}
.text-lightblue a {
color: #00bbff;
}
a:focus, a:active {
outline: none;
color: #00bbff;
}
.main-container {
padding: 10px 0;
}
/*
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
*/
.row {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 992px) {
.col-md-8 {
width: 66.66666667%;
}
}
@media (min-width: 992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 6px;
padding-left: 6px;
}
#result {
margin-top: 20px;
padding: 15px;
text-align: left !important;
display: block;
font-family: roboto flex, sans-serif;
font-size: 18px;
color: #fff;
}
form {
margin: 20px 0;
}
/* team css */
.social-icons {
display: flex;
justify-content: center;
gap: 15px;
}
.social-icons a {
color: #555;
font-size: 18px;
transition: color 0.3s ease;
text-decoration: none;
}
.social-icons a:hover {
color: #0077b5; /* LinkedIn blue as default */
}
/* Specific brand hover colors */
.social-icons a.facebook:hover { color: #3b5998; }
.social-icons a.twitter:hover { color: #1da1f2; }
.social-icons a.instagram:hover { color: #e4405f; }
.social-icons a.linkedin:hover { color: #0077b5; }
/*------------------- */
.team-section {
padding: 60px 20px;
text-align: center;
background-image: url('https://images.unsplash.com/photo-1531379410502-63bfe8cdafaa'); /* Use your real bg */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.team-section::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: var(--background-color);
z-index: 0;
}
.team-section .content {
position: relative;
z-index: 1;
}
.team-section h2 {
font-size: 32px;
margin-bottom: 10px;
}
.team-section p {
font-size: 16px;
color: #cbd5e1;
margin-bottom: 50px;
}
.team-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
padding: 20px;
}
.team-card {
background-color: rgba(30, 41, 59, 0.9);
border: 1px solid #334155;
border-radius: 16px;
padding: 30px 20px;
width: 250px;
text-align: center;
transition: transform 0.3s ease;
}
.team-card:hover {
transform: translateY(-5px);
}
.team-card img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 20px;
border: 3px solid #64748b;
}
.team-card h3 {
font-size: 18px;
margin-bottom: 5px;
text-align: left;
}
.team-card p {
font-size: 14px;
color: #c6c7c8;
margin: 0;
text-align: left;
}
/* Responsive fix for smaller phones like Motorola */
@media (max-width: 480px) {
.team-grid {
flex-direction: column;
align-items: center;
gap: 20px;
padding: 10px;
}
.team-card {
width: 90%;
padding: 20px;
}
.team-card img {
width: 80px;
height: 80px;
}
.team-card h3 {
font-size: 15px;
}
.team-card p {
font-size: 12px;
}
}
/* ----- my network css */
.network-container {
max-width: 600px;
margin: auto;
padding: 3px;
border-radius: 0px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.network-title {
font-size: 22px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
.network-container input[type="text"],
.network-container input[type="email"],
.network-container button {
width: 100%;
padding: 12px;
margin: 8px 0;
font-size: 16px;
border: 1px solid #ccc;
}
.network-container button {
background-color: #00bbff;
color: white;
border: none;
cursor: pointer;
}
.network-container button:hover {
background-color: #e200b0;
color: white;
}
.network-section {
margin-top: 30px;
border-top: 2px solid #e200b0;
padding-top: 20px;
}
.network-ref-header {
font-weight: 500;
font-size: 14px;
margin: 10px 0 3px;
border-bottom: 1px solid #003d7e;
padding-bottom: 5px;
color: #c6c7c8;
}
.network-highlight {
font-weight: bold;
font-size: 18px;
margin-top: 20px;
margin-bottom: 10px;
}
.network-paid {
color: #00fec5;
}
.network-unpaid {
color: #e200b0;
}
.network-notpaidyet {
color: #e200b0;
}
.network-pending,
.network-notpaid,
.network-not_paid_yet,
.network-not-paid,
.network-unpaid {
color: #e200b0; /* Red */
font-weight: bold;
text-transform: capitalize;
}
.network-card {
display: flex;
justify-content: space-between;
border-radius: 1px;
padding: 5px 3px;
margin: 3px 0;
font-size: 14px;
border-bottom: 1px dotted #344049;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.network-card > div {
flex: 1;
padding-left: 30px;
text-align: left;
}
@media (max-width: 600px) {
.network-card {
flex-direction: row;
text-align: center;
}
.network-card > div {
margin-bottom: 5px;
}
}
#back-to-home {
padding-top: 150px;
}
/* Image upload area */
.image-upload-section {
border: 2px dashed #6daee0;
padding: 25px;
text-align: center;
cursor: pointer;
border-radius: 10px;
margin-top: 25px;
background-color: #2a416a;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.image-upload-section.dragover {
background-color: #3a5382;
border-color: #9bd0ff;
}
.image-upload-section p {
margin-top: 10px;
color: #d1e2ff;
font-weight: 500;
}
.image-upload-section button {
background: linear-gradient(145deg, #3498db, #2980b9);
font-family: roboto, sans-serif;
padding: 10px 20px;
font-size: 16px;
border-radius: 8px;
margin-top: 15px;
justify-content: center;
align-items: center;
}
.image-upload-section button:hover {
background: linear-gradient(145deg, #2980b9, #3498db);
box-shadow: 0 5px 12px rgba(52, 152, 219, 0.4);
}
/* Image preview */
/* Image preview container */
.image-preview-container {
margin-top: 20px; /* Adjusted from user's original query for top margin */
text-align: center;
border: 1px solid #3d5e8f; /* Adjusted from user's original query for border color */
/* padding: 15px;*/
border-radius: 10px;
min-height: 680px; /* Changed to 680px as requested */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #2a416a; /* Adjusted from user's original query for background color */
overflow: hidden; /* Important for containing blurred content */
/* position: absolute; */
}
/* --- START OF IMAGE SIZING & PROGRESSIVE LOADING FIX --- */
#existingAdImage {
max-width: 338px;
max-height: 600px;
width: auto;
height: auto;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
border: 1px solid #6daee0; /* Adjusted from user's original query for border color */
/* Progressive loading styles */
transition: filter 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
/* Style for locally selected image preview - no progressive blur needed for local files */
#imagePreview img {
max-width: 338px;
max-height: 600px;
width: auto;
height: auto;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
border: 1px solid #9bd0ff; /* Adjusted from user's original query for border color */
display: block; /* Always display for local preview */
}
/* Classes for progressive loading effect */
.image-blurred {
filter: blur(20px);
opacity: 0.7;
}
.image-loaded {
filter: blur(0);
opacity: 1;
}
/* --- END OF IMAGE SIZING & PROGRESSIVE LOADING FIX --- */
.loading-gif {
width: 40px;
display: block;
margin: 10px auto;
}
/* Adjustments for the file input itself */
#imageFile {
/* Mobile styles - make it cover the entire drop area and appear as a "Choose File" button */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* Make it invisible but clickable */
cursor: pointer;
display: block; /* Ensure it's block on mobile */
z-index: 10; /* Ensure it's above other elements in dropArea */
}
/* Desktop/Tablet styles for the browse button and drag/drop text */
@media (min-width: 640px) { /* Tailwind's 'sm' breakpoint */
.image-upload-section button {
display: inline-block; /* Show button on larger screens */
}
.image-upload-section p {
display: block; /* Show drag and drop text on larger screens */
}
#imageFile {
/* On desktop/tablet, revert to hidden as button handles clicks */
display: none;
}
}
/* Mobile specific styling */
@media (max-width: 639px) {
.image-upload-section p {
display: none; /* Hide drag and drop text on mobile */
}
.image-upload-section button {
display: block; /* Show explicit button on mobile */
margin-top: 0; /* Remove top margin on mobile if it was only for text */
}
/* Remove the ::after pseudo-element */
.image-upload-section::after {
content: none;
}
}
/* Style for the new delete image button */
#deleteAdImageBtn {
background-color: #dc3545; /* Red color for delete */
color: white;
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
transition: background-color 0.3s ease;
margin-left: auto;
margin-right: auto;
margin-bottom: 18px;
}
#deleteAdImageBtn:hover {
background-color: #c82333;
}
/* Styles for the Image Cropper Modal */
#imageCropperModal {
display: none; /* Hidden by default */
position: fixed;
z-index: 1001; /* Above other overlays */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9); /* Dark semi-transparent background */
align-items: center;
justify-content: center;
padding: 6px; /* User specified */
}
.cropper-content {
background-color: #001f40;
margin: auto;
padding: 6px; /* User specified */
border: 1px solid #3d5e8f;
border-radius: 8px;
width: 96%; /* User specified */
height: 80vh; /* Changed to viewport height for better mobile responsiveness */
max-width: 700px; /* Max width for the cropper modal content */
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
justify-content: space-between; /* Pushes content to top/bottom */
gap: 15px;
position: relative; /* Needed for absolute positioning of close button */
}
.cropper-container-inner {
overflow: hidden; /* Important for Cropper.js */
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
flex-grow: 1; /* Allow cropper area to take available space */
min-height: 200px; /* Ensure some minimum height for the cropper */
}
.cropper-container-inner img {
max-width: 100%; /* Ensure image fits container */
display: block;
}
.cropper-controls {
display: flex;
flex-wrap: wrap;
padding-bottom: 10px;
gap: 10px;
justify-content: center;
margin-top: 10px;
}
.cropper-controls button {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 15px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.cropper-controls button:hover {
background-color: #0056b3;
}
.cropper-controls button.active {
background-color: #28a745; /* Highlight active ratio */
}
.cropper-controls button.active:hover {
background-color: #218838;
}
/* Specific style for Crop and Cancel buttons */
#cropApplyBtn {
background-color: #28a745; /* Green for apply */
}
#cropApplyBtn:hover {
background-color: #218838;
}
/* Style for the new close 'X' button */
.close-icon {
position: absolute;
top: 10px; /* Adjust as needed */
right: 10px; /* Adjust as needed */
background: none;
border: none;
color: white;
font-size: 24px; /* Make it visible */
cursor: pointer;
z-index: 1002; /* Above other elements in modal */
padding: 0;
line-height: 1; /* For better vertical alignment of 'X' */
font-weight: bold;
}
.close-icon:hover {
color: salmon; /* Hover effect */
}
/* Tab styles */
/* Choice Chips Styles */
.choice-chips-container {
display: flex;
flex-wrap: wrap; /* Allow chips to wrap on smaller screens */
gap: 10px;
justify-content: center;
margin-bottom: 20px;
padding: 10px;
background-color: #001f40;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.choice-chip {
padding: 8px 15px;
border: 1px solid #004080;
border-radius: 20px; /* More rounded, chip-like appearance */
background-color: #002a5c;
color: #a0aec0; /* Lighter gray for inactive text */
cursor: pointer;
font-size: 15px;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
white-space: nowrap; /* Prevent text wrapping within a chip */
}
.choice-chip:hover:not(.active-chip) {
background-color: #004080;
color: #ffffff;
transform: translateY(-1px); /* Subtle lift on hover */
}
.choice-chip.active-chip {
background-color: #002062;
color: white;
border-color: #00bbff;
font-weight: bold;
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4); /* Glow effect for active */
transform: translateY(0); /* Reset lift if it was hovered previously */
}
.tab-content {
display: none; /* Hidden by default */
padding: 6px;
background-color: #001f40;
border-radius: 8px;
min-height: 300px; /* Ensure content area has some height */
}
.tab-content.active {
display: block; /* Show active tab content */
}
/* Specific styles for the map container */
#map-container {
position: relative; /* Needed for absolute positioning of overlay */
border: 1px solid #00bbff; /* Add a border to the map */
border-radius: 8px;
overflow: hidden; /* Ensure overlay respects border-radius */
height: 500px; /* Set a fixed height for the map container */
width: 100%;
}
#map {
height: 100%; /* Make map fill its container */
width: 100%;
z-index: 0; /* Ensure map layers appear correctly */
}
.map-buttons-container {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 15px;
margin-bottom: 10px;
flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.map-buttons-container button {
background-color: #00bbff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
gap: 8px; /* Space between icon and text */
}
.map-buttons-container button:hover {
background-color: #0099cc;
}
.map-disabled-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 1.5rem;
font-weight: bold;
border-radius: 8px;
z-index: 10; /* Above the map tiles but below marker/controls if any were visible */
}
#getGeolocationBtn {
background-color: #f97316; /* Orange */
color: white;
border: none;
}
#getGeolocationBtn:hover {
background-color: #ea580c; /* Darker orange */
transform: translateY(-2px);
}
/* Style for the "Location Off" button state */
#toggleLocationButton.toggle-button-on {
background-color: #00bbff; /* Blue */
}
#toggleLocationButton.toggle-button-on:hover {
background-color: #e300b2; /* Darker blue */
}
#toggleLocationButton.location-off {
background-color: #6c757d; /* Grey color for off state */
cursor: pointer; /* Still allow click to turn on */
}
#toggleLocationButton.location-off:hover {
background-color: #e300b2; /* Darker grey for hover */
}
/* Styles for search bar */
.search-bar-container {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.search-bar-container input {
flex-grow: 1;
padding: 10px;
border-radius: 4px;
border: 1px solid #00bbff;
/* background-color: #000f50;*/
/* color: white;*/
}
.search-bar-container button {
padding: 10px 15px;
background-color: #00bbff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.search-bar-container button:hover {
background-color: #0099cc;
}
/* Custom styles for scrollbar hiding (Bootstrap doesn't have direct utility) */
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
/* Specific styles for card shadow and button hover */
.card-custom-shadow {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-2xl */
transition: transform 0.3s ease-in-out; /* transform transition-all duration-300 */
}
.card-custom-shadow:hover {
transform: scale(1.01); /* hover:scale-[1.01] */
}
.btn-custom-hover {
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; /* transition duration-200 */
}
.btn-custom-hover:hover {
transform: translateY(-0.125rem); /* hover:-translate-y-0.5 */
}
/* Styles for the ad image container with direct width/height control */
.ad-image-container {
width: 90px; /* Define your desired width for the image container */
height: 160px; /* Define your desired height for the image container (9:16 aspect ratio for 90px width) */
overflow: hidden; /* Ensures image respects border-radius */
border: 3px solid var(--bs-info); /* Example border color (Bootstrap info color) */
border-radius: 0.5rem; /* Border radius, equivalent to Bootstrap's rounded-3 */
flex-shrink: 0; /* Prevents this container from shrinking in flexbox layout */
/* Optional: Add flex properties to center image if it doesn't perfectly fill */
display: flex;
align-items: center;
justify-content: center;
}
.ad-image-container img {
width: 100%; /* Image fills the container's width */
height: 100%; /* Image fills the container's height */
object-fit: cover; /* Ensures the image covers the container, cropping if necessary */
}
/* Custom style for the search input container as per user's suggestion, adapted to Bootstrap */
.search-input-container {
background-color: #000f29;
color: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.search-input-container h3 {
color: white; /* Ensure heading color is white inside dark container */
margin-bottom: 1rem;
}
/*# sourceMappingURL=style.css.map * personal */
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
ul {
list-style: square;
}
.list-icons,
.list {
list-style: none;
padding: 0;
}
.list-icons li,
.list li {
padding: 3px 6px;
}
.list-icons li i {
width: 25px;
text-align: center;
}
.list li .vertical-divider {
padding-right: 15px;
position: relative;
}
.list li .vertical-divider:after {
position: absolute;
content: "";
height: 60%;
width: 1px;
background-color: #CECECE;
right: 9px;
top: 5px;
}
.list-inline {
margin-top: 9px;
margin-bottom: 8px;
}
.icononly {
font-size: 18px;
}
.indexicon{
text-align: center;
color: aqua;
}
.scrollmenu {
background-color: #000f29;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/* Hide scrollbars */
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
}
.scrollmenu::-webkit-scrollbar {
display: none;
}
.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
min-width: 100px; /* Optional: ensures links aren't too narrow on small screens */
}
.scrollmenu a:hover {
color:#00bbff;
}
.scrollmenu a.active {
color: #00bbff;
}
.scrollmenuimg {
background-color: #000f29;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 10px 0;
/* Hide scrollbar - cross-browser */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.scrollmenuimg::-webkit-scrollbar {
width: 0px; /* Chrome, Safari */
height: 0px;
background: transparent;
display: none;
}
.scrollmenuimg img {
display: inline-block;
height: 100px;
margin: 0 10px;
cursor: pointer;
border-radius: 8px;
transition: transform 0.3s ease, height 0.3s ease;
}
/* ---- light box --*/
#lightboxOverlay {
display: none;
position: fixed;
z-index: 9999;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.7); /* 70% transparent */
justify-content: center;
align-items: center;
flex-direction: column;
}
#lightboxOverlay.active {
display: flex;
}
#lightboxImage {
max-width: 90%;
max-height: 80vh;
border-radius: 10px;
box-shadow: 0 0 15px #fff;
}
.closeBtn {
position: absolute;
top: 20px;
right: 30px;
font-size: 30px;
color: white;
cursor: pointer;
}
.navArrow {
position: absolute;
top: 50%;
font-size: 40px;
color: white;
cursor: pointer;
user-select: none;
transform: translateY(-50%);
padding: 10px;
}
.prev { left: 20px; }
.next { right: 20px; }
.darto-social-row {
display: flex;
justify-content: flex-start; /* equal spacing */
align-items: center;
flex-wrap: wrap; /* allows wrapping on small screens */
gap: 24px; /* consistent space between icons */
padding: 20px 0px;
text-decoration: none;
}
.darto-social-icon {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: var(--darto-social-icon);
text-decoration: none;
width: 80px; /* fixed width for uniformity */
margin-block: 10px;
}
.darto-social-icon i {
font-size: 24px;
margin-bottom: 5px;
padding: 10px;
}
.darto-social-icon span {
font-size: 14px;
}
#result {
margin-top: 20px;
padding: 15px;
text-align: left !important; /* π Force left alignment */
display: block;
font-family: 'Segoe UI', sans-serif;
font-size: 18px;
color: #fff;
}
#result p {
/* margin: 10px 0;*/
border: 2px solid #4d586a;
color: var(--dark-text-color);
padding: 12px;
border-radius: 6px;
text-align: center;
}
.promoter-id-text {
font-weight: bold;
color: #ffffff;
font-size: 20px;
text-transform: uppercase;
}
.status-paid {
color: #00fec5;
font-weight: 900;
font-size: 24px;
}
.status-unpaid {
color: red;
font-weight: 900;
font-size: 24px;
}
.pending {
color: #e200b0;
font-weight:700;
}
.paid{
color: #00fec5;
font-weight:700;
}
.status-icon {
display: inline-block;
width: 36px;
height: 36px;
line-height: 24px;
text-align: center;
font-size: 28px;
margin-right: 8px;
font-weight: 900;
}
.status-icon.paid {
color: #00fec5;
}
.status-icon.unpaid {
color: red;
}
.status-icon.pending{
color: #e200b0;
}
.highlight-name,
.highlight-id {
color: #00bbff;
font-weight: 500;
text-transform: capitalize;
font-size: 26px;
}
.audition-name,
.audition-id {
color: #00bbff;
font-weight: 500;
text-transform: capitalize;
font-size: 18px;
}
.result-text2 {
margin-top: 20px;
padding: 15px 1px 15px 1px;
font-size: 14px;
color: #fff;
}
.result-text {
margin-top: 20px;
padding: 15px 1px 15px 1px;
font-size: 14px;
color: #fff;
text-align: left;
}
.roundapply{
color: #00bbff;
font-weight: 500;
text-transform: capitalize;
font-size: 14px;
}
/* Dropdown styling */
#professionSelect, #specializationSelect {
width: 100%;
padding: 10px 14px;
margin: 6px 0 14px 0;
border: 2px solid #000f29;
border-radius: 8px;
font-size: 18px;
font-weight: 400;
height: 50px;
transition: border-color 0.3s ease;
/* color: #c6c7c8;*/
}
#professionSelect:focus, #specializationSelect:focus {
border-color: #ed008c;
outline: none;
box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
}
/* Task Description box styling */
#taskDescription {
display: none;
margin-top: 20px;
padding: 20px;
border-radius: 8px;
color: #fff;
font-size: 16px;
line-height: 1.5;
}
.text-orange a {
color: var(--text-blue-to-darkblue-color);
}
.text-orange2 {
color: var(--text-blue-to-darkblue-color);
}
.padding-social {
text-align: center;
padding-left: 20px;
padding-right: 20px;
font-size: 16px;
}
.padding-social2 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
font-size: 16px;
}
.site-btn2 {
display: inline-block;
min-width: 99px;
text-align: center;
border-radius: 50px;
border: none;
padding: 6px 24px;
font-weight: 600;
font-size: 14px;
position: relative;
color: #000000;
cursor: pointer;
background: #00bbff;
text-decoration: none;
text-transform: uppercase;
}
.site-btn2:hover {
color: #fff;
background: #ed008c;
}
.colored-word {
color: #00bbff;
font-weight: 500;
}
/*
table {
width: 100%;
border-collapse: collapse;
min-width: 100px;
}
th, td {
border: 1px solid #585662;
padding: 6px;
text-align: left;
padding-bottom: 10px;
}
th {
background-color: #00bbff;
}
*/
.colorb
{
color: #00bbff;
}
.colorw
{
color: #ffffff;
}
.sno
{
color: #989696;
}
.site-btn3 {
display: inline-block;
min-width: 99px;
text-align: center;
border: none;
padding: 9px 9px;
font-weight: 600;
font-size: 16px;
position: relative;
color: #000;
cursor: pointer;
background: #00bbff;
}
.site-btn3:hover {
color: #fff;
}
.open-form-home {
background-color: var(--contact-form-bg);
padding: 20px 10px;
border-radius: 12px;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);*/
width: 100%;
max-width: 1400px;
box-sizing: border-box;
border: 1px solid var(--card-background);
margin: auto;
}
.open-form {
background-color: var(--contact-form-bg);
padding: 20px 10px;
border-radius: 12px;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);*/
width: 100%;
max-width: 1200px;
box-sizing: border-box;
border: 1px solid #35424b;
margin: auto;
}
.page-form {
background-color: var(--contact-form-bg);
padding: 6px 12px;
border-radius: 12px;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);*/
width: 100%;
max-width: 1200px;
box-sizing: border-box;
margin: auto;
}
/* Container for the promoter id form 5th july 2025 */
.contact-form {
background-color: var(--contact-form-bg);
padding: 3px 12px;
border-radius: 12px;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);*/
width: 100%;
max-width: 500px;
box-sizing: border-box;
border: 1px solid #35424b;
margin: auto;
}
/* Form Heading */
.contact-form h3 {
font-size: 24px;
color: #00bbff;
margin-bottom: 12px;
text-align: center;
font-weight: 700;
/* padding-top: 30px*/
}
/* Form Labels */
.contact-form label {
display: block;
margin-bottom: 3px;
color: var(--text-blue-to-darkblue-color);
font-weight: 600;
font-size: 15px;
text-transform: uppercase;
}
/* Form Input Fields */
.contact-form .form-control {
width: 100%;
padding: 12px 15px;
margin-bottom: 20px;
border: 1px solid #C6C7C8;
border-radius: 8px;
box-sizing: border-box;
font-size: 16px;
color: #333;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form .form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
outline: none;
}
.contact-form .form-control::placeholder {
color: #707987;
}
.message {
color: fff;
text-align: center;
}
/* Submit Button */
.contact-form .submit-button {
width: 100%;
padding: 14px 20px;
background-color: #00bbff;
color: white;
border: none;
border-radius: 36px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
text-transform: uppercase;
}
.contact-form .submit-button:hover {
background-color: #ed008c;
transform: translateY(-2px);
}
.contact-form .submit-button:active {
background-color: #ed008c;
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
}
/* Responsive adjustments */
@media (max-width: 600px) {
.contact-form {
}
.contact-form h3 {
font-size: 21px;
margin-bottom: 2px;
}
.contact-form .form-control {
padding: 10px 12px;
margin-bottom: 15px;
}
.contact-form .submit-button {
padding: 12px 15px;
font-size: 1em;
}
.open-form {
padding: 6px 6px;
}
.open-form-home{
padding: 6px 9px;
}
}
.tab-content {
padding: 20px;
margin-bottom: 15px;
}
.tab-content h1 {
font-size: 34px;
}
.tab-content:after {
width: 3px;
content: "";
background-color: #00bbff;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
/* Small devices (tablets, phones less than 767px) */
@media (max-width: 767px) {
.vertical .nav-tabs,
.vertical .tab-content {
display: block;
}
}
.tab-content {
display: none; /* Hidden by default */
padding: 6px;
background-color: #001f40;
border-radius: 8px;
min-height: 300px; /* Ensure content area has some height */
}
.tab-content.active {
display: block; /* Show active tab content */
}
.submit-button {
background-color: #00bbff; /* Changed to new button color */
color: #000f29;
padding: 15px 15px;
border: none;
border-radius: 50px; /* Rounded corners for buttons */
cursor: pointer;
font-size: 20px;
text-align: center;
width: 100%;
transition: background-color 0.3s ease;
margin-bottom: 20px; /* Space below the upload button */
position: relative;
text-transform: uppercase;
font-weight: 600;
}
.submit-button:hover {
background-color: #ed008c; /* Darker shade for hover */
}
.error {
color: salmon;
}
.success {
color: lightgreen;
}
#uploadOverlay { /* Updated ID */
display: flex;
align-items: center;
justify-content: center;
}
.image-upload-section {
border: 2px dashed #00bbff; /* Changed to new button color */
/* padding: 20px;*/
text-align: center;
margin-bottom: 15px;
cursor: pointer;
border-radius: 8px;
position: relative; /* Needed for absolute positioning of file input */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100px; /* Give it some height for mobile click area */
}
.image-upload-section.dragover {
background-color: #002a5c;
}
/* Adjusted this section to allow the button to take full width */
.image-upload-section button {
background-color: #00bbff; /* Changed to new button color */
color: white;
padding: 16px 15px; /* Increased padding slightly for a larger touch target */
border: none;
border-radius: 8px; /* Rounded corners for buttons */
cursor: pointer;
margin-top: 10px; /* Space above button */
width: 60%;
box-sizing: border-box; /* Include padding and border in the element's total width */
font-size: 16px; /* Ensure text is readable */
transition: background-color 0.3s ease;
}
.image-upload-section button:hover {
background-color: #ed008c; /* Darker shade for hover */
}
/* Adjustments for the file input itself */
#imageFile { /* Updated ID */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
display: block;
z-index: 10;
}
/*------------------
Course section
---------------------*/
.course-warp {
max-width: 1200px;
padding: 0 15px;
margin: 0 auto -30px;
}
.course-item {
margin-bottom: 30px;
}
.course-item .course-thumb {
height: 270px;
}
.course-item .course-thumb .price {
font-size: 16px;
color: #ffffff;
font-weight: 600;
background: #00bbff;
display: inline-flex;
padding: 13px 19px;
margin: 14px
}
.lead {
margin-bottom: 20px;
font-size: 18px;
line-height: 1.5;
font-weight: 300;
text-align-last:left;
text-align:justify;
padding-bottom: 10px;
}
.darto-social-row {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 24px;
padding: 20px 0px;
}
.video-container {
position: relative;
width: 100%; /* Take full width of its parent */
padding-bottom: 56.25%; /* 16:9 Aspect Ratio (height / width = 9 / 16 = 0.5625) */
height: 0;
overflow: hidden;
background-color: #000; /* Black background for the container */
border-radius: 1.5rem; /* Large rounded corners */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); /* Soft shadow */
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0; /* Remove default iframe border */
border-radius: 1.5rem; /* Match container's rounded corners */
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.video-container {
border-radius: 1rem; /* Slightly smaller rounded corners on mobile */
}
.video-container iframe {
border-radius: 1rem;
}
}
.main-content-container {
width: 100%; /* Take full width of its parent */
border-radius: 1.5rem; /* Large rounded corners */
overflow: hidden; /* Ensures rounded corners apply to children */
display: flex;
flex-direction: column; /* Stacks content blocks vertically */
padding: 18px 2px; /* Padding inside the main container */
}
/* Styles for individual featured course segments */
.featured-courses2 {
margin-bottom: 2rem; /* Space between segments */
color: var(--text-color);
border-radius: 1rem;
padding: 24px 6px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column; /* Default to column on small screens */
}
@media (min-width: 768px) {
.featured-courses2 {
flex-direction: row; /* Arrange items in a row on larger screens */
align-items: flex-start; /* Align items to the top */
padding: 24px 3px;
}
}
.course-thumb {
flex-shrink: 0; /* Prevent image from shrinking */
width: 100%; /* Full width on small screens */
margin-bottom: 1.5rem; /* Space below image on small screens */
}
.course-thumb img {
width: 100%;
height: auto;
border-radius: 0.75rem; /* Rounded corners for images */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
.course-thumb {
width: 40%; /* Image takes 40% width on larger screens */
margin-right: 2rem; /* Space to the right of the image */
margin-bottom: 0; /* No bottom margin on larger screens */
}
table{
font-size: 9px;
}
}
.course-info {
flex-grow: 1; /* Text content takes remaining space */
width: 100%; /* Full width on small screens */
}
/* Specific styles for the "ABOUT DARTS SPORTS" and "THE SPORTβS APEX BODY" sections
where text is offset to the right on larger screens */
.featured-courses2.offset-right .course-thumb {
order: 2; /* Image on the right */
margin-left: 2rem; /* Space to the left of the image */
margin-right: 0; /* No right margin */
}
.featured-courses2.offset-right .course-info {
order: 1; /* Text on the left */
}
/*
.course-text h5 {
font-size: 1.75rem;
font-weight: 700;
color: #333;
margin-bottom: 1rem;
}
.course-text p {
font-size: 1rem;
line-height: 1.6;
color: #555;
margin-bottom: 1rem;
}
.course-text ul {
list-style: disc;
margin-left: 1.5rem;
margin-bottom: 1rem;
color: #555;
}
.course-text ul li {
margin-bottom: 0.5rem;
}
*/
.site-link {
color: #007bff; /* Blue link color */
text-decoration: none;
transition: color 0.3s ease;
}
.site-link:hover {
color: #0056b3; /* Darker blue on hover */
text-decoration: underline;
}
/* Table styles */
.table-container {
overflow-x: auto; /* Enable horizontal scrolling for tables on small screens */
margin-bottom: 1rem;
background: #EB090D;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
font-size: 12px;
text-align: left;
}
table th, table td {
padding: 0.75rem 1rem;
border: 1px solid #ddd;
background-color: var(--panel-header);
}
table th {
background-color: var(--panel-header); /* Light grey header */
font-weight: 600;
color: var(--text-color);
}
table tr.colork {
background-color: #f7fafc; /* Lighter background for specific rows */
}
table tr.colora {
background-color: #ffffff; /* White background for specific rows */
}
.text-orange {
color: #f97316; /* Tailwind orange-500 */
}
/* Accordion styles */
.accordion-area {
margin-top: 2rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
overflow: hidden;
}
.panel {
border-bottom: 1px solid #e2e8f0;
}
.panel:last-child {
border-bottom: none;
}
.panel-header {
background-color: var(--panel-header);
padding: 1rem 1.5rem;
cursor: pointer;
}
.panel-link {
width: 100%;
text-align: left;
font-size: 1.125rem;
font-weight: 600;
color: var(--text-color);
background: none;
border: none;
padding: 0;
cursor: pointer;
outline: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-link::after {
content: '+';
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.panel-link.active::after {
content: '-';
transform: rotate(0deg); /* No rotation needed for - */
}
.panel-body {
padding: 1.5rem;
background-color: var(--background-color);
display: none; /* Hidden by default */
}
.panel-body.show {
display: block; /* Shown when active */
}
.panel-body ul {
list-style: none; /* Remove default list style for custom bullet */
margin-left: 0;
padding-left: 0;
}
.panel-body ul li {
margin-bottom: 0.75rem;
padding-left: 1.5rem;
position: relative;
}
.panel-body ul li::before {
content: 'β’'; /* Custom bullet point */
color: #00bbff; /* Blue color for bullet */
font-size: 1.2em;
position: absolute;
left: 0;
top: 0;
}
/* Specific text styling */
.text-blue-500 {
color: #00bbff; /* Custom blue color */
font-weight: 500;
}
/* Image container for student images */
.image-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 255px)); /* Responsive grid */
gap: 1rem;
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.image-container img {
width: 100%;
height: auto;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* --- Media Slider (Photo/Video) --- */
.media-slider {
position: relative;
/* max-width: 800px; Max width for the slider content */
margin: 0 auto;
overflow: hidden; /* Hide extra slides */
border-radius: 8px;
background-color: var(--background-color); /* Background for slider area */
/* padding: 20px; Padding inside the slider container */
width: 86%;
}
.slider-wrapper {
position: relative;
width: 100%;
/* No flex or grid here, as JS will control display of individual items */
}
.slider-item {
display: none; /* Hidden by default, JS will show one */
text-align: center; /* Center content within slider item */
padding-bottom: 15px; /* Space below content inside item */
}
.slider-item.active-slide {
display: block; /* Show the active slide */
}
.slider-item img {
max-width: 100%;
height: auto;
display: block; /* Remove extra space below img */
margin: 0 auto; /* Center image within slider item */
border-radius: 5px;
}
/* Responsive Video Embed (reused) */
.responsive-video-embed {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
border-radius: 8px;
margin: 0 auto;
/* max-width: 700px; Adjusted max width for video inside slider */
}
.responsive-video-embed .embed-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/*------------------------------*/
/* --- Categories Section Styling --- */
.categories-section {
padding: 12px 0;
/* background-color: var(--background-color);*/
color: #fff;
overflow: hidden;
}
/* Custom Container (replaces .container) */
.custom-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Section Title styling */
.section-title {
text-align: center;
/* margin-bottom: 60px;*/
padding: 0 15px;
}
.section-title h2 {
font-size: 24px;
color: #00bbff;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
.section-title p {
font-size: 16px;
line-height: 1.8;
color: var(--text-color);
/* max-width: 800px;*/
margin: 0 auto;
}
/* Categories Grid (replaces .row and .col-lg-4 .col-md-6) */
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 255px));
gap: 30px;
justify-content: center;
}
/* Category Link (replaces the wrapper for Bootstrap columns) */
.category-link {
text-decoration: none;
display: block;
color: inherit;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-link:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* Individual Category Item */
.categorie-item {
background-color: #1a2a47;
border-radius: 10px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
transition: background-color 0.3s ease;
}
.categorie-item:hover {
background-color: #00bbff;
color: #000f29;
}
/* Category Image Thumbnail */
.ci-thumb {
width: 100%;
height: 150px;
background-color: #2c3e50; /* Placeholder background if image not loaded */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.ci-thumb2 {
width: 100%;
height: 250px;
background-color: #2c3e50; /* Placeholder background if image not loaded */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* Category Text Content */
.ci-text {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.ci-text h5 {
font-size: 1.5em;
color: #e0e0e0;
margin-bottom: 15px;
line-height: 1.3;
}
.ci-text p {
font-size: 0.95em;
/* color: #b0b0b0;*/
line-height: 1.6;
margin-bottom: 15px;
flex-grow: 1;
}
.ci-text span {
font-size: 0.9em;
color: #888;
align-self: flex-end;
}
/* --- Media Queries for Responsiveness --- */
/* Tablets (md equivalent, approx. 768px - 991px) */
@media (max-width: 991px) {
.categories-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 255px));
gap: 25px;
}
.section-title h2 {
font-size: 2.8em;
}
.section-title p {
font-size: 1em;
}
}
/* Small Tablets and Large Phones (sm equivalent, approx. 576px - 767px) */
@media (max-width: 767px) {
.categories-section {
padding: 60px 0;
}
.section-title {
/* margin-bottom: 40px;*/
}
.section-title h2 {
font-size: 2.4em;
}
.section-title p {
font-size: 0.95em;
}
.categories-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 255px));
gap: 20px;
}
.categorie-item{
width: 350px;
}
.ci-thumb {
height: 180px;
}
.ci-text {
padding: 20px;
}
.ci-text h5 {
font-size: 1.3em;
}
.ci-text p {
font-size: 0.9em;
}
}
/* Mobile Phones (xs equivalent, up to 575px) */
@media (max-width: 575px) {
.categories-section {
padding: 40px 0;
}
.section-title h2 {
font-size: 2em;
}
.section-title p {
font-size: 0.85em;
}
.categories-grid {
/* grid-template-columns: 255px; */
gap: 20px;
padding: 0 10px;
grid-template-columns: auto;
}
.ci-thumb {
height: 160px;
}
.ci-text {
padding: 15px;
}
.ci-text h5 {
font-size: 1.2em;
}
.ci-text p {
font-size: 0.8em;
}
}
.image_center:{
justify-content: center;
align-items: center;
}
.hero-text {
text-align: center;
padding-top: 60px;
margin-bottom: 45px;
}
.hero-section {
/* height: 1200px;*/
width: 100%;
padding: 30px;
}
.set-bg {
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
border-radius: 10px;
justify-content: center;
}
/* Row and Column Layout (Flexbox for responsiveness) */
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-around ; /* Center items horizontally */
gap: 30px; /* Gap between columns */
}
.col-md-3 {
flex: 0 0 calc(25% - 22.5px); /* 4 columns on desktop, accounting for gap */
max-width: calc(25% - 22.5px);
box-sizing: border-box;
}
/* Facts Box Styling */
.ts-facts {
text-align: center;
background-color: #fdfdfd; /* Slightly off-white for individual fact boxes */
padding: 30px 20px;
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); /* Lighter shadow for fact boxes */
}
.ts-facts:hover {
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* More pronounced shadow on hover */
}
.ts-facts-img {
margin-bottom: 20px;
}
.ts-facts-img img {
max-width: 90px; /* Icon size */
height: auto;
display: block; /* Ensure image behaves as a block for centering */
margin: 0 auto; /* Center the image */
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* Subtle shadow for icons */
}
.ts-facts-content {
margin-top: 15px;
}
.ts-facts-num {
font-size: 54px; /* Large number size */
font-weight: 700;
color: var(--color-darkb-lightb); /* Primary blue color */
margin-bottom: 5px;
line-height: 1;
text-align: center;
}
.ts-facts-title {
font-size: 1.1em; /* Title size */
font-weight: 600;
color: #fff;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
}
/* Responsive Adjustments */
@media (max-width: 992px) {
.col-md-3 {
flex: 0 0 calc(50% - 15px); /* 2 columns on tablet */
max-width: calc(50% - 15px);
}
.search-section {
margin: 30px auto;
padding: 40px 0;
}
}
@media (max-width: 768px) {
.col-md-3 {
flex: 0 0 90%; /* 1 column on mobile, with some margin */
max-width: 90%;
}
.ts-facts {
margin-top: 30px; /* Add top margin between stacked items */
}
.search-section {
padding: 30px 0;
}
.ts-facts-num {
font-size: 2.2em;
}
.ts-facts-title {
font-size: 1em;
}
}
.background_color2{
background-color: var(--text-blue-to-darkblue-color);
border-radius: 12px;
}
.imgbg-text{
color:var(--imgbg-text-color);
}
/* YOUR PROVIDED CSS FOR BUTTONS */
/* NEW: General Button Styling for the Register button */
.btn-primary {
display: inline-block; /* Always visible */
background-color: var(--primary-color);
color: #000f29;
text-transform: uppercase;
padding: 5px 12px;
border: none;
border-radius: 50px;
cursor: pointer;
text-decoration: none;
font-weight: 700;
transition: background-color 0.3s ease;
white-space: nowrap;
font-size: 14px;
}
.btn-primary:hover {
background-color: #ed008c; /* Example hover */
color: #fff;
}
.custom-button {
padding: 3px 6px;
font-size: 14px;
font-weight: 700;
color: var(--blue-to-blue);
border: 4px solid #00bbff;
border-radius: 30px;
background-color: transparent;
cursor: pointer;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
outline: none;
text-align: center;
text-transform: uppercase;
/* display: block;*/
margin-right: 9px;
margin-bottom: 0px;
text-decoration: none;
}
/* Button Hover State */
.custom-button:hover {
background-color: #e300b2; /* Equivalent to hover:bg-green-50 */
color: #ffffff; /* Equivalent to hover:text-green-700 */
border-color: #e300b2; /* Change border color on hover as well for consistency */
}
/* Mobile override: max-width 768px shows the mobile button */
@media (max-width: 768px) {
.custom-button{
margin-bottom: 20px;
}
}
.submenu-toggle {
display: flex;
align-items: center;
gap: 5px;
}
.submenu-arrow {
font-size: 0.8em;
}
.filters {
display: none; /* Submenus initially hidden */
position: absolute;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 5px;
padding: 10px;
min-width: 200px;
z-index: 950; /* Above regular content, below modal */
}
.has-submenu:hover .filters {
display: block; /* Show submenu on hover */
}
.responsive-menu {
list-style: none;
padding: 0;
margin: 0;
}
.responsive-menu li a {
padding: 8px 10px;
}
.section-box {
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* Basic Modal Styles */
/* === MODAL === */
.modal {
display: none;
position: fixed;
/* z-index: 1000;*/
z-index: 99999;
left: 0; top: 0%;
width: 100%; height: 100%;
/* background: rgba(0,0,0,0.7);*/
background: var(--modal-bg);
justify-content: center;
align-items: center;
overflow: hidden;
pointer-events: auto;
padding-top: 27px;
}
.modal-content {
background: #fff;
border-radius: 10px;
padding: 12px;
position: relative;
max-width: 700px;
width: 93%;
max-height: 90vh;
overflow-y: auto;
animation: slideIn 0.3s ease-out;
display: flex;
flex-direction: column;
gap: 15px;
}
.close-button {
position: absolute;
top: 0px; right: 18px;
font-size: 36px;
color: #aaa;
cursor: pointer;
}
.close-button:hover {
color: #333;
}
body.no-scroll {
overflow: hidden;
/* position: fixed;*/
/* width: 100%;*/
}
body.no-scroll #razorpay-checkout-frame {
position: fixed !important;
z-index: 999999999 !important;
}
@keyframes slideIn {
from { transform: translateY(-40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.alert {
margin: 20px 0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
position: relative;
padding-left: 70px;
overflow: hidden;
z-index: 1;
border: none;
}
.alert-success {
color: #2a5f2b;
background-color: #bcdab0;
}
.input-with-toggle {
position: relative;
margin-bottom: 1rem; /* Adjust as needed for spacing */
}
.input-with-toggle input.form-control {
padding-right: 2.5rem; /* Make space for the icon */
}
.toggle-visibility-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #555555; /* Default color */
font-size: 1.2em;
z-index: 10; /* Ensure it's above the input */
}
.toggle-visibility-icon.hidden-icon {
color: #ff6347; /* Color when hidden (e.g., tomato red) */
}
.tab {
overflow: hidden;
border-bottom: 1px solid #ccc;
background-color: #f1f1f1;
display: flex; /* Use flexbox for tab buttons */
justify-content: center; /* Center the tab buttons */
flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
gap: 10px; /* Space between tabs */
padding: 10px; /* Padding around tabs */
border-radius: 8px; /* Rounded corners for the tab container */
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.tab button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 14px 20px; /* Increased padding for better touch targets */
transition: 0.3s;
font-size: 17px;
border-radius: 8px; /* Rounded corners for buttons */
font-weight: 600;
color: #555;
display: flex;
align-items: center;
gap: 8px; /* Space between icon and text */
}
.tab button:hover {
background-color: #ddd;
color: #333;
}
.tab button.active {
background-color: #3498db; /* Active tab color (blue) */
color: white;
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4); /* Shadow for active tab */
}
.tab button.active:hover {
background-color: #3498db; /* Keep active color on hover */
}
.tabcontent {
display: none;
height: 990px; /* Adjusted height for content */
/*
border: 1px solid #ddd;
border-top: none;
padding: 10px;
background-color: #fff;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
*/
}
iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 0 0 8px 8px; /* Ensure iframe matches parent border-radius */
display: none;
overflow: hidden; /* Important: Hide iframe's own scrollbars */
}
iframe.active {
display: block;
}
/* Container for your iframes */
/* Container for your iframes */
.iframe-container {
/*
border: 1px solid #ccc;
padding: 10px;
*/
margin-top: 20px;
position: relative; /* Essential for positioning absolute children */
overflow: hidden; /* Crucial if using absolute positioning for iframes */
border-radius: 8px; /* Apply parent border-radius here */
/* You can set a min-height here if you want the container to always have some minimum size */
min-height: 900px; /* Example: Ensure it doesn't collapse entirely */
}
/* Styles for individual iframes inside the container */
.iframe-container iframe {
width: 100%;
/* REMOVE THE FIXED HEIGHT HERE. Let JavaScript manage it. */
height: 900px; /* Start with a minimal height before JS calculates. */
border: none;
border-radius: 0 0 8px 8px; /* If you want individual iframe corners */
display: none; /* Hidden by default */
overflow: hidden; /* Important: Hide iframe's own scrollbars */
position: absolute; /* Layer them when hidden */
top: 0;
left: 0;
transition: height 0.3s ease-out; /* Smooth height transition */
}
/* Styles for the active (visible) iframe */
.iframe-container iframe.active {
display: block; /* Make visible */
position: static; /* Make it take up space in the document flow */
/* The height will be set dynamically by JavaScript, overriding the 1px */
}
/* Styles for the navigation tabs/buttons (as before) */
/* Styles for the navigation tabs/buttons (as before) */
.tab-navigation {
margin-bottom: 15px;
justify-content: center;
display: flex;
}
.tab-navigation button {
padding: 10px 15px;
margin-right: 5px;
/* background-color: var(--primary-color);*/
/* color: #000f29;*/
/* border: 1px solid #00bbff;*/
/* background-color: #00bbff;*/
/* color: #ffffff;*/
font-weight: 700;
cursor: pointer;
/* border-radius: 50px;*/
/* font-size: 15px;*/
/* text-transform: uppercase;*/
margin: 20px;
}
.tab-navigation button:hover {
background-color: #ed008c;
/* border-color: #00bbff;*/
}
.tab-navigation button.active {
background-color: #ed008c;
color: #fff;
/* border-color: #00bbff;*/
}
/* Styles for result and loader messages */
#result {
text-align: center;
font-size: 1.1em;
padding: 9px;
border-radius: 8px;
margin-top: 12px;
margin-bottom: 6px;
color: #fff; /* Default color for result */
/* background-color: #34495e; */
}
#result .result-text {
color: #ecf0f1; /* Light text for general result */
}
#result .highlight-name {
color: #0bfec4; /* Green highlight for name */
font-weight: 600;
}
#result .highlight-id {
color: #0bfec4; /* Yellow highlight for ID */
font-weight: 600;
}
#result .status-icon {
font-size: 1.2em;
margin-right: 5px;
}
#result .status-paid {
color: #2ecc71; /* Green for paid status */
font-weight: bold;
}
#result .status-unpaid {
color: #e74c3c; /* Red for unpaid status */
font-weight: bold;
}
#loader, #uploadStatus {
text-align: center;
font-size: 1.1em;
color: #3498db; /* Blue for loaders */
margin-top: 10px;
}
#fetchLoader {
text-align: center;
margin-top: 10px;
}
#fetchLoader img {
width: 40px;
height: 40px;
}
#fetchLoader p {
font-size: 14px;
color: #7f8c8d;
}
/* Responsive adjustments for main page */
@media (max-width: 768px) {
.container.content-area {
/* margin: 10px auto;*/
padding: 3px 6px;
/* min-height: 750px;*/
}
.tab button {
font-size: 15px;
padding: 12px 15px;
}
.tabcontent {
height: 500px; /* Adjust iframe height for smaller screens */
}
.tab-navigation button{
padding: 6px 6px;
font-size: 12px;
margin: 20px 6px;
}
.modal {
padding-bottom: 24%;
}
}
@media (max-width: 480px) {
.tab {
flex-direction: column; /* Stack tabs vertically on very small screens */
align-items: stretch;
}
.tab button {
width: 100%;
justify-content: center;
}
.tabcontent {
height: 400px; /* Further reduce iframe height */
}
}
/* start image, details and map upload 1page,html, page2.html and page3.html include */
/* Forms styling */
form {
display: grid;
margin-top: 6px;
width: 100%;
}
label {
font-weight: 600;
margin-bottom: 5px;
display: block;
color: #00bbff; /* Slightly brighter label color */
padding: 16px 12px 0px 12px;
}
select.form-control option {
background-color: #2a416a; /* Option background */
color: #e0e7ff; /* Option text */
}
input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
textarea.form-control,
select.form-control {
width: 100%;
padding: 12px 15px; /* More padding for better touch targets */
border: 1px solid var(--slider-nav-bg); /* Darker border */
border-radius: 8px; /* More rounded corners */
box-sizing: border-box;
/* background-color: #1f3958; Darker background for inputs */
/* color: #e0e7ff; Light text in inputs */
font-size: 16px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input[type="text"].form-control:focus,
input[type="email"].form-control:focus,
input[type="tel"].form-control:focus,
input[type="url"].form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
border-color: #6daee0; /* Highlight on focus */
box-shadow: 0 0 0 3px rgba(109, 174, 224, 0.5); /* Soft glow */
outline: none;
}
select.form-control option {
background-color: #2a416a; /* Option background */
color: #999; /* Option text */
}
/* Buttons */
button.submit-button.btn, button.action-button {
/* background: linear-gradient(145deg, #007bff, #0056b3); */
color: #000f29;
padding: 14px 25px; /* Larger padding */
border: none;
border-radius: 30px; /* Rounded corners */
cursor: pointer;
font-size: 17px;
font-weight: 700;
transition: all 0.3s ease;
/* box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);*/
margin-top: 10px; /* Space above buttons */
width: auto; /* Allow buttons to size to content */
align-self: center; /* Center buttons within grid */
min-width: 300px;
}
button.submit-button.btn:hover, button.action-button:hover {
/* background: linear-gradient(145deg, #0056b3, #007bff); */
/* box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);*/
transform: translateY(-2px); /* Slight lift effect */
color: #fff;
}
button.submit-button.btn:active, button.action-button:active {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#logoutBtn {
background: linear-gradient(145deg, #e74c3c, #c0392b); /* Red gradient for logout */
/* box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);*/
margin-top: 20px;
/* width: fit-content;*/
align-self: flex-end; /* Align logout to the right */
width: 200px;
padding: 12px;
display: flex;
justify-content: center;
border-radius: 50px;
font-size: 18px;
text-transform: uppercase;
font-weight: 600;
}
#logoutBtn:hover {
background: linear-gradient(145deg, #c0392b, #e74c3c);
}
/* Messages */
#mainMessage { /* Specific for result box */
margin-top: 20px;
padding: 12px;
border-radius: 8px;
text-align: center;
font-weight: 600;
}
.error {
/* background-color: #4b1b1b; */
border: 2px solid #ff0000;
color: var(--dark-text-color);
padding: 12px;
border-radius: 6px;
text-align: center;
margin-top: 18px;
width: 90%;
}
.success {
/* background-color: #1b4b27;*/
color: #fff; /* Light green text */
/* border: 1px solid #00ff00;*/
}
/* Loading indicators */
#fetchLoader {
text-align:center;
margin-top:10px;
display:none; /* Controlled by JS */
}
#fetchLoader img {
width:40px; /* Specific image size as per user's original code */
}
#fetchLoader p {
font-size:14px;
margin-top: 5px; /* Add some space below GIF */
color: #a0aec0; /* Match my modern loader message color */
}
/* Confirmation Modal */
#confirmationModal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 1001; /* Higher than global overlay */
/* display: none;*/
}
#confirmationModal .overlay-content {
background: #2a416a;
padding: 40px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
max-width: 450px;
width: 90%;
color: #e0e7ff;
animation: fadeIn 0.3s ease-out;
}
#confirmationModal .button-group {
display: flex;
justify-content: space-around;
margin-top: 30px;
gap: 15px;
}
#confirmationModal .button-group button {
padding: 10px 20px;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
#confirmYes {
background: linear-gradient(145deg, #e74c3c, #c0392b); /* Red for Yes (discard) */
color: white;
border: none;
}
#confirmYes:hover {
background: linear-gradient(145deg, #c0392b, #e74c3c);
}
#confirmNo {
background: linear-gradient(145deg, #28a745, #218838); /* Green for No (cancel) */
color: white;
border: none;
}
#confirmNo:hover {
background: linear-gradient(145deg, #218838, #28a745);
}
/* Section visibility */
#contentSection {
display: none; /* Hidden until verification success */
/*
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid #3d5e8f;
background:#001f40;
padding:20px;
color:white;
border-radius: 12px;
*/
width: 100%; /* Take full width of parent .main */
box-sizing: border-box;
}
/* Tab Navigation */
.tab-nav {
display: flex;
justify-content: center;
margin-bottom: 20px;
border-bottom: 1px solid #3d5e8f;
}
.tab-button {
background-color: #2a416a;
color: #d1e2ff;
padding: 12px 20px;
border: none;
border-radius: 8px 8px 0 0;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: background-color 0.3s ease, color 0.3s ease;
margin: 0 2px;
}
.tab-button:hover {
background-color: #3d5e8f;
}
.tab-button.active {
background-color: #007bff;
color: white;
border-bottom: 3px solid #0056b3;
}
/* close image, details and map upload 1page,html, page2.html and page3.html include */
/* Styles for in-field toggle icons */
.biz-phone-input-wrapper,
.public-email-input-wrapper {
position: relative;
display: flex; /* To align input and icon */
align-items: center;
}
.biz-phone-input-wrapper input,
.public-email-input-wrapper input {
padding-right: 40px; /* Make space for the icon */
flex-grow: 1; /* Allow input to take available space */
}
.toggle-icon {
position: absolute;
right: 10px;
cursor: pointer;
color: #ccc; /* Adjust color as needed */
font-size: 1.2em; /* Adjust size as needed */
}
/* Overlay styles */
#uploadOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
/* display: flex;*/
justify-content: center;
align-items: center;
z-index: 1000; /* Ensure it's on top of other content */
display: none; /* Hidden by default */
}
#overlayContent {
background-color: #001f40; /* Dark blue background */
color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 90%; /* Responsive width */
width: 400px; /* Max width for larger screens */
position: relative; /* For close button positioning */
}
#overlayMessage {
margin-bottom: 20px;
font-size: 15px;
font-weight: 400;
}
#closeOverlay {
/* position: absolute;*/
top: 10px;
/* right: 15px;*/
font-size: 18px;
color: #fff;
cursor: pointer;
background-color: #dc3545;
padding: 6px;
border-radius: 30px;
font-weight: 600;
}
.deleteBtn {
background-color: #dc3545; /* Red color for delete */
color: white;
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
transition: background-color 0.3s ease;
margin-left: auto;
margin-right: auto;
}
.deleteBtn:hover {
background-color: #c82333;
}
.centerdiv{
text-align: center;
padding-bottom: 30px;
padding-top: 18px;
}
input::placeholder,
textarea::placeholder {
color: #666; /* A soft gray, for example */
opacity: 1; /* Ensure full visibility */
}
/*
* Reminder: The ::placeholder pseudo-element does NOT apply to