@media (max-width: 1200px) { .container { padding-left: 15px; padding-right: 15px; } } @media screen and (max-width: 1024px) { :root { --sidebar-width: 320px; } /** Header **/ .menu-item-button.no-hover { display: none; } .nav-classic .inner-row { padding: 10px; } .contact-info .quickcontact { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 10px; } .headerfour .nav-classic .inner-row { padding: 50px 0; } .headerfour .nav-menu .container{ padding: 0; } .headerfive .nav-classic .inner-row{ justify-content: unset; display: inherit; } .banner-slider .slider-item .banner-content-area .slider-content { padding: 20px; } .banner-slider .owl-dots{ display: none; } .d-grid-column-3, .d-grid-column-4, .d-grid-column-5, .d-grid-column-6 { grid-template-columns: repeat(3, 1fr); } /** Highlight **/ .highlight-section .highlight-list:hover .bottom-content-wrap p{ overflow: scroll; } /** Call To Action **/ .calltoaction_promo_wrapper .calltoaction_full_widget_content .calltoaction_subtitle { width: 100%; } /** contact **/ .contact-section.style3 .get-touch-contact { grid-template-columns: repeat(3, 1fr); display: grid; } .contact-content, .contact-section.style3 .contact-content, .contact-section.style2 .contact-content { grid-template-columns: repeat(2, 1fr); } .blog-section.style4 .has-post-thumbnail.article .box-content{ margin: -35px 10px 25px; } } @media screen and (max-width: 768px) { .d-flex { flex-direction: column; row-gap: 1rem; } .nav-classic-container-wrapper .d-flex, .headersix .nav-classic .d-flex{ align-items: normal; } .quickcontact .get-tuch{ margin-right: 0; } .contact-info .quickcontact .get-tuch:last-child{ grid-column: auto / span 2; justify-content: center; } /** Header **/ .nav-classic .nav-menu .box-header-nav{ display: none; } .nav-classic .header-nav-toggle { display: block; } .site-branding { width: 100%; display: flex; justify-content: space-between; padding: 20px 0; } .custom-logo-link img { width: 250px; } header.headerthree { position: relative; } .h-grid2 { grid-template-columns: 1fr; } .headertwo .nav-classic .inner-row, .headerfour .nav-classic .inner-row{ padding: 10px; } .headerfive .nav-classic .inner-row .site-brandinglogo { display: block; } .headersix .site-branding { left: 0; padding: 0; } .layout_four .banner-wrapper, .layout_four .breadcrumb-section { margin-top: 0; } /** Slider **/ .banner-slider .slider-item { justify-content: center; } /* .banner-slider .slider-item .banner-content-area .slider-content { padding: 10px 50px; } */ .banner-slider .slider-item .slider-content .maintitle { font-size: 48px; } .banner-slider .slider-item .slider-content p { font-size: 20px; } .style2 .features-slider.owl-carousel .owl-nav button.owl-prev { left: 1%; } .style2 .features-slider.owl-carousel .owl-nav button.owl-next { right: 1%; } .style2 .features-slider.owl-carousel .owl-nav button.owl-next, .style2 .features-slider.owl-carousel .owl-nav button.owl-prev { width: 3rem; height: 3rem; } .style1.banner-slider .owl-dots .owl-dot{ display: none; } /** Home Section **/ .section { padding: 40px 0; } .section-title-wrapper .section-title { margin-bottom: 0; } .section-title-wrapper.style2 .section-title { margin-bottom: 10px; padding-bottom: 10px; } .section-title-wrapper.style4 .super-title { font-size: 48px; } .section-title-wrapper.style3 .super-title { font-size: 48px; -webkit-transform: translateY(-35px); transform: translateY(-35px); } .d-grid-column-2, .d-grid-column-3, .d-grid-column-4, .d-grid-column-5, .d-grid-column-6 { grid-template-columns: repeat(2, 1fr); } .style2 .promoservice-wrap .feature-list .image-disable .bottom-content{ position: relative; } .style2 .promoservice-wrap .top-content-wrap, .style2 .promoservice-wrap.d-grid-column-5 .top-content-wrap, .style2 .promoservice-wrap.d-grid-column-6 .top-content-wrap { margin-top: 0; } .style2 .promoservice-wrap .feature-list .bottom-content h4 a{ color: #ffffff; } .style2 .promoservice-wrap .bottom-content-wrap { opacity: 1; overflow: visible; color: #ffffff; } .style3 .promoservice-wrap .feature-list .box { flex-direction: column; } .style3 .promoservice-wrap .feature-list .box figure, .style3 .promoservice-wrap .feature-list .box.image-enable .bottom-content { width: 100%; } /** About Section **/ .layoutone.about_us_front .about-wrapper, .layouttwo.about_us_front .about-wrapper { flex-direction: column; } .about_us_front .about-wrapper .about-left, .about_us_front .about-wrapper .about-right { width: 100%; } /** Portfolio **/ .recentwork-list .content-wrap { transform: scaleY(1); } .recentwork-list::after { background: #000000b0; opacity: 1; } #recentwork-section .recentwork-list .content-wrap a.btnprimary { background-color: var(--theme-color); } .recentwork-list .content-wrap{ left: 0; right: 0; margin: 0 auto; text-align: center; } .gallery-wrapper .gallery-item .gallery-button{ opacity: 1; } /** Team **/ .team-section.style3 .team-wrap ul.sp_socialicon { opacity: 1; } .team-section .team-wrap span{ margin: 0; } .team-section.style3 .box .team-wrap { padding: 10px; } .team-section.style2 .box { flex-direction: column; } .team-section.style2 .box figure, .team-section.style2 .box .team-wrap { float: none; width: 100%; } /** Blog **/ .blog-section.style2 .d-grid-column-2, .blog-section.style2 .d-grid-column-3, .blog-section.style2 .d-grid-column-4, .blog-section.style2 .d-grid-column-5, .blog-section.style2 .d-grid-column-6{ grid-template-columns: repeat(1, 1fr); } .blog-section.style3 .btns .btn{ padding: 15px; } /** News & Update **/ .news-section .news-list-item{ gap: 0; } .news-section.style3 .news-list-item:nth-child(odd), .news-section.style1 .news-list-item:nth-child(odd), .news-section.style2 .news-list-item:nth-child(even) { flex-direction: column; border-radius: 0; } .news-section.style3 .news-list-item:nth-child(odd) figure, .news-section.style3 .news-wrap-list figure { left: 0; } .news-section.style3 .news-wrap-list .bottom-content { min-height: auto; padding: 20px; } .news-section .news-wrap-list figure { flex-basis: auto; flex-grow: initial; } .news-section.style2 .news-wrap-list .bottom-content .inner-content-wrap, .news-section.style2 .news-list-item:nth-child(even) .bottom-content .inner-content-wrap { right: 0; padding: 20px; } .news-section .news-wrap-list .bottom-content .inner-content-wrap, .news-section.style1 .news-wrap-list .bottom-content .inner-content-wrap { padding: 20px; text-align: center; } /** Testimonial **/ .testimonial-section.style3 .testimonial_slide_box{ padding: 15px; } .testimonial-section.style3 .testimonial_single_inner .review_star{ right: 10px; } /** Call To Action **/ .cta-left.cta-innerwrapper, .cta-innerwrapper { flex-direction: column; } .cta-innerwrapper.withimage.cta-left .cat-content-wrap, .cta-innerwrapper.withimage.cta-right .cat-image-wrap, .cta-innerwrapper.withimage .cat-content-wrap, .cta-innerwrapper.withimage .cat-image-wrap { width: 100%; } .video_calltoaction .inner-section-wrap .d-grid-column-2 { grid-template-columns: repeat(1, 1fr); } /** How It Works **/ .how_it_works.style4 .how_it_works_block .block_items .step_img::after{ display: none; } /** Service **/ .service-section .feature_detail .feature_img{ display: none; } .service-section .feature_detail .feature_box .data_block{ margin-bottom: 25px; } .service-section.style3 .section-inner-wrap.d-grid-column-2{ grid-template-columns: repeat(1, 1fr); } .service-img-wrap .feature_img img{ width: 100%; } .service-section.style3 .service-content-wrap .service-block{ padding-bottom: 25px; } /** Contact Section **/ .contact-content, .contact-section.style2 .contact-content, .contact-section.style3 .contact-content{ grid-template-columns: 1fr; } .contact-section.style3 .get-touch-contact { flex-direction: column; display: grid; grid-template-columns: repeat(2, 1fr); } .contact-section.style3 .get-touch-contact .get-touch{ margin-bottom: 0; } /** Footer **/ .d-grid.col-3-1-2, .d-grid.col-3-2-1, .d-grid.col-4-1-1-2, .d-grid.col-4-2-1-1, .d-grid.col-4-1-2-1, .d-grid.col-4-1-3, .d-grid.col-4-3-1{ grid-template-columns: repeat(2, 1fr); } /** Blog (index, category,tag) **/ .d-blog-grid-column-2, .d-grid.d-blog-grid-column-2.sidebar-left, .articlesListing.d-grid-column-2.style2, .articlesListing.d-grid-column-3.style2, .articlesListing.d-grid-column-4.style2, .articlesListing.d-grid-column-5.style2, .articlesListing.d-grid-column-6.style2{ grid-template-columns: repeat(1, 1fr); } .prevNextArticle.d-flex{ flex-direction: inherit; } .prevNextArticle.d-flex .prevnext-item{ width: 50%; } } @media screen and (max-width: 480px) { .desktop-text-left, .text-left, .desktop-text-right, .text-right { text-align: center; } .btn { padding: 12px 15px; } .nav-classic .inner-row { padding: 0; } /** Header **/ .top-bar-menu.left, .top-bar-menu.right, .top-bar-menu ul{ text-align: center; } .top-bar-menu ul li{ margin-bottom: 10px; } .top-bar-menu ul li:last-child{ margin-bottom: 0; } .contact-info .quickcontact { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .contact-info .quickcontact .get-tuch{ justify-content: center; } .contact-info .quickcontact .get-tuch:last-child { grid-column: auto; margin-bottom: 20px; } .headersix .site-brandinglogo { background-color: transparent; clip-path: none; -webkit-clip-path: none; padding: 0; padding-right: 0; } .headersix .site-branding { padding: 20px 0; } /** Slider **/ .banner-slider .slider-item .banner-content-area .slider-content { padding: 20px; } .banner-slider .slider-item .slider-content .supertitle { border-bottom: 0; margin-bottom: 0; font-size: 18px; } .banner-slider .slider-item .banner-content-area .slider-content .maintitle { font-size: 28px; } .banner-slider .slider-item .slider-content p{ display: none; } .banner-slider .slider-item .btn-area { gap: 1rem; flex-direction: column; } .banner-slider .btn-area .about-video-link, .banner-slider .btn-area .btn.style-white{ display: none; } .style2.banner-slider .owl-dots, .style3.banner-slider .owl-dots, .style1.banner-slider .owl-nav { right: 0; left: 0; justify-content: center; } .style1.banner-slider .owl-nav button.owl-next, .style1.banner-slider .owl-nav button.owl-prev { height: 40px; width: 40px; line-height: 40px; } /** Home Section **/ .section-title-wrapper.style2.text-right .section-title::before{ left: 0; } .section-title-wrapper.style2.text-left .section-title::before{ right: 0; } .section-title-wrapper.text-left.style5 { padding-left: 0; border-left: 0; } .section-title-wrapper.text-right.style5 { padding-right: 0; border-right: 0; } .section-title-wrapper .super-title:before, .section-title-wrapper .super-title:after{ display: none; } .section { padding: 20px 0; } .section-title-wrapper.style3 .super-title, .section-title-wrapper.style4 .super-title { font-size: 30px; } .widget-area .widget h2, .section-title-wrapper .section-title { font-size: 24px; } .d-grid-column-1, .d-grid-column-2, .d-grid-column-3, .d-grid-column-4, .d-grid-column-5, .d-grid-column-6 { grid-template-columns: repeat(1, 1fr); } /** About Section **/ .about-profile { gap: 1rem; flex-direction: column; } /** Blog **/ .blog-section.style2 .blog-item .article { flex-direction: column; } .blog-section.style2 .blog-item .article .blog-post-thumbnail { max-width: 100%; min-width: 100%; min-height: auto; } /** Call To Action **/ .calltoaction-section .section-title { font-size: 24px; } .calltoaction_promo_wrapper .calltoaction_full_widget_content .calltoaction_subtitle { width: 100%; } .calltoaction_promo_wrapper .calltoaction_button_wrap { flex-direction: column; } .video_calltoaction .inner-section-wrap .contact-form { padding: 10px; } /* how it work section */ .how_it_works .step_block .step_item, .how_it_works .step_block .step_item:nth-child(2n){ flex-direction: column; } .how_it_works .step_block .step_item .step_text, .how_it_works .step_block .step_item .step_img { width: 90%; text-align: center; } .how_it_works .step_block .step_item .step_text, .how_it_works .step_block .step_item .step_img{ border-radius: 0; } .how_it_works.style1 .step_text:before{ transform: rotate(180deg); left: -33px; right: unset; } .how_it_works .step_block .step_item:first-child::after{ display: none; } .how_it_works .step_block .step_item .step_number { position: absolute; top: 0; left: -20px; width: 40px; height: 40px; } .how_it_works .step_block .step_item::before { left: 0; transform: none; } .how_it_works .step_block .step_item .step_number h2 { font-size: 20px; margin-bottom: 0; border: none; box-shadow: none; } /** Service **/ .service-section .feature_detail{ flex-direction: column; } .service-section .feature_detail .left_data { text-align: center; } .service-section .feature_detail .feature_box { max-width: 100%; text-align: center; } .service-section.style2 .service-block:nth-child(2), .service-section.style2 .service-block:nth-child(5), .service-section.style2 .service-block:nth-child(8) { display: flex; flex-direction: column; } .service-section.style3 .service-content-wrap .service-block .bottom-content::after{ left: 20px; } .service-section.style3 .service-content-wrap .service-block .icon-box{ width: 40px; height: 40px; line-height: 40px; margin-right: 15px; padding: 5px; } /** Contact **/ .contact-detail, .contact-form{ padding: 10px; } .get-touch-contact .get-touch .get-touch-icon{ margin-right: 0; } .contact-section.style3 .get-touch-contact { grid-template-columns: repeat(1, 1fr); } /** Footer **/ .d-grid.col-3-1-2, .d-grid.col-3-2-1, .d-grid.col-4-1-1-2, .d-grid.col-4-2-1-1, .d-grid.col-4-1-2-1, .d-grid.col-4-1-3, .d-grid.col-4-3-1{ grid-template-columns: repeat(1, 1fr); } /** Maintenance **/ #maintenance-page .title { font-size: 40px; line-height: 1.4; } .maintenance-social ul{ padding: 0; } .maintenance-social a{ margin: 15px; } /** Blog (index, category,tag) **/ .titlebar-section .section-title { font-size: 24px; } .prevNextArticle.d-flex{ flex-direction: column; } .prevNextArticle.d-flex .prevnext-item { width: 100%; text-align: center; } .prevnext-item img{ display: none; } .author-box { padding: 10px; margin: 10px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .author-box .author-avatar { float: none; margin-right: 0; } #commentform .form-submit{ text-align: center; } } @media screen and (max-width: 380px) { .section-title-wrapper.style2 .section-title::before, .section-title-wrapper.style2 .section-title::after{ display: none; } .contact-social-icon ul li a{ margin-right: 5px; } }