@import url('fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Londrina+Sketch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{
    margin:	0% 0% 0% 0%;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-size:99%;
}
/* Project Variables */
:root{
    --blue: rgb(68, 127, 219);
    --pale-blue:#5594fa;
    --dark:#111517;
    --grey:#858585;
    --white:#FFF;
    --black: #000000;
}
html, body{
    scroll-behavior: smooth;
    font-family: "Inter", sans-serif;
    width:100%;
    height:100%;
    font-size: 16px;
    transition: all .5s ease;
}
.reveal-type{
    overflow: hidden;
}

h1,h2,h3{font-weight:600;}
.h3, h3 {font-size: 1.40rem;}
h5{margin-bottom:0;}
/* ---------------
    NAVIGATION BAR
-------------------*/
.rw0{margin-left:0; margin-right:0;}
.rw1{margin-right: -5px; margin-left: -5px;}
.lr{padding-left:0; padding-right:0;}
.lr1{padding-left:5px; padding-right:5px;}

.header{
    background-color: transparent;
    width: 100%;
    position: fixed;
    top:0;
    z-index:9999;
    padding:0px 0;
    transition: all .5s ease;
}
/* .add-bg{background-color:#ffffffd5; backdrop-filter: blur(1rem); transition: all .5s ease;} */
.inner-header{padding: 0;}

.logos{
    max-height:60px;
    padding:0;
    display: block;
}

.logos img{
    position: relative;
    max-height: 60px;
    z-index: 6;
}
/* .menu{
    font-size: 1.6rem;
    padding: 7px 10px;
    margin: 4px 0 0;
    border-radius: 4px;
    color: #0a698e;
    display: block;
    cursor: pointer;
} */

.logo-bg{
    /* background-color:#fff; backdrop-filter: blur(1rem); */
    padding: 15px 20px;
    display: inline-block;
    border-bottom-right-radius: 20px;
    /* box-shadow:1px 1px 2px #182b41; */
}

.navigations{
    width: 100%;
    text-align:right;
    margin-top:6px;
}

.h-100{height:100vh}
.h-70{height:70vh}
.h-30{height:30vh}

/* ------------- */
section{padding:4% 0; background-position:center; background-size:cover; z-index:200; overflow:hidden;}
.fixed-section{position:fixed; top:0; left:0; width:100%; height:100%;}
/* ---------hero section--------- */
/* .hero-section{position: relative; background-color:#fff; background-position: top center; background-size: cover; width:100%; min-height:40vh; display: block; transition:all 0.9s ease-in-out;}
.hero-left{position: relative;height:100vh;width:100%;}
.hero-conts, .hero-corporate{position:absolute;top: 50%;transform:translateY(-50%);}
.hero-corporate{background-color: rgba(241, 241, 241, 0.4); padding:13% 30px; backdrop-filter: blur(11.3843px);}
.hero-conts h1{font-weight:900;font-size: 2.9vw;margin:20px 0;line-height:1.2;color:#0C2B3B;}
span.greeny, .green-title{color:#447FDB;}
.green-title{font-weight:600;}

.undelined-title{position:relative;font-size:1.7rem;line-height:1.2;padding:7px 0;margin:5px 0 10px;}
.undelined-title::after{position: absolute;bottom:0;left:0;content: "";width:60px;height:3px;background:#447FDB;border-radius:5px;}
.btn{border:transparent;}
.btn-green, .btn-white{padding:8px 35px; text-align: center;color:#fff; font-weight:200; background-color: #447FDB;text-decoration: none;}
.btn-white{background-color: #fff; color:#447FDB;}
.animated-video{min-width:100%;min-height:100vh;position: relative;}
.animated-video video{position: absolute;top: 50%;transform: translateY(-50%);width:100%;height:100%;} */
/* -------------------------- */

