/*=========================================== 
              Header Section
 ============================================== */





 /* ========================================================
                  Header section end 
 ==========================================================*/


 /* Slider section */

 .image-slide {
   background-size: cover;
   background-position: center;
   height: 100vh;
   position: relative;
 }

 /* Dark overlay */
 .overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
   z-index: 1;
 }

 /* Caption animations */
 .carousel-caption {
   z-index: 4;
   position: relative;
 }

 .carousel-caption h1,
 .carousel-caption h2,
 .carousel-caption p,
 .carousel-caption a,
 .text-animated h1,
 .text-animated h2,
 .text-animated p,
 .text-animated a {
   opacity: 0;
   animation: fadeInUp 1s ease-out forwards;
 }

 /* .carousel-caption h1,
 .carousel-caption p {
   bottom: -9.75rem !important;
   left: 2% !important;
 } */

 .carousel-caption h1,
 .text-animated h1,
 .carousel-caption h2,
 .text-animated h2 {
   animation-delay: 0.2s;

 }

 .carousel-caption p,
 .text-animated p {
   animation-delay: 0.5s;
 }

 .carousel-caption a,
 .text-animated a {
   animation-delay: 0.8s;
 }

 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* Highlighted text with gold color */
 .highlight-text {
   color: #CFAF65;

   text-shadow: 1px 1px 3px rgba(28, 28, 28, 0.4);

   font-weight: bold;
 }

 /* Paragraph Styling */
 .carousel-caption p,
 .page-banner p {
   color: #EDE6DD;
   /* Earthy neutral */
   font-size: 1.5rem;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
 }

 /* Button Styling */
 .page-banner .btn,
 #ikaurImageSlider .btn {
   background-color: #CFAF65;
   /* Gold */
   color: #1C1C1C;
   /* Charcoal black text */
   border: 2px solid #CFAF65;
   border-radius: 50px;
   transition: all 0.3s ease;
   font-weight: 600;
   font-size: 1rem;
   padding: 0.6rem 1.8rem;
   letter-spacing: normal;
 }

 .page-banner .btn:hover,
 #ikaurImageSlider .btn:hover {
   background-color: #B87333;
   /* Copper */
   color: #FFFFFF;
   /* White text on hover */
   transform: scale(1.05);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }



 /* ==================================================
                Slider section end 
======================================================*/


