/* ==== Site Name: index  ====



PAGE BLOCKS:-



    01 - GENERAL STYLES

    02 - GLOBAL STYLES

    03 - GLOBLE-BLOCKS

    04 - HEADER

    05 - FOOTER

    06 - BANNER





*/



/* ===== 01-GENERAL STYLES  ====== */

/*html { scroll-behavior: smooth; }*/

body { width:100%; height:100%;	margin:0; padding:0; color:#1f3036; font-size: 16px; font-weight: 300; font-family: 'Montserrat', sans-serif;background-color: #fff;}

ul { padding:0;	margin:0px;}

li { list-style:none; }

a {color:#1f3036; text-decoration:none; transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; color:inherit; }

a:hover, 

a:focus { text-decoration:inherit; outline:none; transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; }

a img { border:none; transition: all 0.3s ease 0s; }

img {max-width:100%;}



h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; color: #ffffff; font-weight: 700; }

h1 { font-size: 66px; line-height: 80px; }

h2 { font-size: 56px; line-height: 67px; text-align:center; }

h3 { font-size: 34px; line-height: 40px; }

h4 { font-size: 24px; line-height: 30px; }

h5 { font-size: 20px; line-height: 26px; }

p { margin: 0 0 15px; font-size: 18px; line-height: 28px; color: #ffffff; font-weight:300; }

body.overflow-y { overflow-y:hidden; }

section { padding: 70px 0; }



.container-fluid { max-width: 1500px; width:100%; }



/*======= 02-GLOBAL-STYLES ==========*/

.btn { font-size: 20px; font-weight: 700; color: #ffffff; border: 2px solid #003960; background-color: #003960; display: inline-block; border-radius: 5px; padding: 16px 34px; line-height: initial; text-transform:uppercase; }

.btn:hover { color:#fff; }

.btn:focus { color:#fff; }

.btn.blue { font-size: 16px; text-transform: capitalize; background-color: #006198; border-color: #006198; padding: 12px 42px; }



.social-icons li { display: inline-block; padding-right:29px; font-size:20 px; color:#ffffff; }

.social-icons li:last-child { padding-right:0; }



/*======= 03-GLOBAL-BLOCKS ==========*/

.service-block { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 60px; }

.box { flex: 0 0 30.3%; background-color:#ffffff; text-align:center; padding:0 24px; margin:0 1.5%; position: relative; z-index: 4; }

.box figure { width: 125px; height: 125px; background-color: rgb(22, 163, 243, 0.15); border-radius: 50%; margin: -60px auto 15px; position: relative; display: flex; align-items: center; justify-content: center; }

.box figure strong { width:101px; height:101px; background-color:#006198; border-radius:50%; display: flex; align-items: center; }

.box figure img { margin:0 auto; }

.box h4 { color:#0a355e; }

.box h4 strong { display:block; }

.box p { color:#000000; margin-bottom:5px; font-size:16px; line-height:24px; }

.box p strong { display:block; }

.box .btn { top: 20px; position: relative; }



form .form-group { padding: 5px 0; }

form .form-group .form-control { font-size:14px; font-weight:400; color:#7f7f7f; border:1px solid #005b8e; box-shadow:none; height:50px; }

form .form-group textarea.form-control { height:100px; resize:none; }

form .form-group .form-control::-webkit-input-placeholder { color: #7f7f7f; }

form .form-group .form-control::-moz-placeholder { color: #7f7f7f; }

form .form-group .form-control:-ms-input-placeholder { color: #7f7f7f; }

form .form-group .form-control:-moz-placeholder { color: #7f7f7f; }

form .btn.blue { display:block; width:100%; padding: 16px 0; }



/*======= 04-HEADER ==========*/

body.horizontal { overflow-x: hidden; }

body.horizontal .wraper { display: block; min-width: 100vw; }

body.horizontal .wraper section { width: 100vw; float:left; }



.wraper { overflow:hidden; }

.mobile-toggle{ display: none; }



header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9; padding: 7px 0 90px; background-image:url(images/header-bg.png); background-repeat:no-repeat; background-position:top center; background-size:100% 100%; }

header .logo { float: left; padding-top: 15px; max-width: 180px; width: 100%; }

header .navbar-nav li { float:none; padding:0 35px; margin-bottom:20px; }

header .navbar-nav li a { font-size: 40px; font-weight: 400; position: relative; font-style: italic; padding: 0; text-transform: capitalize; color: #fff; letter-spacing: 0.5px; padding: 0; line-height: 25px; z-index:9; display:inline-block; padding:10px 15px; }

header .navbar-nav li a:after { content:""; position:absolute; bottom:-4px; left:0; width:0; height:2px; background-color:#ffffff; transition:all ease-in-out 0.5s; }

header .navbar-nav li a:hover::after { width:100%; transition:all ease-in-out 0.5s; }

header .navbar-nav.is-active li { animation: fadeIn 1s ease-in both; position:relative; z-index:99; }

header .navbar-nav.is-active li:nth-child(4) { animation-delay: 0.8s; }

header .navbar-nav.is-active li:nth-child(3) { animation-delay: 1.0S; }

header .navbar-nav.is-active li:nth-child(2) { animation-delay: 1.2s; }

header .navbar-nav.is-active li:nth-child(1) { animation-delay: 1.4s; }

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translate3d(0, -30%, 0);

    }

    to {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

}



.navbar__toggle.is-active .navicon:after,

.navbar__toggle.is-active .navicon:before { height:2px; width:50px; transition:all ease-in-out 0.9s; }

button.navbar__toggle.is-active { position: absolute; margin-right: 0; left: 20%; top: 35px; z-index: 99; transition:all ease-in-out 0.9s; }





header .phone { float: right; font-size: 26px; font-weight: 700; color: #fff; padding: 9px 0 0; letter-spacing: 1px; }

header .phone i { margin-right:7px; }

header .navbar__toggle { float:left; position:relative; z-index:99; margin-right: 45px; }



.navbar__toggle{display: none;}

.navbar-nav { text-align:left; padding-top:15%; position: fixed; top: 0; left:-25%; height: 100%; z-index: 99999; width: 25%; background-color:transparent; z-index: 0; }

.navbar-nav:before,

.navbar-nav:after{ position: absolute; content: ""; top:0; left:0; left:0; height: 100%; width: 100%; border-bottom-right-radius:100%; transition: all 1.0s ease 0s;  }

.navbar-nav:after{ background-color: rgb(0,97,157,0.9); z-index: 0; }

.navbar-nav.is-active{ left:0; }

.navbar-nav.is-active:after { border-radius:0; transition: all 1.0s ease 0s;  }

body,

header,

.navbar-nav,

.navbar-nav.is-active,

header.is-active,

body.is-active { -webkit-transition:all ease-in-out 1.0s; -moz-transition:all ease-in-out 1.0s; -ms-transition:all ease-in-out 1.0s; transition:all ease-in-out 1.0s; }

body.is-active{ left:280px; }



/* mobile nav open-close toggle styles */

.navbar__toggle{ background:none; border:none; font-size: 16px; font-weight: 900; text-decoration: none; display: inline-block; padding:0; margin:0;     cursor: pointer; user-select: none; opacity: 0.99; outline:none !important; position:absolute; top:14px; left:15px; }

.navicon { position: relative; width: 23px; height: 4px; background:#ffffff; display:inline-block; vertical-align:middle; margin-left:0.313rem; top:-1px; }

.navicon:before,

.navicon:after { display: block; content: ""; width: 23px; height: 4px; background:#ffffff; position: absolute; z-index: -1; transition: 0.5s 0.25s; }

.navicon:before { top:8px; }

.navicon:after { top: -8px; }

.navicon,

.navbar__toggle,

.navbar__toggle .navicon:before,

.navbar__toggle .navicon:after,

.navbar__toggle:hover .navicon:before,

.navbar__toggle:hover .navicon:after { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

.navbar__toggle.is-active:not(.steps) .navicon:before,

.navbar__toggle.is-active:not(.steps) .navicon:after { top: 0 !important; }



/* × and + */

.navbar__toggle.is-active .navicon { background: transparent; }

.navbar__toggle.is-active .navicon:before { -webkit-transform: rotate(-45deg);  -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); height:3px; }

.navbar__toggle.is-active .navicon:after { -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); height:3px; }



/*======= 05-FOOTER ==========*/

footer { position: fixed; bottom: 0; z-index: 3; width: 100%; background-image:url(images/footer-bg.png); background-repeat:no-repeat; background-position:bottom center; background-size: 100% 100%; padding: 80px 0 10px; }

footer p { color:#fff; float:left; margin:25px 0 0; }

footer a:hover { color:#fff; }

footer .follow { float:right; }

footer h5 { font-size:18px; font-weight:600; color:#ffffff; line-height:24px; margin-bottom:4px; }



/*======= 05-BANNER ==========*/

section { background-repeat:no-repeat !important; background-position:center !important; background-size:cover !important; height:auto; min-height: 100vh; display:flex; align-items:center; display:flex; min-width:100vw; }

section h2 { text-shadow:2px 0 10px rgb(0, 0, 0, 0.29); }



.banner .content { background-color: rgb(255, 255, 255, 0.75); display:flex; flex-wrap:wrap; align-items:center; padding: 53px 24px 63px 40px; opacity:0; }

.banner.active .content { animation: fadeUp 1s ease-in both; animation: fadeUp 1s ease both; animation-delay: 0.5s; opacity:1; }

.banner .content figure { flex:0 0 40%; padding: 0 30px 0 0; }

.banner .content .text-block { flex:0 0 60%; padding:0 15px; }

.banner p { color:#000000; font-weight:400; margin-bottom: 27px; }

.banner p strong { display:block; font-weight:400; }



/*======= 06-ABOUT-US ==========*/

.about-us .about-block { display:flex; flex-wrap:wrap; align-items:center; flex-direction:row-reverse; }

.about-us .content { flex:0 0 55%; padding-right:25px; opacity:0; }

.about-us .img-block { position:relative; height:520px; }

.about-us figure img { position: absolute; top: 0; left: 20px; z-index: 1; border-radius: 7px; box-shadow:26px 0 37px rgb(0, 0, 0, 0.21); opacity:0; }

.about-us figure .img-2 { right: 20px; left: inherit; z-index: 2; top: 46px; }

.about-us figure .img-3 { top: inherit; bottom: 0; z-index: 3; left: 0; }

.about-us.active figure .img-1 { animation: fadeTop 1s ease-in both; animation: fadeTop 1s ease both; animation-delay: 0.5s; opacity:1; }

@keyframes fadeTop {

    from {

        opacity: 0;

        transform: translate3d(0, -30%, 0);

    }

    to {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

}

.about-us.active figure .img-2 { animation: fadeRight 1s ease-in both; animation: fadeRight 1s ease both; animation-delay: 1s; opacity:1; }

@keyframes fadeRight {

    from {

        opacity: 0;

        transform: translate3d(30%, 0, 0);

    }

    to {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

}

.about-us.active figure .img-3 { animation: fadeBottom 1s ease-in both; animation: fadeBottom 1s ease both; animation-delay: 1.5s; opacity:1; }

@keyframes fadeBottom {

    from {

        opacity: 0;

        transform: translate3d(0, 30%, 0);

    }

    to {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

}



.about-us.active .content { animation: fadeUp 1s ease-in both; z-index:2; animation: fadeUp 1s ease both; animation-delay: 0.5s; opacity:1; }

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translate3d(0, 20%, 0);

    }

    to {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

}

.about-us .img-block { flex:0 0 45%; }

.about-us p { margin-bottom:13px; }

.about-us p strong { font-weight:600; }



/*======= 07-SERVICES ==========*/

.services .container-fluid { max-width:1280px; }

.services .box { opacity:0; }

.services.active .box { animation: fadeUp 1s ease-in both; animation: fadeUp 1s ease both; animation-delay: 0.5s; opacity:1; }

.services.active .box:nth-child(2) { animation-delay:1.0s }

.services.active .box:nth-child(3) { animation-delay:1.5s }

.services.active .box figure { animation: fadeDown1 1s ease-in both; animation: fadeDown1 1s ease both; animation-delay: 1s; }

.services.active .box:nth-child(2) figure { animation-delay:1.5s }

.services.active .box:nth-child(3) figure { animation-delay:2s }

@keyframes fadeDown1 {

    from {

        opacity: 0;

        transform: translate3d(0, -40%, 0);

    }

    to {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

}

.services .modal-dialog { max-width:1000px; width:100%; position:relative; top: 50%; transform: translateY(-50%) !important; }

.services .modal-dialog figure { width: 125px; height: 125px; background-color: rgb(22, 163, 243, 0.15); border-radius: 50%; margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; top: -50px;  left: 0; right: 0; position:absolute; }

.services .modal-dialog figure strong { width:101px; height:101px; background-color:#006198; border-radius:50%; display: flex; align-items: center; }

.services .modal-dialog figure img { margin:0 auto; }

.services .modal-content { padding: 80px 20px 30px; text-align:center; }

.services .modal-content .close { font-size: 30px; opacity: 1; position: absolute; top: -10px; right: -8px; background-color: #006198; color: #fff; width: 35px; height: 35px; border-radius: 50%; font-weight: 300; }

.services .modal h3 { color:#0a355e; font-size:25px; text-align:center; }

.services .modal h4 { color:#000; font-size:20px; margin-bottom:10px; line-height:25px; }

.services .modal p { color:#000; margin-bottom:20px; }



/*======= 08-CONTACT-US ==========*/

.contact-us .touch h2 { margin-bottom:26px; }

.contact-us ul li { display:flex; align-items:center; margin-bottom:30px; }

.contact-us ul li:last-child { margin-bottom:0; }

.contact-us ul li i { font-size:26px; color:#006198; background-color:#ffffff; width:61px; height:61px; border-radius:50%; display:flex; align-items:center; justify-content: center; opacity:0 }

.contact-us ul li h5 { margin-bottom:5px; padding-left:15px; }

.contact-us ul li h5 strong { display: block; font-size: 16px; color: #ffffff; font-weight: 300; margin-top: 6px; opacity:0; }

.contact-us .request { background-color:#ffffff; border-radius:6px; padding: 30px 47px 35px; opacity:0; }

.contact-us .request h3 { color:#006198; margin-bottom: 15px; }

.contact-us .touch { padding-top:40px; }



.contact-us.active .touch ul li i { animation: fadeLeft 1s ease-in both; animation: fadeLeft 1s ease both; animation-delay: 0.5s; opacity:1; }

.contact-us.active .touch ul li:nth-child(2) i { animation-delay: 0.7s; }

.contact-us.active .touch ul li:nth-child(3) i { animation-delay: 0.9s; }

.contact-us.active .touch ul li:nth-child(4) i { animation-delay: 1.0s; }

.contact-us.active .touch ul li strong { animation: fadeUp 1s ease-in both; animation: fadeUp 1s ease both; animation-delay: 0.4s; opacity:1; }

.contact-us.active .touch ul li:nth-child(2) strong { animation-delay: 0.6s; }

.contact-us.active .touch ul li:nth-child(3) strong { animation-delay: 0.8s; }

.contact-us.active .touch ul li:nth-child(4) strong { animation-delay: 0.9s; }



@keyframes fadeLeft {

    from {

        opacity: 0;

        transform: translate3d(-40%, 0, 0);

    }

    to {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

}



.contact-us.active .request { animation: fadeIn 1s ease-in both; animation: fadeIn 1s ease both; animation-delay: 0.1s; opacity:1;  }

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translate3d(0, -5%, 0);

    }

    to {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

}







.form-group label.error{ font-size:12px; color:#F00; }

p.message{ color:#000; font-size:12px; }