@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
/*font-family: "Poppins", sans-serif;*/
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
.site textarea:focus,
.site .button:focus,
button:focus,
input[type=submit]:focus,
input[type=reset]:focus,
.wp-block-search .wp-block-search__button:focus,
.wp-block-button .wp-block-button__link:focus,
.wp-block-file a.wp-block-file__button:focus { outline: none; }
html { font-size: 100%; scroll-behavior: smooth; }
* { outline: none; margin: 0px; padding: 0px; box-sizing: border-box; }
img { outline: none; }
body { font-family: "Montserrat", sans-serif; font-size: 1em; color: #222222; }
h1,
h2,
h3,
h4,
h5,
h6 { font-family: "Urbanist", sans-serif; font-weight: 300; }
p { line-height: 30px; }
ul,
ol,
li { margin: 0px; padding: 0px; }
.container { width: 1300px; margin: 0 auto; }
.flex-container { display: flex; flex-wrap: wrap; }
.clear { clear: both; }
.olive-but,
.cfs-hyperlink { background: #198B07; text-decoration: none; padding: 18px 20px; display: inline-flex; border-radius: 8px; line-height: 1; color: #fff; font-weight: 600; font-size: 1em; align-items: center; position: relative; z-index: 1; cursor: pointer; }
.olive-but:before,
.cfs-hyperlink:before { content: ""; border: solid 1px #198B07; position: absolute; left: -8px; top: 8px; width: 100%; height: 100%; z-index: -1; border-radius: 8px; }
.olive-but:after,
.cfs-hyperlink:after { content: ""; width: 12px; height: 12px; background: url(../../images/ind-images/arrow-white.svg); margin-left: 8px; background-repeat: no-repeat; background-size: 100%; }
.olive-but:hover,
.cfs-hyperlink:hover { animation-name: bounce; -moz-animation-name: bounce; }
 @keyframes bounce { 0%, 100%, 20%, 50%, 80% {
 -webkit-transform: translateY(0);
 -ms-transform:     translateY(0);
 transform:         translateY(0)
}
 40% {
 -webkit-transform: translateY(-30px);
 -ms-transform:     translateY(-30px);
 transform:         translateY(-30px)
}
 60% {
 -webkit-transform: translateY(-15px);
 -ms-transform:     translateY(-15px);
 transform:         translateY(-15px)
}
}
.olive-title { font-size: 3em; line-height: 1.3; }
.olive-subtitle { font-size: 1.1em; line-height: 1.3; letter-spacing: 2px; color: #25ab0f; margin-bottom: 10px; text-transform: uppercase; font-weight: 300; }
/*Header*/
.header { width: 100%;  padding: 12px 0; position: absolute; top: 0; left: 0; z-index: 2; }
.sticky .header { position: fixed; background: #083001; }
.header .flex-container { justify-content: space-between; }
.logo img { width: 120px; display: flex; }
.header .olive-but a { text-decoration: none; color: #000; }
.header .olive-but:before { display: none; }
/*Hero-Banner*/
.banner { background: #222222; padding: 9em 0 6em 0; color: #fff; background: radial-gradient(80% 25% at 50% 7.5%, #0a4201 0%, rgb(4 28 0) 100%); position: relative; overflow: hidden; z-index: 1; }
.banner:before { background: url(../../images/ind-images/banner-line.png); width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ""; z-index: -1; }
.banner .flex-container { align-items: center; gap: 4em; }
.banner h2 span { color: #41b52f; }
.banner strong {
    width: 100%;
    font-size: 1.2em;
    line-height: 36px;
    display: inline-block;
    font-weight: normal;
    position: relative;
    padding: 0 1.5em;
}
.banner strong:before { position: absolute; left: 0; top: 14px; content: "["; background-repeat: no-repeat; background-position: top center; z-index: -1; font-size: 3em; font-weight: 200; }
.banner strong:after { position: absolute; right: 0; top: 14px; content: "]"; background-repeat: no-repeat; background-position: top center; z-index: -1; font-size: 3em; font-weight: 200; }
.banner .banner-left { flex: 0 1 calc((55% / 1) - 2em); }
.banner-left h2 { margin-bottom: 60px; }
.banner-form { flex: 0 1 calc((33% / 1) - 2em); background: #fff; color: #000; position: relative; padding: 2em 2em; margin-left: auto; border-radius: 10px; overflow: hidden; z-index: 1; }
.banner-form:before { width: 200px; height: 200px; background: #0000000f; position: absolute; left: 76%; top: 76%; content: ""; background-size: 100%; border-radius: 100%; z-index: -1; }
.banner-form:after { width: 240px; height: 240px; border: solid 10px #0000000f; position: absolute; left: 70%; top: 72%; content: ""; background-size: 100%; border-radius: 100%; z-index: -1; }
.banner-form ul li { display: inline-block; width: 100%; position: relative; }
.banner-form ul li input,
 .banner-form ul li textarea { display: inline-block; width: 100%; padding: 18px 0 5px 5px; border: none; margin-bottom: 10px; background: no-repeat; border-bottom: solid #e9e9e9 1px; font-size: 15px; }
.banner-form ul li textarea { height: 80px; }
.banner-form ul li input.wpcf7-submit { background: #44d62c; padding: 18px 36px; font-weight: normal; border-radius: 8px; line-height: 1; font-size: 1em; position: relative; z-index: 1; margin: 0px; border: none; color: #000 !important; }
.banner-form ul li:last-child { width: auto; }
span.wpcf7-spinner { position: absolute; right: 0; }
 .banner-form ul li input::-webkit-input-placeholder, .banner-form ul li textarea::-webkit-input-placeholder { /* Chrome */
 color: #000;
}
 .banner-form ul li input:-ms-input-placeholder, .banner-form ul li textarea:-ms-input-placeholder { /* IE 10+ */
 color: #000;
}
 .banner-form ul li input::-moz-placeholder, .banner-form ul li textarea::-moz-placeholder { /* Firefox 19+ */
 color: #000;
 opacity: 1;
}
 .banner-form ul li input:-moz-placeholder, .banner-form ul li textarea:-moz-placeholder { /* Firefox 4 - 18 */
 color: #000;
 opacity: 1;
}
.banner-form h3 { padding: 0px 0 10px 0; font-size: 1.35em; text-transform: capitalize; font-weight: 400; letter-spacing: 1px; }
.banner-form h4 { text-transform: uppercase; letter-spacing: 2px; font-weight: 300; }
/*About-clients*/
.about { padding: 6em 0 8em 0; background: #F1F6F5; position: relative; overflow: hidden; z-index: 1; }
.about:before { width: 340px; height: 340px; background: #0000000f; position: absolute; left: -30px; top: 66%; content: ""; background-size: 100%; border-radius: 100%; z-index: -1; }
.about:after { width: 380px; height: 380px; border: solid 10px #0000000f; position: absolute; left: -48px; top: 63%; content: ""; background-size: 100%; border-radius: 100%; z-index: -1; }
.about .flex-container { flex-wrap: nowrap; gap: 4em; }
.about .olive-title { font-size: 3em; }
.about .flex-container > div { flex: 1 1 calc((50% / 1) - 2em); }
.about .flex-container > div p { padding-bottom: 10px; }
.about .flex-container aside { flex: 1 1 calc((50% / 1) - 2em); }
.about-slider .slick-slide { border-radius: 10px; text-align: center; }
.about-slider .slick-list { margin: -15px; }
.about-slider .slick-slide strong { font-size: 6em; display: inline-block; width: 100%; font-weight: 900; color: #44d62c; border-bottom: solid #44d62c; margin-bottom: 20px; background: -webkit-linear-gradient(0deg, #a1d62c 0%, #44d62c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.about-slider .slick-slide h4 { font-size: 1.4em; color: #4a4a4a; font-weight: 500; margin-top: 15px; position: relative; padding-bottom: 15px; margin-bottom: 15px; line-height: 1.4; }
.about-slider .slick-slide h4:before { content: ""; background: #198B07; position: absolute; bottom: 0; left: 0; border-radius: 10px; width: 50px; height: 4px; }
.about-slider .slick-slide p { font-size: 1.1em; margin: 10px 0 16px 0; display: inline-block; font-family: "Urbanist", sans-serif; }
.about-slider .slick-slide > div { background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 7px, transparent 7px) 0% 0%/8px 8px no-repeat, radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 7px, transparent 7px) 100% 0%/8px 8px no-repeat, radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 7px, transparent 7px) 0% 100%/8px 8px no-repeat, radial-gradient(circle at 0 0, #ffffff 0, #ffffff 7px, transparent 7px) 100% 100%/8px 8px no-repeat, linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 2px) calc(100% - 16px) no-repeat, linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 2px) no-repeat, linear-gradient(#e3e3e3 0%, #ffffff 100%); border-radius: 10px; padding: 1.5em; text-align: left; }
/*Work*/

.work-min { padding: 6em 0; position: relative; }
.work-min .work-title { margin-bottom: 4em; text-align: center; }
.work-grid { position: relative; margin-bottom: 2em; position: sticky; top: 0; }
.work-grid:nth-child(2) { top: 4em; }
.work-grid:nth-child(3) { top: 6em; }
.work-grid:nth-child(odd) .work-right { right: auto; left: 5%; }
.work-grid:last-child { margin-bottom: 0; }
.work-img img { border-radius: 30px; width: 100%; }
.work-right { position: absolute; top: 57%; right: 5%; color: #fff; transform: translateY(-50%); width: 45%; }
.work-right h3 { font-size: 2.5em; font-weight: 400; }
.work-right p { padding: 6px 0 14px 0; font-size: 1.2em; width: 100%; line-height: 1.6; font-weight: 300; }
.work-right ul { display: flex; gap: 1em; margin-top: 1em; }
.work-right ul li { display: inline-block; text-decoration: none; display: inline-block; color: #fff; border: solid 1px; padding: 6px 20px; border-radius: 30px; }
.work-right ul li:hover { background: #198b07; border: solid 1px #198b07; cursor: pointer; }
/*CTA*/
.cta { text-align: center; padding-bottom: 6em; position: relative; }
.cta .olive-title { width: 63%; margin: 0 auto; }
.cta:before { background: url(../../images/uae-images/line.svg); width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ""; background-repeat: no-repeat; background-position: top center; }
.cta span { text-transform: uppercase; }
.cta p { width: 50%; margin: 20px auto 40px auto; }
/*services*/
.services-min { text-align: center; padding: 6em 0; background: #000; background: radial-gradient(80% 95% at 50% 8.5%, #0a4201 0%, rgb(4 28 0) 100%); color: #fff; position: relative; overflow: hidden; z-index: 1; }
.services-min:before { background: url(../../images/ind-images/line.svg); width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ""; background-repeat: no-repeat; background-position: top center; z-index: -1; }
.services-min:after { right: auto; top: auto; left: -6%; bottom: -8%; }
.services-min .flex-container { margin-top: 3em; }
.service-grid { padding: 2em; border-right: solid 1px #596c35; flex: 1 1 calc((100% / 3) - 0em); text-align: left; border-bottom: solid 1px #596c35; }
.service-grid:last-child,
.service-grid:nth-child(3) { border-right: none; }
.service-grid:nth-child(4),
.service-grid:nth-child(5),
.service-grid:nth-child(6) { border-bottom: none; }
.service-grid h3 { font-size: 1.8em; margin-bottom: 15px; }
.service-grid p { font-size: 1.1em; line-height: 1.8; }
/**/
 
.success-stories { padding: 6em 0; background: #F1F6F5; display: inline-block; width: 100%; }
.success-stories .flex-container { gap: 3em; }
.success-stories .container { width: 80%; }
.stories-grid { flex: 1 1 calc((100% / 3) - 3em); display: flex; align-items: center; border-radius: 20px; flex-wrap: wrap; flex-direction: column; }
.stories-grid .olive-title { font-size: 3em; text-transform: uppercase; margin: 20px 0; }
.stories-grid aside { padding: 2em; height: 100%; background: #fff; border-radius: 10px; display: flex; flex-wrap: wrap; flex-direction: column; position: relative; }
.stories-grid aside:before { content: ""; background: url(../../images/ind-images/quote.png); position: absolute; left: 12%; top: -22px; width: 56px; height: 41px; }
.stories-grid:first-child aside { background: none !important; }
.stories-grid:first-child aside:before,
.stories-grid:nth-child(3) aside:before,
.stories-grid:nth-child(5) aside:before { display: none; }
.stories-grid p { font-size: 1.1em; line-height: 1.9; }
.stories-grid h3 { padding: 30px 0 0px 0; font-weight: 400; font-size: 1.3em; margin-top: auto; text-transform: uppercase; letter-spacing: 1px; }
.stories-grid .cfs-hyperlink { margin-top: 2em; }
.work-right p { padding: 6px 0 14px 0; font-size: 1.4em; width: 100%; line-height: 1.6; font-weight: 300; }
.stories-grid:first-child p { font-size: 2em; line-height: 1.2; }
.stories-grid:first-child h3 { font-size: 1.1em; font-weight: normal; line-height: 1.8; color: #000; text-transform: none; margin-top: 0; }
.stories-grid:nth-child(3) aside,
 .stories-grid:nth-child(5) aside { padding: 0px; overflow: hidden; height: 100%; border: none; }
.stories-grid:nth-child(3) img,
 .stories-grid:nth-child(5) img { height: 100%; object-fit: cover; display: block; }
.stories-grid:nth-child(3) figure,
 .stories-grid:nth-child(5) figure { height: 100% }
/*why-us*/
.why-us { padding: 6em 0; color: #fff; background: #000; background: radial-gradient(80% 95% at 50% 8.5%, #0a4201 0%, rgb(4 28 0) 100%); position: relative; z-index: 1; }
.why-us:before { background: url(../../images/ind-images/line.svg); width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ""; background-repeat: no-repeat; background-position: top center; z-index: -1; }
.why-us .flex-container:first-child { flex-wrap: nowrap; margin-bottom: 4em; }
.why-us .flex-container { gap: 2em; }
.why-us-grid { flex: 1 1 calc((100% / 2) - 3em); display: flex; border: solid 1px #5D5D5D; padding: 1.5em; border-radius: 12px; flex-wrap: wrap; }
.why-us-grid a { color: #20cb05; text-decoration: none; text-transform: capitalize; }
.why-us-grid aside { width: 100%; display: flex; align-items: center; justify-content: space-between; padding-right: 15px; }
.why-us-grid figure { position: relative; }
.why-us-grid figure:before { content: ""; position: absolute; background: #198b0782; width: 100%; height: 100%; border-radius: 100%; top: 10px; left: 11px; z-index: -1; }
.why-us-grid img { width: 50px; }
.why-us-grid h3 { font-size: 1.4em; font-weight: 500; }
.why-us-grid p { padding: 10px 0 5px 0; }
.why-us .olive-title { font-size: 3em; color: #41b52f; flex: 1 1 calc((100% / 1) - 3em); }
/*cta-2*/
.cta-2 { padding: 4em 0; text-align: center; color: #fff; background: #000; background: radial-gradient(80% 95% at 50% 8.5%, #0a4201 0%, rgb(4 28 0) 100%); position: relative; z-index: 1; }
.cta-2:before { background: url(../../images/ind-images/line.svg); width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ""; background-repeat: no-repeat; background-position: top center; z-index: -1; }
.cta-2 p { font-size: 3em; line-height: 1.2; margin: 10px auto 30px auto; color: #41b52f; font-weight: 300; width: 40%; text-transform: capitalize; }
/*portfolio*/
.portfolio { padding: 4em 0; text-align: center; }
.portfolio .olive-title { width: 45%; margin: 0 auto; }
.portfolio-slider { margin-top: 4em; }
.portfolio-grid h4 { display: table; text-align: center; margin: 20px auto; font-size: 1.25em; }
.portfolio-grid figure { height: 680px; overflow: hidden; box-shadow: #00000040 5px 5px 15px -5px; position: relative; -webkit-transition: all 2s ease; transition: all 2s ease; }
.portfolio-grid figure img { width: 100%; position: absolute; -webkit-transition: all 1s ease; transition: all 2s ease; top: 0; }
.portfolio-grid figure:hover img { -webkit-transform: translateY(-100%); transform: translateY(-100%); top: 100% }
/*footer*/
.footer-cta { padding: 4em 0; text-align: center; color: #fff; background: #000; background: radial-gradient(80% 95% at 50% 8.5%, #0a4201 0%, rgb(4 28 0) 100%); position: relative; z-index: 1; }
.footer-cta:before { background: url(../../images/ind-images/line.svg); width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ""; background-repeat: no-repeat; background-position: top center; z-index: -1; }
.footer-cta h2 { font-weight: 300; margin-bottom: 15px; position: relative; }
span.wpcf7-spinner { position: absolute; }
.about-slider { margin-top: 5.5em; }
.footer { text-align: center; background: #000; color: #fff; padding: 10px 0; }
.grecaptcha-badge { z-index: 9; }
