/*common css*/ body, h1, h2, h3, h4, h5, h6, ul, p{ margin: 0; padding: 0; } li{list-style: none;} a{text-decoration: none;} body{ font-family: 'Montserrat', sans-serif; overflow-x: hidden; } .roboto{ font-family: 'Roboto', sans-serif; } .kushan{ font-family: 'Kaushan Script', cursive; } /*section heading css*/ .section_heading { text-align: center; margin-bottom: 5rem; } .section_heading h4 { text-transform: capitalize; font-size: 25px; margin-bottom: 0.5rem; } .section_heading h3 { text-transform: uppercase; font-weight: 700; font-size: 28px; margin-bottom: 1rem; } .section_line { width: 60px; height: 2px; background: #f38181; margin: 0 auto; margin-bottom: 2rem; } .section_heading p { text-transform: capitalize; font-size: 14px; font-weight: 300; width: 70%; margin: 0 auto; } /* body css*/ /*header css*/ .header { background: linear-gradient(rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9)), url('img/bg-header.jpg'); background-position: center center; background-repeat: no-repeat; background-repeat: cover; } .top_header { margin-bottom: 4rem; } .logo_area a { color: white; font-weight: 700; font-size: 25px; text-decoration: none; } .logo_area { margin-top: 8px; } .nav_links { width: 87%; float: left; text-align: right; margin-top: 1.2rem; } .cart_nav { width: 12%; float: right; text-align: right; } .nav_links ul li { display: inline-block; margin: 0 1rem; position: relative; } .nav_links ul li::after { content: ""; background: #fce38a; width: 0; height: 4px; position: absolute; left: 0; top: 124%; transition: 0.2s; } .nav_links ul li:hover::after, .nav_links ul li.active::after{ width: 100%; } .nav_links ul li:hover a, .nav_links ul li.active a{ color: #fce38a; transition: 0.2s; } .nav_links ul li a { color: white; font-weight: 500; text-transform: uppercase; font-size: 15px; text-decoration: none; } .cart_nav { margin-top: 20px; } .cart_nav ul li { display: inline-block; margin-right: 2rem; } .cart_nav ul li a { color: white; text-decoration: none; } .cart_nav ul li:hover a{ color: #fce38a; } .manu_bar_list { display: none !important; } /*bottom header & the header slider*/ #mogo_slider { padding-bottom: 1rem; } #mogo_slider .carousel-indicators { width: 100%; margin: 0; position: static; margin-top: 80px; } #mogo_slider .carousel-inner { text-align: center; } .item_text { color: white; font-size: 70px; text-transform: capitalize; } .item_text span { font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 100px; font-weight: 700; } .mogo_btn { text-transform: uppercase; color: white; font-size: 16px; font-weight: 400; border: 2px solid white; padding: 6px 10px; } .mogo_btn:hover{ color: white; text-decoration: none; } #mogo_slider .carousel-indicators li { text-indent: initial; width: 25%; margin: 0 1rem; height: auto; background: none; border: none; } #mogo_slider .carousel-inner { height: 24rem; } #mogo_slider .mogo_line { width: 90px; height: 2.5px; background: white; margin: 0 auto; margin-bottom: 1.5rem; } #mogo_slider .carousel-indicators li:hover .controller, #mogo_slider .carousel-indicators li.active .controller { color: rgb(255, 255, 255); } #mogo_slider .controller { color: white; text-transform: uppercase; font-size: 15px; font-weight: 500; border-top: 2px solid white; padding-top: 0.7rem; position: relative; } #mogo_slider .controller span { font-size: 20px; margin-right: 3px; font-weight: 700; } #mogo_slider .carousel-indicators li:hover .controller::after, #mogo_slider .carousel-indicators li.active .controller::after { content: ""; position: absolute; background: #f38181; width: 32%; height: 2px; top: -3%; left: 0; transition: 0.2s; } /*search form*/ #search_form { position: fixed; top: -100%; background: black; width: 100%; height: 100%; left: 0; transition: 0.3s; z-index: 9999999999; } .mogo_serch input { width: 98%; margin-left: 1rem; margin-top: 18rem; background: transparent; border: none; color: white; font-size: 64px; text-transform: capitalize; font-weight: 700; position: relative; border-bottom: 1px solid #ffffff78; } .mogo_search_icon { position: absolute; top: 8%; right: 4%; color: #ffffffc4; font-size: 40px; cursor: pointer; } .mogo_search_icon:hover{ color: white; } #search_form.open{ top: 0; } /*about section*/ .about_section { padding: 110px 0; } .about_content { background: #95e1d3; cursor: pointer; } .about_img img { width: 100%; } .about_img { position: relative; left: 0; top: 0; transition: 0.3s; } .about_hover { position: absolute; top: 0; background: linear-gradient(rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9)); width: 100%; height: 100%; text-align: center; padding-top: 6rem; opacity: 0; transition: 0.3s; } .about_hover svg { display: block; margin: 0 auto; margin-bottom: .5rem; color: white; font-size: 20px; } .about_hover span { text-transform: uppercase; font-size: 17px; font-weight: 700; color: white; } .about_content:hover .about_img{ top: -10px; left: -10px; } .about_content:hover .about_hover{ opacity: 1; } /*counter section*/ .counting_section { background: #95e1d3; } .counting_content { display: flex; text-align: center; } .counting_item { flex-basis: 20%; border-right: 1px solid white; padding: 2rem 0; } .counting_item.counting_left_border { border-left: 1px solid white; } .number { font-size: 65px; color: white; font-weight: 600; } .counting_text { text-transform: uppercase; font-size: 16px; color: white; font-weight: 500; } /*service section*/ .service { padding: 80px 0; } .top_service { border-bottom: 1px solid #00000038; margin-bottom: 4rem; padding-bottom: 3rem; } .service_icon { width: 15%; float: left; margin-top: 2px; } .service_content { width: 85%; float: left; } .service_icon svg { color: #95e1d3; font-size: 30px; } .service_content h2 { font-size: 20px; text-transform: uppercase; font-weight: 400; margin-bottom: 0.8rem; } .service_content p { color: black; font-weight: 300; } /*unique section*/ .unique_section { background-image: url(img/bg-unique-design.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; text-align: center; padding-top: 75px; height: 43rem; } .unique_fiure img { width: 16%; margin-top: -19rem; margin-left: 26rem; } .unique_gallery img { width: 32%; } /*what we section*/ .what_we { padding: 139px 0; } .what_we .what_figure img { width: 100%; } .what_we .btn.btn-link.test_btn { background: white; width: 100%; text-align: left; padding: 12px 0px; border-radius: 0; text-decoration: none; position: relative; } .what_we .testi_body { height: 175px; width: 100%; font-style: italic; font-size: 16px; } .what_we .card-header { padding: 0; } .what_we .btn.btn-link.test_btn .testi_arrow { position: absolute; font-size: 25px; right: 2%; top: 30%; color: #00000070; transform: rotate(-180deg); transition: 0.3s; } .what_we .btn.btn-link.test_btn.collapsed .testi_arrow{ transform: rotate(0deg); transition: 0.3s; } .what_we .btn.btn-link.test_btn .testi_icon { width: 10%; float: left; color: #95E1D3; font-size: 23px; } .what_we .btn.btn-link.test_btn p { width: 90%; float: left; color: black; text-transform: uppercase; font-weight: 300; padding: 0px 10px; font-size: 16px; } .what_we .card.testi_card { margin-bottom: 8px; } .what_we .mCS-default .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .what_we .mCS-default .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .what_we .mCS-default .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background: #95e1d3; } .mCSB_scrollTools .mCSB_draggerRail { background: #f5f5f5; } /*testimonial section*/ .testimonial { padding: 50px 0; background-color: #F8F8F8; } .slider_icon { width: 11%; float: left; font-size: 65px; border: 2px solid #95e1d3; text-align: center; padding: 5px 0; margin-right: 2rem; color: #95e1d3; } .slider_content { width: 85%; float: left; } .slider_content p { font-style: italic; font-size: 18px; } .slider_line { width: 6%; height: 3px; background: #f38181; float: left; margin-top: 1.2rem; } .slider_content h5 { width: 90%; float: left; margin-top: 0.5rem; margin-left: 1rem; text-transform: capitalize; } .testimonial .unslider-arrow.prev { margin-left: -4rem; margin-top: -4.5rem; font-size: 25px; color: #00000045; } .testimonial .unslider-arrow.next { margin-right: -4rem; margin-top: -4.5rem; font-size: 25px; color: #00000045; } /*team section*/ .team_section { padding: 70px 0; } .team_content { background: #95e1d3; cursor: pointer; } .team_img { position: relative; left: 0; top: 0; transition: 0.3s; } .team_hover { position: absolute; top: 0; left: 0; width: 100%; background: linear-gradient(rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9)); height: 100%; text-align: center; padding-top: 13rem; opacity: 0; transition: 0.3s; } .team_img img { width: 100%; } .team_hover ul li { display: inline-block; background: #fce38a; width: 40px; height: 40px; padding-top: 5px; margin: 0 -1px; cursor: pointer; transition: 0.3s; } .team_hover ul li a { color: #f38181; font-size: 23px; } .team_text { text-align: center; margin-top: 2rem; } .team_text h4 { text-transform: uppercase; font-weight: 600; font-size: 22px; } .team_text span { font-style: italic; text-transform: capitalize; font-size: 15px; } .team_content:hover .team_img{ left: -10px; top: -10px; } .team_content:hover .team_hover{ opacity: 1; } .team_hover ul li:hover{ background: #f38181; } .team_hover ul li:hover a{ color: white; } /*brand section*/ .brand_section { background: #F8F8F8; padding: 50px 0; } .bran_img a img{ transition: 0.3s; } .bran_img a img:hover { transform: scale(1.1,1.1); } /*portfolio section*/ .portfolio { padding: 70px 0; } .port_grd_item { width: 25%; float: left; background: #fff; position: relative; } .portfolio_grid a img { width: 100%; } .portfolio_grid a{ position: relative; display: block; overflow: hidden; } .port_hover { position: absolute; width: 100%; height: 100%; background: linear-gradient(rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9)); } .port_hover_content { position: absolute; top: 50% !important; left: 50% !important; text-align: center; transform: translate(-50%, -50%); } .port_hover_content svg { color: white; font-size: 30px; margin-bottom: 0.6rem; } .port_hover_content h5 { color: white; text-transform: uppercase; font-weight: 400; font-size: 18px; margin-bottom: 8px; } .port_hover_content p { color: white; text-transform: capitalize; font-style: italic; font-size: 13px; } .slider_img { width: 16%; float: left; } .slider_content.slider_content_2 { width: 80%; float: left; margin-left: 2rem; } .slider_img img { width: 100%; border-radius: 50%; } .testimonial_2 .unslider-arrow.next { margin-top: -6.5rem; } .testimonial_2 .unslider-arrow.prev { margin-top: -6.5rem; } /*happy section*/ .happy_section { background-image: url('img/bg-happy-client.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 50px 0; } .happy_img { width: 17%; float: left; } .happy_img img { width: 100%; border-radius: 50%; } .happy_content { width: 77%; float: left; margin-left: 2rem; } .single_happy { margin-bottom: 15rem; } .happy_content h5 { text-transform: uppercase; font-weight: 300; font-size: 19px; margin-bottom: 0.6rem; color: black; } .happy_content span { text-transform: capitalize; font-size: 15px; font-style: italic; color: #000000a1; font-weight: 400; } .happy_line_2 { width: 61px; height: 3px; background: #F28989; margin: 1rem 0; } .happy_content p { color: #0000009c; font-weight: 300; font-size: 15px; } /*blog section*/ .blog_section { padding: 70px 0; } .blog_img img { width: 100%; } .blog_img { position: relative; cursor: pointer; } .blog_date { position: absolute; top: 55%; left: -3%; background: #95E1D3; padding: 20px 15px; font-size: 35px; font-weight: 600; line-height: 0.6; text-align: center; color: white; } .blog_date span { font-size: 15px; text-transform: capitalize; font-style: italic; } .blog_content { border-bottom: 1px solid #00000030; padding: 2px; margin-top: 1rem; padding-bottom: 0.8rem; } .blog_content h5 { color: #95e1d3; margin-bottom: 0.6rem; text-transform: capitalize; font-size: 19px; cursor: pointer; transition: 0.3s; font-weight: 300; } .blog_content p { font-size: 15px; color: #000000a3; } .eye_icon { width: 23%; float: left; margin-top: 1rem; } .meesage_icon_blog{ width: 23%; float: left; margin-top: 1rem; } .eye_icon svg, .meesage_icon_blog svg { margin-right: 3px; color: #95e1d3; } .eye_icon a, .meesage_icon_blog a { color: #0000005e; font-size: 16px; text-decoration: none; transition: 0.3s; } .blog_content h5:hover { color: rgba(0, 0, 0, 0.42); } .eye_icon a:hover, .meesage_icon_blog a:hover{ color: black; } .blog_img:hover .blog_date { animation: bounceIn; animation-duration: 0.7s; } /*map section*/ .map { background-image: url('img/bg-map.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 60px 0; text-align: center; } .map_heading{ cursor: pointer; } .map_heading svg { display: block; margin: 0 auto; margin-bottom: 1rem; font-size: 55px; color: #f38181; } .map_heading span { text-transform: uppercase; font-size: 30px; font-weight: 600; color: #f38181; } .map_line { width: 75px; height: 4px; background: #f38181; margin: 0 auto; margin-top: 1rem; } .googleMap { margin-top: 2rem; visibility: hidden; height: 0; } .showMap .googleMap { visibility: visible; height: auto !important; } .googleMap iframe{ width: 100%; } /*top footer section*/ .top_footer { padding: 60px 0; } .footer_logo a { color: #0000004d; font-weight: 700; font-size: 38px; text-decoration: none; } .single_footer p { margin-top: 1rem; margin-bottom: 1rem; font-size: 14px; color: #000000b5; } .followers p { color: black; font-size: 18px; font-weight: 600; margin-bottom: 0; } .followers p span { font-weight: 300; } .followers { border-bottom: 1px solid #0000003d; padding-bottom: 8px; } .footer_nav { margin-top: 1rem; margin-bottom: 2rem; } .footer_nav ul li { display: inline-block; margin: 0 6px; font-style: italic; text-transform: capitalize; font-size: 14px; } .footer_nav ul li a { color: #95e1d3; text-decoration: none; font-size: 18px; } .footer_search{ position: relative; } .footer_input { width: 69%; border: 1px solid #0000003b; padding: 7px 10px; font-size: 16px; font-style: italic; } .footer_btn { position: absolute; top: -0.8%; background: #95e1d3; border: navajowhite; font-size: 18px; text-transform: uppercase; padding: 7px 5px; color: white; font-weight: 600; right: -2%; } .single_footer h4 { text-transform: uppercase; font-weight: 300; font-size: 20px; color: #000000c4; margin-bottom: 3rem; } .footer_blog_img { width: 30%; float: left; } .footer_blog_img img { width: 100%; } .footer_blog_content { width: 65%; float: left; margin-left: 15px; line-height: 1; margin-bottom: 2.6rem; } .footer_blog_content p { margin-top: 0; color: #95e1d3; transition: 0.3s; cursor: pointer; } .footer_blog_content span { font-size: 13px; font-style: italic; } .footer_blog_content p:hover { color: #00000080; } .footer_insta_img { width: 24%; float: left; margin-left: 1px; margin-bottom: 1px; } .footer_insta_img img { width: 100%; } .footer_insta_text { margin-top: 19.1rem; } .footer_insta_text a { text-transform: capitalize; font-size: 12px; font-style: italic; color: #00000078; text-decoration: none; transition: 0.3s; } .footer_insta_text a:hover { color: black; } /*bottom footer*/ .bottom_footer { padding: 20px 0; margin-top: -55px; text-align: center; } .copyright_text p { text-transform: capitalize; font-size: 15px; } .copyright_text a { color: #ADCC83; text-decoration: none; } .sticky_nav { position: fixed; left: 0; top: 0; width: 100%; background: #F28989E8; z-index: 1; animation-name: fadeInDown; animation-duration: 0.5s; padding-bottom: 15px; } .sticky_nav .logo_area { margin-left: 7.5rem; } .sticky_nav .manu_area { margin-right: 6.9rem; margin-top: -5px; } /*mogo go button*/ #mogo_goto { position: fixed; bottom: 5%; right: 2%; background: #F38181; padding: 8px 15px; display: none; border-radius: 50%; animation: bounce 3000ms infinite; } #mogo_goto a svg { color: white; font-size: 35px; }