style.css

/*Common Css for all Document*/ body{ font-family: 'Montserrat', sans-serif; overflow-x: hidden; } p{ font-family: 'Open Sans', sans-serif; } body, h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } a:foucs{ outline: none; border: none; } /* Css For Header Section */ nav { position: fixed; top: 0; left: 0; width: 100%; background: #96CDDA; z-index: 999999; height: auto; } .nav-menu { text-align: center; transition: 0.3s ease; } .nav-menu li { display: inline-block; margin: 0 10px; } .nav-menu li a { font-weight: 600; color: white; font-size: 15px; } .nav-menu li a img { width: 65%; transition: 0.3s cubic-bezier(0.545, 0, 0.05, 1); } .hero-section { background: #96CDDA; padding-top: 10.8em; } .hero-text { font-weight: 700; font-size: 3em; text-transform: uppercase; line-height: 1.2; color: white; padding-top: 6rem; margin-left: 3rem; } .hero-img { width: 370px; margin-left: auto; } .hero-img img { width: 100%; height: 100%; } .down-arrow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scale(0.7); } .sticky_nav { box-shadow: 0 0 10px #31B2D0; } .sticky_nav .nav-menu li a img { width: 35%; } /* CSS for About Section */ .about-section { background: #C2E7C6; padding: 4rem 0; } .about-text { text-align: center; width: 70%; margin: 0 auto; margin-bottom: 2rem; } .about-text h6 { font-weight: 600; color: #455A43; line-height: 1.4; } .about-box { display: flex; text-align: center; } .about-column { flex-basis: 20%; margin: 0 11px; } .about-column img { width: 75px; height: auto; margin-bottom: 20px; } .about-column h5 { font-weight: 600; font-size: 17px; margin-bottom: 10px; color: #455a43; } /* CSS for Service Section */ .service-section { background: #C2E7C6; padding-top: 3rem; } .section-heading { text-align: center; margin-bottom: 4rem; } .section-heading h3 { font-weight: 600; color: #4a4a4a; text-transform: uppercase; font-size: 22px; margin-bottom: 10px; } .section-heading p { color: black; } .service-box { display: flex; align-items: center; margin-bottom: 10rem; } .service-content { margin-right: 15em; } .service-content-middle{ margin-right: 0; margin-left: 15em; } .service-content h5 { width: max-content; padding: 6px 10px; font-weight: 500; color: white; text-transform: uppercase; font-size: 17px; border-radius: 3px; margin-bottom: 1.5rem; } .color-yellow { background: #ffce45; } .color-sky { background: #49a0ae; } .color-green { background: #22c48a; } .service-content h3 { color: #4a4a4a; font-size: 22px; font-weight: 600; margin-bottom: 1.5rem; } .service-content a { color: white; background: #f70135; padding: 3px 12px; display: block; margin-top: 1.5rem; width: max-content; font-weight: 600; border-radius: 3px; } .service-image { position: relative; } .service-icon-image { width: 200px; height: 200px; border-radius: 50%; border: 5px solid white; } .service-icon { position: absolute; width: 80px; top: 50%; left: -35px; transform: translateY(-50%); } .service-icon-middle { left: unset; right: -35px; } .service-bottom-image img { width: 100%; height: 100%; } .service-bottom-image { width: 60%; margin: 0 auto; } .position-marker { position: relative; } .timeline-divider { position: absolute; left: -32px; top: 0; height: 100%; border-left: 8px dotted red; width: 0; } .timeline-run { position: sticky; top: 80px; margin-left: -26px; margin-top: -20px; } .timeline-run img { width: 45px; } /* CSS for work Section */ .work-section { background: #FBE6AC; padding: 3rem 0; } .work-box { display: flex; } .work-box .work-title { flex-basis: 43%; display: flex; align-items: center; text-align: right; } .work-box .work-title.right { text-align: left; } .work-box .work-icon { flex-basis: 14%; text-align: center; margin: 0 3rem; border-bottom: 8px solid #d70531; box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative; } .work-box .work-icon::after { content: ""; width: 20px; height: 20px; position: absolute; transform: rotate(180deg); left: -9px; top: 50%; transform: translateY(-30%) rotate(135deg); } .work-box .work-icon.right::after { left: unset; right: -9px; } .work-box p { flex-basis: 43%; text-align: right; } .work-box p.right{ text-align: left; } .work-title p { font-weight: 700; flex-basis: 62%; font-size: 45px; font-style: italic; margin-top: -5px; } .work-title.right p { text-align: left; } .work-title h5 { flex: 1; font-weight: 600; font-size: 20px; } .work-color-red {color: #f70135;} .work-color-red-bg{background: #f70135; border-bottom-color: #d70531 !important;} .work-box .work-icon.work-color-red-bg::after {background: #f70135;} .work-color-yellow {color: #ffce45;} .work-color-yellow-bg{background: #ffce45; border-bottom-color: #e1a62c !important;} .work-box .work-icon.work-color-yellow-bg::after {background: #ffce45;} .work-color-green {color: #08b250;} .work-color-green-bg{background: #08b250; border-bottom-color: #038a3c !important;} .work-box .work-icon.work-color-green-bg::after {background: #08b250;} .work-color-blue {color: #098ce5;} .work-color-blue-bg{background: #098ce5; border-bottom-color: #045d99 !important;} .work-box .work-icon.work-color-blue-bg::after {background: #098ce5;} .work-color-purple {color: #9a22cd;} .work-color-purple-bg{background: #9a22cd; border-bottom-color: #6c0996 !important;} .work-box .work-icon.work-color-purple-bg::after {background: #9a22cd;} /* CSS for fact section */ .fact-section { background: #C8BEE1; color: white !important; padding: 3rem 0; } .fact-box { display: flex; } .single-fact { flex: 1; text-align: center; background: red; padding: 3rem 0; } .single-fact h4 { font-weight: 600; font-size: 30px; margin-bottom: 5px; } .single-fact p { text-transform: uppercase; font-size: 14px; margin-bottom: 2rem; } .fact-red {background: #f70135;} .fact-black {background: #2c3e50;} .fact-green {background: #08b250;} .fact-blue {background: #098ce5;} .fact-purple {background: #9a22cd;} /* CSS for Team Section */ .client-section { background: #C8BEE1; padding: 3rem 0; } .client-content { display: flex; position: relative; margin-top: 5em; } .client-left { margin-right: 3rem; margin-top: 3rem; } .client-right { margin-left: 3rem; } .single-client { display: flex; background: white; align-items: center; margin-bottom: 20px; position: relative; } .single-client::before { content: ""; width: 20px; height: 20px; position: absolute; background: white; top: 18px; right: -9px; transform: rotate(-135deg); } .client-right .single-client::before{ right: unset; left: -9px; } .single-client::after { content: ""; width: 15px; height: 15px; background: white; position: absolute; border-radius: 50%; box-sizing: border-box; border: 2px solid red; top: 20px; right: 0px; z-index: 9; transform: translateX(365%); } .client-right .single-client::after{ right: unset; left: 0px; transform: translateX(-365%); } .client-information { padding: 15px; } .client-information h5 { font-size: 18px; font-weight: 600; margin-bottom: 3px; } .client-information h6 { font-size: 13px; color: #f62d19; font-weight: 500; margin-bottom: 10px; } .social-icon ul li { display: inline-block; } .social-icon { margin-top: 10px; } .social-icon ul li a { padding: 8px; display: flex; width: 30px; height: 30px; border-radius: 3px; color: white; } .social-icon ul li a.twitter{background: #3dc7ff;} .social-icon ul li a.facebook{background: #3384e9;} .social-icon ul li a.google{background: #f62d19;} .social-icon ul li a.pinterest{background: #ee0010;} .social-icon ul li a.linkedin{background: #43bdff;} .social-icon ul li a.dribble{background: #ff72bc;} .social-icon ul li a.behance{background: #139af1;} .client-content::after { content: ""; width: 2px; height: 100%; position: absolute; background: red; top: 0; left: 50%; transform: translateX(-50%); } .client-shirt { position: absolute; top: -106px; left: 50%; transform: translateX(-50%); width: 85px; z-index: 9; } .client-shirt img { width: 100%; height: 100%; } .team-button { background: red; color: white !important; position: absolute; bottom: -23px; left: 50%; transform: translateX(-50%); z-index: 99; padding: 2px 10px; display: block; border-radius: 3px; font-size: 15px; font-weight: 500; } /* CSS for portfolio section */ .portfolio-section { background: #ffcad5; padding: 3rem 0; } .controls { text-align: center; margin-bottom: 3rem; } .control { margin: 0 10px; background: #f70135; border: none; outline: none; color: white; font-size: 15px; padding: 4px 12px; border-radius: 3px; } .mixit-tab div { display: inline-block; width: 19.7%; margin: 2px 0; } .mix img { width: 100%; height: 100%; } /* CSS for testimonial Section */ .testimonial-section { background: #C8BEE1; padding: 3rem 0; } .carousel-indicators{ position: unset; } .carousel-indicators button img { width: 100%; height: 100%; border-radius: 100%; } .carousel-indicators button { border: none; width: 100px !important; height: 100px !important; border-radius: 50% !important; text-indent: initial !important; box-sizing: border-box !important; margin: 0 0px !important; transform: scale(0.8); outline: none; transition: all 0.97s cubic-bezier(0.545, 0, 0.05, 1) !important; } .carousel-indicators .active { opacity: 1; transform: scale(1); } .word-quotation { text-align: center; margin-bottom: 1rem; } .word-quotation img { width: 60px; } .carousel-item p { text-align: center; margin-bottom: 1rem; } .carousel-item h5 { text-align: center; font-weight: 600; font-size: 18px; } /* CSS for Footer */ .footer { background: #FBE6AC; padding: 3rem 0; } .input-box { width: 49%; float: left; margin: 0px 5px; } .input-box input, .text-box textarea { width: 100%; margin: 5px 0; border: 1px solid #0000001c; padding: 7px 10px; font-size: 15px; } .text-box, .form-button { margin: 0 5px; } .form-button button { background: #f70135; border: none; width: 100%; margin-top: 10px; color: white; font-size: 17px; font-weight: 600; padding: 5px 0; border-radius: 3px; } .address-book { display: flex; margin-top: 2rem; } .address-box { flex: 1; text-align: center; } .address-box img { margin-bottom: 1rem; } .address-box h5 { font-size: 15px; color: #ffc82c; text-transform: uppercase; letter-spacing: 2px; } /* CSS for Bottom Footer */ .bottom-footer { background: #212524; padding: 3rem 0; } .social-media { text-align: center; } .social-media ul li { display: inline-block; margin: 0 15px; } .social-media ul li a { font-size: 30px; color: white; } .copyright { background: #101010; padding: 1rem 0; } .copyright-text { text-align: center; } .copyright-text p { color: yellow; font-size: 15px; }