@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Shafarik&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

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


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

/* - - - - - - utility classes - - - - - */
/* - - - - - - utility classes - - - - - */

:root {
   font-size: 16px; /* Set your base font size here if needed */
 }

 .body-text {
   font-size: 1rem; /* 16px - Your base/body text size */
   line-height: 1.5; /* Good for readability */
 }

 .heading-text {
   font-size: 2rem; /* 32px - Larger for main headings */
   font-weight: bold; /* Or semi-bold, as needed */
 }

 .subheading-text {
   font-size: 1.5rem; /* 24px - Smaller than heading, larger than body */
   font-weight: semi-bold; /* Or normal, as needed */
 }

 .small-text {
   font-size: 0.8rem; /* 12.8px - For captions, fine print, etc. */
 }

 .info-text {
   font-size: 0.9rem; /* 14.4px - Slightly larger than small-text, for secondary info */
 }

.mega-font {
   font-size: 32px;

}

.wide-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;

}
.roboto {
   font-family: 'Roboto';
}

.montserrat {
   font-family: 'Montserrat';
}

.dm-sans {
   font-family: 'Dm Sans';
}

.shafarik {
   font-family: 'Shafarik', Arial, Helvetica, sans-serif;
}

.grotesk {
   font-family: 'Space Grotesk', Arial, Helvetica, sans-serif;
}

.space-mono {
   font-family: 'Space Mono', Arial, Helvetica, sans-serif;
}

.text-orange {
   color: #cc5500;
}

/* Custom Padding */
/* General Padding */
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.p-10 { padding: 40px; }
.p-12 { padding: 48px; }

/* Padding Y-Axis (Top & Bottom) */
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.py-10 { padding-top: 32px; padding-bottom: 40px; }

/* Padding X-Axis (Left & Right) */
.px-1 { padding-left: 4px; padding-right: 4px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-6 { padding-left: 24px; padding-right: 24px; }

/* Padding Specific Sides */
.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }
.pt-5 { padding-top: 20px; }
.pt-6 { padding-top: 24px; }

.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }
.pb-5 { padding-bottom: 20px; }
.pb-6 { padding-bottom: 24px; }

.pl-1 { padding-left: 4px; }
.pl-2 { padding-left: 8px; }
.pl-3 { padding-left: 12px; }
.pl-4 { padding-left: 16px; }
.pl-5 { padding-left: 20px; }
.pl-6 { padding-left: 26px; }

.pr-1 { padding-right: 4px; }
.pr-2 { padding-right: 8px; }
.pr-3 { padding-right: 12px; }
.pr-4 { padding-right: 16px; }
.pr-5 { padding-right: 20px; }
.pr-6 { padding-right: 24px; }


/* Custom Margin */
/* General Margin */
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-5 { margin: 20px; }
.m-6 { margin: 24px; }
.m-8 { margin: 32px; }
.m-10 { margin: 40px; }
.m-12 { margin: 48px; }

/* Margin Y-Axis (Top & Bottom) */
.my-1 { margin-top: 4px; margin-bottom: 4px; }
.my-2 { margin-top: 8px; margin-bottom: 8px; }
.my-3 { margin-top: 12px; margin-bottom: 12px; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }
.my-5 { margin-top: 20px; margin-bottom: 20px; }
.my-6 { margin-top: 24px; margin-bottom: 24px; }
.my-8 { margin-top: 32px; margin-bottom: 32px; }

/* Margin X-Axis (Left & Right) */
.mx-1 { margin-left: 4px; margin-right: 4px; }
.mx-2 { margin-left: 8px; margin-right: 8px; }
.mx-3 { margin-left: 12px; margin-right: 12px; }
.mx-4 { margin-left: 16px; margin-right: 16px; }
.mx-5 { margin-left: 20px; margin-right: 20px; }
.mx-6 { margin-left: 24px; margin-right: 24px; }

/* Margin Specific Sides */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-10 { margin-top: 40px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }

.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-3 { margin-left: 12px; }
.ml-4 { margin-left: 16px; }
.ml-5 { margin-left: 20px; }
.ml-6 { margin-left: 24px; }

.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 12px; }
.mr-4 { margin-right: 16px; }
.mr-6 { margin-right: 224px; }


.big-text {
   font-size:  60px;
}

/* - - - - - - utility classes - - - - - */
/* - - - - - - utility classes - - - - - */
/* - - - - - - utility classes - - - - - */
/* - - - - - - utility classes - - - - - */
/* - - - - - - utility classes - - - - - */

.main-navbar {
   padding:10px 20px;
}

/* Default border */
.main-nav-list li {
   position: relative; /* Needed for pseudo-element positioning */
   padding-bottom: 5px;
}

/* Creating the animated border */
.main-nav-list li::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 50%;
   width: 0%;
   height: 2px;
   background-color: #BF5700;
   transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

/* On hover: expand the border */
.main-nav-list li:hover::after {
   width: 100%;
   left: 0;
}


.logo-text {
   font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 30px;
}

/* Main Banner */
.main-banner {
   position: relative;
   height: 500px;
   display: flex;
   align-items: center;
   padding-left: 50px;
   background: linear-gradient(
       to bottom,
       rgba(10, 3, 0, 0.9),
       rgba(56, 18, 1, 0.9),
       rgba(80, 26, 1, 0.9),
       rgba(105, 34, 1, 0.9),
       rgba(191, 87, 0, 0.9)
   );
   overflow: hidden; /* Ensures background doesn't overflow */
}

