@charset "utf-8";
/* CSS Document */


/* =========================================================
   MUSKEGON FLORIST & GREENHOUSE
   HERO + FEATURE SECTION
   ========================================================= */


/* ---------------------------------------------------------
   FONT IMPORTS

   The screenshot uses a serif display font combined with
   a handwritten/script font.

   These can be replaced with your own brand fonts later.
   --------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700&family=Yellowtail&display=swap');


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

:root {

    /* Main brand pink */
    --mf-pink: #f51d61;

    /* Slightly darker pink */
    --mf-pink-dark: #e51456;

    /* Main black */
    --mf-black: #111111;

    /* Soft background */
    --mf-background: #fffafa;

    /* Light pink border */
    --mf-border: #f7dce4;

    /* Standard content width */
    --mf-max-width: 1280px;

}


/* =========================================================
   HERO SECTION
   ========================================================= */
   
   .index-famphoto { display:none; }

.mf-hero {

    position: relative;

    /* Hero height */
    min-height: 500px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 29%,
            rgba(255,255,255,.97) 37%,
            rgba(255,255,255,.72) 47%,
            rgba(255,255,255,0) 65%
        );

}


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

/*
    The actual photo should eventually replace this
    placeholder.

    OPTION 1:
    Add your image directly to .mf-hero-image using
    background-image.

    OPTION 2:
    Remove .mf-image-placeholder and place an <img>
    inside .mf-hero-image.
*/

.mf-hero-image {

    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
	

    z-index: 0;

}

.mf-hero-image img { max-width:100%; }


/* ---------------------------------------------------------
   TEMPORARY IMAGE PLACEHOLDER
   --------------------------------------------------------- */

.mf-image-placeholder {

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #777;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            #d8e1d5,
            #f1d4dc 45%,
            #c7d5dc
        );

}


.mf-image-placeholder small {

    font-size: 13px;
    font-weight: 400;

}


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

.mf-hero-content {

    position: relative;

    z-index: 0;

    width: 100%;

    max-width: var(--mf-max-width);

    margin: 0 auto;

    padding:
        14px
        42px
        12px;

    box-sizing: border-box;

}


/* =========================================================
   LOCATION LABEL
   ========================================================= */

.mf-location {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 28px;

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

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .5px;

    color: var(--mf-black);

}


.mf-location span {

    display: block;

    width: 15px;

    height: 1px;

    background: var(--mf-pink);

}


/* =========================================================
   SCRIPT FONT
   ========================================================= */

.mf-script {

    font-family: "Yellowtail", cursive;

    color: var(--mf-pink);
   color:#ed008c;

    font-weight: 400;

}


/* Small "YOUR LOCAL" text */

.mf-local {

    font-size: 29px;

    line-height: 1;

    margin-bottom: 3px;
	text-align: left;

}


/* =========================================================
   MAIN HEADING
   ========================================================= */

.mf-hero h1 {

    margin: 0;

    color: var(--mf-black);

    font-family:
        "DM Serif Display",
        Georgia,
        serif;

    font-size: clamp(48px, 5vw, 68px);

    line-height: .91;

    letter-spacing: -2px;

    font-weight: 400;
	text-align:left;

}


/* =========================================================
   TAGLINE
   ========================================================= */

.mf-tagline {

    margin-top: 15px;

    margin-bottom: 18px;

    font-size: 31px;

    line-height: 1.1;
	text-align:left;

}


/* =========================================================
   INTRODUCTORY PARAGRAPH
   ========================================================= */

.mf-intro {

    max-width: 350px;

    margin:
        0 0 18px;

    color: #161616;

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

    font-size: 16px;

    line-height: 1.45;

    font-weight: 400;
	text-align:left;

}


/* =========================================================
   BUTTON ROW
   ========================================================= */

.mf-buttons {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;

}


/* =========================================================
   GENERAL BUTTON
   ========================================================= */

