/*
--------------------------------------------------------------------------------------------------------
* Template Name             :                                                                          *
* Author                    :                                                                          *
* Version                   : 1.0                                                                      *
* Design and Developed by   :                                                                          * 
*-------------------------------------------------------------------------------------------------------
NOTE: This is main stylesheet of template, This file contains the styling for the actual Template.
*/

/*================================================
[  Table of contents  ]
================================================== 
:: Global
    :: Base
    :: Helper Classes
:: Components
    :: Buttons   
    :: Preloader
    :: Animations
:: Layout
    :: Header  
    :: Banner
    :: About
    :: Technologies
    :: contact
    :: Coming Soon 
    :: Back to top 
:: Inner Pages
     
==================================================
[ End table content ]
================================================*/

/*==========================================
    :: Base
==========================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body { font-size:14px; line-height:1.6; letter-spacing:.05em; font-family: 'Poppins', sans-serif; color:#172541; background-color:#ffffff; -webkit-text-size-adjust:none; -webkit-font-smoothing:subpixel-antialiased}
*:focus{outline:none}
h1, h2, h3, h4, h5, h6, [class^=heading-]{margin-top:0; margin-bottom:0; font-family: 'Poppins', sans-serif; letter-spacing:.03em; color:#505050}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, [class^=heading-] a{color:inherit}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, [class^=heading-] a:hover{color:#172541}
a{transition:all .25s ease-in-out}
a, a:focus, a:active, a:hover{text-decoration:none}
a, a:focus, a:active{color:#172541}
a:hover{color:#172541}
a[href*=tel], a[href*=mailto]{white-space:nowrap}
input {outline: medium none !important;} 
button:focus {outline: 0px dotted; outline: 0px auto -webkit-focus-ring-color; }
::selection {background: #484848; color: #ffffff; }
::-moz-selection {background: #484848; color: #ffffff; }
::-webkit-selection {background: #484848; color: #ffffff; }

/*==========================================
    :: Helper Classes 
==========================================*/
/* Color */ 
.text-white {color: #ffffff; }
.text-black {color: #000 !important; } 
.bg_1{background: #f7f7f7;}
.bg_2{background: #3a3939;}
.bg_3{background: #313030;}
.form-control {height: calc(2.3em + .75rem + 2px); border-radius: 0; }


/*==========================================
    :: Buttons 
==========================================*/
/* default Button start */
.button {transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; padding: 10px 25px; display: inline-block; margin: 0; text-decoration: none; white-space: nowrap; vertical-align: middle; text-align: center; cursor: pointer; border: 1px solid #ffffff; outline: 0; box-sizing: border-box; color: #ffffff; position: relative; overflow: hidden; border-radius: 50px; -webkit-border-radius: 50px; background: #0e7f90; }
.button:hover, .button:active, .button:focus {color: #ffffff !important; box-shadow: none !important;}
.button:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity: 1; -webkit-transform: translate(-105%, 0); transform: translate(-105%, 0); background-color: rgba(255, 255, 255, 0.8); }
.button:hover:before {opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); }

.button-info {transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; padding: 10px 25px; display: inline-block; margin: 0; text-decoration: none; white-space: nowrap; vertical-align: middle; text-align: center; cursor: pointer; border: 1px solid #0e7f90; outline: 0; box-sizing: border-box; color: #172541; position: relative; overflow: hidden; border-radius: 50px; -webkit-border-radius: 50px;}
.button-info:hover, .button-info:active, .button-info:focus {color: #ffffff; box-shadow: none !important;  background: #0e7f90;}
.button-info:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity: 1; -webkit-transform: translate(-105%, 0); transform: translate(-105%, 0); background-color: rgba(255, 255, 255, 0.8); }
.button-info:hover:before {opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
 

/*==========================================
    :: Preloader 
==========================================*/
#loader {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #f0f1f0; z-index: 99999; background-image: -moz-linear-gradient(0deg, rgba(11, 61, 132, 0.9) 0%, rgba(3, 40, 92, 0.9) 100%); background-image: -webkit-linear-gradient(0deg, rgba(11, 61, 132, 0.9) 0%, rgba(3, 40, 92, 0.9) 100%); background-image: -ms-linear-gradient(0deg, rgba(11, 61, 132, 0.9) 0%, rgba(3, 40, 92, 0.9) 100%);}
#loader .loader-spinner {width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; background: #ffffff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-animation: scaleout 1.0s infinite ease-in-out; -moz-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out; }


/*==========================================
    :: Animations 
==========================================*/ 
/*Animation rubberBand*/
@-webkit-keyframes rubberBand {
    from {-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
    30% {-webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
    40% {-webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
    50% {-webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
    65% {-webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 
    75% {-webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
    to {-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-moz-keyframes rubberBand {
    from {-moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
    30% {-moz-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
    40% {-moz-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
    50% {-moz-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
    65% {-moz-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 
    75% {-moz-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
    to {-moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes rubberBand {
    from {transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
    30% {transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
    40% {transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
    50% {transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
    65% {transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
    75% {transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
    to {transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}





/*==========================================
    :: Header 
==========================================*/  
#header-sticky {position: fixed; left: 0; top: 0; right: 0; margin-top: -1px; padding: 15px 0; z-index: 8; background: rgb(255 255 255 / 0.8);}
.sticky-menu {width: 100%; background: #fff !important; -webkit-box-shadow: 1px 1px 10px 1px rgba(228, 228, 228, 0.3); box-shadow: 1px 1px 10px 1px rgba(228, 228, 228, 0.3); z-index: 999999; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }
#header-sticky .navbar-collapse > ul > li > a {font-size: 16px;color: #172541; letter-spacing: 0.5px; font-weight: 500; padding: 12px 0 !important; margin: 0 15px;  position: relative;} 
#header-sticky .navbar-collapse > ul > li > a:after {content: ""; position: absolute; height: 2px; width: 0; background: #000; left: 0; right: 0; bottom: 0; margin: 0 auto; transition: ease-in-out all 0.3s; }
#header-sticky .navbar-collapse > ul > li > a:hover{color: #172541; }
#header-sticky .navbar-collapse > ul > li > a:hover:after{width: 100%; }

.sticky-menu .navbar-collapse > ul > li > a {color: #172541  !important; }
#header-sticky .navbar .nav-item:hover .nav-link {color: #172541;} 
.sticky-menu .navbar .nav-item:hover .nav-link {color: #ffffff; }
#header-sticky .dropdown-menu {border: none; border-radius: 0; }
#header-sticky .dropdown-menu {padding-top: 20px; padding-bottom: 20px; }
#header-sticky .dropdown-item {padding: 10px 10px 10px 15px; width: 210px; text-decoration: none; color: #333; background: #ffffff; margin-left: 20px; border-left: 1px solid #f1f1f1; font-weight: 600;}
#header-sticky .dropdown-item:hover {color: #172541; border-left: 1px solid #172541; background: transparent; }

/*Mobile toggle start*/
.navbar-toggler {position: relative; border: transparent;}
.navbar-toggler:focus, .navbar-toggler:active {outline: 0; }
.navbar-toggler span {display: block; background-color: #ffffff; height: 3px; width: 25px; margin-top: 6px; margin-bottom: 6px; -webkit-transform: rotate(0deg); transform: rotate(0deg); left: 0; opacity: 1; }
.navbar-toggler span:nth-child(1), .navbar-toggler span:nth-child(3) {transition: -webkit-transform .35s ease-in-out; transition: transform .35s ease-in-out; transition: transform .35s ease-in-out, -webkit-transform .35s ease-in-out; }
.navbar-toggler:not(.collapsed) span:nth-child(1) {position: absolute; left: 12px; top: 10px; -webkit-transform: rotate(135deg); transform: rotate(135deg); opacity: 0.9; }
.navbar-toggler:not(.collapsed) span:nth-child(2) {height: 12px; visibility: hidden; background-color: transparent; }
.navbar-toggler:not(.collapsed) span:nth-child(3) {position: absolute; left: 12px; top: 10px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); opacity: 0.9; }
/*Mobile toggle end*/

 
/*==========================================
    :: Banner 
==========================================*/ 
.home-wrapper{background: url(../images/img-05.jpg) no-repeat; background-size: cover; }
.home-text{margin-top: -100px; }
.appimamge{position: absolute;bottom: 0;}   


/*==========================================
    :: About 
==========================================*/ 
.box-services{position: relative;}
.first_service {position: relative; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }
.first_service .inner-box {position: relative; background: #ffffff; padding: 15px; margin-bottom: 30px; transition: .5s ease; border-radius: 4px; min-height: 312px;}
.first_service .inner-box:hover{transform: translateY(-10px); box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1); }
.first_service .icon {position: absolute; top: 20px; right: 30px; }
.first_service .icon img {width: 50px; }
.first_service .Services-title {color: #222; line-height: 28px; padding-bottom: 30px; margin-bottom: 20px; position: relative;}
.first_service .Services-title:before {position: absolute; content: ''; background: #e9e6e6; bottom: 0px; left: 0px; width: 50px; height: 3px; }
 
/*==========================================
    :: Technologies 
==========================================*/
.Technologies img {width: 120px; }
.Technologies img:hover{ -webkit-animation: rubberBand 1s linear; animation: rubberBand 1s linear;}


/*==========================================
    :: contact 
==========================================*/
.contact_info_icon {position: absolute; left: 0px; top: 2px; }
.contact_info_right {padding-left: 50px; }
.contact_info_right h5 {margin: 0 0 5px 0;color: #fff;}
.contact_info_right p {line-height: normal;color: #fff; } 
.contact_info_right a{color: #fff;}
.contact_info ul li {position: relative; }


/*==========================================
    :: Coming Soon 
==========================================*/
.Coming-main-bg {background: #f7f7f7; }


/*==========================================
    :: Back to top 
==========================================*/  
.back-to-top {position: fixed; bottom: 15px; right: 15px; width: 40px; height: 40px; color: #ffffff; font-size: 24px; text-transform: uppercase; line-height: 40px; border-radius: 50px; text-align: center; z-index: 9; cursor: pointer; background: #0e7f90; display: none; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; animation: BounceAnimation 4s infinite; -webkit-animation: BounceAnimation 4s infinite; -moz-animation: BounceAnimation 4s infinite; -o-animation: BounceAnimation 4s infinite;}
.back-to-top:hover {box-shadow: 0px 0px 45px rgba(0,0,0,0.5); }
.back-to-top a {color: #ffffff;}
.back-to-top.show {display: inline-block;}