body
    {
        background: #f8fbff;
        font-family: 'Poppins' ,sans-serif;
        font-weight: 300;
        position: relative;
        color:#222;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
    }
	
.tm-white a {
	color: #fff;
}

/* start h1 group */
h1 { 
    margin-top: 0;
    margin-bottom: 25px; 
}
h1,
h2,
h3,
h4
    {
        font-weight: bold;
    }
/* end h1 group */
p { line-height: 1.6em; }
/* img */
img
    {
        max-width: 100%;
        height: auto;
    }
/* img */

/* overlay */
.overlay{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(

rgba(0,0,0,.72),

rgba(0,0,0,.55)

);

}
/* over lay */

/* start page container */
@media (min-width: 768px) {
  .container {
    width: 700px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 900px;
  }
}
@media (min-width:1200px){
    .container{
        width:1200px;
    }
}
/* end page container */

/* start preloader */
.preloader
    {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row nowrap;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        /*justify-content: center;*/
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        background: none repeat scroll 0 0 #fff;
    }
.sk-spinner-rotating-plane.sk-spinner 
    {
         width: 30px;
        height: 30px;
        background-color: #28a7e9;
         margin: 0 auto;
        -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
                animation: sk-rotatePlane 1.2s infinite ease-in-out;
     }

@-webkit-keyframes sk-rotatePlane {
  0% {
         -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                 transform: perspective(120px) rotateX(0deg) rotateY(0deg); }

  50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }

  100% {
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

@keyframes sk-rotatePlane {
  0% {
         -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                 transform: perspective(120px) rotateX(0deg) rotateY(0deg); }

  50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }

  100% {
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
/* end preloader */

/* start navigation */
.navbar-default{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    border-bottom:1px solid rgba(255,255,255,.12);

    box-shadow:0 8px 30px rgba(0,0,0,.18);

    transition:.35s;

}
.navbar-default .nav li a{

    color:#E8E8E8;

    font-size:16px;

    font-weight:600;

    letter-spacing:.5px;

    transition:.3s;

}
.navbar-default .nav li a:hover,
.navbar-default .nav li a.current{

    color:#17A9FF;

}
.navbar-default .navbar-brand
    {
        color: #28a7e9;
        font-size: 30px;
        font-weight: bold;
        height: 80px;
        line-height: 35px;
    }
.navbar-default .nav li a::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:12px;
    width:0;
    height:3px;
    background:#4169E1;
    transform:translateX(-50%);
    transition:.35s;
    border-radius:30px;
}
.navbar-default .nav li a:hover,
.navbar-default .nav li a.current{
    color:#4169E1;
    transform:translateY(-2px);
}

.navbar-default .nav li a:hover::after,
.navbar-default .nav li a.current::after{
    width:70%;
}
.navbar-default .nav li a:focus{
    color:#4169E1;
    outline:none;
    box-shadow:none;
}
.navbar-default .navbar-toggle
    {
        border: none;
        padding-top: 20px;
    }
.navbar-default .navbar-toggle .icon-bar
    {
        background: #28a7e9;
        border-color: transparent;
    }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: transparent }
/* end navigation */

/* start home */       
#home{
    background:url('../images/home-bg.jpg') center center no-repeat;

    background-size:cover;

    background-attachment:fixed;

    position:relative;

    padding:0;
}
#home img
    {
        display: inline-block;
        margin-top: 30px;
    }
/* end home */

/* start divider */
#divider
    {
        text-align: center;
        padding-top: 80px;
        padding-bottom: 80px;
    }
#divider .fa
    {
        color: #28a7e9;
        font-size: 60px;
    }
#divider h3
    {
        font-size: 20px;
    }
/* end divider */

/* start feature */
#feature{

    background:#EEF4FA;

    padding:100px 0;

}
#feature p
    {
        padding-top: 10px;
    }
#feature span
    {
        float: left;
    }
#feature .fa
    {
        background: #28a7e9;
        border-radius: 50%;
        color: #fff;
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-right: 20px;
    }
/* end feature */

/* start feature1 */
#feature1
    {
        padding-top: 60px;
        padding-bottom: 60px;
    }
#feature1 p
    {
        padding-top: 10px;
    }
#feature1 span
    {
        float: left;
    }/* end feature1 */

/* start download */
#download
    {
        padding-top: 80px;
        padding-bottom: 80px;
    }
#download h2
    {
        padding-bottom: 20px;
    }
#download .btn
    {
        border-radius: 0px;
        font-weight: bold;
        margin-top: 20px;
        padding: 10px 40px 10px 40px;
    }
/* end download */

/* start contact */
#contact
    {
        background: url('../images/contact-bg.jpg') no-repeat;
        background-size: cover;
        color: #fff;
    }
#contact h2
    {
        padding-bottom: 10px;
    }
#contact address
    {
        padding-top: 20px;
    }
