/* =====================================================
   Flying Canapé
   Premium Catering Perth
   Shared Website Stylesheet v2
   Part 1 of 3
===================================================== */


/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =====================================================
   BASE
===================================================== */

html {
    scroll-behavior: smooth;
}


body {

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

    background: #ffffff;

    color: #333;

    line-height: 1.6;

}


img {

    max-width:100%;

    display:block;

}


/* =====================================================
   LINKS
===================================================== */

a {

    color:#d4af37;

    text-decoration:none;

    transition:0.3s;

}


a:hover {

    color:#b8952f;

}


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

header {

    background:#111;

    color:white;

    text-align:center;

    padding:45px 20px;

}


header img {

    width:220px;

    max-width:90%;

    margin:0 auto 20px;

}


header h1 {

    font-size:42px;

    letter-spacing:2px;

    margin-bottom:10px;

    color:white;

}


header p {

    font-size:22px;

    color:#eeeeee;

}


/* =====================================================
   GENERAL SECTIONS
===================================================== */

section {

    max-width:1000px;

    margin:auto;

    padding:50px 20px;

    text-align:center;

}


h1 {

    font-size:42px;

}


h2 {

    font-size:32px;

    color:#222;

    margin-bottom:25px;

}


h3 {

    font-size:22px;

    color:#222;

    margin-bottom:15px;

}


p {

    font-size:17px;

    color:#555;

    margin-bottom:20px;

}


/* =====================================================
   BUTTONS
===================================================== */

.menu-button {

    display:inline-block;

    background:#d4af37;

    color:white;

    padding:14px 35px;

    border-radius:6px;

    font-size:20px;

    font-weight:bold;

    letter-spacing:1px;

    margin-top:20px;

}


.menu-button:hover {

    background:#b8952f;

    color:white;

}


/* =====================================================
   SERVICES
===================================================== */

.services {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:25px;

    margin-top:30px;

}


.card {

    width:260px;

    background:#f7f7f7;

    padding:25px;

    border-radius:10px;

    text-align:center;

}


.card:hover {

    transform:translateY(-4px);

    transition:.3s;

}


.card p {

    font-size:16px;

}


/* =====================================================
   INTRO TEXT
===================================================== */

.intro {

    max-width:800px;

    margin:auto;

}


/* =====================================================
   CONTACT SECTION
===================================================== */

.contact {

    background:#111;

    color:white;

    max-width:none;

}


.contact h2 {

    color:white;

}


.contact p {

    color:white;

}


.contact a {

    color:#d4af37;

}
/* =====================================================
   Flying Canapé
   Shared Website Stylesheet v2
   Part 2 of 3
===================================================== */


/* =====================================================
   MENU PAGE
===================================================== */


.menu-card {

    background:#f7f7f7;

    max-width:850px;

    margin:30px auto;

    padding:25px;

    border-radius:10px;

    text-align:left;

}


.menu-row {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding:14px 0;

    border-bottom:1px solid #ddd;

}


.menu-row:last-child {

    border-bottom:none;

}


.menu-item {

    flex:1;

    font-size:17px;

    color:#333;

}


.menu-item small {

    display:block;

    font-size:14px;

    color:#777;

    margin-top:5px;

}


.price {

    font-size:18px;

    font-weight:bold;

    color:#d4af37;

    white-space:nowrap;

}


/* =====================================================
   MENU HEADINGS
===================================================== */


.menu-title {

    text-align:center;

    margin-bottom:40px;

}


.menu-title h2 {

    margin-bottom:15px;

}


.menu-title p {

    max-width:700px;

    margin:auto;

}



/* =====================================================
   MENU NOTES
===================================================== */


.note {

    font-size:14px;

    color:#777;

    font-style:italic;

    margin-top:25px;

}



/* =====================================================
   PLATTERS
===================================================== */


.platter {

    background:#f7f7f7;

    border-radius:10px;

    padding:25px;

    margin:20px auto;

    max-width:850px;

}



/* =====================================================
   TABLES
===================================================== */


table {

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}


th {

    background:#111;

    color:white;

    padding:15px;

    text-align:left;

}


td {

    padding:15px;

    border-bottom:1px solid #ddd;

}


tr:hover {

    background:#faf5e6;

}



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


footer {

    background:#000;

    color:white;

    text-align:center;

    padding:25px 20px;

}


footer p {

    color:white;

    font-size:14px;

    margin:5px;

}


footer a {

    color:#d4af37;

}



/* =====================================================
   MOBILE MENU FIXES
===================================================== */


