@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==============================================
    General
============================================== */
:root {
  --color-p-1: #EC1F26;

  --color-s-1: #00306e;

  --color-b-1: #000000;
  --color-b-2: #222222;
  --color-b-3: #333333;

  --color-g-1: #212121;
  --color-g-2: #6C6C6C;
  --color-g-3: #090909;

  --color-w-1: #ffffff;
}

html {
  font-size: 15px;
}

body {
  font-size: 15px;
  padding: 0;
  margin: 0;
  line-height: 1.1;
  color: var(--color-b-1);
  font-family: "Inter", serif;
  font-weight: normal;
}

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

::selection {
  background-color: var(--color-g-2);
  color: var(--color-b-2);
}

/* pppppppppp  */
p {
  line-height: 1.6;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-b-3);
}

p:last-child {
  margin-bottom: 0;
}

/* aaaaaaaaa */
a {
  outline: none !important;
  text-decoration: none;
  transition: 0.3s all ease-in-out;
  -webkit-transition: 0.3s all ease-in-out;
  -moz-transition: 0.3s all ease-in-out;
  -ms-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
}

a:hover,
a:focus,
select:focus,
button:focus {
  outline: none;
  text-decoration: none;
  color: var(--color-p-2);
}

a:hover {
  color: var(--color-s-2);
}

img {
  border: none;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  margin: 0;
}

li {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  line-height: 1.3;
  margin-bottom: 15px;
  outline: none !important;
  color: var(--color-b-3);
  font-weight: 600;
  font-size: 36px;
}

h1,
h2 {
  @apply text-xl lg:text-[28px] md:text-[22px];
}

h3 {
  @apply text-lg;
}

h4 {
  @apply text-md;
}

h5 {
  @apply text-sm;
}

h6 {
  @apply text-xs;
}

.dark-sec * {
  @apply text-w-1;
}

.my-sec {
  @apply py-[60px] lg:py-[50px] md:py-[40px];
}

/* basic css end  */

/* css start */

.btn-p {
  @apply text-xs bg-p-1 hover:bg-s-1 py-[15px] px-[28px] rounded-[30px] !text-w-1 inline-block text-center
}

.header-nav {
  @apply absolute z-[9999] w-full top-20;
}

/* .navbar-toggle {
  @apply md:mt-[35px]
} */

.navbar-brand>img {
  max-width: 130px;
}

.navbar-header {
  @apply md:pb-2
}

.navbar-brand {
  @apply p-0 mr-[130px] xl:mr-[50px] md:h-[unset];
}

.navbar-nav>li>a {
  @apply text-sm text-b-2
}

.navbar-default .navbar-nav>li>a {
  @apply text-b-2
}

.navbar-default .navbar-nav>li>a.btn-p {
  @apply hover:bg-s-1
}

.navbar {
  @apply my-[20px];
}

.navbar-nav {
  /* @apply mt-6 */
}

.navbar-nav:first-child {
  @apply bg-w-1 p-2 rounded-[30px];
}

.navbar-nav:last-child {
  @apply mt-2
}

.navbar-default {
  background-color: transparent;
  border-color: transparent;
  @apply md:text-center;
}

.dropdown-menu>li>a {
  @apply md:text-center;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: var(--color-w-1);
  background-color: var(--color-p-1) !important;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: var(--color-p-1);
}

.nav>li>a {
  @apply lg:px-[8px] rounded-[30px] py-[10px] px-[16px] text-b-1 font-medium
}

.navbar-right li {
  @apply flex items-center justify-center gap-3
}

.navbar-right li a {
  color: var(--color-w-1) !important;
  padding: 8px 12px !important;
  font-size: 16px;
}

.pogoSlider {
  padding-bottom: 42% !important;
}

.pogoSlider-dir-btn--next {
  right: 0;
}

.pogoSlider-dir-btn--prev {
  left: 0;
}

/*  */

/* owl nav buttons customisation start */

.owl-carousel {
  position: relative;
}

.owl-nav button span {
  display: none;
}

/* .owl-nav {
  position: absolute;
} */

.owl-nav button {
  background: var(--color-g-1) !important;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(50% - 22px);
  left: -70px;
}

.owl-nav button:hover {
  background: var(--color-b-2) !important;
}

.owl-nav button.owl-next {
  left: unset;
  right: -70px;
}

.owl-nav button::after {
  content: "";
  width: 60px;
  height: 60px;
  background: url(../images/arrow-right.png) no-repeat center center;
  display: inline-block;
  border-radius: 50%;
}

.owl-nav button.owl-prev::after {
  transform: rotate(180deg);
}

/* owl nav buttons customisation end */

