/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://example.com/hello-child/
 Description:  Hello Elementor Child Theme
 Author:       Unknown
 Author URI:   https://example.com
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/*Header Css Starts*/
form.search-form {
    display: flex;
    align-items: center;
}
.search-icon input.search-field {
    padding: 12px;
    border-radius: 50px;
    background: #F5F3F0;
    color: #6B6B6B;
    font-size: 14px;
    border: 2px solid #6B6B6B;
}
.search-icon button.search-submit {
    background: none;
    border: none;
    color: #000;
    font-size: 14px;
    cursor: pointer;
    /*margin-left: -36px;*/
}
/*Header Css ends*/

/*Footer Css Starts*/

.email-signup-form {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.email-signup-form input[type="email"] {
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid #ccc;
    font-size: 1rem;
    width: 350px;
    max-width: 100%;
}
.email-signup-form button {
    padding: 12px 24px;
    background-color: #7C9473;
    color: #fff;
    border: none;
    font-weight: 700;
    border-radius: 999px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.email-signup-form button i {
   /* display: none;*/
    margin-left: 8px;
    transition: display 0.3s ease;
}

/*Footer Css Ends*/


.arrow-hover-btn .elementor-button-content-wrapper {
    position: relative;
    display: inline-flex;           /* flex rakha taaki alignment sahi rahe */
    align-items: center;
    transition: padding-right 0.4s ease;
}

.arrow-hover-btn .elementor-button-text {
    transition: transform 0.4s ease;
}

.arrow-hover-btn .elementor-button-content-wrapper::after {
    content: "→";                   /* right arrow – chahe to "›" ya "»" bhi daal sakte ho */
    position: absolute;
    right: -1.8em;                  /* shuru mein bahar chhupa */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3em;
    font-weight: bold;
    opacity: 0;
    transition: right 0.4s ease, opacity 0.4s ease;
    color: inherit;                 /* button ka text color hi lega */
}

.arrow-hover-btn:hover .elementor-button-content-wrapper::after {
    right: 0.3em;                     /* hover par andar slide */
    opacity: 1;
}

.arrow-hover-btn:hover .elementor-button-content-wrapper {
    padding-right: 3.6em;           /* extra space arrow ke liye */
}

/* Optional: text ko thoda left shift karne ke liye (bahut natural lagta hai) */
.arrow-hover-btn:hover .elementor-button-text {
    transform: translateX(1em);
}



#arrow-hover-bt {
    position: relative;
    display: inline-flex;            /* flex for better alignment */
    align-items: center;
    justify-content: center;
    min-width: 160px;                /* normal minimum width – adjust kar sakte ho (apne button ke hisaab se) */
    transition: 
    padding 0.4s ease,           /* padding smoothly change → width expand */
    min-width 0.4s ease;         /* extra smooth feel ke liye */
    overflow: hidden;
    box-sizing: border-box;
    white-space: nowrap;             /* text wrap na ho */
    text-decoration: none;           /* safe side */
}

/* Inner text smooth shift */
#arrow-hover-bt .elementor-button-text {
    display: inline-block;
    transition: transform 0.4s ease;
}

/* Arrow pseudo-element */
#arrow-hover-bt::after {
    content: "→";                    /* simple arrow – "›" ya Font Awesome bhi daal sakte ho */
    position: absolute;
    right: -1.8em;                   /* shuru mein bahar chhupa */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;                /* arrow size – adjust kar sakte ho */
    font-weight: bold;
    opacity: 0;
    transition: right 0.4s ease, opacity 0.4s ease;
    color: inherit;                  /* button text color lega */
}

/* Hover – width expand + arrow slide */
#arrow-hover-bt:hover {
    padding: 12px 60px 12px 40px;    /* right padding zyada → width smoothly badhegi */
    /* Agar aur zyada expand chahiye: padding-right: 70px; ya padding: 12px 70px 12px 40px; */
}

#arrow-hover-bt:hover::after {
    right: 1em;                      /* arrow andar smoothly aayega (adjust kar sakte ho 0.8em ya 1.2em) */
    opacity: 1;
}

/* Text left shift on hover (natural lagta hai arrow ke saath) */
#arrow-hover-bt:hover .elementor-button-text {
    transform: translateX(-0.8em);   /* -0.6em se -1em tak try karo */
}



.mcg-btn {
    position: relative;
    display: inline-block;

    padding: 10px 40px 10px 40px;    /* base padding (left/right same rakha symmetry ke liye) */
    padding-right: 2.8em;            /* arrow ke liye extra right space */
    text-align: center;              /* text center rahega width badhne pe bhi */
    transition: 
    padding 0.45s ease,          /* padding smoothly badhega (width indirectly badhegi) */
    min-width 0.45s ease;        /* optional: agar min-width bhi animate karna ho */
    overflow: hidden;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;             /* text wrap na ho */
}