@media(max-width:700px){


    .menu-row {

        flex-direction:column;

        gap:5px;

    }


    .price {

        margin-top:5px;

    }


    .menu-card {

        padding:20px;

    }


}
/* =====================================================
   Flying Canapé
   Shared Website Stylesheet v2
   Part 3 of 3
===================================================== */


/* =====================================================
   HOMEPAGE IMAGE SLIDER
===================================================== */


.gallery-section {

    width:100%;

    max-width:none;

    padding:25px 0 45px;

    overflow:hidden;

}


.slider {

    width:100%;

    overflow:hidden;

}


.slide-track {

    display:flex;

    width:max-content;

    animation:slide 35s linear infinite;

}


.slide-track:hover {

    animation-play-state:paused;

}



.slide-track img {

    width:180px;

    height:120px;

    object-fit:cover;

    border-radius:10px;

    margin-right:15px;

    flex-shrink:0;

}



/* Smooth movement */

@keyframes slide {


    from {

        transform:translateX(0);

    }


    to {

        transform:translateX(-50%);

    }


}



/* =====================================================
   IMAGE FADE EDGES
===================================================== */


.gallery-section {

    position:relative;

}


.gallery-section:before,

.gallery-section:after {


    content:"";

    position:absolute;

    top:0;

    width:60px;

    height:100%;

    z-index:2;

}


.gallery-section:before {

    left:0;

    background:linear-gradient(to right,#fff,transparent);

}


.gallery-section:after {

    right:0;

    background:linear-gradient(to left,#fff,transparent);

}



/* =====================================================
   GALLERY PAGE IMAGES
===================================================== */


.gallery {

    display:grid;

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

    gap:20px;

}


.gallery img {

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:10px;

}



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


@media(max-width:900px){


    header h1 {

        font-size:36px;

    }


    .services {

        gap:15px;

    }


    .card {

        width:45%;

    }


    .slide-track img {

        width:150px;

        height:100px;

    }


    .gallery {

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

    }


}



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


@media(max-width:600px){


    header {

        padding:35px 15px;

    }


    header img {

        width:170px;

    }


    header h1 {

        font-size:30px;

    }


    header p {

        font-size:17px;

    }


    section {

        padding:40px 15px;

    }


    h2 {

        font-size:26px;

    }


    p {

        font-size:16px;

    }


    .card {

        width:100%;

    }


    .menu-button {

        width:100%;

        text-align:center;

    }


    .slide-track img {

        width:110px;

        height:75px;

        margin-right:8px;

    }


    .gallery {

        grid-template-columns:1fr;

    }


    .gallery img {

        height:190px;

    }


}



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


@media(max-width:380px){


    .slide-track img {

        width:95px;

        height:65px;

    }


}
/* ==========================================
   Final Mobile Slider Size Adjustment
========================================== */

@media (max-width:600px){

    .slide-track img {

        width:96px;
        height:65px;

        margin-right:8px;

        border-radius:8px;

    }

}
.slide-track img {

    width:160px;
    height:105px;

}
/* ==========================================
   FORCE SMALL MOBILE FOOD SLIDER
========================================== */

@media (max-width:600px) {

    .gallery-section {
        padding:10px 0;
    }

    .slider {
        height:80px;
    }

    .slide-track {
        height:80px;
    }

    .slide-track img,
    .gallery-section img {

        width:90px !important;
        height:60px !important;

        max-width:none !important;

        object-fit:cover;

        margin-right:6px;

        border-radius:6px;

    }

}
/* ==========================================
   FINAL iPHONE SLIDER FIX
========================================== */

@media only screen and (max-width:600px) {

    .gallery-section .slider .slide-track img {

        width:90px !important;

        height:60px !important;

        max-width:none !important;

        object-fit:cover !important;

        margin-right:6px !important;

    }


    .gallery-section .slider .slide-track {

        height:65px !important;

    }


    .gallery-section .slider {

        height:65px !important;

    }

}
/* ==========================================
   iPHONE ONLY - SMALL FOOD SLIDER
========================================== */

@media screen and (max-width:600px) {

    .gallery-section {
        padding: 10px 0;
        height: 90px;
        overflow:hidden;
    }


    .gallery-section .slider {
        height:80px;
        overflow:hidden;
    }


    .gallery-section .slide-track {
        height:80px;
        display:flex;
        align-items:center;
    }


    .gallery-section .slide-track img {

        width:75px !important;

        height:50px !important;

        min-width:75px !important;

        max-width:75px !important;

        object-fit:cover !important;

        margin-right:8px !important;

        border-radius:6px !important;

    }

}
/* TEST - FORCE ALL SLIDER IMAGES SMALL */

@media (max-width:600px){

    img {

        max-width:75px !important;
        height:50px !important;

    }

}