/* ===== GENERAL ===== */
.section-title {
    font-weight: 700;
    margin-bottom: 30px;
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* 🔹 responsive */
}

section {
    padding: clamp(50px, 10vw, 90px) 0; /* responsive top/bottom padding */
}

/* ===== HERO ===== */
.hero-section {
    background: 
        linear-gradient(
            to right, 
            rgba(0,0,0,0.8) 0%, 
            rgba(0,0,0,0.6) 25%, 
            rgba(0,0,0,0.3) 50%, 
            rgba(0,0,0,0) 100%
        ),
        url('../img/login-bg.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;

    /* Increased padding */
    padding-left: clamp(40px, 10vw, 110px);
    padding-right: clamp(40px, 10vw, 110px);

    min-height: clamp(60vh, 80vh, 90vh);
    box-sizing: border-box; /* ensures padding is counted */
}

.hero-content {
    max-width: 1140px; /* matches category section container */
    width: 100%;
    text-align: left;
    opacity: 0;
    transform: translateX(-50px);
    animation: slideInLeft 1s forwards;
    animation-delay: 0.3s;
}

/* Pre-heading */
.hero-pretext {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    opacity: 0.85;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Main heading */
.hero-section h1 {
    font-size: clamp(2rem, 3vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 20px;
}

/* Subtext */
.hero-section .hero-subtext {
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Hero button */
.hero-section .btn {
    background-color: #FF7622;
    color: #fff;
    border-radius: 8px;
    font-size: clamp(0.9rem, 1vw, 1.1rem);
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border: none;
    transition: all 0.25s ease;
}

.hero-section .btn:hover {
    background-color: #ffe6d2;
    color: #FF7622;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Animation */
@keyframes slideInLeft {
    to { opacity: 1; transform: translateX(0); }
}

/* Category Section Background & Text */
.category-section {
    background-color: #ffffff;
    padding: clamp(50px, 10vw, 90px) 0;
}

/* Sub brand / Pre-title */
.category-sub {
    font-size: 0.85rem;       /* small text */
    font-weight: 500;         /* medium weight */
    letter-spacing: 3px;      /* spaced letters */
    opacity: 0.9;             /* slightly faded */
    margin-top: 2px;
    margin-bottom: 10px;      /* spacing below */
    text-transform: uppercase;
    color: #FF7622;           /* main accent color */
}

.section-title {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 10px;
    color: #333;
}

.category-intro {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: #555;
    line-height: 1.5;
    text-align: justify;
    max-width: 400px;
}

/* Category Section Background & Text */
.category-section {
    background: #eef2f7;
    padding: clamp(50px, 10vw, 90px) 0;
}

/* Header Text */
.category-pretitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 600;
    color: #FF7622;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.section-title {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 15px;
    color: #333;
}

.category-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* left-align all children */
}

.category .brand-sub {
    font-size: 0.85rem;       /* small text */
    font-weight: 500;         /* medium weight */
    letter-spacing: 3px;      /* spaced letters */
    opacity: 0.9;             /* slightly faded */
    margin-top: 2px;
    margin-bottom: 10px;      /* spacing below */
    text-transform: uppercase;
    color: #FF7622;           /* main accent color */
}

.category-intro {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: #555;
    line-height: 1.6;
    text-align: justify;   /* justified text */
    width: 100%;           /* take full container width */
    max-width: 100%;       /* remove fixed 700px limit */
    padding: 0;
}

.category-card-icon {
    background: #ffffff;
    color: #FF7622;
    border-radius: 8px;
    padding: clamp(30px, 4vw, 40px);
    text-align: center;
    font-weight: 700;
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    border: 1px solid #ccc;  /* ✅ added 'solid' */
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
}

.category-card-icon:hover {
    transform: translateY(-10px) scale(1.03);
}

.iconify-icon {
    display: none;
}


.iconify-icon {
    display: none;
}


/* About Section */
.about-section {
    background: 
        linear-gradient(
            to right, 
            rgba(0,0,0,0.8) 100%,   /* dark overlay left */
            rgba(0,0,0,0.3) 100%,  /* softer overlay center */
            rgba(0,0,0,0) 100%    /* transparent right */
        ),
        url('../img/bg.jpg') center/cover no-repeat; /* background image */
    padding: clamp(50px, 10vw, 90px) 0;
    color: #fff; /* make text readable on dark overlay */
}

.about-section .about-intro {
     font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: #ffffff;
    line-height: 1.5;
    text-align: justify;
        margin-bottom: 30px;
}

.about-section h2.section-title {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 800;   
    margin-bottom: 20px;
    color: #fff;
}

.about-section .about-text {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.6;
    color: #fff;
    margin-bottom: 30px;
    text-align: justify;
}

.about-section .brand-sub {
    font-size: 0.85rem;       /* small text */
    font-weight: 500;         /* medium weight */
    letter-spacing: 3px;      /* spaced letters */
    opacity: 0.9;             /* slightly faded */
    margin-top: 2px;
    margin-bottom: 10px;      /* spacing below */
    text-transform: uppercase;
    color: #FF7622;           /* main accent color */
}

/* About Section Button */
.about-section a.btn {
    background-color: #FF7622;   /* your orange */
    color: #fff;                 /* text color */
    border: none;                /* remove the border */
    border-radius: 8px;          /* rounded corners */
    font-weight: 600;
    font-size: clamp(0.9rem, 1vw, 1.1rem);
    padding: 0.6rem 1.5rem;
    transition: all 0.25s ease;
}

.about-section a.btn:hover {
    background-color: #ffe6d2;   /* hover color */
    color: #FF7622;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 992px) {
    .about-section .text-start {
        text-align: center;
        margin-bottom: 30px;
    }
}

/* ===== BRANCHES ===== */
.branch-section {
    background-color: #eef2f7;
}

.branch-card {
    background: #fff;
    padding: clamp(15px, 3vw, 25px);
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem); /* responsive text */
    box-shadow: 0 4px 12px rgba(0,0,0,.07);
}

.branch-section .branch-sub {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #FF7622;
    opacity: 0.9;
    margin-bottom: 10px;
}


/* ===== BRANCH ICON ===== */
.branch-icon {
    font-size: 1.8rem;
    color: #FF7622;
    margin-bottom: 8px;
    display: block;
}

.branch-name {
    font-weight: 700;
    margin-bottom: 4px;
}

.branch-location {
    color: #666;
}

/* ===== FOOTER ===== */
.footer {
    background: #111;
    color: #ccc;
    text-align: center;
    padding: clamp(10px, 2vw, 20px) 0; /* responsive padding */
    font-size: clamp(0.8rem, 1.5vw, 1rem);
}