/* Text smooth movement */
.mcg-btn span,
.mcg-btn:not(:has(span)) {
    display: inline-block;
    transition: transform 0.45s ease;
}

/* Arrow */
.mcg-btn::after {
    content: "→";
    position: absolute;
    right: -1.8em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3em;
    font-weight: bold;
    opacity: 0;
    transition: right 0.45s ease, opacity 0.45s ease;
    color: inherit;
}

/* Hover – width effectively badhegi padding badhne se */
.mcg-btn:hover {
    min-width: 45%;
    padding: 10px 45px 10px 22px !important;
}

.mcg-btn:hover::after {
    right: 0.7em;
    opacity: 1;
}

/* Text left shift (natural feel ke liye) */
.mcg-btn:hover span,
.mcg-btn:hover:not(:has(span)) {
    transform: translateX(0em);   /* -0.5em se -1em tak adjust kar sakte ho */
}


footer .mcg-card-inner {
    padding: 0 !important;
}

/*.header-menu nav li a:hover{
    font-weight: bold !important;
}*/
header .elementor-widget-search .e-search-form{
    flex-direction: row-reverse;
}
header .e-search-form .e-search-label svg{
    transform: translateX(-3.3rem) translateY(-0.7rem) !important;
}
header .e-search-form .e-fas-times{
    transform: translateX(-2.3rem) translateY(-0.3rem) !important;
}
.elementor-widget-search .e-search-form{
    height: 55px;
}
.journey-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -7px;
    width: 12px;
    height: 12px;
    background: #D9A5A0;
    border-radius: 50%;
    border: none;
}
.journey-timeline p:last-child {  /* agar Elementor plugin use kar rahe ho */
    margin-bottom: 0 !important;
}
.nfooter h3 {
    font-family: "Playfair Display", Sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #7c9473;
    text-align: center;
}
.nfooter p {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #1F2937;
}
/*.email-signup-form button:hover {
    background-color: #5E7A55;
}
.email-signup-form button {
    padding: 12px 24px;
    background-color: #7C9473;
    color: #fff;
    border: none;
    font-weight: 700;
    border-radius: 999px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}*/
.subscribe_button {
  background-color: #5E7A55;
  color: #fff;
  border: none;
  padding: 12px 22px 12px 30px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transition: padding 0.45s ease !important;
  margin-top: 0.4rem;
}

/* Patla arrow (Unicode → bahut slim aur clean) */
.subscribe_button::after {
  content: "→";                    /* yeh sabse patla aur modern lagta hai */
  /* Agar aur patla chahiye: content: "›"; ya "⟶"; ya "⇾"; try kar sakte ho */
  position: absolute;
  right: -1.8em;
  top: 46%;
  transform: translateY(-50%);
  opacity: 0;
  transition: right 0.45s ease, opacity 0.45s ease;
  font-size: 1.4em;                /* size adjust – 1.2em se 1.6em tak patla dikhega */
  font-weight: normal;             /* yeh ensure karega mota na ho */
  color: #fff;
}

/* Hover */
.subscribe_button:hover {
  background-color: #7C9473;
  padding: 12px 55px 12px 30px !important;
}

.subscribe_button:hover::after {
  right: 0.8em;
  opacity: 1;
}
.single-post .elementor-widget-loop-grid .elementor-loop-container{
    gap: 20px;
}
.single-post .elementor-widget-my_category_grid .mcg-card{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
}
.single-post .elementor-widget-my_category_grid .mcg-card .mcg-title{
    margin: 0;
}
.single-post .elementor-widget-my_category_grid .mcg-card-inner{
    padding: 2px !important;
}

.single-post .mytags .elementor-post-info__item-prefix {
    padding-right: 1rem;
    color: #7C9473;
}
.single-post .elementor-widget-theme-post-content a{
    color: #7C9473 !important;
}
.single-post .tags .elementor-post-info__item-prefix{
    color: #7c9473;
}

.blog-page-featured-image a{
    display: block;
}

.mytags a{
    color: #ffffff !important;
    background-color: #7C9473;
    border: 1px solid #7C9473;
    padding: 5px 12px !important;
    border-radius: 25px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}
