/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-oceanwp/
Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready
Version: 4.0.2.1730273306
Updated: 2024-10-30 07:28:26

*/

/* Add box-shadow to the header border */
header {
    box-shadow: 0px 4px 10px rgba(142, 36, 170, 0.6);
}
.dmm_services {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
}

.service {
    position: relative;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* Makes the entire service clickable */
}

.service img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

.service:hover {
    transform: translateY(-5px);
    box-shadow: 0px 4px 10px rgba(142, 36, 170, 0.6);
}

.service:hover img {
    filter: grayscale(0%);
}

.service:hover .caption {
    opacity: 1;
}

figcaption.widget-image-caption.wp-caption-text{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.35);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    transition: opacity 0.3s ease;
    width: 80%; /* Adjusted to ensure it stays within the image's bounds */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

@media (max-width: 768px) {
    .dmm_services {
        flex-direction: column;
    }
}



/* General Form Styling */
.contact-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #333;
}

/* Input and Textarea Styling */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    color: #333;
    background-color: #f7f7f7;
    transition: all 0.3s ease;
}

/* Focus Effect */
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #A37FAD;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(163, 127, 173, 0.3);
}

/* Button Styling */
.contact-form button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #8E24AA;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Hover Effect */
.contact-form button[type="submit"]:hover {
    background-color: #A37FAD;
}

/* Responsive Styling */
@media (max-width: 768px) {
    .contact-form {
        padding: 15px;
    }
}


/* Styling the page title section */
.page-title {
  font-family: Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
  color: #8E24AA;
  text-align: center;
  margin: 20px auto;
  max-width: 90%;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}

/* Responsive font size */
@media (min-width: 600px) {
  .page-title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .page-title {
    font-size: 3.5rem;
  }
}

/* Fade-in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover effect */
.page-title:hover {
  transform: scale(1.02);
}
h1.page-header-title.clr {
    color: #8E24AA;
}




/* Mobile footer styling */
@media (max-width: 768px) {
    /* Adjust footer text size */
    .footer,
    .footer p,
    .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
        font-size: 0.9em!important;
        line-height: 1.2em!important;
    }

    /* Adjust footer link size */
    .footer a {
        font-size: 0.85em!important;
    }

    /* Reduce footer image size */
    .footer img {
        max-width: 70px!important;
        height: 70px!important;
    }

    /* Optional: Adjust padding/margin in the footer for better spacing */
    .footer {
        padding: 10px 5px!important;
    }

    /* Adjust icon size if there are any social media icons */
    .footer .social-icons i,
    .footer .social-icons svg {
        font-size: 0.8em!important;
    }
}