/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/
.heading-text.heading-section h2:before { content: ""; position: absolute; height: 2px; width: 200px; background-color: #ccc; bottom: -30px; left: 0; right: 0; }
.flickity-button:hover {
    background-color: #ccc;
}

#mainMenu nav > ul > li > a{font-size:14px;}
#mainMenu nav > ul > li > a:hover{color: #a92318 !important;}
#mainMenu nav > ul > li > a:active{color: #a92318 !important;}

.card-img-thumb {
	padding-top:10px;
	display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

 .specifications {
        font-family: Arial, sans-serif;
        margin: 20px;
    }

    .specifications h2 {
        text-align: left;
        color: #cc0000;
    }

    .specifications table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    .specifications th,
    .specifications td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .specifications th {
        background-color: #cc0000;
        color: white;
        font-weight: bold;
    }

    .specifications tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .specifications tr:hover {
        background-color: #f1f1f1;
    }