.oval {
  background: linear-gradient(180deg, #EC1F26 20.28%, #2B0202 100%);
  @apply size-[70px] rounded-full flex justify-center items-center mb-2;
}

.oval-gray {
  @apply size-[70px] rounded-full flex justify-center items-center bg-g-1 mb-2 -mt-[85px];
}

.pd-box {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease-in-out;
  padding-top: 47px;
  border-radius: 10px;
}

/* .image-box img {
  @apply ;
} */

.inner-img {
  @apply w-6 h-6 bg-w-1 rounded-full flex justify-center items-center;
}

.setting-box {
  @apply flex justify-center items-center bg-p-1 rounded-[5px] w-10 h-10;
}

.card-shadow {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease-in-out;
}

.service-box img {
  @apply w-full mx-auto;
}

.service-box-text {
  @apply lg:text-center;
}

footer {
  background: linear-gradient(180deg, #1C1C1C 0%, #000000 100%);
}

.footer-bottom p {
  color: #333333;
}

.footer-bottom a {
  color: #333333;
}

.form-control {
  background-color: #1C1C1C;
  border: #333333 !important;
  color: #333333 !important;
}

.footer-list li a {
  color: #D9D9D9 !important;
  font-size: 14px;
  font-weight: 400;

}

footer form p {
  font-size: 12px !important;
  font-weight: 400;
  color: #D9D9D9;
  margin-bottom: 4px;
}

input::placeholder {
  font-size: 10px;
  color: #1C1C1C;
}

.form-email-upper input {
  background-color: #ffffff;
}

.form-email::placeholder {
  font-size: 12px;
  color: #333333;
}

textarea::placeholder {
  font-size: 10px;
  color: #1C1C1C;
}

.footer-list li {
  @apply flex gap-3;
}

.follow-sec a {
  @apply bg-[transparent] rounded-full w-8 h-8 flex items-center justify-center border border-[#1C1C1C];
}

.nav-sec {
    border-radius: 30px;
    background-color: var(--color-w-1);
    padding: 0.5rem;
}

.nav-sec ul li a {
    border-radius: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    font-weight: 500;
    color: var(--color-b-1);
    @apply inline-block hover:bg-p-1 hover:text-w-1
}

.header-social {
  @apply text-w-1;
}

.inner-img-box {
  align-items:end;
  background: linear-gradient(to top, black, transparent);
}

.image-box {
  background: #000;
}

.image-box img {
  opacity: 0.8;
}

.inner-img-box img {
  opacity: 1;
}

.cart-div {
  position: fixed;
  bottom: 80px;
  right: 10px;
  z-index: 99999;
}

.cart-icon {
  background: #ec1f26;
  color: #fff;
  font-size: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
  display:flex;
  align-items:center;
  justify-content:center;
}


.cart-no {
  background: #fff;
  border: 1px solid #ec1f26;
  color: #ec1f26;
  font-size: 10px;
  font-weight:bold;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: block;
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  right: 0;
}

.cart-no span {
  display: none;
}

.yith-ywraq-add-to-quote a {
  height: 40px;
}

.add-request-quote-button:not(.duplicate-enquiry-button) i {
  font-size: 18px;
  margin-right: 10px;
}

.yith-ywraq-add-to-quote {
  max-width: 260px;
}

.woocommerce 
.duplicate-enquiry-button.add-request-quote-button.button
{
  flex: 1;
  background-color: #b91c1c !important;
}

.my-enquiry-btn {
  background: #EC1F26;
  color: #fff;
  padding: 8px 30px;
}

.my-enquiry-btn {
  background: #EC1F26 !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 20px !important;
  color: #fff !important;
}

.prod-enquiry.page-enquiry {
  margin-left: 0px;
  margin-top: 30px;
  max-width: 100%;
}

.prod-enquiry h2 {
  font-size: 20px;
  text-align:left;
}

.page-enquiry input[type="text"],
.page-enquiry input[type="email"],
.page-enquiry input[type="tel"],
.page-enquiry input[type="date"],
.page-enquiry input[type="time"],
.page-enquiry select,
.page-enquiry textarea {
    padding: 8px !important;
    border-radius: 5px;
}

.page-enquiry p {
  font-weight: bold;
}

.page-enquiry textarea {
  height: 70px !important;
}

.woocommerce-Tabs-panel table td,
.woocommerce-Tabs-panel table th
{
  padding: 5px;
}

.woocommerce-Tabs-panel table th:first-child
{
  background: rgb(115 111 108);
  color: #fff;
}

.woocommerce-Tabs-panel table
{
  width: 100%;
  max-width: 780px;
  table-layout: fixed;
}

.woocommerce-Tabs-panel td
{
  width: 50%;
}

.woocommerce-Tabs-panel table th,
.woocommerce-Tabs-panel table td
{
  padding: 6px 40px;
}

.woocommerce-Tabs-panel table th
{
  color: #fff;
  padding: 12px 40px;
}

.woocommerce-Tabs-panel table th:first-child
{
  background: rgb(115 111 108);
}

.woocommerce-Tabs-panel table th:last-child
{
  background: rgb(169 169 169);
}

.woocommerce-Tabs-panel table tr:nth-child(odd)
{
  background: rgb(223 224 219);
}

.header-left {
  gap: 50px;
}

.product-template-default.single.single-product .inner-pages h1,
.woocommerce-page h2.woocommerce-loop-product__title {;
  display:none;
}

footer h3 {
  font-size: 20px;
}

.whatsapp-img a
{
  width: 171px;
  height: 79px;
  display: inline-block;
  background: url(../../whatsapp-chat-img.png) top center no-repeat;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 9999;
}

.whatsapp-img-mobile a
{
  background: url(../../whatsapp-chat-img2.png) 100% 100% no-repeat;
  z-index: 99999;
  width: 57px;
  height: 56px;
}


.whatsapp-img-mobile {
    display: none;
}

@media(max-width: 767px) {
    .whatsapp-img-mobile {
        display: block;
    }
    .whatsapp-img-desktop {
        display: none;
    }
}