@import "tailwindcss";

@theme {
    --color-clifford: #da373d;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-beige: #f8f0e3;
    --color-dark-gray: #5e7140;
    --color-red: #c73327;
    --color-brown: #5f502c;
    }

    :root {
    --color-clifford: #da373d;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-beige: #f8f0e3;
    --color-dark-gray: #5e7140;
    --color-red: #c73327;
    --color-dark-red: #9c301c;
    --color-brown: #5f502c;
}

/* Global */

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.txt-red {
    color: var(--color-red);
}

.txt-brown {
color: var(--color-brown);
}

.main {
    /* background-color: #45083f; */
    /* background-color: var(--color-red); */
    background-color: var(--color-dark-red);
    /* border-color: var(--color-beige);
    border: 2px solid var(--color-beige); */
}
.wrapper {
    margin: 0 auto;
    /* width: 612px; */
    /* background-color: #000;  */
    /* border: 2px solid var(--color-beige); */
    /* border-top: 30px solid var(--color-red);
    border-left: 2px solid var(--color-beige);
    border-right: 2px solid var(--color-beige); */
    border-top: none;
    border-left: none;
    border-right: none;

    max-width: 1100px;
    
}

.nav-wrapper {
    position: relative;
    left: 0;
}

#mobile-menu {
    margin-top: 80px;
    
}

#mobile-menu a {
    color: var(--color-brown)
}

#mobile-menu a:hover {
    color: var(--color-red)
}

#mobile-menu a:active {
    color: var(--color-red)
}

.mobile-menu-drop-down {
    /* background: var(--color-dark-red) !important; */
}

/* .mobile-menu-drop-down.mob-drop-down {
    background: var(--color-dark-red) !important;
}

.mobile-menu-drop-down.mob-drop-down a {
    color: var(--color-beige) !important;
} */

.mobile-menu-drop-down a {
    /* background: var(--color-beige); */
}

/* working menu changes */
#mobile_dropdown {
    background: var(--color-dark-red);
    position: relative;
    left: -26%;
    min-width: 500px !important;
    /* width: 90% !important; */
}



#mobile_dropdown.mob-drop-down a {
    color: var(--color-beige);
}

/* Backgrounds */
.bg-primary {
    /* background-color: #f8f0e3; */
    background-color: var(--color-beige);
}

.bg-secondary {
    background-color: var(--color-red);
}

/* Buttons */

.btn-primary {
    background: var(--color-red);
    border: 2px solid var(--color-red);
    padding: 8px;
}

.btn-primary:hover {
    background: var(--color-red);
    border: 2px solid var(--color-red);
}

.btn-primary:visited{
    background: var(--color-red);
    border: 2px solid var(--color-red);
}

.btn-secondary {
    background: var(--color-beige);
    border: 2px solid var(--color-red);
    padding: 8px;
}

.btn-secondary:hover {
    background: var(--color-beige);
    border: 2px solid var(--color-red);
}

.btn-secondary:visited{
    background: var(--color-beige);
    border: 2px solid var(--color-red);
}

/* Button Text Colors */

.btn-primary-txt {
    color: var(--color-beige);
}

.btn-secondary-txt {
    color: var(--color-red);
}

.bg-img-pattern {
    background: url(../img/img-pattern.png);
    /* background-size: auto 10px 10px; */
    background-size: auto 100%;
    /* background-clip: content-box; */
    height: 80px;
    width: 100%;
    background-repeat: repeat;
    border-color: var(--color-red);
}

.logo-sm-taqueriaslosgallos {
    display: block;
}

.footer-socials-follow {
    width: 250px;
    height: 45px;
    /* border: 1px solid white; */
}

.social-circle {
    background: var(--color-beige);
    border-radius: 100px;
    width: 33px;
    height: 33px;
}

.socials {
    position: relative;
    top: -2px;
    /* margin-top: -5px; */
}

.socials.fb {
    padding-right: 3px;
}

.socials .ig {
    position: relative;
    left: 7px;
    /* padding-left: 4px; */
}



/* Food menu */
#menu {
    /* margin-top: 250px; */
}

#menu.open {
    margin-top: 280px !important;

}

.hero-logo {
    height: auto;
    width: 70%;
}

.hero-container {
    background: url(../img/hero-bg-img-01.png) no-repeat 0 0;
    background-clip: content-box;
    /* background-clip: cover; */
    /* background-size: 100%; */
    background-size: auto 100%;
    /* width: 612px;
    height: 277px;  */
    height: 517px;
    /* border: 4px solid green; */
}

.hero-ig {
    position: relative;
    left: 10px;
}

.bg-our-story {
    background: url(../img/bg-img-our-story.png) no-repeat 0 0;
    background-clip: content-box;
    background-size: auto 100%;
    height: 417px;

}

/* Card Flag */
.bg-card-flag-design {
    background: url(../img/img-design-border.gif) no-repeat 0 0;
    background-clip: content-box;
    background-size: auto 15%;
    background-repeat: repeat-x;
    background-position: 40px;
    height: 417px;
}

.card-flag {
    background: url(../img/bg-flag.png) no-repeat 0 0;
    background-clip: content-box;
    background-size: auto 100%;
    height: 417px;
}

#catering {
    display:block;

}

.locations-wrapper {
    height: 1450px;
}

.footer-wrapper {
    height: 200px;
}


  @media screen and (min-width: 1024px) {

    .wrapper {
        /* border-top: none; */
        /* border-top: 30px solid var(--color-red); */
        /* border-left: none;
        border-right: none; */


        border-top: 30px solid var(--color-red);
        border-left: 2px solid var(--color-beige);
        border-right: 2px solid var(--color-beige);
    }

    .logo-sm-taqueriaslosgallos {
        display: none;
    }

    .nav-wrapper {
        position: relative;
        left: 190px;
    }

    #mobile-menu {
        margin-top: 0; 
    }

    /* .mobile-menu-drop-down {
        background: var(--color-dark-red);
    } */

    #mobile_dropdown {
        left: 0;
        background: var(--color-beige) !important;

    }

    .logo-desktop {
        position: relative;
        top: -40px;
    }

    #menu {
        margin-top: 0;
    }

    .locations-wrapper {
        height: 630px;
    }

    .section-home-container {
      height: 1580px;
    }

    .section-about-container {
      height: 1590px;
    }

    .news-col-container {
      min-height: 1590px;
    }

    .footer-wrapper {
        height: 90px;
    }
  
}