/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: Astra is fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with Schema.org code integrated and is Native AMP ready so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, etc. Some of the other features: # WooCommerce Ready # Responsive # RTL & Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and WooCommerce ready theme that you can use for building any kind of website!
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.7.3.1721453776
Updated: 2024-07-20 05:36:16

*/

.pll-parent-menu-item img {
                margin-bottom: 0px !important;
            }
.pll-parent-menu-item img {
    margin-bottom: -12px !important;
    margin-right: 25px !important;
}
img[Attributes Style] {
    width: 16px;
    aspect-ratio: auto 16 / 11;
    height: 11px;
}
/*form  */
button.forminator-button.forminator-button-submit {
    background-color: #002060 !important;
}


/* Custome form  */
/* Base checkbox pill styling */
.our-check-box .forminator-checkbox.forminator-checkbox-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px 10px 10px 0;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 500;
  border: 2px solid #000;
  border-radius: 30px;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Hide checkbox input and default checkbox box */
.our-check-box .forminator-checkbox.forminator-checkbox-inline input[type="checkbox"],
.our-check-box .forminator-checkbox-box {
  display: none !important;
}

/* Label after content (+) */
.our-check-box .forminator-checkbox-label::after {
  content: " +";
  font-weight: bold;
  margin-left: 6px;
  transition: all 0.3s ease;
}

/* Hover effect */
.our-check-box .forminator-checkbox.forminator-checkbox-inline:hover {
/*   background-color: #000; */
  color: #000;
  border-color: #000;
}

/* Active (checked) state — apply to the entire block */
.our-check-box .forminator-checkbox.forminator-checkbox-inline input[type="checkbox"]:checked ~ .forminator-checkbox-label {
  color: #fff;
}

.our-check-box .forminator-checkbox.forminator-checkbox-inline input[type="checkbox"]:checked ~ .forminator-checkbox-label::after {
  content: " ✔";
  color: #000000;
}

.our-check-box .forminator-checkbox.forminator-checkbox-inline input[type="checkbox"]:checked:checked ~ .forminator-checkbox-label {
  color: #000000;
}

/* Apply background and border color change to the whole pill */
.our-check-box .forminator-checkbox.forminator-checkbox-inline input[type="checkbox"]:checked ~ .forminator-checkbox-box,
.our-check-box .forminator-checkbox.forminator-checkbox-inline input[type="checkbox"]:checked ~ .forminator-checkbox-label {
  background-color: transparent; /* background should be on parent, not label */
}

/* Add green background to the entire .forminator-checkbox-inline */
.our-check-box .forminator-checkbox.forminator-checkbox-inline.checked {
/*   background-color: #28a745; */
  border-color: #28a745;
  color: #fff;
}
.forminator-ui.forminator-custom-form[data-design=material] .forminator-has_error .forminator-error-message {
    color: red !important;
    display: block;
}

#forminator-field-textarea-1_682c6c4f69b71 {
  border: none; /* Remove all borders */
  border-bottom: 1px solid #000; /* Only bottom border */
  outline: none; /* Remove focus outline */
  background: transparent; /* Optional - remove background */
  box-shadow: none !important; /* Remove Forminator's default focus styles */
}

/* Prevent border or style change on hover or focus */
#forminator-field-textarea-1_682c6c4f69b71:hover,
#forminator-field-textarea-1_682c6c4f69b71:focus {
  border: none;
  border-bottom: 1px solid rgb(209 213 219);
  outline: none;
  box-shadow: none !important;
}
.forminator-ui.forminator-custom-form[data-design=material] .forminator-textarea {
    width: 100%;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    resize: vertical;
    margin: 0;
    min-height: 140px;
    background-image: unset;
    line-height: 20px;
    -webkit-transition: .2s ease;
    transition: .2s ease;
    padding: 0 9px 9px;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    line-height: 20px;
    border: none !important;
    border-bottom: 1px solid rgb(209 213 219) !important;
}
.forminator-ui.forminator-custom-form[data-design=material] .forminator-field.forminator-has_error .forminator-textarea--wrap:after, .forminator-ui.forminator-custom-form[data-design=material] .forminator-field.forminator-is_active .forminator-textarea--wrap:after, .forminator-ui.forminator-custom-form[data-design=material] .forminator-field.forminator-is_hover .forminator-textarea--wrap:after {
    opacity: 1;
    -khtml-opacity: 1;
    border: none !important;
    border-bottom: solid 1px #000000 !important;
}

