/*
Theme Name: hello Elementors
Author: 
Description: Your description goes here
Version: 1.0
Template: hello-elementor

This is the child theme for Hello Elementor theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

/* .button-01 {
                    --b: 3px;
                    --s: .55em;
                    --color: #373B44;
                    width: 200px;
                    padding: calc(.2em + var(--s)) calc(.4em + var(--s));
                    color: var(--color);
                    --_p: var(--s);
                    background: conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0) var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
                    transition: .3s linear, color 0s, background-color 0s, padding 0.3s ease;
                    outline: var(--b) solid #0000;
                    outline-offset: .6em;
                    border: 0;
                    user-select: none;
                    -webkit-user-select: none;
                    touch-action: manipulation;
                    text-align: center;
                }

                .button-01:hover, .button-01:focus-visible {
                    --_p: 0px;
                    outline-color: var(--color);
                    outline-offset: .05em;
                    padding: calc(.2em + var(--s) - 5px) calc(.4em + var(--s) - 5px);
                    transform: scale(0.95);
                    background-color: #59D2F3 !important;
                }

                .button-01:active {
                    background: #59D2F3;
                    color: #fff;
                }
 .button-02 {
                    --b: 3px;
                    --s: .55em;
                    --color: #fff;
                    width: 200px;
                    padding: calc(.2em + var(--s)) calc(.4em + var(--s));
                    color: var(--color);
                    --_p: var(--s);
                    background: conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0) var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
                    transition: .3s linear, color 0s, background-color 0s, padding 0.3s ease;
                    outline: var(--b) solid transparent;
                    outline-offset: .6em;
                    border: 0;
                    user-select: none;
                    -webkit-user-select: none;
                    touch-action: manipulation;
                    text-align: center;
                }

                .button-02:hover, .button-02:focus-visible {
                    --_p: 0px;
                    outline-color: white;
                    outline-offset: .05em;
                    padding: calc(.2em + var(--s) - 5px) calc(.4em + var(--s) - 5px);
                    transform: scale(0.95);
                    background-color: #59D2F3 !important;
                }

                .button-02:active {
                    background: #59D2F3;
                    color: #fff;
                } */
.fourth-btn .elementor-button, .hero-btn{
  box-sizing: border-box;
  background-color: transparent !important;
  border: 2px solid #fff !important;
  border-radius: 0.6em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  padding: .7em 1em 0.5em !important;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  transition: background-position 800ms ease-in-out,
    color 300ms ease-in-out;
}

.fourth-btn .elementor-button, .hero-btn{
  background-image: linear-gradient(45deg, #fff 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
}
.fourth-btn .elementor-button:hover, .hero-btn:hover{
  background-position: 0;
  color:#000;  
  transition-delay: 0ms, 500ms;  
  
}

.fourth-btn-black .elementor-button{
  box-sizing: border-box;
  background-color: transparent !important;
  border: 2px solid #000 !important;
  border-radius: 0.6em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  padding: .7em 1em 0.5em !important;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  transition: background-position 800ms ease-in-out,
    color 300ms ease-in-out;
}

.fourth-btn-black .elementor-button{
  background-image: linear-gradient(45deg, #000 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
}
.fourth-btn-black .elementor-button:hover{
  background-position: 0;
  color:#fff !i;  
  transition-delay: 0ms, 500ms;  
  
}
/* #menu-main-new-menu > li > a.ekit-menu-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: #ffffff;
  transition: width 0.3s ease;
}

#menu-main-new-menu > li > a.ekit-menu-nav-link:hover::after,
#menu-main-new-menu > li.current-menu-item > a.ekit-menu-nav-link::after,
#menu-main-new-menu > li > a.ekit-menu-nav-link.active-nav::after {
  width: 100%;
} */

.footer-main svg.ekit-svg-icon.icon-arrow-point-to-down {
    rotate: -90deg;
}
.footer-main li.elementor-icon-list-item:hover {
    letter-spacing: .5px;
}
.footer-main li.elementor-icon-list-item {
    transition: 0.3s;
}

/* FORM CARD */
.contact-form-wrap {
  max-width: 720px;
  padding: 40px 40px 1px;
  background: linear-gradient(145deg, #ffffff, #f4f6ff);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  position: relative;
border-radius:20px 0px 0px 20px;
}
.step-sec .elementor-element {
    background: linear-gradient(145deg, #ffffff, #f4f6ff);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}
.step-sec .elementor-icon-box-wrapper {
    padding: 20px;
}
/* FORM TITLE LINE EFFECT */
.contact-form-wrap::before {
  content: "Get in Touch";
  position: absolute;
  top: -18px;
  left: 30px;
  background: #0505A9;
  color: #fff;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 14px;
  letter-spacing: 1px;
}

/* LABEL */
.contact-form-wrap label {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* INPUT FIELD */
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap select,
.contact-form-wrap textarea {
  width: 100%;
  padding: 14px 16px;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 15px;
  background: #fff;
  transition: all 0.3s ease;
}

/* FOCUS EFFECT */
.contact-form-wrap input:focus,
.contact-form-wrap select:focus,
.contact-form-wrap textarea:focus {
  border-color: #0505A9;
  box-shadow: 0 0 0 4px rgba(5, 5, 169, 0.15);
  outline: none;
}

/* TEXTAREA HEIGHT */
.contact-form-wrap textarea {
  height: 120px;
}

/* SUBMIT BUTTON */
.contact-form-wrap input[type="submit"] {
  margin-top: 10px;
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #0505A9, #2f2fff);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* BUTTON HOVER */
.contact-form-wrap input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(5, 5, 169, 0.4);
}

/* SUCCESS MESSAGE */
.contact-form-wrap .wpcf7-mail-sent-ok {
  background: #e7fbe9;
  color: #1b7f36;
  padding: 12px;
  border-radius: 8px;
  border-left: 4px solid #1b7f36;
}

/* ERROR MESSAGE */
.contact-form-wrap .wpcf7-validation-errors {
  background: #fff1f1;
  color: #b91c1c;
  padding: 12px;
  border-radius: 8px;
  border-left: 4px solid #b91c1c;
}

.contact-form-wrap label {
    width: 100%;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .contact-form-wrap {
    padding: 25px;
    margin: 30px 0px;
  }
#menu-main-new-menu > li > a.ekit-menu-nav-link::after{
	background:transparent !important;	
}	
}