.mf-button {

    min-height: 52px;

    padding:
        0 18px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    box-sizing: border-box;

    border-radius: 7px;

    text-decoration: none;

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

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .2px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;

}


/* Button icons */

.mf-button svg {

    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* Button hover */

.mf-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 5px 14px rgba(0,0,0,.14);

}


/* =========================================================
   PINK SHOP FLOWERS BUTTON
   ========================================================= */

.mf-button-primary {

    color: white;

    background: var(--mf-pink);
   background:#ed008c;
    border: 1px solid var(--mf-pink);

}


/* =========================================================
   SYMPATHY BUTTON
   ========================================================= */

.mf-button-secondary {

    color: var(--mf-black);

    background: white;

    border: 1.5px solid var(--mf-black);

}


/* =========================================================
   GREENHOUSE BUTTON
   ========================================================= */

.mf-button-dark {

    color: white;

    background: var(--mf-black);

    border: 1.5px solid var(--mf-black);

}


/* =========================================================
   DELIVERY CALLOUT
   ========================================================= */

.mf-delivery {

    width: fit-content;

    min-width: 330px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        10px 20px;

    box-sizing: border-box;

    border-radius: 7px;

    background: rgba(255,255,255,.91);

    box-shadow:
        0 3px 15px rgba(0,0,0,.04);
		
		text-align:center;

}


/* Delivery truck */

