@charset "utf-8";
/* CSS Document */

/* CSS Document © 2026 Envinto */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Sora:wght@100..800&display=swap');

::-moz-selection{ background:#7b7d7f; color:var(--primary); text-shadow:none;}
::selection { background:#7b7d7f; color:var(--primary); text-shadow:none;}
*,
*:before, *:after{-webkit-box-sizing:  border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, textarea, input { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; outline:none; font-family:"Manrope", sans-serif;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body {color:#192939; background: #ffffff; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow:hidden; }
:root {overflow: hidden; overflow-y: scroll; --primary: #ffffff; --secondary:#013b6e; --global: #119ddf; }
a { text-decoration:none; transition:all 0.25s ease-out 0s; outline: none; box-shadow: none;}
a:hover{text-decoration: none;}
h1, h2, h3 , h4, h5, h6, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{font-family: "Sora", sans-serif;}
p, p span { font-family:"Manrope", sans-serif;}
img { border:0px;}
ol, ul, li{ list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
* {-webkit-appearance: none;}
::-webkit-input-placeholder {
  color:var(--primary-color);
}
::-moz-placeholder { 
  color:var(--primary-color);
}
:-ms-input-placeholder {
  color:var(--primary-color);
}
:-moz-placeholder {
  color:var(--primary-color);
}

section, header, footer {width: 100%; float: left;}

img{max-width: 100%; display: block;}

strong{font-weight: bold;}

.container{width: 94%; max-width: 1320px; margin: 0 auto;}



/* ----------header-wrapp---------- */
.header-wrapp { padding: 10px 0; position: relative; z-index: 9;}
.header-wrapp .header-row { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.header-wrapp .logo { width: 225px;}
.header-wrapp .header-menu {  width: auto; display: flex; flex-wrap: wrap; align-items: center;}
.header-wrapp .header-menu ul { width: auto; display: flex; flex-wrap: wrap;}
.header-wrapp .header-menu ul li { margin: 0 15px; font-size: 14px; font-weight: 600; }
.header-wrapp .header-menu ul li a { color: #192939;}
.header-wrapp .header-menu ul li a:hover { color: var(--global);}
.header-wrapp .header-btn {color: var(--primary);padding: 10px 22px 11px;font-size: 14px;font-weight: 600;transition: all .75s;overflow: hidden;position: relative;background: var(--global); border: 1px solid var(--global); margin: 0 0 0 15px;}
.header-wrapp .header-btn:hover { color: var(--global); background: none;}

.burger-btn {display: none;}
.overlay { display: none;}

.header-wrapp.sticky {position: fixed; z-index: 9; animation: .7s slide-down;background: #ffff;}

@keyframes slide-down {
  0% {
      transform: translateY(-100%)
  }

  100% {
      transform: translateY(0)
  }
}


/* ------------banner-wrapp-------------- */
.banner-wrapp { position: relative; padding: 70px 0;}
.banner-wrapp .bg {  width: 100%; position: absolute; height: 100%; top: 0; left: 0;}
.banner-wrapp .bg img { width: 100%; height: 100%; object-fit: cover;}
.banner-wrapp .banner-cont { position: relative; width: 50%; max-width: 578px;}
.banner-wrapp .bg:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, rgb(0 27 56 / 90%), #002341a6 42%, #0023410f 100%);}
.banner-wrapp h3 {  font-size: 12px;  color: var(--primary); font-weight: 600;  text-transform: uppercase; position: relative; padding-left: 40px; margin: 0 0 10px;}
.banner-wrapp h3:before { content: ""; position: absolute;  width: 30px; height: 2px;  background: var(--primary);  left: 0; top: 50%; transform: translateY(-50%);}
.banner-wrapp h1 { font-size: 58px; font-weight: 600; color: var(--primary);  margin: 0 0 20px;}
.banner-wrapp h1 span { color: var(--global); display: block;}
.banner-wrapp p { font-size: 16px; color: var(--primary); line-height: 1.56; margin: 0 0 20px;}
.banner-wrapp .banner-btns { width: 100%; display: flex; flex-wrap: wrap;  margin: 15px 0 20px;}
.banner-wrapp .banner-btn {  color: var(--primary); padding: 10px 22px 11px; font-size: 14px; font-weight: 600; transition: all .75s; overflow: hidden; position: relative; background: var(--global); border: 1px solid var(--global); margin: 0 10px 0 0;}
.banner-wrapp .banner-btn:hover {  background: none; color: var(--global);}
.banner-wrapp  .banner-btn1 { color: var(--global); padding: 10px 22px 11px; font-size: 14px; font-weight: 600; transition: all .75s; overflow: hidden; position: relative; background: var(--primary); border: 1px solid var(--primary);}
.banner-wrapp .banner-btn1:hover { background: none; color: var(--primary);}
.banner-wrapp .tag { width: 100%; display: flex; flex-wrap: wrap; gap: 5px; font-size: 12px; color: var(--primary); align-items: center;}
.banner-wrapp .tag img { width: 20px;}



/* ----------feature-wrapp----------- */
.feature-wrapp {padding: 35px 0; background: #eef8fd; border-bottom: 1px solid #d3e0e8;}
.feature-wrapp .feature-row {width: 100%; display: flex; flex-wrap: wrap; align-items: center;}
.feature-wrapp .feature-col1 { width: 25%; display: flex; flex-wrap: wrap; align-items: center; border-left: 1px solid #d3e0e8; padding: 0 20px;}
.feature-wrapp .feature-col1 img { width: 30px; margin: 0 10px 0 0;}
.feature-wrapp .feature-col1 span {flex: 1;}
.feature-wrapp h3 { font-size: 14px; font-family: "Manrope", sans-serif; font-weight: 700; margin: 0 0 6px;}
.feature-wrapp p { font-size: 12px;}
.feature-wrapp .feature-col1:first-child {border: none;}




/* ----------about-wrapp--------- */
.about-wrapp {padding: 70px 0;}
.about-wrapp .about-row {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.about-wrapp .about-col1 { width: 48%;}
.about-wrapp .about-col2 { width: 48%;}
.about-wrapp h3 { font-size: 12px; color: var(--global); font-weight: 600; text-transform: uppercase; position: relative; padding-left: 40px; margin: 0 0 10px;}
.about-wrapp h3:before { content: "";  position: absolute; width: 30px; height: 2px; background: var(--global); left: 0; top: 50%; transform: translateY(-50%);}
.about-wrapp h2 { font-size: 36px; font-weight: 600; color: var(--secondary);}
.about-wrapp h2 span { display: block;}
.about-wrapp p { font-size: 14px; line-height: 1.56; margin: 0 0 20px;}
.about-wrapp  ul { display: flex;  flex-wrap: wrap;}
.about-wrapp ul li { font-size: 12px; font-weight: 700; color: var(--secondary); margin: 0 20px 0 0; padding-left: 22px; background: url(../images/check.svg) no-repeat left center / 16px;}





/* -----------do-wrapp----------- */
.do-wrapp {padding: 70px 0 40px; background: #eef8fd;}
.do-wrapp .do-head {width: 100%;display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;  margin: 0 0 30px;}
.do-wrapp h3 { font-size: 12px; color: var(--global); font-weight: 600; text-transform: uppercase; position: relative; padding-left: 40px; margin: 0 0 10px;}
.do-wrapp h3:before { content: ""; position: absolute; width: 30px; height: 2px; background: var(--global); left: 0; top: 50%; transform: translateY(-50%);}
.do-wrapp h2 { font-size: 36px; font-weight: 600; color: var(--secondary); margin: 0 0 20px;}
.do-wrapp p { font-size: 14px; line-height: 1.56;}
.do-wrapp .do-btn { font-size: 14px; color: var(--global);  display: flex; align-items: center; font-weight: 500; position: relative;}
.do-wrapp .do-btn img { width: 14px; margin-left: 10px;}
.do-wrapp .do-btn span{position: relative; display: inline-block;}
.do-wrapp .do-btn span:after { content: "";  position: absolute; width: 100%; height: 1px; background: var(--global); left: 0; bottom: 0; transition: all .25s ease-in-out; opacity: 0;}
.do-wrapp .do-btn:hover span:after { opacity: 1;}
.do-wrapp .do-col1 { width: 32%; margin: 0 2% 30px 0; background: var(--primary); border: 1px solid #d3e0e8; padding: 25px;}
.do-wrapp .do-col1:nth-child(3n) {  margin-right: 0;}
.do-wrapp .do-col1 .do-col1-head { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0 0 22px;}
.do-wrapp .do-col1 .do-col1-head img { width: 35px;}
.do-wrapp .do-col1  .count { color: #d3e0e8; font-size: 26px; font-family: "Sora", sans-serif; font-weight: 500;}
.do-wrapp  h4 { font-size: 14px; color: var(--secondary); font-weight: 500; margin: 0 0 8px;}
.do-wrapp .do-row { width: 100%; display: flex; flex-wrap: wrap;}


/* --------------portfolio-wrapp----------- */
.portfolio-wrapp {padding: 70px 0;}
.portfolio-wrapp .portfolio-head { width: 100%; display: flex;flex-wrap: wrap; align-items: end; justify-content: space-between; margin: 0 0 30px;}
.portfolio-wrapp  .portfolio-head-left { width: 55%;}
.portfolio-wrapp h3 { font-size: 12px;color: var(--global); font-weight: 600; text-transform: uppercase; position: relative; padding-left: 40px; margin: 0 0 10px;}
.portfolio-wrapp h3:before { content: ""; position: absolute; width: 30px; height: 2px; background: var(--global); left: 0; top: 50%; transform: translateY(-50%);}
.portfolio-wrapp h2 { font-size: 36px; font-weight: 600; color: var(--secondary); margin: 0 0 20px;}
.portfolio-wrapp h2 span { display: block;}
.portfolio-wrapp p { font-size: 14px; line-height: 1.56;}
.portfolio-wrapp .portfolio-btn { font-size: 14px; color: var(--global); display: flex; align-items: center; font-weight: 500; position: relative;}
.portfolio-wrapp .portfolio-btn img { width: 14px; margin-left: 10px;}
.portfolio-wrapp .portfolio-btn  span { position: relative; display: inline-block;}
.portfolio-wrapp .portfolio-btn span:after { content: ""; position: absolute; width: 100%; height: 1px; background: var(--global); left: 0; bottom: 0; transition: all .25s ease-in-out; opacity: 0;}
.portfolio-wrapp .portfolio-btn:hover span:after { opacity: 1;}
.portfolio-wrapp .portfolio-slider { width: 100%;}
.portfolio-wrapp .slick-track { display: flex; flex-wrap: wrap;}
.portfolio-wrapp .slick-track .slick-slide { height: inherit;}
.portfolio-wrapp .slick-track .slick-slide > div { width: 94%; margin: 0 auto; height: 100%;}
.portfolio-wrapp  .portfolio-col1 { width: 100%; border: 1px solid #d3e0e8; height: 100%;}
.portfolio-wrapp .portfolio-col1 .portfolio-img{width: 100%; overflow: hidden; position: relative;}
.portfolio-wrapp .portfolio-col1 .portfolio-img img { width: 100%; transition: all .25s ease-in-out;}
.portfolio-wrapp .portfolio-col1:hover .portfolio-img img { transform: scale(1.08);}
.portfolio-wrapp .portfolio-col1  .portfolio-cont { width: 100%; padding: 25px 20px;}
.portfolio-wrapp h6 { font-size: 10px; color: var(--global); margin: 0 0 10px; font-family: "Manrope", sans-serif; font-weight: 600;}
.portfolio-wrapp h4 { font-size: 16px; color: var(--secondary); margin: 0 0 12px;}
.portfolio-wrapp .portfolio-col1 p { margin: 0 0 20px;}



/* -----------process-wrapp----------- */
.process-wrapp {padding: 70px 0; background: #eef8fd;}
.process-wrapp h3 {font-size: 12px; color: var(--global); font-weight: 600; text-transform: uppercase; position: relative; padding-left: 40px; margin: 0 0 10px;}
.process-wrapp h3:after { content: ""; position: absolute; width: 30px; height: 2px; background: var(--global); left: 0; top: 50%; transform: translateY(-50%);}
.process-wrapp h2 { font-size: 36px; font-weight: 600; color: var(--secondary); margin: 0 0 20px;}
.process-wrapp .process-row { width: 100%; display: flex; flex-wrap: wrap;}
.process-wrapp .process-col1 { width: 23.5%; margin: 0 2% 0 0; border-top: 1px solid #d3e0e8; padding: 20px 0 0;}
.process-wrapp .process-col1:last-child { margin-right: 0;}
.process-wrapp .count { font-size: 10px; color: var(--global); margin: 0 0 10px; font-family: "Manrope", sans-serif; font-weight: 600; display: block;}
.process-wrapp h4 { font-size: 16px; color: var(--secondary); margin: 0 0 12px;}
.process-wrapp p {font-size: 14px; line-height: 1.56;}


/* ------------contact-wrapp----------- */
.contact-wrapp { padding: 70px 0; background: var(--secondary);}
.contact-wrapp .contact-row { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.contact-wrapp  .contact-col1 { width: 48%;}
.contact-wrapp .contact-col2 { width: 48%;}
.contact-wrapp h3 { font-size: 12px; color: var(--global);  font-weight: 600; text-transform: uppercase;  position: relative;  padding-left: 40px; margin: 0 0 10px;}
.contact-wrapp h3:after { content: ""; position: absolute;  width: 30px; height: 2px; background: var(--global); left: 0; top: 50%; transform: translateY(-50%);}
.contact-wrapp  h2 { font-size: 36px; font-weight: 600; color: var(--primary); margin: 0 0 20px;}
.contact-wrapp p { font-size: 14px; line-height: 1.56; color: #ebebeb; margin: 0 0 30px;}
.contact-wrapp .contact-info { width: 100%; margin: 0 0 20px;}
.contact-wrapp .contact-info a { display: flex; color: var(--primary); font-size: 14px; line-height: 1.56;}
.contact-wrapp .contact-info a .icon { width: 18px; margin: 2px 14px 0 0;}
.contact-wrapp .contact-info a:hover { color: var(--global);}
.contact-wrapp .contact-form { width: 100%;}
.contact-wrapp .contact-form .text-fields { width: 100%; display: flex;  flex-wrap: wrap; justify-content: space-between;}
.contact-wrapp .contact-form .text-fields .text-field { width: 48%; margin: 0 0 10px;}
.contact-wrapp .contact-form label { display: block; font-size: 12px; color: var(--primary); margin: 0 0 5px;}
.contact-wrapp .contact-form input { width: 100%; height: 44px; padding: 10px 15px; font-size: 14px; margin: 0 0 10px; background: var(--primary);}
.contact-wrapp .contact-form input::placeholder { color: #a6a6a6;}
.contact-wrapp .contact-form  select { width: 100%; height: 44px; padding: 10px 15px; font-size: 14px; margin: 0 0 10px; background: var(--primary);font-family: "Manrope", sans-serif;}
.contact-wrapp .contact-form select::placeholder { color: #a6a6a6;}
.contact-wrapp .contact-form .text-fields .text-field:last-child { width: 100%;}
.contact-wrapp .contact-form textarea { width: 100%; height: 126px; padding: 10px 15px; font-size: 14px; margin: 0 0 10px; background: var(--primary);}
.contact-wrapp .contact-form textarea::placeholder { color: #a6a6a6;}
.contact-wrapp .contact-form .contact-btn { color: var(--primary); padding: 10px 22px 11px; font-size: 14px; font-weight: 600; transition: all .75s; overflow: hidden;position: relative; background: var(--global); border: 1px solid var(--global); font-family: "Manrope", sans-serif; cursor: pointer;}
.contact-wrapp .contact-form .contact-btn:hover { background: none; color: var(--global);}



/* -------------footer-wrapp----------- */
.footer-wrapp {padding: 50px 0 10px;}
.footer-wrapp .footer-row { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.footer-wrapp .footer-col1 { width: 38%;}
.footer-wrapp  .footer-logo { width: 220px; margin: 0 0 20px;}
.footer-wrapp .social-icons { width: 100%; display: flex; flex-wrap: wrap; gap: 10px;}
.footer-wrapp .social-icons a { width: 32px; height: 32px; position: relative; background: #eef8fd; padding: 6px; border: 1px solid #eef8fd; border-radius: 50%;}
.footer-wrapp .social-icons a img { width: 100%; height: 100%; transition: all .25s ease-in-out;}
.footer-wrapp .social-icons a  .icon { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: all .25s ease-in-out; opacity: 0; padding: 6px;}
.footer-wrapp .social-icons a:hover > img { opacity: 0;}
.footer-wrapp .social-icons a:hover .icon { opacity: 1;}
.footer-wrapp p { font-size: 14px; line-height: 1.56; margin: 0 0 20px;}
.footer-wrapp h3 { font-size: 14px; font-weight: 600; color: var(--secondary); margin: 0 0 8px;}
.footer-wrapp ul { width: 100%;}
.footer-wrapp ul li { font-size: 14px; line-height: 1.56; margin: 0 0 7px;}
.footer-wrapp ul li a { color: var(--seondary);}
.footer-wrapp ul li a:hover { color: var(--global);}
.footer-wrapp .footer-col3 { width: 25%;}
.footer-wrapp .footer-bottom { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px 0 0; margin: 20px 0 10px; border-top: 1px solid #d3e0e8;}
.footer-wrapp .footer-bottom p { font-size: 12px; margin: 0 0 0;}
.footer-wrapp .footer-bottom p a { color: var(--global);}
.footer-wrapp .footer-bottom p a:hover { color: var(--secondary);}