body { color:#777; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 400; line-height: 26px; background:#fff; overflow-x:hidden; background-size: cover; } .servic_txt {font-size:22px; color:#000; font-family: 'Roboto Slab', serif;} .services_heading {font-size:30px; font-weight:600; padding:15px 0; line-height:30px;} html, body { height: 100%;position:relative; } h1, h2, h3, h4, h5, h6 { letter-spacing: 0px; margin-top: 0px; font-family: 'Roboto Slab', serif; color: #000; font-weight: 400; } a { font-family: 'Roboto Slab', serif; text-decoration: none; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } a:hover { color: #fff; text-decoration: none; } a:focus { outline: none; text-decoration: none; } p { margin-bottom: 0; font-family: 'Roboto Slab', serif; color:#000; } ul, li { margin: 0; padding: 0; list-style:none; } fieldset { border: 0 none; margin: 0 auto; padding: 0; } b, strong { font-weight: 600; } .no-padding { padding: 0 } ::-moz-placeholder { color: #000; } /*END PRELOADER DESIGN*/ .section-padding { padding: 40px 0; } /*START SECTION TITLE DESIGN*/ .section-title { margin-bottom: 30px; position: relative; } .section-title p.test { /* text-transform: capitalize; */ font-size: 40px; font-weight: 500; } .section-title p.test::after { content: ""; display: block; background: #061525; height: 2px; width: 60px; margin: auto; margin-top: 20px; margin-bottom: 20px; } .secton_title test::after {background:none;} .section-title p{ width:70%; margin:auto; } h2.section-title-white{color:#fff;} p.section-title-white{color:#fff;} /*END SECTION TITLE DESIGN*/ /*START SCROLL TO TOP*/ .topcontrol { background: #000000 none repeat scroll 0 0; border-radius: 30px; border:2px solid #000000; bottom: 5px; -webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2); color: #fff; cursor: pointer; font-size: 22px; height: 50px; line-height: 47px; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; position: fixed; right: 5px; text-align: center; -webkit-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; width: 50px; } .mobile_view { display:none;} .desktop_view {display:block;} .galelry_office li.nav-item { background-color: #f3f3f3; margin-right: 10px; border-radius: 5px; margin-bottom:10px; width: 90%; } .galelry_office .nav-link { color: #000; } .galelry_office .nav { display: -ms-flexbox; /* display: flex; */ -ms-flex-wrap: wrap; /* flex-wrap: wrap; */ /* padding-left: 0; */ margin-bottom: 0; /* list-style: none; */ text-align: center; margin: 0 auto; /* display: inline-flex; */ align-items: center; width: 20%; float: left; } @media only screen and (max-width:768px) { .contact_us_bg { padding: 20px!important; } .banner_services { padding: 20px 10px!important; } .spcbt { margin-top: 80px !important; } .top_area_breadcum h1 { font-size: 36px!important; } .banner_text p { text-align: left!important; } .rightarrow { display:none;} .galelry_office .nav { width: 100%!important; } .galelry_office li.nav-item { width: 100%!important; } .section-top-title h1 { font-size: 40px!important; } .widget-sidber { margin-top: 30px!important; } .style-three .single-input-box select { margin-bottom: 25px!important; } .reffer {margin-bottom:40px;} .style-three .add-white-bg { padding: 6px 5px 21px!important; } .style-three .single-contact-box { margin-right: 0!important; } .style-three .single-contact-info-box { margin-top: 30px; } .blog_area { margin-top: 0 !important; } .our-services { padding: 50px 0 0px!important; } .about-content-two_about { padding-top: 0!important; } .about-content-two_about img { border: 4px solid #fff; width: 100%; margin-top: 20px; } .single-team-home .team-content-home { bottom: -100px!important;} .section-title p.test { font-size: 30px; width: 100%; } .quote { padding: 20px!important; } .mobile_view { display:block!important;} .desktop_view {display:none!important;} .menu_dropdown ul li ul.sub-menu li a { color: #000000 !important; } #navigation ul li ul.sub-menu li { background-color: #061525; } #navigation ul li ul.sub-menu li a { color: #fff!important; } #navigation ul li ul, #navigation ul li ul li ul { margin: 0; } .main-menu-3 > li > a .menu-text { display: block; display: block; display: block; } .topcontrol {display:none;} } .topcontrol:hover { background: #fff; color: #061525; border:2px solid #000000; } /*END SCROLL TO TOP*/ /* * ---------------------------------------------------------------------------------------- * 01.END GENERAL STYLE * ---------------------------------------------------------------------------------------- */ /*02. START TOP HEADER DESIGN*/ .logo-contact { padding: 6px 0; background: #061525; } @media only screen and (max-width:960px) { .logo-contact {display:none;} } .logo-img{} .logo-img a { color: #fff; font-size: 40px; text-transform: uppercase; margin-top: 5px; display: inline-block; } .single-top-contact {margin-top:6px;} @media only screen and (max-width:880px) { .single-top-contact{margin-bottom:30px;} } .single-top-contact i { color: #fff; float: left; margin-right: 7px; font-size: 17px; margin-top: 4px; } .single-top-contact p a{ font-size: 15px; color: #fff; margin-bottom: 0px; overflow: hidden; font-family: 'Poppins', sans-serif; } /*TOP SOCIAL PROFILES*/ .top_social_profile{float:right;} .top_social_profile ul{ list-style: outside none none; margin: 0; padding: 0; text-align:center; } .top_social_profile ul li{display: inline-block;} .top_social_profile ul li a { background:#fff; text-align: center; border: 0px; text-transform: uppercase; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; margin-right: 5px; font-size: 16px; color: #232434; display: block; width: 35px; height: 35px; line-height: 35px; border-radius: 30px; } @media only screen and (max-width:768px) { .top_social_profile ul li a{margin-right:10px;margin-bottom:10px;} } .top_social_profile ul li a:hover{ color:#000; } .top_f_facebook:hover{background:#3B5998;} .top_f_twitter:hover{background:#1A90D9;} .top_f_instagram:hover{background:#FF5252;} .top_f_linkedin:hover{background:#0e76a8;} /*02. END LOGO WITH CONTACT*/ /* * ---------------------------------------------------------------------------------------- * 03.START BOOTSTRAP NAVIGATION OVERRIDES * ---------------------------------------------------------------------------------------- */ .site-logo img{ width: 200px; height: auto; } @media (min-width: 1200px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1180px; } } .bg-faded { background-color:transparent; transition: all 0.5s ease 0s; } @media only screen and (max-width:767px) { .bg-faded {background-color:#fff;} } .navbar-fixed { z-index: 999; position: fixed; opacity: .98; width: 100%; padding:10px 0; top: 0; -webkit-animation: fadeInDown 800ms; animation: fadeInDown 800ms; -webkit-backface-visibility: hidden; border-radius: 0px; background: #fff; box-shadow: 0px 60px 60px rgba(0,0,0,0.1); } @media only screen and (max-width:767px) { .navbar-fixed {background: #fff; padding:20px 0; } .navbar-fixed img { margin-top: 10px; } } #navigation { padding: 10px 0; } @media screen and (max-width:480px){ #navigation{ padding: 15px 0; } } #navigation.navbar-fixed { padding: 8px 0 18px 0; z-index: 9999; } .header_right { float:right; } @media screen and (max-width:880px){ .header_right { float:none; display: flex; flex-basis: auto; } } #main-menu{ margin-top: 10px; } #main-menu ul{ list-style-type: none; } #main-menu ul li{ display: inline-block; padding:0px 13px; position: relative; } #main-menu ul li a { color: #232434; font-size: 16px; text-transform: capitalize; transition: .3s; font-weight: 500; text-decoration: none; } @media only screen and (max-width:1024px) { #main-menu ul li{padding:0px 8px;} #main-menu ul li a {font-size: 16px;} } @media only screen and (max-width:960px) { #main-menu ul li{padding:0px 8px;} #main-menu ul li a {font-size: 13px;} } @media only screen and (max-width:800px) { #main-menu ul li{padding:0px 4px;} #main-menu ul li a {font-size: 16px;} } #navigation.navbar-fixed #main-menu ul li a{ color: #232434; } #navigation.navbar-fixed #main-menu ul li a:hover, #navigation.navbar-fixed #main-menu ul li a:focus, #main-menu ul li a:hover, #main-menu ul li a:focus{ color:#061525; } #main-menu ul li a:hover, #main-menu ul li a:focus{ color:#061525; } .slicknav_nav_icon{ color: #061525; font-size: 24px; } .slicknav_menu .slicknav_icon::before { background: transparent; width: 1.125em; height: 0.875em; display: block; content: "\e68e"; position: absolute; font-family: 'themify'; color: #232434; font-size: 20px; } #mobile_menu{display: none;} @media only screen and (max-width:767px) { .navbar-default { padding: 10px!important; } .navbar-collapse{ margin-top: 15px; } #navigation ul li a{ position: inherit; color: #232434; } #navigation ul li ul , #navigation ul li ul li ul{ opacity: 1; position: inherit; top: 0; transition: all 0.3s ease 0s; z-index: 1; visibility: visible; background: #fff none repeat scroll 0 0; box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.05); padding: 15px; left: 0; background: #fff; list-style: none; width: 100%; } #navigation ul li ul.sub-menu li{ z-index: 1; } #navigation ul li:hover ul.sub-menu{ top:0; opacity:1; z-index:999; visibility:visible; } #main-menu{ display: none; } #mobile_menu{ display: block; width: 100%; } .slicknav_nav ul li a{ color: #232434 !important; font-size: 16px; text-transform: capitalize; } } @media only screen and (max-width:767px) { .navbar-brand { padding-top: 20px; } .slicknav_menu { font-size: 16px; box-sizing: border-box; background: transparent; padding: 0; margin-top: 10px; } } @media only screen and (max-width:568px) { .slicknav_menu { margin-top: -40px; } } @media only screen and (max-width:480px) { .slicknav_menu { margin-top: -40px; } } .arrow-btn::after { font-family: themify; content: '\e64b'; position: absolute; top: 60%; right: -1px; margin-top: -10px; font-size: 12px; } @media only screen and (max-width:844px) { .arrow-btn::after {right: -3px;} } @media only screen and (max-width:767px) { .arrow-btn::after {display:none;} } .slicknav_nav .slicknav_arrow {font-size: 16px;} /*START DROPDOWN MENU*/ .menu_dropdown ul { list-style-type: none } .menu_dropdown li ul.sub-menu, .menu_dropdown ul li ul.sub-menu li ul.sub-menu { background: #fff; left: -30px; opacity: 0; filter: alpha(opacity=0); position: absolute; top: 0%; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; visibility: hidden; width: 250px; text-align: left; z-index: 999; margin-top:25px; border-radius: 3px; box-shadow:0 0 45px rgba(0, 0, 0, .08); font-family: 'Poppins', sans-serif; } .menu_dropdown ul li ul.sub-menu li ul.sub-menu { top: 0; left: 100%; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .menu_dropdown ul li ul.sub-menu li { padding: 0; width: 100%; } .menu_dropdown ul li ul.sub-menu li:hover { background-color: #7f7f7f; } .menu_dropdown ul li:hover ul.sub-menu { /* top: 100%; */ opacity: 1; filter: alpha(opacity=100); z-index: 999; visibility: visible; } .menu_dropdown ul.nav > li ul li:hover ul.sub-menu { opacity: 1; filter: alpha(opacity=100); visibility: visible; } .menu_dropdown ul li ul.sub-menu li a { font-size: 15px; padding:8px 15px; text-transform: capitalize; display: block; border-bottom: 0px; } .menu_dropdown ul li ul.sub-menu li:last-child a{border-bottom:none;} .menu_dropdown ul li:hover ul.sub-menu li a:hover { color: #fff!important; text-decoration: none; padding-left:15px; background:none; } /*END DROPDOWN MENU*/ /* * ---------------------------------------------------------------------------------------- * 03.END BOOTSTRAP NAVIGATION OVERRIDES * ---------------------------------------------------------------------------------------- */ .home_bg { height: 750px; position:relative; } .home_bg:before { background:rgba(0,0,0,0.4); content: ""; height: 100%; filter: alpha(opacity=80); position: absolute; width: 100%; } .hero-text h1 { color: #fff; font-size: 64px; font-weight: 700; letter-spacing: 0; line-height: 58px; padding-top: 250px; text-transform: uppercase; margin-bottom: 20px; } .hero-text p { color: #fff; width: 65%; margin: auto; margin-bottom: 30px; } .home_btn{margin-top:40px;} .home_btn a { margin-right: 10px; } .about_btn a span{} .hero-img{padding-top: 200px;} .btn_one { background: #061525; border:2px solid #061525; display: inline-block; padding: 12px 30px; color: #fff; font-weight: 500; border-radius: 2px; -webkit-transition: 0.3s; transition: 0.3s; } .btn_one:hover{ background:none; border:2px solid #fff; color: #fff; } .btn_two { background: #fff; border:2px solid #fff; display: inline-block; padding: 12px 30px; color: #191b26; font-weight: 500; border-radius: 2px; -webkit-transition: 0.3s; transition: 0.3s; } .btn_two:hover{ background: none; border:2px solid #fff; color: #fff; } /*START HOME VIDEO*/ .home_video{height: 700px;position:relative;} .home_video:before { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0; content: ""; left: 0; top: 0; } .html-video { top: 0%; left: 0%; width: 100%; overflow: hidden; position: relative; } .slider-caption { left: 0; position: absolute; text-align: center; top: 38%; transform: translate(0%, -50%); width: 100%; z-index: 15; } video { min-width: 100% } @media only screen and (max-width:768px) { .top_benner-2 { position: absolute !important; left: 0 !important; } .about-content-two { padding-top: 50px !important; margin-top: 40px !important; } video { min-width: 100%;height:100%; } } /*END HOME VIDEO*/ #particles-js { position: absolute; width: 100%; height: 100%; top: 0; } /*04. END HOME CSS*/ /* * ---------------------------------------------------------------------------------------- * 05.START ABOUT DESIGN * ---------------------------------------------------------------------------------------- */ .as_box{-webkit-box-shadow: 0 0 45px rgba(0, 0, 0, .08);box-shadow: 0 0 45px rgba(0, 0, 0, .08);} .about_single { padding:10px; -webkit-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; border-right: 1px solid #eee; } .about_single img { margin: 0 auto 10px auto; text-align: center; display: block; } .about_single:hover img { -webkit-transform: scale(1.25); transform: scale(1.25); } .about_single img { transition: all .25s ease; } .about_single h4 { text-align: center; font-weight: 500; margin-bottom: 10px; color: #000; text-transform: capitalize; -webkit-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; font-size: 16px; } .about_single:hover h4 { color: #061525; } @media only screen and (max-width:480px) { .about_single { margin-bottom: 20px } } @media only screen and (max-width:768px) { .top_banner { margin-top: -40px; } .about_single h4 { font-size: 15px } } .about_single p { text-align: center; } /*START ABOUT TWO*/ .about-content-two { /* background-image: url(../img/bg/bg-intro-about.png); */ /* background-size: 100%; */ /* background-repeat: no-repeat; */ background-position: top center; position: relative; background-color: #f3f3f3; padding-top: 270px; margin-top: -190px; } section.banner_sd { margin-top: -70px; } .about-two-img img { border: 4px solid #fff; width: 100%; } @media only screen and (max-width:880px) { .menu_dropdown ul { list-style-type: none; margin-top: 20px; } .about-two-img{margin-bottom:0;} } .about-two img{} .about-two{} @media only screen and (max-width:768px) { .about-two{padding-top:40px;} } .about-two h2{ margin-bottom: 15px; line-height: 52px; font-size:40px; } .about-two span { color: #061525; letter-spacing: 2px; font-size: 18px; } .about-two p { margin-bottom: 30px; /* padding-right: 100px; */ color: #000; font-weight: 400; text-align: justify; } @media only screen and (max-width:768px) { .about-two p {padding-right: 0px;} } .about-btn{ background: #000000; color: #fff; padding: 12px 30px; display: inline-block; border-radius: 3px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .about-btn:hover{ background: #232434; color: #fff; } .award_area { overflow: hidden; margin-bottom: 30px; } .award_area img { float: left; margin-right: 30px; width: 180px; } .award_area h4 { padding-top: 30px; overflow: hidden; font-size: 18px; font-weight:500; line-height: 30px; text-transform: uppercase; } .award_area p{} /*END ABOUT TWO*/ /*START ABOUT CONTENT HOME PAGE TWO DESIGN*/ .about-home-two{margin-bottom:30px;} .about-home-two h4 { color: #061525; letter-spacing: 2px; font-size: 18px; } .about-home-two h1{margin-bottom:20px;} .about-home-two p{margin-bottom:20px;} .about_call_video{} .call_area { float: left; width: 300px; margin-right: 30px; } .call_area i { background: #061525; color: #fff; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 30px; border-radius: 100px; margin-right: 20px; float: left; box-shadow: 10px 15px 18px rgba(23, 23, 36, 0.15); } .call_area span{} .call_area h3{} .home_two_video_btn { overflow: hidden; } .video-play-two { display: block; position:relative; } .video-play-two i { background: #061525; border:1px solid #061525; color: #fff; width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 100px; margin-right:15px; display: inline-block; transition: all 0.3s ease 0s; } .video-play-two:hover i{ background: #fff; color:#061525; border:1px solid #eee; } .video-title { font-weight: 500; color: #232434; text-transform: uppercase; font-size: 16px; } /*END ABOUT CONTENT HOME PAGE TWO DESIGN*/ /* * ---------------------------------------------------------------------------------------- * 05.END ABOUT DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 06.START SERVICE DESIGN * ---------------------------------------------------------------------------------------- */ .best-service { background-image: url(../img/bg/service-bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: top center; position: relative; padding-bottom:50px; } .best-service:before { background:#020928; opacity:0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; bottom: 0; content: ""; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .service-content{} .service-content p { margin-top: 32px; padding-left: 30px; color:#fff; } .single_service { background:#fff; padding: 20px; border-radius: 10px; -webkit-transition: 0.3s; -webkit-transition:0.2s; -o-transition: 0.2s; transition: 0.2s; margin-bottom: 30px; position:relative; -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15); box-shadow:0 0 3px rgba(0, 0, 0, 0.15); z-index:2; text-decoration:none!important; min-height: 470px; } .single_service:hover a { text-decoration: none; display: block; } .single_service:hover li {color:#fff;} .single_service:hover{ background:#061525; -webkit-box-shadow:0px 60px 60px rgba(0,0,0,0.1); box-shadow:0px 60px 60px rgba(0,0,0,0.1); position:relative; -webkit-transform: translate(0, -10px); -ms-transform: translate(0, -10px); transform: translate(0, -10px); } @media only screen and (max-width:480px) { .single_service {padding:15px;margin: 0 0 20px 0px;} } .single_service img { margin-bottom: 30px; width: 70px; height: 70px; line-height: 70px; } .single_service2 img { margin-bottom: 30px; width: 100%; border-radius:6px; height:auto; } @media only screen and (max-width:480px) { .single_service3 img { margin-bottom: 0; } .services-details-area { padding: 10px 0 70px!important; } .content_box { padding-bottom: 0!important; } .single_service span { width: 60px; height: 60px; line-height: 60px;} } .single_service h3 { font-weight: 600; font-size: 18px; padding-bottom: 0px; } .single_service:hover h3{color:#fff;} .single_service:hover a{color:#fff;} .single_service p { margin-bottom: 0px; text-align: justify; line-height: 20px; } .single_service2:hover img { filter: none!important; } .single_service:hover p{color:#fff;} /*START SERVICE DESIGN HOME TWO*/ .service_home_two { padding-bottom: 10px; background:linear-gradient(90deg, rgb(236, 255, 252) 0%, rgb(253, 250, 239) 35%, rgb(251, 251, 251) 100%); } .single_service_two { background: #fff; padding: 30px; border-radius: 3px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; margin: 0 0 60px 10px; position: relative; -webkit-box-shadow: 0px 22px 158px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 22px 158px 0px rgba(0, 0, 0, 0.1); min-height: 225px; } .single_service_new { background-color: #000000; } .single_service_new h3{ color:#fff;} .single_service_new p{ color:#fff; } .single_service_new span {color: #000!important; background: #fff!important;} @media only screen and (max-width:480px) { .single_service_two {padding:30px;margin: 0 0 65px 0px;} } .single_service_two span { color: #fff; font-size: 22px; display: block; margin-bottom: 30px; background: #061525; width: 70px; height: 70px; line-height: 70px; text-align: center; border-radius: 100px; position: absolute; top: -35px; left: 55px; -webkit-box-shadow: 0px 22px 158px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 22px 158px 0px rgba(0, 0, 0, 0.1); } @media only screen and (max-width:480px) { .single_service_two span { width: 60px; height: 60px; line-height: 60px;} } .single_service_two h3 { font-weight: 600; font-size: 22px; padding-bottom: 6px; padding-top: 20px; } .single_service_new p {color:#fff!important; } .single_service_two p { margin-bottom: 0px; color: #000; } /*END SERVICE DESIGN HOME TWO*/ /*START SINGLE SERVICE*/ .marketing_area{} .marketing_content{} .marketing_content h2 { margin-bottom: 40px; font-size: 40px; font-weight: 600; } .marketing_content img{} .marketing_text{} .marketing_text p{margin-bottom:20px;} .single_marketing{margin-bottom: 40px;} .marketing_icon_img{} .marketing_icon_img img { float: left; margin-right: 20px; width: 70px; margin-bottom: 20px; } .single_marketing h3{} .single_marketing p{overflow: hidden;} /*END SINGLE SERVICE*/ /*START PROGRESS DESIGN*/ .progress_area { position: relative; padding:60px 0; } .progress_area:before { background:#020928; opacity:0.5; bottom: 0; content: ""; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .skill-bg { background: #fff; padding: 100px 60px; position: relative; } .progress_content{position:relative;} .progress_content h1 { margin-bottom: 15px; font-size: 53px; line-height: 66px; } @media only screen and (max-width:480px) { .progress_content h1 { margin-bottom: 15px; font-size: 40px; line-height: 56px; } } .progress_content p { margin-bottom: 30px; padding-right: 60px; } @media only screen and (max-width:768px) { .progress_content p {padding-right: 0px;} } .progress-bar-text { font-size: 16px; margin-bottom: 10px; text-transform: capitalize; font-weight: 500; } .progress-bar-text span { float: right } .progress-bar { background: #e8e8e9 none repeat scroll 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; height: 15px; margin: 0 0 20px; border-radius: 30px; position: relative; width: 100%; } .progress-bar > span { background: #061525 none repeat scroll 0 0; display: block; height: 100%; width: 0; border-radius: 30px; } /*END PROGRESS DESIGN*/ /*START COUNTER PROCESS*/ .about-process { padding-bottom: 50px; background:#f5f8fa; } .counter-process{} @media only screen and (max-width:480px) { .counter-process{margin-bottom:60px;} } .counter-process h1{ margin-bottom: 15px; line-height: 50px; font-weight: 500; } .counter-process p{ margin-bottom: 30px; padding-right: 100px; } .counter-process ul{list-style:none;} .counter-process ul li { line-height: 40px; font-weight: 400; } .counter-process ul li span { margin-right: 10px; border: 2px solid #061525; border-radius: 30px; font-size: 14px; font-weight: 600; color: #fff; background: #061525; } /*END COUNTER PROCESS*/ /*START COUNTER*/ .counter_feature {} .counter_two { padding: 60px 30px; text-align: center; border-radius: 3px; margin-bottom: 30px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .counter_two:hover{ -webkit-box-shadow:0px 50px 50px rgba(0,0,0,0.1); box-shadow:0px 50px 50px rgba(0,0,0,0.1); position:relative; z-index:100; -webkit-transform: translate(0, -10px); -ms-transform: translate(0, -10px); transform: translate(0, -10px); } @media only screen and (max-width:768px) { .counter_two { margin-bottom: 40px; overflow: hidden; } } .counter_two h2 { font-size: 50px; margin-top: 0; color:#fff; } .counter_two h5 { margin-top: 5px; margin-bottom: 0; color:#fff; text-transform: capitalize; } .color-one{background: #061525;} .color-two{background: #35ac39;margin-top: 60px;} @media only screen and (max-width:480px) { .color-two{margin-top:0px;} } .color-three{background: #f54291;margin-top: -60px;} @media only screen and (max-width:480px) { .color-three{margin-top:0px;} } .color-four{background: #bac964;} /*END COUNTER*/ /* * ---------------------------------------------------------------------------------------- * 06.END SERVICE DESIGN * ---------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------- * 07.START TEAM DESIGN * ---------------------------------------------------------------------------------------- */ /*START HOME PAGE TEAM DESIGN*/ .our_team { padding-top: 30px; padding-bottom: 100px; } @media only screen and (max-width:880px) { .blog_area { padding-bottom: 20px!important;} a.logo_img img { float: none!important; } .service2-section-area .images-content-area .img1 img { height: 630px!important; } .service2-section-area .images-content-area .content-area { /* margin-top: -1126px !important; */ margin-bottom: 30px; /* height: 810px; */ background: #070c10; border-radius: 10px; } .our_team {padding-bottom:0px;} } .single-team-home{ position: relative; border-radius: 10px; } @media only screen and (max-width:880px) { .single-team-home{margin-bottom:130px;} .section.our_team { margin-bottom: 0!important; } } .single-team-home:before { content: ""; background:rgba(0, 0, 0, 0.4); position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; border-radius: 10px; } .single-team-home .img img { border-radius: 10px; width: 100%; } .single-team-home .team-content-home { text-align: center; position: absolute; left: 10px; right: 10px; bottom: -100px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; background: #fff; padding: 20px; -webkit-box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2); box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2); border-radius: 10px; } .team-content-home .name_expert{ margin: 0px; font-weight: 600; font-size: 22px; margin-bottom: 5px; } .team-content-home p{ font-weight: 500; font-size: 14px; } .single-team-home .team-content-home ul.social-home{list-style:none;margin-top: 10px;} .single-team-home .team-content-home .social-home li {display: inline-block;} .single-team-home .team-content-home .social-home li a { display: block; height: 35px; width: 35px; line-height: 35px; border-radius: 100px; font-size: 14px; color: #fff; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .single-team-home .team-content-home .social-home li a:hover { color: #fff; } .single-team-home:hover:before { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .single-team-home:hover .team-content-home { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; } .facebook-home{background:#3B5998;} .twitter-home{background:#1A90D9;} .instagram-home{background:#FF5252;} /*END HOME PAGE TEAM DESIGN*/ /*START TEAM ONE DESIGN*/ .team-item { position: relative; text-align: center; -webkit-box-shadow: 0 0 45px rgba(0, 0, 0, .07); box-shadow: 0 0 45px rgba(0, 0, 0, .07); } .team-item .team-social { position: absolute; padding: 0; top: 15px; left: 0; overflow: hidden; } .team-item .team-social li { list-style-type: none; margin-bottom: 10px; margin-left: -50px; opacity: 0; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .team-item:hover .team-social li { margin-left: 15px; opacity: 1; } .team-item .team-social li .btn { background: #FFFFFF; color: #061525; border-radius: 40px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .team-item .team-social li .btn:hover { color: #FFFFFF; background:#061525;; } .team-item span{color: #061525;} .team-item .team-social li:nth-child(1) { -webkit-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; } .team-item .team-social li:nth-child(2) { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .team-item .team-social li:nth-child(3) { -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .team-item .team-social li:nth-child(4) { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .team-item .team-social li:nth-child(5) { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } /*END TEAM ONE DESIGN*/ .team_area{padding-bottom:20px;} .our-team { margin-bottom: 60px; } @media only screen and (max-width:880px) { .our-team {margin-bottom:30px} } .single-team{margin-bottom:10px;} .single-team img { margin-bottom:20px; width: 250px; border-radius: 50%; } .single-team h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; } .single-team p{margin-bottom:0px;} .our-team .social { list-style: none; padding: 0; margin: 0; text-align: center; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .our-team .social li{ display: inline-block; } .our-team .social li a { display: block; width: 35px; height: 35px; line-height: 35px; font-size: 15px; color: #fff; position: relative; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; border-radius: 30px; margin: 3px; } .our-team:hover .social li:nth-child(1) a{ -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .our-team:hover .social li:nth-child(2) a{ -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s } .our-team:hover .social li:nth-child(3) a{ -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .our-team:hover .social li:nth-child(4) a{ -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .our-team .social li a:hover{ border:1px solid #eee; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .facebook{background: #1C58A1;border:1px solid #1C58A1;} .facebook:hover{background: #fff;color:#1C58A1!important;} .twitter{background: #0CBCE3;border:1px solid #0CBCE3;} .twitter:hover{background: #fff;color:#0CBCE3!important;} .linkedin{background: #0e76a8;border:1px solid #0e76a8;} .linkedin:hover{background: #fff;color:#0e76a8!important;} /*START TEAM THREE*/ .team_three_area{padding-bottom:50px;} .our-team-three{ position: relative; text-align: center; overflow: hidden; margin-bottom: 30px; } .our-team-three img{ width: 100%; height: auto; -webkit-transition: all 0.50s linear 0s; -o-transition: all 0.50s linear 0s; transition: all 0.50s linear 0s; } .our-team-three:hover img{ -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .our-team-three .team-content{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 40px 20px; background: rgba(0, 0, 0, 0.9); opacity: 0; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .our-team-three:hover .team-content{ opacity: 1; } .our-team-three .team-prof { margin: 20px 0; position: relative; top: 13%; font-size: 25px; font-weight: 600; color: #fff; letter-spacing: 1px; text-transform: uppercase; } .our-team-three .team-prof small { display: block; font-size: 14px; color: #fff; margin-top: 10px; text-transform: capitalize; font-weight: 300; } .our-team-three .social-links{ padding: 0; margin: 0; list-style: none; position: relative; top: 13%; } .our-team-three .social-links li{ margin-right: 5px; display: inline-block; } .our-team-three .social-links li a{ width: 35px; height: 35px; line-height: 35px; border-radius:30px; color: #fff; background: rgba(0, 0, 0, 0.3); } .our-team-three .social-links li a:hover{ background: #fff; color: #000; text-decoration: none; } @media only screen and (max-width: 990px){ .our-team-three{ margin-bottom: 20px; } } /*END TEAM THREE*/ /*START SINGLE TEAM DETAILS*/ .template_agent{background:linear-gradient(90deg, rgb(236, 255, 252) 0%, rgb(253, 250, 239) 35%, rgb(251, 251, 251) 100%);} .single_agent { background: #fff none repeat scroll 0 0; overflow: hidden; padding: 60px; box-shadow: 0 0 45px rgba(0, 0, 0, .08); } .single_agent_image img{ float: left; margin-right: 40px; } .single_agent_content{ } .agent_social { margin-left: 70px; overflow: hidden; } .single_agent_content h4{ text-transform: uppercase; overflow: hidden; } .single_agent_content h5{ border-bottom: 1px solid #eee; color: #061525; margin-bottom: 20px; overflow: hidden; padding-bottom: 10px; text-transform: uppercase; } .single_agent_content h6{ font-size: 16px; line-height: 30px; margin-bottom: 20px; overflow: hidden; } .single_agent_content p{ line-height: 36px; margin-top: 0; overflow: hidden; } .single_agent_content i{margin-right:10px;color:#061525;} .agent_social ul{ list-style: outside none none; margin: 0; padding: 0; } .agent_social ul li{float: left;} .agent_social ul li a { text-align: center; border: 0px; text-transform: uppercase; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; margin: 0 5px; font-size: 16px; color: #fff; display: block; width: 35px; height: 35px; line-height: 35px; border-radius: 30px; } .agent_social ul li a:hover{ background:#061525; color:#fff; } .agent_f_facebook{background:#3B5998;} .agent_f_twitter{background:#1A90D9;} .agent_f_instagram{background:#FF5252;} .agent_f_linkedin{background:#0e76a8;} /*END SINGLE TEAM DETAILS*/ /* ---------------------------------------------------------------------------------------- * 07.END TEAM DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 0.START PORTFOLIO DESIGN * ---------------------------------------------------------------------------------------- */ .mix{ display: none; } .portfolio_filter ul { list-style: none; margin-bottom: 60px; } @media only screen and (max-width:768px) { .portfolio_filter ul{width:100%;} } .portfolio_filter ul li { font-weight: 500; text-transform: capitalize; display: inline-block; cursor: pointer; padding: 0px 15px; font-size: 16px; color: #232434; -webkit-transition: .5s; transition: .5s; margin: 0 3px 0px; letter-spacing: 0px; background: #f2f2f2; padding: 10px 20px; } @media only screen and (max-width:480px) { .portfolio_filter ul li{margin-bottom:10px;} } .portfolio_filter .active { color: #fff; background: #061525; } .box{ text-align: center; overflow: hidden; position: relative; margin-bottom:30px; } .box:before, .box:after{ content: ""; background: #061525; -webkit-transform: scale(0); transform: scale(0); position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .box:after{ background: #061525; border: 1px solid #aaa; top: 10px; left: 10px; right: 10px; bottom: 10px; -webkit-transition: all 0.5s ease 0.2s; transition: all 0.5s ease 0.2s; } .box:hover:before{ opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; -webkit-transform: scale(1); transform: scale(1); } .box:hover:after{ opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-transform: scale(1); transform: scale(1); } .box img{ width: 100%; height: auto; } .box .box-content{ color: #fff; width: 85%; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: blur(5px); filter: blur(5px); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transition: all 0.4s ease 0.3s; transition: all 0.4s ease 0.3s; } .box:hover .box-content{ filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: blur(0); filter: blur(0); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .box .title { color: #fff; font-size: 22px; font-weight: 600; text-transform: capitalize; margin: 0 0 1px; } .box .post { font-size: 13px; font-weight: 400; text-transform: capitalize; display: block; margin: 0 0 10px; } .box .icon{ padding: 0; margin: 0; list-style: none; } .box .icon li{ margin: 0 3px; display: inline-block; } .box .icon li a { color: #061525; font-size: 14px; line-height: 36px; height: 36px; width: 36px; border: 1px solid #fff; display: block; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; background: #fff; border-radius: 30px; } .box .icon li a:hover{ color: #fff; background-color: #061525; border: 1px solid #061525; } @media only screen and (max-width:990px){ .box{ margin: 0 0 30px; } } .all-work-btn a{ background: #061525; padding: 10px 30px; color: #fff; display: inline-block; margin-top: 20px; border-radius: 2px; -webkit-transition: 0.3s; transition: 0.3s; } .all-work-btn a:hover{background:#232434;} /*START PORTFOLIO SINGLE PAGE DESIGN*/ .single_project_page{ background:#f4f5f7; padding-top:80px; padding-bottom:50px; } .project_dec { background: #fff none repeat scroll 0 0; box-shadow: 0 10px 40px -10px rgba(0,64,128,.08); margin-bottom: 30px; padding: 40px; border-radius: 10px; } .single_project_img {margin-bottom:30px;} .single_project_img img {} .similar_p { border-bottom: 1px solid #eee; font-size: 30px; margin-bottom: 25px; padding-bottom: 10px; padding-top: 40px; text-align: center; font-weight: 600; } .similar_p span{ color: #061525} .related_single_project{padding-bottom:60px;} .related_project h4 { transition: all 0.4s ease 0s; padding: 10px 0; border-bottom: 1px solid #ddd; } .related_project h4:hover { color: #061525; } .about_project h4 { border-bottom: 1px solid #ddd; padding: 10px 0; font-weight: 600; } .about_project p { margin-bottom: 30px; } .about_project_details { margin-bottom: 20px; } .about_project_details ul { margin: 0; padding: 0; list-style: none; } .about_project_details ul li { padding: 5px 0 } .about_project_details ul li i { color: #061525; margin-right: 10px; } .about_project_details ul li a { color: #061525; font-weight: 700; } .about_project_details ul li a:hover { text-decoration: underline } .single_project_btn{ background: #061525; padding: 10px 30px; color: #fff; display: inline-block; margin-top: 20px; border-radius: 2px; -webkit-transition: 0.3s; transition: 0.3s; } .single_project_btn:hover{background:#232434;} /*END PORTFOLIO SINGLE PAGE DESIGN*/ /* * ---------------------------------------------------------------------------------------- * 0.START PORTFOLIO DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * .START PRICING DESIGN * ---------------------------------------------------------------------------------------- */ .our_pricing { background-image: url(../img/bg/pricing-bg.jpg); background-size: 100%; background-repeat: no-repeat; background-position: top center; position: relative; } @media only screen and (max-width:480px){ .our_pricing{background-size: auto; } } .pricingTable{ background: #fff none repeat scroll 0 0; color: #232434; margin-top: 30px; padding: 50px 15px; -webkit-box-shadow: 0px 19px 43px 0px rgba(17, 17, 17, 0.05); box-shadow: 0px 19px 43px 0px rgba(17, 17, 17, 0.05); -webkit-perspective: 700px; perspective: 700px; position: relative; text-align: center; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: 1; } @media only screen and (max-width:480px){ .pricingTable{ margin-bottom:60px; } } .pricingTabletop{margin-top: -30px;} .pricingTable .pricingTable-header{} .pricingTable .title{ display: block; font-size: 24px; font-weight: 600; text-transform: capitalize; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .pricingTable .price-month { font-size: 16px; font-weight: 500; margin-top: 5px; } .pricingTable .price-value { font-size: 170px; line-height: 112px; position: relative; color: #e4f1ff; margin: 40px 0; } @media only screen and (max-width:768px) { .pricingTable .price-value {font-size: 130px;} } .pricingTable .price-value .value-bg { display: inline-block; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: #1386fc; font-weight: 600; font-size: 60px; line-height: 60px; } .pricingTable-2 .price-value { color: #e6e4ff; } .pricingTable-2 .price-value .value-bg { color: #061525; } .pricingTable .pricing-content{ list-style: none; padding: 0; margin: 0 0 20px 0; } .pricing-content-border{} .pricing-content-border > li { border: 1px solid #eee; margin-bottom: 10px; } .pricingTable .pricing-content li{ line-height: 40px; } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 30px; } } @media only screen and (max-width: 767px){ .pricingTable{ margin-bottom: 50px; } } .btn-price-bg { background: #061525; border: 2px solid #061525; border-radius: 5000px; color: #fff; display: inline-block; font-size: 16px; overflow: hidden; padding:12px 40px; text-transform: capitalize; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .pricingTable:hover .btn-price-bg{ background:#232434; color:#fff; border: 2px solid #232434; } /*START PRICING TWO*/ .pricing-content{position:relative;} .pricing_design{ position: relative; } .pricing_design .single-pricing{ background:#061525; padding: 60px 40px; border-radius:30px; box-shadow: 0 10px 40px -10px rgba(0,64,128,.2); position: relative; z-index: 1; } .pricing_design .single-pricing:before{ content: ""; background-color: #fff; width: 100%; height: 100%; border-radius: 18px 18px 190px 18px; border: 1px solid #eee; position: absolute; bottom: 0; right: 0; z-index: -1; } .price-head{} .price-head h2 { margin-bottom: 20px; font-size: 26px; font-weight: 600; } .price-head h1 { font-weight: 600; margin-top: 30px; margin-bottom: 5px; } .price-head span{} .single-pricing ul{list-style:none;margin-top: 30px;} .single-pricing ul li { line-height: 36px; } .single-pricing ul li i { background: #061525; color: #fff; width: 20px; height: 20px; border-radius: 30px; font-size: 11px; text-align: center; line-height: 20px; margin-right: 6px; } .pricing-price{} .price_btn { background: #061525; padding: 10px 30px; color: #fff; display: inline-block; margin-top: 20px; border-radius: 2px; -webkit-transition: 0.3s; transition: 0.3s; } .price_btn:hover{background:#232434;} /*END PRICING TWO*/ /*START PRICING THREE*/ .single-pricing-three{ background:#fff; padding:40px 20px; border-radius:5px; position:relative; border:1px solid #eee; box-shadow: 0 10px 40px -10px rgba(0,64,128,.09); transition:0.3s; } @media only screen and (max-width:480px) { .single-pricing-three {margin-bottom:30px;} } .single-pricing-three:hover{ box-shadow:0px 60px 60px rgba(0,0,0,0.1); transform: translate(0, -10px); } .price-label { color: #fff; background: #061525; font-size: 16px; width: 100px; margin-bottom: 15px; display: block; -webkit-clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%); clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%); margin-left: -20px; position: absolute; } .price-head-three h2 { font-weight: 600; margin-bottom: 0px; text-transform: capitalize; font-size: 26px; } .price-head-three span { display: inline-block; background:#061525; width: 6px; height: 6px; border-radius: 30px; margin-bottom: 20px; margin-top: 15px; } .price-three { font-weight: 500; font-size: 50px; margin-bottom: 0px; } .single-pricing-three{} .single-pricing-three h5 { font-size: 14px; margin-bottom: 0px; text-transform: uppercase; } .single-pricing-three ul{ list-style: none; margin-bottom: 20px; margin-top: 30px; } .single-pricing-three ul li{line-height: 35px;} .single-pricing-three a { background:none; border: 2px solid #061525; border-radius: 5000px; color: #061525; display: inline-block; font-size: 16px; overflow: hidden; padding:10px 45px; text-transform: capitalize; transition: all 0.3s ease 0s; } .single-pricing-three a:hover, .single-pricing-three a:focus{ background:#061525; color:#fff; border: 2px solid #061525; } .single-pricing-white{background: #232434;} .single-pricing-white ul li{color:#fff;} .single-pricing-white h2{color:#fff;} .single-pricing-white h1{color:#fff;} .single-pricing-white h5{color:#fff;} /*END PRICING THREE*/ /* * ---------------------------------------------------------------------------------------- * 0.END PRICING DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 08.START CASE STUDY DESIGN * ---------------------------------------------------------------------------------------- */ .single_project { background: #fff; text-align:center; margin: 20px 0; z-index: 2; position: relative; padding: 20px; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; border-radius:10px; height: 350px; } .single_project:before { background:#020928; opacity:0.3; bottom: 0; content: ""; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .single_project:hover{ -webkit-box-shadow:0px 60px 60px rgba(0,0,0,0.1); box-shadow:0px 60px 60px rgba(0,0,0,0.1); position:relative; background:#3b7eff; -webkit-transform: translate(0, -10px); -ms-transform: translate(0, -10px); transform: translate(0, -10px); } .single_project h2 { margin: 0; position: relative; text-transform: capitalize; top: 90px; -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; font-weight: 700; font-size: 26px; color: #fff; line-height: 32px; padding-top: 10px; } .single_project:hover h2 { color: #fff; top: 80px; margin-bottom:20px; } .single_project a{ opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; } .single_project:hover a{ opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .project_btn { background: #061525; border: 1px solid #061525; border-radius: 5px; color: #fff; font-size: 16px; overflow: hidden; display: inline-block; padding:12px 40px; text-transform: capitalize; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; font-weight: 700; margin-top:40% } .project_btn:hover, .project_btn:focus{ background:#061525; border: 1px solid #061525; color: #fff; } /*project modal*/ .modal-title { color: #1d293e; margin: 0; display: none; text-transform: uppercase; } .modal-content { padding: 10px 30px; border-radius: 0px; } .modal-body { margin-bottom: 15px } .modal-body p { margin: 15px 0 0 } .project-list { margin-top: 30px } .project-list label { color: #232434; margin-bottom: 0; margin-right: 0; width: 120px; } .project-list li { padding: 7px 0; font-size: 14px; } .project-list li a { color: #232434; margin-bottom: 0; margin-right: 7px; width: 125px; } .project-list li a:hover { color: #061525; } /*End project modal*/ /* * ---------------------------------------------------------------------------------------- * 08.END CASE STUDY DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 09.START PROCESS DESIGN * ---------------------------------------------------------------------------------------- */ .process_area { background-image: url(../img/line.png); background-repeat: no-repeat; position: relative; } .process_num { background: rgba(71, 97, 255, 0.2) none repeat scroll 0 0; border-radius: 500px; display: inline-block; height: 80px; margin-bottom: 10px; position: relative; width: 80px; } .single_process h4 { background: #000000; border-radius: 500px; color: #fff; font-size: 30px; font-weight: 700; height: 60px; left: 50%; line-height: 60px; margin: auto; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 60px; } .single_process { padding: 0px 40px; } @media only screen and (max-width:480px) { .single_process {margin-bottom:30px;} } .single_process p.process { font-size: 22px; font-weight: 700; margin-bottom:10px; } .single_process p{} /* * ---------------------------------------------------------------------------------------- * 09.END PROCESS DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 10.START COUNTER DESIGN * ---------------------------------------------------------------------------------------- */ .counter_area { background-image: url(../img/bg/counter-bg.jpg); background-size: 100%; background-repeat: no-repeat; background-position: top center; position: relative; padding: 80px 0 80px 0; } .counter_area:before { background:#02092896; opacity:0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; bottom: 0; content: ""; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } @media only screen and (max-width:480px){ .counter_feature{background-size: auto; padding:40px 0; } } .single-project { padding:0 40px 30px 40px; border-radius: 5px; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.07); box-shadow: 0 0 20px rgba(0, 0, 0, 0.07); position:relative; } @media only screen and (max-width:880px){ .single-project {margin-bottom: 30px; } } .single-project span { color: #000000; font-size: 30px; margin-bottom: 20px; display: inline-block; border: 3px solid #fff; border-radius: 30px; padding: 10px; font-size: 24px; position: relative; top: -24px; background-color: #fff; margin-bottom: -30px; } .single-project .counter-num { color: #fff; font-weight: 700; font-size: 50px; margin:20px 0; } .single-project p { color: #fff; margin-bottom: 0; font-size:16px; } .single-project-one{background:#00000091;} .single-project-two{background:#3b7eff;} .single-project-three{background:#b088f9;} .single-project-four{background:#f54291;} /* * ---------------------------------------------------------------------------------------- * 10.END COUNTER DESIGN * ---------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------- * 11. START QUOTE DESIGN * ---------------------------------------------------------------------------------------- */ .quote_area { background-image: url(../img/bg/4.jpg); background-size: cover; background-repeat: no-repeat; background-position: top center; position: relative; } .call-back-text { width: 100%; float: left; padding-top: 100px; } .call-back-text .reauest { font-weight: 700; margin-bottom: 15px; font-size:26px; } .call-back-text p { text-align: justify; } @media only screen and (max-width:880px){ .quote_area{padding-bottom:80px; } .call-back-text { padding-top: 0; } } .quote_area:before { background:#020928; opacity:0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; bottom: 0; content: ""; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .quote { background: #fff; padding: 60px; } @media only screen and (max-width: 880px){ .quote {margin-bottom:60px;} } .quote p { font-size:30px; margin-bottom: 30px; } .quote input { background:#f3f2f2; border: 2px solid #f3f2f2; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; color: #232434; font-size: 16px; font-weight: 400; height: 52px; margin-bottom:15px; padding: 10px 10px 10px 30px; width: 100%; border: 2px rgba(27,194,108,0.08); } .quote textarea { background:#f3f2f2; border: 2px solid #f3f2f2; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; color: #232434; font-size: 16px; font-weight: 400; margin-bottom:15px; padding: 10px 10px 10px 30px; width: 100%; } .quote input:focus { border: 2px solid #061525; -webkit-box-shadow: none; box-shadow: none; outline: 0 none; } .quote textarea:focus { border: 2px solid #061525; -webkit-box-shadow: none; box-shadow: none; outline: 0 none; } .form-select { width: 100%; height: 52px; background: #f3f2f2; border: 1px solid #f3f2f2; padding: 0 20px; } .form-select option{} /*VIDEO PLAY BTN*/ .video_btn { position: relative; padding-left: 40%; top: 40%; } @media only screen and (max-width:880px) { .video_btn {left: 0%;} } .video-play { position: relative; display: block; -webkit-box-sizing: content-box; box-sizing: content-box; width: 36px; height: 46px; border-radius: 100%; border: none; outline: none !important; padding: 18px 20px 20px 28px; background: #061525; } .btn-play span { display: block; position: relative; z-index: 3; width: 0; height: 0; left: 3px; border-left: 30px solid #FFFFFF; border-top: 18px solid transparent; border-bottom: 18px solid transparent; } .video-play:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 90px; height: 90px; background:#061525; border-radius: 100%; -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; } .video-play:after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 90px; height: 90px; background:#061525; border-radius: 100%; -webkit-transition: all 200ms; -o-transition: all 200ms; transition: all 200ms; } .video-play span { display: block; position: relative; z-index: 3; width: 0; height: 0; left: 3px; top: 12%; border-left: 30px solid #FFFFFF; border-top: 18px solid transparent; border-bottom: 18px solid transparent; } @-webkit-keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2); opacity: 0; } } @keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2); opacity: 0; } } /*END VIDEO PLAY BTN*/ /* ---------------------------------------------------------------------------------------- * 11.END QUOTE DESIGN * ---------------------------------------------------------------------------------------- */ /*START PROMOTION DESIGN*/ .promotion_offer{ background-position: center top; background-repeat: repeat-y; height: 500px; position: relative; } .promotion_offer:before { background: rgba(0, 0, 0, 0.3); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .promotion_content{position: relative;} .promotion_content p{ color: #fff; font-size: 40px; line-height: 50px; margin: 0 auto 30px; padding-top: 180px; } @media only screen and (max-width:480px) { .promotion_content p{ font-size: 30px; padding-top: 120px; } } .btn-promotion-bg { background: #061525 none repeat scroll 0 0; border: 1px solid #061525; border-radius: 2px; box-shadow: 0 11px 11px 0 rgba(0, 0, 0, 0.06); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; padding: 12px 40px; text-transform: uppercase; transition: all 0.2s ease 0s; } .btn-promotion-bg:hover, .btn-promotion-bg:focus { background: #fff; border: 1px solid #fff; color: #232434; } /*END PROMOTION DESIGN*/ .promotion_contact { padding: 60px 0; } .promo_contact_content{} .promo_contact_content h1 { font-weight: 600; margin-bottom: 20px; } .promo_contact_content p{margin-bottom:30px;} .pc_btn{} .pc_btn a { background: #061525; color: #fff; display: inline-block; border-radius: 100px; width: 100px; height: 100px; line-height: 100px; font-weight: 600; border: 2px dotted #fff; transition: 0.4s; } .pc_btn a:hover{ background: #232434; color: #fff; } /* * ---------------------------------------------------------------------------------------- * 12.START TESTIMONIAL DESIGN * ---------------------------------------------------------------------------------------- */ .testimonial-demo { background: url(../img/bg/shapes-bg.png) no-repeat; background-position: top center; background-size:cover; } .testimonial { background: #fff; border-radius: 5px; margin: 0px 15px; -webkit-box-shadow: 0 10px 20px -10px rgba(0,64,128,.3); box-shadow:0 10px 20px -10px rgba(0,64,128,.3); margin-bottom: 30px; min-height: 230px; } .testimonial_content { padding: 18px; } .testimonial_content h3 { font-weight: 600; font-size: 20px; color:#232434; } .testimonial_content i { color: #ffbd35; font-size: 22px; } .testimonial_content p { overflow: hidden; margin-top: 15px; } .testimonial_content .testi { font-size:20px; margin-top:10px; font-weight:600; } .testi_pic_title { background: transparent; padding: 0; } .testi_pic_title .pic{ float: left; width:70px; height:70px; margin-right: 15px; } .testi_pic_title .pic img { width: 100%; height: auto; border-radius: 100px; } .testi_pic_title h4 { font-size: 18px; font-weight: 700; margin-top: 10px; color: #000; overflow: hidden; } .testi_pic_title small { font-weight: 400; color: #fff; font-size: 14px; margin-top: 8px; display: block; font-family: 'Poppins', sans-serif; } .owl-theme .owl-controls .owl-page span{ border: 2px solid #061525; background: #fff; opacity: 1; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls .owl-page:hover span{ background: #061525; } @media only screen and (max-width: 767px){ .testimonial{ padding: 20px; text-align: center; } .testimonial .pic{ display: block; position: static; margin: 0 auto 15px; } } .owl-theme .owl-controls .owl-page { display: inline-block } .owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer } .owl-theme .owl-controls .owl-page span { background-color: #061525 !important; border-radius: 20px; display: block; height: 6px; margin: 5px 3px; width: 6px; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { background-color: #fff } .owl-theme .owl-controls { display: block !important; margin-top:10px; text-align: center; } /*START TESTIMONIALS HOME TWO DESIGN*/ .testi_title{margin-bottom:40px;margin-top: 80px;} .testi_title h2 { font-weight: 700; font-size: 60px; } .testi_title p { text-transform: uppercase; color: #061525; font-weight: 600; } .testimonial_content_two{} .testimonial_content_two p { font-size: 18px; line-height: 30px; } .testi_name { font-size: 18px; text-transform: capitalize; font-weight: 600; margin-top: 50px; display: block; color: #232434; } @media only screen and (max-width:768px){ .testi_img {margin-top:60px;} } /*END TESTIMONIALS HOME TWO DESIGN*/ /* * ---------------------------------------------------------------------------------------- * 12.END TESTIMONIAL DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 13.START BLOG DESIGN * ---------------------------------------------------------------------------------------- */ .blog_area { padding-bottom: 50px; background:-webkit-gradient(linear, left top, right top, from(rgb(236, 255, 252)), color-stop(35%, rgb(253, 250, 239)), to(rgb(251, 251, 251))); background:-o-linear-gradient(left, rgb(236, 255, 252) 0%, rgb(253, 250, 239) 35%, rgb(251, 251, 251) 100%); background:linear-gradient(90deg, rgb(236, 255, 252) 0%, rgb(253, 250, 239) 35%, rgb(251, 251, 251) 100%); } .single_blog { background: #fff; border-radius:0px; margin-bottom: 30px; -webkit-box-shadow: 10px 15px 18px rgba(23, 23, 36, 0.03); box-shadow: 10px 15px 18px rgba(23, 23, 36, 0.03); } .single_blog img { width: 100%; } .content_box { padding-bottom: 12px; } .single_blog .hading_blog { line-height: 32px; font-size: 20px; margin-bottom: 15px; } .single_blog .hading_blog a { color: #000; font-weight:400; } .single_blog .hading_blog a:hover{color:#061525;} .single_blog p{margin-bottom:0px;} .single_blog span { text-transform: capitalize; margin-bottom: 10px; display: inline-block; } .single_blog span a{ color:#000; font-weight:600; } .single_blog span a:hover{color:#061525;} .single_blog_two span{margin-top:0px;} .single_blog_two p{margin-bottom:30px;} /*START SINGLE PAGE BLOG STYLE*/ .contact_form_blog{padding-top:0px!important;} .blog_sidebar_title { border-bottom: 1px solid #eee; color: #000; font-size: 20px; font-weight: 500; letter-spacing: x; margin-bottom: 15px; margin-top: 0; padding-bottom: 10px; text-transform: uppercase; } .blog_search, .latest_blog, .advertisement_post, .video_post, .categories, .tag, .banner { margin-bottom: 30px; background: #fff; padding: 30px 30px; border-radius:10px; -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.07); box-shadow: 0 0 40px rgba(0, 0, 0, 0.07); } .tag{overflow: hidden;} .blog_search{} .blog_search input { background: none; border: 1px solid #fff; border-radius: 0; color: #fff; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; height: 50px; } .blog_search input:focus{border: 1px solid #72c02c;} .single_latest_blog { overflow: hidden; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 20px; } .single_latest_blog h4 { /* color: #fff; */ font-size: 18px; font-weight: 300; line-height: 28px; margin: 0; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .single_latest_blog span { color: #161616 } .single_upcoming_event {margin-bottom: 20px;} .single_upcoming_event h4 { color: #000; font-size: 17px; font-weight: 600; line-height: 28px; margin: 10px 0 0; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .single_upcoming_event:hover h4 { color: #000 } .single_upcoming_event span i{margin-right:5px;color: #fff } .single_upcoming_event span { color: #777 } .categories ul { margin: 0; padding: 0; list-style: none; } .categories ul li { } .categories ul li a { color: #000; display: block; font-size: 14px; padding: 5px 0; font-weight: 400; } .categories ul li a:hover { color: #000;} .categories ul li a i { margin-right: 10px } .video_post iframe { width: 100%; height: 100%; border: medium none; } .tag a { border: 2px solid #000; border-radius: 30px; color: #000; display: block; float: left; font-size: 14px; font-weight: 400; margin: 6px 4px; padding: 3px 20px; text-transform: capitalize; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; background:none; } .tag a:hover { background: #000; color: #fff; border: 2px solid #000; } /*END BLOG SIDEBAR DESIGN*/ /*START BLOG SIDEBAR DESIGN*/ /*Popular post*/ .sidebar_title{} .sidebar_title h4 { font-size: 16px; font-weight: 600; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .sidebar-post{ background:#fff; border-radius:5px; margin-bottom:30px; padding:10px; } .single_popular{ margin-bottom:10px; overflow: hidden; } .single_popular:last-child { margin-bottom: 0; } .single_popular a img { width: 70px; float: left; margin-right: 10px; border-radius: 6px; } .single_popular h5 a { color: #232434; font-size: 16px; transition: 0.3s; } .single_popular h5 a:hover{color:#554c86;} /*End Popular post*/ /*Start Social media*/ .single_social{} .social_item{ padding:8px 12px; border-radius:4px; } .single_social ul { display: -ms-grid; display: grid; -ms-grid-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 10px; grid-row-gap: 10px; list-style:none; grid-template-columns: repeat(2, minmax(0, 1fr)); } .single_social ul li{} .single_social ul li a{} .single_social ul li a i{color:#fff;font-size:12px;} .item-list{ float: right; color:#fff; font-size:13px; } .b_facebook{background:#1a4fc5;} .b_twitter{background:#00acee;} .b_youtube{background:#f50000;} .b_pinterest{background:#e62e3f;} .b_tumblr{background:#34526f;} .b_rss{background:#e8a50e;} /*End Social media*/ /*Start category*/ .single_category{} .item-category{ padding:8px 12px; border-radius:4px; background:#f2f2f2; } .single_category ul { display: -ms-grid; display: grid; -ms-grid-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 10px; grid-row-gap: 10px; list-style:none; grid-template-columns: repeat(2, minmax(0, 1fr)); } .single_category ul li{} .single_category ul li a{color:#232434;font-size:14px;font-weight: 500;} .item-cat{ color:#232434; font-size:14px; margin-left:10px; font-weight: 500; } /*End category*/ .sidebar-banner img{width:100%;} /*START SINGLE BLOG PAGE DESIGN*/ .post-slide-blog{ background:#fff; padding:40px; border-radius:10px; } .bc_left { padding-left: 30px; font-style: italic; font-weight: 600; margin-top: 30px; } .bc_bottom{margin-bottom:30px;} .single_blog_post { margin-bottom: 60px } .post-slide-blog img { margin-bottom: 30px; } .author_part { margin-bottom: 30px; overflow: hidden; margin-top: 60px; } .single_author { background: #fff none repeat scroll 0 0; padding: 40px; border-radius: 10px; box-shadow: 0 10px 40px -10px rgba(0,64,128,.08); overflow: hidden; } .author_part img { border: 4px solid #061525; border-radius: 100px; float: left; height: 120px; margin-right: 20px; width: 120px; } .author_part h4 {text-transform: uppercase; font-size: 16px; font-weight:700; letter-spacing: 1px; } .author_part p { margin-bottom: 0 } .blog_head_title { border-bottom: 1px solid #eee; margin: 0 0 30px; padding-bottom: 10px; font-weight: 700; text-transform: uppercase; font-size: 18px; } .comments_part { margin-bottom: 60px; } .single_comment { margin-bottom: 30px; background: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 10px 40px -10px rgba(0,64,128,.08); overflow: hidden; } .single_comment_mbnone { margin-bottom: 0px } .single_comment img { border: 4px solid #061525; border-radius: 100px; float: left; height: 120px; margin-right: 20px; width: 120px; } .single_comment h4 { font-size: 16px; font-weight:700; letter-spacing: 1px; text-transform: uppercase;} .single_comment p { margin-bottom: 0 } .comment-box { background: #fff; padding: 40px; border-radius: 10px; } .comment_form input, .comment_form textarea {} .comment_form textarea {} @media only screen and (max-width:768px) { .comment_form textarea { width: 100% } } /*END SINGLE BLOG PAGE DESIGN*/ /*END BLOG SIDEBAR DESIGN*/ /* * ---------------------------------------------------------------------------------------- * 13. END BLOG DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 14.START FAQ DESIGN * ---------------------------------------------------------------------------------------- */ .template_faq{background: #f1f1f1 none repeat scroll 0 0;padding-top:80px;padding-bottom:50px;} .faq_desc { background: #fff none repeat scroll 0 0; margin-bottom: 30px; padding: 20px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .question { color: #232434; font-weight: 500; margin-bottom: 15px; font-family: roboto slab, sans-serif; font-size: 20px; } .question span { background: #232434; color: #fff; margin-right: 10px; padding: 4px 10px; display: inline-block; font-size: 14px; } .ans span { background: #ff5f83 none repeat scroll 0 0; color: #fff; margin-right: 10px; padding: 4px 10px; } /* * ---------------------------------------------------------------------------------------- * 14.END FAQ DESIGN * ---------------------------------------------------------------------------------------- */ .partner_title h3 { margin-bottom: 60px; font-size: 22px; font-weight: 500; } .partner.owl-theme .owl-controls{display: none !important;} .card-header{ border: 1px solid #ededed; margin-bottom: 15px; -webkit-box-shadow: 0px 0px 150px 0px rgba(78, 67, 250, 0.06); box-shadow: 0px 0px 150px 0px rgba(78, 67, 250, 0.06); background: #fff; margin-bottom: 20px; } .card-header:not(:first-of-type) { border-top: 1px solid #ddd; } .card-header button { color: #232434; font-size: 22px; font-weight: 600; } .card-header button:hover { color: #061525; } .card-header button:focus{box-shadow:none;} /* * ---------------------------------------------------------------------------------------- * 15.START CONTACT DESIGN * ---------------------------------------------------------------------------------------- */ .address { background: #fff; padding: 60px 0; } @media only screen and (max-width:768px) { .address{padding-bottom:0;} } .address_br { background: rgba(71, 97, 255, 0.2) none repeat scroll 0 0; border-radius: 500px; display: inline-block; height: 80px; margin-bottom: 10px; position: relative; width: 80px; margin-top: -75px; } .single_address { background: #061525; padding: 29px; min-height: 175px; } @media only screen and (max-width:768px) { .single_address{margin-bottom: 70px;} .single_address-bt {margin-bottom:0px;} } .single_address span { background: #ffffff; border-radius: 500px; color: #000000; font-size: 22px; height: 60px; left: 50%; line-height: 60px; text-align:center; margin: auto; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 60px; } .single_address h4 { font-weight: 600; color:#fff; } .single_address p {color:#fff; } .single_address p a { color: #fff; } /*SINGLE ADDRESS TWO*/ .address_mb{padding-bottom:80px;} .single_address_two {} @media only screen and (max-width:480px){ .single_address_two {margin-bottom:30px;} } .single_address_two h4 { font-weight: 600; font-size: 30px; margin-bottom: 10px; } .single_address_two p{} /*END SINGLE ADDRESS TWO*/ /*START SINGLE ADDRESS THREE*/ .contact_us_three{background:#fffaf1;} .contact_three {margin-right:30px;} @media only screen and (max-width:768px) { .contact_three {margin-bottom:60px;margin-right:0px;} } .contact_three h4 {font-weight: 700;font-size: 40px;} .contact_three p { margin-bottom:40px; } .address_bg{ background: #fff; padding: 40px; box-shadow: 0 10px 40px -10px rgba(0,64,128,.1); border-radius: 3px; } .single_address_three { margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 30px; } .single_address_three:last-child { border-bottom: 0px; margin-bottom: 0; padding-bottom: 0px; } @media only screen and (max-width:768px) { .single_address_three{margin-bottom: 70px;} } .address_br_three{ float:left; } .single_address_three span { color: #554c86; font-size: 30px; margin-bottom: 20px; display: block; margin-right:20px; } .single_address_three h4 { font-weight: 600; font-size: 18px; overflow: hidden; } .single_address_three p{overflow: hidden;} /*END SINGLE ADDRESS THREE*/ .contact_us{} .contact_us_bg{ background:#fff; -webkit-box-shadow:0 10px 40px -10px rgba(0,64,128,.2); box-shadow:0 10px 40px -10px rgba(0,64,128,.2); padding:40px; } .contact {margin-right:30px;} @media only screen and (max-width:768px) { .contact {margin-bottom:60px;margin-right:0px;} } .contact h4 {font-weight: 700;} .contact p { margin-bottom:40px; } .contact input { background:#f3f2f2; border: 2px solid #f3f2f2; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; color: #232434; font-size: 16px; font-weight: 400; height: 52px; margin-bottom:15px; padding: 10px 10px 10px 30px; width: 100%; border: 2px rgba(27,194,108,0.08); } .contact textarea { background:#f3f2f2; border: 2px solid #f3f2f2; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; color: #232434; font-size: 16px; font-weight: 400; margin-bottom:15px; padding: 10px 10px 10px 30px; width: 100%; } .contact input:focus { border: 2px solid #061525; -webkit-box-shadow: none; box-shadow: none; outline: 0 none; } .contact textarea:focus { border: 2px solid #061525; -webkit-box-shadow: none; box-shadow: none; outline: 0 none; } .contact_btn { background: #000000; border: 2px solid #000000; color: #fff; padding: 12px 30px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .contact_btn:hover{ background:#232434; color:#fff; border: 2px solid #232434; } .contact button { width: 100%; font-size: 16px; } .map{} .map iframe { width: 100%; height: 520px; background: #f5f8fa; padding: 10px; border-radius: 5px; } .map_two iframe { width: 100%; height: 500px; border:0px; } /* * ---------------------------------------------------------------------------------------- * 15.END CONTACT DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 16.START FOOTER DESIGN * ---------------------------------------------------------------------------------------- */ .footer { padding-top: 40px; background:#061525; width: 100%; float: left; } .footer_logo {} .footer_logo img{ width:150px; } .footer_logo p { color: #a9b4c7; margin-top: 10px; margin-bottom: 25px; } .single_footer{} @media only screen and (max-width:880px) { .single_footer{margin-bottom:30px;} } .single_footer .ftrhd { color: #fff; margin-top: 0; margin-bottom: 25px; font-weight: 600; text-transform: capitalize; font-size: 17px; } .single_footer p{color:#fff;} .single_footer ul { margin: 0; padding: 0; list-style: none; } .single_footer ul li{ color: #fff; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; line-height: 20px; font-size: 15px; text-transform: capitalize; } .single_footer ul li a { color: #fff; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; line-height: 36px; font-size: 15px; text-transform: capitalize; } .single_footer ul li a:before { content: "-"; font-family: "LineAwesome"; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; font-size: 20px; margin-right: 6px; } .single_footer ul li a:hover { color: #ccc; } .single_footer_address{} .single_footer_address ul{} .single_footer_address ul li{color:#fff;} .single_footer_address ul li span { font-weight: 400; color: #fff; line-height: 28px; } .contact_social ul { list-style: outside none none; margin: 0; padding: 0; } .single_footer_address p { margin-bottom: 10px; } /*START SOCIAL PROFILE CSS*/ .newsletter-form{} @media only screen and (max-width:768px) { .newsletter-form{padding-top:50px;} } .newsletter-form h4{ color: #fff; margin-top: 0; margin-bottom: 25px; font-weight: 600; text-transform: capitalize; font-size: 18px; } .newsletter-form input { width: 100%; margin-bottom: 20px; height: 50px; padding: 10px; color: #1d293e; border-radius: 2px; border: 0px; } .subscribe button { width: 100%; } .subs_btn { background: #061525; border:2px solid #061525; color: #fff; padding: 12px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .subs_btn:hover{ background: #fff; border:2px solid #fff; color:#061525; } .social_profile {margin-top:10px;} .social_profile ul{ list-style: outside none none; margin: 0; padding: 0; } .social_profile ul li{float:left;} .social_profile ul li a { text-align: center; border: 0px; text-transform: uppercase; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; margin-right: 10px; font-size: 16px; color: #fff; display: block; width: 40px; height: 40px; line-height: 40px; border-radius: 30px; } @media only screen and (max-width:768px) { .social_profile ul li a{margin-right:10px;margin-bottom:10px;} } @media only screen and (max-width:480px) { .social_profile ul li a{ width:40px; height:40px; line-height:40px; } } .social_profile ul li a:hover{ color:#fff; } .f_facebook{background:#3B5998;} .f_twitter{background:#1A90D9;} .f_instagram{background:#FF5252;} .f_linkedin{background:#0e76a8;} /*END SOCIAL PROFILE CSS*/ .footer_copyright { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 15px 0; margin-top: 20px; width: 100%; float: left; } .footer_copyright p{ color: #fff; text-align: center; text-transform: capitalize; } /* * ---------------------------------------------------------------------------------------- * 16.END FOOTER DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 17.START SECTION TOP DESIGN * ---------------------------------------------------------------------------------------- */ .section-top { padding-bottom: 100px; padding-top: 100px; position: relative; } .section-top:before { background: #020928; opacity: 0.7; bottom: 0; content: ""; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .section-top-title h1 { color: #fff; font-weight: 600; position: relative; /* -webkit-text-stroke: 1px #eee; */ text-transform: capitalize; font-size: 60px; } /* * ---------------------------------------------------------------------------------------- * 17.END SECTION TOP DESIGN * ---------------------------------------------------------------------------------------- */ .product_item .mix{ display: none; } .product_filter { margin-bottom: 10px; } .product_filter ul { margin: 0px 0 40px; padding: 0; list-style: none; } .product_filter ul li { font-weight: 400; text-transform: capitalize; display: inline-block; cursor: pointer; padding: 10px 22px; font-size: 14px; border: 1px solid transparent; transition: .5s; letter-spacing: 1px; border-radius: 20px; margin:0px; color:#777; line-height: 1; } .product_filter .filter.active { color: #061525; border-color: #061525; } .product-grid{ text-align: center; padding: 0 0 72px; border: 1px solid rgba(0,0,0,0.1); overflow: hidden; position: relative; z-index: 1; margin-bottom: 30px; } .product-grid .product-image{ position: relative; transition: all 0.3s ease 0s; } .product-grid .product-image a{ display: block; } .product-grid .product-image img{ width: 100%; height: auto; } .product-grid .pic-1{ opacity: 1; transition: all 0.3s ease-out 0s; } .product-grid:hover .pic-1{ opacity: 1; } .product-grid .pic-2{ opacity: 0; position: absolute; top: 0; left: 0; transition: all 0.3s ease-out 0s; } .product-grid:hover .pic-2{ opacity: 1; } .product-grid .social{ width: 150px; padding: 0; margin: 0; list-style: none; opacity: 0; transform: translateY(-50%) translateX(-50%); position: absolute; top: 60%; left: 50%; z-index: 1; transition: all 0.3s ease 0s; } .product-grid:hover .social{ opacity: 1; top: 50%; } .product-grid .social li{ display: inline-block; } .product-grid .social li a{ color: #061525; background-color: #fff; font-size: 16px; line-height: 43px; text-align: center; height: 40px; width: 40px; margin: 0 2px; display: block; position: relative; transition: all 0.3s ease-in-out; border-radius: 50%; } .product-grid .social li a:hover{ color: #fff; background-color: #061525; } .product-grid .social li a:before, .product-grid .social li a:after{ content: attr(data-tip); color: #fff; background-color: #000; font-size: 12px; letter-spacing: 1px; line-height: 20px; padding: 1px 5px; white-space: nowrap; opacity: 0; transform:translateX(-50%); position: absolute; left: 50%; top: -30px; } .product-grid .social li a:after{ content: ''; height: 15px; width: 15px; border-radius: 0; transform:translateX(-50%) rotate(45deg); top: -20px; z-index: -1; } .product-grid .social li a:hover:before, .product-grid .social li a:hover:after{ opacity: 1; } .product-grid .product-new-label, .product-grid .product-discount-label{ color: #fff; background-color: #061525; font-size: 12px; text-transform: uppercase; padding: 2px 10px; display: block; position: absolute; top: 13px; left: 13px; font-family: 'Poppins', sans-serif; } .product-grid .product-discount-label{ background-color: #333; left: auto; right: 0; } .product-grid .rating{ color: #fec42d; cursor: pointer; font-size: 13px; padding: 12px 0 0; margin: 0; list-style: none; position: relative; z-index: -1; } .product-grid .rating li.disable{ color: rgba(0,0,0,0.2); } .product-grid .product-content{ background-color: #fff; text-align: center; padding: 0px 0 5px; margin: 0 auto; position: absolute; left: 0; right: 0; bottom: -25px; z-index: 1; transition: all 0.3s; } .product-grid:hover .product-content{ bottom: 7px; } .product-grid .title{ font-size: 14px; font-weight: 400; letter-spacing: 0.5px; text-transform: capitalize; margin: 5px 0 0px; transition: all 0.3s ease 0s; } .product-grid .title a{ color: #333; } .product-grid .title a:hover{ color: #061525; } .product-grid:hover .title a{ color: #061525; } .product-grid .price { color:#333; font-size: 17px; font-weight: 700; letter-spacing: 0.6px; margin-bottom:3px; text-align: center; transition: all 0.3s; } .product-grid .price span { color: #999; font-size: 13px; font-weight: 400; text-decoration: line-through; margin-left: 3px; display: inline-block; } .product-grid .add-to-cart{ color: #000; font-size: 13px; font-weight: 600; } /* -------- Product Details Page Css -------- */ .pd_title { color: #061525; display: block; font-size: 18px; font-weight: 700; line-height: 12px; margin-bottom: 30px; text-transform: uppercase; width: 100%; transition:.5s; } .pd_title:hover { color: #000; } .pd_price_dtls { margin-bottom: 38px; } .pd_price{ float:left; } .pd_ratng{ float:right; } .pd_price .new { color: #303030; font-size: 18px; font-weight: 700; margin-right: 11px; } .pd_price span { line-height: 16px; display: block; font-weight: 500; float: left; } .pd_price .old { color: #909090; font-size: 14px; position: relative; padding: 0 5px 0 4px; } .pd_price .old::before { background: #909090; content: ""; height: 1px; left: 0; position: absolute; top: 6px; width: 100%; } .pd_ratng .rtngs i { display: block; float: left; font-size: 15px; margin-right: 3px; } .pd_text { margin-bottom: 30px; } .pd_text h4 { font-size: 14px; font-weight: 500; margin: 0 0 12px; text-transform: uppercase; } .pd_img_size { margin-bottom: 38px; overflow: hidden; } .pd_img_size h4 { font-size: 14px; font-weight: 500; margin: 0 0 12px; text-transform: uppercase; } .pd_img_size a { border: 1px solid #eeeeee; color: #303030; display: block; float: left; height: 36px; line-height: 36px; margin-right: 10px; text-align: center; text-transform: uppercase; width: 36px; transition:.5s; } .pd_img_size a:hover { border: 1px solid #061525; color: #061525; } .pd_clr_qntty_dtls { margin-bottom: 40px; } .pd_clr { width: 50%; float:left; } .pd_clr h4 { font-size: 14px; font-weight: 500; margin: 0 0 12px; text-transform: uppercase; } .pd_clr a.active { border: 6px solid #fff; outline: 1px solid #303030; outline-offset: -1px; overflow: hidden; } .pd_clr a { display: block; float: left; height: 36px; line-height: 36px; margin-right: 10px; text-indent: -999999px; width: 36px; } .pd_qntty_area { width: 50%; float:left; } .pd_qntty_area h4 { font-size: 14px; font-weight: 500; margin: 0 0 12px; text-transform: uppercase; } .pd_qntty_area .pd_qty { border: 1px solid #ddd; width: auto; display: inline-block; } .pd_qntty_area .pd_qty input[type="number"] { background: transparent none repeat scroll 0 0; border-color: #ddd; border-style: solid; border-width: 0 1px 0 0; color: #303030; float: left; height: 35px; padding: 0 5px; text-align: center; width: 54px; } .pd_qntty_area .pd_qty .qttybtn.inc { margin-top: 5px; } .pd_qntty_area .pd_qty .qttybtn { cursor: pointer; display: block; overflow: hidden; text-align: center; } .pd_qntty_area .pd_qty .qttybtn i { display: block; line-height: 12px; } .pd_btn { margin-bottom: 38px; } .btn_icn { background: #fff; color: #061525!important; border: 1px solid #061525; padding: 8px 15px; margin-left: 10px; transition: .5s; } .btn_icn:hover { background: #061525; color: #fff!important; } .pd_share_area h4 { font-size: 14px; font-weight: 500; margin: 0 0 12px; text-transform: uppercase; } .pd_social_icon a { color: #606060; display: block; float: left; font-size: 20px; line-height: 32px; margin-right: 20px; transition:.5s; } .pd_social_icon a:hover { color: #061525; } .prdct_dtls_content { margin-top: 40px; } .pd_tab_area{ margin-top:30px; background: #fff none repeat scroll 0 0; border: 1px solid rgba(0,0,0,.02); box-shadow: 0 0 4px rgba(0,0,0,.02); display: block; padding: 31px 32px; } .pd_tab_area p{ margin-bottom: 15px; } .pd_tab_area ul{ display: inline-block; } .pd_tab_area li{ padding: 5px 0; display: block; font-weight: 00; } .pd_tab_btn { margin-bottom: 10px; border: none; } .pd_tab_btn li { display: block; float: left; margin-right: 10px; padding-bottom: 11px; position: relative; } .pd_tab_btn li a { color: #000; display: block; font-weight: 400; text-transform: capitalize; padding: 7px 20px; border-radius: 20px; transition: .5s; } .pd_tab_btn li a.active{ background: #061525; color: #fff; box-shadow: 4px 3px 5px rgba(0,0,0,0.07); } .single_pd_tab { text-align: left; } .pda_rtng_area { margin-bottom: 20px; } .pda_rtng_area h4 { font-size: 18px; font-weight: 700; line-height: 14px; margin: 0 0 7px; color:#000; } .pda_rtng_area h4 span { color: #909090; font-size: 12px; font-weight: 400; line-height: 10px; } .pda_rtng_area > span { color: #909090; display: block; font-size: 12px; font-weight: 300; line-height: 10px; } .rtng_cmnt_area { margin-bottom: 40px; } .rtng_cmnt_area .single_rtng_cmnt { margin-bottom: 30px; } .rtngs { float: right; color: #fec42d; } .rtng_cmnt_area .single_rtng_cmnt .rtngs i { color: #fec42d; font-size: 16px; } .rtng_cmnt_area .single_rtng_cmnt .rtngs span { color: #909090; } .rtng_author { float: left; } .rtng_cmnt_area .single_rtng_cmnt .rtng_author h3 { color: #606060; float: left; font-size: 14px; font-weight: 600; margin: 0; line-height: 13px; } .rtng_cmnt_area .single_rtng_cmnt .rtng_author span { color: #909090; display: block; float: left; font-size: 12px; font-weight: 300; line-height: 13px; margin-left: 15px; } .rtng_cmnt_area .single_rtng_cmnt p { display: block; overflow: hidden; width: 100%; } .rtng_cmnt_form_area h3 { font-size: 14px; margin: 0 0 30px; color: #000; text-transform: uppercase; font-weight: 500; line-height: 12px; } .rcf_pdnglft { padding-left: 0; } .rp_title h3 { font-size: 18px; letter-spacing: 2px; line-height: 24px; margin: 0; position: relative; text-transform: uppercase; padding-bottom: 13px; color: #000; font-weight: 700; margin-bottom: 18px; } .related_prdct_area { padding: 50px 0; } .gray_section{ background: #f9f9f9; } .acc_btn { background: #061525; border: 1px solid transparent; border-radius: 0; color: #fff!important; padding: 8px 20px; transition:.5s; margin-top:10px; text-transform: capitalize; } .acc_btn:hover { background: #000; border: 1px solid transparent; color: #fff; } .input-area input { background: #f2f2f2; border: none; height: 52px; width: 100%; margin-bottom: 15px; padding: 20px; } .input-area textarea { background: #f2f2f2; border: none; width: 100%; margin-bottom: 15px; padding: 20px; } .top_banner { position: relative; background: #fff; border-radius: 30px; z-index: 9999; padding-top: 5px; } .top_benner-2 { /* position: absolute; */ /* top: -20px; */ /* z-index: 99; */ background: #fff; /* left: 7%; */ /* border-radius: 30px; */ /* height: 300px; */ /* z-index: 999999; */ } .process_area{padding:40px 0; } /************************************/ /*** 06. Our Services css ***/ /************************************/ .our-services{ background: var(--secondary-color) url('../img/section-bg-img-2.png') no-repeat; background-position: left -100px bottom -250px; padding: 100px 0 70px; } .our-service-content{ position: sticky; top: 20px; margin-bottom: 30px; } .our-services .section-btn{ text-align: left; } .service-item{ position: relative; background-color: #ffff; border: 1px solid #061525; box-shadow: 5px 28px 75px 4px #585B631A; border-radius: 16px; height: calc(100% - 30px); margin-bottom: 30px; padding: 15px 30px; transition: all 0.4s ease-in-out; overflow: hidden; cursor: none; } .service-item::before{ content: ''; position: absolute; left: 0; right: 0; top: 100%; border-radius: 0px; background-color: #061525; transition: all 0.4s ease-in-out; height: 100%; z-index: 1; } .service-item:hover:before{ top: 0; } .service-item .icon-box{ position: relative; z-index: 2; margin-bottom: 20px; } .service-item .icon-box img{ transition: all 0.4s ease-in-out; } .service-item:hover .icon-box img{ filter: brightness(0) invert(1); } .service-body{ position: relative; z-index: 2; margin-bottom: 20px; } .service-body .service_heading{ font-size: 20px; font-weight: 600; text-transform: capitalize; margin-bottom: 20px; transition: all 0.3s ease-in-out; } span.text_clor {color: #061525;} .service-item:hover .service-body h3{ color: #fff; } .service-body p{ margin: 0; transition: all 0.3s ease-in-out; } .service-item:hover .service-body p{ color: #fff; } .service-footer{ position: relative; z-index: 2; } .service-footer a{ background-color: #000000; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .service-footer a img{ max-width: 20px; transition: all 0.4s ease-in-out; transform: rotate(-45deg); } .service-item:hover .service-footer a img{ transform: rotate(0deg); } /* menu bar start */ .main-menu-3 > li > a { display: block; font-weight: 400; font-size: 16px; line-height: 16px; color: #121212; outline: none; text-transform: capitalize; -webkit-transform: translateY(var(--y)) translateZ(0); transform: translateY(var(--y)) translateZ(0); -webkit-transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease; transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease; transition: transform 0.4s ease, box-shadow 0.4s ease; transition: transform 0.4s ease, box-shadow 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease; } .main-menu-3 > li > a .menu-text { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; text-shadow: 0 16px 0 #121212; text-transform: none; } .main-menu-3 > li > a .menu-text span { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-style: normal; -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; -webkit-transform: translateY(var(--m)) translateZ(0); transform: translateY(var(--m)) translateZ(0); padding: 2px 0; } .main-menu-3 > li > a:hover span { --m: calc(16px * -1); margin: -4px 0 0 0; } /* menu bar end */ .image-anime{ position: relative; overflow: hidden; } .image-anime:after{ content: ""; position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255,255,255,.3); transform: translate(-50%,-50%) rotate(-45deg); z-index: 1; } .image-anime:hover:after{ height: 250%; transition: all 600ms linear; background-color: transparent; } /* mouse bar start */ :root { --blue: #102770; } .cursor1, .cursor2{ position: fixed; border-radius: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none; left: -100px; top: 50%; z-index: 9999!important; } .cursor1{ background-color: var(--blue); height: 0; width: 0; } .cursor2{ height: 30px; width: 30px; transition: all 200ms ease-out; background-position: center; background-size: 0 0; } .cursor2.hover{ height: 220px; width: 320px; border:none; border-radius: 8px; } .cursor2{ border: 2px solid var(--blue); box-shadow: 0 0 12px rgba(16, 39, 112, 0.2); } .cursor2.hover{ background-size: cover; box-shadow: 0 0 0 rgba(16, 39, 112, 0.2); } /* mouse bar end */ a.logo_img img{ border: 1px solid #023681; width: 200px; float: left; min-height: 60px; line-height: 60px; } .body_wrapper {overflow:hidden;} /* video slider start */ * { margin: 0; padding: 0; } .hero__area-3 h4 { position: relative; z-index: 1; padding: 0; margin: 0; } .hero__area-3 { padding-top: 190px; padding-bottom: 125px; position: relative; overflow: hidden; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .hero__area-3 { padding-top: 160px; padding-bottom: 110px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__area-3 { padding-top: 70px; padding-bottom: 0; margin-bottom: 0px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__area-3 { padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__area-3 { padding-top: 140px; } } @media only screen and (max-width: 767px) { .hero__area-3 { padding-top: 0; padding-bottom: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1919px) { .hero__area-3 .hero3-img { max-width: 1000px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__area-3 .hero3-img { max-width: 1000px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__area-3 .hero3-img { max-width: 800px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__area-3 .hero3-img { max-width: 760px; } } @media only screen and (max-width: 767px) { .footer_copyright p { text-align: center !important; border-bottom: 1px solid #ffffff3b; padding-bottom: 6px; } .comnt { text-align: center; display: block; padding-top: 4px; } .hero__area-3 .video-info { display: none; } .hero__area-3 .sec-title-wrapper { padding: 10px; margin-top: 0; } .hero__area-3 .sec-title { font-size: 35px!important; margin-top: 30px; } .hero__inner-3 .scroll-down {display:none;} .hero3-img-ani { position: revert!important; right: 0!important; top: 0px; height: auto; } .hero3-img-ani img { width: 100% !important; border-radius: 0 !important; top: -80px; } .hero3-img-ani { height: auto!important; margin-bottom: 20px!important; } .hero__area-3 .hero3-img { position: unset; } } .hero__area-3 .hero3-img-anim { overflow: hidden; position: relative; width: 350px; height: 100%; } .hero__area-3 .hero3-img-anim img { position: absolute; bottom: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: 150%; margin-left: auto; margin-right: auto; } .hero3-img-ani img { width: 100%; border-radius: 50px; margin-top: 30px; } .hero3-img-ani { height:auto; width:90%; margin:0 auto; } .hero__area-3 .sec-title-wrapper { display: inline-block; position: unset; padding-left: 12px; } .hero__area-3.start-video .sec-title, .hero__area-3.start-video .sec-sub-title, .hero__area-3.start-video .hero__text-3 p, .hero__area-3.start-video .intro-title .video-title { color: #fff; } .hero__inner-3 .scroll-down { margin-top: 100px; } .hero__inner-3 .scroll-down button, .scroll-down-div .scroll-down button { border: 1px solid var(--purple-base); padding: 25px 10px; border-radius: 30px; -webkit-animation: wcSlideBottom 7s infinite linear; animation: wcSlideBottom 7s infinite linear; } video, iframe, img { margin: 0; padding: 0; position: relative; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__area-3 .hero3-img { max-width: 1000px; } } .hero__area-3 .hero3-img { position: absolute; bottom: 0; right: 0; } .hero__area-3 .sec-sub-title { font-size: 40px; font-weight: 600; color: #777777; position: relative; display: inline-block; padding-right: 30px; padding-bottom: 0px; text-transform: uppercase; z-index: 2; } @media only screen and (max-width: 767px) { .hero__area-3 .sec-sub-title { padding-bottom: 15px; font-size: 21px; } .hero3-img-ani img { margin-top: 80px; border-radius: 15px !important; } } .hero__area-3 .sec-sub-title::after { position: absolute; content: ""; width: 300px; height: 1px; left: 100%; top: 12px; background-color: #000; } .hero__area-3 .sec-title { z-index: 2; font-weight: 600; font-size: 90px; line-height: 0.82; text-transform: uppercase; color: #061525; } .hero__area-3 .title-right { position: absolute; right: 0; } .hero__area-3 .wrapper { --clip-path: circle(65px at left); --clip-path-hover: circle(70px at left); --clip-path-clicked: circle(100vw at left); --duration: .4s; --timing-function: ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 122px; left: 0; width: 100%; height: 100%; z-index: 999; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__area-3 .wrapper { display: none; } } @media only screen and (max-width: 767px) { .hero__area-3 .wrapper { display: none; } } .hero__area-3 .video-info { width: 300px; position: relative; left: 460px; top: -275px; height: 200px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__area-3 .video-info { left: 200px; top: -50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__area-3 .video-info { left: 280px; top: -235px; } } .hero__area-3 .video { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); -webkit-transition: -webkit-clip-path var(--duration) var(--timing-function); transition: -webkit-clip-path var(--duration) var(--timing-function); transition: clip-path var(--duration) var(--timing-function); transition: clip-path var(--duration) var(--timing-function), -webkit-clip-path var(--duration) var(--timing-function); position: relative; top: 55px; left: 100px; } .hero__area-3 .video::before { position: absolute; top: -20px; left: -20px; width: 40px; height: 40px; background: url(../img/play-icon.png); content: ""; z-index: 999999999999; background-size: 100%; } .hero__area-3 .video video { position: fixed; top: 0; left: 0; min-width: 100%; min-height: auto; width: auto; height: auto; } .hero__area-3 .intro-title { position: relative; left: 175px; top: 70px; } .hero__area-3 .intro-title .video-title { font-size: 16px; text-transform: uppercase; line-height: 1.3; } .hero__area-3 .intro-title .video-title span { display: block; font-size: 18px; } .hero__area-3 .intro-title .video-title.close-video-title { display: none; } .hero__area-3 #video_check { width: 200px; height: 200px; margin: auto; position: absolute; left: 0; top: 0; right: 0; border-radius: 40px; outline: none; z-index: 2; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; z-index: 9999999; } .hero__area-3 #video_check:focus { outline: 0; } .hero__area-3 #video_check:hover ~ .video { -webkit-clip-path: var(--clip-path-hover); clip-path: var(--clip-path-hover); } .hero__area-3 #video_check:hover ~ .text::before { --r: 25px; --opacity: 1; } .hero__area-3 #video_check:hover ~ .text::after { -webkit-clip-path: var(--clip-path-hover); clip-path: var(--clip-path-hover); } .hero__area-3 #video_check:hover ~ .text > span::after { -webkit-clip-path: var(--clip-path-hover); clip-path: var(--clip-path-hover); } .hero__area-3 #video_check:checked { width: 100%; height: 100%; border-radius: 0; top: 0; left: 0; bottom: 0; } .hero__area-3 #video_check:checked ~ .video { -webkit-clip-path: var(--clip-path-clicked); clip-path: var(--clip-path-clicked); } .hero__area-3 #video_check:checked ~ .text { --opacity: 0; -webkit-transition: opacity 0.3s var(--timing-function); transition: opacity 0.3s var(--timing-function); } .hero__area-3 #video_check:checked ~ .text::after { -webkit-clip-path: var(--clip-path-clicked); clip-path: var(--clip-path-clicked); } .hero__area-3 #video_check:checked ~ .text > span::after { -webkit-clip-path: var(--clip-path-clicked); clip-path: var(--clip-path-clicked); } .hero__area-3.start-video .hero3-img { opacity: 0; } .hero__text-3 { max-width: 400px; padding-top: 90px; position: relative; padding-bottom:10px; z-index: 9; } .banner_area {width:100%; float:left;} /* video slider end */ .about-content-two_about { padding-top: 60px; margin-top: 0; background: #efefef; } .blockquote-custom-icon { align-items: center; border-radius: 50%; display: flex; height: 50px; justify-content: center; left: 50px; position: absolute; top: -25px; width: 50px; } .blockquote { font-size: 1.25rem; margin-bottom: 1rem; } .blockquote-custom { background: #d9dde0; font-size: 1.1rem; position: relative; } .svg-inline--fa { display: var(--fa-display, inline-block); height: 1em; overflow: visible; vertical-align: -0.125em; } .single_service:hover img { filter: brightness(0) invert(1); } .service-page { padding-top: 50px; width: 100%; float: left; } .image-anime img { border-radius: 20px; } .service2-section-area .images-content-area:hover .arrow-area { transform: rotateY(-180deg); transition: all 0.4s; } .service2-section-area { position: relative; z-index: 1; padding-bottom:60px; }.service2-section-area .images-content-area { position: relative; z-index: 1; }.service2-section-area .images-content-area .img1 { border-radius: 8px; transition: all 0.4s; overflow: hidden; }.service2-section-area .images-content-area .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 8px; transition: all 0.8s; }.service2-section-area .images-content-area .content-area { padding: 24px; padding: 24px; margin-top: -460px; position: relative; z-index: 1; } .head_para { font-size: 24px; font-weight: 500 ; margin-bottom: 10px; } .service2-section-area .images-content-area .content-area a.text { color: #000; transition: all 0.4s; display: inline-block; margin-bottom: 16px; }.service2-section-area .images-content-area .content-area p { color: #fff; transition: all 0.4s; } .service2-section-area .images-content-area .content-area li { color: #fff; transition: all 0.4s; } .btn-area { display: flex; align-items: center; }.header-btn1 { display: inline-block; background: #000; color: #fff; padding: 8px 16px; transition: all 0.4s; border-radius: 30px; position: relative; z-index: 1; } .header-btn1 span { height: 36px; width: 36px; display: inline-block; border-radius: 50%; transition: all 0.4s; line-height: var(--ztc-font-size-font-s36); text-align: center; background: #fff; color: #000; transform: rotate(-45deg); position: relative; left: 8px; } .header-btn1::after { position: absolute; content: ""; height: 100%; width: 1px; left: 50%; transition: all 0.4s; top: 0; z-index: -1; background: #000000; border-radius: 30px; visibility: hidden; opacity: 0; } .service2-section-area .images-content-area .arrow-area { position: absolute; top: 24px; transition: all 0.4s; right: 24px; z-index: 999; } .service2-section-area .images-content-area .arrow-area a { height: 60px; width: 60px; text-align: center; line-height: 60px; display: inline-block; background: #000000; border-radius: 50%; transition: all 0.4s; font-size: 32px; transform: rotate(-45deg); color: #fff; } .service2-section-area .service-all-boxes .service2-auhtor-boxarea:hover { transform: translateY(-5px); } .service2-section-area .service-all-boxes .service2-auhtor-boxarea { position: relative; z-index: 1; background: #c8bff4; border-radius: 8px; padding: 24px; transition: all 0.4s; } .service2-section-area .service-all-boxes .service2-auhtor-boxarea:hover .arrow a { transform: rotateY(-180deg); transition: all 0.4s; } .service2-section-area .service-all-boxes .service2-auhtor-boxarea .arrow { /* text-align: right; */ margin-bottom: 8px; position: absolute; right: 20px; }.service2-section-area .service-all-boxes .service2-auhtor-boxarea .arrow a { display: inline-block; height: 40px; width: 40px; text-align: center; line-height: 40px; border-radius: 50%; transition: all 0.4s; background: #000000; color: #fff; transform: rotate(-45deg); }.service2-section-area .service-all-boxes .service2-auhtor-boxarea .content-area h5 { color: #000; transition: all 0.4s; }.service2-section-area .service-all-boxes .service2-auhtor-boxarea .content-area a { color: #000; transition: all 0.4s; display: inline-block; margin-top: 16px; }.service2-section-area .service-all-boxes .service2-auhtor-boxarea .content-area p { color:#000; margin-top: 2px; }.service2-section-area .service-all-boxes .service2-auhtor2-boxarea { position: relative; z-index: 1; background: #d5d5d5; border-radius: 8px; padding: 24px; transition: all 0.4s; margin-top: 20px; }.service2-section-area .service-all-boxes .service2-auhtor2-boxarea .arrow { /* text-align: end; */ margin-bottom: 8px; transition: all 0.4s; position: absolute; right: 20px; top: 10px; }.service2-section-area .service-all-boxes .service2-auhtor2-boxarea .arrow a { display: inline-block; height: 40px; width: 40px; text-align: center; line-height: 40px; border-radius: 50%; transition: all 0.4s; background: #000000; color: #fff; transform: rotate(-45deg); }.service2-section-area .service-all-boxes .service2-auhtor2-boxarea .content-area h5 { color: #000000; transition: all 0.4s; } .service2-section-area .service-all-boxes .service2-auhtor2-boxarea .content-area a { color: #000; transition: all 0.4s; display: inline-block; margin-top: 16px; }.service2-section-area .service-all-boxes .service2-auhtor2-boxarea .content-area p { color: #000; margin-top: 16px; }.service2-section-area .service-all-boxes .service2-auhtor2-boxarea:hover { transform: translateY(-5px); }.service2-section-area .service-all-boxes .service2-auhtor2-boxarea:hover .arrow a { transform: rotateY(-180deg); transition: all 0.4s; } .check-list_area { padding: 0 0 0 0; } .check-list_area li { color: #000; margin-bottom: 5px; font-size:15px; text-align: justify; } .check-list_area li:before { content: "\f058" !important; font-family: 'FontAwesome'; font-size: 20px; padding-right: 5px; position: relative; top: 1px; } .check-list_area_new { padding: 0 0 0 0; } .check-list_area_new li { color: #000; margin-bottom: 5px; font-size:15px; } .check-list_area_new li:before { content: "\f104" !important; font-family: 'FontAwesome'; font-size: 20px; padding-right: 5px; position: relative; top: 1px; } section.our_team { margin-bottom: 50px; } .contact_us { padding-top: 0; } /*---===================================================== =========================================================---*/ .contact-area.style-three.inner { padding: 30px 0 30px; } .style-three .add-white-bg { padding: 39px 37px 38px; border-radius: 10px; background-color: #ffffff; } .style-three .single-contact-box { margin-right: 60px; } .style-three .contact-contetn h4 { font-size: 36px; margin: 0 0 35px; } .style-three .single-input-box input { border: 2px solid rgba(4,20,36,0.1); width: 100%; height: 60px; padding: 0 20px; border-radius: 3px; outline: 0; margin-bottom: 27px; } .style-three .single-input-box input::placeholder{ color: #686868; font-weight: 300; } .style-three .single-input-box select { border: 2px solid rgba(4, 20, 36, 0.1); width: 100%; height: 60px; padding: 0 20px; border-radius: 3px; outline: 0; color: #686868; font-size: 14px; font-weight: 200; } .style-three .single-input-box textarea { border: 2px solid rgba(4,20,36,0.1); width: 100%; height: 160px; padding: 17px 20px; border-radius: 3px; outline: 0; margin-bottom: 27px; } .style-three .single-input-box textarea::placeholder{ color: #686868; font-weight: 300; } .style-three .massage-sent-button button { border-radius: 3px; background-color: #061525; border: 2px solid #061525; color: #fff; padding: 15px 38px; transition: 0.5s; } .style-three .massage-sent-button button:hover{ color:#061525; background:#fff; } .style-three .single-contact-info-box { background: url(../img/contact-info-box-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 30px 30px 20px; border-radius: 10px; } .style-three .info-content { margin-bottom: 50px; } .style-three .info-content h4 { color: #fff; font-size: 30px; margin: 0; } .style-three .contact-info-box { display: flex; align-items: center; gap: 17px; margin-bottom: 48px; } .style-three .contact-info-icon i { display: inline-block; color: #fff; border: 2px solid #fff; width: 53px; height: 53px; border-radius: 50%; text-align: center; line-height: 53px; font-size: 24px; } .style-three .contact-info-content p { font-size: 15px; color: #ffffff; font-weight: 400; margin: 0; } .style-three .contact-info-content h4 { font-size: 17px; color: #ffffff; font-weight: 600; margin: 1px 0 0; } /*---===================================================== =========================================================---*/ .services-details-area { padding: 40px 0 70px; } .services-details-area2 { padding: 40px 0 20px!important; } .services-details-thumb img { width: 100%; } .services-details-content { padding-top: 18px; } h4.services-details-title { font-size: 36px; margin-bottom: 10px; } p.services-details-desc { font-size: 17px; margin-top: 24px; text-align: justify; } section.aboutsection p { text-align: justify; } .service-details-icon-box { display: flex; background: #F6F6EE; padding: 32px 27px 18px; gap: 28px; margin-top: 27px; } .service-details-box-content h4 { font-size: 22px; font-weight: 700; margin: 0 0 11px; } .services-details-text { background: #061525; display: flex; align-items: center; padding: 32px 39px; gap: 65px; border-radius: 5px; margin-top: 55px; margin-bottom: 41px; } .service-details-text-icon { position: relative; } .service-details-text-icon:before { position: absolute; content: ""; width: 2px; height: 49px; right: -29px; top: 1px; background: #f6f6ee61; } .service-details-text-content p { font-size: 22px; line-height: 30px; color: #ffffff; font-weight: 400; font-style: italic; width: 90%; margin: 0; } .services-details-area .single-benifits-box { margin-top: 22px; } .services-details-area .benifits-thumb img { width: 100%; } .services-details-area .benifits-content { border-radius: 5px; filter: drop-shadow(0px 5px 30px rgba(117,117,117,0.1)); background-color: #ffffff; padding: 30px 31px 23px; width: 92%; margin: auto; margin-top: -28px; } .services-details-area .benifits-content h4 { font-size: 22px; margin: 0; margin-bottom: 14px; font-weight: 600; color: #001819; } .services-details-area .benifits-content ul li { line-height: 32px; } .services-details-area .benifits-content ul li i { display: inline-block; color: #061525; font-size: 18px; position: relative; top: 2px; margin-right: 8px; } /*widget-sidber css*/ .widget-sidber { border-radius: 5px; background-color: #f7f6ee; padding: 32px 41px 29px; margin-bottom: 27px; } .widget-sidber-content h4 { font-size: 28px; font-weight: 700; margin: 0 0 46px; position: relative; } .widget-sidber-content h4:before { position: absolute; content: ""; width: 29px; height: 2px; left: 0; bottom: -8px; background: #061525; } .widget-category ul li img { margin-right: 12px; transition: 0.5s; } .widget-category ul li a:hover img{ filter: brightness(0) invert(1); } .widget-category ul li a { background: #ffff; padding: 14px 26px; width: 100%; display: inline-block; margin-bottom: 14px; color: #001819; font-weight: 500; border-radius: 5px; position: relative; z-index: 1; transition: 0.5s; } .widget-category ul li a:hover{ color:#fff; } .widget-category ul li a:before{ position: absolute; content: ""; width: 0; height: 100%; left: 50%; top: 0; background: #061525; z-index: -1; border-radius: 5px; transition: 0.5s; } .widget-category ul li a:hover:before{ width: 100%; left: 0; } .widget-category ul li i { color: black; display: inline-block; float: right; font-size: 17px; opacity: 0; transition: 0.5s; padding-top: 6px; } .widget-category ul li a:hover i{ opacity: 1; color: #fff; } .widget-sidber-download-button a { display: inline-block; background: #00181A; width: 100%; color: #fff; padding: 15px 23px; border-radius: 5px; margin-bottom: 18px; } .widget-sidber-download-button a.active { background: #061525; } .widget-sidber-download-button i { color: #061525; display: inline-block; font-size: 22px; margin-right: 9px; position: relative; top: 3px; } .widget-sidber-download-button a.active i{ color:#fff; } .widget-sidber-download-button span i { float: right; display: inline-block; font-size: 16px; } .widget-sidber-download-button a.active span i{ color:#fff; } .widget-sidber-contact-box { background: url(../img/sidber-contact.png); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 5px; padding: 48px 43px 48px; } p.widget-sidber-contact-text { font-size: 18px; color: #ffffff; font-weight: 500; margin: 0; padding: 25px 0 13px; } h3.widget-sidber-contact-number { font-size: 24px; color: #ffffff; font-weight: 600; margin: 0 0 14px; } h3.widget-sidber-contact-number a { color: #ffffff;} span.widget-sidber-contact-gmail a { color: #ffffff;} span.widget-sidber-contact-gmail { font-size: 16px; color: #ffffff; font-weight: 400; margin: 0; } span.widget-sidber-contact-gmail i { display: inline-block; font-size: 17px; color: #fff; position: relative; top: 2px; margin-right: 6px; } .widget-sidber-contact-btn a { display: inline-block; font-size: 16px; color: #ffffff; font-weight: 400; text-decoration: none; background: #000; padding: 16px 53px 15px; border-radius: 5px; margin-top: 30px; transition: 0.5s; border: 2px solid #ffff; } .widget-sidber-contact-btn a:hover{ background: #fff; color:#061525; } .widget-sidber-contact-btn a i { display: inline-block; font-size: 18px; position: relative; top: 2px; margin-left: 3px; } .galelry_office{padding:60px 0; } .top_area_breadcum { position:relative; } .breadcum_area {width:100%; padding:40px 0;} .rightarrow { position: absolute; right: 0px; top: 0px; width: 90px; } .top_area_breadcum { width:100%; float:left;} .top_area_breadcum h1 { width: 100%; float: left; font-size: 50px; font-weight:bold; } .top_area_breadcum ul { list-style: none; margin: 0 0 10px 0; padding: 0; width: 100%; float: left; } .top_area_breadcum ul li i { font-size: 11px; margin-right: 2px; } .top_area_breadcum ul li { float: left; margin-right: 20px; } .top_area_breadcum ul li a { color: #036ab6; } .banner_services { background-color: #f0f0f0; color: #2e2e2e; padding: 50px; text-align: left; width:100%; float:left; margin-top:60px; } .hedone { font-size: 40px; font-weight: bold; margin-bottom: 10px; line-height: 42px; } .hedtwo{ font-size: 24px; font-weight: bold; margin-bottom: 10px; } .banner_text {width:100%; float:left;} .banner_text p {text-align:justify; margin-bottom:15px;} .hegith_equle {height:100px;} .aboutbanner { background-image: url('../img/about-banner.jpg'); background-size: cover; background-attachment: fixed; background-position: center; height: 400px; width: 100%; margin-top:90px; } .contactbanner { background-image: url('../img/contactbanner.jpg'); background-size: cover; background-attachment: fixed; background-position: center; height: 400px; width: 100%; margin-top:90px; } .blogbanner { background-image: url('../img/blogbanner.jpg'); background-size: cover; background-attachment: fixed; background-position: center; height: 400px; width: 100%; margin-top:90px; } .gallerybanner { background-image: url('../img/gallerybanner.jpg'); background-size: cover; background-attachment: fixed; background-position: center; height: 400px; width: 100%; margin-top:90px; } .servicesbanner { background-image: url('../img/servicbanner.jpg'); background-size: cover; background-attachment: fixed; background-position: bottom; height: 400px; margin-top:90px; } .service-one { background-image: url('../img/s1.jpg'); background-size: cover; background-attachment: fixed; background-position: center; height: 400px; width: 100%; margin-top:90px; } .service-one_2 { background-image: url('../img/s2.jpg'); background-size: cover; background-attachment: fixed; background-position: center; height: 400px; width: 100%; margin-top:90px; } .service-one_3 { background-image: url('../img/s3.jpg'); background-size: cover; background-attachment: fixed; background-position: center; height: 400px; width: 100%; margin-top:90px; } .service-one_4 { background-image: url('../img/s4.jpg'); background-size: cover; background-attachment: fixed; background-position: center; height: 400px; width: 100%; margin-top:90px; } .service-one_5 { background-image: url('../img/s5.jpg'); background-size: cover; background-attachment: fixed; background-position: center; height: 400px; width: 100%; margin-top:90px; } .service-one_6 { background-image: url('../img/s6.jpg'); background-size: cover; background-attachment: fixed; background-position: center; height: 400px; width: 100%; margin-top:90px; } .creditcard-banner { background-image: url('../img/creditcard-banner.jpg'); background-size: cover; background-attachment: fixed; background-position: bottom; height: 400px; margin-top:90px; } .referfriend-banner { background-image: url('../img/referfriend.jpg'); background-size: cover; background-attachment: fixed; background-position: bottom; height: 400px; margin-top:90px; } .strategy-banner { background-image: url('../img/strategy-banner.jpg'); background-size: cover; background-attachment: fixed; background-position: bottom; height: 400px; margin-top:90px; } .image-section img { max-width: 100%; height: auto; border-radius: 10px; } .text-section { display: flex; flex-direction: column; gap: 20px; } .black-box, .white-box { width: 300px; padding: 20px; border-radius: 10px; text-align: center; } .black-box { background-color: #000; color: white; } .white-box { background-color: #fff; color: black; border: 2px solid black; } .box-strgy{background: #efefef; width:100%; padding:60px 0;float: left;} .box-area {background: #efefef; padding:60px 0} .boxone { background: #061525; border-radius: 10px; padding: 10px 20px; margin-bottom:30px; } .boxone p {color: #fff; text-align: justify;} .boxone li {color: #fff; } .boxone:hover { background: #fff; } .boxone:hover p{color: #000; } .boxone:hover li{color: #000; } .boxtwo { background: #fff; border-radius: 10px; padding: 10px 20px; } .boxtwo:hover { background: #000; } .boxtwo:hover p{color: #fff; } .boxtwo:hover li{color: #fff; } .as_box1 { -webkit-box-shadow: 0 0 45px rgba(0, 0, 0, .08); box-shadow: 0 0 45px rgba(0, 0, 0, .08); background-color: #061525; padding:80px 0; } .about_single1 {} .about_single1 p {color:#fff; } .about_single1 h3 {color:#fff; text-align:center; font-size:24px;margin-top:30px; margin-bottom:15px;} .about_single2 {border-right:none;} .header-button { background-color: #061525; color: white; border: none; padding: 12px 24px; border-radius: 24px; font-size: 16px; cursor: pointer; font-weight: bold; text-transform: uppercase; } .main-heading { font-size: 2.5rem; margin: 20px 0; font-weight: bold; } .box-heading { font-size: 1.4rem; margin: 20px 0; font-weight: bold; } .cta-button a { color: #000; display:block; } .cta-button { width: 150px; height: 150px; border: 2px solid #061525; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto; cursor: pointer; font-size: 18px; color: #000; font-weight: bold; text-transform: uppercase; position: relative; } .cta-button:hover { background-color: #000; color: #fff; } .cta-button:hover a { color: #fff; } .cta-button::after { content: '→'; font-size: 20px; margin-left: 8px; position: absolute; right: 70px; bottom: 36px; } .services-contact {width:100%; float:left; padding:60px 0;} a.ttm-btn { color: #000; } .aboutsection {width:100%; padding:60px 0;} .aboutsection h2 {color:#061424; margin-bottom:10px; padding:0px; font-size:27px; line-height: 35px;} .video-intro-container img { box-shadow: 0 10px 45px 0px rgba(0, 0, 0, 0.3); border-radius:10px; border: 4px solid #fff; margin:8px; } .video-intro-container img:hover { box-shadow: 0 5px 22px 0px rgba(0, 0, 0, 0.3); border-radius:0px; } .news-card { margin-bottom: 20px; } .news-card img { width: 100px; height: 100px; max-width: 100px; border-radius: 5px; } .news-date { font-size: 14px; color: #999; margin-bottom: 5px; } .news-title { font-weight: 500; font-size: 16px; color: #000; margin: 0; } .recent-news-section { background-color: #f5f9ff; padding: 30px; } a.navbar-logo img { /* margin-top: 10px;*/ } .nav-pills .nav-link.active, .nav-pills .show>.nav-link { color: #fff; background-color: #061525; } .service-item .icon-box img { filter: brightness(0) saturate(100%) invert(5%) sepia(6%) saturate(6930%) hue-rotate(187deg) brightness(93%) contrast(102%); } .stategy img { filter: brightness(0) saturate(100%) invert(5%) sepia(6%) saturate(6930%) hue-rotate(187deg) brightness(93%) contrast(102%); } .min-h-auto { min-height: auto !important; } .counter-num::after { content: "+"; } .no-pointer { cursor: default; /* normal arrow, not hand */ }