/* Signature */
.signature-text {
            font-family: 'Great Vibes', cursive;
             font-size: 40px;
              font-weight: normal;
           color: #CFAF65;
        white-space: nowrap;
           overflow: hidden;
           border-right: 2px solid transparent; /* No visible cursor */
            display: inline-block;
           animation: typing 3s steps(30, end) forwards;
                                                            }
                                                              /* Writing animation */
        @keyframes typing {
     from {
    width: 0;
          }

to {
        width: 100%;
   }
   }


 .theiaStickySidebar:after {
   content: "";
   display: table;
   clear: both;
 }

 .custom-image-resize {
   height: 400px;
   width: 100%;
   object-fit: cover;
 }

 /* Card Wrapper */
 .card {
   position: relative;
   width: 280px;
   padding: 20px;
   background: #f8f8f8;
   border-radius: 16px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   font-family: 'Segoe UI', sans-serif;
   margin: 20px;
 }

 .card h3 {
   margin: 10px 0 5px;
   font-size: 20px;
   color: #222;
 }

 .card p {
   font-size: 14px;
   color: #555;
   line-height: 1.5;
 }

 /* Floating Arrow Button */
 .floating-arrow-btn {
   position: absolute;
   bottom: 16px;
   right: 16px;
   width: 40px;
   height: 40px;
   background: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
 }

 .floating-arrow-btn::before {
   content: "\f1fe";
   /* Bootstrap Icons: arrow-up-right */
   font-family: 'bootstrap-icons';
   font-size: 16px;
   color: #333;
 }

 .floating-arrow-btn:hover {
   background: #e0e0e0;
 }

 /* Optional: Dark Style */
 .floating-arrow-btn.dark {
   background: #222;
 }

 .floating-arrow-btn.dark::before {
   color: #fff;
 }




 /* ============================================================
                    Services page 
===============================================================*/



 /* Modal background overlay (darker and elegant) */
 .modal-backdrop.show {
   opacity: 0.9;
   background-color: rgba(255, 255, 255, 1);
 }

 /* Modal content animation and styling */
 .animate-modal .modal-content {
   animation: fadeZoom 0.4s ease-in-out;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 }


 @keyframes fadeZoom {
   from {
     opacity: 0;
     transform: scale(0.9);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 #imageModal {
   border-radius: 0;
   max-height: 100vh;
   object-fit: contain;
   background-color: rgba(0, 0, 0, 0.8);
   padding: 10px;
 }


 /* Modal image styling */
 #modalImage {
   border-radius: 0;
   max-height: 90vh;
   object-fit: contain;
   /* background-color: rgba(255, 255, 255, 1); */
   padding: 10px;
 }



 /* Optional: Disable scrolling when modal is open */
 body.modal-open {
   overflow: hidden;
 }

 /* ============================================================
                    Services page End
===============================================================*/





 /*=============================================================== 

                  Products Page 
===============================================================*/

 .filter-btn {
   background-color: transparent;
   border: 1px solid #6c1c8c;
   color: #6c1c8c;
   padding: 6px 16px;
   margin-left: 6px;
   font-size: 0.9rem;
   border-radius: 5px;
   transition: all 0.3s ease;
 }

 .filter-btn:hover,
 .filter-btn.active {
   background-color: #6c1c8c;
   border-color: #6c1c8c;
   color: white;
 }

 .card-image {
   position: relative;
   overflow: hidden;
   border-radius: 1rem;
 }

 .card-image img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   border-radius: 1rem;
   transition: transform 0.3s ease;
 }

 .card-image:hover img {
   transform: scale(1.05);
 }

 .icon-circle {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background-color: #eedffc;
   color: #6b21a8;
   border-radius: 50%;
   width: 2.5rem;
   height: 2.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background-color 0.3s ease, color 0.3s ease;
 }

 .icon-circle:hover {
   background-color: #6b21a8;
   color: #eedffc;
 }

 .icon-circle svg {
   width: 1rem;
   height: 1rem;
   stroke-width: 2;
   stroke: currentColor;
   fill: none;
 }


 /* Portfolio Page */



 .portfolio .container {
   column-count: 3;
   max-width: 60rem;

 }

 .img_box img {
   width: 100%;
   border-radius: 10px;
   margin-bottom: 10px;
   box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
 }

 .img_box img:hover {
   transform: scale(1.05);
 }

 .img_box.hide {
   display: none !important;
 }



 .portfolio .filter-btn {
   background: #fff;
   color: #6c1c8c;
   padding: 6px 14px;
   border: 1.5px solid #6c1c8c;
   margin: 5px;
   border-radius: 20px;
   transition: 0.3s;
 }

 .portfolio .filter-btn.active,
 .portfolio .filter-btn:hover {
   background-color: #6c1c8c;
   color: white;
 }



 /* testimonials */

 .testimonials {
   display: flex;
 }

 .testimonial-card {
   max-width: 500px;
   margin: 50px auto;
   background: #6c1c8c;
   color: white;
   border-radius: 10px;
   font-family: Arial, sans-serif;
   text-align: center;
   padding: 20px;
   overflow: hidden;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }

 .testimonial-header h2 {
   font-size: 2rem;
   margin-bottom: 10px;
   font-weight: bold;
 }

 .testimonial-content {
   position: relative;
   background: white;
   color: black;
   border-radius: 20px;
   padding: 60px 20px 30px;
   margin: 20px 0;
 }

 .testimonial-image {
   position: absolute;
   top: -40px;
   left: 50%;
   transform: translateX(-50%);
   border: 5px solid white;
   border-radius: 50%;
   overflow: hidden;
   width: 100px;
   height: 100px;
 }

 .testimonial-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .testimonial-text {
   font-size: 0.95rem;
   line-height: 1.6;
   margin-top: 20px;
 }

 .testimonial-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 25px;
   font-size: 0.85rem;
 }

 .stars {
   font-size: 1.2rem;
   color: #004aad;
 }

 .quote-icon {
   font-size: 2rem;
   color: #004aad;
   position: absolute;
   background: white;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   line-height: 40px;
 }

 .quote-top {
   top: -20px;
   left: 20px;
 }

 .quote-bottom {
   bottom: -20px;
   right: 20px;
 }

 .testimonial-footer-text {
   margin-top: 15px;
 }

 .testimonial-footer-text a {
   color: white;
   text-decoration: none;
   font-size: 0.9rem;
 }