:root {
  --skyblue: #44D2F6;
  --white: #ffffff;
  --black: #102147;
  --gray: #F5F5F5;
}
html{ scroll-behavior: smooth; }
body{ background:var(--white);  margin:0px; padding:0px;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 color:#000; font-size:16px; font-family: Inter,sans-serif; font-weight:400; }
body:focus{ outline: none; }
img{ margin:0px; padding:0px; }
*{ margin:0px; padding:0px; }
p:empty{ display: none; }
a{ text-decoration: none;  -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
a:hover{ text-decoration:none; }
section{ padding: 70px 0px; }
h2{ font-size: 40px; font-weight: 700; margin-bottom: 30px; }
p{ font-size: 18px; }
/*============== topbar css start ================*/
.topbar{ background:var(--black); padding: 8px 0px; }
.topbar li{ list-style: none; }
.topbar li a{ color:var(--white); font-size:16px; }
.topbar li a:hover{ text-decoration: underline;}
.topbar li a img{ width: 24px; margin-right: 8px; } 
/*============== header css  start =======================*/
header{ background: var(--white); padding: 8px 0px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); z-index: 9; position: relative; }
header.sticky { width: 100%; top: 0; right: 0; position: fixed; z-index: 99; padding:8px 0px;  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);  
animation: slideDown 0.35s ease-out; }
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
header .logo img{ max-width: 200px; }
header .navbar-brand{ display: none; }
header .navbar-expand-md .navbar-nav .nav-link{ line-height: 36px; margin: 0px 20px; font-size: 18px; color: var(--black); font-weight: 700; text-transform: uppercase;  border-bottom:2px solid var(--white); } 
header .navbar-expand-md .navbar-nav .nav-link:hover, 
header .navbar-expand-md .navbar-nav .nav-link:active{ color:var(--skyblue); border-bottom:2px solid var(--skyblue); }
.contact_us_btn, .sendbtn{ background: var(--black); color: var(--white); font-size: 18px; font-weight: 700; text-transform: uppercase;
     border-radius: 4px; padding: 12px 16px; border: none; height:48px; line-height: normal; }
.contact_us_btn:hover, .sendbtn:hover{ background:var(--skyblue); color: var(--black); }  
header .contact_us_btn{ margin-left: 20px; } 
/*============== banner css end =====================*/
.banner{ position: relative; background: url('../images/banner-bg.svg') no-repeat center; background-size: cover; }
.banner_img img{ max-width: 500px; width: 100%; }
.banner h4{ color:var(--black); font-size: 18px; margin-bottom: 22px; } 
.banner h1{ color:var(--skyblue); font-size: 48px; margin-bottom: 34px; line-height: 72px; font-weight: 700;  }
.banner h1 span{ color: var(--black);  text-decoration: underline; } 
 
/*============== about_us css =====================*/
.about_us{ background: #44D2F6; background: linear-gradient(0deg,rgba(68, 210, 246, 1) 0%, rgba(16, 33, 71, 1) 100%); }
.about_us h2{ color: #FFF; }
.about_us h3{ font-weight: 700; margin-bottom: 30px; font-size:32px;  }
.about_img img{ width: 100%; border-radius:8px; }
.about_us .about_main{ background:var(--white); padding: 50px; border-radius: 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
.about_us .abcolor{ background: var(--gray);  border-radius: 8px; padding: 32px; }
/*============== portfolio_sec css =====================*/
.portfolio-menu { text-align: center; margin-bottom: 30px; }
.portfolio-menu ul { padding: 0; margin: 0; list-style: none; }
.portfolio-menu ul li { font-size: 18px; padding: 5px 10px; border-bottom: 2px solid transparent; display: inline-block; margin: 0 10px; cursor: pointer; font-weight: 600; color: #002147; transition: all 0.3s ease; }
.portfolio-menu ul li.active,
.portfolio-menu ul li:hover { color: var(--skyblue); border-bottom: 2px solid var(--skyblue);}
.portfolio-item { margin-bottom: 30px; transition: all 0.4s ease-in-out; }
.portfolio-item img { width: 100%; border-radius: 10px; transition: transform 0.3s ease; background: #FFF;
    padding: 10px; box-shadow: 0px 0px 10px rgb(0 0 0 / 5%); }
.portfolio-item img:hover { transform: scale(1.05); }
/*============== portfolio_sec css =====================*/
.contact_us { background: #44D2F6; background: linear-gradient(0deg, rgba(68, 210, 246, 1) 0%, rgba(16, 33, 71, 1) 100%); }
.contact_us .card { background: #fff; padding:50px; }
.contact_us label{ font-size: 18px; color: var(--black); font-weight:700; margin-bottom: 8px; }
.contact_us input{ border-color: var(--black); height: 48px; font-size: 18px; }
.contact_us textarea{ border-color: var(--black); height: 144px; font-size: 18px;  }
.glightbox-container .ginner-container{ max-width: 700px; padding: 16px; }
.glightbox-clean .gslide-media{ border: 10px solid var(--white); border-radius: 10px;  } 
.copyright_section { padding:10px 0px; background-color:var(--white); border-bottom: 10px solid var(--black); font-size: 14px; color: var(--black); }
.copyright_section .brand-name { font-weight: 600; color: var(--black); } 

@media(max-width:1199px) {
h2 { font-size: 30px; margin-bottom: 20px; }
p { font-size: 16px; }
header .contact_us_btn { margin-left: 15px; font-size: 16px; height: 38px; padding: 10px 15px; }
header .logo img {  max-width: 160px; }
header .navbar-expand-md .navbar-nav .nav-link{ line-height: 30px; margin: 0px 14px; font-size: 16px; }
section { padding:40px 0px; }
.banner_img img{ max-width: 360px; } 
.banner h1{ font-size: 36px; line-height: 50px; margin-bottom: 24px;  } 
.about_us h3 { margin-bottom: 16px; font-size: 24px; }
.about_us .abcolor{ padding: 24px 16px; }
.about_us .abcolor p{ margin-bottom: 0; } 
.contact_us .card{ padding: 32px; }
.contact_us label{ font-size: 16px; margin-bottom: 4px; }
.contact_us input{ font-size: 16px; height: 38px; }
.contact_us textarea { border-color: var(--black); height: 100px; font-size: 16px; }
.contact_us_btn, .sendbtn{ font-size: 16px; height: 38px; padding: 10px 14px; }
}
@media(max-width:991px){
.about_us h3 { margin-bottom: 10px; font-size: 22px; }
.about_us .about_main{ padding: 24px; }
.portfolio-menu ul li{ font-size: 16px; margin: 0 4px; }
.portfolio-menu{    margin-bottom: 20px; }

}
@media(max-width:767px){
header .contact_us_btn { display: inline-block; margin-top:5px; margin-left: 0; } 
header .navbar-expand-md .navbar-nav .nav-link{ padding: 10px;   margin: 0px;   }
 
.banner { padding-top:20px; }
.banner .row{ flex-direction: column-reverse; }
.banner_img{ margin-bottom:10px;  }
.banner h1 br{ display: none; }   
.about_img { margin-bottom: 20px; }
.portfolio-item { margin-bottom: 12px; }


}
@media(max-width:575px){
.about_us .about_main { padding: 10px; }
.offcanvas.hiding, .offcanvas.show, .offcanvas.showing{width: 260px;}
.offcanvas-header{ justify-content: end; }
.offcanvas-body{ padding-top:0; }

}