#contact address .fa
    {
        background: #28a7e9;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-top: 6px;
        margin-right: 10px;
    }
#contact .contact-form
    {
        padding-top: 40px;
    }
#contact .form-control
    {
        border: none;
        border-radius: 0px;
        box-shadow: none;
        margin-bottom: 20px;
    }
#contact input
    {
        height: 50px;
    }
#contact input[type="submit"]
    {
        background: #28a7e9;
        color: #fff;
        font-weight: bold;
        transition: all 0.3s ease;
    }
#contact input[type="submit"]:hover {
    background: #107DB6;
}
/* end contact */

/* start footer */
footer
    {
        background: #fff;
        font-weight: 400;
        text-align: center;
        padding: 20px;
    }
/* end footer */

@media screen and ( max-width: 991px ) {
    .templatemo-box {
        margin-bottom: 30px;
    }
    #pricing .active {
        bottom: 0;
    }
    .pricing {
        margin-bottom: 20px;
    }
    #feature img, #download img {
        margin-top: 30px;
    }
    #feature1 img {
        margin-bottom: 30px;
    }
}
@media screen and ( max-width: 767px ) {
    .navbar-default .nav li a {
        height: auto;
        line-height: 2em;
    }
    #feature, #pricing, #download {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    #contact .overlay {
        padding-top: 40px;
    }
}
/* start media 360 */
@media screen and ( max-width: 360px ){
    .pricing
        {
            padding-bottom: 40px;
        }
}
/* end media 360 */
.logo{

    height:85px;

    width:auto;

    position:relative;

    top:-18px;

    transition:.35s;

}
.logo:hover{
    transform:scale(1.08) rotate(-3deg);
}
/* ===== Services ===== */

.service-subtitle{
    max-width:800px;
    margin:20px auto 50px;
    color:#666;
    font-size:17px;
}

.service-row{
    margin-top:30px;
}
/*========== PREMIUM CARD ==========*/

.service-card,
.why-card{

    background:#fff;

    border-radius:18px;

    padding:45px 35px;

    margin-bottom:30px;

    text-align:center;

    border:1px solid #DCE7F5;

    box-shadow:0 12px 30px rgba(18,52,86,.08);

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(18,52,86,.15);

}

.why-card i{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 30px auto;

    border-radius:50%;

    background:linear-gradient(135deg,#2EA8FF,#2563EB);

    color:#fff;

    font-size:30px;

    box-shadow:0 12px 30px rgba(37,99,235,.30);

}
/* Blue glow */

.service-card::before,
.why-card::before{

content:'';

position:absolute;

top:-80%;

left:-80%;

width:220%;

height:220%;

background:
radial-gradient(circle,
rgba(0,170,255,.18),
transparent 65%);

opacity:0;

transition:.6s;

pointer-events:none;

}

.service-card:hover::before,
.why-card:hover::before{

opacity:1;

}

.service-card:hover,
.why-card:hover{

transform:translateY(-14px) scale(1.03);

box-shadow:
0 25px 60px rgba(0,90,255,.18);

}

.service-card i,
.why-card i{

width:74px;

height:74px;

margin:auto auto 28px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:30px;

background:linear-gradient(135deg,#00B7FF,#2563EB);

color:#fff;

box-shadow:0 10px 30px rgba(37,99,235,.35);

}

.service-card h3,
.why-card h3{

font-size:20px;

font-weight:700;

margin-bottom:18px;

color:#1E293B;

}

.service-card p,
.why-card p{

font-size:16px;

line-height:1.9;

color:#64748B;

}

/* Remove ugly focus outline */
.navbar-default .nav li a:focus,
.navbar-default .nav li a:active{
    outline:none !important;
    box-shadow:none !important;
}
.navbar-default .nav li a,
.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus,
.navbar-default .nav li a:active{
    outline:none !important;
    box-shadow:none !important;
}
/* Remove black focus outline from logo */
.navbar-brand,
.navbar-brand:focus,
.navbar-brand:active,
.navbar-brand:hover,
.navbar-brand img,
.navbar-brand img:focus{
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
::selection{
    background:#4169E1;
    color:#fff;
}
::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#edf3ff;
}

::-webkit-scrollbar-thumb{
    background:#4169E1;
    border-radius:30px;
}

::-webkit-scrollbar-thumb:hover{
    background:#3056d3;
}
.navbar a,
.navbar-brand,
.navbar-brand img,
.navbar a:focus,
.navbar-brand:focus,
.navbar-brand img:focus{
    outline:none!important;
    box-shadow:none!important;
    border:none!important;
}
.hero-title{

    font-size:clamp(46px,5vw,68px);

    font-weight:900;

    line-height:1.05;

    color:#FFFFFF;

    text-shadow:0 5px 25px rgba(0,0,0,.45);

}
.gradient-text{

background:linear-gradient(
90deg,
#00D4FF,
#008CFF,
#00D4FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-size:200%;

animation:gradientMove 4s linear infinite;

}
@keyframes gradientMove{

0%{
background-position:0%;
}

100%{
background-position:200%;
}

}

@keyframes slideUp{

0%{

opacity:0;
transform:translateY(50px);

}

100%{

opacity:1;
transform:translateY(0);

}

}
.hero-subtitle{

color:#D7E7FF;

font-size:21px;

line-height:2;

max-width:850px;

margin:40px auto;

font-style:normal;

}
@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}
.explore-btn{

background:#0B84FF;

border:none;

padding:18px 42px;

border-radius:50px;

color:#fff;

font-weight:700;

box-shadow:0 0 25px rgba(0,153,255,.45);

transition:.35s;

}

.explore-btn:hover{

transform:translateY(-4px);

box-shadow:0 0 40px rgba(0,153,255,.8);

}
.btn-default{

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.2);

backdrop-filter:blur(12px);

color:#fff;

border-radius:50px;

padding:18px 42px;

}

.btn-default:hover{

background:#fff;

color:#000;

}
/* ===== WHY CHOOSE US ===== */
#why-us{

    background:#E6EEF7;

    padding:100px 0;

    text-align:center;

}
#why-us h2{

    text-align:center;

    margin-bottom:15px;

}

