/* ---------------------------------------------------------------- == Table Of Content 01 Basics 02 Buttons 03 Navbar 04 Header 05 Hero 06 section-box 07 Portfolio 08 Ready 09 Features 10 Pricing 11 Testimonials 12 Numbers 13 Team 14 Blog 15 Contact 16 Footer 17 Responsive ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- [ 01 Start Basics ] -----------------------------------------------------------------*/ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; list-style: none; word-wrap: break-word; } body { color: #060221; line-height: 1.3; font-weight: 400; font-size: 14px; font-family: 'Rubik', sans-serif; overflow-x: hidden !important; } body::-webkit-scrollbar-track { background-color: #ddd; } body::-webkit-scrollbar { width: 10px; background-color: #ddd; } body::-webkit-scrollbar-thumb { background-color: #026CC7; } h3, h2, h3, h4, h5, h6 { line-height: 1.4; } p { font-size: 15px; font-weight: 300; font-family: 'Poppins', sans-serif; color: #828282; line-height: 1.8; margin: 0; } /*img { width: 100%; height: auto; }*/ span, a, a:hover { display: inline-block; text-decoration: none; color: inherit; } .section-padding { padding: 120px 0; } .section-head { margin-bottom: 80px; padding-bottom: 30px; position: relative; } .section-head:after { content: ''; width: 200px; height: 1px; background-color: rgba(200, 200, 200, 0.2); position: absolute; bottom: 0; left: calc(50% - 100px); } .section-head:before { content: ''; width: 50px; height: 5px; background-color: #026CC7; position: absolute; bottom: -2px; left: calc(50% - 25px); border-radius: 2px; } .section-head h6 { font-size: 12px; letter-spacing: 4px; color: #026CC7; margin-bottom: 5px; margin-right: 30px; } .section-head h4 { font-family: 'Rubik', sans-serif; font-size: 30px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } .section-head p { font-size: 15px; } .bg-gray { background: #fbfafa; } .o-hidden { overflow: hidden; } .ontop { position: relative; z-index: 4; } .position-re { position: relative; } .full-width { width: 100% !important; } .lg-line-height { line-height: 1.5; } .bg-img { background-size: cover; background-repeat: no-repeat; } .bg-fixed { background-attachment: fixed; } .sub-title { font-size: 15px; font-weight: 400; color: #026CC7; margin-bottom: 10px; } .valign { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .v-middle { position: absolute; width: 100%; top: 50%; left: 0; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 15px; display: inline-block; } .owl-theme .owl-dots .owl-dot span { width: 50px; height: 4px; margin: 0; border-radius: 0; background: rgba(200, 200, 200, 0.4); } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #026CC7; } /* ---------------------------------------------------------------- [ End Basics ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 02 Start Buttons ] -----------------------------------------------------------------*/ .butn { padding: 12px 34px; background: #fff; border-radius: 30px; border: 1px solid transparent; position: relative; z-index: 3; margin-left: 10px; margin-right: 10px; -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); -webkit-transition: all .4s; transition: all .4s; cursor: pointer; outline: none !important; overflow: hidden; } .butn span { position: relative; z-index: 2; -webkit-transition-delay: 0s; transition-delay: 0s; } .butn:before, .butn:after { content: ''; width: 0; height: 100%; background: #fff; position: absolute; left: 0; top: 0; -webkit-transition: width 0.4s; transition: width 0.4s; z-index: 1; opacity: .4; } .butn:after { -webkit-transition-delay: 0s; transition-delay: 0s; background: #fff; opacity: 1; } .butn:hover:before, .butn:hover:after { width: 100%; } .butn:hover:after { -webkit-transition-delay: .2s; transition-delay: .2s; } .butn:hover span { -webkit-transition-delay: .2s; transition-delay: .2s; } .butn-bg { background: #026CC7; border-color: #026CC7; color: #fff; } .butn-bg:hover span { color: #026CC7; } .butn-light { background: #fff; } .butn-light:before, .butn-light:after { background: #026CC7; } .butn-light:hover span { color: #fff; } .butn-light span { color: #026CC7; } .butn-bord { background: transparent; border: 1px solid #eee; } .butn-bord:before, .butn-bord:after { background: #026CC7; } .butn-bord:hover { border-color: #026CC7; } .butn-bord:hover span { color: #fff; } /* ---------------------------------------------------------------- [ End Buttons ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 03 Start Navbar ] -----------------------------------------------------------------*/ .navbar { position: absolute; left: 0; top: 0; width: 100%; border: 0; background: transparent; z-index: 9; min-height: 70px; } .navbar .icon-bar { color: #fff; } .navbar .navbar-nav .nav-link { color: #eee; margin: 15px 5px; -webkit-transition: all .5s; transition: all .5s; } .navbar .navbar-nav .active { color: #026CC7 !important; } .nav-scroll { background: #fff; -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); padding: 0; position: fixed; top: -100px; left: 0; width: 100%; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; -webkit-transform: translateY(100px); transform: translateY(100px); } .nav-scroll .icon-bar { color: #222; } .nav-scroll .navbar-nav .nav-link { color: #222; } .nav-scroll .navbar-nav .logo { padding: 15px 0; color: #111; } .nav-scroll .container { padding: 0 !important; margin-top: 0 !important; } .logo-i { height: 45px; } .blue-logo { height: 30px !important; margin-left: 5px; } nav.nav-scroll .logo .blue-logo { display: none !important; } .nav-box .container { background: #fff; padding: 5px 30px; border-radius: 5px; margin-top: 20px; } .nav-box .container .navbar-nav .nav-link { color: #222; } .nav-box .container .navbar-nav .logo { padding: 15px 0; color: #111; } .nav-box.radius .container { border-radius: 40px; } .logo { padding: 6px 0; width: auto; } .logo img { width: auto; } /* ---------------------------------------------------------------- [ End Navbar ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 04 Start Header ] -----------------------------------------------------------------*/ .header { min-height: 100vh; overflow: hidden; } .header .caption .o-hidden { display: inline-block; } .header .caption h5 { font-family: 'Poppins', sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: 10px; -webkit-animation-delay: .2s; animation-delay: .2s; } .header .caption h3 { margin: 15px 0; font-size: 60px; font-weight: 500; font-family: inherit; word-spacing: 2px; letter-spacing: 2px; -webkit-animation-delay: .6s; animation-delay: .6s; } .header .caption p { -webkit-animation-delay: 1s; animation-delay: 1s; color: #eee; } .header .caption .butn { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .header .caption.stwo h5 { text-transform: capitalize; } .header .caption.stwo h3 { font-weight: 700; } .slider .arrow, .slider-fade .arrow { display: none !important; } .slider .owl-item, .slider-fade .owl-item { min-height: 100vh; position: relative; } .slider .item, .slider-fade .item { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; } .slider .item .caption, .slider-fade .item .caption { z-index: 9; } .slider .owl-theme .owl-dots, .slider-fade .owl-theme .owl-dots { position: absolute; bottom: 5vh; width: 100%; } .slider .owl-theme .owl-dots .owl-dot span, .slider-fade .owl-theme .owl-dots .owl-dot span { width: 15px; height: 15px; margin: 0 5px; border: 2px solid #fff; border-radius: 50%; background: rgba(200, 200, 200, 0.4); } .slider .owl-theme .owl-dots .owl-dot.active span, .slider .owl-theme .owl-dots .owl-dot:hover span, .slider-fade .owl-theme .owl-dots .owl-dot.active span, .slider-fade .owl-theme .owl-dots .owl-dot:hover span { background: #026CC7; } /* ---------------------------------------------------------------- [ End Header ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 05 Start Hero ] -----------------------------------------------------------------*/ .hero { position: relative; } .hero:after { content: ""; width: 40%; height: 250px; background-image: url(../img/dots.webp); background-repeat: repeat; position: absolute; top: 0; left: 0; opacity: .5; z-index: -1; } .hero .intro h6 { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: #026CC7; margin-bottom: 15px; } .hero .intro h5 { font-size: 28px; font-weight: 600; margin-bottom: 15px; } .hero .feat-left .item .icon { float: left; width: 60px; height: 60px; line-height: 58px; border-radius: 20%; text-align: center; font-size: 28px; color: #fff; border: 1px solid #026CC7; background-color: #026CC7; margin-bottom: 40px; position: relative; -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); } .hero .feat-left .item .icon:after { content: ''; width: 60px; height: 60px; position: absolute; left: -11px; top: -11px; border-radius: 20%; border: 1px dashed #026cc7; } .hero .feat-left .item h5 { margin-bottom: 10px; font-size: 17px; } .hero .feat-left .item h5, .hero .feat-left .item p { margin-left: 90px; } /* ---------------------------------------------------------------- [ End Hero ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 06 section-box ] -----------------------------------------------------------------*/ .section-box .container-fluid { position: relative; z-index: 3; } .section-box .half-img { background-position: 50% 50%; } .section-box .half-content { padding: 30px; } .section-box .box-white { padding: 100px 10%; background: #fff; -webkit-box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08); box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08); } .section-box .box-white h5 { color: inherit; } .section-box .box-white p { color: #828282; } .section-box .quote { display: inline-block; background: #026CC7; padding: 50px 30px; border-radius: 5px; text-align: center; position: relative; z-index: 3; } .section-box .quote .icon { position: absolute; top: -20px; width: 100%; left: 0; font-size: 40px; color: #fff; } .section-box .quote p { color: #eee; margin-bottom: 10px; } .section-box .quote span { font-weight: 700; } .skills .skill-item { margin-bottom: 30px; } .skills .skill-item:last-child { margin-bottom: 0; } .skills .skill-item h6 { font-size: 14px; margin-bottom: 10px; color: #000; } .skills .skill-progress { width: 100%; height: 20px; border: 4px solid #f7f7f7; background: #f7f7f7; border-radius: 20px; position: relative; -webkit-box-shadow: 0px -7px 10px rgba(0, 0, 0, 0.08) inset; box-shadow: 0px -7px 10px rgba(0, 0, 0, 0.08) inset; } .skills .skill-progress .progres { position: absolute; height: 100%; width: 10%; left: 0; top: 0; background: #01CBF0; background: -webkit-gradient(linear, left top, right top, from(#026CC7), to(#01CBF0)); background: linear-gradient(to right, #026CC7, #01CBF0); border-radius: 20px; -webkit-transition: all 1s; transition: all 1s; } .skills .skill-progress .progres:before { content: attr(data-value); padding: 4px 10px 3px; border-radius: 10px; font-size: 10px; color: #fff; background: #026CC7; background: -webkit-gradient(linear, left top, right top, from(#026CC7), to(#01CBF0)); background: linear-gradient(to right, #026CC7, #01CBF0); position: absolute; top: -35px; right: 0; } .skills .skill-progress .progres:after { content: ""; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid #026CC7; position: absolute; top: -12px; right: 15px; } .skin h6 { font-weight: 400; } .skin .skill-progress { width: 100%; height: 10px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); border-radius: 20px; position: relative; -webkit-box-shadow: none; box-shadow: none; } .skin .skill-progress .progres { position: absolute; height: 100%; width: 0; left: 0; top: 0; background: #026CC7; background: -webkit-gradient(linear, left top, right top, from(#026CC7), to(#e1284e)); background: linear-gradient(to right, #026CC7, #e1284e); border-radius: 20px; -webkit-transition: all 1s; transition: all 1s; } .skin .skill-progress .progres:before { background: transparent; } .process .padding { padding: 0 30px; } .process .item { padding: 0 30px; border-radius: 10px; position: relative; } .process .item:hover .icon { background: #fff !important; color: #026CC7; } .process .item img { position: absolute; width: 50%; right: -30%; top: 30%; z-index: 4; } .process .item img.tobotm { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); top: 15%; } .process .item .icon { font-size: 30px; color: #fff; width: 80px; height: 80px; line-height: 90px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); position: relative; margin-bottom: 40px; z-index: 2; -webkit-transition: all .3s; transition: all .3s; } .process .item .icon:after { content: ''; width: 100%; height: 100%; border-radius: 50%; background: #fff; position: absolute; top: 0; left: 0; -webkit-transform: scale(1.4, 1.4); transform: scale(1.4, 1.4); opacity: .05; z-index: -1; } .process .item h6 { letter-spacing: 1px; margin-bottom: 15px; } .process .item h6 span { font-size: 12px; color: #eee; margin-right: 8px; } .process .item p { font-size: 13px; color: #eee; opacity: .9; } /* ---------------------------------------------------------------- [ End section-box ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 07 Start Portfolio ] -----------------------------------------------------------------*/ .portfolio .filtering .filter { display: inline-block; padding: 4px 10px; -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); border-radius: 30px; margin-bottom: 20px; } .portfolio .filtering span { font-size: 12px; font-weight: 500; margin: 0 5px; padding: 8px 20px; border-radius: 30px; cursor: pointer; } .portfolio .filtering .active { background: #026CC7; -webkit-box-shadow: 0px 8px 30px -5px rgba(0, 0, 0, 0.2); box-shadow: 0px 8px 30px -5px rgba(0, 0, 0, 0.2); color: #fff; } .portfolio .items { width: 33.333333333%; padding: 0 15px; margin-top: 30px; } .portfolio .items.width2 { width: 25%; } .portfolio .item-img { position: relative; } .portfolio .item-img:hover .item-img-overlay { visibility: visible; opacity: 1; } .portfolio .item-img-overlay { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; padding: 30px; background: rgba(255, 255, 255, 0.95); opacity: 0; visibility: hidden; -webkit-transition: all .5s; transition: all .5s; } .portfolio .item-img-overlay .icon { position: absolute; right: 30px; bottom: 30px; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; border: 1px solid #026CC7; text-align: center; font-size: 20px; color: #026CC7; } .portfolio .item-img-overlay p { color: #026CC7; font-weight: 400; font-size: 13px; } .portfolio .item-img-overlay h6 { font-weight: 400; font-size: 16px; margin-top: 5px; } /* ---------------------------------------------------------------- [ End Portfolio ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 08 Start Ready ] -----------------------------------------------------------------*/ .ready .video { margin-bottom: 50px; } .ready .video .vid { width: 100px; height: 100px; line-height: 100px; border-radius: 50%; border: 1px solid #eee; font-size: 30px; -webkit-transition: all .4s; transition: all .4s; } .ready .video .vid span { -webkit-transition: all .4s; transition: all .4s; } .ready .video .vid:hover { border-color: #026CC7; } .ready .video .vid:hover span { color: #026CC7; } .ready .content h3 { margin-bottom: 15px; } .ready .content .butn { letter-spacing: 1px; padding: 12px 50px; margin-top: 30px; } /* ---------------------------------------------------------------- [ End Ready ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 09 Start Featurse ] -----------------------------------------------------------------*/ .featurse .content { padding: 0 45px 0 60px; } .featurse .item { padding: 40px 30px; background-color: #fff; -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); border-radius: 15px; } .featurse .item.active { position: relative; left: -50px; } .featurse .icon { float: left; font-size: 50px; color: #026CC7; } .featurse .cont { margin-left: 80px; } .featurse .cont h6 { margin-bottom: 10px; } /* ---------------------------------------------------------------- [ End Featurse ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 10 Start Price ] -----------------------------------------------------------------*/ .price .item { padding: 50px 15px; background-color: #fff; -webkit-box-shadow: 0px 15px 40px -5px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 40px -5px rgba(0, 0, 0, 0.1); border-radius: 15px; border: dotted 2px #92ccff; } .price .type h4 { font-size: 16px; margin-bottom: 15px; } .price .value { margin-bottom: 30px; padding-bottom: 30px; position: relative; } .price .value:after { content: ''; width: 100px; height: 1px; background: #eee; position: absolute; bottom: 0; left: calc(50% - 50px); } .price .value h3 { font-size: 50px; display: inline-block; position: relative; } .price .value h3 span { font-size: 12px; position: absolute; top: 0; left: -10px; } .price .features { margin-bottom: 30px; } .price .features li { font-family: 'Poppins', sans-serif; font-size: 13px; color: #828282; margin-bottom: 15px; } .price .features li:last-child { margin-bottom: 0; } .price .active { -webkit-box-shadow: 0px 20px 40px -10px rgba(0, 0, 0, 0.5); b ox-shadow: 0px 20px 40px -10px rgba(0, 0, 0, 0.5); /* background-color: #222; background: -webkit-gradient(linear, left top, right bottom, from(#222), to(#555)); background: linear-gradient(to right bottom, #222, #555);*/ color: #fff; background-image: url("../img/price-bg.webp"); background-repeat: no-repeat; background-size: cover; border: none; } .price .active .features li { color: #eee; } .price .butn { padding: 10px 50px; } /* ---------------------------------------------------------------- [ End Price ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 11 Start Testimonials ] -----------------------------------------------------------------*/ .testimonials .client-area { margin-bottom: 30px; } .testimonials .client-area .img { display: inline-block; position: relative; } .testimonials .client-area .img .icon { width: 50px; position: absolute; top: 70px; } .testimonials .client-area .img .icon:first-of-type { left: -70px; } .testimonials .client-area .img .icon:last-of-type { right: -70px; } .testimonials .client-area .author { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto 15px; } .testimonials .client-area h6 { font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; } .testimonials .client-area span { font-size: 12px; letter-spacing: 1px; color: #026CC7; } .testimonials p { margin-bottom: 15px; } /* ---------------------------------------------------------------- [ End Testimonials ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 12 Start Numbers ] -----------------------------------------------------------------*/ .numbers .icon { font-size: 45px; color: #fff; margin-bottom: 30px; } .numbers h3 { font-size: 55px; font-weight: 700; font-family: 'Dosis', sans-serif; margin-bottom: 30px; } .numbers h6 { font-weight: 300; } /* ---------------------------------------------------------------- [ End Numbers ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 13 Start Team ] -----------------------------------------------------------------*/ .team .item { border-radius: 10px; border-bottom: 1px solid #026CC7; -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05); box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05); } .team .item:hover .info .social { top: 0; } .team .info { background-color: #fff; text-align: center; padding: 20px 0; position: relative; overflow: hidden; } .team .info h6 { margin-bottom: 5px; } .team .info p { font-size: 14px; font-weight: 400; } .team .info .social { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background-color: #fff; -webkit-transition: all .4s; transition: all .4s; } .team .info .social a { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; border: 1px solid #eee; color: #777; margin: 0 5px; } .team .info .social a:hover { border-color: #026CC7; background-color: #026CC7; color: #fff; } /* ---------------------------------------------------------------- [ End Team ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 14 Start Blog ] -----------------------------------------------------------------*/ .blog .item .post-img .img { overflow: hidden; } .blog .item .post-img:hover img { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .blog .item .post-img img { -webkit-transition: all .5s; transition: all .5s; } .blog .item .cont { text-align: center; position: relative; padding: 40px 30px; background: #fff; } .blog .item .info { margin-bottom: 15px; } .blog .item .info a { color: #bababa; font-size: 11px; font-weight: 500; text-transform: uppercase; margin-right: 10px; } .blog .item .info a:last-of-type { margin-right: 0; } .blog .item .info a i { margin-right: 2px; } .blog .item h5 { font-size: 22px; font-weight: 700; line-height: 1.7; margin-bottom: 15px; } .blog .item .more { color: #026CC7; border-bottom: 1px solid #026CC7; } /* ---------------------------------------------------------------- [ End Blog ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 15 Start Contact ] -----------------------------------------------------------------*/ .contact { background-size: 150% !important; background-position: top left; } .contact .info h6 { font-size: 14px; text-transform: uppercase; color: #026CC7; margin-bottom: 15px; } .contact .info h3 { font-size: 22px; line-height: 1.6; margin-bottom: 15px; } .contact .info p span { display: block; font-size: 18px; font-weight: 700; } .contact .info h4 { margin: 15px 0; color: #828282; font-weight: 800; } .contact .info .social { margin-top: 30px; } .contact .info .social .icon { width: 40px; height: 40px; line-height: 40px; text-align: center; background: #eee; border-radius: 50%; margin-right: 10px; -webkit-transition: all .4s; transition: all .4s; } .contact .info .social .icon:last-of-type { margin-right: 0; } .contact .info .social .icon:hover { background: #026CC7; color: #fff; } .contact .form input, .contact .form textarea { font-size: 12px; width: 100%; padding: 20px 15px; background: #f5f5f5; border: 0; margin-bottom: 10px; } .contact .form input:focus, .contact .form textarea:focus { border-color: #333; } .contact .form textarea { height: 140px; max-height: 140px; max-width: 100%; } .contact .form .form-group { position: relative; } .contact .form .help-block li { color: #ce7373; font-size: 11px; font-weight: 500; position: absolute; top: 10px; right: 10px; } .contact .map { position: relative; padding: 0; } .contact .map #ieatmaps { min-height: 300px; height: 100%; width: 100%; } .contact .subscribe h6 { font-size: 16px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .contact .subscribe p { color: #eee; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 30px; } .contact .subscribe input { padding: 0 15px; height: 60px; width: 100%; line-height: 60px; border-radius: 30px; background: rgba(255, 255, 255, 0.19); border: 0; } .contact .subscribe .butn { background: #fff; height: 50px; line-height: 50px; padding: 0 35px; float: right; position: relative; margin-top: -55px; } .contact .subscribe .butn:hover { border-color: #fff; } /* .yellow-desk { width: 100%; display: inline-block; background-image: url(../img/ylw-dsk.webp); background-repeat: no-repeat; background-position: 100% 100%; background-size: 30%; } */ .our-product { width: 100%; display: inline-block; border-radius: 10px; overflow: hidden; } .our-product-image { width: 100%; display: inline-block; position: relative; top: 0; left: 0; } .our-product-image img { width: 100%; /* filter: grayscale(0.5);*/ } .product-text-box:hover .our-product-image img { filter: grayscale(0.1); } .product-text-box { width: 88%; height: 93%; display: inline-block; padding: 30px; background: rgba(255, 255, 255, 0.9); position: absolute; top: 3%; left: 6%; border-radius: 10px; } .product-text-box h2 { font-size: 22px; color: #026CC7; } .product-text-box p { font-size: 19px; color: #000000; font-weight: 500; } .our-product-text { width: 100%; display: inline-block; } .product-details-icon { width: auto; display: inline-block; text-align: center; position: absolute; bottom: 20px; right: 20px; transition: 0.3s; } .our-product:hover .product-text-box { background: none; transition: 0.3s; } .our-product:hover .product-text-box h2 { font-size: 0px; transition: 0.3s; } .our-product:hover .product-text-box p { font-size: 0px; transition: 0.3s; } .about { width: 100%; display: inline-block; padding: 150px 0 50px 0; background-image: url(../img/bg4.webp); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } .banner-text { width: 100%; display: inline-block; text-align: center; } .banner-text h2 { font-size: 52px; color: #fff; } .banner-text p { font-size: 16px; color: #e9e9e9; font-weight: 500; text-transform: uppercase; } .whatsapp-chat { width: 150px; display: inline-block; position: fixed; bottom: 30px; right: 30px; z-index: 3; } .whatsapp-chat img { width: 100%; display: inline-block; } .career_head { width: 100%; display: inline-block; border-bottom: solid 2px #f5f5f5; margin-bottom: 20px; padding-bottom: 20px; } .career_head h5 { color: #026CC7; float: left; display: block; border-left: solid 3px #026CC7; padding-left: 11px; } .career_head h3 { font-size: 13px; color: #ffffff; float: right; display: block; margin: 0; background: #f00; padding: 10px 20px; border-radius: 100px; text-transform: uppercase; } .careers_desc { width: 100%; display: inline-block; } .careers_desc h3 { font-size: 22px; color: #000; } .careers_desc p { font-size: 15px; color: #747474; font-weight: lighter; } .job_apply { width: 100%; display: inline-block; border-top: solid 1px #f5f5f5; padding-top: 20px; margin-top: 20px; } .job_apply a { width: auto; float: right; display: block; background: #026CC7; color: #fff; font-size: 17px; padding: 14px 30px; border-radius: 10px; } .hr_dec { width: 100%; display: inline-block; } .hr_dec p { font-size: 14px; color: #000; margin-top: 11px; } .tick-mark { background-image: url(../img/check-solid.svg); background-repeat: no-repeat; background-size: 17px; background-position: 0px 4px; padding: 0px 0 3px 24px; } .blog_categories { width: 100%; display: inline-block; } .blog_categories h2 { font-size: 21px; color: #000; text-transform: uppercase; padding: 10px 0px 10px 10px; border-left: solid 4px #026cc7; } .blog_categories a { display: inline-block; font-size: 16px; line-height: 30px; color: #000; margin-bottom: 10px; padding-left: 20px; position: relative; } .blog_categories a:before { position: absolute; left: 0; top: 50%; margin-top: -5px; height: 10px; width: 10px; background: #026CC7; content: ""; transform: rotate(45deg); } .blog_categories a span { width: 30px; height: 30px; float: right; font-size: 14px; text-align: center; color: #ffffff; background: #026cc7; padding: 1px 0; border-radius: 6px; } .blog_post { width: 100%; display: inline-block; margin-top: 10px; } .blog_post h2 { font-size: 21px; color: #000; text-transform: uppercase; padding: 10px 0px 10px 10px; border-left: solid 4px #026cc7; } .recent_post h3 { font-size: 14px; color: #555555; font-weight: 500; line-height: 24px; margin-bottom: 5px; } .recent_post h4 { font-size: 18px; color: #000; font-weight: 500; line-height: 24px; margin-bottom: 5px; } .game_logo { /* width: 240px; height: 240px; */ border-radius: 5%; border-width: 0; box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); overflow: hidden; margin-bottom: 30px; } .game_logo img { width:100%; } .install_app { width: auto; display: inline-block; background: #026cc7; padding: 11px 30px; color: #fff; border-radius: 10px; font-size: 16px; margin-right: 20px; } .rating { width: 100%; display: inline-block; text-align: center; } .rating h2 { font-size: 15px; font-weight: bold; } .rating p { font-size: 13px; color: #b9b9b9; margin: 0; } .app_banner_sec { width: 100%; display: inline-block; background-image: url(../img/app_bg.webp); background-repeat: no-repeat; background-size: 100%; background-attachment: fixed; padding: 150px 0; } .side { width: 100%; display: inline-block; position: sticky; top: 100px; } .form-wrap{ background: rgba(255,255,255,1); width: 100%; padding: 50px; margin: 0 auto; position: relative; margin-top: 50px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15); } .form-wrap:before{ content: ""; width: 90%; height: calc(100% + 60px); left: 0; right: 0; margin: 0 auto; position: absolute; top: -30px; background: #026cc7; z-index: -1; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15); } .form-group{ margin-bottom: 25px; } .form-group > label{ display: block; font-size: 18px; color: #000; } .custom-control-label{ color: #000; font-size: 16px; } .form-control{ height: 50px; background: #ecf0f4; border-color: transparent; padding: 0 15px; font-size: 16px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .form-control:focus{ border-color: #00c6ff; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1); box-shadow: 0px 0px 20px rgba(0, 0, 0, .1); } textarea.form-control{ height: 160px; padding-top: 15px; resize: none; } .live_chat { width: auto; display: inline-block; position: fixed; bottom: 30px; right: 30px; z-index: 3; } /* ---------------------------------------------------------------- [ End Contact ] ----------------------------------------------------------------- */ /* ---------------------------------------------------------------- [ 16 Start Footer ] ----------------------------------------------------------------- */ /*footer { background: #222; background: -webkit-gradient(linear, left top, right bottom, from(#222), to(#555)); background: linear-gradient(to right bottom, #222, #555); padding: 80px 0; } footer .social a { color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: transparent; margin: 15px 5px; } footer .social a:hover { background: #026CC7; } footer p { color: #828282; font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; }*/ .footer-section { background: #222; background: -webkit-gradient(linear, left top, right bottom, from(#222), to(#555)); background: linear-gradient(to right bottom, #222, #555); position: relative; padding-top: 20px; } .footer-cta { border-bottom: 1px solid #373636; } .single-cta i { color: #026CC7; font-size: 30px; float: left; margin-top: 8px; } .cta-text { padding-left: 15px; display: inline-block; } .cta-text h4 { color: #fff; font-size: 20px; font-weight: 600; margin-bottom: 2px; } .cta-text span { color: #757575; font-size: 15px; } .footer-content { position: relative; z-index: 2; padding-top: 50px; } .footer-pattern img { position: absolute; top: 0; left: 0; height: 330px; background-size: cover; background-position: 100% 100%; } .footer-logo { margin-bottom: 30px; } .footer-logo img { max-width: 170px; } .footer-text p { margin-bottom: 14px; font-size: 14px; color: #d3d3d3; line-height: 28px; } .footer-social-icon span { color: #fff; display: block; font-size: 20px; font-weight: 700; font-family: 'Poppins', sans-serif; margin-bottom: 20px; } .footer-social-icon a { color: #fff; font-size: 16px; margin-right: 15px; } .footer-social-icon i { height: 40px; width: 40px; text-align: center; line-height: 38px; border-radius: 50%; display: inline-block; } .social-bg{ background: #4A4A4A; } .social-bg:hover { background: #026CC7; } .footer-widget-heading h3 { color: #fff; font-size: 20px; font-weight: 400; margin-bottom: 40px; position: relative; } .footer-widget-heading h3::before { content: ""; position: absolute; left: 0; bottom: -15px; height: 2px; width: 50px; background: #026CC7; } .footer-widget ul li { display: inline-block; float: left; width: 50%; margin-bottom: 12px; } .footer-widget ul li a:hover{ color: #026CC7; } .footer-widget ul li a { color: #d3d3d3; text-transform: capitalize; } .subscribe-form { position: relative; overflow: hidden; } .subscribe-form input { width: 100%; padding: 14px 28px; background: #2E2E2E; border: 1px solid #2E2E2E; color: #fff; } .subscribe-form button { position: absolute; right: 0; background: #026CC7; padding: 13px 20px; border: 1px solid #026CC7; top: 0; } .subscribe-form button i { color: #fff; font-size: 22px; transform: rotate(-6deg); } .copyright-area{ padding: 25px 0; } .copyright-text p { margin: 0; font-size: 14px; color: #878787; } .copyright-text p a{ color: #026CC7; } .footer-menu li { display: inline-block; margin-left: 20px; } .footer-menu li:hover a{ color: #026CC7; } .footer-menu li a { font-size: 14px; color: #878787; } /* ---------------------------------------------------------------- [ End Footer ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 17 Responsive ] -----------------------------------------------------------------*/ @media screen and (min-width: 1200px) { .container { max-width: 1200px; } } @media screen and (max-width: 991px) { .mb-md50 { margin-bottom: 50px; } .mb-md30 { margin-bottom: 30px; } .mb-md0 { margin-bottom: 0; } .bgimg-height { height: 400px; } .hide-md { display: none !important; } .bg-fixed { background-attachment: scroll !important; } .curve { display: none; } .section-padding { padding: 120px 0 !important; } .section-padding .container { margin-top: 0 !important; margin-bottom: 0 !important; } .section-head { text-align: center; } .section-head .text-right { text-align: center !important; margin-bottom: 15px; } .section-head .text-right h6 { margin-right: 0; } .navbar .navbar-collapse { max-height: 340px; overflow: auto; text-align: center; padding: 10px 0; } .navbar .nav-link { margin: 10px auto !important; } .nav-scroll { padding-left: 15px; padding-right: 15px; } .nav-scroll .navbar-collapse .nav-link { color: #000 !important; } .nav-scroll .navbar-collapse .active { color: #026CC7 !important; } .header { min-height: 100vh; background-attachment: scroll !important; background-position: 50% 0% !important; } .header .caption h4 { font-size: 30px; } .header .caption h3 { font-size: 45px; line-height: 1.4; } .hero .fet-img { padding: 0; } .portfolio .items.width2 { width: 50%; } .featurse .content { padding: 0; margin-bottom: 50px; } .featurse .item.active { left: 0; } .story-container { padding-left: 100px; } .story-row .icon-center img { display: none; } .date-calendar:after { width: 80px !important; height: 80px !important; } .date-calendar { width: 70px !important; height: 70px !important; } .sa-date { font-size: 24px !important; } .timeline-elements { left: -44px !important; } .today-story-row .timeline-elements:after { margin-left: -10px !important; } } @media screen and (max-width: 767px) { .mb-sm50 { margin-bottom: 50px; } .mb-sm30 { margin-bottom: 30px; } .butn { padding: 12px 20px; margin-left: 2px; margin-right: 2px; } .header .caption h4 { font-size: 20px; } .header .caption h3 { font-size: 25px; line-height: 1.4; } .hero .intro h2 { font-size: 24px; } .hero .fet-cont h3 { font-size: 22px; } .hero .fet-cont .circle { margin-right: 15px; } .portfolio .items.width2, .portfolio .items { width: 100%; } .featurse .item { padding: 30px 15px; text-align: center; } .featurse .icon { float: none; margin-bottom: 15px; } .featurse .cont { margin: 0; } .ready .content h3 { font-size: 25px; } .navbar .icon-bar { color: #000; } .game_logo { width: 200px; height: 200px; } } @media screen and (max-width: 480px) { .header .caption h4 { font-size: 16px; } .header .caption h3 { font-size: 20px; line-height: 1.4; } .section-head h4 { font-size: 30px; } .hero .fet-cont .circle canvas { width: 80px !important; height: 80px !important; } .hero .fet-cont .circle span { top: 25px; } .portfolio .filtering .filter { padding: 0; } .portfolio .filtering span { margin: 0; padding: 8px 15px; } } /*# sourceMappingURL=style.css.map */ #story-area{ background:#161B22; } .story-row{ position:relative; /* border-left:3px solid rgba(141,215,243,0.5);*/ margin-top: 30px; } .timeline-elements:before{ content: ""; width: 3px; background: rgba(141,215,243,0.5); display: block; position: absolute; top: 24px; bottom: 0; left: 6px; } .today-story-row .timeline-elements:after{ content: ""; background-image: url("../img/arrow.webp"); background-repeat: no-repeat; background-size: unset; width: 100px; height: 140px; position: absolute; margin-top: 124px; margin-left: 6px; } .today-story-row .timeline-elements:before{ display:none; } .today-story-row{} .timeline-elements{ position: absolute; top: 0; bottom: 0; left: 0; width: 15px; } .story-container .content-container{ padding:14px 14px 14px 74px; } .story-container{ margin-top:24px; } .story-row h4{ color: #fff; line-height:1.5; } .story-row p, .jobs-text p{ color:#bdbdbd; font-size: 0.87rem; margin-top:24px; font-weight:300; letter-spacing: 0.007rem; } .sa-month{ font-size:11px; width:100%; float:left; color:#76bed9; letter-spacing:0.02em; text-align:center; text-transform:uppercase; margin-top:15px; } .sa-year{ background: #154860; font-size: 15px; width: 100%; float: left; color: #154860; text-align: center; text-transform: uppercase; margin-top: -45px; padding: 5px; background: #76bed9; border-radius: 30px; } .sa-date{ font-size:34px; width:100%; float:left; color:#76bed9; letter-spacing:0.02em; text-align:center; font-weight:600; line-height:1; } .date-calendar{ background:#154860; border:3px solid #76bed9; border-radius:100%; width:94px; height:94px; position:absolute; top: 0%; left: 50%; transform: translateX(-50%); box-shadow: 0px 0px 0px 30px #161B22; -webkit-box-shadow: 0px 0px 0px 30px #154860; } .date-calendar .vertical-align{ width:100%; } .story-row .icon-center img, .story-row h4, .story-row p{ -webkit-transition:all .2s; transition:all .2s; } .story-row h4 { font-size: 25px; } .story-row .icon-center img{ -webkit-transform: scale(1.15); transform: scale(1.15); width: 330px; } .story-row:hover .icon-center img{ transform: scale(1.20); } .date-calendar:after { content: ''; width: 103px; height: 103px; position: absolute; left: -8px; top: -7px; border-radius: 70%; border: 2px dashed #76bed9; } .our-project { width: 100%; display: inline-block; background: #fff; padding: 10px; border-radius: 10px; border: solid 2px #ededed; position: relative; margin-bottom: 25px; } .our-project:after { content: ''; width: 100%; height: 100%; position: absolute; left: -5px; top: -5px; border-radius: 10px; border-left: 2px dashed #cef2ff; border-top: 2px dashed #cef2ff; transition: 0.5s; } .our-project:hover::after { border-left: 2px dashed #026CC7; border-top: 2px dashed #026CC7; transition: 0.5s; } .our-project img { -webkit-box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.36); -moz-box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.36); box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.36); } .our-project h2 { font-size: 22px; color: #000; margin-top: 15px; margin-bottom: 5px; } .our-project p { font-size: 14px; line-height: 23px; color: #000; margin-bottom: 10px; } .our-project a { width: 35px; height: 35px; position: absolute; bottom: 0; right: 0; z-index: 2; background: #026cc7; color: #fff; padding: 10px; border-radius: 10px 0 9px 0; text-align: center; font-size: 13px; }