@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700);

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

/* font-family: "Poppins", sans-serif; */

/* ==============================================
    General
============================================== */
:root {
  --color-p-1: #ff770e;
  --my-color: #ff770e;
  --color-p-2: #f8f6f3;

  --color-b-1: #000000;
  --color-b-2: #222222;
  --color-b-3: #666666;
  --color-b-4: #8b8e8f;

  --color-g-1: #f7f7f7;

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

html,
body {
  @apply md:overflow-x-hidden;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  font-size: 14px;
  padding: 0;
  margin: 0;
  line-height: 1.8;
  color: var(--color-b-2);
  font-family: "Inter", sans-serif;
  font-weight: normal;
}

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

::selection {
  background-color: #ad6f3f;
  color: var(--color-w-1);
}

/* pppppppppp  */
p {
  line-height: 1.8;
  font-size: 14px;
  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-1);
}

a:hover {
  color: var(--color-p-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;
  margin-bottom: 10px;
  outline: none !important;
  color: var(--color-b-2);
  font-weight: 400;
  font-size: 36px;
}

h1,
h2 {
  @apply text-4xl xl:text-3xl md:text-2xl font-extrabold font-playfairDis;
}

h3 {
  @apply text-2xl sm:text-[26px] font-bold font-playfairDis text-b-2 leading-[1.2];
}

h4 {
  @apply text-lg md:text-md font-bold font-playfairDis;
}

h5 {
  @apply text-md;
}

h6 {
  @apply text-sm ;
}

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

.my-sec {
  @apply py-[90px] xl:py-[75px] md:py-[60px] sm:py-[50px] ;
}
span{
  @apply text-p-1;
}

/* basic css end  */

/* css start */

.btn-p {
  @apply bg-p-1 text-white text-[16px] py-[14px] px-[26px]   rounded-full inline-block text-center font-medium transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] md:py-[10px] md:px-[15px] md:text-[14px];
}

.btn-p:hover {
  @apply bg-b-2 text-w-1 scale-[1.03] shadow-md;
}

.banner-btn {
  @apply bg-[#2f1906]  text-white text-[16px] sm:text-[12px] sm:py-[6px] py-[7px] px-[24px] border border-[#3a312a] rounded-full inline-block;
}

.sub-title{
  @apply uppercase tracking-[2px] text-p-1 text-sm font-semibold mb-3 md:text-center md:mx-auto
}

/* ===============================
   Slider
================================ */

.pogoSlider {
  @apply h-full lg:min-h-[500px] pb-0;
}

.pogoSlider .container {
  @apply h-full;
}

.pogoSlider-slide {
  @apply bg-center bg-cover h-full;
}

.slide-content {
  @apply flex flex-col items-start justify-center w-full h-full relative;
}

.slide-content .row {
  @apply flex items-center;
}

.pogoSlider-dir-btn {
  @apply border border-black/70;
}

.pogoSlider-dir-btn:hover {
  @apply border-black;
}

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

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

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

  .owl-nav {
    display: flex !important;
    justify-content: space-between;
    position: absolute;
    top: 40%;
    left: -40px;
    right: -40px;
  }

  .owl-nav button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 9999px !important;
    background: #fff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  }

  .owl-nav button:hover {
    background: white !important;
  }


/* --- NAV LINK EFFECT --- */

.nav-link {
  @apply relative transition duration-300;
}

.nav-link::before {
  content: "";
  @apply absolute left-0 -top-[31px] w-0 h-[2px] bg-p-1 transition-all duration-300;
}

.nav-link:hover::before {
  @apply w-full;
}

.nav-link.active::before {
  @apply w-full;
}

.nav-link.active {
  @apply text-w-1;
}

.sidebar-menu{
  @apply flex items-center justify-between px-4 py-4 
        border-b border-p-2
        hover:bg-p-1 hover:rounded-lg hover:text-white transition-all duration-300
}

/* ===============================
   product Section
================================ */


/* Product Slider */
.product-slider {
  @apply relative ;
}

/* Owl stage padding */
.product-slider .owl-stage-outer {
  @apply pb-6;
}

/* Product Card */
.product-card {
  @apply cursor-pointer bg-white rounded-[15px] overflow-hidden transition-all duration-300;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05),
              0 10px 25px rgba(0,0,0,0.08);
}