/* Background Image */
.main-banner::before {
   content: "";
   position: absolute;
   top: 0;
   left: 5%; /* Center it within the 90% width */
   width: 90%;
   height: 100%;
   background: url("../images/bg-art-one.jpeg") no-repeat center;
   background-size: cover;
   z-index: 0;
}

/* Overlay Gradient */
.main-banner::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(
       to bottom,
       rgba(10, 3, 0, 0.85),
       rgba(56, 18, 1, 0.85),
       rgba(80, 26, 1, 0.85),
       rgba(105, 34, 1, 0.85),
       rgba(191, 87, 0, 0.85)
   );
   z-index: 1;
}

/* Content Styling */
.content {
   position: relative;
   z-index: 2; /* Ensure text is above the background */
   color: white;
   max-width: 500px;
}

.main-banner-v2 {
   position: relative;
   background-image: url('../images/bg-plain.png');
   height: 600px;
   background-repeat: no-repeat;
   width: 100%;
   background-size: cover;
   z-index: 1;
}

.main-banner-v2::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5); /* Adjust opacity for darkness */
   z-index: -1;
}

.main-banner-v3 {
   position: relative;
   background-image: url('../images/bg-3-image.jpg');
   height: 600px;
   background-repeat: no-repeat;
   width: 100%;
   background-size: cover;
   z-index: 1;
}

.main-banner-v3::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7); /* Adjust opacity for darkness */
   z-index: -1;
}

/* services-card */
.services-card {
    position: relative;
    background-image: url('../images/dotted-bg.jpg');
    height: 400px;
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    z-index: 1;
}

/* CTA Button */
.cta-btn {
   background: white;
   color: #BF5700; /* Burnt Orange */
   border: none;
   padding: 10px 20px;
   font-size: 16px;
   cursor: pointer;
   font-weight: bold;
   border-radius: 5px;
   transition: 0.3s;
}


.cta-btn:hover {
   background: #ff6a00;
   color: white;
}

.main-banner-cta-btn {
   margin-top: 20px;
}


.arts-slider-container {
   padding:30px 20px;
}

.promo-card-section {
   padding:30px;
}
/*  */



.fine-art-card {
   position: relative;
   background-image: url('/images/fine-art-card.jpeg'); /* Ensure correct path */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   overflow: hidden;
   color: white; /* Ensure text is visible */
   padding: 20px; /* Adjust padding as needed */
}

/* Adding dark overlay */
.fine-art-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5); /* Adjust opacity for desired darkness */
   z-index: 1; /* Keep overlay below content */
}

/* Ensure text appears above the overlay */
.fine-art-card * {
   position: relative;
   z-index: 2;
}



.digital-arts {
   position: relative;
   background-image: url('../images/Digital\ &\ Modern\ Art.jpeg'); /* Ensure correct path */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   overflow: hidden;
   color: white; /* Ensure text is visible */
   padding: 20px; /* Adjust padding as needed */
}

/* Adding dark overlay */
.digital-arts::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5); /* Adjust opacity for desired darkness */
   z-index: 1; /* Keep overlay below content */
}

/* Ensure text appears above the overlay */
.digital-arts * {
   position: relative;
   z-index: 2;
}


/*  */
/*  */
/*  */
.drop-down-nav {
   position: fixed;
   width: 100%;
   top: 52px;
   z-index: 20;
   background: rgba(0, 0, 0, 0.8);
   opacity: 0;
   transform: translateY(-20px);
   display: none;
   transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* When the dropdown menu is active */
.drop-down-nav.show {
   opacity: 1;
   transform: translateY(0);
   display: block;
}


/* .drop-down-nav::before {
   width:100%;
   height: 100%;
   background: rgba(10, 3, 0, 0.4);
   opacity: 0.4;
} */

/*  */
/*  */
/*  */

.big-card-over-container {
   width: 100%;
   height: 100%;
   padding: 10px 0;
}

.big-card-over-body {
   width: 80%;
   margin: auto;
}

.big-card-over-image {
   width: 60%;
   z-index: 10;
   background-color: #fff;
   overflow:hidden ;
}

.big-card-over-image img {
   width: 100%;
}

.big-card-over-text {
   width: 50%;
   z-index: 2;
}



@media(max-width:1000px){
   .big-text {
      font-size: 48px;
   }

}

@media(max-width:760px){
    .services-card {
        height: 680px;
    }

}

@media(max-width:700px){
   .big-text {
      font-size: 25px;
   }
   .mega-font {
      font-size: 28px;
   }
   .main-banner {
      padding: 10px;
   }

   .big-card-over-body {
      width: 95%;
   }

   .cta-btn {
      background: white;
      color: #BF5700; /* Burnt Orange */
      border: none;
      padding: 5px 10px;
      font-size: 14px;
      cursor: pointer;
      font-weight: bold;
      border-radius: 3px;
      transition: 0.3s;
   }

   .main-navbar {
      padding:5px 10px;
   }

   .cta-btn {
      font-size: 13px;
   }

}


@media(max-width:600px){
   .mega-font {
      font-size: 24px;

   }

   /* services-card */
    .services-card {
        height: 700px;
    }

    .main-banner-v3 {
        height: 400px;
     }


}