.tags a{
    color: #ffffff !important;
    background-color: #7C9473;
    border: 1px solid #7C9473;
    padding: 5px 12px !important;
    border-radius: 25px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    margin-top: 1rem;
}
.tags .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text a, .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text span{
    display: inline-block !important;
}
.mytags a:hover{
    color: #ffffff !important;
}
.mytags .elementor-post-info__terms-list-item {
    margin: 0 10px;
}
.homepage-featured-posts .elementor-post__card:hover .elementor-post__title a, .homepage-featured-posts .elementor-post__card:hover .elementor-post__read-more, .custom-posts .elementor-post__card:hover .elementor-post__title a, .custom-posts .elementor-post__card:hover .elementor-post__read-more{
    color: #D9A5A0 !important;
    transition: .3s ease;
}
.search-result-form .search-form{
    margin: 0 auto 50px;
    border: 1px solid #8A8F95;
    border-radius: 4px;
    overflow: hidden;
}
.search-result-form .search-form .search-field {
    padding: 12px 15px;
    font-size: 16px;
    border: none;
    outline: none;
    font-family: 'Source Sans Pro', sans-serif;
}
.search-result-form .search-submit {
    padding: 14px 20px;
    background-color: #D9A5A0;
    color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.3s ease;
}
.search-result-form .search-submit:hover {
    background-color: #c58d87;
}
.elementor-shortcode{
    display: none;
}
.homepage-insta .elementor-shortcode{
    display: block !important;
}
.subscribe_button.ck_subscribe_button{
    display: flex;
    justify-content: center;
}
.custom_popup_form .subscribe_button.ck_subscribe_button::after{
    content: "";
}
.custom-popup input{
    background: #FAFAFA !important;
}
.instagram-gallery__button--follow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 30px 16px 30px !important;   /* ← pura padding shorthand normal state mein bhi set kar do (top right bottom left) */
    transition: padding 0.4s ease !important;   /* ← pura padding transition karo, sirf right nahi */
    overflow: hidden;
    text-decoration: none;
    gap: 10px;
    box-sizing: border-box !important;          /* padding border ke andar count ho */
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-family: "Source Sans Pro", Sans-serif;
    font-size: 16px !important;
}

/* Arrow */
.instagram-gallery__button--follow::after {
    content: "→";
    position: absolute;
    right: -1.8em;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: right 0.4s ease, opacity 0.4s ease;
    font-size: 1.3em;
    font-weight: bold;
    color: inherit;
}

/* Hover – ab pura padding same format mein change karo */
.instagram-gallery__button--follow:hover {
    padding: 16px 55px 16px 30px !important;    /* ← right zyada, baaki same – jump nahi hoga */
    background-color: #5e7a55 !important;
}

/* Arrow andar */
.instagram-gallery__button--follow:hover::after {
    right: 1em;
    opacity: 1;
}
.ck-form-2 .subscribe_button{
    background-color: #7C9473 !important;
}
.ck-form-2 .ck_form.ck_minimal{
    margin: 0 !important;
    max-width: 100% !important;
    border: none !important;
}
.ck-form-2 .ck_form.ck_minimal .ck_form_title{
    font-family: "Playfair Display", Sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #7C9473;
    margin: 0px 0px 30px !important;
}
.ck-form-2 .ck_form.ck_minimal p {
    padding: 0px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
}
.ck-form-2 .ck_form.ck_minimal .ck_subscribe_button, .ck-form-2 .ck_email_address{
    border-radius: 50px !important;
}
input.ck_email_address {
    padding: 12px 20px !important;
    border-radius: 999px !important;
    border: 1px solid #ccc !important;
    font-size: 1rem !important;
    max-width: 100%;
}
.ck-form-2 .ck_description {
    margin-bottom: 30px;
}
.ck-form-2 .ck_form.ck_minimal{
    background: #ffffff;
}

@media only screen and (max-width: 767px){
    .custom_popup_form .ck_subscribe_button{
        font-size: 16px !important;
    }
    .custom_popup_form .ck_form_heading{
        font-size: 18px !important;
    }
    .custom_popup_form .ck_input{
        font-size: 14px !important;
    }
    .single-post .mcg-grid{
        display: flex !important;
        flex-wrap: wrap;
    }
    .single-post .mcg-card {
        width: 45% !important;
    }
    .single-post .mytags .elementor-post-info__terms-list {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 1rem;
        gap: 10px;
    }
    .instagram-gallery-list[data-feed_layout=gallery]{
        gap: 25px !important;
    }
    .footer-links-1 .mcg-title{
        text-align: center;
    }
    .ck-form-2 .ck_form.ck_minimal .ck_form_title{
        font-size: 20px;
    }
    .ck-form-2 .ck_form.ck_minimal p{
        font-size: 15px;
    }
}
@media only screen and (min-width: 992px){
    .ck-form-2 .ck_subscribe_form{
        display: flex;
        flex-direction: row;
        align-content: space-around;
        gap: 10px;
    }
    .ck-form-2 .ck_email_field_group{
        width: 70%;
    }
    .ck-form-2 .subscribe_button{
        width: 30% !important;
    }


}