/* ===========================================
KARANJADE.COM
Main Stylesheet
=========================================== */


/* ===========================================
GLOBAL
=========================================== */

* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}


body {

    font-family:Arial, Helvetica, sans-serif;

    background:#FFFFFF;

    color:#111111;

    line-height:1.6;

}


/* ===========================================
HEADER
=========================================== */

header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 60px;

    border-bottom:1px solid #E5E7EB;

    position:sticky;

    top:0;

    background:white;

    z-index:100;

}


.logo a {

    text-decoration:none;

    color:#111111;

    font-size:28px;

    font-weight:bold;

    letter-spacing:2px;

}


nav {

    display:flex;

    gap:35px;

}


nav a {

    text-decoration:none;

    color:#111111;

    font-size:16px;

    transition:.3s;

}


nav a:hover {

    color:#2563EB;

}


/* ===========================================
END HEADER
=========================================== */


/* ===========================================
HERO
=========================================== */

.hero {

    min-height:80vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}


.hero-content {

    max-width:800px;

}


.hero h1 {

    font-size:64px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:25px;

}


.hero p {

    font-size:24px;

    color:#666666;

    margin-bottom:45px;

}


.hero-button {

    display:inline-block;

    background:#111111;

    color:white;

    text-decoration:none;

    padding:18px 40px;

    border-radius:50px;

    font-size:18px;

    transition:.3s;

}


.hero-button:hover {

    background:#2563EB;

}


/* ===========================================
END HERO
=========================================== */


/* ===========================================
CATEGORIES
=========================================== */

.categories {

    padding:80px 60px;

}


.categories h2 {

    font-size:42px;

    margin-bottom:10px;

    text-align:center;

}


.categories p {

    text-align:center;

    color:#666666;

    margin-bottom:50px;

}


.category-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}


.category-card {

    display:block;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:40px;

    text-align:center;

    text-decoration:none;

    color:#111111;

    transition:.3s;

    cursor:pointer;

}


