/* resources/base.css */

/* General body styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: #1a1a2e; /* Dark Blue/Purple */
    color: #e0e0e0; /* Light Gray */
    line-height: 1.6;
}

/* Container for content width */
.container {
    max-width: 1200px;
}

/* Headings with gradient effect */
h1, h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    /* Tailwind's bg-clip-text and text-transparent handle the gradient */
}

/* Custom button styling (if not fully covered by Tailwind) */
.btn-primary {
    background-color: #e94560; /* Vibrant Red */
    color: white;
    padding: 1rem 2rem;
    border-radius: 9999px; /* full rounded */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease-in-out;
}

.btn-primary:hover {
    background-color: #c2314a; /* Darker Red */
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Service Card Hover Effect */
.service-card,
.feature-item,
.team-card,
.testimonial-card,
.faq-item {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.service-card:hover,
.feature-item:hover,
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* How It Works Section - Vertical lines for desktop */
@media (min-width: 768px) {
    #how-it-works .grid > div:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -60px; /* Adjust based on gap and icon size */
        top: 50%;
        transform: translateY(-50%);
        width: 80px; /* Length of the line */
        height: 2px;
        background-color: #6b7280; /* Gray-500 */
        z-index: 0;
    }
}

/* Slider specific styles */
#portfolio-slider .slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

#portfolio-slider .slide-item.active {
    opacity: 1;
    visibility: visible;
}

.slider-arrow {
    cursor: pointer;
}

.indicator-dot {
    cursor: pointer;
}

.indicator-dot.active {
    background-color: #ffffff;
}

/* FAQ Section - Chevron rotation */
.faq-question i.bx-chevron-down {
    transition: transform 0.3s ease-in-out;
}

.faq-question.active i.bx-chevron-down {
    transform: rotate(180deg);
}

/* Form input focus styling */
input:focus,
textarea:focus,
select:focus {
    border-color: transparent; /* Remove default border */
    box-shadow: 0 0 0 2px var(--tw-ring-color); /* Apply ring */
}

/* Cookie banner specific styles */
#cookie-banner {
    transition: all 0.5s ease-in-out;
}

#cookie-settings-modal {
    transition: opacity 0.3s ease-in-out;
}
/* New typography styles for .regShieldWrap */

/* Wrapper for content with specific padding and max-width */
.regShieldWrap {
    padding-top: 4rem; /* Top padding for the section */
    padding-left: 1.5rem; /* Left padding for the section */
    padding-right: 1.5rem; /* Right padding for the section */
    max-width: 1200px; /* Maximum width for content */
    margin-left: auto; /* Center the wrapper horizontally */
    margin-right: auto; /* Center the wrapper horizontally */
}

/* Heading 1 styling */
.regShieldWrap h1 {
    font-size: 2.5rem; /* Large font size for main headings */
    line-height: 1.2; /* Tighter line height for headings */
    margin-bottom: 1.5rem; /* Space below the heading */
    font-weight: 700; /* Bold font weight */
}

/* Heading 2 styling */
.regShieldWrap h2 {
    font-size: 2rem; /* Slightly smaller than h1 */
    line-height: 1.25; /* Line height for headings */
    margin-bottom: 1.25rem; /* Space below the heading */
    font-weight: 700; /* Bold font weight */
}

/* Heading 3 styling */
.regShieldWrap h3 {
    font-size: 1.75rem; /* Smaller than h2 */
    line-height: 1.3; /* Line height for headings */
    margin-bottom: 1rem; /* Space below the heading */
    font-weight: 600; /* Semi-bold font weight */
}

/* Heading 4 styling */
.regShieldWrap h4 {
    font-size: 1.5rem; /* Smaller than h3 */
    line-height: 1.35; /* Line height for headings */
    margin-bottom: 0.75rem; /* Space below the heading */
    font-weight: 600; /* Semi-bold font weight */
}

/* Heading 5 styling */
.regShieldWrap h5 {
    font-size: 1.25rem; /* Smaller than h4 */
    line-height: 1.4; /* Line height for headings */
    margin-bottom: 0.5rem; /* Space below the heading */
    font-weight: 500; /* Medium font weight */
}

/* Paragraph styling */
.regShieldWrap p {
    font-size: 1.125rem; /* Standard paragraph font size */
    line-height: 1.7; /* Comfortable line height for readability */
    margin-bottom: 1.25rem; /* Space below paragraphs */
}

/* Unordered list styling */
.regShieldWrap ul {
    list-style-type: disc; /* Default disc bullet points */
    padding-left: 1.5rem; /* Indent list items */
    margin-bottom: 1.5rem; /* Space below the list */
}

/* List item styling */
.regShieldWrap li {
    font-size: 1.125rem; /* Font size for list items */
    line-height: 1.7; /* Comfortable line height for list items */
    margin-bottom: 0.5rem; /* Space between list items */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .regShieldWrap {
        padding-top: 2.5rem; /* Reduce top padding on smaller screens */
        padding-left: 1rem; /* Reduce side padding on smaller screens */
        padding-right: 1rem; /* Reduce side padding on smaller screens */
    }

    .regShieldWrap h1 {
        font-size: 2rem; /* Adjust h1 for mobile */
        margin-bottom: 1.25rem;
    }

    .regShieldWrap h2 {
        font-size: 1.75rem; /* Adjust h2 for mobile */
        margin-bottom: 1rem;
    }

    .regShieldWrap h3 {
        font-size: 1.5rem; /* Adjust h3 for mobile */
        margin-bottom: 0.75rem;
    }

    .regShieldWrap h4 {
        font-size: 1.25rem; /* Adjust h4 for mobile */
        margin-bottom: 0.5rem;
    }

    .regShieldWrap h5 {
        font-size: 1.125rem; /* Adjust h5 for mobile */
        margin-bottom: 0.25rem;
    }

    .regShieldWrap p,
    .regShieldWrap li {
        font-size: 1rem; /* Adjust base text size for mobile */
        margin-bottom: 1rem;
    }

    .regShieldWrap ul {
        margin-bottom: 1rem;
    }
}
@media screen and (width <768px) {
    .slider-arrow {
        display: none;
    }
    .items-start a {
        word-break: break-all;
    }
}