@charset "utf-8";

/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Table of Contents
-----------------------------------------------------------------------------
1. Clean Base
2. Base Typography
3. Images
4. Links
5. Forms
6. Tables
7. Framework 
*/

/* 1. Clean Base
------------------------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, 
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, a, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; list-style:none; outline:none; -webkit-font-smoothing: subpixel-antialiased; -webkit-tap-highlight-color:rgba(0,0,0,0);}

html,body { -webkit-text-size-adjust:none; /*height: 100%;*/ }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block; width: 100%;}
iframe {vertical-align: top;}
textarea:focus, input:focus, a, div, img { outline: none; }

*,
*:before,
*:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* 2. Base Typography
------------------------------------------------------------------------------*/
body{ color:#000; font-size:16px; font-family: 'Lato', sans-serif; font-weight:400; line-height:1.5; background-color: #fff;display: flex;flex-wrap: wrap;}

.h1, .h2, .h3, .h4, .h5, .h6, 
h1, h2, h3, h4, h5, h6 {color: #485564; line-height: 1.2; font-weight: 400; font-family: inherit;}

.h1, h1 {font-size: 44px; margin-bottom: 20px; font-weight: 300;}
.h2, h2 {font-size: 32px; margin-bottom: 20px; font-weight: 600; text-transform: uppercase;}
.h3, h3 {font-size:25px; margin-bottom: 18px;}
.h4, h4 {font-size:22px; margin-bottom: 17px;}
.h5, h5 {font-size:20px; margin-bottom: 15px;}
.h6, h6 {font-size:18px; margin-bottom: 10px;}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a {color: inherit; text-decoration: none;}

p { color:#7F8893; font-size:16px; font-weight:400; line-height:1.6; margin-bottom: 30px; }
p:last-child { margin-bottom:0; }

ul{ margin:0;margin-left: 20px; padding:0; }
ul li{ font-size:16px;  color:#000; font-weight:400; line-height:1.5;padding: 0;margin-bottom: 8px; }
ul li:last-child{margin-bottom: 0;}
ul > li { list-style:outside disc; }

ol{ margin:0;margin-left: 20px; padding:0; list-style: none; }
ol li{ font-size:16px;  color:#000; font-weight:400; line-height:1.5;padding: 0;margin-bottom: 8px;  }
ol > li { list-style: outside decimal; }

blockquote{ display:block; text-align:left; margin-bottom:20px; position:relative; background:#f3f3f3; padding:20px 20px; border-left:4px solid #1589cb;line-height: 2;font-size: 20px; font-style: italic;margin-bottom: 25px;}
blockquote p{ font-size:inherit; font-weight:inherit; line-height:inherit; }

hr {border:0 #000 solid; border-top-width:1px; clear:both; height:0;margin: 10px auto 40px;}

img{ -webkit-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; border:none; max-width: 100%; vertical-align: top; height: auto; }
img[src$=".svg"] {width: 100%;}
img:hover{  }

/* 4. Link
------------------------------------------------------------------------------*/
a{ color:#4777ac; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
a:hover{ color:#000; text-decoration: none; }
a:focus {outline: none;}

/* 5. Forms
------------------------------------------------------------------------------*/
label {color:#000; font-size:15px; font-weight:400; line-height:1.5;  margin-bottom:5px; display: block;}
input, 
textarea, 
button { font-family: 'Lato', sans-serif;  }
input[type="text"],
input[type="submit"],
input[type="button"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea {-webkit-appearance: none; outline: none;}

input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="search"],
input[type="number"],
textarea { border:1px solid #dedede; padding:0 15px; color:#000; font-size:16px; height:46px; font-weight: 400; width: 100%;}

textarea{ height:150px; resize:none; overflow: auto; padding: 20px 15px; }

input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
input[type="tel"]:focus, 
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus {border-color: #000}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {-webkit-appearance: button; cursor: pointer; background-color: #000; padding: 0 40px; height: 50px; display: inline-block; vertical-align: top; font-size: 14px; font-weight: 600; line-height: 1.52857143; text-align: center; border: none; text-transform: uppercase; border-radius: 0px; color: #FFED00; }

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {background-color: #000; color: #fff;}

input[type="search"] {-webkit-appearance: textfield;}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}

::-webkit-input-placeholder { opacity: 1 !important; color: rgba(255,255,255,0.5); }
:-moz-placeholder { opacity: 1 !important; color: rgba(255,255,255,0.5); }
::-moz-placeholder { opacity: 1 !important; color: rgba(255,255,255,0.5); }
:-ms-input-placeholder { opacity: 1 !important; color: rgba(255,255,255,0.5); }

.form-group {margin-bottom: 30px;}

/* buttons */
.btn { display: inline-block; height: 46px; vertical-align: top; padding: 0 25px; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; line-height: 44px; text-align: center; border: 2px solid #ffed00; text-transform: uppercase; border-radius: 0px; color: #000; background-color: #ffed00; }
.btn:hover,
.btn:focus { color: #fff; background-color: #000; border-color: #000; text-decoration: none}
.btn-sm {padding: 8px 16px; }
.btn-md {padding: 12px 24px;}
.btn-link { color: #98989c; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 2px; border-bottom: 1px solid #98989c; margin-bottom: 2px; }
.btn-link:hover,
.btn-link:focus{ color: #0eb769; font-weight: 700; text-decoration: none; border-bottom: 1px solid #0eb769; }

.btn-border{ border: 2px solid #ffed00; background-color: transparent; color: #000; }
.btn-border:hover{ background-color: #ffed00; color: #000; border-color: #ffed00; }

.black-btn{ background-color: #000; color: #ffed00; border-color: #000;  }

.btn-white{ background-color: #fff; color: #000; border-color: #fff; }
.btn-white:hover{ background-color: #000; color: #fff; border-color: #000; }
.btn-border-white{ border-color: #fff; color: #fff; }
.btn-border-white:hover{ background-color: #fff; color: #000; border-color: #fff; }

.btn-black{ background-color: #000; color: #fff; border-color: #000; }
.btn-black:hover{ background-color: #fff; color: #000; border-color: #fff; }
.btn-border-black{ border-color: #000; color: #000; }
.btn-border-black:hover{ background-color: #000; color: #fff; border-color: #000; }

.a-btn{ display: flex; align-items: center; }
.a-btn span{ position: relative; color: #485564; text-transform: uppercase; }
.a-btn span:before{ -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 1px; background-color: #485564; }
.a-btn img { -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; max-width: 23px; width: 100%; margin-left: 12px; }
.a-btn:hover span:before{ width: 0; }
.a-btn:hover img{ margin-left: 17px; }

.border-btn{ border: 1px solid #485564; font-size: 16px; color: #485564; font-weight: 500; text-transform: uppercase; height: 45px; max-width: 260px; width: 100%; display: flex; align-items: center; justify-content: center; }
.border-btn:hover{ background-color: #485564; color: #fff; }


/* 6. Tables
------------------------------------------------------------------------------*/
table {border-spacing: 0; border-collapse: collapse;}
td {text-align: left; font-weight: normal;}
.table-responsive {display: block;width: 100%;overflow-x: auto;-webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar}
.table-bordered{width: 100%;max-width: 100%;text-align: left;}
.table-bordered th, 
.table-bordered td{ vertical-align: bottom;border-bottom: 1px solid #ddd;padding: 10px;}

/* 7. Layout Framework
------------------------------------------------------------------------------*/
/* main container */
#wrapper { z-index: 1; width: 100%;display: flex;min-height: 100%;position: relative;flex-wrap: wrap;background-color: #fff;justify-content: space-between;align-content: space-between;}
.main-container{width:100%;}
.container {max-width: 1200px; margin: 0 auto; width: 100%;}
.body-content ul, 
.body-content ol{margin-bottom: 20px;}
.body-content ul ul, 
.body-content ul ol,
.body-content ol ol,
.body-content ol ul{margin-bottom: 0;}

/* header */
.main-header { padding: 15px 30px; width:100%; height:auto; background-color: #485564; display: flex; align-items: center; justify-content: space-between;}
.main-header .logo img{ max-width: 197px; width: 100%;  }
.main-header .right-head{ display: flex; align-items: center; }

header.sticky{position: fixed; z-index: 99; width: 100%; top: 0; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 900ms; animation-duration: 900ms; -webkit-animation-timing-function: cubic-bezier(0.2, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.2, 1, 0.22, 1); -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-fill-mode: none; animation-fill-mode: none; -webkit-animation-play-state: running; animation-play-state: running; border-bottom: 0; display: block;}
@-webkit-keyframes fadeInDown {
	from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
	to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInDown {
	from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
	to { opacity: 1; -webkit-transform: none; transform: none; }
}

/* nav */
nav.navbar{ padding: 0; }
nav ul{ list-style: none; padding: 0; margin: 0; align-items: center; }
nav ul li{ list-style: none; padding: 0 1.5rem; margin: 0; }
nav ul li a{ text-transform: uppercase; color: #fff; font-weight: 500; font-size: 18px; padding: 0; display: inline-block; }
nav ul li a:hover{ color: #fff; }
nav ul li a.active{ color: #fff; }
nav ul li:last-child { padding-right: 0; }
nav ul li:last-child a{ font-size: 20px; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background-color: transparent; color: #fff; padding: 0; border: 1px solid #fff; }
nav ul li:last-child a:hover{ background-color: #fff; color: #485564; }



/* footer */
.main-footer { background-color: #485564; padding: 30px 0; width:100%; height:auto; line-height: normal; bottom: 0; z-index: 0;}
.main-footer .container { max-width: 970px; }
.main-footer .footer-inner{ display: flex; justify-content: space-between; align-items: center; }
.footer-inner .single-left{ width: 100%; max-width: 90px; }
.single-left a.logo img{ width: 100%; }
.single-right{ display: flex; align-items: flex-start; }
.single-right .single-block{ margin-left: 60px; }
.single-right .single-block p{ color: #fff; margin: 0 0 12px; }
.single-right .single-block p:last-child{ margin: 0; }
.single-right .single-block p a{ color: #fff; }
.single-right ul{ display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.single-right ul li{ margin: 0 20px 0 0; }
.single-right ul li::marker { display: none; font-size: 0; }
.single-right ul li a { color: #fff; height: 30px; width: 30px; border: 1px solid #fff; border-radius: 100%; display: flex; align-items: center; justify-content: center; }
.single-right ul li a:hover{ background-color: #fff; color: #485564; }


/*--------- home page ------------*/
.banner-section{ position: relative; }
.bg-color{ position: absolute; left: 0; top: 0; width: 100%; content: ""; background-color: rgba(233,240,244,0.6); height: 700px; }
.banner-section .big-leaf{ position: absolute; left: 0; top: 0; }
.banner-section .small-leaf{ position: absolute; right: 0; top: 438px; }
.banner-slider{ padding-top: 60px; }
.single-banner{ display: flex !important; align-items: flex-start; }
.single-banner .banner-left{ max-width: 620px; width: 100%; margin-top: 100px; display: flex; align-items: flex-start; }
.single-banner .banner-left span{ max-width: 175px; width: 100%; font-family: 'Montserrat', sans-serif; color: #fff; font-size: 140px; line-height: 1; font-weight: 500; margin-right: 30px; }
.single-banner .banner-left h1{ margin: 0 0 10px; text-transform: uppercase; }
.single-banner .banner-left strong{ font-weight: 600; display: block; }
.single-banner .banner-left p{ text-transform: capitalize; font-size: 20px; margin: 0; color: #9DAFBA; font-weight: 300; padding-right: 100px; }
.single-banner .banner-right{ width: calc(100% - 620px); }
.single-banner .image-block{ position: relative; height: 700px; border: 12px solid #fff; border-bottom: 0; border-radius: 100px 100px 0 0; overflow: hidden; }
.single-banner .image-block img{ position: absolute; left: 50%; top: 50%; height: 100%; width: 100%; object-fit: cover; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.banner-slider .slick-dots{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; list-style: none; }
.banner-slider .slick-dots li{ margin: 0; padding: 0; }
.banner-slider .slick-dots li::marker { display: none; font-size: 0; }
.banner-slider .slick-dots li button{ padding: 0; outline: none; font-size: 0; height: 55px; width: 2px; background-color: #B6CBDA; }
.banner-slider .slick-dots li.slick-active button{ width: 4px; background-color: #485564; margin-left: -1px; border-radius: 2px; }
.title-block{ display: flex; flex-wrap: wrap; align-items: flex-end; }
.title-block span{ line-height: 1.2; margin-right: 30px; font-size: 100px; font-weight: 500; color: #F0F4F7; font-family: 'Montserrat', sans-serif;}
.about-section{ padding: 100px 0 50px; background-image: url(../images/about-bg.png); background-repeat: no-repeat; background-size: contain; background-position: top 30px right; }
.about-section .title-block{ margin: 0 0 40px; }
.about-inner{ display: flex; align-items: center; }
.about-inner .about-text{ width: 50%; padding-left: 60px; padding-right: calc((100% - 1170px + 30px) / 2); }
.about-inner .about-text h3{ font-weight: 600; line-height: 1.6; }
.about-section .image-block{ width: 50%; }
.about-section .image-block img{ width: 100%; }
.services-section{ padding: 80px 0; display: flex; align-items: flex-start; padding-left: calc((100% - 1170px + 30px) / 2); overflow: hidden; }
.services-section .service-text{ max-width: 150px; width: 100%; margin-right: 50px; }
.service-slider .slick-slide{ margin-right: 28px; max-width: 360px; width: 100%; }
.service-slider .single-slider{  }
.service-slider .single-slider .image-block{ height: 400px; position: relative; overflow: hidden; margin: 0 0 20px; }
.service-slider .single-slider .image-block img{ position: absolute; left: 50%; top: 50%; height: 100%; width: 100%; object-fit: cover; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.service-slider .single-slider h3{ font-size: 26px; line-height: 1.5; color: #485564; font-weight: 600; margin: 0 0 10px; }
.service-slider .single-slider p{ margin: 0 0 20px; }
.service-slider .slick-arrow{ height: 100px; outline: none; border-radius: 0; font-size: 0; width: 146px; position: absolute; bottom: -100px; }
.service-slider .slick-arrow.slick-prev{ background-color: #B6CBDA; left: -200px; top: 200px; }
.service-slider .slick-arrow.slick-prev:before{ color: #fff; content: '\f177'; font: normal normal normal 30px/1 FontAwesome; }
.service-slider .slick-arrow.slick-next{ left: -200px; top: 300px; background-color: #485564; }
.service-slider .slick-arrow.slick-next:before{ color: #fff; content: '\f178'; font: normal normal normal 30px/1 FontAwesome; }
.portfolio-section{ padding: 80px 0; background-image: url(../images/about-bg.png); background-repeat: no-repeat; background-size: contain; background-position: top 30px right; }
.portfolio-inner{ display: flex; align-items: flex-start; justify-content: space-between; }
.portfolio-inner .portfolio-block{ max-width: 550px; width: 100%; padding-right: 20px; }
.portfolio-inner .portfolio-block:last-child{ padding-left: 20px; padding-right: 0; }
.portfolio-inner .title-block{ margin: 0 0 40px; }
.portfolio-inner .title-block span{ width: 100%; margin: 0 0 5px; }
.portfolio-inner .title-block h2{ width: 100%; margin: 0 0 15px; }
.portfolio-inner .single-block{ margin: 0 0 40px; }
.portfolio-inner .single-block:last-child{ margin: 0; }
.portfolio-inner .image-block{ margin: 0 0 20px; }
.portfolio-inner .single-block h3{ font-size: 24px; font-weight: 600; margin: 0 0 15px; }
.portfolio-inner .single-block p{ margin: 0 0 10px; }
.contact-section{ padding: 50px 0 80px; position: relative; }
.contact-leaf{ position: absolute; right: 0; bottom: 50px; }
.contact-section .bg-color{ position: absolute; width: calc(100% - 200px); z-index: -1; top: 230px; height: 206px; background-color: #F4F7F9; left: 0; }
.contact-inner { display: flex; align-items: flex-start; justify-content: space-between; }
.contact-inner .contact-left{ max-width: 450px; width: 100%; margin-right: 38px; }
.contact-left .title-block{ margin: 0 0 30px; }
.contact-left .title-block span{ width: 100%; margin: 0; }
.contact-left .title-block h2{ width: 100%; margin: 0; }
.address-block{ margin: 0 0 40px; }
.address-block .single{ margin: 0 0 20px; }
.address-block h4{ color: #485564; font-size: 20px; font-weight: 600; margin: 0 0 10px; }
.address-block .single a{ color: #7F8893; font-size: 16px; }
.contact-right{ position: relative; width: calc(100% - 450px - 38px); padding: 40px 50px; }
.border1{ position: absolute; width: 100%; height: 2px; background-color: #485564; left: 0; }
.border2{ position: absolute; width: 100%; height: 2px; background-color: #485564; left: 0; bottom: 40px;}
.border3{ position: absolute; width: 2px; height: 100%; background-color: #485564; left: 50px; top: 0;}
.border4{ position: absolute; width: 2px; height: 100%; background-color: #485564; right: 50px; top: 0;}
.contact-right form{ background-color: #fff; padding: 40px 50px; }
.contact-right form .input-block{ margin: 0 0 20px; }
.contact-right form label{ color: #7F8893; font-size: 14px; margin: 0 0 10px; }
.contact-right form .input{ border: 1px solid #485564; color: #485564; height: 46px; padding: 0 12px;}
::-webkit-input-placeholder { color: #485564;}
:-ms-input-placeholder { color: #485564;}
::placeholder {color: #485564;}
.contact-right form textarea{ border: 1px solid #485564; color: #485564; padding: 10px 12px; height: 200px;}
.contact-right form .submit{ -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; width: 100%; background-color: #485564; color: #fff; text-transform: uppercase; height: 46px; padding: 0 12px; text-align: center; }
.contact-right form .submit:hover { background-color: #000; }



/* Contact Page */
.inner-banner-section{ position: relative; background-color: rgba(233,240,244,0.6); overflow: hidden; }
.inner-banner-section .big-leaf{ position: absolute; left: 0; top: 0; }
.inner-banner-section .small-leaf{ position: absolute; right: 0; bottom: 0; }
.inner-banner-section .container{ position: relative; }
.inner-banner-left{ padding: 100px 0; max-width: 300px; width: 100%; }
.inner-banner-section h1{ margin: 0 0 10px; text-transform: uppercase; }
.inner-banner-section strong{ font-weight: 600; }
.inner-banner-section p{ font-size: 20px; margin: 0; color: #9DAFBA; font-weight: 300; padding-right: 0; }
.contact-page-section{ padding: 100px 0 80px; }
.contact-page-section .bg-color{ top: 90px; }



/* Services Page */
.top-content-section{padding: 100px 0 0; text-align: center;}
.top-content-section h2{ text-transform: capitalize; }
.top-content-inner{ max-width: 800px; width: 100%; margin: 0 auto; }
.services-page-section{ padding: 100px 0; }
.single-service{ margin: 0 0 100px; position: relative; }
.single-service:last-child{ margin: 0; }
.single-service:nth-child(2n) .service-inner .left-block{ order: 1; }
.single-service .bg-color{ position: absolute; width: calc(100% - 200px); z-index: -1; top: 50%; transform: translateY(-50%); height: 206px; background-color: #F4F7F9; left: 0; }
.service-inner{ display: flex; align-items: center; justify-content: space-between; }
.service-inner .left-block{ width: 48%; }
.service-inner .left-block .image-block{ position: relative; padding: 70% 0 0 0; margin: 0; overflow: hidden; }
.service-inner .left-block img{ width: 100%; height: 100%; object-fit: cover; position: absolute; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); left: 50%; top: 50%; }
.service-inner .right-block{ width: 48%; }
.service-inner .right-block span{ color: #7F8893; display: block; margin: 0 0 10px; }
.service-inner .right-block h2{ text-transform: capitalize; }
.service-inner .right-block p{ padding-right: 50px; }


/* Portfolio Page */
.portfolio-page-section{ padding: 100px 0; }



/* About Page */
.about-page-section{ padding: 100px 0; }
.single-about{ margin: 0 0 100px; position: relative; }
.single-about:last-child{ margin: 0; }
.single-about:nth-child(2n) .about-inner .left-block{ order: 1; }
.about-inner{ display: flex; align-items: center; justify-content: space-between; }
.about-inner .left-block{ width: 48%; }
.about-inner .left-block .image-block{ position: relative; margin: 0; overflow: hidden; }
.about-inner .left-block img{ width: 100%; object-fit: cover; }
.about-inner .left-block img.hover{ opacity: 0; position: absolute; left: 0; top: 0; }
.about-inner .left-block img.hover:hover{ opacity: 1; }
.about-inner .right-block{ width: 48%; }
.about-inner .right-block span{ color: #7F8893; display: block; margin: 0 0 10px; }
.about-inner .right-block h2{ text-transform: capitalize; }
.about-inner .right-block p{ padding-right: 0; }
.about-inner .right-block h4{ line-height: 1.4; background-color: #f5f5f5; padding: 20px 30px; border-left: 3px solid #485564; margin: 0 0 30px; }
.about-inner .right-block h4 strong{ font-size: 22px; margin: 10px 0 0; display: inline-block; width: 100%; }

.vision-section{ background-color: #f5f5f5; padding: 70px 0; margin: 0 0 50px; }
.vision-section h2 { text-transform: capitalize; }
.vision-section p{ font-size: 18px; margin: 0 0 20px; }
.vision-section p:last-child{ margin: 0; }

.how-work-section{ padding: 50px 0 150px; background-image: url(../images/about-bg.png); background-repeat: no-repeat; background-size: contain; background-position: top 30px right;}
.how-work-section .title-block{ margin: 0 0 40px; }
.how-we-block{ padding: 0 20px; display: flex; flex-wrap: wrap; position: relative;}
.how-we-block:before { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); content: ""; height: 1px; width: 100%; background-color: #000; }
.how-we-block .single-block{ width: 25%; padding: 450px 50px 100px; position: relative; display: flex; flex-wrap: wrap; }
.how-we-block .single-block:before{ position: absolute; left: 30px; top: 50px; height: calc(100% - 194px); width: 1px; background-color: #000; content: ""; }
.how-we-block .top-block{ display: flex; flex-wrap: wrap; position: absolute; top: 0; }
.how-we-block .top-block .top-text{ display: flex; align-items: flex-start; position: relative; }
.how-we-block .top-block .top-text:before{ position: absolute; left: -24px; top: 2px; height: 9px; width: 9px; background-color: #000; content: ""; border-radius: 100%; }
.how-we-block .top-block h3{ font-weight: bold; font-size: 18px; text-transform: uppercase; }
.how-we-block .top-block h4{ position: absolute; left: -60px; top: 5px; margin: 0; font-weight: bold; font-size: 20px; }
.how-we-block .bottom-block{ border-radius: 100%; height: 90px; width: 90px; position: absolute; bottom: 100px; left: 80px; }
.how-we-block .bottom-block:before{ position: absolute; left: -50px; background-color: #000; top: 50%; transform: translateY(-50%); width: 100px; height: 1px; content: ""; }
.how-we-block .bottom-block img{ overflow: hidden; border: 3px solid #cfdded; position: absolute; object-fit: cover; left: 50%; top: 50%; min-height: 100%; min-width: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.how-we-block .icon-block{ background-color: #fff; display: flex; justify-content: center; align-items: center; height: 60px; width: 60px; position: absolute; border: 1px solid #cfdded; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.how-we-block .icon-block i{ font-size: 26px; }
.how-we-block .single-block:nth-child(2n):before{ top: auto; bottom: 50px; }
.how-we-block .single-block:nth-child(2n) .top-block{ top: auto; bottom: 0; }
.how-we-block .single-block:nth-child(2n) .top-block h3{ order: 1; margin: 18px 0 0; }
.how-we-block .single-block:nth-child(2n) .top-block h4{ bottom: 5px; top: auto; }
.how-we-block .single-block:nth-child(2n) .top-text:before{ bottom: 2px; top: auto; }
.how-we-block .single-block:nth-child(2n) .bottom-block{ top: 100px; bottom: auto; }



@media(min-width: 1026px) and (max-width: 1199px){
	.single-banner .banner-left{ max-width: 450px; }
	.single-banner .banner-left span{ font-size: 80px; max-width: 85px; }
	.single-banner .banner-right{ width: calc(100% - 450px); }
	.banner-slider .slick-dots{ left: 42%; }
	.about-inner .about-text{ padding-right: 50px; }
	.services-section{ padding: 80px 15px; }
}

@media(max-width: 1025px){
	.h1, h1{ font-size: 40px; }
	.h2, h2{ font-size: 28px; }
	.main-header{ padding: 15px 20px; }
	nav ul li{ padding: 0 15px; }
	.single-banner{ flex-wrap: wrap; }
	.single-banner .banner-left{ max-width: 100%; margin: 0 0 40px; }
	.single-banner .banner-left span{ font-size: 80px; max-width: 85px; }
	.single-banner .banner-right{ width: 100%; }
	.about-inner{ flex-wrap: wrap; }
	.about-section .image-block{ width: 100%; }
	.about-inner .about-text{ width: 100%; padding: 40px 15px 0; }
	.title-block span{ font-size: 70px; }
	.banner-slider .slick-dots{ width: 100%; display: flex; justify-content: center; align-items: center; bottom: -50px; }
	.banner-slider .slick-dots li{ width: 55px; }
	.banner-slider .slick-dots li button{ height: 2px; width: 55px; }
	.banner-slider .slick-dots li.slick-active button{ height: 4px; width: 100%; margin: -1px 0 0 0; }
	.services-section{ padding: 0 15px 70px; flex-wrap: wrap; overflow: visible; }
	.services-section .service-text{ max-width: 100%; margin: 0; }
	.service-slider{ margin: 30px 0 0; }
	.service-slider .slick-arrow{ bottom: -100px; top: auto; height: 70px; }
	.service-slider .slick-arrow.slick-prev{ left: 0; top: auto; }
	.service-slider .slick-arrow.slick-next{ left: 160px; top: auto; }
	.contact-inner{ flex-wrap: wrap; }
	.contact-inner .contact-left{ max-width: 100%; margin: 0 0 40px; }
	.contact-right{ width: 100%; }
	.contact-section .bg-color{ width: 100%; }
	.portfolio-page-section{ padding: 80px 0; }
	.portfolio-inner .single-block h3{ font-size: 20px; }
	.top-content-section{ padding: 80px 0 0; }
	.services-page-section{ padding: 80px 0 60px; }
	.single-service{ margin: 0 0 60px; }
	.service-inner{ flex-wrap: wrap; }
	.service-inner .left-block{ width: 100%; margin: 0 0 30px; }
	.service-inner .right-block{ width: 100%; }
	.single-service:nth-child(2n) .service-inner .left-block{ order: 0; }
	.about-page-section{ padding: 80px 0; }
	.about-inner{ flex-wrap: wrap; }
	.about-inner .left-block{ width: 100%; margin: 0 0 30px; }
	.about-inner .right-block{ width: 100%; }
	.how-we-block{ padding: 0; }
	.how-we-block:before{ display: none; }
	.how-we-block .single-block{ width: 100%; padding: 0 0 40px 80px; border-bottom: 1px solid #000; margin-bottom: 40px; }
	.how-we-block .single-block:last-child{ margin-bottom: 0; border: 0; padding-bottom: 0; }
	.how-we-block .single-block:before{ display: none; }
	.how-we-block .top-block{ position: relative; }
	.how-we-block .top-block h4{ top: 0; }
	.how-we-block .top-block .top-text{ position: static; }
	.how-we-block .top-block .top-text:before{ display: none; }
	.how-we-block .bottom-block{ position: relative; left: 0; bottom: auto; order: -1; margin: 0 0 20px; }
	.how-we-block .bottom-block:before{ display: none; }
	.how-we-block .icon-block{ position: absolute; top: auto; transform: none; }
	.how-we-block .single-block:nth-child(2n) .bottom-block{ top: auto; }
	.how-we-block .single-block:nth-child(2n) .top-block h3{ order: 0; margin: 0 0 18px; }
	.how-we-block .single-block:nth-child(2n) .top-block h4{ top: 0; bottom: auto; }
}

@media(max-width: 767px){
	body{ font-size: 14px; }
	.h1, h1{ font-size: 36px; }
	.h2, h2{ font-size: 24px; }
	.navbar-expand-md .navbar-toggler{ display: block; }
	.navbar-toggler-icon{ -webkit-transition-duration: 0.5s; transition-duration: 0.5s; position: absolute; height: 3px; width: 26px; top: 19px; left: 7px; background-color: #000; }
	.navbar-toggler-icon:before{ left: 0; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; position: absolute; width: 26px; height: 3px; background-color: #000; content: ""; top: -8px; }
	.navbar-toggler-icon:after{ left: 0; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; position: absolute; width: 26px; height: 3px; background-color: #000; content: ""; top: 8px; }
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{ -webkit-transition-duration: 0.5s; transition-duration: 0.5s; background: transparent; }
	.navbar-toggler{ outline: none; border: 0; height: 40px; width: 40px; position: relative; z-index: 999; background-color: rgba(233,240,244,0.6); border-radius: 0; }
	.navbar-toggler:focus, .navbar-toggler:hover { background-color: rgba(233,240,244,0.6); outline: none; border: 0;}
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before { -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(4px, 6px); transform: rotateZ(45deg) scaleX(1.25) translate(4px, 6px); }
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(4px, -6px); transform: rotateZ(-45deg) scaleX(1.25) translate(4px, -6px); }
	header .navbar-collapse{ padding-top: 50px; display: block !important; visibility: hidden; opacity: 0; position: fixed; top: 88px; left: 0; background-color: #485564; height: calc(100vh - 88px); border-top: 1px solid #fff; width: 100%; z-index: 99; transition: all 0.3s ease-in-out; }
	header .navbar-collapse.show{ opacity: 1; visibility: visible; }
	nav ul li{ padding: 0; display: inline-block; width: 100%; text-align: center; }
	nav ul li a{ padding: 10px; }
	nav ul li:last-child{ margin-top: 20px; }
	nav ul li:last-child a{ margin: 0 auto; }
	.main-footer .footer-inner{ flex-wrap: wrap; justify-content: center; text-align: center; }
	.footer-inner .single-left{ max-width: 100%; }
	.footer-inner .single-left a{ max-width: 90px; width: 100%; display: block; margin: 0 auto; }
	.single-right .single-block{ margin: 25px 0 0; width: 100%; }
	.single-right{ flex-wrap: wrap; width: 100%; }
	.single-right .single-block p{ margin: 0 0 3px; }
	.single-right .single-block p:last-child{ margin: 0; }
	.single-right ul{ justify-content: center; margin: 8px 0 0; }
	.single-right ul li{ margin: 0 10px; }
	.single-banner .image-block{ height: 550px; }
	.banner-slider .slick-dots{ bottom: -30px; }
	.inner-banner-left{ padding: 60px 0; }
	.contact-right{ padding: 30px 20px; }
	.contact-right form{ padding: 30px 20px; }
	.border3{ left: 15px; }
	.border4{ right: 15px; }
	.portfolio-page-section{ padding: 60px 0; }
	.portfolio-inner{ flex-wrap: wrap; }
	.portfolio-inner .portfolio-block{ max-width: 100%; padding: 0; }
	.portfolio-inner .portfolio-block:last-child{ padding: 0; margin: 40px 0 0; }
	.top-content-section{ padding: 60px 0 0; }
	.services-page-section{ padding: 60px 0 40px; }
}