.category-card:hover {

    transform:translateY(-8px);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.category-card h3 {

    font-size:24px;

}


.category-icon {

    width:56px;

    height:56px;

    margin:0 auto 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#111111;

}


.category-icon svg {

    width:36px;

    height:36px;

    stroke-width:1.8;

}


/* ===========================================
END CATEGORIES
=========================================== */


/* ===========================================
CATEGORY HEADER
=========================================== */

.category-header {

    max-width:1200px;

    margin:0 auto;

    padding:70px 60px 30px;

}


.category-header h1 {

    font-size:48px;

    line-height:1.2;

    margin-bottom:12px;

}


.category-header p {

    color:#666666;

    font-size:20px;

}


/* ===========================================
END CATEGORY HEADER
=========================================== */


/* ===========================================
BUSINESS LIST
=========================================== */

.businesses {

    padding:40px 60px 80px;

}


.business-grid {

    width:100%;

    max-width:1200px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(3, minmax(0, 1fr));

    gap:25px;

}


/* ===========================================
BUSINESS CARD
=========================================== */

.business-card {

    min-width:0;

    width:100%;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    overflow:hidden;

    padding:25px;

    transition:transform .3s, box-shadow .3s;

}


.business-card:hover {

    transform:translateY(-5px);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.business-card h2 {

    font-size:24px;

    line-height:1.3;

    margin-bottom:18px;

}


.business-description {

    color:#666666;

    margin-bottom:18px;

}


.business-address {

    font-size:15px;

    margin-bottom:8px;

}


.business-sector {

    color:#666666;

    font-size:14px;

    margin-bottom:8px;

}


.business-landmark {

    color:#666666;

    font-size:14px;

    margin-bottom:8px;

}


.business-phone {

    margin-bottom:8px;

}


.business-hours {

    color:#666666;

    font-size:14px;

    margin-bottom:20px;

}


.business-actions {

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}


.business-button {

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

    background:#111111;

    color:#FFFFFF;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}


.business-button:hover {

    background:#2563EB;

}


/* ===========================================
END BUSINESS CARD
=========================================== */


/* ===========================================
RESPONSIVE
=========================================== */

@media (max-width:900px) {

    .business-grid {

        grid-template-columns:repeat(2,1fr);

    }

}


@media (max-width:700px) {

    header {

        padding:18px 25px;

    }


    .logo a {

        font-size:24px;

    }


    nav {

        gap:20px;

    }


    .hero h1 {

        font-size:44px;

    }


    .hero p {

        font-size:20px;

    }


    .categories {

        padding:60px 25px;

    }


    .category-grid {

        grid-template-columns:1fr;

    }


    .category-header {

        padding:50px 25px 20px;

    }


    .category-header h1 {

        font-size:36px;

    }


    .businesses {

        padding:30px 25px 60px;

    }


    .business-grid {

        grid-template-columns:1fr;

    }

}


/* ===========================================
END RESPONSIVE
=========================================== */

/* ===========================================
INDIVIDUAL BUSINESS PAGE
=========================================== */

.business-detail {

    max-width:1000px;

    margin:0 auto;

    padding:70px 40px 100px;

}



.business-detail-content {

    max-width:800px;

}


.business-back {

    display:inline-block;

    margin-bottom:30px;

    color:#666666;

    text-decoration:none;

    font-size:15px;

}


.business-back:hover {

    color:#2563EB;

}


.business-detail h1 {

    font-size:52px;

    line-height:1.2;

    margin-bottom:10px;

}


.business-detail-category {

    color:#2563EB;

    font-size:16px;

    font-weight:600;

    margin-bottom:25px;

}


.business-detail-description {

    color:#666666;

    font-size:20px;

    margin-bottom:40px;

}


.business-detail-item {

    padding:20px 0;

    border-top:1px solid #E5E7EB;

}


.business-detail-item strong {

    display:block;

    margin-bottom:6px;

}


.business-detail-item p {

    color:#666666;

}


.business-detail-actions {

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:30px;

}


/* ===========================================
END INDIVIDUAL BUSINESS PAGE
=========================================== */

/* ===========================================
CLICKABLE BUSINESS CARDS
=========================================== */

.business-card {

    cursor:pointer;

}


/* ===========================================
END CLICKABLE BUSINESS CARDS
=========================================== */


/* ===========================================
BUSINESS CARD IMAGE
=========================================== */

.business-image {

    width:100%;

    height:220px;

    overflow:hidden;

    position:relative;

}

.business-image img {

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

}



/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

/* ===========================================
   TABLET
   =========================================== */

@media (max-width: 900px) {

    header {
        padding: 18px 30px;
    }

    nav {
        gap: 20px;
    }

    .hero {
        min-height: 70vh;
        padding: 40px 30px;
    }

    .hero h1 {
        font-size: 50px;
    }

    .hero p {
        font-size: 21px;
    }

    .categories {
        padding: 60px 30px;
    }

    .categories h2 {
        font-size: 36px;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .businesses {
        padding: 60px 30px;
    }

    .business-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

}


/* ===========================================
   MOBILE
   =========================================== */

@media (max-width: 600px) {

    /* HEADER */

    header {
        padding: 16px 20px;
        flex-direction: column;
        gap: 12px;
    }

    .logo a {
        font-size: 24px;
    }

    nav {
        gap: 20px;
    }

    nav a {
        font-size: 14px;
    }


    /* HERO */

    .hero {
        min-height: 65vh;
        padding: 30px 20px;
    }

    .hero h1 {
        font-size: 40px;
        line-height: 1.15;
        margin-bottom: 20px;
    }

    .hero p {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .hero-button {
        padding: 15px 30px;
        font-size: 16px;
    }


    /* CATEGORIES */

    .categories {
        padding: 50px 20px;
    }

    .categories h2 {
        font-size: 30px;
    }

    .categories p {
        margin-bottom: 30px;
    }

    .category-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .category-card {
        padding: 30px 20px;
    }

    .category-card h3 {
        font-size: 21px;
    }


    /* BUSINESS LIST */

    .businesses {
        padding: 50px 20px;
    }

    .business-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    /* BUSINESS CARD */

    .business-card-content {
        padding: 20px;
    }

    .business-card h2 {
        font-size: 21px;
    }

    .business-image {
        height: 180px;
    }

.business-detail-image {
    height:250px;
}

    /* CATEGORY HEADER */

    .category-header {
        padding: 40px 20px;
        text-align: center;
    }

    .category-header h1 {
        font-size: 32px;
        line-height: 1.2;
    }

    .category-header p {
        font-size: 17px;
    }

}

/* ===========================================
   FOOTER
   =========================================== */

footer {

    background:#111111;

    color:#FFFFFF;

    padding:50px 60px 20px;

    margin-top:80px;

}


.footer-content {

    max-width:1200px;

    margin:0 auto;

    display:flex;

    justify-content:space-between;

    gap:40px;

}


.footer-brand {

    max-width:400px;

}


.footer-brand a {

    color:#FFFFFF;

    text-decoration:none;

    font-size:26px;

    font-weight:bold;

    letter-spacing:2px;

}


.footer-brand p {

    color:#AAAAAA;

    margin-top:12px;

}


.footer-links {

    display:flex;

    gap:30px;

    align-items:flex-start;

}


.footer-links a {

    color:#FFFFFF;

    text-decoration:none;

    font-size:15px;

}


.footer-links a:hover {

    color:#2563EB;

}


.footer-bottom {

    max-width:1200px;

    margin:40px auto 0;

    padding-top:20px;

    border-top:1px solid #333333;

}


.footer-bottom p {

    color:#888888;

    font-size:14px;

}


/* ===========================================
   FOOTER RESPONSIVE
   =========================================== */

@media (max-width:600px) {

    footer {

        padding:40px 20px 20px;

        margin-top:60px;

    }


    .footer-content {

        flex-direction:column;

        gap:30px;

    }


    .footer-links {

        flex-direction:column;

        gap:15px;

    }


    .footer-bottom {

        margin-top:30px;

    }

}

/* ===========================================
   CONTACT PAGE
   =========================================== */

.contact-section {

    padding:80px 60px;

}


.contact-content {

    max-width:1000px;

    margin:0 auto;

}


.contact-content h1 {

    font-size:48px;

    text-align:center;

    margin-bottom:15px;

}


.contact-intro {

    max-width:700px;

    margin:0 auto 50px;

    text-align:center;

    color:#666666;

    font-size:18px;

}


.contact-options {

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:25px;

}


.contact-card {

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:30px;

}


.contact-card h2 {

    font-size:21px;

    margin-bottom:12px;

}


.contact-card p {

    color:#666666;

}


.contact-email {

    margin:50px auto 0;

    padding:35px;

    text-align:center;

    border:1px solid #E5E7EB;

    border-radius:18px;

}


.contact-email h2 {

    font-size:26px;

    margin-bottom:10px;

}


.contact-email p {

    color:#666666;

    margin-bottom:5px;

}


.contact-email a {

    color:#2563EB;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

}


.contact-email a:hover {

    text-decoration:underline;

}


/* ===========================================
   CONTACT RESPONSIVE
   =========================================== */

@media (max-width:900px) {

    .contact-section {

        padding:60px 30px;

    }

    .contact-options {

        grid-template-columns:1fr;

    }

}


@media (max-width:600px) {

    .contact-section {

        padding:50px 20px;

    }

    .contact-content h1 {

        font-size:34px;

    }

    .contact-intro {

        font-size:16px;

    }

    .contact-card {

        padding:25px;

    }

}

/* ===========================================
   INDIVIDUAL BUSINESS IMAGE
   =========================================== */

.business-detail-image {

    width:100%;

    max-width:900px;

    height:450px;

    margin:0 auto 30px;

    overflow:hidden;

    border-radius:18px;

    background:#F3F4F6;

}


.business-detail-image img {

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;
    object-position:center;

}