.mf-delivery svg {

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    fill: none;

    stroke: var(--mf-pink);
stroke:#ed008c;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Delivery text wrapper */

.mf-delivery div {

    display: flex;

    flex-direction: column;

    gap: 2px;

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

}


/* Delivery heading */

.mf-delivery strong {

    color: var(--mf-pink);

    font-size: 13px;

    line-height: 1.1;

}


/* Delivery description */

.mf-delivery span {

    color: #111;

    font-size: 12px;

    line-height: 1.3;

}


/* Red "12 PM" */

.mf-delivery b {

    color: var(--mf-pink);
color:#ed008c;
}


/* =========================================================
   FEATURE SECTION
   ========================================================= */

.mf-features {

    position: relative;

    z-index: 10;

    display: grid;

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

    max-width: var(--mf-max-width);

    margin: 0 auto;

    padding:
        20px 42px;

    box-sizing: border-box;

    border-top: 1px solid #f3e2e5;

    background:
        linear-gradient(
            90deg,
            #fff,
            #fffafa,
            #fff
        );
		
		vertical-align: top;

}


/* =========================================================
   INDIVIDUAL FEATURE
   ========================================================= */

.mf-feature {

    min-height: 92px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding:
        0 28px;

    box-sizing: border-box;


}


/* Add vertical divider between cards */

.mf-feature + .mf-feature {

    border-left: 1px solid #eadfe1;

}


/* =========================================================
   FEATURE ICON CIRCLE
   ========================================================= */

.mf-feature-icon {

    width: 68px;
    height: 68px;

    flex: 0 0 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        2px solid #f8d9e1;

    border-radius: 50%;

}


/* Feature SVG */

.mf-feature-icon svg {

    width: 40px;
    height: 40px;

    fill: none;

    stroke: var(--mf-pink);

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* =========================================================
   FEATURE TEXT
   ========================================================= */

.mf-feature-content h2 {

    margin:
        0 0 7px;

    color: #111;

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

    font-size: 15px;

    line-height: 1.1;

    font-weight: 700;

}


.mf-feature-content p {

    margin: 0;

    color: #111;

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

    font-size: 13px;

    line-height: 1.55;

}


.mf-feature-content b {

    color: var(--mf-pink);

}


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

@media (max-width: 1000px) {

    .mf-hero {

        min-height: 500px;

    }


    .mf-hero-image {

        /*width: 62%;*/

       /* opacity: .7;*/
max-height:400px;
    }
	
	.mf-hero-image img  { 	object-fit: cover; width:auto;}


    .mf-hero-content {

        padding-left: 30px;
        padding-right: 30px;

    }


    .mf-hero h1 {

        font-size: 55px;

    }


    .mf-tagline {

        font-size: 27px;

    }


    .mf-buttons {

        max-width: 650px;

    }


    .mf-features {

        padding:
            18px 20px;

    }


    .mf-feature {

        padding:
            0 15px;

        gap: 12px;

    }


    .mf-feature-icon {

        width: 58px;
        height: 58px;

        flex-basis: 58px;

    }


    .mf-feature-icon svg {

        width: 34px;
        height: 34px;

    }
	
 .mf-delivery { }

}


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

@media (max-width: 700px) {

    /* ---------------------------------------------
       Hero becomes a vertical layout on phones
       --------------------------------------------- */
  .index-famphoto { display:block; }
  .index-famphoto img { max-width:100%; height:auto; }
    .mf-hero {

        min-height: auto;

        background:
            linear-gradient(
                180deg,
                #fff 0%,
                #fffafa 100%
            );

    }


    /* Image moves above the text */

    .mf-hero-image {

        position: relative;

        top: auto;
        right: auto;

        width: 100%;

        height: 360px;

        opacity: 1;
		display:none;

    }
	
	.mf-hero-image img {
    width: 100%;
    height: 100%;
	
    object-fit: cover;
    object-position: top;
    display: block;
}


    /* Remove desktop fade on mobile */

    .mf-hero-image::after {

        display: none;

    }


    .mf-hero-content {
        padding:
            24px 20px 25px;
			

    }


    .mf-location {

        margin-bottom: 18px;

    }


    .mf-local {

        font-size: 25px;

    }


    .mf-hero h1 {

        font-size: clamp(43px, 12vw, 58px);

        letter-spacing: -1.5px;

    }


    .mf-tagline {

        font-size: 26px;

        margin-top: 13px;

    }


    .mf-intro {

        max-width: 100%;

        font-size: 15px;

    }


    /* Stack the buttons */

    .mf-buttons {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 8px;

    }


    .mf-button {

        width: 100%;

        padding:
            0 10px;

        font-size: 11px;

    }


    /* Greenhouse gets its own row */

    .mf-button-dark {

        grid-column:
            1 / -1;

    }


.mf-delivery {

    width: auto;

    min-width: 330px;

   /* display: flex;*/
   display:inline-block;

    align-items: center;

    gap: 13px;

    padding:
        10px 20px;

    box-sizing: border-box;

    border-radius: 7px;

    background: rgba(255,255,255,.91);

    box-shadow:
        0 3px 15px rgba(0,0,0,.04);
		
		text-align:center;
		display:none;

}


/* Delivery truck */

.mf-delivery svg {

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    fill: none;

    stroke: var(--mf-pink);

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Delivery text wrapper */

.mf-delivery div {

    display: flex;

    flex-direction: column;

    gap: 2px;

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

}


    /* ---------------------------------------------
       Feature cards stack vertically
       --------------------------------------------- */
.mf-feature-content { text-align:right;  width:100%; }
    .mf-features {

        display: flex;

        flex-direction: column;

        padding:
            5px 20px 15px;
	align-content: center;
    }


    .mf-feature {

        min-height: 85px;

        padding:
            14px 0;

    }


    /* Remove vertical dividers */

    .mf-feature + .mf-feature {

        border-left: none;

        border-top:
            1px solid #eadfe1;

    }


    .mf-feature-icon {

        width: 56px;
        height: 56px;

        flex-basis: 56px;

    }


    .mf-feature-icon svg {

        width: 32px;
        height: 32px;

    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .mf-hero-image {

        height: 220px;

    }


    .mf-hero h1 {

        font-size: 42px;

    }


    .mf-tagline {

        font-size: 23px;

    }


    .mf-buttons {

        grid-template-columns: 1fr;

    }


    .mf-button-dark {

        grid-column: auto;

    }


    .mf-feature-content p {

        font-size: 12px;

    }

}