/* Servise page List styles start */
/* List reset */
.quick-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Link styles */
.quick-links-list--link {
    position: relative;
    display: block;
    text-decoration: none !important;
    font-size: 1.45rem;
    font-weight: 500;
    color: #000000;
    border-bottom: 1px solid #737373;
    padding: 20px 70px 20px 0;
    transition: color 0.3s ease;
    overflow: hidden;
}

/* Underline animation */
.quick-links-list--link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #121212;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.quick-links-list--link:hover::before {
    transform: scaleX(1); /* Expand underline */
}

.quick-links-list--link:hover {
    color: #000;
}

@media(min-width: 768px) {
    .quick-links-list--link {
        padding: 25px 80px 25px 0;
    }
}

/* Arrow animation */
.quick-links-list--link::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%) translateX(-20px) rotate(45deg);
    width: 34px;
    height: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M203.3 36.7c-6.2-6.2-16.4-6.2-22.6 0l-176 176c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L176 86.6 176 464c0 8.8 7.2 16 16 16s16-7.2 16-16l0-377.4L356.7 235.3c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-176-176z' fill='%23121212' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: all 0.4s ease;
}

.quick-links-list--link:hover::after {
    transform: translateY(-50%) translateX(0) rotate(45deg);
    opacity: 1;
}

/* Other effects */
.quick-links-list--item:hover,
.quick-links-list--item:focus,
.quick-links-list--item:focus-within {
    opacity: 1 !important;
}

.quick-links-list:hover .quick-links-list--item {
    opacity: 0.5;
}

.quick-links-list--item:last-child .quick-links-list--link {
    border-bottom: none;
}

@media (max-width: 576px) {
    .quick-links-list--link {
        font-size: 1.1rem;
        padding: 18px 60px 18px 0;
    }
}
/* Servise page List styles end */
/*  Servise page Custom Slider start */
/* Service Slider Wrapper */
.service-slider-wrapper {
  max-width: 1200px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  padding: 0 20px;
}

/* Service Slider Container */
.service-slider {
  display: flex;
  gap: 23px;
  transition: transform 0.3s ease-in-out;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  /* Hide scrollbar cross-browser */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */
}

.service-slider::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Service Card Style */
.service-card {
    position: relative;
    min-width: 350px;
    max-width: 428px;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
/*     font-family: 'Teachers'; */
	font-family: "Poppins", poppines;
    font-size: 16px;
    color: #000000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: transform 0.3s ease;
    overflow: hidden;
}

/* Hover transform */
.service-card:hover {
  transform: translateY(-5px);
}

/* Hover underline effect */
.service-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background-color: #ff5e57;
  transition: width 0.3s ease-in-out;
}

.service-card:hover::after {
  width: 100%;
}

/* Service Label */
.service-label {
  font-size: 12px;
  text-transform: uppercase;
  color: #ff5e57;
  letter-spacing: 1px;
}

/* Card Title */
.service-card h2 {
     font-size: 30px;
    /* margin: 13px 0; */
    margin-top: 13px;
    margin-bottom: 40px;
}

.slider-controls {
  display: flex;
  justify-content: start; /* centers the buttons horizontally */
  gap: 10px;
  margin-top: 30px;
}