.product-card:hover {
  @apply -translate-y-1;
  
}

.product-card img {
  @apply w-full md:h-[260px] object-cover block rounded-[15px];
}

.product-content {
  @apply p-5;
}

.product-content h4 {
  @apply mb-2.5;
}

.product-content p {
  @apply mb-4;
}

.product-content a {
  @apply text-p-1 uppercase text-[14px] font-bold tracking-[2px];
}

/* Owl Nav Buttons */
.product-slider .owl-nav button {
  @apply absolute top-1/2 -translate-y-1/2 w-[40px] h-[40px] rounded-full bg-white flex items-center justify-center z-10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
   border: 1px solid #ddd7d2 !important;
}

.product-slider .owl-prev {
  @apply -left-[16px] lg:left-[25px];
}

.product-slider .owl-next {
  @apply -right-[16px] lg:right-[25px];
}

.product-slider .owl-nav i {
  @apply text-[30px] text-[#444];
}

/* Standard Section  */
.standards-sec {
  @apply bg-g-1 py-[100px];
}

.standards-grid {
  @apply grid grid-cols-4 lg:grid-cols-2 md:grid-cols-1 bg-w-1 border border-[#ddd7d2] rounded-[18px] overflow-hidden;
}

.standard-card {
  @apply p-8 cursor-pointer transition-all duration-300 ease-in-out md:border-r-0 md:border-b md:border-[#ddd7d2] md:text-center;
}

.standard-card:not(:last-child) {
  @apply border-r border-[#ddd7d2];
}

.standard-card span {
  @apply block text-p-1 text-[14px] font-medium mb-[18px] transition-all duration-300;
}

.standard-card h4 {
  @apply text-xl text-b-2 mb-[15px] transition-all duration-300;
}

.standard-card:hover {
  @apply bg-p-1;
}

.standard-card:hover span,
.standard-card:hover h4,
.standard-card:hover p {
  @apply text-white;
}
                 

/* Enquiry Section */
.custom-input {
    @apply w-full h-[50px] md:h-[40px] px-6 rounded-full border border-[#ddd7d2]
    bg-p-2 text-[#9a9a9a] outline-none transition-all;
}

.custom-input:focus {
    @apply border-p-1;
}

textarea.custom-input {
    @apply h-[120px] rounded-[24px] pt-5;
}

.submit-btn {
    @apply w-full h-[58px] rounded-full bg-p-1
    text-white font-medium transition-all;
}

.submit-btn:hover {
   @apply bg-p-1;
}

/* Footer Section */
.footer-sec {
  @apply bg-b-1 text-white ;
}

.footer-top {
  @apply grid grid-cols-12 xl:grid-cols-2 sm:grid-cols-1 gap-[35px] md:gap-[40px] xl:gap-[60px] ;
}

.footer-about{
  @apply col-span-6 xl:col-span-1;
}

.footer-col{
  @apply col-span-2 xl:col-span-1;
}

.footer-logo {
  @apply  mb-[30px];
}

.footer-col h6 {
  @apply   font-bold mb-[28px] text-w-1;
}

.footer-col ul {
  @apply list-none p-0 m-0;
}

.footer-col ul li {
  @apply mb-4;
}

.footer-col ul li a {
  @apply text-b-4 no-underline transition-all duration-300 hover:text-p-1;
}

.contact-list li {
  @apply flex items-start gap-3 text-b-4 leading-[1.8];
}

.contact-list i {
  @apply text-p-1 mt-[5px] text-[16px];
}

.footer-bottom {
  @apply container flex md:flex-col justify-between items-center gap-[15px] md:gap-[8px] text-center md:text-left;
}

.footer-bottom p {
  @apply text-b-4 m-0;
}

.footer-links {
  @apply flex gap-[30px] justify-center;
}

.footer-links a {
  @apply text-b-4 no-underline transition-all duration-300 hover:text-p-1;
}