/*----------------------------------------------------------------------------------- Template Name: Rekklam Feresi Web Template URI: mulloway Author URI: https://reklamfaresi.com Version: 1.0 -------------------------- CSS INDEX -------------------------- 01. Common css 02. Header css 03. Hero css 04. About css 05. Features css 06. Service css 07. Project css 08. Gallery css 09. Team css 10. Testimonial css 11. Faqs css 12. Pricing css 13. Shop css 14. Blog css 15. Contact css 16. Footer css 17. Sections css -----------------------------------------------------------------------------------*/ .package-box { cursor: pointer; border: 2px solid #dee2e6; padding: 10px; margin: 5px; text-align: center; transition: all 0.3s ease; position: relative; } .package-box:hover, .package-box.active { background-color: #80808033; color: white; border-color: #808080ab; } .package-box img { max-width: 100%; width:600px; height: 100%; } .package-box h6 { position: absolute; left: 50%; transform: translate(-50%, -50%); color: #6c757d; font-size: 14px; line-height: 1; white-space: nowrap; } @media (max-width: 768px) { .package-box h6 { font-size: 12px; } } .form-select { width: 100%; background-color: #fff; border: 1px solid #ced4da; border-radius: 5px; padding: 3px 15px; font-size: 16px; color: #495057; transition: all 0.3s ease; } .form-select:hover { background-color: #e9ecef; border-color: #495057; color: #212529; } .form-select:focus { outline: none; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); border-color: #007bff; } .form-select:disabled { background-color: #e9ecef; color: #6c757d; border-color: #ced4da; } .form-select { appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,'); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; } h1, h2, h3, .hero-content .sub-title, h4, h5, .comments-area .comment .comment-wrap .comment-author-content span.author-name, h6, .main-btn.filled-btn, .btn-link, .hero-slider-two .slick-arrow:hover, .client-quote-box .text h2.number, .sidebar-widget-area .widget-newsletter .sidebar-content .form_control::-webkit-input-placeholder, .sub-title, .btn-link:hover, .header-navigation.breakpoint-on .nav-search .search-btn, .header-one .header-navigation .main-menu ul > li .search-btn, .header-two .header-navigation.sticky .main-menu ul > li > a, .header-two .header-navigation.sticky .nav-right-item .lang-dropdown .nice-select, .header-three .header-navigation .nav-right-item .nice-select ul.list li, .about-two_content-box .about-inner-content .experience-box-two h6, .about-features-item .icon, .circle-logo .inner-circle i, .features-thumb-item .content .icon i, .features-thumb-item .content .icon-btn, .features-thumb-item-two .text .icon i, .single-features-item .icon i, .single-features-item .text h5.title, .features-list li, .single-category-item .icon i, .single-service-item .service-info .icon i, .project-filter li, .single-project-item-three .project-img .icon-btn, .project-details-wrapper .project-info-widget .info-content ul li span, .single-gallery-item .gallery-img .hover-overlay .icon-btn, .team-details-wrapper .member-info .member-meta .member-contact-info p, .team-details-wrapper .member-info .member-meta .member-contact-info ul.social-link li a, .single-pricing-item:hover .pricing-body .pricing-button .main-btn, .product-details-wrapper .product-info .product-meta li span, .product-details-wrapper .product-info ul.social-link li span, .sidebar-widget-area .widget-search form .form_control::-webkit-input-placeholder, .sidebar-widget-area .widget-service-nav ul li a, .sidebar-widget-area .widget-tag-cloud a, .sidebar-widget-area .widget-price-filter .price-number input, .gadden-pagination li a, .single-information-item .icon, .single-info-item.style-three .info span, .single-info-item.style-three .info h4.title, .footer-experience-widget .experience-box-two h2.number, .footer-gallery-widget .gallery-list li a .hover-overlay i { color: #4979ff; } h1, h2, h3, .hero-content .sub-title, h4, h5, .comments-area .comment .comment-wrap .comment-author-content span.author-name, h6, .main-btn.filled-btn, .btn-link, .hero-slider-two .slick-arrow:hover, .client-quote-box .text h2.number, .sidebar-widget-area .widget-newsletter .sidebar-content .form_control:-ms-input-placeholder, .sub-title, .btn-link:hover, .header-navigation.breakpoint-on .nav-search .search-btn, .header-one .header-navigation .main-menu ul > li .search-btn, .header-two .header-navigation.sticky .main-menu ul > li > a, .header-two .header-navigation.sticky .nav-right-item .lang-dropdown .nice-select, .header-three .header-navigation .nav-right-item .nice-select ul.list li, .about-two_content-box .about-inner-content .experience-box-two h6, .about-features-item .icon, .circle-logo .inner-circle i, .features-thumb-item .content .icon i, .features-thumb-item .content .icon-btn, .features-thumb-item-two .text .icon i, .single-features-item .icon i, .single-features-item .text h5.title, .features-list li, .single-category-item .icon i, .single-service-item .service-info .icon i, .project-filter li, .single-project-item-three .project-img .icon-btn, .project-details-wrapper .project-info-widget .info-content ul li span, .single-gallery-item .gallery-img .hover-overlay .icon-btn, .team-details-wrapper .member-info .member-meta .member-contact-info p, .team-details-wrapper .member-info .member-meta .member-contact-info ul.social-link li a, .single-pricing-item:hover .pricing-body .pricing-button .main-btn, .product-details-wrapper .product-info .product-meta li span, .product-details-wrapper .product-info ul.social-link li span, .sidebar-widget-area .widget-search form .form_control:-ms-input-placeholder, .sidebar-widget-area .widget-service-nav ul li a, .sidebar-widget-area .widget-tag-cloud a, .sidebar-widget-area .widget-price-filter .price-number input, .gadden-pagination li a, .single-information-item .icon, .single-info-item.style-three .info span, .single-info-item.style-three .info h4.title, .footer-experience-widget .experience-box-two h2.number, .footer-gallery-widget .gallery-list li a .hover-overlay i { color: #4979ff; } h1, h2, h3, .hero-content .sub-title, h4, h5, .comments-area .comment .comment-wrap .comment-author-content span.author-name, h6, .main-btn.filled-btn, .btn-link, .hero-slider-two .slick-arrow:hover, .client-quote-box .text h2.number, .sidebar-widget-area .widget-newsletter .sidebar-content .form_control::-ms-input-placeholder, .sub-title, .btn-link:hover, .header-navigation.breakpoint-on .nav-search .search-btn, .header-one .header-navigation .main-menu ul > li .search-btn, .header-two .header-navigation.sticky .main-menu ul > li > a, .header-two .header-navigation.sticky .nav-right-item .lang-dropdown .nice-select, .header-three .header-navigation .nav-right-item .nice-select ul.list li, .about-two_content-box .about-inner-content .experience-box-two h6, .about-features-item .icon, .circle-logo .inner-circle i, .features-thumb-item .content .icon i, .features-thumb-item .content .icon-btn, .features-thumb-item-two .text .icon i, .single-features-item .icon i, .single-features-item .text h5.title, .features-list li, .single-category-item .icon i, .single-service-item .service-info .icon i, .project-filter li, .single-project-item-three .project-img .icon-btn, .project-details-wrapper .project-info-widget .info-content ul li span, .single-gallery-item .gallery-img .hover-overlay .icon-btn, .team-details-wrapper .member-info .member-meta .member-contact-info p, .team-details-wrapper .member-info .member-meta .member-contact-info ul.social-link li a, .single-pricing-item:hover .pricing-body .pricing-button .main-btn, .product-details-wrapper .product-info .product-meta li span, .product-details-wrapper .product-info ul.social-link li span, .sidebar-widget-area .widget-search form .form_control::-ms-input-placeholder, .sidebar-widget-area .widget-service-nav ul li a, .sidebar-widget-area .widget-tag-cloud a, .sidebar-widget-area .widget-price-filter .price-number input, .gadden-pagination li a, .single-information-item .icon, .single-info-item.style-three .info span, .single-info-item.style-three .info h4.title, .footer-experience-widget .experience-box-two h2.number, .footer-gallery-widget .gallery-list li a .hover-overlay i { color: #4979ff; } h1, h2, h3, .hero-content .sub-title, h4, h5, .comments-area .comment .comment-wrap .comment-author-content span.author-name, h6, .main-btn.filled-btn, .btn-link, .hero-slider-two .slick-arrow:hover, .client-quote-box .text h2.number, .sidebar-widget-area .widget-newsletter .sidebar-content .form_control::placeholder, .sub-title, .btn-link:hover, .header-navigation.breakpoint-on .nav-search .search-btn, .header-one .header-navigation .main-menu ul > li .search-btn, .header-two .header-navigation.sticky .main-menu ul > li > a, .header-two .header-navigation.sticky .nav-right-item .lang-dropdown .nice-select, .header-three .header-navigation .nav-right-item .nice-select ul.list li, .about-two_content-box .about-inner-content .experience-box-two h6, .about-features-item .icon, .circle-logo .inner-circle i, .features-thumb-item .content .icon i, .features-thumb-item .content .icon-btn, .features-thumb-item-two .text .icon i, .single-features-item .icon i, .single-features-item .text h5.title, .features-list li, .single-category-item .icon i, .single-service-item .service-info .icon i, .project-filter li, .single-project-item-three .project-img .icon-btn, .project-details-wrapper .project-info-widget .info-content ul li span, .single-gallery-item .gallery-img .hover-overlay .icon-btn, .team-details-wrapper .member-info .member-meta .member-contact-info p, .team-details-wrapper .member-info .member-meta .member-contact-info ul.social-link li a, .single-pricing-item:hover .pricing-body .pricing-button .main-btn, .product-details-wrapper .product-info .product-meta li span, .product-details-wrapper .product-info ul.social-link li span, .sidebar-widget-area .widget-search form .form_control::placeholder, .sidebar-widget-area .widget-service-nav ul li a, .sidebar-widget-area .widget-tag-cloud a, .sidebar-widget-area .widget-price-filter .price-number input, .gadden-pagination li a, .single-information-item .icon, .single-info-item.style-three .info span, .single-info-item.style-three .info h4.title, .footer-experience-widget .experience-box-two h2.number, .footer-gallery-widget .gallery-list li a .hover-overlay i { color: #4979ff; } .header-navigation .main-menu ul > li .sub-menu li a:hover, .header-navigation .main-menu ul > li .sub-menu li:hover > a, .header-navigation .main-menu ul > li:hover > a, .header-top-bar .top-right ul.social-link li a:hover, .header-top-bar-two .top-left span b, .header-top-bar-two .top-left span i, .header-top-bar-two .top-left span:hover a, .header-top-bar-two .top-right .social-link li a:hover, .header-one .header-navigation .main-menu ul > li .search-btn:hover, .header-two .header-navigation.sticky .main-menu ul > li .sub-menu li a:hover, .header-two .header-navigation .main-menu ul > li:hover > a, .header-three .header-navigation .nav-right-item .menu-button .main-btn.secondary-btn:hover, .navigation-white.header-navigation .main-menu ul > li:hover > a, .hero-play .video-popup, .about-two_content-box .about-inner-content .experience-box-two h2.number, .fancy-about-item .text h5 i, .experience-box .btn-link, .experience-box-two h6, .fancy-icon-box .icon i, .fancy-icon-box-two .icon i, .single-process-item .icon, .cta-two_content-box h4, .single-service-item .service-info h4.title:hover, .navigation-item .text h3.title:hover, .project-filter li:hover, .project-filter li.active, .single-project-item-four .project-img .project-content .text h3.title:hover, .single-team-item .member-info h3.title:hover, .team-details-wrapper .member-info .member-meta .member-contact-info p a:hover, .single-pricing-item .pricing-body ul li i, .single-pricing-item-two .pricing-body ul li i, .single-product-item .product-info h4:hover, .product-details-wrapper .product-info ul.ratings li a:hover, .product-details-wrapper .product-info span.price, .product-details-wrapper .product-info .product-meta li a:hover, .product-details-wrapper .product-info ul.social-link li a, .checkout-faqs .alert h6 a:hover, .post-meta span:hover, .single-blog-post .entry-content .cat-link:hover, .single-blog-post .entry-content h4.entry-title:hover, .single-blog-post-two .entry-content .author h6:hover a, .single-blog-post-two .entry-content h4.entry-title:hover, .single-blog-post-three .entry-content .author h6:hover a, .single-blog-post-three .entry-content h3.title:hover, .single-blog-post-four .entry-content h4.entry-title:hover, .single-blog-post-four .entry-content .btn-link:hover, .blog-details-wrapper .blog-post .entry-footer .social-share a:hover, .post-author-box .author-content ul.social-link li a:hover, .post-navigation-item .post-nav-item .content h6:hover, .post-navigation-item .post-nav-item .content span.post-date:hover, .sidebar-widget-area .widget-recent-post .recent-post-list .post-thumbnail-content .post-title-date span.posted-on:hover, .sidebar-widget-area .widget-recent-post .recent-post-list .post-thumbnail-content .post-title-date h6:hover, .contact-info-item .info h6:hover a, .contact-info-item-two h6.title i, .single-information-item .info h5:hover a, .contact-info-widget .info-list li a:hover, .footer-nav-widget .footer-nav li a:hover { color: #0f0523; } .main-btn.golden-btn, .header-navigation .main-menu ul > li > a, .header-middle .menu-right-item span, .header-two .header-navigation .nav-right-item .lang-dropdown .nice-select .list li, .choose-content-box .thumb-content .check-style-one li, .features-thumb-item .content h5.title, .single-process-item .step, .single-counter-item p, .project-details-wrapper .project-info-widget .info-content h6, .single-team-item .member-img .icon-btn, .single-pricing-item .pricing-body h2.price span.duration, .single-pricing-item-two .pricing-body .pricing-title h2.price span.duration, .single-blog-post .entry-content .author-meta .author h6 span, .single-information-item .info span, .footer-experience-widget .experience-box-two h6 { color: #000000; } .text-white .sub-title, .social-box ul.social-link li a:hover, .single-testimonial-item-three .testimonial-inner-content ul.ratings li i, .single-testimonial-item-three .testimonial-inner-content .quote-title .title p.position, .single-info-item.style-two .info span, .sidebar-panel-wrapper .close:hover { color: #F1D2A9; } .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p, .main-btn, .main-btn.primary-btn, .main-btn.secondary-btn, .main-btn.golden-btn:hover, .main-btn.filled-btn:hover, .main-btn.filled-btn.filled-white, .back-to-top:hover, .back-to-top:focus, .header-navigation .main-menu ul > li .sub-menu li a, .header-navigation.breakpoint-on .nav-menu .main-menu ul li .dd-trigger, .header-two .header-navigation.sticky .main-menu ul > li .sub-menu li a, .header-two .header-navigation .main-menu ul > li > a, .header-three .header-navigation .nav-right-item .nice-select, .header-three .header-navigation .nav-right-item .search-btn, .navigation-white.header-navigation .main-menu ul > li > a, .hero-slider-two .slick-arrow, .hero-wrapper-two .hero-content span.sub-title, .hero-wrapper-two .hero-content h1, .hero-wrapper-two .hero-content p, .hero-wrapper-three .hero-content span.sub-title, .hero-wrapper-three .hero-content h1, .hero-wrapper-three .hero-content p, .about-features-item.item-active .text .btn-link, .about-features-item.item-active .text h3.title, .about-features-item.item-active .text p, .client-avatar-box-two .avatar-thumbs ul li .icon-btn, .features-thumb-item-two:hover .text .icon i, .fancy-icon-box-two:hover .shape.icon-shape i, .fancy-icon-box-two:hover .text h5.title, .fancy-icon-box-two:hover .text p, .single-process-item:hover .step, .single-process-item:hover .icon, .single-counter-item:hover .icon i, .social-box ul.social-link li a, .single-category-item:hover .icon i, .single-service-item .service-img .icon-btn i, .single-project-item-four .project-img .hover-content .number, .single-team-item:hover .member-img .icon-btn, .skill-image-box .circle-logo .inner-circle i, .skill-image-box .circle-logo .inner-circle h5, .team-details-wrapper .member-info .member-meta .member-contact-info .icon, .team-details-wrapper .member-info .member-meta .member-contact-info ul.social-link li a:hover, .single-testimonial-item-two .quote-rating-box .ratings-box h3, .single-pricing-item:hover .pricing-body .pricing-title h3.title, .single-pricing-item:hover .pricing-body ul li, .single-pricing-item:hover .pricing-body h2.price, .single-pricing-item:hover .pricing-body h2.price span.duration, .single-pricing-item:hover .pricing-body .pricing-button p, .single-pricing-item-two:hover .pricing-body .pricing-button .main-btn, .single-product-item .discount, .product-details-wrapper .product-info ul.social-link li a:hover, .blog-details-wrapper .blog-post .entry-footer .tag-links a:hover, .sidebar-widget-area .widget-post-author .author-content ul.social-link li a, .sidebar-widget-area .widget-service-nav ul li a:hover, .sidebar-widget-area .widget-tag-cloud a:hover, .gadden-pagination li a:hover, .contact-info-item-two h6.title, .single-info-item.style-one .info .main-btn.golden-btn:hover, .single-info-item.style-two .info .main-btn.golden-btn:hover, .footer-about-widget .widget-content form .submit-btn, .main-bg .single-counter-item-two h2.number, .main-bg .single-counter-item-two p, .main-bg .client-quote-box .icon i, .main-bg .client-quote-box .text h4, .main-bg .single-testimonial-item-three .testimonial-inner-content > p, .main-bg .single-testimonial-item-three .testimonial-inner-content .quote-title .title h6, .sidebar-panel-wrapper .close, .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget h4.title, .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget .social-item h6, .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget .social-item ul.social-link li a { color: #fff; } .main-bg, .main-btn.primary-btn, .main-btn.secondary-btn:hover, .main-btn.filled-btn.filled-white:hover, .header-navigation .main-menu ul > li .sub-menu, .header-navigation.breakpoint-on .nav-menu .main-menu ul li .dd-trigger, .header-top-bar-two .top-right .social-link li a:after, .header-one .header-navigation .nav-right-item .navbar-toggler span, .header-two .header-navigation .navbar-toggler span, ul.check-style-one li i, .experience-box-two .icon-btn, .client-avatar-box-two .avatar-thumbs ul li .icon-btn, .fancy-icon-box-two:hover, .single-process-item:hover .step, .single-process-item:hover .icon, .social-box ul.social-link, .single-category-item:hover .icon i, .project-filter li:after, .project-details-wrapper .project-info-widget .info-content h6:after, .team-details-wrapper .member-info .member-meta .member-contact-info ul.social-link li a:hover, .single-pricing-item:hover, .single-pricing-item-two:hover .pricing-body .pricing-button .main-btn, .single-product-item .discount, .single-blog-post .entry-content .cat-link:before, .single-blog-post .entry-content .author-meta .icon-btn, .sidebar-widget-area .sidebar-widget h4.widget-title:after, .sidebar-widget-area .widget-post-author .author-content ul.social-link li a, .sidebar-widget-area .widget-service-nav ul li a:hover, .sidebar-widget-area .widget-banner, .sidebar-widget-area .widget-tag-cloud a:hover, .sidebar-widget-area .widget-price-filter .ui-slider-range, .sidebar-widget-area .widget-price-filter .ui-slider-horizontal .ui-slider-handle, .single-info-item.style-one .info .main-btn.golden-btn:hover, .single-info-item.style-two, .gray-bg .footer-widget h4.widget-title:after, .footer-about-widget .widget-content form .submit-btn, .testimonial-wrapper-two { background-color:#344243; } .main-btn.primary-btn:hover, .main-btn.secondary-btn, .main-btn.golden-btn:hover, .main-btn.filled-btn:hover, .back-to-top:hover, .back-to-top:focus, .header-two .header-navigation .site-branding a.brand-logo, .choose-nav-tab .nav-link.active:after, .choose-content-box .thumb-content .check-style-one li i, .features-thumb-item-two:hover .text .icon, .single-counter-item:hover .icon, .single-service-item .service-img .icon-btn i, .service-info-wrapper ul.check-style-one li i, .single-project-item-two .project-img .project-overlay .hover-content, .single-project-item-three .project-img .hover-content, .project-details-wrapper ul.check-style-one li i, .single-team-item:hover .member-img .icon-btn, .single-skill-bar .progress-bar .progress, .skill-image-box .circle-logo, .team-details-wrapper .member-info .member-meta .member-contact-info .icon, ul.slick-dots li:after, .product-details-wrapper .product-info ul.social-link li a:hover, .description-wrapper .content-box ul.check-style-one li i, .single-blog-post .entry-content .cat-link:hover:before, .blog-details-wrapper .blog-post .entry-content .wp-block-quote span:before, .blog-details-wrapper .blog-post .entry-footer .tag-links a:hover, .sidebar-widget-area .widget-post-author .author-content ul.social-link li a:hover, .gadden-pagination li a:hover, .single-info-item.style-one, .footer-about-widget .widget-content .main-btn.filled-btn:hover, .footer-about-widget .widget-content form .submit-btn:hover, .footer-nav-widget .footer-nav li a:after, .features-section-two .experience-box-two .icon-btn, .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget .social-item ul.social-link li a:hover { background-color: #f3cd00; } .main-btn.golden-btn, .hero-slider-two .slick-arrow:hover, .features-thumb-item:hover .content, .single-features-item-two:hover, .single-process-item .step, .single-counter-item, .single-counter-item-two .icon, .single-service-item-two:hover .icon, .single-service-item-two:hover .text .icon-btn, .projects-slider-one .slick-dots li:after, .single-project-item-two .project-img .project-overlay .icon-btn, .single-project-item-three .project-img .icon-btn, .single-gallery-item .gallery-img .hover-overlay .icon-btn, .testimonial-slider-one .slick-arrow:hover, .single-pricing-item:hover .pricing-body .pricing-button .main-btn, .single-information-item .icon, .single-info-item.style-three, .footer-widget h4.widget-title:after, .footer-gallery-widget .gallery-list li a .hover-overlay i, .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget h4.title:after { background-color: #F1D2A9; } .page-title-area:after, .sidebar-panel-wrapper .sidebar-wrapper { background-color: #000000; } .gray-bg, .experience-box-two, .features-thumb-item-two .text, .fancy-icon-box:hover, .fancy-icon-box-two, .features-two_image-box .shape.shape-one span, .single-service-item-two, .project-details-wrapper .project-info-widget, .accordion-card, .review-form-area, .shopping-cart-total, .single-blog-post-two .entry-content .post-meta, .single-blog-post-three, .blog-details-wrapper .blog-post .entry-content .wp-block-quote, .comments-respond, .sidebar-widget-area .widget-post-author .author-content ul.social-link, .contact-info-wrapper { background-color: #FCFAF7; } .white-bg, .preloader, .header-navigation.breakpoint-on .nav-menu, .header-one .header-navigation.sticky, .header-two .header-navigation.sticky, .header-three .header-navigation .nav-right-item .menu-button .main-btn.secondary-btn:hover, .navigation-white.header-navigation .navbar-toggler span, .navigation-white.header-navigation.sticky .navbar-toggler span, .hero-content .sub-title:before, .hero-content.text-center .sub-title:after, .about-features-item .icon, .circle-logo, .client-avatar-box, .client-avatar-box-two, .features-thumb-item:hover .content .icon-btn, .features-thumb-item .content, .features-thumb-item-two .text .icon, .fancy-icon-box-two .icon, .single-features-item, .single-features-item-two, .single-features-item-two:hover .icon .icon-btn, .single-counter-item:hover, .single-counter-item .icon, .single-service-item, .single-service-item .service-img .icon-btn, .single-service-item-two:hover, .single-service-item-two .icon, .process-step-item .icon, .single-project-item .project-img .hover-content .icon-btn, .masonry-project-item .project-img .hover-content .icon-btn, .single-team-item .member-img .icon-btn, .single-skill-bar-two .progress-bar .progress, .team-details-wrapper .member-info .member-meta .member-contact-info, .single-testimonial-item-two .author-thumb-title, .single-product-item .product-info, .single-blog-post-three:hover, .single-blog-post-three .entry-content .post-meta, .single-blog-post-four .entry-content, .blog-details-wrapper .blog-post .post-meta, .comment-form .form_control, .sidebar-widget-area .widget-search form .form_control, .sidebar-widget-area .widget-post-author .author-content, .sidebar-widget-area .widget-post-author .author-content .author-title-box, .footer-about-widget .widget-content form .form_control, .copyright-area .copyright-nav ul li a:after, .choose-wrapper { background-color: #fff; } h1 { font-size: 85px; font-weight: 700; line-height: 1.12; } h2 { font-size: 45px; font-weight: 700; line-height: 1.2; } h3, .hero-content .sub-title { font-size: 24px; font-weight: 600; line-height: 1.3; } h4 { font-size: 22px; font-weight: 600; line-height: 1.37; } h5, .comments-area .comment .comment-wrap .comment-author-content span.author-name { font-size: 20px; font-weight: 600; line-height: 1.3; } h6 { font-size: 18px; font-weight: 600; line-height: 1.2; } .preloader, .header-navigation.breakpoint-on .nav-menu .main-menu ul li .dd-trigger, .hero-slider-two .slick-arrow, .about-features-item .icon, .video-popup, ul.check-style-one li i, .circle-logo .inner-circle, .experience-box-two .icon-btn, .client-avatar-box-two .avatar-thumbs ul li .icon-btn, .features-thumb-item .content .icon-btn, .features-thumb-item-two .text .icon, .fancy-icon-box-two .icon, .single-features-item-two .icon .icon-btn, .single-process-item .icon, .single-counter-item .icon, .single-counter-item-two .icon, .single-category-item .icon, .single-category-item .icon i, .client-quote-box .icon, .single-service-item .service-img .icon-btn i, .single-service-item-two .icon, .single-service-item-two .text .icon-btn, .process-step-item .icon, .single-project-item .project-img .hover-content .icon-btn, .single-project-item-two .project-img .project-overlay, .single-project-item-two .project-img .project-overlay .icon-btn, .single-project-item-three .project-img .icon-btn, .single-project-item-four .project-img .hover-content .text .icon-btn, .masonry-project-item .project-img .hover-overlay, .masonry-project-item .project-img .hover-content .icon-btn, .single-gallery-item .gallery-img .hover-overlay, .single-gallery-item .gallery-img .hover-overlay .icon-btn, .single-team-item .member-img .icon-btn, .team-details-wrapper .member-info .member-meta .member-contact-info .icon, .team-details-wrapper .member-info .member-meta .member-contact-info ul.social-link li a, .testimonial-slider-one .slick-arrow, .product-details-wrapper .product-info ul.social-link li a, .single-blog-post .entry-content .author-meta .icon-btn, .sidebar-widget-area .widget-post-author .author-content ul.social-link li a, .gadden-pagination li a, .contact-info-item .icon, .single-information-item .icon, .footer-about-widget .widget-content form .submit-btn, .footer-gallery-widget .gallery-list li a .hover-overlay, .footer-gallery-widget .gallery-list li a .hover-overlay i, .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget .social-item ul.social-link li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*---======================== 01. Default css =======================----*/ /* Base CSS */ html { font-size: 100%; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { color: inherit; text-decoration: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } a:hover, a:focus { color: inherit; text-decoration: none; } a:focus, input:focus, textarea:focus, button:focus { text-decoration: none; outline: none; } i, span, a { display: inline-block; } h1, h2, h3, h4, h5, h6 { margin: 0px; font-family: "Montserrat", sans-serif; } ul, ol { margin: 0px; padding: 0px; list-style-type: none; } p { margin: 0px; } input, textarea { display: inherit; } label { margin-bottom: 0; } iframe { width: 100%; border: none; display: inherit; } img { max-width: 100%; height: 100%; } body { font-weight: normal; font-style: normal; font-weight: 400; color: #2F2F2F; font-family: "Roboto", sans-serif; font-size: 16px; line-height: 29.6px; overflow-x: hidden; } /*====== Extra CSS ======*/ .container-fluid { padding-left: 70px; padding-right: 70px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .container-fluid { padding-left: 15px; padding-right: 15px; } } @media (max-width: 1199px) { .container-fluid { padding-left: 15px; padding-right: 15px; } } .mt-minus-85 { margin-top: -85px; } .mt-minus-90 { margin-top: -90px; } .mt-minus-100 { margin-top: -100px; } .mt-minus-110 { margin-top: -110px; } .mt-minus-130 { margin-top: -130px; } @media only screen and (min-width: 1200px) { .container { max-width: 1200px; } .plr-5p { padding-left: 5%; padding-right: 5%; } /* Margin Left */ .ml-lg-40 { -webkit-margin-start: 40px; margin-inline-start: 40px; } .ml-lg-45 { -webkit-margin-start: 45px; margin-inline-start: 45px; } .ml-lg-55 { -webkit-margin-start: 55px; margin-inline-start: 55px; } .ml-lg-60 { -webkit-margin-start: 60px; margin-inline-start: 60px; } .ml-lg-70 { -webkit-margin-start: 70px; margin-inline-start: 70px; } .ml-minus-lg-60 { -webkit-margin-start: -60px; margin-inline-start: -60px; } /* Margin Right */ .mr-lg-40 { -webkit-margin-end: 40px; margin-inline-end: 40px; } .mr-lg-50 { -webkit-margin-end: 50px; margin-inline-end: 50px; } .mr-lg-70 { -webkit-margin-end: 70px; margin-inline-end: 70px; } .mr-lg-100 { -webkit-margin-end: 100px; margin-inline-end: 100px; } /* Padding Left */ .pl-lg-20 { -webkit-padding-start: 20px; padding-inline-start: 20px; } .pl-lg-30 { -webkit-padding-start: 30px; padding-inline-start: 30px; } .pl-lg-40 { -webkit-padding-start: 40px; padding-inline-start: 40px; } .pl-lg-45 { -webkit-padding-start: 45px; padding-inline-start: 45px; } .pl-lg-50 { -webkit-padding-start: 50px; padding-inline-start: 50px; } .pl-lg-55 { -webkit-padding-start: 55px; padding-inline-start: 55px; } .pl-lg-60 { -webkit-padding-start: 60px; padding-inline-start: 60px; } .pl-lg-70 { -webkit-padding-start: 70px; padding-inline-start: 70px; } .pl-lg-80 { -webkit-padding-start: 80px; padding-inline-start: 80px; } .pl-lg-100 { -webkit-padding-start: 100px; padding-inline-start: 100px; } /* Padding Right */ .pr-lg-30 { -webkit-padding-end: 30px; padding-inline-end: 30px; } .pr-lg-40 { -webkit-padding-end: 40px; padding-inline-end: 40px; } .pr-lg-50 { -webkit-padding-end: 50px; padding-inline-end: 50px; } .pr-lg-60 { -webkit-padding-end: 60px; padding-inline-end: 60px; } .pr-lg-70 { -webkit-padding-end: 70px; padding-inline-end: 70px; } } ul.social-link li { display: inline-block; } .bg_cover { background-position: center center; background-size: cover; background-repeat: no-repeat; } .slick-slide { outline: 0; } .form_group { position: relative; } .form_control { width: 100%; border: none; } textarea.form_control { padding-top: 15px; display: inherit; height: 145px; } .p-r { position: relative; } .z-1 { z-index: 1; } .z--1 { z-index: -1; } .z-2 { z-index: 2; } .sub-title { font-size: 22px; font-weight: 600; font-family: "Montserrat", sans-serif; } .sub-title i { font-size: 40px; -webkit-margin-end: 20px; margin-inline-end: 20px; vertical-align: middle; } .section-title span.sub-title { margin-bottom: 13px; } .section-title h2 { letter-spacing: -0.02em; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .section-title h2 { font-size: 36px; } } @media (max-width: 1199px) { .section-title h2 { font-size: 36px; } } @media (max-width: 767px) { .section-title h2 { font-size: 27px; } } /*===== All Bg =====*/ /*===== All Button Style =====*/ button { border: none; } .main-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 18px 40px; font: 600 16px "Montserrat", sans-serif; text-transform: capitalize; border-radius: 20px; line-height: 20px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .main-btn.filled-btn { padding: 17px 40px; background-color: transparent; border: 1px solid rgba(0, 0, 0, 0.1); } .main-btn.filled-btn.filled-white { border-color: #fff; } .main-btn.filled-btn.filled-white:hover { border-color: transparent; } .btn-link { text-transform: capitalize; font-weight: 600; font-size: 16px; line-height: 22px; text-decoration: underline; } .btn-link i { -webkit-margin-start: 7px; margin-inline-start: 7px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .btn-link:hover i { -webkit-margin-start: 10px; margin-inline-start: 10px; } /*====== Custom Animation =======*/ @-webkit-keyframes shake { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(7px); transform: translateX(7px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes shake { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(7px); transform: translateX(7px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } .animate-float-x { -webkit-animation-name: float-x; animation-name: float-x; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .animate-float-y { -webkit-animation-name: float-y; animation-name: float-y; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes float-y { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes float-y { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @-webkit-keyframes float-x { 0% { -webkit-transform: translateX(-20px); transform: translateX(-20px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes float-x { 0% { -webkit-transform: translateX(-20px); transform: translateX(-20px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @-webkit-keyframes wave { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(100px); transform: translateX(100px); } } @keyframes wave { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(100px); transform: translateX(100px); } } /*====== Search Modal ======*/ .search-modal { background-color: rgba(13, 18, 23, 0.95); } .search-modal .modal-content { padding: 15px 30px; background-color: transparent; border: none; } .search-modal .modal-content label { position: absolute; top: 15px; right: 0; color: #fff; } .search-modal .modal-content .form_control { padding: 15px 30px 15px 0; background-color: transparent; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.7); } .search-modal .modal-content .form_control::-webkit-input-placeholder { color: #fff; } .search-modal .modal-content .form_control:-ms-input-placeholder { color: #fff; } .search-modal .modal-content .form_control::-ms-input-placeholder { color: #fff; } .search-modal .modal-content .form_control::placeholder { color: #fff; } .search-modal .modal-content .form_control:focus { background-color: transparent; } .modal-open { overflow: auto !important; padding-right: 0 !important; overflow-x: hidden !important; } .modal-open .modal.show { padding-right: 0 !important; overflow-x: hidden !important; overflow-y: hidden !important; } /*===== Nice Select =====*/ .nice-select { padding: 0 10px; border: none; border-radius: 0px; font-size: 16px; z-index: 1; } .nice-select:after { position: absolute; right: 0; content: '\f107'; font-family: 'Font Awesome 5 Pro'; font-weight: 400; } .nice-select ul.list { border-radius: 0; } .nice-select .option { padding: 0 10px; } /*====== Start Preloader css ======*/ .preloader { bottom: 0; height: 100vh; left: 0; position: fixed; right: 0; top: 0; width: 100vw; z-index: 99999; } .preloader .loader { margin: 0 auto; position: relative; text-align: center; } .preloader .pre-box { width: 50px; height: 50px; background: #0B3D2C; -webkit-animation: loaderAnimate .5s linear infinite; animation: loaderAnimate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px; } .preloader .pre-shadow { width: 50px; height: 5px; background: #000; opacity: 0.1; position: absolute; top: 59px; left: 0; border-radius: 50%; -webkit-animation: loaderShadow .5s linear infinite; animation: loaderShadow .5s linear infinite; } @-webkit-keyframes loaderAnimate { 17% { border-bottom-right-radius: 3px; } 25% { -webkit-transform: translateY(9px) rotate(22.5deg); transform: translateY(9px) rotate(22.5deg); } 50% { -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg); transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; } 75% { -webkit-transform: translateY(9px) rotate(67.5deg); transform: translateY(9px) rotate(67.5deg); } 100% { -webkit-transform: translateY(0) rotate(90deg); transform: translateY(0) rotate(90deg); } } @keyframes loaderAnimate { 17% { border-bottom-right-radius: 3px; } 25% { -webkit-transform: translateY(9px) rotate(22.5deg); transform: translateY(9px) rotate(22.5deg); } 50% { -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg); transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; } 75% { -webkit-transform: translateY(9px) rotate(67.5deg); transform: translateY(9px) rotate(67.5deg); } 100% { -webkit-transform: translateY(0) rotate(90deg); transform: translateY(0) rotate(90deg); } } @-webkit-keyframes loaderShadow { 50% { -webkit-transform: scale(1.2, 1); transform: scale(1.2, 1); } } @keyframes loaderShadow { 50% { -webkit-transform: scale(1.2, 1); transform: scale(1.2, 1); } } /*====== Start Back to top css ======*/ .back-to-top { background-color: #0B3D2C; border-radius: 50%; bottom: 30px; color: #fff; cursor: pointer; display: none; font-size: 20px; width: 50px; height: 50px; line-height: 50px; position: fixed; right: 30px; text-align: center; text-decoration: none; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; z-index: 337; } /*==================== End COMMON css ======================*/ /*---================== 02. Header css =================----*/ /* Transparent Header */ .transparent-header { position: absolute; background-color: transparent; top: 0; left: 0; width: 100%; z-index: 999; } @media (max-width: 991px) { .transparent-header { top: 0; } } /* Header Navigation */ .header-navigation .nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; visibility: hidden; opacity: 0; z-index: 1; } .header-navigation .nav-overlay.active { visibility: visible; opacity: 1; } .header-navigation .primary-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-navigation .main-menu ul > li { display: inline-block; position: relative; margin-left: 17px; margin-right: 17px; } .header-navigation .main-menu ul > li.has-childrens { display: inline-block; position:initial; margin-left: 17px; margin-right: 17px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-navigation .main-menu ul > li { margin-left: 14px; margin-right: 14px; } } @media (max-width: 1199px) { .header-navigation .main-menu ul > li .search-btn { display: none; } } .header-navigation .main-menu ul > li > a { position: relative; display: block; font: 600 18px "Montserrat", sans-serif; padding: 38px 0; text-transform: capitalize; line-height: 1; } .header-navigation .main-menu ul > li > a span.dd-trigger { -webkit-margin-start: 5px; margin-inline-start: 5px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-navigation .main-menu ul > li > a { font-size: 16px; } } .header-navigation .main-menu ul > li .sub-menu { position: absolute; left: 0; top: 120%; width: 250px; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; z-index: 99; padding: 15px 0; height: auto; text-align: left; border-radius: 5px; -webkit-box-shadow: 0 30px 70px 0 rgba(137, 139, 142, 0.15); box-shadow: 0 30px 70px 0 rgba(137, 139, 142, 0.15); } .header-navigation .main-menu ul > li .sub-menu li { display: block; margin: 0 10px 10px; } .header-navigation .main-menu ul > li .sub-menu li:last-child { margin-bottom: 0; } .header-navigation .main-menu ul > li .sub-menu li a { text-wrap: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 15px 0; position: relative; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-radius: 0; line-height: 2.5; margin: 0; border: 1px dashed #fff; border-radius: 5px; } .header-navigation .main-menu ul > li .sub-menu li a i { font-size: 20px; line-height: 1; -webkit-margin-end: 5px; margin-inline-end: 5px; } .header-navigation .main-menu ul > li .sub-menu li a span.dd-trigger { float: right; } .header-navigation .main-menu ul > li .sub-menu li .sub-menu { left: 100%; top: 50%; } .header-navigation .main-menu ul > li .sub-menu li:hover .sub-menu { top: 0%; } .header-navigation .main-menu ul > li .sub-menu li:hover > a { border-color: #2A7D2E; } .header-navigation .main-menu ul > li:hover > .sub-menu { opacity: 1; visibility: visible; top: 100%; } .header-navigation.breakpoint-on .nav-search .form_control { border: 1px solid #e1e1e1; padding: 15px 20px; } .header-navigation.breakpoint-on .nav-search .search-btn { position: absolute; top: 17px; right: 20px; background-color: transparent; } .header-navigation.breakpoint-on .nav-menu { text-align: left; position: fixed; top: 0; left: -290px; z-index: 9999; width: 290px; height: 100%; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; padding: 40px 20px; -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); display: block; overflow-x: hidden; overflow-y: scroll; } .header-navigation.breakpoint-on .nav-menu.menu-on { left: 0; } .header-navigation.breakpoint-on .nav-menu .main-menu ul li { display: block; margin: 0; border-bottom: 1px solid #ececec; } .header-navigation.breakpoint-on .nav-menu .main-menu ul li:last-child { border-bottom: 0; } .header-navigation.breakpoint-on .nav-menu .main-menu ul li.active .sub-menu { border-top: 1px solid #ececec; } .header-navigation.breakpoint-on .nav-menu .main-menu ul li a { display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding: 15px 0; color: #000; } .header-navigation.breakpoint-on .nav-menu .main-menu ul li .sub-menu { width: 100%; position: relative; top: 0; left: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; background-color: transparent; visibility: visible; opacity: 1; display: none; -webkit-transition: none; -o-transition: none; transition: none; } .header-navigation.breakpoint-on .nav-menu .main-menu ul li .sub-menu > li > a { padding: 0px 20px 0 30px; } .header-navigation.breakpoint-on .nav-menu .main-menu ul li .sub-menu > li > a:hover { border-color: rgba(255, 255, 255, 0.5); } .header-navigation.breakpoint-on .nav-menu .main-menu ul li .dd-trigger { position: absolute; right: 0; top: 10px; height: 25px; width: 25px; border-radius: 3px; z-index: 2; cursor: pointer; font-size: 16px; } .header-navigation.breakpoint-on .nav-menu .main-menu.menu-on { left: 0; } @media (max-width: 767px) { .header-navigation.breakpoint-on .nav-menu .menu-button { display: block; } } .header-navigation.breakpoint-on .navbar-toggler { display: block; } .header-navigation .navbar-toggler { padding: 10px 7px; border: 1px solid rgba(0, 0, 0, 0.1); background-color: transparent; cursor: pointer; display: none; border-radius: 5px; } @media (max-width: 1199px) { .header-navigation .navbar-toggler { -webkit-margin-start: 30px; margin-inline-start: 30px; } } @media (max-width: 575px) { .header-navigation .navbar-toggler { -webkit-margin-start: 15px; margin-inline-start: 15px; } } .header-navigation .navbar-toggler span { position: relative; border-radius: 3px; display: block; height: 2px; padding: 0; width: 30px; cursor: pointer; display: block; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .header-navigation .navbar-toggler span:not(:first-child) { margin-top: 5px; } .header-navigation .navbar-toggler.active span:nth-of-type(1) { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); top: 7px; } .header-navigation .navbar-toggler.active span:nth-of-type(2) { opacity: 0; } .header-navigation .navbar-toggler.active span:nth-of-type(3) { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); top: -7px; } /* Header Top Bar */ .header-top-bar { padding: 13px 50px; border-radius: 0px 0px 27.5px 27.5px; } .header-top-bar .top-right ul.social-link li:not(:last-child) { -webkit-margin-end: 20px; margin-inline-end: 20px; } .header-top-bar-two { padding: 16px 0; } .header-top-bar-two .top-left span:not(:last-child) { -webkit-margin-end: 20px; margin-inline-end: 20px; } .header-top-bar-two .top-left span i { -webkit-margin-end: 10px; margin-inline-end: 10px; } .header-top-bar-two .top-right .social-link li:not(first-child) { -webkit-margin-start: 20px; margin-inline-start: 20px; } .header-top-bar-two .top-right .social-link li a { position: relative; line-height: 1; } .header-top-bar-two .top-right .social-link li a:hover:after { width: 100%; } .header-top-bar-two .top-right .social-link li a:after { position: absolute; bottom: 0; left: 0; content: ''; width: 0%; height: 1px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } /* Header Middle */ .header-middle { padding-left: 375px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-middle { padding-left: 230px; } } .header-middle .menu-right-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .header-middle .menu-right-item span { border-left: 1px solid rgba(18, 74, 47, 0.1); padding: 35px 40px; font-size: 18px; cursor: pointer; } .header-middle .menu-right-item span.bar-btn { -webkit-padding-end: 0; padding-inline-end: 0; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-middle .menu-right-item span { padding: 20px 25px; } } /* Header Style One */ .header-one .header-navigation { border-bottom: 1px solid rgba(18, 74, 47, 0.1); } .header-one .header-navigation .site-branding { padding: 20px 100px 20px 0; border-right: 1px solid rgba(18, 74, 47, 0.1); } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-one .header-navigation .site-branding { padding: 20px 20px 20px 0; } } @media (max-width: 1199px) { .header-one .header-navigation .site-branding { padding: 20px 20px 20px 0; } } @media only screen and (min-width: 1200px) { .header-one .header-navigation .nav-menu { -webkit-padding-start: 80px; padding-inline-start: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-one .header-navigation .nav-menu { -webkit-padding-start: 10px; padding-inline-start: 10px; } } .header-one .header-navigation .main-menu ul > li .search-btn { cursor: pointer; font-size: 16px; } .header-one .header-navigation .nav-right-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .header-one .header-navigation .nav-right-item .menu-button { border-right: 1px solid rgba(18, 74, 47, 0.1); padding: 20px 50px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-one .header-navigation .nav-right-item .menu-button { padding: 20px 20px; } } @media (max-width: 1199px) { .header-one .header-navigation .nav-right-item .menu-button { padding: 20px 0 20px 20px; } } .header-one .header-navigation .nav-right-item .bar-button { padding: 20px 0 20px 50px; cursor: pointer; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-one .header-navigation .nav-right-item .bar-button { padding: 20px 0 20px 20px; } } @media (max-width: 575px) { .header-one .header-navigation .nav-right-item .bar-button { display: none; } } .header-one .header-navigation .nav-right-item .navbar-toggler { border-left: 1px solid rgba(18, 74, 47, 0.1); } /* Header Style Two */ .header-two .header-navigation { margin-bottom: -95px; } @media (max-width: 1199px) { .header-two .header-navigation { padding: 15px 0; } } .header-two .header-navigation .primary-menu { position: relative; z-index: 2; } .header-two .header-navigation.sticky { padding: 0 30px; margin-bottom: 0; } @media (max-width: 1199px) { .header-two .header-navigation.sticky { padding: 15px 20px; } } .header-two .header-navigation.sticky .site-branding { margin-top: 0; } .header-two .header-navigation.sticky .site-branding .brand-logo { display: none; } .header-two .header-navigation.sticky .site-branding .sticky-logo { display: block; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-two .header-navigation { margin-bottom: -91px; } } @media (max-width: 1199px) { .header-two .header-navigation { margin-bottom: 0; } } .header-two .header-navigation .site-branding { max-width: 315px; margin-top: -125px; -webkit-margin-end: 42px; margin-inline-end: 42px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-two .header-navigation .site-branding { max-width: 200px; -webkit-margin-end: 17px; margin-inline-end: 17px; } } @media (max-width: 1199px) { .header-two .header-navigation .site-branding { margin-top: 0; -webkit-margin-end: 0; margin-inline-end: 0; } } .header-two .header-navigation .site-branding .sticky-logo { display: none; } .header-two .header-navigation .site-branding a.brand-logo { padding: 45px 50px; border-radius: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-two .header-navigation .site-branding a.brand-logo { padding: 25px 30px; } } @media (max-width: 1199px) { .header-two .header-navigation .site-branding a.brand-logo { padding: 25px 30px; } } @media (max-width: 575px) { .header-two .header-navigation .site-branding a.brand-logo { padding: 15px 20px; } } .header-two .header-navigation .nav-right-item { -webkit-padding-start: 35px; padding-inline-start: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; } @media (max-width: 1199px) { .header-two .header-navigation .nav-right-item { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .header-two .header-navigation .nav-right-item .lang-dropdown .nice-select { padding: 10px; background-color: transparent; font: 600 18px "Montserrat", sans-serif; height: auto; line-height: 0; } @media only screen and (min-width: 1200px) { .header-two .header-navigation .nav-right-item .lang-dropdown .nice-select { color: #fff; } } .header-two .header-navigation .nav-right-item .lang-dropdown .nice-select:after { right: -5px; } .header-two .header-navigation .navbar-toggler { border: 1px solid rgba(11, 61, 44, 0.1); } /* Header Style Three */ @media (max-width: 1199px) { .header-three .header-navigation { padding: 15px 0; } } .header-three .header-navigation .primary-menu { position: relative; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 2; } .header-three .header-navigation .site-branding { max-width: 220px; } @media (max-width: 575px) { .header-three .header-navigation .site-branding { max-width: 170px; } } .header-three .header-navigation .nav-right-item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-three .header-navigation .nav-right-item .nice-select { background-color: transparent; padding: 0 20px; } .header-three .header-navigation .nav-right-item .search-btn { padding: 0 30px; cursor: pointer; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-three .header-navigation .nav-right-item .search-btn { padding: 0 20px; } } @media (max-width: 1199px) { .header-three .header-navigation .nav-right-item .search-btn { display: none; } } .header-three .header-navigation .nav-right-item .bar-button { cursor: pointer; -webkit-padding-start: 30px; padding-inline-start: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .header-three .header-navigation .nav-right-item .bar-button { -webkit-padding-start: 20px; padding-inline-start: 20px; } } @media (max-width: 575px) { .header-three .header-navigation .nav-right-item .bar-button { display: none; } } .header-three .header-navigation .nav-right-item .navbar-toggler { -webkit-margin-start: 30px; margin-inline-start: 30px; } /* Navigation White */ .navigation-white.header-navigation .navbar-toggler { border: 1px solid rgba(255, 255, 255, 0.6); } .navigation-white.header-navigation.sticky .site-branding .brand-logo { padding: 0; background-color: transparent; } .navigation-white.header-navigation.sticky .navbar-toggler { border-color: rgba(255, 255, 255, 0.8); } /* Header Sticky */ .sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; -webkit-animation: sticky 1.2s; animation: sticky 1.2s; } @-webkit-keyframes sticky { 0% { top: -200px; } 100% { top: 0; } } @keyframes sticky { 0% { top: -200px; } 100% { top: 0; } } /*---============================= 03. Header css ===========================----*/ /*--==== Hero Slider ====--*/ .hero-slider-two .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 65px; height: 65px; border-radius: 50%; border: 1px solid #fff; cursor: pointer; z-index: 1; font-size: 20px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .hero-slider-two .slick-arrow.prev { left: 12.5%; } @media (max-width: 1199px) { .hero-slider-two .slick-arrow.prev { left: 5%; } } .hero-slider-two .slick-arrow.next { right: 12.5%; } @media (max-width: 1199px) { .hero-slider-two .slick-arrow.next { right: 5%; } } .hero-slider-two .slick-arrow:hover { border-color: transparent; } .single-slider .image-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 1.4s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 1.4s cubic-bezier(0.7, 0, 0.3, 1); transition: all 1.4s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); z-index: -1; } .single-slider .image-layer:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; /*background-color: #000000; */ mix-blend-mode: multiply; opacity: 0.7; z-index: -1; } .single-slider.slick-current .image-layer { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /*--==== hero Content ====--*/ .hero-content .sub-title { font-family: "Montserrat", sans-serif; margin-bottom: 22px; } .hero-content .sub-title:before { display: inline-block; content: ''; width: 55px; height: 3px; vertical-align: middle; -webkit-margin-end: 30px; margin-inline-end: 30px; } .hero-content.text-center .sub-title:after { display: inline-block; content: ''; width: 55px; height: 3px; vertical-align: middle; -webkit-margin-start: 30px; margin-inline-start: 30px; } .hero-content h1 { margin-bottom: 33px; } @media (max-width: 767px) { .hero-content h1 { font-size: 52px; line-height: 1.2; } } .hero-content p { font: 500 24px "Roboto", sans-serif; line-height: 26.4px; margin-bottom: 43px; } @media (max-width: 767px) { .hero-content p { font-size: 20px; line-height: 30px; } } .hero-content .hero-button a:first-child { -webkit-margin-end: 15px; margin-inline-end: 15px; } @media (max-width: 575px) { .hero-content .hero-button a:first-child { margin-left: 10px; margin-right: 10px; } } /*--==== Hero Play ====--*/ .hero-play .video-popup { width: 85px; height: 85px; background-color: #fff; } /*--==== Hero Waves ====--*/ .hero-waves { position: absolute; bottom: -1px; left: -100px; width: calc(100% + 100px); z-index: 1; } .hero-waves .waves { position: absolute; bottom: 0; left: 0; width: 100%; -webkit-animation: wave 6s infinite; animation: wave 6s infinite; } .hero-waves .waves.two { -webkit-animation-delay: 3s; animation-delay: 3s; } /*--==== Hero Wrapper ====--*/ .hero-wrapper-one { position: relative; z-index: 1; overflow: hidden; padding: 285px 0 130px; } @media (max-width: 1199px) { .hero-wrapper-one { padding: 200px 0; } } .hero-wrapper-one .shape { position: absolute; } .hero-wrapper-one .shape.shape-one { top: 150px; left: 0; } .hero-wrapper-one .shape.shape-two { top: 150px; right: 0; } @media (max-width: 1199px) { .hero-wrapper-one .shape.shape-two { top: 89px; } } .hero-wrapper-one .shape.shape-three { bottom: 0; right: 10px; } .hero-wrapper-one .hero-content { -webkit-margin-start: -80px; margin-inline-start: -80px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .hero-wrapper-one .hero-content { -webkit-margin-start: 0px; margin-inline-start: 0px; } } @media (max-width: 1199px) { .hero-wrapper-one .hero-content { -webkit-margin-start: 0px; margin-inline-start: 0px; } } .hero-wrapper-one .hero-content h1 { font-size: 60px; letter-spacing: -0.03em; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .hero-wrapper-one .hero-content h1 { font-size: 52px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-wrapper-one .hero-content h1 { -webkit-padding-end: 20%; padding-inline-end: 20%; } } @media (max-width: 767px) { .hero-wrapper-one .hero-content h1 { font-size: 32px; } } .hero-wrapper-one .hero-image-box { position: relative; z-index: 1; } .hero-wrapper-one .hero-image-box .shape { position: absolute; z-index: -1; } .hero-wrapper-one .hero-image-box .shape.hero-svg { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: -30%; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .hero-wrapper-one .hero-image-box .shape.hero-svg { right: -15%; } } .hero-wrapper-one .hero-image-box img { width: 100%; border-radius: 50%; } @media (max-width: 991px) { .hero-wrapper-two .hero-content { margin-bottom: 60px; } } .hero-wrapper-two .single-slider { padding: 275px 0 100px; overflow: hidden; } @media (max-width: 1199px) { .hero-wrapper-two .single-slider { padding: 100px 0; } } .hero-wrapper-two .single-slider .bgc-circle { position: absolute; bottom: -140px; left: 200px; width: 835px; height: 835px; border-radius: 50%; background-color: rgba(42, 125, 46, 0.65); } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .hero-wrapper-two .single-slider .bgc-circle { left: 0; } } @media (max-width: 1199px) { .hero-wrapper-two .single-slider .bgc-circle { display: none; } } .hero-wrapper-three { position: relative; overflow: hidden; } .hero-wrapper-three .single-slider { padding: 193px 0 290px; } @media (max-width: 991px) { .hero-wrapper-three .single-slider { padding: 193px 0 230px; } } @media (max-width: 575px) { .hero-wrapper-three .hero-content span.sub-title { font-size: 16px; } } /*--==== Page Title ====--*/ .page-title-area { position: relative; z-index: 1; padding-top: 225px; } @media (max-width: 767px) { .page-title-area { padding-top: 150px; } } .page-title-area:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; opacity: .7; z-index: -1; mix-blend-mode: multiply; } .page-title-area .page-title-inner h1.page-title { font-size: 65px; } @media (max-width: 767px) { .page-title-area .page-title-inner h1.page-title { font-size: 34px; } } .page-title-area .gd-breadcrumb { padding: 23px 30px; background-color: #0f0523; border-radius: 20px 20px 0px 0px; max-width: 775px; margin: 0 auto; margin-top: 135px; } @media (max-width: 575px) { .page-title-area .gd-breadcrumb { padding: 23px 15px; } } .page-title-area .gd-breadcrumb span.breadcrumb-entry.active { text-decoration: underline; } .page-title-area .gd-breadcrumb span.separator { position: relative; width: 21px; height: 21px; border-radius: 50%; border: 1px solid #FFFFFF; vertical-align: middle; margin-left: 35px; margin-right: 35px; } .page-title-area .gd-breadcrumb span.separator:after { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #FFFFFF; } /*---========================== 04. About css =========================----*/ /*-=== About Content Box ====-*/ .about-two_content-box { position: relative; padding-top: 112px; } @media (max-width: 991px) { .about-two_content-box .about-inner-content { max-width: 525px; } } @media (max-width: 575px) { .about-two_content-box .about-inner-content { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 575px) { .about-two_content-box .about-inner-content .inner-content { margin-bottom: 30px; } } .about-two_content-box .about-inner-content .inner-content .check-style-one { max-width: 250px; } .about-two_content-box .about-inner-content .experience-box-two { padding: 25px 50px 35px; } /*-=== About Image Box ====-*/ .about-one_image-box { min-height: 550px; max-width: 630px; } .about-one_image-box .about-img-one { border-radius: 20px; position: absolute; top: 0; left: 0; } @media (max-width: 1199px) { .about-one_image-box .about-img-one { left: 20px; } } @media (max-width: 575px) { .about-one_image-box .about-img-one { display: none; } } .about-one_image-box .about-img-two { position: absolute; right: 35px; bottom: 0; z-index: 1; border-radius: 20px; } @media (max-width: 575px) { .about-one_image-box .about-img-two { right: auto; position: relative; bottom: auto; } } .about-one_image-box .about-img-three { position: absolute; left: -50px; bottom: 15px; } @media (max-width: 1199px) { .about-one_image-box .about-img-three { left: 20px; } } @media (max-width: 575px) { .about-one_image-box .about-img-three { display: none; } } .about-one_image-box .shape { position: absolute; } @media (max-width: 575px) { .about-one_image-box .shape { display: none; } } .about-one_image-box .shape.shape { left: -80px; bottom: 60px; } @media (max-width: 1199px) { .about-one_image-box .shape.shape { left: 0; } } .about-one_image-box .shape.shape span { width: 293px; height: 293px; background-color: rgba(42, 125, 46, 0.12); border-radius: 50%; } .about-one_image-box .experience-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; right: 60px; top: 40px; max-width: 265px; } @media (max-width: 575px) { .about-one_image-box .experience-item { position: relative; right: auto; top: auto; margin-top: 40px; } } .about-one_image-box .experience-item h2.number { font-weight: 600; font-size: 65px; line-height: 79px; } .about-one_image-box .experience-item h4 { -ms-flex-preferred-size: min-content; flex-basis: min-content; -webkit-margin-start: 20px; margin-inline-start: 20px; } .about-two_image-box { -webkit-margin-start: -175px; margin-inline-start: -175px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .about-two_image-box { -webkit-margin-start: 0; margin-inline-start: 0; } } @media (max-width: 1199px) { .about-two_image-box { -webkit-margin-start: 0; margin-inline-start: 0; } } /*-=== About Features Item ====-*/ .about-features-item { position: relative; padding: 30px; overflow: hidden; z-index: 2; border-radius: 20px; } .about-features-item.item-active .hover-bg { visibility: visible; opacity: 1; } .about-features-item .hover-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .about-features-item .hover-bg:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(11, 61, 44, 0.9); } .about-features-item .icon { width: 120px; height: 120px; border-radius: 50%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 60px; margin-bottom: 33px; } .about-features-item h3.title { margin-bottom: 12px; } .about-features-item p { margin-bottom: 16px; } .fancy-about-item .text h5 { margin-bottom: 10px; } .fancy-about-item .text h5 i { -webkit-margin-end: 10px; margin-inline-end: 10px; } /*-=== Choose Nav Tab ====-*/ .choose-nav-tab { margin-bottom: 33px; } .choose-nav-tab .nav-item:not(:last-child) .nav-link { padding-left: 0; } .choose-nav-tab .nav-link { position: relative; padding: 0 30px 30px; background-color: transparent; font: 600 24px "Montserrat", sans-serif; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media (max-width: 575px) { .choose-nav-tab .nav-link { font-size: 16px; padding: 0 15px 30px; } } .choose-nav-tab .nav-link.active:after { position: absolute; bottom: -2px; left: 0; content: ''; width: 100%; height: 3px; } /*-=== Choose Content Box ====-*/ .choose-content-box > p { margin-bottom: 35px; } .choose-content-box .thumb-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 991px) { .choose-content-box .thumb-content { margin-bottom: 40px; } } @media (max-width: 575px) { .choose-content-box .thumb-content { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .choose-content-box .thumb-content img { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-margin-end: 35px; margin-inline-end: 35px; } @media (max-width: 575px) { .choose-content-box .thumb-content img { -webkit-margin-end: 0; margin-inline-end: 0; margin-bottom: 20px; } } @media (max-width: 575px) { .choose-content-box .thumb-content .check-style-one { margin-bottom: 20px; } } .choose-content-box .thumb-content .check-style-one li { font: 600 16px "Montserrat", sans-serif; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .choose-content-box .thumb-content .check-style-one li { font-size: 15px; } } @media (max-width: 767px) { .choose-content-box .thumb-content .check-style-one li { font-size: 15px; } } .choose-content-box .thumb-content .check-style-one li i { width: 25px; height: 25px; } /*---============================= 05. Features css ============================----*/ /*--==== Border Top ====--*/ .border-top-1 { border-top: 1px solid rgba(11, 61, 44, 0.1); } /*--==== Video Popup ====--*/ .video-popup { position: relative; border-radius: 50%; } .video-popup:after, .video-popup:before { position: absolute; left: 0; top: 0; content: ""; border-radius: 50%; width: 100%; height: 100%; border: 1px solid #e1e1e1; -webkit-animation: playpopup infinite linear 1s; animation: playpopup infinite linear 1s; } .video-popup:before { -webkit-animation: playpopup infinite linear 2s; animation: playpopup infinite linear 2s; } @-webkit-keyframes playpopup { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.6; } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0.3; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes playpopup { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.6; } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0.3; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } /*--==== Ratings ====--*/ ul.ratings li { display: inline-block; } ul.ratings li i { color: #FF9900; } /*--==== Check Style ====--*/ ul.check-style-one li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: 500 18px "Montserrat", sans-serif; } ul.check-style-one li:not(:last-child) { margin-bottom: 15px; } ul.check-style-one li i { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; -webkit-margin-end: 15px; margin-inline-end: 15px; } /*--==== Circle Logo ====--*/ .circle-logo { border-radius: 50%; padding: 15px; } .circle-logo .inner-circle { width: 100%; height: 100%; border-radius: 50%; border: 2px dashed #0B3D2C; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .circle-logo .inner-circle i { font-size: 55px; margin-bottom: 15px; } /*--==== Experience Box ====--*/ .experience-box h2.fill-text { font: 600 120px "Roboto", sans-serif; color: black; background-color: white; -webkit-text-fill-color: white; -webkit-text-stroke-width: 1px; } .experience-box h4 { color: #2F2F2F; padding-bottom: 21px; border-bottom: 1px solid #0B3D2C; margin-bottom: 22px; } .experience-box-two { border-radius: 0px 0px 100px 100px; max-width: 200px; text-align: center; padding: 25px 40px 35px; border: 1px solid #0B3D2C; border-top: 5px solid #0B3D2C; } .experience-box-two h2.number { margin-bottom: 15px; } .experience-box-two h6 { font-family: "Roboto", sans-serif; width: -webkit-min-content; width: -moz-min-content; width: min-content; margin: 0 auto; margin-bottom: 25px; } .experience-box-two .icon-btn { width: 55px; height: 55px; border-radius: 50%; color: #fff; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } /*--==== Client Avatar Box ====--*/ .client-avatar-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 30px; border-radius: 20px; max-width: 465px; } @media (max-width: 575px) { .client-avatar-box { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .client-avatar-box .avatar-thumbs { -webkit-margin-end: 30px; margin-inline-end: 30px; } .client-avatar-box .avatar-thumbs ul { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .client-avatar-box .avatar-thumbs ul li:not(first-child) { -webkit-margin-end: -25px; margin-inline-end: -25px; } .client-avatar-box .avatar-thumbs ul li img { width: 60px; height: 60px; border-radius: 50%; border: 3px solid #FFFFFF; -webkit-box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.2); box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.2); } .client-avatar-box .text { -ms-flex-preferred-size: min-content; flex-basis: min-content; } @media (max-width: 575px) { .client-avatar-box .text { -ms-flex-preferred-size: max-content; flex-basis: max-content; } } .client-avatar-box .text span { font-size: 18px; } .client-avatar-box-two { padding: 32px 45px 28px; max-width: 455px; border-radius: 20px; } @media (max-width: 575px) { .client-avatar-box-two { padding: 32px 30px 28px; } } .client-avatar-box-two h6 { margin-bottom: 20px; } .client-avatar-box-two .avatar-thumbs { margin-bottom: 22px; } .client-avatar-box-two .avatar-thumbs ul { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .client-avatar-box-two .avatar-thumbs ul li:not(first-child) { -webkit-margin-end: -25px; margin-inline-end: -25px; } .client-avatar-box-two .avatar-thumbs ul li img { width: 75px; height: 75px; border-radius: 50%; } @media (max-width: 575px) { .client-avatar-box-two .avatar-thumbs ul li img { width: 60px; height: 60px; } } .client-avatar-box-two .avatar-thumbs ul li .icon-btn { width: 75px; height: 75px; border-radius: 50%; font-size: 24px; } @media (max-width: 575px) { .client-avatar-box-two .avatar-thumbs ul li .icon-btn { width: 60px; height: 60px; } } .client-avatar-box-two ul.ratings li span { font: 600 18px "Montserrat", sans-serif; } /*--==== Features Style Item ====--*/ .features-thumb-item { position: relative; } .features-thumb-item .thumb img { width: 100%; border-radius: 20px; } .features-thumb-item .content { position: relative; -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); border-radius: 20px; margin-left: 25px; margin-right: 25px; margin-top: -60px; padding: 30px 35px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .features-thumb-item .content .icon { line-height: 1; margin-bottom: 15px; } .features-thumb-item .content .icon i { font-size: 48px; } .features-thumb-item .content h5.title { width: -webkit-min-content; width: -moz-min-content; width: min-content; } .features-thumb-item .content .icon-btn { position: absolute; top: 30px; right: 35px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(18, 74, 47, 0.1); font-size: 35px; } .features-thumb-item .content .icon-btn i { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-margin-start: -20px; margin-inline-start: -20px; margin-bottom: -20px; } .features-thumb-item .content .text { display: none; } .features-thumb-item-two:hover .text .icon { -webkit-box-shadow: 0px 10px 60px rgba(42, 125, 46, 0.4); box-shadow: 0px 10px 60px rgba(42, 125, 46, 0.4); } .features-thumb-item-two .thumb img { width: 100%; border-radius: 20px 20px 0 0; } .features-thumb-item-two .text { padding: 0 30px 25px; border-radius: 0 0 20px 20px; } .features-thumb-item-two .text .icon { position: relative; margin-top: -35px; margin-bottom: 23px; width: 65px; height: 65px; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .features-thumb-item-two .text .icon i { font-size: 30px; } .features-thumb-item-two .text h5.title { margin-bottom: 5px; } .fancy-icon-box { padding: 33px 35px 25px; border-radius: 20px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .fancy-icon-box .icon { margin-bottom: 20px; } .fancy-icon-box .icon i { font-size: 65px; } .fancy-icon-box .text h5.title { margin-bottom: 10px; letter-spacing: -0.02em; line-height: 30px; } .fancy-icon-box-two { position: relative; z-index: 1; padding: 35px 30px 26px; border-radius: 0 20px 20px 20px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .fancy-icon-box-two:hover .shape.icon-shape i { opacity: 0.05; } .fancy-icon-box-two .shape { position: absolute; } .fancy-icon-box-two .shape.icon-shape { top: 30px; right: 30px; } .fancy-icon-box-two .shape.icon-shape i { font-size: 90px; color: rgba(11, 61, 44, 0.05); } .fancy-icon-box-two .icon { width: 75px; height: 75px; border-radius: 50%; margin-bottom: 25px; } .fancy-icon-box-two .icon i { font-size: 40px; } .fancy-icon-box-two .text h5.title { margin-bottom: 5px; } .single-features-item { border-radius: 20px; padding: 23px 30px 19px; display: -webkit-box; display: -ms-flexbox; display: flex; } .single-features-item .icon { position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 67px; height: 79px; -webkit-margin-end: 25px; margin-inline-end: 25px; } .single-features-item .icon i { font-size: 65px; } .single-features-item .icon .shape-circle { position: absolute; bottom: 0; left: 12px; width: 55px; height: 55px; border-radius: 50%; background-color: rgba(42, 125, 46, 0.07); } .single-features-item .text { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (max-width: 575px) { .single-features-item .text { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .single-features-item .text h5.title { width: 45%; -webkit-margin-end: 30px; margin-inline-end: 30px; font-weight: 700; line-height: 1.5; } @media (max-width: 575px) { .single-features-item .text h5.title { margin-bottom: 20px; width: 100%; font-size: 18px; } } .single-features-item .text p { color: #2F2F2F; width: 54%; } @media (max-width: 575px) { .single-features-item .text p { width: 100%; } } .single-features-item-two { -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); padding: 30px 35px; border-radius: 20px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-features-item-two .icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 15px; } .single-features-item-two .icon .fl-icon { font-size: 50px; } .single-features-item-two .icon .icon-btn { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; font-size: 35px; border: 1px solid rgba(18, 74, 47, 0.1); } .single-features-item-two .icon .icon-btn i { -webkit-transform: translate(-8px, 12px) rotate(-45deg); -moz-transform: translate(-8px, 12px) rotate(-45deg); -ms-transform: translate(-8px, 12px) rotate(-45deg); -o-transform: translate(-8px, 12px) rotate(-45deg); transform: translate(-8px, 12px) rotate(-45deg); } .features-list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid rgba(11, 61, 44, 0.1); font: 600 22px "Montserrat", sans-serif; margin-bottom: 40px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 1199px) { .features-list li { font: 600 20px "Montserrat", sans-serif; } } .features-list li i { -webkit-margin-end: 10px; margin-inline-end: 10px; font-size: 32px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .features-list li:hover { border-color: #0B3D2C; } /*--==== Process Item ====--*/ .single-process-item { position: relative; } .single-process-item .inner-process-item { padding: 55px 40px 40px; text-align: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-process-item .inner-process-item { padding: 55px 25px 40px; } } @media (max-width: 991px) { .single-process-item .inner-process-item { border: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 40px; } } .single-process-item .step { position: absolute; top: -16px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); padding: 6px 25px; letter-spacing: -0.02em; border-radius: 5px; font: 600 16px "Montserrat", sans-serif; text-transform: uppercase; line-height: 20px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 1199px) { .single-process-item .step { padding: 6px 15px; font-size: 14px; } } .single-process-item .icon { width: 140px; height: 140px; border-radius: 50%; background-color: rgba(42, 125, 46, 0.1); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 75px; margin-bottom: 33px; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .single-process-item .text h4 { margin-bottom: 15px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-process-item .text h4 { font-size: 20px; } } .single-process-item .text p { margin-bottom: 20px; } /*--==== Counter css ====--*/ .single-counter-column:nth-child(even) { margin-top: -30px; } @media (max-width: 575px) { .single-counter-column:nth-child(even) { margin-top: 0; } } .single-counter-item { padding: 40px 40px 35px; border-radius: 20px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-counter-item { padding: 40px 25px 35px; } } .single-counter-item .icon { width: 50px; height: 50px; border-radius: 50%; font-size: 35px; margin-bottom: 22px; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .single-counter-item .icon i { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .single-counter-item h2.number { margin-bottom: 10px; } .single-counter-item p { font-size: 18px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-counter-item p { font-size: 16px; } } @media (max-width: 767px) { .single-counter-item p { font-size: 16px; } } .single-counter-item-two { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 575px) { .single-counter-item-two { text-align: center; } } .single-counter-item-two .icon { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 27px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .single-counter-item-two .icon i { font-size: 18px; } .single-counter-item-two h2.number { font-size: 55px; margin-bottom: 10px; } .single-counter-item-two p { font-size: 18px; } /*--==== Features Content Css ====--*/ .features-item-area > .row .col-md-6:nth-child(2) { margin-top: 30px; } @media (max-width: 767px) { .features-item-area > .row .col-md-6:nth-child(2) { margin-top: 0; } } .features-item-area > .row .col-md-6:nth-child(3) { margin-top: -30px; } @media (max-width: 767px) { .features-item-area > .row .col-md-6:nth-child(3) { margin-top: 0; } } /*--==== Features Image Box ====--*/ .features-one_image-box { position: relative; margin-top: -155px; -webkit-margin-start: -95px; margin-inline-start: -95px; } @media (max-width: 1199px) { .features-one_image-box { -webkit-margin-start: 0; margin-inline-start: 0; } } .features-one_image-box img { max-width: 770px; border-radius: 20px; } @media (max-width: 1199px) { .features-one_image-box img { max-width: 100%; } } .features-two_image-box { -webkit-margin-start: -50px; margin-inline-start: -50px; max-width: 665px; } @media (max-width: 1199px) { .features-two_image-box { margin: 0 auto 50px; } } .features-two_image-box .shape { position: absolute; z-index: -1; } .features-two_image-box .shape.shape-one { top: -20px; right: 0; } .features-two_image-box .shape.shape-one span { width: 400px; height: 495px; } .features-two_image-box .circle-logo { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: -55px; width: 225px; height: 225px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .features-two_image-box .circle-logo { right: -35px; } } @media (max-width: 767px) { .features-two_image-box .circle-logo { display: none; } } .features-two_image-box .circle-logo .inner-circle i { font-size: 75px; } /*--==== Choose Image Box ====--*/ .choose-image-box img { border-radius: 20px; } /*--==== CTA Image Box ====--*/ .cta-image-box { margin-bottom: -80px; } @media (max-width: 1199px) { .cta-image-box { margin-bottom: 50px; } } .cta-image-box img { border-radius: 30px; } /*--==== CTA Content Box ====--*/ .cta-two_content-box { max-width: 320px; } .cta-two_content-box .sub-title { font-size: 16px; margin-bottom: 15px; } .cta-two_content-box h3.title { margin-bottom: 15px; } .cta-two_content-box h4 { font: 400 22px "Roboto", sans-serif; } .cta-two_content-box .social-box { border-top: 1px solid rgba(11, 61, 44, 0.2); } /*--==== Social Box ====--*/ .social-box ul.social-link { padding: 15px 25px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 17px; } /*--==== Partners Css ====--*/ .partner-slider-one { margin-left: -15px; margin-right: -15px; } .partner-slider-one .single-partner-item { margin-left: 15px; margin-right: 15px; } .partner-slider-one .slick-track { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .single-partner-item .partner-img { padding: 0 15px; text-align: center; } /*--==== Single Category ====--*/ .single-category-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .single-category-item .inner-category { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: 0 18px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-category-item .inner-category { padding: 0; } } .single-category-item .text { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .single-category-item .text h3.title { font-size: 20px; } } @media (max-width: 1199px) { .single-category-item .text h3.title { font-size: 20px; } } .single-category-item .icon { width: 120px; height: 120px; border-radius: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; border: 1px solid rgba(18, 74, 47, 0.1); -webkit-margin-start: 35px; margin-inline-start: 35px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .single-category-item .icon { width: 90px; height: 90px; } } @media (max-width: 1199px) { .single-category-item .icon { width: 70px; height: 70px; } } .single-category-item .icon i { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 35px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); width: 85px; height: 85px; border-radius: 50%; background-color: transparent; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .single-category-item .icon i { width: 60px; height: 60px; } } @media (max-width: 1199px) { .single-category-item .icon i { width: 45px; height: 45px; } } /*--==== Quote Item ====--*/ .client-quote-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 991px) { .client-quote-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .client-quote-box .icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 170px; height: 170px; border-radius: 50%; border: 1px solid rgba(11, 61, 44, 0.2); -webkit-margin-end: 100px; margin-inline-end: 100px; } @media (max-width: 991px) { .client-quote-box .icon { -webkit-margin-end: 0; margin-inline-end: 0; margin-bottom: 30px; } } .client-quote-box .icon i { font-size: 75px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .client-quote-box .text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 767px) { .client-quote-box .text { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } } .client-quote-box .text h2.number { font: 600 110px "Roboto", sans-serif; -webkit-text-stroke: 1px #fff; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; -webkit-margin-end: 70px; margin-inline-end: 70px; } @media (max-width: 767px) { .client-quote-box .text h2.number { -webkit-margin-end: 0px; margin-inline-end: 0px; font-size: 70px; margin-bottom: 30px; } } @media (max-width: 767px) { .client-quote-box .text h4 { font-size: 20px; line-height: 1.3; } } /*---========================== 06. Service css =========================----*/ /*--==== Service Style ====--*/ .single-service-item { border-radius: 20px; padding: 10px; } .single-service-item .service-info { padding: 16px 25px 26px; position: relative; z-index: 1; } .single-service-item .service-info .shape { position: absolute; z-index: -1; } .single-service-item .service-info .shape.icon-shape { right: 20px; bottom: 0; } .single-service-item .service-info .shape.icon-shape i { font-size: 100px; color: rgba(0, 0, 0, 0.03); } .single-service-item .service-info .icon i { font-size: 50px; } .single-service-item .service-img { position: relative; } .single-service-item .service-img img { width: 100%; border-radius: 20px; } .single-service-item .service-img .icon-btn { position: absolute; right: 25px; top: -37px; width: 75px; height: 75px; border-radius: 50%; padding: 10px; -webkit-box-shadow: 0px 10px 60px rgba(52, 136, 5, 0.5); box-shadow: 0px 10px 60px rgba(52, 136, 5, 0.5); z-index: 2; } @media (max-width: 575px) { .single-service-item .service-img .icon-btn { display: none; } } .single-service-item .service-img .icon-btn i { width: 55px; height: 55px; border-radius: 50%; } .single-service-item-two { padding: 35px 30px 30px; border-radius: 20px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-service-item-two:hover { -webkit-box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.05); box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.05); } .single-service-item-two .icon { width: 100px; height: 100px; border-radius: 50%; -webkit-box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.05); box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.05); margin-top: -90px; margin-bottom: 25px; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .single-service-item-two .icon i { font-size: 45px; } .single-service-item-two .text h4.title { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 20px; } .single-service-item-two .text p { margin-bottom: 23px; } .single-service-item-two .text .icon-btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(18, 74, 47, 0.1); font-size: 35px; } .single-service-item-two .text .icon-btn i { -webkit-transform: translate(-8px, 12px) rotate(-45deg); -moz-transform: translate(-8px, 12px) rotate(-45deg); -ms-transform: translate(-8px, 12px) rotate(-45deg); -o-transform: translate(-8px, 12px) rotate(-45deg); transform: translate(-8px, 12px) rotate(-45deg); } /*--==== Process Item ====--*/ @media (max-width: 575px) { .process-step-item { padding: 0 30px; } } .process-step-item .icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 110px; height: 110px; border-radius: 50%; -webkit-box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); font-size: 55px; margin-bottom: 25px; } .process-step-item .text h6 { margin-bottom: 5px; } /*--==== Service Details ====--*/ .service-info-wrapper .block-image { margin-bottom: 32px; } .service-info-wrapper .block-image img { border-radius: 20px; width: 100%; } .service-info-wrapper h2.title { margin-bottom: 20px; } .service-info-wrapper h3 { margin-bottom: 15px; } .service-info-wrapper > p { margin-bottom: 40px; } .service-info-wrapper ul.check-style-one li i { font-size: 12px; width: 25px; height: 25px; } /*--==== Navigation Item ====--*/ .navigation-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .navigation-item .thumb { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 150px; height: 130px; -o-object-fit: cover; object-fit: cover; -webkit-margin-end: 35px; margin-inline-end: 35px; } @media (max-width: 991px) { .navigation-item .thumb { -webkit-margin-end: 15px; margin-inline-end: 15px; } } .navigation-item .thumb img { width: 100%; border-radius: 20px; } .navigation-item .text h3.title { font-size: 27px; margin-bottom: 10px; } @media (max-width: 991px) { .navigation-item .text h3.title { font-size: 20px; } } .navigation-item.next-post { direction: rtl; text-align: right; } /*---========================== 07. Project css =========================----*/ /*--==== Project Filter ====--*/ .project-filter li { position: relative; display: inline-block; font: 600 18px "Montserrat", sans-serif; cursor: pointer; -webkit-margin-end: 43px; margin-inline-end: 43px; margin-bottom: 10px; padding-bottom: 20px; } @media (max-width: 991px) { .project-filter li { -webkit-margin-end: 25px; margin-inline-end: 25px; } } @media (max-width: 767px) { .project-filter li { -webkit-margin-end: 15px; margin-inline-end: 15px; font-size: 16px; } } .project-filter li:after { position: absolute; bottom: 0; left: 0; content: ''; width: 0; height: 3px; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .project-filter li:hover:after, .project-filter li.active:after { visibility: visible; opacity: 1; width: 40px; } /*--==== Projects Slider ====--*/ .projects-slider-one { margin-left: -35px; margin-right: -35px; } .projects-slider-one .single-project-item { margin-left: 35px; margin-right: 35px; } .projects-slider-one .slick-dots { margin-top: 60px; text-align: center; } .projects-slider-one .slick-dots li.slick-active { border-color: #F1D2A9; } .projects-slider-two { margin-left: -15px; margin-right: -15px; } .projects-slider-two .slick-track { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; } .projects-slider-two .slick-dots { text-align: center; margin-top: 80px; } .projects-slider-three { margin-left: -15px; margin-right: -15px; } .projects-slider-three .single-project-item-three { margin-left: 15px; margin-right: 15px; } .projects-slider-three .slick-dots { text-align: center; margin-top: 50px; } .projects-slider-four { margin-left: -15px; margin-right: -15px; } .projects-slider-four .single-project-item-four { margin-left: 15px; margin-right: 15px; } /*--==== Project Image ====--*/ .project-img { position: relative; } .project-img img { width: 100%; } /*--==== Project Style Item ====--*/ .single-project-item:hover .project-img .hover-content { bottom: 0; visibility: visible; opacity: 1; } .single-project-item .project-img { position: relative; } .single-project-item .project-img img { border-radius: 20px; } .single-project-item .project-img .hover-content { position: absolute; bottom: 10%; left: 0; background-color: rgba(42, 125, 46, 0.9); border-radius: 20px; padding: 30px 20px 30px 50px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; visibility: hidden; opacity: 0; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } @media (max-width: 1199px) { .single-project-item .project-img .hover-content { padding: 30px 20px 30px 20px; } } .single-project-item .project-img .hover-content .text { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .single-project-item .project-img .hover-content .text h3.title { font-size: 27px; margin-bottom: 5px; } @media (max-width: 1199px) { .single-project-item .project-img .hover-content .text h3.title { font-size: 22px; } } @media (max-width: 991px) { .single-project-item .project-img .hover-content .text h3.title { font-size: 18px; } } .single-project-item .project-img .hover-content .icon-btn { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; } @media (max-width: 991px) { .single-project-item .project-img .hover-content .icon-btn { width: 45px; height: 45px; } .single-project-item .project-img .hover-content .icon-btn i { font-size: 15px; } } .single-project-item .project-img .hover-content .icon-btn i { font-size: 25px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .single-project-item-two:hover .project-img .project-overlay { visibility: visible; opacity: 1; } .single-project-item-two:hover .project-img .project-overlay .icon-btn { top: 40px; } .single-project-item-two:hover .project-img .project-overlay .hover-content { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .single-project-item-two .project-img { position: relative; overflow: hidden; } .single-project-item-two .project-img img { border-radius: 20px; } .single-project-item-two .project-img .project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background-color: rgba(11, 61, 44, 0.85); padding: 40px 40px 50px; -webkit-box-align: end; -ms-flex-align: end; align-items: center; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-project-item-two .project-img .project-overlay .icon-btn { position: absolute; top: 80px; right: 40px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 75px; height: 75px; border-radius: 50%; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .single-project-item-two .project-img .project-overlay .icon-btn i { font-size: 24px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .single-project-item-two .project-img .project-overlay .hover-content { padding: 25px 65px; border-radius: 20px; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all 0.45s ease-out 0s; -moz-transition: all 0.45s ease-out 0s; -ms-transition: all 0.45s ease-out 0s; -o-transition: all 0.45s ease-out 0s; transition: all 0.45s ease-out 0s; } .single-project-item-three:hover .project-img .hover-overlay { visibility: visible; opacity: 1; } .single-project-item-three:hover .project-img .icon-btn { bottom: 65%; -webkit-transform: translate(-50%, 65%); -moz-transform: translate(-50%, 65%); -ms-transform: translate(-50%, 65%); -o-transform: translate(-50%, 65%); transform: translate(-50%, 65%); } .single-project-item-three:hover .project-img .hover-content { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .single-project-item-three .project-img img { border-radius: 20px; } .single-project-item-three .project-img .hover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 61, 44, 0.85); border-radius: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px; visibility: visible; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-project-item-three .project-img .icon-btn { position: absolute; bottom: 55%; left: 50%; -webkit-transform: translate(-50%, 55%); -moz-transform: translate(-50%, 55%); -ms-transform: translate(-50%, 55%); -o-transform: translate(-50%, 55%); transform: translate(-50%, 55%); -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 75px; height: 75px; border-radius: 50%; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-project-item-three .project-img .icon-btn { width: 50px; height: 50px; } .single-project-item-three .project-img .icon-btn i { font-size: 16px; } } .single-project-item-three .project-img .icon-btn i { font-size: 24px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .single-project-item-three .project-img .hover-content { width: 100%; text-align: center; padding: 22px 30px; border-radius: 20px; -webkit-transform: translateY(-25%); -moz-transform: translateY(-25%); -ms-transform: translateY(-25%); -o-transform: translateY(-25%); transform: translateY(-25%); -webkit-transition: all 0.45s ease-out 0s; -moz-transition: all 0.45s ease-out 0s; -ms-transition: all 0.45s ease-out 0s; -o-transition: all 0.45s ease-out 0s; transition: all 0.45s ease-out 0s; } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-project-item-three .project-img .hover-content { padding: 22px 20px; } } .single-project-item-three .project-img .hover-content .text h3.title { margin-bottom: 3px; } .single-project-item-four:hover .project-img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .single-project-item-four:hover .project-img .hover-content { left: 0; visibility: visible; opacity: 1; -webkit-transform: perspective(0px); transform: perspective(0px); } .single-project-item-four:hover .project-img .project-content { right: -100%; visibility: hidden; opacity: 0; } .single-project-item-four .project-img { overflow: hidden; } .single-project-item-four .project-img img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.35s ease-out 0s; -moz-transition: all 0.35s ease-out 0s; -ms-transition: all 0.35s ease-out 0s; -o-transition: all 0.35s ease-out 0s; transition: all 0.35s ease-out 0s; } .single-project-item-four .project-img .hover-content { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 40px; visibility: hidden; opacity: 0; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .single-project-item-four .project-img .hover-content .number { font-size: 30px; } .single-project-item-four .project-img .hover-content .text h3.title { margin-bottom: 6px; } .single-project-item-four .project-img .hover-content .text p { margin-bottom: 21px; } .single-project-item-four .project-img .hover-content .text .icon-btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 35px; } .single-project-item-four .project-img .project-content { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.55))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); padding: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .masonry-project-item:hover .project-img .hover-overlay { visibility: visible; opacity: 1; } .masonry-project-item:hover .project-img .hover-content { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .masonry-project-item .project-img .hover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 61, 44, 0.75); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .masonry-project-item .project-img .hover-content { -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .masonry-project-item .project-img .hover-content .icon-btn { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 85px; height: 85px; border-radius: 50%; } @media (max-width: 1199px) { .masonry-project-item .project-img .hover-content .icon-btn { width: 55px; height: 55px; } .masonry-project-item .project-img .hover-content .icon-btn i { font-size: 18px; } } .masonry-project-item .project-img .hover-content .icon-btn i { font-size: 27px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } /*--==== Project Details Wrapper ====--*/ .project-details-wrapper .block-image { margin-bottom: 53px; } .project-details-wrapper h3.title { font-size: 45px; font-weight: 700; margin-bottom: 15px; } .project-details-wrapper p { margin-bottom: 30px; } .project-details-wrapper > h3 { margin-bottom: 15px; } .project-details-wrapper ul.check-style-one li i { font-size: 16px; } .project-details-wrapper .project-info-widget { padding: 45px 40px; border-radius: 20px; } @media (max-width: 575px) { .project-details-wrapper .project-info-widget { padding: 45px 20px; } } .project-details-wrapper .project-info-widget .info-content h6 { font-weight: 500; } .project-details-wrapper .project-info-widget .info-content h6:after { display: block; content: ''; margin-top: 26px; margin-bottom: 25px; width: 70px; height: 4px; } .project-details-wrapper .project-info-widget .info-content ul li { display: -webkit-box; display: -ms-flexbox; display: flex; padding-bottom: 15px; border-bottom: 1px solid rgba(11, 61, 44, 0.15); } .project-details-wrapper .project-info-widget .info-content ul li:not(:last-child) { margin-bottom: 20px; } .project-details-wrapper .project-info-widget .info-content ul li span { font: 400 18px "Montserrat", sans-serif; letter-spacing: -0.02em; } @media (max-width: 1199px) { .project-details-wrapper .project-info-widget .info-content ul li span { font-size: 16px; } } .project-details-wrapper .project-info-widget .info-content ul li span.title { font-weight: 600; width: 42%; } .project-details-wrapper .project-info-widget .info-content ul li span.text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .project-details-wrapper .project-info-widget .info-content ul li span.text:before { content: ":"; margin-left: 10px; margin-right: 10px; } /*---======================= 08. Gallery css =======================----*/ .single-gallery-item:hover .gallery-img .hover-overlay { visibility: visible; opacity: 1; } .single-gallery-item:hover .gallery-img .hover-overlay .icon-btn { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .single-gallery-item .gallery-img { position: relative; overflow: hidden; } .single-gallery-item .gallery-img img { width: 100%; border-radius: 20px; } .single-gallery-item .gallery-img .hover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 61, 44, 0.95); border-radius: 20px; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-gallery-item .gallery-img .hover-overlay .icon-btn { width: 60px; height: 60px; border-radius: 50%; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } /*---======================== 09. Team css =======================----*/ /*--==== Team Style ====--*/ .single-team-item:hover .member-img .icon-btn { -webkit-box-shadow: 0px 10px 60px rgba(11, 61, 44, 0.85); box-shadow: 0px 10px 60px rgba(11, 61, 44, 0.85); } .single-team-item .member-img { position: relative; } .single-team-item .member-img img { width: 100%; border-radius: 20px; } .single-team-item .member-img svg.member-shape { position: absolute; bottom: 0; left: 0; } .single-team-item .member-img .icon-btn { position: absolute; bottom: -30px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 60px; height: 60px; font-size: 18px; border-radius: 50%; -webkit-box-shadow: 0px 10px 60px rgba(11, 61, 44, 0.5); box-shadow: 0px 10px 60px rgba(11, 61, 44, 0.5); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-team-item .member-info { padding-top: 40px; } .single-team-item .member-info h3.title { margin-bottom: 5px; } @media (max-width: 767px) { .single-team-item .member-info h3.title { font-size: 20px; } } .single-team-item-two:hover .member-img .social-box { bottom: 20px; } .single-team-item-two .member-img { position: relative; overflow: hidden; } .single-team-item-two .member-img img { width: 100%; border-radius: 29px; } .single-team-item-two .member-img .social-box { position: absolute; bottom: -50%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-team-item-two .member-info { padding-top: 30px; } .single-team-item-two .member-info h4.title { font-size: 20px; letter-spacing: -0.02em; } /*--==== Skill Bar ====--*/ .single-skill-bar { border-radius: 20px; background-color: #fff; -webkit-box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-skill-bar { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 575px) { .single-skill-bar { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .single-skill-bar h5.title { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 27%; -webkit-margin-end: 30px; margin-inline-end: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-skill-bar h5.title { width: 70%; } } @media (max-width: 575px) { .single-skill-bar h5.title { width: 70%; } } .single-skill-bar .progress-bar { width: 100%; background-color: transparent; height: 5px; -webkit-margin-end: 20px; margin-inline-end: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-skill-bar .progress-bar { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-top: 15px; -webkit-margin-end: 0; margin-inline-end: 0; } } @media (max-width: 575px) { .single-skill-bar .progress-bar { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-top: 15px; -webkit-margin-end: 0; margin-inline-end: 0; } } .single-skill-bar span.number { font: 600 20px "Montserrat", sans-serif; } .single-skill-bar-two h6.title { margin-bottom: 17px; } .single-skill-bar-two h6.title span.number { float: right; } .single-skill-bar-two .progress-bar { height: 7px; background-color: rgba(255, 255, 255, 0.1); } .single-skill-bar-two .progress-bar .progress { border-radius: 0px; } /*--==== Skill Image Box ====--*/ .skill-image-box { min-height: 565px; max-width: 565px; } .skill-image-box .skill-img-one { position: absolute; top: 40px; left: 0; border-radius: 20px; } .skill-image-box .skill-img-two { position: absolute; top: 80px; right: 50px; border-radius: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .skill-image-box .skill-img-two { right: 0; } } @media (max-width: 575px) { .skill-image-box .skill-img-two { right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .skill-image-box .skill-img-two { right: 20px; } } .skill-image-box .skill-img-three { position: absolute; bottom: 0; right: 0; border-radius: 20px; } .skill-image-box .circle-logo { position: absolute; bottom: 20px; left: 30px; width: 185px; height: 185px; -webkit-box-shadow: 0px 10px 60px rgba(42, 125, 46, 0.5); box-shadow: 0px 10px 60px rgba(42, 125, 46, 0.5); padding: 13px; } @media (max-width: 767px) { .skill-image-box .circle-logo { left: 0; } } .skill-image-box .circle-logo .inner-circle { border: 2px dashed #FFFFFF; } .skill-image-box .circle-logo .inner-circle i { font-size: 55px; } .skill-image-box .shape { position: absolute; } .skill-image-box .shape.shape-one { top: 0; right: -40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .skill-image-box .shape.shape-one { right: 0; } } @media (max-width: 575px) { .skill-image-box .shape.shape-one { right: 0; } } .skill-image-box .shape.shape-one span { width: 460px; height: 460px; border-radius: 50%; background-color: rgba(42, 125, 46, 0.07); } @media (max-width: 575px) { .skill-image-box .shape.shape-one span { width: 320px; height: 320px; } } .skill-two_image-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; -webkit-margin-end: -130px; margin-inline-end: -130px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .skill-two_image-box { -webkit-margin-end: 0; margin-inline-end: 0; } } @media (max-width: 1199px) { .skill-two_image-box { -webkit-margin-end: 0; margin-inline-end: 0; } } @media (max-width: 767px) { .skill-two_image-box { gap: 15px; } } .skill-two_image-box .skill-img-one { width: 53%; margin-bottom: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .skill-two_image-box .skill-img-one { width: 50%; } } @media (max-width: 1199px) { .skill-two_image-box .skill-img-one { width: 50%; } } .skill-two_image-box .skill-img-two { width: 42%; margin-bottom: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .skill-two_image-box .skill-img-two { width: 40%; } } @media (max-width: 1199px) { .skill-two_image-box .skill-img-two { width: 40%; } } .skill-two_image-box .circle-logo { position: absolute; width: 225px; height: 225px; left: 57%; top: 50%; -webkit-transform: translate(-57%, -50%); -moz-transform: translate(-57%, -50%); -ms-transform: translate(-57%, -50%); -o-transform: translate(-57%, -50%); transform: translate(-57%, -50%); } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .skill-two_image-box .circle-logo { width: 180px; height: 180px; } } @media (max-width: 575px) { .skill-two_image-box .circle-logo { display: none; } } /*--==== Team Details ====--*/ .team-details-wrapper .member-img img { border-radius: 20px; } .team-details-wrapper .member-info h3.title { font-size: 35px; font-weight: 700; } .team-details-wrapper .member-info p.position { margin-bottom: 25px; } .team-details-wrapper .member-info > p { margin-bottom: 28px; } .team-details-wrapper .member-info .member-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid rgba(11, 61, 44, 0.1); padding-top: 55px; } .team-details-wrapper .member-info .member-meta .member-contact-info, .team-details-wrapper .member-info .member-meta ul.check-style-one { width: 50%; } @media (max-width: 575px) { .team-details-wrapper .member-info .member-meta .member-contact-info, .team-details-wrapper .member-info .member-meta ul.check-style-one { margin-bottom: 50px; width: 100%; } } .team-details-wrapper .member-info .member-meta ul.check-style-one li { font: 600 16px "Montserrat", sans-serif; } .team-details-wrapper .member-info .member-meta ul.check-style-one li:not(:last-child) { margin-bottom: 10px; } .team-details-wrapper .member-info .member-meta ul.check-style-one li i { width: 20px; height: 20px; } .team-details-wrapper .member-info .member-meta .member-contact-info { position: relative; padding: 45px 20px 30px; border-radius: 13px; -webkit-box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); text-align: center; } .team-details-wrapper .member-info .member-meta .member-contact-info .icon { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: -27.5px; width: 55px; height: 55px; border-radius: 12px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .team-details-wrapper .member-info .member-meta .member-contact-info p { font-weight: 500; } .team-details-wrapper .member-info .member-meta .member-contact-info ul.social-link { margin-top: 10px; } .team-details-wrapper .member-info .member-meta .member-contact-info ul.social-link li { margin-left: 2.5px; margin-right: 2.5px; } .team-details-wrapper .member-info .member-meta .member-contact-info ul.social-link li a { width: 35px; height: 35px; border-radius: 50%; font-size: 14px; background-color: rgba(11, 61, 44, 0.1); } /*---============================ 10. Testimonial css ============================----*/ /*--==== Slick Dots ====--*/ ul.slick-dots li { position: relative; width: 20px; height: 20px; border: 1px solid transparent; border-radius: 50%; } ul.slick-dots li:after { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ''; width: 7px; height: 7px; border-radius: 50%; } ul.slick-dots li.slick-active { border-color: #2A7D2E; } /*--==== Testimonial Slider ====--*/ .testimonial-slider-one { margin-left: -15px; margin-right: -15px; } .testimonial-slider-one .single-testimonial-item { margin-left: 15px; margin-right: 15px; } .testimonial-slider-one .slick-arrow { position: absolute; top: 42%; -webkit-transform: translateY(-42%); -moz-transform: translateY(-42%); -ms-transform: translateY(-42%); -o-transform: translateY(-42%); transform: translateY(-42%); cursor: pointer; z-index: 1; width: 65px; height: 65px; border-radius: 50%; font-size: 20px; border: 1px solid rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .testimonial-slider-one .slick-arrow.prev { left: -120px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .testimonial-slider-one .slick-arrow.prev { left: -70px; } } .testimonial-slider-one .slick-arrow.next { right: -120px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .testimonial-slider-one .slick-arrow.next { right: -70px; } } .testimonial-slider-one .slick-arrow:hover { border-color: transparent; } .testimonial-slider-one .slick-dots { text-align: center; margin-top: 60px; } /*--==== Testimonial Dots ====--*/ .testimonial-dots ul.slick-dots li { display: block; border-radius: 0; } .testimonial-dots ul.slick-dots li:not(:last-child) { margin-bottom: 13px; } @media (max-width: 991px) { .testimonial-dots ul.slick-dots li { display: inline-block; } } /*--==== Author CSS ====--*/ .author-thumb-title { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .author-thumb-title .author-thumb { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 55px; -webkit-margin-end: 15px; margin-inline-end: 15px; } .author-thumb-title .author-thumb img { width: 55px; height: 55px; border-radius: 50%; } .author-thumb-title .author-title h6.title { font-size: 18px; margin-bottom: 7px; letter-spacing: -0.02em; } .author-thumb-title .author-title p.position { line-height: 16px; } /*--==== Rating Box ====--*/ .quote-rating-box { display: -webkit-box; display: -ms-flexbox; display: flex; } .quote-rating-box .icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 65px; height: 45px; -webkit-margin-end: 30px; margin-inline-end: 30px; } .quote-rating-box .ratings-box h6 { font-size: 16px; margin-bottom: 5px; } .quote-rating-box .ratings-box ul.ratings { line-height: 20px; } .quote-rating-box .ratings-box ul.ratings li { font-size: 14px; letter-spacing: -0.02em; } /*--==== Testimonial Style ====--*/ .single-testimonial-item { background-color: #FCFAF7; border-radius: 20px; padding: 10px; } .single-testimonial-item .testimonial-inner-content { background-color: #fff; border-radius: 20px; padding: 40px 45px; -webkit-box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.07); } @media (max-width: 1199px) { .single-testimonial-item .testimonial-inner-content { padding: 40px 25px; } } .single-testimonial-item .testimonial-inner-content .quote-rating-box { margin-bottom: 24px; } .single-testimonial-item .testimonial-inner-content > p { margin-bottom: 25px; } .single-testimonial-item .testimonial-inner-content .author-thumb-title { padding: 15px 20px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 7px; } .single-testimonial-item-two .quote-rating-box { -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 27px; } .single-testimonial-item-two .quote-rating-box .icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100px; height: 100%; } .single-testimonial-item-two .quote-rating-box .ratings-box h3 { margin-bottom: 8px; } @media (max-width: 1199px) { .single-testimonial-item-two .quote-rating-box .ratings-box h3 { font-size: 22px; } } .single-testimonial-item-two .quote-rating-box .ratings-box ul.ratings li i { font-size: 18px; } .single-testimonial-item-two > p { font: 600 30px "Montserrat", sans-serif; line-height: 50px; color: #fff; letter-spacing: -0.02em; margin-bottom: 35px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .single-testimonial-item-two > p { font-size: 24px; line-height: 45px; } } @media (max-width: 1199px) { .single-testimonial-item-two > p { font-size: 24px; line-height: 45px; } } @media (max-width: 575px) { .single-testimonial-item-two > p { font: 400 16px "Montserrat", sans-serif; line-height: 30px; } } .single-testimonial-item-two .author-thumb-title { position: relative; border: 1px solid rgba(0, 0, 0, 0.1); padding: 15px 20px; border-radius: 7px; } .single-testimonial-item-two .author-thumb-title:after { position: absolute; top: -13px; left: 0; content: ""; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 15px solid #fff; } .single-testimonial-item-three { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 30px 70px 0; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .single-testimonial-item-three { padding: 30px 40px; } } @media (max-width: 1199px) { .single-testimonial-item-three { padding: 30px 40px; } } @media (max-width: 991px) { .single-testimonial-item-three { padding: 30px 0; } } @media (max-width: 767px) { .single-testimonial-item-three { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .single-testimonial-item-three .testimonial-inner-content { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 60%; -webkit-margin-end: 80px; margin-inline-end: 80px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .single-testimonial-item-three .testimonial-inner-content { -webkit-margin-end: 40px; margin-inline-end: 40px; } } @media (max-width: 1199px) { .single-testimonial-item-three .testimonial-inner-content { -webkit-margin-end: 30px; margin-inline-end: 30px; } } @media (max-width: 767px) { .single-testimonial-item-three .testimonial-inner-content { -webkit-margin-end: 0; margin-inline-end: 0; width: 100%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .single-testimonial-item-three .testimonial-inner-content ul.ratings { margin-bottom: 20px; } .single-testimonial-item-three .testimonial-inner-content > p { font: 400 22px "Montserrat", sans-serif; line-height: 36px; letter-spacing: -0.02em; margin-bottom: 35px; } @media (max-width: 1199px) { .single-testimonial-item-three .testimonial-inner-content > p { font: 400 18px "Montserrat", sans-serif; line-height: 30px; } } @media (max-width: 991px) { .single-testimonial-item-three .testimonial-inner-content > p { font-size: 16px; margin-bottom: 15px; } } .single-testimonial-item-three .testimonial-inner-content .quote-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 40px; border-top: 1px solid rgba(11, 61, 44, 0.2); } @media (max-width: 991px) { .single-testimonial-item-three .testimonial-inner-content .quote-title { padding-top: 25px; } } .single-testimonial-item-three .testimonial-inner-content .quote-title .icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; max-width: 75px; -webkit-margin-end: 25px; margin-inline-end: 25px; } .single-testimonial-item-three .testimonial-inner-content .quote-title .title h6 { margin-bottom: 5px; } .single-testimonial-item-three .testimonial-author { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33%; z-index: 1; } @media (max-width: 767px) { .single-testimonial-item-three .testimonial-author { width: 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .single-testimonial-item-three .testimonial-author img { width: 100%; } .single-testimonial-item-three .testimonial-author .svg-shape { position: absolute; right: -18%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } /*---===================== 11. Faqs css ======================----*/ .accordion-card { padding: 22px 35px 20px; border-radius: 20px; } .accordion-card .accordion-header h6.accordion-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 27px; cursor: pointer; border-bottom: 1px solid transparent; } .accordion-card .accordion-header h6.accordion-title:after { content: '\f061'; font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: 18px; -webkit-margin-start: auto; margin-inline-start: auto; } .accordion-card .accordion-header h6.accordion-title[aria-expanded=true] { padding-bottom: 11px; border-color: rgba(11, 61, 44, 0.1); } .accordion-card .accordion-header h6.accordion-title[aria-expanded=true]:after { content: '\f063'; } .accordion-card .accordion-body { padding-top: 16px; } /*---========================== 12. Pricing css =========================----*/ .single-pricing-item { background-color: #fff; border-radius: 20px; -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-pricing-item:hover .pricing-body .shape { visibility: visible; opacity: 1; } .single-pricing-item:hover .pricing-body .pricing-title h3.title { border-color: rgba(255, 255, 255, 0.1); } .single-pricing-item .pricing-img { padding: 10px; } .single-pricing-item .pricing-img img { width: 100%; border-radius: 20px; } .single-pricing-item .pricing-body { position: relative; padding: 23px 40px 25px; } @media (max-width: 1199px) { .single-pricing-item .pricing-body { padding: 23px 20px 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-pricing-item .pricing-body { padding: 23px 40px 25px; } } .single-pricing-item .pricing-body .shape { position: absolute; visibility: hidden; opacity: 0; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .single-pricing-item .pricing-body .shape.shape-one { top: 45%; left: 50%; -webkit-transform: translate(-50%, -45%); -moz-transform: translate(-50%, -45%); -ms-transform: translate(-50%, -45%); -o-transform: translate(-50%, -45%); transform: translate(-50%, -45%); } .single-pricing-item .pricing-body .pricing-title h3.title { padding-bottom: 29px; border-bottom: 1px solid rgba(11, 61, 44, 0.1); } @media (max-width: 1199px) { .single-pricing-item .pricing-body .pricing-title h3.title { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-pricing-item .pricing-body .pricing-title h3.title { font-size: 24px; } } .single-pricing-item .pricing-body ul li { font-size: 20px; } @media (max-width: 1199px) { .single-pricing-item .pricing-body ul li { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-pricing-item .pricing-body ul li { font-size: 20px; } } .single-pricing-item .pricing-body ul li:not(:last-child) { margin-bottom: 20px; } .single-pricing-item .pricing-body ul li i { -webkit-margin-end: 12px; margin-inline-end: 12px; } .single-pricing-item .pricing-body h2.price { margin-bottom: 40px; } @media (max-width: 1199px) { .single-pricing-item .pricing-body h2.price { font-size: 36px; } } .single-pricing-item .pricing-body h2.price span.duration { font: 400 16px "Roboto", sans-serif; } .single-pricing-item .pricing-body .pricing-button .main-btn { margin-bottom: 9px; } .single-pricing-item-two { padding: 30px 40px 25px; background-color: #fff; -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); border-radius: 20px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border: 2px solid transparent; } @media (max-width: 1199px) { .single-pricing-item-two { padding: 30px 20px 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-pricing-item-two { padding: 30px 40px 25px; } } .single-pricing-item-two:hover { border-color: #0B3D2C; } .single-pricing-item-two .pricing-body .pricing-title { padding-bottom: 29px; border-bottom: 1px solid rgba(11, 61, 44, 0.1); } .single-pricing-item-two .pricing-body .pricing-title h3.title { margin-bottom: 17px; } @media (max-width: 1199px) { .single-pricing-item-two .pricing-body .pricing-title h3.title { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-pricing-item-two .pricing-body .pricing-title h3.title { font-size: 24px; } } .single-pricing-item-two .pricing-body .pricing-title h2.price span.duration { font: 400 16px "Roboto", sans-serif; } .single-pricing-item-two .pricing-body ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-size: 20px; } @media (max-width: 1199px) { .single-pricing-item-two .pricing-body ul li { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-pricing-item-two .pricing-body ul li { font-size: 20px; } } .single-pricing-item-two .pricing-body ul li:not(:last-child) { margin-bottom: 20px; } .single-pricing-item-two .pricing-body ul li i { margin-top: 5px; -webkit-margin-end: 12px; margin-inline-end: 12px; } .single-pricing-item-two .pricing-body .pricing-button .main-btn { margin-bottom: 9px; width: 100%; } /*---========================== 13. Shop css =========================----*/ /*--==== Product Filter ====--*/ @media (max-width: 767px) { .product-filter .show-text { text-align: center; } } .product-filter .product-dropdown { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 767px) { .product-filter .product-dropdown { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .product-filter .product-dropdown span.title { -webkit-margin-end: 20px; margin-inline-end: 20px; margin-bottom: 20px; } .product-filter .product-dropdown .nice-select { width: 170px; border: 1px solid rgba(11, 61, 44, 0.1); border-radius: 22px; padding: 0 20px; height: 44px; line-height: 44px; margin-bottom: 20px; } .product-filter .product-dropdown .nice-select:after { right: 20px; } /*--==== Product Style ====--*/ .single-product-item { position: relative; } .single-product-item .discount { padding: 3px 18px; font-weight: 500; position: absolute; top: 20px; right: 20px; border-radius: 10px; } .single-product-item .product-image img { width: 100%; height:300px; object-fit:cover; border-radius: 10px 10px 0 0; } .single-product-item .product-info { padding: 20px 35px; -webkit-box-shadow: 10px 0 60px rgba(195, 195, 195, 0.3); box-shadow: 10px 0 60px rgba(195, 195, 195, 0.3); border-radius: 0 0 10px 10px; } .single-product-item .product-info h4 { font-size: 20px; margin-bottom: 14px; } @media (max-width: 1199px) { .single-product-item .product-info h4 { font-size: 18px; } } .single-product-item .product-info span.price { font: 600 18px "Montserrat", sans-serif; } .product-gallery-area .product-big-slider .product-img a { display: block; } .product-gallery-area .product-big-slider .product-img img { width: 100%; border-radius: 20px; } .product-gallery-area .product-thumb-slider { margin-left: -15px; margin-right: -15px; cursor: pointer; } .product-gallery-area .product-thumb-slider .product-img { margin-left: 15px; margin-right: 15px; } .product-gallery-area .product-thumb-slider .product-img img { width: 100%; border-radius: 10px; } /*--==== Product Details ====--*/ .product-details-wrapper .product-info h4.title { font-size: 30px; margin-bottom: 10px; } @media (max-width: 575px) { .product-details-wrapper .product-info h4.title { font-size: 20px; } } .product-details-wrapper .product-info ul.ratings { margin-bottom: 10px; } .product-details-wrapper .product-info span.price { font: 600 20px "Montserrat", sans-serif; margin-bottom: 20px; } .product-details-wrapper .product-info P { margin-bottom: 10px; } .product-details-wrapper .product-info .product-cart ul li { display: inline-block; margin-bottom: 10px; } .product-details-wrapper .product-info .product-cart ul li .quantity-input { -webkit-margin-end: 15px; margin-inline-end: 15px; } .product-details-wrapper .product-info .product-meta { border-bottom: 1px solid rgba(11, 61, 44, 0.1); } .product-details-wrapper .product-info .product-meta li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-details-wrapper .product-info .product-meta li span { font: 600 16px "Montserrat", sans-serif; width: 30%; } .product-details-wrapper .product-info .product-meta li a { font-weight: 400; color: #484848; } .product-details-wrapper .product-info .product-meta li a:before { display: inline-block; content: ":"; -webkit-margin-end: 10px; margin-inline-end: 10px; -webkit-margin-start: 10px; margin-inline-start: 10px; } .product-details-wrapper .product-info ul.social-link li span { font: 600 16px "Montserrat", sans-serif; -webkit-margin-end: 25px; margin-inline-end: 25px; } .product-details-wrapper .product-info ul.social-link li a { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(42, 125, 46, 0.1); font-size: 14px; -webkit-margin-end: 5px; margin-inline-end: 5px; } /*--==== Description Tabs ====--*/ .description-tabs ul.nav .nav-item:first-child .nav-link { padding-left: 0px; } .description-tabs .nav-link { position: relative; padding: 0 30px 20px; font: 600 18px "Montserrat", sans-serif; border-bottom: 2px solid transparent; margin-bottom: 20px; } @media (max-width: 1199px) { .description-tabs .nav-link { padding: 0 15px 20px; font-size: 16px; } } .description-tabs .nav-link:hover, .description-tabs .nav-link.active { border-color: #0B3D2C; } /*--==== Description Wrapper ====--*/ .description-wrapper .content-box p { margin-bottom: 20px; } .description-wrapper .content-box ul.check-style-one li i { font-size: 16px; } /*--==== Review Area ====--*/ .review-form-area { padding: 55px 65px; border-radius: 20px; } @media (max-width: 1199px) { .review-form-area { padding: 55px 40px; } } .review-form-area h3.title { font-size: 27px; margin-bottom: 5px; } @media (max-width: 767px) { .review-form-area h3.title { font-size: 22px; } } .review-form-area P { margin-bottom: 22px; } .review-form-area P img { -webkit-margin-start: 10px; margin-inline-start: 10px; } .review-form .form_control { padding: 20px 25px; margin-bottom: 20px; border: 1px solid rgba(11, 61, 44, 0.1); border-radius: 10px; line-height: 1.5; } .review-form .form_control.placeholder { color: #0B3D2C; } .review-form .form_control:-moz-placeholder { color: #0B3D2C; } .review-form .form_control::-moz-placeholder { color: #0B3D2C; } .review-form .form_control::-webkit-input-placeholder { color: #0B3D2C; } /*--==== Product Slider ====--*/ .recent-product-slider { margin-left: -15px; margin-right: -15px; } .recent-product-slider .single-product-item { margin-left: 15px; margin-right: 15px; } /*--==== Cart CSS ====--*/ .cart-table table td { padding: 15px 20px; vertical-align: middle; } .cart-table table td.remove { -webkit-padding-start: 0; padding-inline-start: 0; } .cart-table table td.thumbnail-title img { width: 80px; height: 80px; border-radius: 10px; -webkit-margin-end: 20px; margin-inline-end: 20px; } .cart-table table td.thumbnail-title span.title { font: 600 18px "Montserrat", sans-serif; } .cart-table table td.subtotal { font-weight: 600; -webkit-padding-end: 0; padding-inline-end: 0; text-align: right; } .cart-middle form .form_group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 767px) { .cart-middle form .form_group { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .cart-middle form .form_group .form_control { width: 60%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; border: 1px solid #e1e1e1; padding: 17px 20px; line-height: 1.5; margin-right: 20px; } @media (max-width: 767px) { .cart-middle form .form_group .form_control { width: 100%; } } @media (max-width: 767px) { .cart-middle form .form_group .main-btn { margin-top: 20px; } } .shopping-cart-total { padding: 20px 30px; } .shopping-cart-total h4.title { margin-bottom: 20px; } .shopping-cart-total table td { font-weight: 500; } .shopping-cart-total table td.total { font-weight: 700; } .quantity-input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .quantity-input button { width: 60px; height: 56px; background-color: transparent; border: 1px solid rgba(11, 61, 44, 0.1); } .quantity-input input { width: 60px; height: 56px; border: 1px solid rgba(11, 61, 44, 0.1); text-align: center; } /*--==== Checkout CSS ====--*/ .checkout-faqs .alert { padding: 20px 25px; background-color: rgba(11, 61, 44, 0.1); } .checkout-faqs .alert h6 a { background-color: transparent; padding: 0; font-size: 14px; } .checkout-faqs .alert form { padding: 20px 0 10px; } .checkout-faqs .alert form p { margin-bottom: 15px; } .checkout-faqs .alert form .form_control { padding: 17px 20px; line-height: 1.5; font: 600 16px "Montserrat", sans-serif; background-color: transparent; border: 1px solid rgba(11, 61, 44, 0.1); color: #0B3D2C; } .checkout-faqs .alert form .form_control.placeholder { color: #0B3D2C; } .checkout-faqs .alert form .form_control:-moz-placeholder { color: #0B3D2C; } .checkout-faqs .alert form .form_control::-moz-placeholder { color: #0B3D2C; } .checkout-faqs .alert form .form_control::-webkit-input-placeholder { color: #0B3D2C; } .checkout-faqs .alert form .form_control:focus { border-color: #2A7D2E; } .checkout-faqs .alert .form-footer { margin-bottom: 10px; } .checkout-faqs .alert .form-footer .main-btn { margin-right: 15px; } .checkout-faqs .alert .form-footer input { margin-right: 10px; } .checkout-faqs .alert .form-footer label { cursor: pointer; margin-bottom: 0; } .checkout-faqs .alert a { font-weight: 600; } .checkout-form { padding: 30px; border: 1px solid rgba(11, 61, 44, 0.1); } .checkout-form h5 { margin-bottom: 20px; } .checkout-form .nice-select, .checkout-form .form_control { font: 600 16px "Montserrat", sans-serif; border: 1px solid rgba(11, 61, 44, 0.1); margin-bottom: 20px; padding: 17px 20px; line-height: 1.5; color: #0B3D2C; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .checkout-form .nice-select.placeholder, .checkout-form .form_control.placeholder { color: #0B3D2C; } .checkout-form .nice-select:-moz-placeholder, .checkout-form .form_control:-moz-placeholder { color: #0B3D2C; } .checkout-form .nice-select::-moz-placeholder, .checkout-form .form_control::-moz-placeholder { color: #0B3D2C; } .checkout-form .nice-select::-webkit-input-placeholder, .checkout-form .form_control::-webkit-input-placeholder { color: #0B3D2C; } .checkout-form .nice-select:focus, .checkout-form .form_control:focus { border-color: #2A7D2E; } .checkout-form .nice-select:after { right: 30px; } .payment-method { padding: 20px 30px; border: 1px solid rgba(11, 61, 44, 0.1); } .payment-method > p { margin-bottom: 20px; } .payment-method ul { border: 1px solid rgba(11, 61, 44, 0.1); } .payment-method li { padding: 15px 20px 15px 45px; } .payment-method li:not(:last-child) { border-bottom: 1px solid rgba(11, 61, 44, 0.1); } .payment-method .custom-control label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 600; cursor: pointer; } .payment-method .custom-control label:after { top: 7px; } .payment-method .custom-control label:before { top: 6.5px; } .payment-method .custom-control label i { margin-left: 15px; } /*---========================== 14. Blog css ==========================----*/ /*-=== Post Meta ====-*/ .post-meta span:not(:last-child):after { display: inline-block; content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: rgba(18, 74, 47, 0.2); vertical-align: middle; -webkit-margin-start: 30px; margin-inline-start: 30px; -webkit-margin-end: 24px; margin-inline-end: 24px; } /*-=== Blog Post ====-*/ .single-blog-post .post-thumbnail img { width: 100%; border-radius: 20px 20px 0 0; } .single-blog-post .entry-content { padding: 53px 35px 15px; background-color: #fff; -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); border-radius: 0px 0px 20px 20px; margin-top: -33px; position: relative; border-radius: 0 0 20px 20px; } .single-blog-post .entry-content .cat-link { font: 600 16px "Montserrat", sans-serif; margin-bottom: 9px; } .single-blog-post .entry-content .cat-link:before { display: inline-block; vertical-align: middle; content: ''; width: 36px; height: 2px; -webkit-margin-end: 15px; margin-inline-end: 15px; } .single-blog-post .entry-content h4.entry-title { margin-bottom: 15px; letter-spacing: -0.02em; } @media (max-width: 1199px) { .single-blog-post .entry-content h4.entry-title { font-size: 18px; line-height: 1.5; } } .single-blog-post .entry-content p { margin-bottom: 17px; } .single-blog-post .entry-content .author-meta { position: absolute; top: -33px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 84%; padding: 10px; background-color: #fff; -webkit-box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); border-radius: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; } .single-blog-post .entry-content .author-meta .author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .single-blog-post .entry-content .author-meta .author img { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 45px; height: 45px; border-radius: -50%; -webkit-margin-end: 10px; margin-inline-end: 10px; } .single-blog-post .entry-content .author-meta .author h6 { font-size: 16px; letter-spacing: -0.02em; } .single-blog-post .entry-content .author-meta .author h6 span { display: block; font-weight: 400; font-size: 14px; margin-bottom: 2px; } .single-blog-post .entry-content .author-meta .icon-btn { width: 45px; height: 45px; border-radius: 50%; color: #fff; } .single-blog-post .entry-content .author-meta .icon-btn i { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .single-blog-post .entry-content .post-meta { padding-top: 17px; border-top: 1px solid rgba(18, 74, 47, 0.1); } .single-blog-post-two { padding: 10px; -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); border-radius: 20px; } .single-blog-post-two .entry-content { padding: 30px; } @media (max-width: 991px) { .single-blog-post-two .entry-content { padding: 30px 15px; } } .single-blog-post-two .entry-content .post-meta { padding: 9px 25px; border: 1px solid rgba(11, 61, 44, 0.2); border-radius: 10px; margin-bottom: 18px; } @media (max-width: 991px) { .single-blog-post-two .entry-content .post-meta { padding: 9px 15px; } } .single-blog-post-two .entry-content .post-meta span { font-size: 14px; } .single-blog-post-two .entry-content .post-meta span:not(:last-child):after { -webkit-margin-start: 15px; margin-inline-start: 15px; -webkit-margin-end: 9px; margin-inline-end: 9px; } .single-blog-post-two .entry-content .author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .single-blog-post-two .entry-content .author img { width: 35px; height: 35px; border-radius: 50%; -webkit-margin-end: 7px; margin-inline-end: 7px; } .single-blog-post-two .entry-content .author h6 span { font-weight: 400; -webkit-margin-end: 10px; margin-inline-end: 10px; } .single-blog-post-two .entry-content h4.entry-title { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 15px; } .single-blog-post-two .post-thumbnail img { width: 100%; height: 200px; object-fit: cover; border-radius: 20px; } .single-blog-post-three { border-radius: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 40px 30px 40px 55px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .single-blog-post-three { padding: 40px 30px; } } .single-blog-post-three:hover { -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); } .single-blog-post-three .post-thumbnail { width: 45%; -webkit-margin-end: 50px; margin-inline-end: 50px; } @media (max-width: 1199px) { .single-blog-post-three .post-thumbnail { width: 100%; -webkit-margin-end: 0px; margin-inline-end: 0px; margin-bottom: 30px; } } .single-blog-post-three .post-thumbnail img { border-radius: 20px; width: 100%; } .single-blog-post-three .entry-content { width: 47%; } @media (max-width: 1199px) { .single-blog-post-three .entry-content { width: 100%; } } .single-blog-post-three .entry-content .post-meta { padding: 9px 25px; border: 1px solid rgba(11, 61, 44, 0.2); border-radius: 10px; margin-bottom: 18px; } .single-blog-post-three .entry-content .post-meta span:not(:last-child):after { -webkit-margin-start: 20px; margin-inline-start: 20px; -webkit-margin-end: 14px; margin-inline-end: 14px; } .single-blog-post-three .entry-content .author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; } .single-blog-post-three .entry-content .author img { width: 35px; height: 35px; border-radius: 50%; -webkit-margin-end: 10px; margin-inline-end: 10px; } .single-blog-post-three .entry-content .author h6 span { font-weight: 400; -webkit-margin-end: 10px; margin-inline-end: 10px; } .single-blog-post-three .entry-content h3.title { letter-spacing: -0.02em; margin-bottom: 17px; } @media (max-width: 767px) { .single-blog-post-three .entry-content h3.title { font-size: 22px; } } .single-blog-post-four { display: -webkit-box; display: -ms-flexbox; display: flex; } .single-blog-post-four .entry-content { padding: 40px 60px 40px 40px; border-radius: 20px; -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); max-width: 345px; margin-top: 45px; } @media (max-width: 1199px) { .single-blog-post-four .entry-content { max-width: 100%; } } @media (max-width: 991px) { .single-blog-post-four .entry-content { padding: 40px 30px 40px; } } .single-blog-post-four .entry-content .post-meta span.date { margin-bottom: 10px; } .single-blog-post-four .entry-content .post-meta span.date i { -webkit-margin-end: 10px; margin-inline-end: 10px; } .single-blog-post-four .entry-content h4.entry-title { font-size: 18px; line-height: 1.5; letter-spacing: -0.02em; margin-bottom: 23px; padding-bottom: 23px; border-bottom: 1px solid rgba(11, 61, 44, 0.1); } .single-blog-post-four .entry-content p { margin-bottom: 15px; } .single-blog-post-four .post-thumbnail { -webkit-margin-start: -35px; margin-inline-start: -35px; } @media (max-width: 1199px) { .single-blog-post-four .post-thumbnail { display: none; } } .single-blog-post-four .post-thumbnail img { border-radius: 20px; width: 100%; } /*-=== Blog Details Wrapper ====-*/ .blog-details-wrapper .blog-post .post-meta { padding: 9px 25px; border: 1px solid rgba(11, 61, 44, 0.2); border-radius: 10px; max-width: 630px; margin-bottom: 35px; } .blog-details-wrapper .blog-post .post-meta span.author img { width: 25px; height: 25px; border-radius: 50%; -webkit-margin-end: 5px; margin-inline-end: 5px; } .blog-details-wrapper .blog-post .post-meta span.author a { line-height: 19px; letter-spacing: -0.02em; font: 600 16px "Montserrat", sans-serif; } .blog-details-wrapper .blog-post .post-meta span.author a span { font-weight: 400; letter-spacing: 0; } .blog-details-wrapper .blog-post .entry-content h3.title { font-size: 30px; -webkit-padding-start: 40px; padding-inline-start: 40px; border-left: 5px solid #0B3D2C; font-size: 30px; margin-bottom: 18px; } @media (max-width: 767px) { .blog-details-wrapper .blog-post .entry-content h3.title { font-size: 24px; } } .blog-details-wrapper .blog-post .entry-content > p { margin-bottom: 38px; } .blog-details-wrapper .blog-post .entry-content .block-image { margin-bottom: 31px; } .blog-details-wrapper .blog-post .entry-content .wp-block-quote { position: relative; padding: 30px 40px 35px 110px; border-radius: 15px; } @media (max-width: 767px) { .blog-details-wrapper .blog-post .entry-content .wp-block-quote { padding: 30px 30px 35px; } } .blog-details-wrapper .blog-post .entry-content .wp-block-quote img { position: absolute; top: 37px; left: 40px; } @media (max-width: 767px) { .blog-details-wrapper .blog-post .entry-content .wp-block-quote img { position: relative; top: auto; left: auto; margin-bottom: 20px; } } .blog-details-wrapper .blog-post .entry-content .wp-block-quote h3 { font-size: 27px; margin-bottom: 10px; } @media (max-width: 767px) { .blog-details-wrapper .blog-post .entry-content .wp-block-quote h3 { font-size: 20px; } } .blog-details-wrapper .blog-post .entry-content .wp-block-quote span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: 600 16px "Roboto", sans-serif; } .blog-details-wrapper .blog-post .entry-content .wp-block-quote span:before { content: ''; width: 73px; height: 2px; -webkit-margin-end: 15px; margin-inline-end: 15px; } .blog-details-wrapper .blog-post .entry-footer { padding-top: 40px; padding-bottom: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 1199px) { .blog-details-wrapper .blog-post .entry-footer { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .blog-details-wrapper .blog-post .entry-footer .tag-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 575px) { .blog-details-wrapper .blog-post .entry-footer .tag-links { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .blog-details-wrapper .blog-post .entry-footer .tag-links h6 { -webkit-margin-end: 15px; margin-inline-end: 15px; font-size: 16px; margin-bottom: 10px; } .blog-details-wrapper .blog-post .entry-footer .tag-links a { padding: 7px 20px; font: 600 14px "Montserrat", sans-serif; line-height: 1.2; border: 1px solid rgba(11, 61, 44, 0.1); border-radius: 5px; -webkit-margin-end: 10px; margin-inline-end: 10px; margin-bottom: 10px; } .blog-details-wrapper .blog-post .entry-footer .tag-links a:hover { border-color: transparent; } .blog-details-wrapper .blog-post .entry-footer .social-share { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 1199px) { .blog-details-wrapper .blog-post .entry-footer .social-share { margin-top: 15px; } } .blog-details-wrapper .blog-post .entry-footer .social-share h6 { -webkit-margin-end: 15px; margin-inline-end: 15px; font-size: 16px; margin-bottom: 10px; } .blog-details-wrapper .blog-post .entry-footer .social-share a { -webkit-margin-end: 20px; margin-inline-end: 20px; margin-bottom: 10px; } /* Post Author Box */ .post-author-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); border-radius: 12px; padding: 40px; } @media (max-width: 575px) { .post-author-box { padding: 40px 30px; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .post-author-box .author-thumb { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 190px; height: 160px; -webkit-margin-end: 50px; margin-inline-end: 50px; } @media (max-width: 575px) { .post-author-box .author-thumb { margin-bottom: 40px; } } .post-author-box .author-content span.position { margin-bottom: 5px; } .post-author-box .author-content p { margin-bottom: 5px; } .post-author-box .author-content ul.social-link li { -webkit-margin-end: 10px; margin-inline-end: 10px; } /* Post Navigation Item */ .post-navigation-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 1px solid #D9D9D9; } @media (max-width: 1199px) { .post-navigation-item { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .post-navigation-item { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .post-navigation-item .post-nav-item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 290px; } .post-navigation-item .post-nav-item .thumb { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 80px; height: 80px; -webkit-margin-end: 20px; margin-inline-end: 20px; } .post-navigation-item .post-nav-item .content h6 { letter-spacing: -0.02em; line-height: 1.4; } .post-navigation-item .post-nav-item .content span.post-date { line-height: 1; } .post-navigation-item .post-nav-item .content span.post-date a i { -webkit-margin-end: 7px; margin-inline-end: 7px; } /* Comments Area */ .comments-area h3.comments-title { padding-bottom: 25px; border-bottom: 1px solid rgba(28, 35, 31, 0.1); } .comments-area .comment { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (max-width: 575px) { .comments-area .comment { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .comments-area .comment:nth-child(even) { -webkit-margin-start: 70px; margin-inline-start: 70px; } @media (max-width: 1199px) { .comments-area .comment:nth-child(even) { -webkit-margin-start: 50px; margin-inline-start: 50px; } } @media (max-width: 767px) { .comments-area .comment:nth-child(even) { -webkit-margin-start: 30px; margin-inline-start: 30px; } } .comments-area .comment .comment-avatar { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100px; height: 100px; -webkit-margin-end: 40px; margin-inline-end: 40px; } @media (max-width: 1199px) { .comments-area .comment .comment-avatar { -webkit-margin-end: 20px; margin-inline-end: 20px; } } @media (max-width: 575px) { .comments-area .comment .comment-avatar { margin-bottom: 20px; } } .comments-area .comment .comment-wrap { padding-bottom: 35px; border-bottom: 1px solid rgba(28, 35, 31, 0.1); } .comments-area .comment .comment-wrap .comment-author-content span.author-name { letter-spacing: -0.02em; margin-bottom: 5px; } .comments-area .comment .comment-wrap .comment-author-content span.author-name span.date { font: 400 16px "Roboto", sans-serif; display: block; color: #2F2F2F; margin-top: 8px; } .comments-area .comment .comment-wrap .comment-author-content P { margin-bottom: 5px; } .comments-area .comment .comment-wrap .comment-author-content .btn-link { text-decoration: none; } .comments-respond { padding: 42px 45px 50px; } @media (max-width: 767px) { .comments-respond { padding: 42px 30px 50px; } } .comments-respond h3.comments-heading { margin-bottom: 7px; } .comments-respond p { margin-bottom: 30px; } .comment-form .form_control { padding: 17px 20px; line-height: 1.5; border: 1px solid rgba(11, 61, 44, 0.1); -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); border-radius: 12px; margin-bottom: 20px; } /*-=== Sidebar Widget ====-*/ .sidebar-widget-area .sidebar-widget { padding: 30px 40px 40px; border: 1px solid rgba(11, 61, 44, 0.1); border-radius: 20px; } @media (max-width: 767px) { .sidebar-widget-area .sidebar-widget { padding: 30px 30px 40px; } } .sidebar-widget-area .sidebar-widget h4.widget-title { position: relative; border-bottom: 3px solid rgba(11, 61, 44, 0.1); margin-bottom: 20px; padding-bottom: 16px; } .sidebar-widget-area .sidebar-widget h4.widget-title:after { position: absolute; bottom: -3px; left: 0; content: ''; width: 85px; height: 3px; } .sidebar-widget-area .widget-search form label { position: absolute; top: 17px; right: 25px; } .sidebar-widget-area .widget-search form .form_control { -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); border-radius: 20px; height: 60px; padding: 0 25px; } .sidebar-widget-area .widget-post-author { padding: 0; border-radius: 0; border: none; } .sidebar-widget-area .widget-post-author .author-img img { width: 100%; border-radius: 20px 20px 0 0; } .sidebar-widget-area .widget-post-author .author-content { padding: 0 45px 40px; -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); border-radius: 0 0 20px 20px; } .sidebar-widget-area .widget-post-author .author-content .author-title-box { position: relative; margin-top: -30px; -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); padding: 20px 30px 17px; border-radius: 20px; margin-bottom: 30px; } .sidebar-widget-area .widget-post-author .author-content P { margin-bottom: 23px; } .sidebar-widget-area .widget-post-author .author-content ul.social-link { padding: 15px 30px; border: 1px solid rgba(11, 61, 44, 0.1); border-radius: 20px; } .sidebar-widget-area .widget-post-author .author-content ul.social-link li { margin-left: 2.5px; margin-right: 2.5px; } .sidebar-widget-area .widget-post-author .author-content ul.social-link li a { width: 45px; height: 45px; border-radius: 50%; } @media (max-width: 767px) { .sidebar-widget-area .widget-post-author .author-content ul.social-link li a { width: 40px; height: 40px; } } .sidebar-widget-area .widget-service-nav h4.widget-title { margin-bottom: 25px; } .sidebar-widget-area .widget-service-nav ul li:not(:last-child) { margin-bottom: 10px; } .sidebar-widget-area .widget-service-nav ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-color: rgba(11, 61, 44, 0.07); border-radius: 20px; padding: 19px 25px; font: 600 18px "Montserrat", sans-serif; } .sidebar-widget-area .widget-category ul li:not(:last-child) { margin-bottom: 23px; } .sidebar-widget-area .widget-category ul li a { display: block; font: 600 18px "Montserrat", sans-serif; letter-spacing: -0.02em; padding-bottom: 13px; border-bottom: 1px solid rgba(11, 61, 44, 0.15); } .sidebar-widget-area .widget-category ul li a i { float: right; } .sidebar-widget-area .widget-category ul li a:hover { border-color: #0B3D2C; } .sidebar-widget-area .widget-recent-post .recent-post-list .post-thumbnail-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sidebar-widget-area .widget-recent-post .recent-post-list .post-thumbnail-content:not(:last-child) { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #D9D9D9; } .sidebar-widget-area .widget-recent-post .recent-post-list .post-thumbnail-content img { width: 80px; height: 80px; border-radius: 50%; -webkit-margin-end: 20px; margin-inline-end: 20px; } .sidebar-widget-area .widget-recent-post .recent-post-list .post-thumbnail-content .post-title-date h6 { letter-spacing: -0.02em; font-weight: 600; line-height: 1.3; } @media (max-width: 767px) { .sidebar-widget-area .widget-recent-post .recent-post-list .post-thumbnail-content .post-title-date h6 { font-size: 16px; } } .sidebar-widget-area .widget-banner { border: none; } .sidebar-widget-area .widget-banner .banner-content h3.title { font: 700 30px "Montserrat", sans-serif; line-height: 36px; letter-spacing: -0.02em; margin-bottom: 10px; } .sidebar-widget-area .widget-banner .banner-content p { margin-bottom: 15px; } .sidebar-widget-area .widget-tag-cloud { padding: 30px 40px 30px; } .sidebar-widget-area .widget-tag-cloud a { padding: 7px 20px; background-color: rgba(11, 61, 44, 0.1); border-radius: 10px; margin-bottom: 10px; -webkit-margin-end: 5px; margin-inline-end: 5px; } .sidebar-widget-area .widget-newsletter .sidebar-content p { margin-bottom: 20px; } .sidebar-widget-area .widget-newsletter .sidebar-content .form_control { padding: 0 25px; background-color: rgba(11, 61, 44, 0.07); border-radius: 20px; height: 60px; margin-bottom: 10px; } .sidebar-widget-area .widget-newsletter .sidebar-content .main-btn { width: 100%; } .sidebar-widget-area .widget-price-filter { padding: 30px 40px 35px; } .sidebar-widget-area .widget-price-filter .price-number input { border: none; font: 600 16px "Montserrat", sans-serif; } .sidebar-widget-area .widget-price-filter .ui-widget-content { height: 3px; border: none; background-color: rgba(11, 61, 44, 0.1); margin-top: 40px; margin-bottom: 25px; } .sidebar-widget-area .widget-price-filter .ui-slider-range { height: 3px; } .sidebar-widget-area .widget-price-filter .ui-slider-horizontal .ui-slider-handle { top: -7px; -webkit-margin-start: 0; margin-inline-start: 0; height: 15px; width: 5px; border: none; border-radius: 0; outline: none; cursor: pointer; } .gadden-pagination li { display: inline-block; } .gadden-pagination li a { width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(11, 61, 44, 0.1); -webkit-margin-end: 5px; margin-inline-end: 5px; } .gadden-pagination li a:hover { border-color: transparent; } @media (max-width: 767px) { .gadden-pagination li a { width: 40px; height: 40px; font-size: 14px; } } /*---========================= 15. Contact css =========================----*/ /*-=== Contact Info Wrapper ====-*/ .contact-info-wrapper { border: 1px solid rgba(11, 61, 44, 0.1); border-radius: 20px; } .contact-info-wrapper > .row > .col-lg-4:not(:last-child) { border-right: 1px solid rgba(11, 61, 44, 0.1); } @media (max-width: 991px) { .contact-info-wrapper > .row > .col-lg-4:not(:last-child) { border-right: none; border-bottom: 1px solid rgba(11, 61, 44, 0.1); } } .contact-form-wrapper { background-color: #fff; -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); border-radius: 20px; padding: 60px 70px; } @media (max-width: 767px) { .contact-form-wrapper { padding: 60px 30px; } } .contact-wrapper .map-box { min-width: 670px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .contact-wrapper .map-box { min-width: 600px; } } @media (max-width: 1199px) { .contact-wrapper .map-box { min-width: 100%; } } .contact-wrapper .map-box iframe { width: 100%; height: 545px; } .contact-wrapper .contact-form-wrapper { min-width: 670px; margin-top: -210px; -webkit-margin-start: -105px; margin-inline-start: -105px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .contact-wrapper .contact-form-wrapper { min-width: 600px; } } @media (max-width: 1199px) { .contact-wrapper .contact-form-wrapper { min-width: 100%; } } @media (max-width: 991px) { .contact-wrapper .contact-form-wrapper { -webkit-margin-start: 0px; margin-inline-start: 0px; } } /*-=== Contact Information Item ====-*/ .contact-info-item { padding: 60px 75px 52px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .contact-info-item { padding: 60px 35px; } } @media (max-width: 575px) { .contact-info-item { padding: 60px 30px; } } .contact-info-item .icon { width: 120px; height: 120px; border-radius: 50%; background-color: #fff; -webkit-box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 7px 60px rgba(0, 0, 0, 0.07); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-bottom: 25px; } .contact-info-item .info span.title { font-weight: 500; margin-bottom: 5px; } .contact-info-item .info h6 { letter-spacing: -0.02em; line-height: 1.47; } .contact-info-item-two { max-width: 190px; } .contact-info-item-two h6.title { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; } .contact-info-item-two h6.title i { font-size: 24px; -webkit-margin-end: 10px; margin-inline-end: 10px; } .single-information-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .single-information-item .icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 45px; height: 45px; border-radius: 50%; -webkit-margin-end: 15px; margin-inline-end: 15px; } .single-information-item .info { line-height: 1; } .single-information-item .info span { font: 400 16px "Montserrat", sans-serif; line-height: 16.5px; margin-bottom: 11.5px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .single-information-item .info span { font-size: 14px; } } .single-information-item .info h5 { line-height: 17px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .single-information-item .info h5 { font-size: 15px; } } .single-info-item { position: relative; padding: 35px 40px 40px; overflow: hidden; z-index: 1; border-radius: 20px; } @media (max-width: 767px) { .single-info-item { padding: 35px 30px 40px; } } .single-info-item .shape { position: absolute; z-index: -1; } .single-info-item .shape.shape-one { bottom: 30px; right: -70px; } .single-info-item .info span { font-weight: 500; margin-bottom: 7px; } .single-info-item .info h4.title { margin-bottom: 20px; } .single-info-item .info .main-btn { font: 600 16px "Montserrat", sans-serif; padding: 15px 30px; line-height: 20px; } .single-info-item.style-one .info span { color: #fff; } .single-info-item.style-one .info h4.title { color: #fff; } .single-info-item.style-two .info h4.title { color: #fff; } /*-=== Contact Form ====-*/ .contact-form label { position: absolute; top: -4px; left: 0; } .contact-form .form_control { font: 600 16px "Montserrat", sans-serif; height: auto; -webkit-padding-start: 30px; padding-inline-start: 30px; padding-bottom: 24px; border-bottom: 1px solid rgba(11, 61, 44, 0.1); margin-bottom: 25px; color: #0B3D2C; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .contact-form .form_control.placeholder { color: #0B3D2C; opacity: 1; } .contact-form .form_control:-moz-placeholder { color: #0B3D2C; opacity: 1; } .contact-form .form_control::-moz-placeholder { color: #0B3D2C; opacity: 1; } .contact-form .form_control::-webkit-input-placeholder { color: #0B3D2C; opacity: 1; } .contact-form .form_control:focus { border-color: #2A7D2E; } .contact-form textarea.form_control { padding-top: 0; } .contact-form .has-error .help-block.with-errors { color: red; margin-top: -25px; } /*---========================= 16. Footer css =========================----*/ .footer-area { position: relative; z-index: 1; } .footer-area .shape { position: absolute; } @media (max-width: 575px) { .footer-area .shape { display: none; } } .footer-area .shape.shape-one { bottom: 100px; left: 70px; } .footer-area .shape.shape-two { position: absolute; top: 145px; right: 70px; -webkit-animation-delay: 2s; animation-delay: 2s; } .gray-bg .copyright-area { border-color: rgba(0, 0, 0, 0.15); } .gray-bg .copyright-area .copyright-nav ul li a { color: #2f2f2f; } .gray-bg .copyright-area .copyright-nav ul li a:hover:after { background-color: #2f2f2f; } /*--==== Footer Widget ====--*/ .footer-widget h4.widget-title { font-size: 20px; } .footer-widget h4.widget-title:after { display: block; content: ''; width: 50px; height: 2px; margin-top: 20px; margin-bottom: 31px; } .footer-about-widget .widget-content > p { margin-bottom: 25px; } .footer-about-widget .widget-content .main-btn { padding: 7px 30px; line-height: 24px; font-size: 14px; } .footer-about-widget .widget-content .main-btn.filled-btn { border-radius: 40px; } .footer-about-widget .widget-content .main-btn.filled-btn:hover { border-color: transparent; } .footer-about-widget .widget-content form .form_control { -webkit-box-shadow: 0px 5px 60px rgba(0, 0, 0, 0.05); box-shadow: 0px 5px 60px rgba(0, 0, 0, 0.05); padding: 20px 55px 20px 25px; line-height: 1.5; color: #2f2f2f; } .footer-about-widget .widget-content form .form_control.placeholder { color: #2f2f2f; } .footer-about-widget .widget-content form .form_control:-moz-placeholder { color: #2f2f2f; } .footer-about-widget .widget-content form .form_control::-moz-placeholder { color: #2f2f2f; } .footer-about-widget .widget-content form .form_control::-webkit-input-placeholder { color: #2f2f2f; } .footer-about-widget .widget-content form .submit-btn { position: absolute; top: 10px; right: 10px; width: 45px; height: 45px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .contact-info-widget .info-list li:not(:last-child) { margin-bottom: 10px; } .footer-nav-widget .footer-nav li:not(:last-child) { margin-bottom: 10px; } .footer-nav-widget .footer-nav li a { position: relative; line-height: 19px; } .footer-nav-widget .footer-nav li a:hover:after { width: 100%; } .footer-nav-widget .footer-nav li a:after { position: absolute; bottom: 0; left: 0; content: ''; width: 0%; height: 1px; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .footer-experience-widget .experience-box-two { border-top-color: #F1D2A9; } .footer-gallery-widget .gallery-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } .footer-gallery-widget .gallery-list li { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 30.8%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-gallery-widget .gallery-list li { width: 30.1%; } } @media (max-width: 767px) { .footer-gallery-widget .gallery-list li { width: 30.5%; } } .footer-gallery-widget .gallery-list li a { position: relative; display: block; overflow: hidden; border-radius: 7px; } .footer-gallery-widget .gallery-list li a:hover .hover-overlay { visibility: visible; opacity: 1; } .footer-gallery-widget .gallery-list li a img { width: 100%; border-radius: 7px; } .footer-gallery-widget .gallery-list li a .hover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(42, 125, 46, 0.55); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-gallery-widget .gallery-list li a .hover-overlay i { width: 30px; height: 30px; border-radius: 50%; font-size: 12px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } /*--==== Copyright Area ====--*/ .copyright-area { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 34px 0; } @media (max-width: 991px) { .copyright-area .copyright-text { text-align: center; } } @media (max-width: 991px) { .copyright-area .copyright-nav { text-align: center; margin-top: 15px; } } .copyright-area .copyright-nav ul li { display: inline-block; } .copyright-area .copyright-nav ul li:not(first-child) { -webkit-margin-start: 35px; margin-inline-start: 35px; } @media (max-width: 991px) { .copyright-area .copyright-nav ul li:not(first-child) { -webkit-margin-end: 15px; margin-inline-end: 15px; -webkit-margin-start: 15px; margin-inline-start: 15px; } } .copyright-area .copyright-nav ul li a { position: relative; } .copyright-area .copyright-nav ul li a:after { position: absolute; bottom: 0; left: 0; content: ''; width: 0; height: 1px; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .copyright-area .copyright-nav ul li a:hover:after { width: 100%; } /*--==== Footer Wave ====--*/ .footer-wave { overflow: hidden; } .footer-wave .wave-shapes { position: absolute; z-index: -1; top: 1px; left: -100px; width: calc(100% + 100px); } .footer-wave .wave-shapes .w-shape { position: absolute; top: 0; left: 0; width: 100%; height: 100px; -webkit-animation: wave 6s infinite; animation: wave 6s infinite; } .footer-wave .wave-shapes .w-shape.two { -webkit-animation-delay: 3s; animation-delay: 3s; } /*---=========================== 17. Sections css ==========================----*/ /*--==== Section Css ====--*/ .about-bg-section { position: relative; z-index: 2; } .about-bg-section .about-bg { position: absolute; bottom: 1px; left: 0; width: 45%; height: 100%; border-radius: 0px 40px 40px 0px; } @media (max-width: 991px) { .about-bg-section .about-bg { display: none; } } .choose-bg-section { background-attachment: fixed; } .choose-bg-section:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(18, 74, 47, 0.9); z-index: -1; } .cta-bg-section { background-attachment: fixed; } .cta-bg-section:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(18, 74, 47, 0.8); z-index: -1; } .service-bgc-section .shape { position: absolute; z-index: -1; } @media (max-width: 767px) { .service-bgc-section .shape { display: none; } } .service-bgc-section .shape.shape-one { top: 0; left: 85px; } .service-bgc-section .shape.shape-two { top: 0; right: 85px; } .service-bgc-section .shape.shape-three { bottom: 0; left: 0; right: 0; } .features-section-two .experience-box-two { position: absolute; bottom: 100px; right: 19%; max-width: 260px; padding: 25px 75px 35px; border-radius: 0px 0px 129.504px 129.504px; } .features-section-two .experience-box-two h2.number { font-size: 80px; letter-spacing: -0.02em; } .features-section-two .experience-box-two h6 { font-size: 24px; letter-spacing: -0.02em; } .features-section-two .experience-box-two .icon-btn { width: 70px; height: 70px; font-size: 24px; } .features-section-two .experience-box-two .icon-btn i { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .gallery-section-minus { position: relative; margin-bottom: -335px; overflow: hidden; } .fact-bg-section { padding-top: 465px; position: relative; } .fact-bg-section .circle-wrapper { position: absolute; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); max-width: 690px; z-index: -1; } @media (max-width: 575px) { .fact-bg-section .circle-wrapper { display: none; } } .fact-bg-section .circle-wrapper span { border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 50%; } .fact-bg-section .circle-wrapper span:nth-child(1) { width: 690px; height: 690px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .fact-bg-section .circle-wrapper span:nth-child(1) { width: 590px; height: 590px; } } .fact-bg-section .circle-wrapper span:nth-child(2) { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 500px; height: 500px; } .fact-bg-section .circle-wrapper span:nth-child(3) { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 330px; height: 330px; } .testimonial-section-two .testimonial-bg { position: absolute; top: 0; left: 0; width: 76%; height: 100%; z-index: -1; } @media (max-width: 1199px) { .testimonial-section-two .testimonial-bg { width: 100%; } } .testimonial-section-two .testimonial-bg:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(11, 61, 44, 0.7); z-index: -1; } .testimonial-section-two .testimonial-content-box { padding-left: 305px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .testimonial-section-two .testimonial-content-box { padding-left: 55px; } } @media (max-width: 1199px) { .testimonial-section-two .testimonial-content-box { padding-left: 0px; } } .testimonial-section-two .testimonial-wrapper-three { margin-left: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .testimonial-section-two .testimonial-wrapper-three { margin-left: 0px; } } @media (max-width: 1199px) { .testimonial-section-two .testimonial-wrapper-three { margin-left: 0px; } } /*--==== Wrapper CSS ====--*/ .about-wrapper { padding: 30px 100px 30px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .about-wrapper { padding: 30px 50px 30px; } } @media (max-width: 1199px) { .about-wrapper { padding: 30px 30px 30px; } } @media (max-width: 575px) { .about-wrapper { padding: 30px 15px 30px; } } .about-wrapper .about-three_content-box { padding-top: 50px; } .about-wrapper-two { padding: 30px; z-index: 1; } .features-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding-top: 100px; } @media (max-width: 1199px) { .features-wrapper { padding-top: 0; } } .features-wrapper .features-bg { position: absolute; top: 0; left: 0; width: 66.5%; height: 100%; } @media (max-width: 1199px) { .features-wrapper .features-bg { display: none; } } .features-wrapper .features-bgc-content-box { z-index: 1; margin-bottom: -100px; width: 54%; padding: 100px 280px 70px 100px; } .features-wrapper .features-bgc-content-box .features-content-box { max-width: 640px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .features-wrapper .features-bgc-content-box { padding: 50px 70px 50px; } } @media (max-width: 1199px) { .features-wrapper .features-bgc-content-box { width: 100%; padding: 50px 45px 50px; } } @media (max-width: 767px) { .features-wrapper .features-bgc-content-box { width: 100%; padding: 50px 15px 50px; } } .features-wrapper-two { position: relative; z-index: 1; max-width: 1160px; padding: 70px; margin-top: -80px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .features-wrapper-two { max-width: 100%; } } @media (max-width: 1199px) { .features-wrapper-two { padding: 70px 30px; max-width: 100%; } } .features-wrapper-two .shape { position: absolute; z-index: -1; bottom: 0; } .features-wrapper-two .shape.shape-one { left: 22%; -webkit-transform: translateX(-22%); -moz-transform: translateX(-22%); -ms-transform: translateX(-22%); -o-transform: translateX(-22%); transform: translateX(-22%); } .features-wrapper-two .shape.shape-two { left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .features-wrapper-two .shape.shape-three { left: 78%; -webkit-transform: translateX(-78%); -moz-transform: translateX(-78%); -ms-transform: translateX(-78%); -o-transform: translateX(-78%); transform: translateX(-78%); } .choose-wrapper { border-radius: 20px; padding: 40px 40px 40px 70px; } @media (max-width: 767px) { .choose-wrapper { padding: 40px 30px 40px; } } .skill-wrapper { padding: 61px 70px 25px; border-radius: 20px; position: relative; z-index: 1; } @media (max-width: 767px) { .skill-wrapper { padding: 61px 30px 25px; } } .skill-wrapper .shape { position: absolute; } .skill-wrapper .shape.shape-one { bottom: 0; right: 65px; } .skill-wrapper .shape.shape-one span img { opacity: 0.05; } .skill-wrapper .section-title h2 { font-size: 30px; } .working-process-wrapper { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 30px; } @media (max-width: 991px) { .working-process-wrapper { border: none; } } .working-process-wrapper > .row .col-lg-3:not(:last-child) .single-process-item { border-right: 1px solid rgba(0, 0, 0, 0.1); } @media (max-width: 991px) { .working-process-wrapper > .row .col-lg-3:not(:last-child) .single-process-item { border-right: none; } } .testimonial-quote-area .shape { position: absolute; z-index: -1; } .testimonial-quote-area .shape.shape-one { top: 80px; right: 120px; } .testimonial-wrapper { border-radius: 40px; -webkit-box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); position: relative; padding: 100px 0; z-index: 1; } @media (max-width: 767px) { .testimonial-wrapper { padding: 50px 0; } } .testimonial-wrapper .shape { position: absolute; } @media (max-width: 991px) { .testimonial-wrapper .shape { display: none; } } .testimonial-wrapper .shape.shape-one { top: 40px; left: 45px; } .testimonial-wrapper .shape.shape-one img { border-radius: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-wrapper .shape.shape-one img { width: 80%; } } .testimonial-wrapper .shape.shape-two { top: 0; right: 0; } .testimonial-wrapper .shape.shape-two img { border-radius: 0px 40px 0px 100px; } .testimonial-wrapper .shape.shape-three { bottom: 0; left: 0; } .testimonial-wrapper .shape.shape-three img { border-radius: 0px 100px 0px 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-wrapper .shape.shape-three img { width: 80%; } } .testimonial-wrapper .shape.shape-four { left: 10%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .testimonial-wrapper .shape.shape-four { left: 5%; } } .testimonial-wrapper .shape.shape-five { right: 8%; bottom: 12%; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .testimonial-wrapper .shape.shape-five { right: 5%; bottom: 10%; } } .testimonial-wrapper-two { padding: 100px 90px; -webkit-box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1); border-radius: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .testimonial-wrapper-two { padding: 50px 70px; } } @media (max-width: 1199px) { .testimonial-wrapper-two { padding: 50px 70px; } } @media (max-width: 767px) { .testimonial-wrapper-two { padding: 50px 30px; } } @media (max-width: 767px) { .cta-wrapper .cta-content-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } } .cta-wrapper .cta-content-box .circle-logo { -webkit-margin-end: 35px; margin-inline-end: 35px; } @media (max-width: 767px) { .cta-wrapper .cta-content-box .circle-logo { -webkit-margin-end: 0; margin-inline-end: 0; } } @media (max-width: 1199px) { .cta-wrapper .cta-content-box h2 { font-size: 36px; } } @media (max-width: 767px) { .cta-wrapper .cta-content-box h2 { font-size: 28px; } } @media (max-width: 767px) { .cta-wrapper .cta-button { text-align: center; } } .quote-wrapper { padding: 80px 100px; } @media (max-width: 1199px) { .quote-wrapper { padding: 80px 30px; } } @media (max-width: 991px) { .quote-wrapper { padding: 40px 30px; } } .process-wrapper .shape { position: absolute; z-index: -1; } .process-wrapper .shape.line-shape { top: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .process-wrapper .shape.line-shape { top: 40px; } } @media (max-width: 575px) { .process-wrapper .shape.line-shape { display: none; } } .main-bg .counter-area { border-top: 1px solid rgba(255, 255, 255, 0.1); } .main-bg .client-quote-box .icon { border-color: rgba(255, 255, 255, 0.1); } .main-bg .quote-wrapper { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .main-bg .testimonial-dots ul.slick-dots li.slick-active { border-color: #fff; } .main-bg .testimonial-dots ul.slick-dots li:after { background-color: #fff; } .main-bg .single-testimonial-item-three .testimonial-inner-content .quote-title { border-color: rgba(255, 255, 255, 0.2); } .mfp-wrap { z-index: 99900; } @media (min-width: 576px) { .sidebar-panel-wrapper .modal-dialog { max-width: 100%; margin: 0; } } .sidebar-panel-wrapper .close { position: absolute; top: 35px; right: 35px; text-shadow: none; font-size: 24px; opacity: 1; } .sidebar-panel-wrapper .sidebar-wrapper { padding: 100px 210px 70px; } @media (max-width: 1199px) { .sidebar-panel-wrapper .sidebar-wrapper { overflow-y: auto; padding: 70px 50px 40px; } } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-widget { padding: 0 100px; } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-widget { padding: 0 30px; } } @media (max-width: 1199px) { .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-widget { padding: 0 15px; } } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-widget:nth-child(1) { -webkit-padding-start: 0; padding-inline-start: 0; } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-widget:nth-child(2) { border-right: 1px solid rgba(255, 255, 255, 0.1); border-left: 1px solid rgba(255, 255, 255, 0.1); } @media (max-width: 991px) { .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-widget:nth-child(2) { border: none; } } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-widget:nth-child(3) { -webkit-padding-end: 0; padding-inline-end: 0; } @media (max-width: 991px) { .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-widget { margin-bottom: 40px; } } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget h4.title { font-size: 18px; } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget h4.title:after { display: block; content: ''; width: 50px; height: 2px; margin-top: 23px; margin-bottom: 60px; } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget .footer-logo { margin-bottom: 53px; } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget p { margin-bottom: 50px; color: #aaa; } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget .social-item h6 { margin-bottom: 20px; } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget .social-item ul.social-link li:not(:last-child) { -webkit-margin-end: 5px; margin-inline-end: 5px; } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget .social-item ul.social-link li a { width: 45px; height: 45px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-information-area .sidebar-info-widget form .form_control { padding: 18px 30px; line-height: 29px; border-radius: 20px; margin-bottom: 20px; } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-gallery { border-top: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-panel-wrapper .sidebar-wrapper .sidebar-gallery .single-gallery-item { margin-bottom: 30px; } .header-navigation .main-menu ul > li .sub-menus{ position: absolute; left: 23%; top: 120%; width: 49%; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; z-index: 99; padding: 15px 0; height: auto; text-align: left; border-bottom-left-radius: 23px; border-bottom-right-radius:23px; -webkit-box-shadow: 0 30px 70px 0 rgba(137, 139, 142, 0.15); box-shadow: 0 30px 70px 0 rgba(137, 139, 142, 0.15); background:#fff; } .header-navigation .main-menu ul > li .sub-menus li a{ text-wrap: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 15px 0; position: relative; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-radius: 0; line-height: 2.5; margin: 0; border-radius: 5px; flex-direction:column; width:120px; } #mobile-products{ display:none !important; } .header-navigation .main-menu ul > li .sub-menus li a > img{ border-radius:100%; } .header-navigation .main-menu ul > li .sub-menus li a > span{ font-size:12px; color:#000; } .header-navigation .main-menu ul > li.has-childrens:hover > .sub-menus { opacity: 1; visibility: visible; top: 100%; } @media (max-width: 1200px) { .header-navigation .main-menu ul > li.has-childrens{ display: none !important; } #mobile-products{ display:block !important; } }