.slider-controls button {
  width: 48px;
  height: 58px;
  border-radius: 50%;
  color: #121212;
  background-color: transparent;
  border: 1px solid #cad2d3;
  font-size: 26px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-controls button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.slider-prev::before {
  content: "⮜";
}

.slider-next::before {
  content: "⮞";
}
.slider-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 768px) {
  .service-slider-wrapper {
    padding: 0 10px;
    margin: 30px auto;
  }

  .service-slider {
    gap: 15px;
  }

  .service-card {
    min-width: 260px;
    max-width: 300px;
    padding: 20px;
    font-size: 15px;
  }

  .service-card h2 {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .slider-controls {
    justify-content: center;
    margin-top: 20px;
  }

}

@media (max-width: 768px) {
  .slider-controls button {
    width: 40px;
    height: 45px;
    border: none;
    background: transparent;
    position: relative;
  }

  .slider-prev::before,
  .slider-next::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .slider-prev::before {
    background-image: url('https://web.winwinweb.co.in/wp-content/uploads/2025/05/RIGHT-ARROW-1.png');
    transform: rotate(180deg); /* Mirror the arrow for previous */
  }

  .slider-next::before {
    background-image: url('https://web.winwinweb.co.in/wp-content/uploads/2025/05/RIGHT-ARROW-1.png');
  }
}
/*  Servise page Custom Slider end */

/* === Base Layout === */
/* Service Page - Custom Stacking Cards Start */

.stacking-section {
/*   height: 600vh; */
  position: relative;
  background: #ffffff00;
  padding: 2rem 0;
/*   font-family: 'Teachers', sans-serif; */
	font-family: "Poppins", poppines;
  font-size: 16px;
}

.stacking-card {
  position: sticky;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 0;
  max-width: 1000px;
  width: 100%;
}

/* Sticky positioning for stacking */
.stacking-card:nth-child(1) { z-index: 1; top: 100px; }
.stacking-card:nth-child(2) { z-index: 2; top: 110px; }
.stacking-card:nth-child(3) { z-index: 3; top: 120px; }
.stacking-card:nth-child(4) { z-index: 4; top: 130px; }
.stacking-card:nth-child(5) { z-index: 5; top: 140px; }
.stacking-card:nth-child(6) { z-index: 6; top: 150px; }

.card-content {
  display: flex;
  flex-wrap: wrap;
}

.card-text {
  flex: 1 1 50%;
  padding: 2rem;
  text-align: left;
}

.card-text h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.card-text p {
  font-size: 15px;
  margin-bottom: 1rem;
}

.card-btn {
  display: inline-block;
  background: #e67e22;
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 5px;
  font-size: 15px;
}

.card-img {
  flex: 1 1 50%;
  max-height: 100%;
  overflow: hidden;
}

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

/* Laptop View Fix (Between 993px and 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
  .stacking-card {
    width: 95%;
  }

  .card-text {
    padding: 1.5rem;
  }

  .card-text h2 {
    font-size: 1.75rem;
  }

  .card-text p {
    font-size: 15px;
  }

  .card-btn {
    font-size: 15px;
    padding: 0.5rem 1rem;
  }

  .card-img img {
    height: 100%;
    object-fit: cover;
  }
}

/* Tablet View (max-width: 992px) */
@media (max-width: 992px) {
  .stacking-card {
    width: 95%;
  }

  .card-text {
    padding: 1.5rem;
  }

  .card-text h2 {
    font-size: 1.6rem;
  }

  .card-text p {
    font-size: 15px;
  }
}

/* Mobile View (max-width: 768px) */
@media (max-width: 768px) {
  .card-content {
    flex-direction: column;
  }

  .card-img,
  .card-text {
    flex: 1 1 100%;
    padding: 1rem;
  }

  .card-text h2 {
    font-size: 1.4rem;
  }

  .card-text p {
    font-size: 15px;
  }

  .card-btn {
    font-size: 14px;
  }

  .stacking-card {
    margin-bottom: 30px;
  }
}

/* Mobile Portrait View (max-width: 480px) */
@media (max-width: 480px) {
  .card-text h2 {
    font-size: 1.25rem;
  }

  .card-text p {
    font-size: 15px;
  }

  .card-btn {
    padding: 0.4rem 0.75rem;
    font-size: 13px;
  }
}

/* Corner Border Decorations */
.mission-description:after {
  content: '';
  width: 185px;
  height: 185px;
  position: absolute;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  left: 0;
  bottom: 0;
}

.vision-description:after {
  content: '';
  width: 185px;
  height: 185px;
  position: absolute;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  right: 0;
  top: 0;
}

/* Service Page - Custom Stacking Cards End */
/* Portfolio Zooming Animation */
.zoomout-animation {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 30px; /* Add rounded corners to the container */
  z-index: 10; /* Ensure it's above other elements */
}

.zoomout-animation img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 2.8s ease;
  transform: scale(1); /* Start normal */
  transform-origin: center center;
  border-radius: 30px; /* Apply to image too for perfect rounding */
}

