/*
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.1730795437
Updated: 2024-11-05 08:30:37

*/


header {
box-shadow: 0px 4px 10px rgba(25, 24, 24, 0.1);
}

/* Container for the caption */
.dmm_shortcaption {
    position: absolute;
    bottom: 20px; /* Position at the bottom of the image */
    left: 20px; /* Slight padding from the left */
    color: white; /* Text color for good contrast */
    font-size: 16px; /* Adjust font size for readability */
    font-family: 'Arial', sans-serif; /* Simple, clean font */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
    padding: 10px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners for a smoother look */
    max-width: 80%; /* Ensure the caption doesn’t overflow */
    text-align: left; /* Align text to the left */
}

/* Specific styling for individual text elements */
.dmm_shortcaption h2 {
    margin: 0; /* Remove margin for the heading */
    font-size: 18px; /* Slightly larger size for the title */
    font-weight: bold; /* Bold for emphasis */
}

.dmm_shortcaption p {
    margin: 5px 0; /* Space between paragraphs */
    font-size: 14px; /* Regular text size */
}
.dmm_foods {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.dmm_foods:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* MetaSlider container */
.dmm_foods .metaslider {
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}

.dmm_foods:hover .metaslider {
  transform: scale(1.05); /* Slight zoom effect on hover */
}

.dmm_foods .food-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20px;
  flex: 1;
}

.dmm_foods .food-info h3 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.dmm_foods .food-info p {
  margin-top: 5px;
  font-size: 1rem;
  color: #777;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
	  transform: scale(1.05);

}

.dmm_foods:hover .food-info h3 {
  color: #ff6347; /* Change title color on hover */
  transform: translateY(-2px); /* Slight pop-up effect for the title */
}

.dmm_foods:hover .food-info p {
  color: #ff6347; /* Change paragraph color on hover */
  transform: translateY(-2px); /* Slight pop-up effect for the paragraph */
	  transform: scale(1.05);

}

/* Responsive Design */
@media (max-width: 768px) {
  .dmm_foods {
    flex-direction: column;
    align-items: flex-start;
  }

  .dmm_foods .metaslider {
    max-width: 100%; /* Full width slider on small screens */
    margin-bottom: 15px;
  }

  .dmm_foods .food-info {
    margin-left: 0;
  }

  .dmm_foods .food-info h3 {
    font-size: 1.3rem;
  }

  .dmm_foods .food-info p {
    font-size: 0.9rem;
  }
}
/* Container for responsive and hover effect */
.dmm_intro {
  display: inline-block;
  overflow: hidden;
  width: auto; /* Use auto for width to maintain image’s natural width */
  max-width: 100%; /* Allow full container width */
}

/* Make the image responsive */
.dmm_intro img {
  width: 100%; /* Ensure image is responsive */
  max-width: 100%; /* Ensure image doesn’t exceed container size */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Pop-up effect on hover */
.dmm_intro:hover img {
  transform: scale(1.1); /* Slightly increase size */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Shadow effect */
}

/* Optional: style to limit max-width on larger screens */
@media (min-width: 768px) {
  .dmm_intro {
    max-width: 100%; /* Allows image to take full width on larger screens */
  }
}



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%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
	cursor: pointer;
}


/* General form styling */
form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

/* Form labels */
form label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    color: #191818;
}

/* Input fields and textarea */
form input[type="text"],
form input[type="email"],
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #fff;
    color: #191818;
}

/* Focus effect on input fields */
form input[type="text"]:focus,
form input[type="email"]:focus,
form textarea:focus {
    outline: none;
    border-color: #191818;
    box-shadow: 0 0 5px rgba(25, 24, 24, 0.3);
}

/* Submit button styling */
form input[type="submit"] {
    background-color: #7A2113
;
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    width: 100%;
}

/* Hover effect for submit button */
form input[type="submit"]:hover {
    background-color: #7A2113
;
}

/* Responsive design */
@media (max-width: 768px) {
    form {
        padding: 15px;
    }
    
    form input[type="submit"] {
        font-size: 14px;
        padding: 10px 15px;
    }
}

@media (max-width: 480px) {
    form {
        padding: 10px;
    }

    form input[type="submit"] {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* giveing border radius to the imgs */
.dmm_borders{
  border-radius: 50%; /* Circular border */
}


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

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

/* Page Title Styling */
.page-title {
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    color: #7A2113; /* Dark Red */
    padding: 20px;
    margin: 20px 0;
    border-bottom: 2px solid #e0e0e0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Page Title Styling */
.page-title {
    font-family: Arial, sans-serif!important;
    font-weight: 700!important;
    font-size: 2rem!important;
    text-align: center!important;
    color: #7A2113!important; /* Dark Red */
    padding: 20px!important;
    margin: 20px 0!important;
    border-bottom: 2px solid #e0e0e0!important;
    position: relative!important;
    overflow: hidden!important;
    transition: all 0.3s ease!important;
}

/* Animation Effect: Slide Up on Load */
.page-title::before {
    content: ""!important;
    position: absolute!important;
    left: 0!important;
    top: 100%!important;
    width: 100%!important;
    height: 100%!important;
    background: #7A2113!important; /* Dark Red Accent */
    z-index: -1!important;
    transition: top 0.5s ease-in-out!important;
}

.page-title:hover::before {
    top: 0!important;
}

/* Text Color Change on Hover */
.page-title:hover {
    color: #fff!important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-title {
        font-size: 1.8rem!important;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.5rem!important;
        padding: 15px!important;
    }
}



@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.metaslider .caption {
    position: absolute!important;
    top: 50%!important; /* Starting at the vertical center */
    left: 50%!important;
    transform: translate(-50%, -250%)!important; /* Moves the caption higher */
    width: 80%!important; /* Adjust width as needed */
    text-align: center!important;
    color: #fff!important; /* caption text color */
    padding: 20px!important;
    font-size: 52px!important; /* Large font size for BIG text */
    font-weight: bold!important; /* Makes the text bold */
    box-sizing: border-box!important;
    z-index: 2!important;
    background: rgba(0, 0, 0, 0.6)!important; /* semi-transparent background */
    border-radius: 50%!important; /* Makes background circular */
    animation: fadeIn 1s ease-in-out!important; /* Fade-in animation over 1 second */
    display: inline-block; /* Keeps circular shape around text */
}
    
.metaslider .caption p {
    margin: 0!important; /* removes default paragraph margin */
}




.dmm_img_hover {
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.dmm_img_hover:hover {
  transform: scale(1.2);
  z-index: 10;
}
@media (max-width: 768px) {
  .dmm_img_hover:hover {
    transform: scale(1.01); /* Less pop-up effect on mobile */
  }
}