/*!
Theme Name: little village
Theme URI: http://underscores.me/
Author: Akel Alkubeh
Author URI: https://artimedia-pro.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: little-village
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

little village is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
  --bluelight: #46BBFC;
}
body {
  background-color: #1B5992;
  color: #fff;
}
h1 {
  font-size: 1.8em;
}
h2 {
  font-size: 1.6em;
}

h3 {
  font-size: 1.4em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1em;
}
.custom-logo{
  max-width: 120px;
}
.page-content, .entry-content, .entry-summary
 {
    margin: 0em !important;
}

/* Style the menu items */
.homemenu .menu-item a {
  font-size: 14px;
  color: #ffffff !important; /* Force white text */
  font-weight: 500;
  text-decoration: none !important;
  padding: 0 20px !important; /* Spacing between items */
  transition: 0.3s;
  display: block;
}

/* 2. Hover effect for the links */
.homemenu .menu-item a:hover {
  color: #38b6ff !important; /* Blue on hover */
}

/* 3. Ensure the list items are horizontal */
.homemenu ul.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 4. Remove default browser/theme styling that might interfere */
.homemenu .menu-item {
  list-style: none;
}

#primary-menu li a {
  text-decoration: none;
  color:#fff;
  position: relative;
  overflow: hidden;
}

#primary-menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--red);
  width: 0%;
  transition: width 0.3s ease;
}

#primary-menu li a:hover::after {
  width: 100%;
  animation: heartbeat116 1.5s ease-in-out 0.3s infinite;
}

@keyframes heartbeat116 {
  0%, 100% {
    width: 100%;
  }
  50% {
    width: 60%;
  }
}
.post, .page
 {
    margin: 0em;
}
#primary-menu li.active a{
  border-bottom: 1px solid var(--red);
}
/* Footer Menu  */
.site-footer .footer-leftsec , .site-footer .footer-rightsec {
  border-top: #fff  1px solid;
  border-bottom: #fff  1px solid;
}
.social-icon{
  width: 35px;
  background-color: #fff;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: 0.3s ease;
  text-decoration: none;
}

.social-icon:hover ,.contact-icon:hover {
  background-color: #fff;
  transform: translateY(-3px);
}
.cit{
font-size: 3em;
font-weight: 200;
}
.cit span{
font-weight: 900;
}
.cu{
  font-size: 3em;
font-weight: 900;
  }
/* Contact Form  */
/* Container to hold the pill */
.custom-contact-container {
    max-width: 1000px;
    margin: 0 auto;
}
.custom-contactfooter-container {
  max-width: 500px;
  padding: 1em 0;
}
.custom-contacthome-container {
  max-width: 750px;
  padding: 1em 0;
}
/* The Glass Pill Wrapper */
.contact-form-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.3); /* Transparent white */
    backdrop-filter: blur(10px);         /* Frosted effect */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    padding: 10px;
    gap: 10px;
}
.custom-contacthome-container .contact-form-wrapper {
  display: flex;
  align-items: center;
  background: #f8f9fa; /* Solid light grey/white background */
  border: 1px solid #e0e0e0; /* Subtle border */
  border-radius: 50px;
  padding: 8px;
  gap: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Slight shadow */
}

/* Styling the inputs inside the wrapper */
.contact-form-wrapper .form-control {
    background: white;
    border: none;
    border-radius: 30px;
    padding: 3px 15px;
    flex: 1; /* Makes them share space equally */
}
/* Individual inputs */
.custom-contacthome-container .contact-form-wrapper .form-control {
    background: #ffffff; /* White input background */
    border: 1px solid #dcdcdc; /* Visible border around inputs */
    border-radius: 30px;
    padding: 3px 15px;
    flex: 1;
    color: #6c757d;
}

.custom-contacthome-container .contact-form-wrapper .form-control:focus {
  border-color: #38b6ff;
  box-shadow: 0 0 0 0.2rem rgba(56, 182, 255, 0.25);
}
/* Styling the button to match the icon */
.send-btn {
    background-color: #38b6ff; /* Match your blue button */
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: 0.3s;
}

.send-btn:hover {
    background-color: #2a8ccf;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .contact-form-wrapper {
        flex-direction: column;
        border-radius: 20px;
        padding: 20px;
    }
    .contact-form-wrapper .form-control {
        width: 100%;
    }
}
.wpcf7-spinner{
  display: none;
}

@media (min-width: 320px) and (max-width: 767px) {
  .mobiletabs  button{
    margin-bottom: 0px !important;
  }
  .service-form .btn-submit{
    font-size: 10px;
    width: 100%;
    height: 100%;
  }
  
}