@import url('_globle.css');
@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
body {  transition: all 0.3s ease-in-out; }
#main_wrapper { flex: 1; }
.container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 2rem;padding-left: 2rem; max-width: 100%;}
.lang-btn-wrapper { position: fixed; top: 1rem; right: 1rem; z-index: 10; }
.lang-btn-wrapper .lang-btn { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; padding: 0 0.75rem; border-radius: 12px; border: 1px solid #e1e7ef; height: 2.25rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.lang-btn-wrapper .lang-btn svg { width: 1rem; height: 1rem; margin-right: 0.5rem; }
.lang-btn-wrapper .lang-btn:hover { background-color: var(--darkGreen); color: var(--white);  }
.full-sec-padding { padding: 6rem 0; }
.hero-sec { position: relative; overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 2; }
.hero-sec .bg-hero-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; z-index: -1; }
.hero-sec .bg-grad { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to right, hsl(163 28% 27% / .95), hsl(163 28% 27% / .7)) }
.hero-inner { max-width: 56rem; color: var(--white); }
.hero-inner .logo { margin-bottom: 2rem; }
.hero-inner .logo img { height: 3.5rem; }
.hero-sec .main-title { font-size: 3rem; line-height: 1; transition: all 1s ease-in-out; color: var(--white); margin-bottom: 1.5rem; animation: fade-in 1s ease-out;}
.hero-sec .subtitle { color: var(--white); font-size: 1.25rem; line-height: 1.75rem; opacity: 0.95; margin-bottom: 2rem; }
.hero-sec .text { color: var(--white); font-size: 1.125rem; line-height: 1.75rem; opacity: 0.9; margin-bottom: 3rem; }
.hero-sec .primary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; height: 2.75rem; border-radius: 0.375rem; background-color: var(--lightGreen); color: var(--white); font-weight: 600; font-size: 1.125rem; padding: 1.5rem 2rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.hero-sec .primary-btn svg {width: 1rem;height: 1rem;margin-left: 0.5rem;}
.hero-sec .primary-btn:hover { background-color: color-mix(in srgb, var(--lightGreen) 90%, transparent); box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.15), 0 6px 8px -2px rgba(0, 0, 0, 0.1); }
.hero-sec .primary-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--darkGreen), 0 0 0 4px var(--lightGreen); }
.hero-sec .primary-btn:disabled { pointer-events: none; opacity: 0.5; }
.why-us-sec .title-sec { margin: 0 auto 4rem; max-width: 42rem;}
.title-sec .subtitle { font-size: 1.25rem; line-height: 1.75rem; }
.why-us-content { max-width: 72rem; display: grid; gap: 2rem; }
.why-us-card { padding: 2rem; background-color: var(--white); border-radius: 0.75rem; border: 2px solid #e1e7ef; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.why-us-card:hover { border-color: var(--darkGreen); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.why-us-card .icon { margin-bottom: 1.5rem; }
.why-us-card .icon >img { width: 5rem; border-radius: 0.75rem; }
.counter-sec { background-image: linear-gradient(to bottom right, var(--darkGreen)); color: var(--white); }
.counter-sec .counter-inner { max-width: 64rem; display: grid; gap: 2rem; }
.counter-sec .counter-number { font-size: 3rem; line-height: 1; margin-bottom: 0.5rem; color: var(--lightGreen); font-weight: 700; }
.counter-sec .counter-text { font-size: 1.125rem; line-height: 1.75rem; opacity: 0.9; }
.contact-sec { background-color: var(--grayLight); }
.contact-sec .title-sec { margin: 0 auto 3rem; max-width: 34rem;}
.contact-sec .form_main { max-width: 48rem; margin: 0 auto; padding: 2rem; background-color: var(--white); border-radius: 0.75rem; border: 1px solid #e1e7ef; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.contact-sec .form_main .submit-main { position: relative; }
@media (min-width:576px){
    .hero-inner .logo img {  height: 5rem;}
}
@media (min-width:768px) {
	.hero-sec .main-title { font-size: 4.5rem; }
	.hero-inner .logo img { height: 6rem; }
	.hero-sec .subtitle { font-size: 1.5rem; line-height: 2rem; }
	.hero-sec .text { font-size: 1.25rem; line-height: 1.75rem; }
	.why-us-content { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.counter-sec .counter-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.contact-sec .form_main { padding: 3rem; }
}
@media (min-width: 1400px) {
    .container { max-width: 1400px;}
}