.why-subtitle{

    max-width:850px;

    margin:0 auto 60px;

    text-align:center;

    color:#666;

    font-size:18px;

}
.service-card{

    background:#FFFFFF;

    border:1px solid #DCE7F5;

    border-radius:18px;

    box-shadow:0 12px 30px rgba(18,52,86,.08);

}
/*========== SERVICE SLIDER ==========*/

.service-slider{

position:relative;

left:50%;

transform:translateX(-50%);

width:100vw;

overflow:hidden;

padding:30px 0;

}
.service-track{

display:flex;

gap:30px;

width:max-content;

animation:scrollServices 30s linear infinite;

}

.service-slider:hover .service-track{

animation-play-state:paused;

}

.service-track .service-card{

width:340px;

min-width:340px;

margin:0;

flex-shrink:0;

}

@keyframes scrollServices{

0%{

transform:translateX(0);

}

100%{

transform:translateX(calc(-370px * 6));

}

}
#why-us .col-md-4{

    width:33.3333%;


    padding:15px;

}
#why-us .row{

    overflow:hidden;

}
/*========== WHY CHOOSE GRID ==========*/

#why-us .why-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:50px;

}

#why-us .col-md-4{

    width:auto;

    float:none;

    padding:0;

}

#why-us .why-card{

    height:100%;

    min-height:320px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}
/* ===== FORCE ICON POSITION ===== */

#why-us .why-card{

    position:relative;

    padding-top:90px;

}

#why-us .why-card i{

    position:absolute;

    top:30px;

    left:50%;

    transform:translateX(-50%);

    width:70px !important;

    height:70px !important;

    line-height:70px !important;

    display:flex !important;

    align-items:center;

    justify-content:center;

    margin:0 !important;

    border-radius:50%;

    background:linear-gradient(135deg,#2EA8FF,#2563EB);

    color:#fff;

    font-size:30px;

    box-shadow:0 15px 35px rgba(37,99,235,.35);

}
.about-image{

    background:rgba(255,255,255,.55);
 
}
.about-image img{

    width:100%;

    max-width:420px;

    height:520px;

    object-fit:cover;

    border-radius:24px;

    display:block;

    margin:0 auto;

}
.about-image:hover img{

    transform:scale(1.03);

}
/* ===============================
   MOBILE RESPONSIVE
================================== */

@media screen and (max-width:768px){

    html,
    body{
        overflow-x:hidden;
    }

    .logo{
        height:60px;
        top:-8px;
    }

    #home{
        min-height:100vh;
        padding:120px 20px 70px;
        text-align:center;
        background-attachment:scroll;
    }

    .hero-title{
        font-size:42px;
        line-height:1.2;
    }

    .hero-subtitle{
        font-size:16px;
        line-height:1.8;
        margin:25px auto;
    }

    .explore-btn,
    .btn-default{
        display:block;
        width:100%;
        margin:12px 0;
    }

    /* SERVICES */

    .service-slider{
        width:100%;
        overflow:hidden;
    }

    .service-track{
        gap:20px;
    }

    .service-track .service-card{
        width:280px;
        min-width:280px;
    }

    /* WHY CHOOSE */

    #why-us .why-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:25px;
    }

    #why-us .why-card{
        min-height:auto;
    }

    /* ABOUT */

    #download .col-md-6{
        width:100%;
        text-align:center;
        margin-bottom:30px;
    }

    .about-image img{
        max-width:320px;
        height:auto;
    }

    /* CONTACT */

    #contact .col-md-6{
        width:100%;
        margin-bottom:30px;
    }

    #contact input,
    #contact textarea{
        width:100%;
    }

    footer{
        text-align:center;
    }

}