/*!
Theme Name: TMZ Collection
Theme URI: http://underscores.me/
Author: Tariq Mahmood
Author URI: http://underscores.me/
Description: https://tmzcollection.pk
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tmz-collection
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

TMZ Collection is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

body {
 font-family: "Roboto", sans-serif !important;
}

.navbar{
    background: #840300;
    color: #ffffff;
}
.navbar a{
    font-family: "Open Sans", sans-serif !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    text-transform: uppercase;
   
}
.navbar a:hover{
    color: #fff4e4 !important;
}

.site-footer{
    min-height: 200px;
    padding: 50px 0;
    width: 100%;
    background: #c1832e;
    color: #ffffff;
}
.site-footer a{
    color: #ffffff;
    text-decoration: none;
}
.main-content{
    min-height: 600px;
}
.site-footer ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.banner{
    width: 100%;
    background-image: url('images/banner-silk.jpg') ;
    background-size: cover;
    min-height: 300px;
    position: relative;
    overflow: hidden;
}
.banner::after{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    content: "";
}
.banner h1{
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    font-size: 4.167vw;
    z-index: 2;
    
}

li.product-category a{
    position: relative;
    text-decoration: none;
    display: block;
}
li.product-category a img{
    width: 100%;
    height: auto;
}
li.product-category a h2{
    color: #ffffff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 100%;
    background: rgba(193, 131, 46, .7);
    padding: 20px 0;
    transition: background-color 0.5s ease-in-out;
}
li.product-category a h2:hover{
    background: rgba(132, 3, 0, .7);
}

.flip-box {
  background-color: transparent;
  width: 100%;
  height: 200px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.flip-box a:link,.flip-box a:hover,.flip-box a:visited{
    color: #ffffff;
    text-decoration: none;
}
/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side */
.flip-box-front {
  background-color: rgba(132, 3, 0, 1);
  color: #ffffff;
  border-radius: 40px 80px;
}

/* Style the back side */
.flip-box-back {
  background-color: rgba(193, 131, 46,1);
  color: #ffffff;
  transform: rotateY(180deg);
  border-radius: 80px 40px;
}
.flip-box-front h2,.flip-box-back h2{
    text-align: center;
    padding: 75px 0;
}
.maroon-text{
    color: #840300;
}
.pattern-front {
  --s: 8px; /* control the size*/
  --c1: #dedede;
  --c2: #ffffff;
  
  --g:#0000 calc(125%/3),var(--c1) 0 calc(175%/3),#0000 0;
  --p:calc(var(--s)/2) calc(var(--s)/2)/calc(2*var(--s)) calc(2*var(--s));
  background:
    radial-gradient(var(--c1) 34%,#0000 36%) 0 0/var(--s) var(--s),
    linear-gradient( 45deg,var(--g)) var(--p),
    linear-gradient(-45deg,var(--g)) var(--p) var(--c2);
}
.pattern-front a{
    color: #840300!important;
}

/* Custom CSS for the toggler animation */
.navbar-toggler {
  border: none; /* Optional: removes default border */
  background: transparent !important; /* Optional: removes default background */
}

.navbar-toggler:focus {
    box-shadow: none; /* Optional: removes default focus outline */
}

.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #ffffff; /* Set the color of your bars */
  border-radius: 1px;
  margin: 4px 0;
  transition: all 0.2s; /* Smooth transition for the animation */
}

/* Animate the top bar to rotate 45 degrees and move into place */
.navbar-toggler:not(.collapsed) .icon-bar:nth-of-type(1) {
  transform: rotate(48deg) translate(4px, 5px);
}

/* Fade out the middle bar */
.navbar-toggler:not(.collapsed) .icon-bar:nth-of-type(2) {
  opacity: 0;
}

/* Animate the bottom bar to rotate -45 degrees and move into place */
.navbar-toggler:not(.collapsed) .icon-bar:nth-of-type(3) {
  transform: rotate(-48deg) translate(4px, -5px);
}
.site-main a{
    text-decoration: none;
}
.site-main h1, 
.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main h6,
.site-main a{
    color: #840300;
}