.preloader { background: #fff url("../img/loader.gif") no-repeat center center; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 999999; }

/*************----------- Index Page Start -----------*************/


/*** Header Start ***/

header { z-index: 5; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 55px; transition: all 0.5s ease-in-out; }
.menu-active header,
header.sticky { position: fixed; padding: 0px 20px; z-index: 9;background: #00000050; backdrop-filter: blur(10px); top: 0; }
header .logo-sec { background: #fff; padding: 15px 0px; transition: all 0.5s ease-in-out;}
header .header-right { align-items:center; display: flex; justify-content: flex-end; }
.menu-active header .logo-sec,
header.sticky .logo-sec{ padding:15px 10px;  }

.get-a-quote { color: #262626; padding-right: 35px; padding-bottom: 10px; text-transform: uppercase; font-weight: 400; font-size: 14px; position: relative; letter-spacing: 1px; }
.get-a-quote::after { content: ''; height: 2px; width: 90%; background: #262626; display: block; position: absolute; bottom: 0px; left: 0px; transition: all 0.5s ease-in-out; }
.get-a-quote:hover { color: #262626; }
.get-a-quote:hover::after { width: 100%; }

.menu-active .get-a-quote { color: #ffffff; }
.menu-active .menu-toggle:after,
.menu-active .menu-toggle:before { background:#fff; }

.menu-toggle { width: 30px; transition: all 0.5s ease-in-out; cursor: pointer; margin-left: 40px; position: relative; }
.menu-toggle:after,
.menu-toggle:before { content: ''; display: block; margin: 5px 0px; width: 30px; height: 3px; border-radius: 3px; background-color: #262626; transition: all 0.5s ease-in-out; }
.menu-toggle span { display: block; margin: 5px 0px; width: 15px; height: 3px; border-radius: 3px; background-color: #262626; -webkit-animation: linear infinite; -webkit-animation-name: run; position: relative; -webkit-animation-duration: 1s; }
@-webkit-keyframes run { 0% {   left: 0px; } 50% {  left: 50%; } 100% {   left: 0px; } }
.menu-overlay { display: block; width: 100%; background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.93) 100%); background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.93) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.99) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd000000', endColorstr='#ed000000', GradientType=1); top: 0px; left: 100%; position: fixed; height: 100%; transition: all 0.5s ease-in-out; }
.menu-active .menu-overlay { display: block; left: 0px; width: 100%; z-index: 3; }
.menu-sec { height: 100%; width: 100%; transition: all 0.4s; z-index: 999; position: relative; }
.menu-active .menu-toggle:before { transform: translateY(2px) rotate(135deg); -webkit-transform: translateY(2px) rotate(135deg); -moz-transform: translateY(2px) rotate(135deg); transition: all 0.5s ease-in-out; }
.menu-active .menu-toggle:after { transform: translateY(-14px) rotate(-135deg); -moz-transform: translateY(-14px) rotate(-135deg); -webkit-transform: translateY(-14px) rotate(-135deg); transition: all 0.5s ease-in-out; }
.menu-active .menu-toggle span { width: 0px; }
.menu-active .menu { display: block; height: auto; }
.menu { position: fixed;right: 25px; top: 100px; overflow: hidden; display: none; transition: all 0.5s ease-in-out; }
.menu ul { list-style: none; }
.menu ul li { transition: all 0.5s ease-in-out; }
.menu ul li a { color: #fff; font-size: 75px; width: 100%; display: block; text-align: right; font-weight: 700; transition: all 0.5s ease-in-out; }
.menu ul li:hover { margin-right: 20px; }
.menu ul li:nth-child(1) { animation-delay: 0.05s; }
.menu ul li:nth-child(2) { animation-delay: 0.15s; }
.menu ul li:nth-child(3) { animation-delay: 0.25s; }
.menu ul li:nth-child(4) { animation-delay: 0.35s; }
.menu ul li:nth-child(5) { animation-delay: 0.45s; }

.menu-active .get-a-quote:hover,
.menu-active .get-a-quote,
.sticky .get-a-quote:hover,
.sticky .get-a-quote { color: #fff; }
.menu-active .get-a-quote::after,
.menu-active .menu-toggle { margin-top:9px; }
.menu-active .menu-toggle:after,
.menu-active .menu-toggle:before,
.menu-active .menu-toggle span,
.sticky .get-a-quote::after,
.sticky .menu-toggle:after,
.sticky .menu-toggle:before,
.sticky .menu-toggle span { background: #fff; }

/*** Header End ***/


/*** First Fold Start ***/

.first-fold { position: relative; display:flex; align-items:center; justify-content:center;  padding: 0; height:calc(100vh - 58px); }
.first-fold .banner{box-shadow: 20px 20px 30px 2px rgb(0 0 0 / 4%); height: 40vh; overflow: hidden; border-radius: 20px; margin-bottom: 40px; margin-top:10px; }
.first-fold .banner img{ width:100%; height: 100%; object-fit:cover; }
.first-fold .content { padding: 0px 55px; text-align:center;   }
.first-fold  .headings{ width: 70%; margin: 0px auto; }
.first-fold h6 { color: #262626; font-weight: 400; }  
.first-fold h2 { color: #262626; font-weight: 700;  margin: 25px 0 15px; }

.first-fold .read-more { margin:35px auto 0px; }

.first-fold .top-bg {  border-radius:20px 0px 0px 20px; overflow:hidden; height:100%; padding:0px; }
.first-fold .top-bg img{height: 100%; width:100%; object-fit: cover;}


/*** First Fold End ***/


/*** About Section Start ***/

.who-we-are {}

.who-we-are .about-img-sec { border: none; box-shadow: none; }
.description { font-size: 17px; color: #868686; font-weight: 400; line-height: 35px; }
.description a { font-weight: 600; color: #262626; font-style: italic; }
.achievements { margin: 40px 0px; }
.achievements-card { padding: 10px 15px; border-radius: 15px; box-shadow: 20px 20px 30px 2px rgb(0 0 0 / 4%); display: flex; flex-direction: inherit; background: #fff; border: solid 1px #f2f2f2; }
.achievements-card h6 { font-weight: 600; margin-bottom: 0px; }
.achievements-card .icon-sec { height: auto; width: 70px; margin-right: 15px; padding: 10px 0px; }
.achievements-card .icon-sec i { font-size:55px; color: #73e9e8; line-height:1; margin: 0 auto; }

/*** About Section Start ***/


/*** Design / Development / SEO&SMO Section Start ***/

.what-we-do {}


.services-listing { margin: 30px 0 10px; }
.services-listing ul { list-style: none; }
.services-listing li { width: 50%; padding-right: 30px; float: left; margin-bottom: 30px; }
.services-listing a { font-weight: 700; text-transform: uppercase; color: #262626; font-size: 16px; font-family: 'Poppins', sans-serif; position: relative; padding-left: 20px; }
.services-listing a:hover {}

.services-listing a::before { content: '+'; height: 100%; width: 30px; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #262626; position: absolute; left: 0; }
.services-listing a:hover::before { content: '-'; color: #73e9e8; }
.services-listing.development li { width: calc(100% / 3); }
.services-listing ul li:last-child { margin-bottom: 0px; }

/*** Design / Development / SEO&SMO Section End ***/


/*** Our Clients Section Start ***/

.our-clients { position: relative; }
.our-clients:after { content: ' '; width: 35%; height: 33px; background: #73e9e8; display: block; position: absolute; right: 0px; bottom: 50px; z-index: 0px; }
.our-clients:before { content: ' '; width: 300px; border-radius: 100%; height: 300px; bottom: 50px; background: #73e9e8; display: block; position: absolute; left: 57%; }
.our-clients h3 { margin:0px; }
.our-clients h3 span { display: block; }
.our-clients .headings{ text-align:right;  }

.clients-listing ul { list-style: none; }
.clients-listing li { width: calc(100% / 4); float: left; height: auto; overflow: hidden; margin-bottom: 30px; }

/*** Our Clients Section End ***/


/*** Testimonials Section Start ***/

.testimonials .counter {}

.counter-column { margin-bottom: 40px; text-align: right; }
.counter-column:last-child { margin-bottom: 0px; }
.counter-column .counter { font-size: 120px; font-family: 'Amiri', serif; font-weight: 500; color: #73e9e8; position: relative; line-height: 1; }
.counter-column .title { font-weight: 600; font-family: 'Poppins', sans-serif; font-size: 16px; }
.testimonials .headings {}

.testimonials-slider { margin-top: 50px; }
.testimonial-card {}
.testimonial-card .comment { font-size: 30px; color: #262626; line-height: 55px; font-style: italic; font-family: 'Amiri', serif; }
.testimonial-card .client-detail { margin-top: 20px; }
.testimonial-card .client-detail .name { font-size: 25px; font-weight: 700; }
.testimonial-card .client-detail .designation { font-size: 16px; font-weight: 400; color: #73e9e8; }
.testimonials-slider .owl-nav { position: relative; width: 100px; margin-top: 70px; padding:0px; }
.testimonials-slider .owl-nav button { background: none !important; border-radius: 0px !important; }

.testimonials-slider .owl-nav button.owl-prev { border-right: solid 2px #e5e5e5; }

/*** Testimonials Section End ***/


/*** Blog Post Section Start ***/

.blog-post { position: relative; padding:60px 0px; }

.blog-card { background: #fff; border-radius: 10px; border: solid 1px #efefef; box-shadow: 20px 20px 30px 2px rgb(0 0 0 / 4%); margin-bottom: 40px; }
.blog-card a { display: block; padding: 40px; }
.blog-slider { padding-left: 30%; margin-top: 50px; }
.blog-card .date { font-size: 14px; color: #868686; line-height: 28px; font-family: 'Poppins', sans-serif; }
.blog-card .title { margin: 10px 0; font-size: 17px; color: #262626; line-height: 28px; font-weight: 600; font-family: 'Poppins', sans-serif; transition: all 0.2s ease-in-out; }
.blog-card a:hover { cursor: pointer; }
.blog-card a:hover .title { color: #73e9e8; }
.blog-card .description { font-size: 14px; color: #868686; line-height: 24px; }
.blog-slider .owl-nav { position: absolute; width: auto; margin-top: 70px; display: block !important; left: 20%; top: 20%; }
.blog-slider .owl-nav button { width: 100%; background: none !important; border-radius: 0px !important; display: block; }
.blog-slider .owl-nav button.owl-prev { border-bottom: solid 2px #e5e5e5; }

/*** Blog Post Section End ***/


/*** Newsletter Section Start ***/

.newsletter { background: #262626; padding: 40px 0; }
.newsletter .left-content { font-size: 21px; line-height: 35px; font-weight: 600; color: #fff; }
.newsletter .newsletter-form { display: inline-block; width: 100%; padding: 10px 50px 10px 10px; border: solid 1px #3d3d3d; border-radius: 10px; position: relative; }
.newsletter form { display: block; }
.newsletter form input { border: none; color: #fff; font-size: 16px; }
.newsletter form input:focus { border: none; }
.newsletter form button { position: absolute; right: 0; top: 0; height: 100%; width:80px; background: none; border: none; }
.newsletter form button i{ color: #73e9e8; font-size:25px; line-height:60px; }

/*** Newsletter Section End ***/


/*** Footer Start ***/

footer { background: #0b0b0b; padding-top: 160px; }
footer .footer-logo { float: left; }
footer .lets-talk { font-size: 70px; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 150px; }
footer .main-id { display: inline-block; }
footer .main-id a { font-weight: 300; color: #73e9e8; font-size: 35px; border-bottom: solid 1px #3b3b3b; padding-bottom: 15px; }
footer .main-id a:hover { border-bottom: solid 1px #fff; }
footer .footer-menu { width: 45%; background: #73e9e8; height: 100%; padding:40px; }
footer .footer-menu li { margin-bottom: 20px; }
footer .footer-menu a { font-size: 14px; padding-bottom: 5px; color: #262626; text-transform: uppercase; font-weight: 300; border-bottom: solid 1px #00000050; padding-right: 10px; }
footer .footer-menu a:hover { padding-right: 20px; border-bottom-color: #fff; color: #fff; }
footer .social-media { width: 55%; padding: 70px; }
footer .social-media li { margin-bottom: 40px; }
footer .social-media a { font-size: 16px; padding-bottom: 5px; color: #fff; text-transform: uppercase; font-weight: 300; border-bottom: solid 1px #ffffff50; padding-right: 10px; }
footer .social-media a i { margin-right: 15px; }
footer .social-media a:hover { padding-right: 20px; border-bottom-color: #73e9e8; color: #73e9e8; }
footer .location { width: auto; display: flex; margin-top: 50px; align-items:center; }
footer .location .icon-sec { margin-right: 20px; height:auto; width:auto; }
footer .location .icon-sec i{ font-size:55px;color: #73e9e8; line-height:1;  }
footer .location .address { font-size: 20px; font-weight: 300; color: #fff; line-height: 35px; }
footer .copyright { color: #fff; font-size: 14px; margin:40px 0; }
footer .copyright a { color: #fff; padding: 0 10px; }
footer .copyright a:hover { color: #73e9e8; }

/*** Footer End ***/