.hero-2{
    position: relative;
    width:100%;
    height:100%;
    background-size: cover;
    background-position:center;
}
.hero-2 .h-img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width:60%;
}
.h-img img{ max-width:65%;}
.hero-2 .cta{
    position:absolute;
    left:1%;
    bottom:8%;
    text-align:left;
    max-width:600px;
    padding:10px;
    z-index: 999;
}
.cta .capt{
    font-size:3.5rem;
    font-weight:600;
    color:#fff;
    border-bottom: 0.1px solid #3099f7;
    display:inline-block;
    text-align:right;
}
.cta .btns{
    position: relative;
    padding:13px 25px;
    background-color: #0B212D;
    color: #fff;
    text-align: center;
    margin:10px 0;
    display:inline-block;
    text-decoration:none;
    font-size: clamp(1rem, 2vw, 1rem);
    border-radius: 8px;
    border: 2px solid #12273f;
    transition: all .5s ease-in-out;
    overflow: hidden;
}
.cta .btns:before{
    position: absolute;
    top:-4px;
    left:-20%;
    content: "";
    height: 115%;
    width: 10%;
    border-radius: 10px;
    background: #0d2c3d;
    transition: all .5s ease-in-out;
}
.btns:hover{ text-decoration:none; background-color: #0B212D;transition: all .5s ease-in-out;}
.cta .btns:hover:before{
    position: absolute;
    top:-4px;
    left:130%;
    transition: all .5s ease-in-out;
}
/* ------Banner----- */
.banners{
    width:100%;
    height:500px;
    background-color:#ccc;
    background-position:center;
    background-size: cover;
    background-blend-mode:multiply;
    border-radius:50px;
    margin:20px auto;
    padding:20px 0;
}
.banners .banner-cont{
    position:relative;
    width:90%;
    min-height:10px;
    margin:0 auto;
    text-align:center;
    border-radius: 20px;
}
.banner-cont .title{
    font-size:6.7vw;
    -webkit-text-stroke: 2px #fff;
    color: transparent;
    display:inline-block;
    line-height:1;
    text-transform: uppercase;
    white-space: nowrap;
    padding:5px 20px;
    font-family: 'Oswald', sans-serif;
    font-weight:700;
}
.banner-cont.active{
    border:2px solid #fff;
}
.banner-cont.active .title{
    color:#000824;
    -webkit-text-stroke: 2px transparent;
}
/* ======About title===== */
.about-title{
    font-size:5.5vw;
    font-weight:900;
    line-height: 1.1;
    color:#fff;
    stroke: #fff;
    -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #eee;
}
/* ====================== */
/* -----Service Style---- */
.service-card{border: 0;}
.serve-title{color: var(--blue);}
.service-subtitle{padding: 5px 0 10px; border-bottom: 1px solid #ccc;color: rgb(16, 37, 69) !important; font-weight: 600;}
.service-description{line-height:1.4; font-weight:300;}
/* ====================== */
.centered-content{
    padding: 0 clamp(4rem, 12vw, 20rem);
    display: grid;
    place-content: center;
}
.resp-title, .m-title{
    padding:10px 1px;
    line-height:1.1;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    /* font-family: "Inter", sans-serif; */
    font-family: "Archivo Black", sans-serif;
    text-transform: capitalize;
    font-weight:600;
}
.resp-title{
    font-size: clamp(2rem,7vw, 4rem); font-weight: 800; color: rgb(16, 37, 69);
}
.resp-txt{font-size:clamp(2rem, 5vw, 3rem);line-height:1.1; font-weight:500; color:var(--pale-blue); }

.xs-txt{font-size:1.1rem;line-height:1.3; font-weight:200;}
.s-txt{font-size:1.3rem;line-height:1.5; font-weight:300;}
.m-txt{font-size:1.8rem;line-height:1.1;}
.l-txt{ font-size:2.8rem;line-height:1.4;}
.a-tag{text-decoration: none; color:inherit;}
.a-tag:hover{text-decoration: none; color:inherit;}

.txt-center{text-align:center;}
.txt-right{text-align:right;}
.txt-left{text-align:left;}
.caption{padding:20px; font-size:1.7rem; max-width:600px; border-radius: 10px; background:#fff; border:1px solid #eee; box-shadow: 3px 3px 15px #eee; text-align:center; font-weight:600; display:inline-block; margin:10px auto;}

.section{position: relative; width:100%; min-height:100%; padding:4% 0;background-color: #fff;background-size: cover;background-position: center; overflow: hidden;}
.section-full{min-height:100%; position: relative;}
.section-half{min-height:50%; position: relative;}
.grey-section{background-color: #f6f6f6;padding:2% 0;}
.gblue-section{background-color: #447FDB;color:#fff; background-size: cover;}
.dark-section{background-color: #0B212D;color:#fff;}
/* ------title bar --------*/
.title-bar{padding:20px 2px; margin-top:20px;}
.title-bar .title{font-size: 1.3rem;}
.title-bar .lg-title{font-size: 2.3rem; font-weight:800;}
.title-bar a{padding:4px 2px 2px; text-decoration:none; display:inline-block; color:#444; border-bottom:1px solid #444;}
.title-bar a:hover{padding:4px 2px 2px; text-decoration:none; display:inline-block; color:#447FDB; border-bottom:1px solid #444;}

/* -------Features------ */
.feature-lg{padding:10px 5px;}
.feature-lg h2, .feature-lg h3, .feature-lg h4{ padding:15px 0 5px; line-height:1.1;}
.feature-left, .feature-center, .feature-carousel{display: inline-block; position:relative;  width: 100%; margin:0 0 5px; padding:20px;}
.feature-center, .feature-carousel{text-align:center;}
.feature-left .img, .feature-center .img{margin:10px auto;display: inline-block; padding:10px; position: relative; transform: scale(1); transition: all .5s ease; }
.feature-left .img img, .feature-center .img img, .feature-carousel .img img{height:50px; width:auto; }
.feature-left:hover .img, .feature-center:hover .img{transform: scale(1.3) rotate(10deg); transition: all .5s ease; }
.feature-left .icons, .feature-center .icons{font-size:1.7rem; width:50px; height:50px; line-height:51px; margin:10px 0; display: inline-block; }
.feature-left .title, .feature-center .title{line-height:1.2; font-size:1.3rem; font-weight:500;}
.feature-left .title{ font-weight:600;}
.feature-left p{line-height:1.1; font-size:1rem;}
.app-feature{display: block;}
.app-feature .title{display: block; font-size:1.5rem; line-height:1.2; position:relative; color:inherit; padding:7px 0; font-weight:600; margin:15px 0;}
.app-feature .title:before{position:absolute;left:0; top:100%; content: ""; width:25%;height:3px; background:#fff; border-radius:5px;}
.app-feature p{font-size:1rem; line-height:1.1; font-weight:300; color:inherit;}
.app-feature a{text-decoration: none;}
.app-feature a img{height:35px;}
.app-feature-banner{margin-top:-50px; position: relative; transition: all 0.5s ease;}
.app-feature-banner img{max-width:90%;}
/* ------------------ */
.packages{display:block; padding:15px; background:#f0f0f0; margin:10px 0;}
.pack-header{display:inline-flex; min-height:60px;}
.pack-icon{min-width:45px; height:45px; margin-top:5px; line-height:45px; text-align:center; font-size:1.6rem; background:#447FDB; color:#fff; border-radius:50%;}
.pack-heading{font-size:1.1rem; line-height:1; font-weight:600;padding:10px 10px 0;}
.pack-body{display: block;}
.pack-body-head{display:inline-block; text-align:center; font-size:1.6rem; width:100%; font-weight:600; padding:6px;}
.pack-list{padding:10px 5px; min-height:100px;}
.pack-list ul{margin:0; padding: 0;}
.pack-list ul li{list-style: none; padding-left:20px; position:relative; margin-bottom:3px; color:#777;}
.pack-list ul li:before{position: absolute; left:0;font-size:1rem;content: "\2714";color:#447FDB;}
.pack-btn{text-decoration: none;text-align: center;cursor: pointer;padding: 8px 15px;display: block;color: #fff;border-radius: 5px;background: linear-gradient(#34D6A4, #447FDB);border: 0;width: 100%;}
.pack-btn:hover{text-decoration: none; color:#fff;background:linear-gradient(#447FDB, #34D6A4)}
/* ------------------ */
/* ----flex features-- */
.features {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
  }
  .flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
/* ------------------- */
/* ----------------- */
.btn-anim{position: relative; overflow: hidden;}
.btn-anim:before{
    position: absolute;
    top: 0;
    left: -130%;
    width: 50%;
    height: 100%;
    content: "";
    background: rgba(225, 225, 225, 0.7);
    transition: all 0.5s ease;
}
.btn-anim:hover::before{left: 130%;}
/* --------Tab nav------ */
.nav-tabs .nav-link { color: #fff;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #fff; background-color: #447FDB; border-color: #447FDB #03a145 rgb(4, 193, 95); border-radius: 6px;}
.nav-tabs {border-bottom: 0.05rem solid #447FDB;}
.tab-inner{padding:20px 10px;}
/* --------Blog Section--------- */
.blog-feature{position: relative;
    padding: 6px;
    margin: 10px 0;
    border-radius: 0;
    transition: all .5s ease;
    background-color: #fefefe;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    width: 100%;
}
/* .blog-feature:hover{position:relative; background:#fff;box-shadow: 3px 3px 15px #eee; transition:all .5s ease;} */
.blog-feature .img-bg{position:relative; height:250px; width: 100%; margin:0 0 10px; background-color:#ddd; background-position: center; background-size:cover;}
.blog-feature .conts{padding:10px 15px 15px; }
.blog-feature .conts .category{font-size:0.8rem; font-weight:500; color:#777; margin-right:3px; }
.blog-feature .conts .date{font-size:0.8rem; font-weight:300; color:#888; }
.blog-feature .conts .title{display: block; text-decoration: none; font-size:1.2rem; font-weight:400; color:#0b212d; line-height:1.2; padding:7px 0; transition:all .5s ease;}
.blog-feature  .conts:hover .title{display: block; text-decoration: none; font-size:1.2rem; color:#6c6d6e; line-height:1.2; padding:7px 0; transition:all .5s ease;}
.blog-feature  .conts .caption{font-size:1rem; font-weight:300; color:#444; line-height:1.3; padding:3px 0; }
.blog-feature .read{font-size: 1rem;font-weight: 300;color: #f9f3f3;line-height: 1.1; padding: 5px 25px;display: inline-block; margin: 5px 0 10px; text-decoration: none; border-radius: 5px; background: #3099f7; transition:all .5s ease;}
.blog-feature .read .fa{font-size:1rem;  color:#447FDB; line-height:1.1; padding-left:5px; transition:all .5s ease;}
.blog-feature .read:hover{background:#0B212D; color:#fff; transition:all .5s ease;}
.blog-feature .read:hover .fa{font-size:1rem;  color:#447FDB; line-height:1.1; padding-left:25px; transition:all .5s ease;}
/* --------------- */
.blog-conts{ position:absolute; top: 0; right: 0; width: 100%; min-height:800px; height:100%; overflow:hidden; overflow-y: auto; background-color: #00000073;}
.blog-title{font-size: 3.5rem; font-weight:700; color:#fff; line-height:1.05; padding-top:38%;}
.blog-cont-box{position:absolute; right:0; width:60%; padding:30px; z-index:99;}
.blog-conts .blog-parags{position:relative;top:10%; padding:20px 0; margin-bottom:10px; opacity:0; min-height:200px; transition: all .7s ease;}
.blog-conts .show-parags{top:10px; opacity:1; transition:all .7s ease;}
.bg-color{position:fixed; width:60%; top:0; right:-150%; min-height:100%; opacity: 0; background-color: #ffffffa3; backdrop-filter: blur(1rem); z-index:66; transition: all 3.3s ease;}
.other-blog{opacity:0;}
.show-from-right{right:0; opacity:1; transition: all .5s ease;}
/* ---------about-feature----- */

/* -------big text ------------------------ */
.big-txt{display:block; position:relative; bottom: 20px; width:100%;}
.big-txt span{font-size:9vw; color:#fff; font-weight:900; line-height:1.1; word-break: keep-all; word-wrap: normal;}
/* -----clients------- */
.clients{padding:20px 10px; margin:10px 0; position:relative;}
.clients .items{width: 100%; padding: 10px 5px; text-align: center; border: 1px solid #f4f4f4; overflow: hidden; height: 120px; line-height: 90px;}
.clients .items img{max-width: 100%; max-height: 70px; margin:0 auto;}
/* -------text-size-------- */
.xl-txt{font-size: 3rem; line-height:2;}
.lg-txt{font-size: 2.3rem; line-height:1.3;}
.md-txt{font-size: 1.5rem; line-height:1.2;}
.sm-txt{font-size: 1rem; line-height:1.15;}
/* --------text colors----- */
.green-text{color:#2BC38C;}
.white-text{color:#fff;}
.dark-text{color:#0B212D;}
.black-text{color:#222;}
/* ---background-color---- */
.green-bg{background-color:#447FDB;}
.white-bg{background-color:#fff;}
.dark-bg{background-color:#0B212D;}
.black-bg{background-color:#222;}
/* ------round border----------- */
.border-radius-50{border-radius:50%;}
.border-radius-25{border-radius:25px;}
.border-radius-10{border-radius:10px;}
.border-radius-5{border-radius:5px;}
/* ---------forms----- */
label{ margin-top: 0.85rem; color:#555;}
.align-right{display: block; text-align: right;}
.align-center{display: block; text-align: center;}
.align-left{display: block; text-align: left;}

/* ------jobs -------------*/
.jobs{
    padding:10px 20px;
    border-bottom:1px solid #e0e0e0;
    margin-top:30px;
    transition: all .5s ease;
}
.jobs:hover{background:#eee; transition: all .5s ease;}
.job-head h2{ color:#0B212D; line-height:1.1; padding:10px 0;}
.job-foot span{
    margin-right:20px;
    padding:20px 20px 10px 0;
    color: #777;
    font-size:0.9rem;
}
.btn-default{
    border:0;
    padding:12px 30px;
    background-color: var(--blue);
    color: #fff;
    text-align: center;
    margin:20px 0 5px;
    display:inline-block;
    text-decoration:none;
    transition: all .5s ease;
}
.btn-default:hover{ text-decoration:none; color: #fff; background:#000824; transition: all .5s ease;}
/* -------Form inputs------- */
.input-control{
    width:100%;
    padding:20px 10px;
    border: 0;
    margin-top:5px;
    border-bottom:1px solid #333;
}
input:focus, input:target, .input-control:focus, .input-control:active, .input-control:target, .input-control:hover{ border:0; border-bottom:1px solid #333;}
/* -------newsletter---- */
.newsletter-wraper{position:relative; padding:2% 0; background-color:#fff;}
.newsletter-wraper:after{position:absolute; content: ""; top:50%; left:0; height:50%; width:100%; background-color:#f6f6f6; z-index: 1;}
.newsletter{position:relative; padding:3% 2%; box-shadow:1px 1px 5px #d5d3d3; z-index: 100;}
/* ---------Footer---- */
.more-contact{ padding: 2% 0 2%; border-bottom: 0.1px solid #3099f7; margin-bottom: 25px;}
.more-contact a{text-decoration: none; color:#ccc; font-size:1.1rem; padding:10px 0;}
.blue-wrap{
    position:relative;
    width:100%;
    min-height:500px;
}
.blue-wrap:after{ position:absolute; top:0; left:0; content:""; width:100%; height:20%; background:#f9f9f9; z-index:2;}
.blue-block{min-height:600px; width:100%; position:relative; background-color:#447FDB; color: #fff; text-align:center; overflow:hidden; padding:5% 30px; z-index: 44;}
.block-contz{max-width:500px; margin:0 auto;}
#circle svg {
    /* position: absolute; */
    left: 0;
    top: 0;
    width: 100%;
    height: 300px;
    -webkit-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  @keyframes rotate {
    from {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    to {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
  }
  
/* --------------------------- */
.footer{ position:relative;}
.footer .title{color:#333; font-size:1.4rem; font-weight:600; padding:10px 0; line-height:1.1;}
.footer .logo{ position:relative; margin-bottom:10px;}
.footer .logo img{ max-height:50px;}
.footer .caption{ color:#777; line-height:1.4; font-size:1rem;padding:10px 0 5px;}
.footer .social{display: block; margin:10px 0 10px;}
.footer .social a{display: inline-block; width:40px; height:40px; line-height:40px; border-radius:50%; background:#fff;
      text-align:center; text-decoration:none; color:#447FDB;  margin:20px 7px 10px 0; box-shadow:1px 2px 9px #ccc; transition:all .5s ease;}
.footer .social a:hover{background:#447FDB; text-decoration:none; color:#fff; transition:all .5s ease;}
.footer .nav{display: block;}
.footer .nav a{display: block; text-decoration:none; padding:6px 0; color:#555; font-size:1rem; transition:all .5s ease;}
.footer .nav a:hover{display: block; text-decoration:none; padding:6px 0; color:#447FDB; font-size:1rem; transition:all .5s ease;}
.footer-end{display: block; padding:10px 10px 20px; color:#888; font-size:1rem; font-weight:200; background:#f6f6f6;}
.bottom-footer{padding:3% 0;}
/* ------------------- */
.play-btn{
    position: relative; transform: scale(1); display: inline-block; width:100px; height:100px;
    line-height: 100px; border:1px solid #447FDB; border-radius: 50%; text-align: center; font-size: 3rem;
    color:#447FDB; margin: 10px auto; text-decoration: none; transition: all 0.5s ease;
}
.play-btn:after{ position:absolute; top:0; left:0; content:""; cursor: pointer; transform: scale(1); min-width:100%; min-height:100%; border:1px solid #447FDB; border-radius: 50%;}
.play-btn:hover{ position: relative;transform: scale(1.2); color:#447FDB; text-decoration: none;transition: all 0.5s ease;}
.play-btn:hover::after{ transform: scale(1.7); opacity:0; transition: all 0.5s ease;}
.pop-video-layer{
    position: fixed;
    top: 0; left: 0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none;
}
.pop-video{
    position: absolute;
    top: 50%; left:50%;
    transform:translate(-50%,-50%);
    width: 70vw;
    min-height:300px;
    height: 70vh;
    background:#447FDB;
    padding:4px;
    background: linear-gradient(to right, #447FDB, #0B212D);
}
.pop-cancel{
    position: absolute;
    top:5%; right:4%;
    font-size:1.7rem;
    color:#447FDB;
    cursor:pointer;
    padding:4px 10px 8px;
    line-height:1;
    border:1px solid #447FDB;
    border-radius:50%;
    display:inline-block;
    transform: scale(1);
    transition:all 0.5s ease;
}
.pop-cancel:hover{
    transform: scale(1.3);
    transition:all 0.3s ease;
}
/* ------------------- */
.section{
    padding:3% 0;
}
/* ------------- */
/* ------------- */
.auth-hero{
    position: fixed;
    height:98vh;
    padding:10px;
}
.hero-in{
    position: relative;
    top: 40%;
    transform: translateY(-40%);
    max-width:500px;
}
.hero-in .title{ color:#fff; font-size:3.2rem; line-height: 1.1; padding: 20px 0; font-weight:900;}
.hero-in .caption{color:#fff; font-size:1rem;}
/* --------------*/
/* ------------- */
.partition{display: inline-flex;}
.p-left, .p-right{
    width:50vw; position: fixed; top: 0; min-height:100vh; background-color: #012818; background-position: center; background-size: cover; background-blend-mode: multiply; overflow: hidden;
}
.p-right{overflow-y: auto; left:50%; background-color: #fff;}
/* --------------------- */
label{margin-top: 0.25rem;}
.form-control {
    font-weight: 400;
    line-height: 1.5;
    padding: 1.9575rem .95rem;
    font-size: 1.1rem;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 5px;
    transition: border-color 0s ease-in-out, box-shadow 0s ease-in-out;
  }
/* -------------------- */
.send-btn{
    background-color:#447FDB;
    color:#fff;
    border-radius:5px;
    display: block;
    width:100%;
}
.centered-wrap{position:relative; min-height:80vh; width:100%;}
.centered{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80%;
}
.the-form{max-width:80%; padding:20px;}
/* ------------------- */
/* ------about------ */
.abt-feature{width:100%; border-radius:12px; overflow:hidden;}
.abt-feature img{width:100%;}
/* ----------------- */
.scroll-container {
    position: relative;
    width: 100vw;
    overflow: hidden;
}
.scrolling-text {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
    will-change: transform;
    backface-visibility: hidden;
}
  
.scrolling-text .scrolling-text-content {
    color: #fff;
    font-size: 120px;
    white-space: nowrap;
    transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
    line-height: 1em;
    margin: 50px 0;
}  
/* ----------------- */
/* =====pop-ups-------- */
.pop-wrap{position: fixed; top:0; right:-150%; width:100%; height:100vh; background-color: #ddddddce; backdrop-filter: blur(3px); z-index: 999999; transition: all .5s ease-in-out;}
.pop-inner{width:40%; height:100vh; background:#fff; padding:20px 30px; position:absolute; top:0; right:-200%; transition: all .5s ease-in-out; overflow-y: auto;}
.w-pop{right:0;  transition: all .5s ease-in-out;}
.w-inner-pop{right:0;  transition: all .5s ease-in-out;}
.pop_out{border:0; padding:5px 10px; margin:10px 0; color:#333;}
.w-inner-pop .jb-description{margin:20px 0 ;line-height: 1.5; font-size: 1.2rem; font-weight: 200; color: #444; font-family: "Inter", sans-serif;}
/*------------------*/
.error{color:red;}
/* ---------------- */
@media(max-width:1390px){
    .hero-section{
    	min-height:500px;
    }
}

@media(max-width:992px){
    .hero-section, .hero-section:hover{
        background-size: cover;
    }
    .pillar-bg, .pillar:hover .pillar-bg{
        background-size: cover;
    }
    .gallery a img {
        width: 33.3%;
    }
    .feature-paper .img{height:300px;}
}

@media(max-width:768px){
    .header { padding: 0; background-color: #fff;}
    .logos img { max-height: 60px;}
    .navigations{
        position: fixed;
        top: 0;
        left: -280%;
        width: 80%;
        min-height:100vh;
        text-align:left;
        background:#e3e3e3;
        padding:20px;
        display:block;
        transition: all 0.5s ease-in-out;
        z-index: 9999;
    }
    .shownav{left: 0; transition: all 0.5s ease-in-out;}
   
    ul.navs li{
        display: block;
    }
    ul.navs li a{
        display: block;
        padding:12px 10px;
    }
    ul.navs li ul, ul.navs li:hover ul{
        position: relative;
        display: block;
        opacity: 1;
        top:0;
    }
    .submit-btns{
        padding-top: 0;
        margin-bottom:20px;
    }
    .features, .flex-box {
        display: block;
    }
    .resp-title {padding: 15% 10px 0;}
    /* -------------- */
    .the-form{max-width:100%; padding:15px;}
    /* -----------titles------- */
    .m-title { font-size: clamp(1.75rem, 3vw, 3rem)}
    /* -------------- */
    .blog-cont-box, .bg-color{width:100%;}
    .blog-title{font-size: 1.95rem; font-weight:500; line-height:1.1; padding-top:50%;}
    .pop-inner{width:50%;}
}

@media(max-width:480px){
    .logos img { max-height: 50px;}
    .menu{padding: 0 10px;}
    /* ---------hero -2 section-------- */
    .hero-2 .h-img { width: 90%;}
    .h-img img { max-width: 95%;}
    .hero-2 .cta {position: absolute; right: 8%; bottom: 1%;}
    /* -----------titles and texts------- */
    .cta .capt {font-size: 2.3rem; line-height:1.1; text-shadow: 1px 1px 1px #fafcff;}
    .m-title { font-size: 1.8rem;}
    .m-txt {font-size: 1.4rem;}
    .l-txt { font-size: 2rem; line-height: 1.4;}      
    /* ---------------------- */
    /* .clients .items {height: 70px;} */
    /* --------------------- */
    .blue-block {min-height: 400px;}
    .pop-inner{min-width:200px;width:80%;}
}


/* ======SVG animation ========= */

.section-hero{
    background:#fff;
    overflow: hidden;
}
/* section svg{position:absolute; top:30%; transform:scale(1.1); width:100%; max-height:100%;transition:all .9s cubic-bezier(1,-0.38,0,1.55);}

.st0{fill:none;stroke:url(#SVGID_1_);stroke-width:1.5;stroke-miterlimit:10;}
.st1{fill:none;stroke:url(#SVGID_2_);stroke-width:1.5;stroke-miterlimit:10;}
.st2{fill:none;stroke:url(#SVGID_3_);stroke-width:1.25;stroke-miterlimit:10;}
.st3{fill:none;stroke:url(#SVGID_4_);stroke-width:1.25;stroke-miterlimit:10;}
.st4{fill:none;stroke:url(#SVGID_5_);stroke-width:1.25;stroke-miterlimit:10;}
.st5{fill:none;stroke:url(#SVGID_6_);stroke-width:1.25;stroke-miterlimit:10;}
.st6{fill:none;stroke:url(#SVGID_7_);stroke-width:1.25;stroke-miterlimit:10;}
.st7{fill:none;stroke:url(#SVGID_8_);stroke-width:1.25;stroke-miterlimit:10;}
.st8{fill:none;stroke:url(#SVGID_9_);stroke-width:1.25;stroke-miterlimit:10;}
.st9{fill:none;stroke:url(#SVGID_10_);stroke-width:1.25;stroke-miterlimit:10;}
.st10{fill:none;stroke:url(#SVGID_11_);stroke-width:1.25;stroke-miterlimit:10;}
.st11{fill:none;stroke:url(#SVGID_12_);stroke-width:1.25;stroke-miterlimit:10;}
.st12{fill:none;stroke:url(#SVGID_13_);stroke-width:1.25;stroke-miterlimit:10;}
.st13{fill:none;stroke:url(#SVGID_14_);stroke-width:1.25;stroke-miterlimit:10;}
.st14{fill:none;stroke:url(#SVGID_15_);stroke-width:1.25;stroke-miterlimit:10;}
.st15{fill:none;stroke:url(#SVGID_16_);stroke-width:1.25;stroke-miterlimit:10;}
.st16{fill:none;stroke:url(#SVGID_17_);stroke-width:1.25;stroke-miterlimit:10;}
.st17{fill:none;stroke:url(#SVGID_18_);stroke-width:1.25;stroke-miterlimit:10;}
.st18{fill:none;stroke:url(#SVGID_19_);stroke-width:1.25;stroke-miterlimit:10;}
.st19{fill:none;stroke:url(#SVGID_20_);stroke-width:1.25;stroke-miterlimit:10;}
.st20{fill:none;stroke:url(#SVGID_21_);stroke-width:1.25;stroke-miterlimit:10;}
.st21{fill:none;stroke:url(#SVGID_22_);stroke-width:1.25;stroke-miterlimit:10;}
.st22{fill:none;stroke:url(#SVGID_23_);stroke-width:1.25;stroke-miterlimit:10;}
.st23{fill:none;stroke:url(#SVGID_24_);stroke-width:1.25;stroke-miterlimit:10;}
.st24{fill:none;stroke:url(#SVGID_25_);stroke-width:1.25;stroke-miterlimit:10;}

svg .st11, svg .st5, svg .st20{stroke-width:1.25;stroke-dasharray: 1000; cursor:pointer; stroke-dashoffset: -1000; animation: animate 5.5s forwards infinite;}

svg:hover{ transform: scale(1.5); transition:all .9s cubic-bezier(1,-0.38,0,1.55);}
svg:hover .st0, svg:hover .st1{stroke-width:1.75;stroke-dasharray: 1000; cursor:pointer; stroke-dashoffset: -1000; animation: animate 17.5s forwards infinite;}

@keyframes animate {
    100% {
        stroke-dashoffset: 1500;
    }
} */


.myVideo {
	position: absolute;
	left: 50%;
    top: 0;
    transform: translateX(-50%);
	min-width: 100%;
    min-height: 100%;
    object-fit: cover;
	z-index: 2;
}
.hero-skin{
    width:85%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
    background-color: #ffffff02;
    background-size:cover;
    background-position: 50% 0;
    overflow: hidden;
    z-index: 9;
}
.hero-cont{position:absolute; left:9%; bottom: 10%; z-index: 99;}
.hero-title{
    display: block;
    color: rgb(68, 127, 219);
    font-weight:800;
}
.hero-cont .captn{
    background-color: #f9f9f9;
    font-size: 1.2rem; line-height: 1.3; max-width:300px; padding: 20px;
    margin: 30px 0; font-weight: 200; color: #444;
}
.hero-title .h-title{font-size: clamp(2.5rem, 7vw, 6.5rem); padding: 5px 15px; line-height: 1.2; background-color: #fff;}
.hero-title a{
    position: relative;
    /*padding: 3.2vw;*/
    background: #fff !important;
    color: #333;
    display: inline-flex;
    align-items: center;
    font-size: clamp(1.2rem, 2vw, 2rem);
    padding: 1.79rem 2rem;
    top: -22px;
    left: -4px;
    text-decoration: none;
    font-weight:600;
    overflow: hidden;
}
.hero-title a span{ padding:10px; pmargin-left:10px; background-color:#092433; color: #fff;}

.hero-title a:before{
    position: absolute;
    top:-4px;
    left:-20%;
    content: "";
    height: 105%;
    width: 12%;
    border-radius: 10px;
    background: #fff;
    transition: all .5s ease-in-out;
}
.hero-title a:hover{ text-decoration:none; background-color: #fff;transition: all .5s ease-in-out;}
.hero-title a:hover:before{
    position: absolute;
    top:-4px;
    left:130%;
    transition: all .5s ease-in-out;
}

/*.process{*/
/*    position: relative;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    align-content: center;*/
/*    min-height: 300px;*/
/*    padding: 20px;*/
/*    text-align: left;*/
/*    width: 100%;*/
/*    color: #092433;*/
/*    border: 1px solid transparent;*/
/*    background: radial-gradient(#dbd8d8, #e4e8ea);*/
/*    transition: all 0.5s ease-in-out;*/
/*    margin:10px 0;*/
/*}*/
/*.process{*/
/*    position: relative;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  align-content: center;*/
/*  min-height: 460px;*/
/*  padding: 20px 8%;*/
/*  text-align: center;*/
/*  width: 100%;*/
/*  color: #ffffff;*/
/*  background: radial-gradient(#dbd8d8, #e4e8ea);*/
/*  transition: all 0.5s ease-in-out;*/
/*  margin: 10px 0;*/
/*  border-radius: 20px;*/
/*  box-shadow: 2px 2px 3px #c9c9c9;*/
/*  border-top: 1px solid #a9b6de;*/
/*  border-right: 1px solid #8d8ef0;*/
/*  border-bottom: 1px solid #a9b6de;*/
/*  border-left: 1px solid #a2abf1;*/
/*  background-color: #0b212d;*/
/*  background-blend-mode: overlay;*/
/*  background-size: contain; background-position:center; background-repeat: no-repeat; */
/*  background-image: url('../../images/white-h.png');*/
/*}*/
/*.process h4{position:relative; line-height: 1.5; z-index:1;}*/
/*.process .nlist{ position: absolute; top:5%; left: 5%; font-size: clamp(2rem, 5vw, 3vw); color: #09243334; padding: 5px; font-weight: bold; font-style: italic; z-index:0;}*/
/*.process:hover{background-color: #102e3e; transition:all 0.5s ease-in-out;}*/

/*-----------*/
.scroll-dwn, .scroll-dwn:hover{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    color: #fff;
    padding: 20px 6px;
    text-align:center;
    border:1px solid #fff;
    background-color: #00000091;
    text-decoration:none;
    display:inline-block;
    z-index: 999;
    border-radius: 40px;
}
/*------------*/

.process{
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;
    height: 250px;
    padding: 20px 5%;
    text-align: left;
    width: 100%;
    border-left: 9px solid #53acfa;
    background-color: #3099F7;
    background-size: contain; background-position:center; background-repeat: no-repeat; background-image: url('../../images/white-h.png');
    transition: all 0.5s ease-in-out;
    margin:10px 0;
}
.process h4{position:relative; font-size: clamp(1.3rem, 5vw, 2.8rem); color: #fff; line-height: 1.1; z-index:1;}

.step-img{
    position: relative;
    text-align: center;
    overflow: auto;
    height: auto;
}
.step-img .img1, .step-img .img2{
    width: 90%;
    margin: 0 auto;
    position: relative;
}
.step-img .img2{
    width:70%;
    top: 40%;
    left: 15%;
}
.step{
    min-height: 400px;
    padding-top: 10px;
}
.step h5{
    font-size: clamp(1.3rem, 5vw, 3rem);
    font-weight: 600;
}
.step h5 span{color:#444; font-size: 1.3rem;}


.sevis-name{
    position: sticky;
    margin-top:70px;
    padding:10px 1%;
    left:20px;
    font-size: clamp(3rem, 10vw, 7rem); 
    font-weight:900; color:transparent; 
    -webkit-text-stroke: 1px rgba(70, 70, 70, 0.61); 
    /* writing-mode: vertical-lr;
    text-orientation: mixed; */
    text-wrap: nowrap;
    z-index:99;
}
.sevisi{
    position:relative;
    top:30%;
    height:450px;
    width:400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    /* background-color: #111; */
    border:1px solid #09273b;
    margin:30px;
    padding:15px;
}
.sevisi:first-child, .sevisi:last-child{border:1px solid transparent;}
.sevisi .title{position:relative; font-size: clamp(2rem, 5vw, 2.5rem); font-weight:900; color:transparent; -webkit-text-stroke: 1px rgba(149, 149, 149, 0.61); z-index:2}
.sevisi .paragraf{position:relative; color:#e9e9e9; max-width:600px; text-align:center; margin-top:10px; font-size: clamp(.9rem, 3vw, 1.3rem); line-height: 1.3; z-index:22;}

ul.slideset li .description h3{
    font-size: 7rem;
}

@media(max-width:992px){
    .blue-block{min-height: 300px;}
}

@media(max-width:600px){
    .cstm-height{height:50vh;}
    .myVideo{height: 100%;}
    .scroll-dwn{display:none;}
    .sevisi {
        position: relative;
        top: 30%;
        height: 350px;
        width: 350px;
    }
    .hero-skin {width: 100%;}
    .hero-cont {left: 2%;}
    
    .step-img{
        min-height: 300px;
    }
    .step{
        min-height: 100px;
    }
    
    .hero-title .h-title{padding: 5px 10px; display:block; line-height: 1.1;}
    .hero-title a{
        font-size: clamp(1.2rem, 2vw, 2rem);
        padding: 0.3rem .5rem;
        top: 0;
        left: 0;
    }
    
}