.zoomout-animation:hover img {
  transform: scale(1.10); /* Slight zoom on hover */
}
/* animation buttons */

.animation-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  border-radius: 16px;
  overflow: hidden;
  gap: 12px;
  position: relative;
  z-index: 10;
  flex-wrap: wrap;
}


.animation-buttons .btn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  padding: 10px 16px;
  text-align: center;
  border-radius: 30px;
  border: 1px solid #ccc;
  cursor: pointer;
  font-size: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* First button is always visible */
.animation-buttons .btn:first-child {
  background-color: #002060;
  color: white;
  opacity: 1;
  transform: translateY(0);
  border: none;
}

/* Show others only on hover */
.animation-buttons:hover .btn:not(:first-child) {
  opacity: 1;
  transform: translateY(0);
  
}

/* Style for other buttons */
.animation-buttons .btn:not(:first-child) {
  background-color: white;
  color: black;
  border: 1px solid #ccc;
}

/* Hover effect */
.animation-buttons .btn:hover {
   background-color:#f5821f;
	 color: white;
}

/* RESPONSIVE: Keep all buttons hidden unless hover */
@media (max-width: 1024px),
       (max-width: 768px),
       (max-width: 480px) {
  /* Ensure buttons remain hidden unless hover */
  .animation-buttons .btn:not(:first-child) {
    opacity: 0 !important;
    transform: translateY(20px) !important;
  }

  .animation-buttons:hover .btn:not(:first-child) {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}
/* popup */
.form-popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}

.form-popup-box {
  background: #fff;
  max-width: 500px;
  width: 90%;
  margin: 80px auto;
  padding: 0;
  position: relative;
  border-radius: 8px;
  animation: fadeIn 0.3s ease-in-out;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Close button */
.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
  z-index: 10;
}

/* Header Gradient */
.popup-header {
  background: linear-gradient(135deg, #002060, #f5821f);
  padding: 20px 20px 30px;
  color: #fff;
  position: relative;
}

/* Header content */
.popup-header-content {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.popup-header img {
  width: 40px;
  height: 40px;
}

.header-texts {
  flex: 1;
}

.header-texts h2 {
  margin: 0;
  font-size: 20px;
	color: #fff;
}

.header-texts p {
  margin: 5px 0 0;
  font-size: 14px;
}

/* Form content area */
.popup-content {
  padding: 25px 30px;
}
/* Responsive design */
@media (max-width: 480px) {
  .popup-header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .popup-header img {
    width: 30px;
    height: 30px;
  }

  .header-texts h2 {
    font-size: 18px;
  }

  .popup-content {
    padding: 20px;
  }
}
.elementor-144 .elementor-element.elementor-element-12784cb .wpr-button-wrap {
    max-width: 180px;
    cursor: pointer;
}
    .forminator-ui.forminator-custom-form[data-design=material]:not(.forminator-size--small) .forminator-response-message {
        margin-bottom: 30px;
        font-size: 15px;
        background-color: #079a07;
        color: white;
    }
.forminator-ui.forminator-custom-form[data-design=material] .forminator-has_error .forminator-error-message {
    display: block;
    font-size: 14px !important;
}

/* Home page banner text animation  */
.wp-gradient-text {
    display: inline-block;
    background: linear-gradient(90deg, #ff2020, #feed7b, #ff3a3a);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradientBounce 6s ease-in-out infinite;
}

@keyframes gradientBounce {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}