diff --git a/public/assets/css/module-css/banner.css b/public/assets/css/module-css/banner.css index bc42d66..84cfe62 100644 --- a/public/assets/css/module-css/banner.css +++ b/public/assets/css/module-css/banner.css @@ -1,19 +1,18 @@ - /** banner-section **/ -.banner-section{ +.banner-section { position: relative; overflow: hidden; background-color: #fff; padding: 203px 0px 115px 0px; } -.banner-section .content-box{ +.banner-section .content-box { position: relative; display: block; } -.banner-section .content-box .upper-text{ +.banner-section .content-box .upper-text { position: relative; display: block; font-size: 24px; @@ -24,7 +23,7 @@ margin-bottom: 15px; } -.banner-section .content-box h2{ +.banner-section .content-box h2 { display: block; font-size: 64px; line-height: 75px; @@ -33,14 +32,14 @@ margin-bottom: 30px; } -.banner-section .content-box h2 span{ +.banner-section .content-box h2 span { position: relative; display: inline-block; font-weight: 400; color: var(--secondary-color); } -.banner-section .content-box h2 span:before{ +.banner-section .content-box h2 span:before { position: absolute; content: ''; background: var(--secondary-color); @@ -51,23 +50,23 @@ border-radius: 10px; } -.banner-section .content-box p{ +.banner-section .content-box p { display: block; color: #fff; margin-bottom: 45px; } -.banner-section .image-box{ +.banner-section .image-box { position: relative; display: block; margin-left: -25px; } -.banner-section .image-box img{ +.banner-section .image-box img { width: 100%; } -.banner-section .pattern-layer{ +.banner-section .pattern-layer { position: absolute; left: 0px; top: 0px; @@ -78,7 +77,7 @@ background-position: bottom center; } -.banner-section .shape .shape-1{ +.banner-section .shape .shape-1 { position: absolute; left: 180px; top: 285px; @@ -89,7 +88,7 @@ animation: zoom-fade 4s infinite linear; } -.banner-section .shape .shape-2{ +.banner-section .shape .shape-2 { position: absolute; left: 115px; bottom: 210px; @@ -99,7 +98,7 @@ opacity: 0.6; } -.banner-section .shape .shape-3{ +.banner-section .shape .shape-3 { position: absolute; top: 190px; right: 205px; @@ -110,7 +109,7 @@ animation: zoom-fade 6s infinite linear; } -.banner-section .shape .shape-4{ +.banner-section .shape .shape-4 { position: absolute; right: 200px; bottom: 200px; @@ -124,12 +123,12 @@ /** banner-style-two **/ -.banner-carousel .swiper-slide{ +.banner-carousel .swiper-slide { position: relative; /* padding: 150px 0px 150px 0px; */ } -.banner-slide{ +.banner-slide { padding: 150px 0px; } @@ -141,7 +140,7 @@ } } -.banner-carousel .swiper-slide:before{ +.banner-carousel .swiper-slide:before { position: absolute; content: ''; /* background: #f9d6d6; */ @@ -152,19 +151,19 @@ opacity: 0.8; z-index: 1; } - -.banner-carousel .swiper-slide .bg-layer{ + +.banner-carousel .swiper-slide .bg-layer { position: absolute; - left:0; - top:0; - width:100%; - height:100%; + left: 0; + top: 0; + width: 100%; + height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; - -webkit-transform:scale(1); - -ms-transform:scale(1); - transform:scale(1); + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); transition: none !important; /* -webkit-transition: all 8000ms linear; -moz-transition: all 8000ms linear; @@ -178,21 +177,21 @@ height: 70%; } } */ - -.banner-carousel .swiper-slide-active .bg-layer{ - -webkit-transform:scale(1.25); - -ms-transform:scale(1.25); - transform:scale(1.25); + +.banner-carousel .swiper-slide-active .bg-layer { + -webkit-transform: scale(1.25); + -ms-transform: scale(1.25); + transform: scale(1.25); } - -.banner-carousel .content-box{ + +.banner-carousel .content-box { position: relative; max-width: 770px; width: 100%; z-index: 5; } -.banner-carousel .content-box .upper-text{ +.banner-carousel .content-box .upper-text { position: relative; display: block; font-size: 24px; @@ -229,7 +228,7 @@ } } -.banner-carousel .swiper-slide-active .content-box .upper-text{ +.banner-carousel .swiper-slide-active .content-box .upper-text { opacity: 1; -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; @@ -243,7 +242,7 @@ transform: translateY(0); } -.banner-carousel .content-box h2{ +.banner-carousel .content-box h2 { position: relative; display: block; font-size: 64px; @@ -263,7 +262,7 @@ transition: all 1000ms ease; } -.banner-carousel .swiper-slide-active .content-box h2{ +.banner-carousel .swiper-slide-active .content-box h2 { opacity: 1; -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; @@ -277,17 +276,17 @@ transform: translateY(0); } -.banner-carousel .content-box h2 span{ +.banner-carousel .content-box h2 span { position: relative; display: inline-block; font-weight: 400; - color: var(--secondary-color); + color: #bc0000; } -.banner-carousel .content-box h2 span:before{ +.banner-carousel .content-box h2 span:before { position: absolute; content: ''; - background: var(--secondary-color); + background: #bc0000; width: 100%; height: 4px; left: 0px; @@ -295,7 +294,7 @@ border-radius: 5px; } -.banner-carousel .content-box p{ +.banner-carousel .content-box p { position: relative; display: block; margin-bottom: 5px; @@ -318,7 +317,7 @@ } } -.banner-carousel .swiper-slide-active .content-box p{ +.banner-carousel .swiper-slide-active .content-box p { opacity: 1; -webkit-transition-delay: 900ms; -moz-transition-delay: 900ms; @@ -332,7 +331,7 @@ transform: translateY(0); } -.banner-carousel .content-box .btn-box{ +.banner-carousel .content-box .btn-box { position: relative; display: block; opacity: 1; @@ -348,7 +347,7 @@ transition: all 1000ms ease; } -.banner-carousel .swiper-slide-active .content-box .btn-box{ +.banner-carousel .swiper-slide-active .content-box .btn-box { opacity: 1; -webkit-transition-delay: 1100ms; -moz-transition-delay: 1100ms; @@ -362,7 +361,7 @@ transform: translateY(0); } -.banner-carousel .image-layer{ +.banner-carousel .image-layer { position: absolute; right: 180px; bottom: 0px; @@ -380,7 +379,7 @@ transition: all 1000ms ease; } -.banner-carousel .swiper-slide-active .image-layer{ +.banner-carousel .swiper-slide-active .image-layer { opacity: 1; -webkit-transition-delay: 1100ms; -moz-transition-delay: 1100ms; @@ -397,17 +396,17 @@ /** banner-style-three **/ -.banner-style-three{ +.banner-style-three { position: relative; padding: 118px 0px 91px 0px; } -.banner-style-three .content-box{ +.banner-style-three .content-box { position: relative; display: block; } -.banner-style-three .content-box .upper-text{ +.banner-style-three .content-box .upper-text { position: relative; display: block; font-size: 24px; @@ -418,7 +417,7 @@ margin-bottom: 20px; } -.banner-style-three .content-box h2{ +.banner-style-three .content-box h2 { display: block; font-size: 64px; line-height: 75px; @@ -426,14 +425,14 @@ margin-bottom: 30px; } -.banner-style-three .content-box h2 span{ +.banner-style-three .content-box h2 span { position: relative; display: inline-block; font-weight: 400; color: var(--secondary-color); } -.banner-style-three .content-box h2 span:before{ +.banner-style-three .content-box h2 span:before { position: absolute; content: ''; background: var(--secondary-color); @@ -444,19 +443,19 @@ border-radius: 10px; } -.banner-style-three .content-box p{ +.banner-style-three .content-box p { position: relative; display: block; margin-bottom: 50px; } -.banner-style-three .content-box .btn-box{ +.banner-style-three .content-box .btn-box { position: relative; display: flex; align-items: center; } -.banner-style-three .content-box .btn-box .video-btn{ +.banner-style-three .content-box .btn-box .video-btn { position: relative; display: inline-block; width: 70px; @@ -469,7 +468,7 @@ border: 2px solid var(--theme-color); } -.banner-style-three .content-box .shape{ +.banner-style-three .content-box .shape { position: absolute; right: 0px; bottom: 0px; @@ -478,21 +477,21 @@ background-repeat: no-repeat; } -.banner-style-three .image-box{ +.banner-style-three .image-box { position: relative; padding: 0px 60px 0px 73px; } -.banner-style-three .image-box .image{ +.banner-style-three .image-box .image { position: relative; display: block; } -.banner-style-three .image-box .image img{ +.banner-style-three .image-box .image img { width: 100%; } -.banner-style-three .image-box .image-shape .shape-1{ +.banner-style-three .image-box .image-shape .shape-1 { position: absolute; left: 20px; bottom: -70px; @@ -501,7 +500,7 @@ background-repeat: no-repeat; } -.banner-style-three .image-box .image-shape .shape-2{ +.banner-style-three .image-box .image-shape .shape-2 { position: absolute; left: 0px; top: 70px; @@ -510,7 +509,7 @@ background-repeat: no-repeat; } -.banner-style-three .image-box .image-shape .shape-3{ +.banner-style-three .image-box .image-shape .shape-3 { position: absolute; right: 0px; bottom: 0px; @@ -519,7 +518,7 @@ background-repeat: no-repeat; } -.banner-style-three .image-box .image-shape .shape-4{ +.banner-style-three .image-box .image-shape .shape-4 { position: absolute; top: 50px; right: 0px; @@ -528,7 +527,7 @@ background-repeat: no-repeat; } -.banner-style-three .pattern-layer{ +.banner-style-three .pattern-layer { position: absolute; left: 0px; top: 0px; @@ -538,7 +537,7 @@ background-repeat: no-repeat; } -.banner-style-three .image-box .text-box{ +.banner-style-three .image-box .text-box { position: absolute; right: -160px; bottom: 130px; @@ -550,14 +549,14 @@ padding: 31px 30px; } -.banner-style-three .image-box .text-box h3{ +.banner-style-three .image-box .text-box h3 { display: block; font-size: 22px; line-height: 31px; font-weight: 500; } -.banner-style-three .image-box .text-box .designation{ +.banner-style-three .image-box .text-box .designation { position: relative; display: block; font-size: 16px; @@ -572,21 +571,21 @@ /** RTL-CSS **/ -.rtl .banner-carousel .content-box{ +.rtl .banner-carousel .content-box { text-align: right; } -.rtl .banner-style-three .content-box .btn-box .theme-btn{ +.rtl .banner-style-three .content-box .btn-box .theme-btn { margin-right: 0px; margin-left: 60px; } -.rtl .banner-style-three .content-box .shape{ +.rtl .banner-style-three .content-box .shape { right: inherit; left: 0px; } -.rtl .banner-style-three .image-box .text-box{ +.rtl .banner-style-three .image-box .text-box { right: inherit; left: -160px; } @@ -595,104 +594,104 @@ /** RESPONSIVE-CSS **/ -@media only screen and (max-width: 1599px){ - .banner-style-three .image-box .text-box{ +@media only screen and (max-width: 1599px) { + .banner-style-three .image-box .text-box { right: 0px; } - .rtl .banner-style-three .image-box .text-box{ + .rtl .banner-style-three .image-box .text-box { left: 0px; } } -@media only screen and (max-width: 1200px){ +@media only screen and (max-width: 1200px) { - .banner-carousel .image-layer{ + .banner-carousel .image-layer { right: 0px; } } -@media only screen and (max-width: 991px){ +@media only screen and (max-width: 991px) { - .banner-section .shape{ + .banner-section .shape { display: none; } - .banner-section .content-box{ + .banner-section .content-box { margin-bottom: 40px; } - .banner-section .image-box{ + .banner-section .image-box { margin: 0px; } - .banner-carousel .image-layer{ + .banner-carousel .image-layer { display: none; } - .banner-style-three{ + .banner-style-three { padding-top: 180px; } - .banner-style-three .content-box{ + .banner-style-three .content-box { margin-bottom: 30px; } } -@media only screen and (max-width: 767px){ +@media only screen and (max-width: 767px) { .banner-section .content-box h2, - .banner-style-three .content-box h2{ + .banner-style-three .content-box h2 { font-size: 50px; line-height: 60px; } - .banner-carousel .content-box h2{ + .banner-carousel .content-box h2 { font-size: 28px; line-height: 38px; } - .banner-style-three .content-box .shape{ + .banner-style-three .content-box .shape { display: none; } - .banner-style-three .image-box .image-shape{ + .banner-style-three .image-box .image-shape { display: none; } - .banner-style-three{ + .banner-style-three { padding-bottom: 30px; } } -@media only screen and (max-width: 599px){ +@media only screen and (max-width: 599px) { - .banner-style-three .image-box{ + .banner-style-three .image-box { padding: 0px; } } -@media only screen and (max-width: 499px){ +@media only screen and (max-width: 499px) { - .banner-style-three .content-box .btn-box{ + .banner-style-three .content-box .btn-box { display: block; } - .rtl .banner-style-three .content-box .btn-box .theme-btn{ + .rtl .banner-style-three .content-box .btn-box .theme-btn { margin-left: 0px; } - .banner-style-three .content-box .btn-box .theme-btn{ + .banner-style-three .content-box .btn-box .theme-btn { margin-right: 0px; margin-bottom: 20px; } - .banner-style-three .image-box .text-box{ + .banner-style-three .image-box .text-box { position: relative; width: 100%; bottom: 0px; @@ -701,75 +700,70 @@ } -@media only screen and (max-width:426px){ - - .banner-carousel .content-box h2 span{ - position: relative; - display: inline-block; - font-weight: 400; - color: #fff; +@media only screen and (max-width:426px) { + + .banner-carousel .content-box h2 span { + position: relative; + display: inline-block; + font-weight: 400; + color: #fff; + } + + .banner-carousel .content-box h2 span:before { + position: absolute; + content: ''; + background: #bc0000; + width: 100%; + height: 4px; + left: 0px; + bottom: 0px; + border-radius: 5px; + } + } -.banner-carousel .content-box h2 span:before{ - position: absolute; - content: ''; - background: #bc0000; - width: 100%; - height: 4px; - left: 0px; - bottom: 0px; - border-radius: 5px; +@media (max-width: 1440px) { + .bg-layer.bg-slide-0 { + background-position: left -350px center !important; + } } +@media (max-width: 1200px) { + .bg-layer.bg-slide-0 { + background-position: left -550px center !important; + } +} + +@media (max-width: 1024px) { + .bg-layer.bg-slide-0 { + background-position: left -720px center !important; + } +} + +@media (max-width: 992px) { + .bg-layer.bg-slide-0 { + background-position: left -780px center !important; + } } @media (max-width: 768px) and (min-width: 500px) { .bg-layer.bg-slide-0 { - background-position: left -790px center !important; + background-position: left -500px center !important; } } +@media screen and (min-width: 500px) and (max-width: 768px) { + .banner-slide:nth-child(1) .custom-content-box.mobile-style, .custom-content-box.with-background, h2 { + font-size: 50px !important; + line-height: 1 !important; + } + .banner-slide:nth-child(1) .custom-content-box.mobile-style .upper-text, .custom-content-box.with-background .upper-text { + font-size: 20px; + } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + .banner-slide:nth-child(1) .custom-content-box.mobile-style .theme-btn span, .custom-content-box.with-background .theme-btn span { + font-size: 16px; + padding: 15px 20px !important; + } +} \ No newline at end of file diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 075fe74..380ce6c 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -814,7 +814,7 @@ margin-bottom: 15px; } - + .sec-title-2 .sub-title-1 { position: relative; display: inline-block; @@ -838,11 +838,11 @@ } @media (max-width: 425px) { - .sec-title .sub-title { - font-size: 18px; - line-height: 26px; - } -} + .sec-title .sub-title { + font-size: 18px; + line-height: 26px; + } + } .new-color { @@ -921,6 +921,7 @@ } } + @media only screen and (max-width: 1024px) { .sec-title-2 h2 { @@ -1433,10 +1434,10 @@ } @media (max-width: 1200px) { - .main-menu .navigation>li>a { - font-size: 17px; - } -} + .main-menu .navigation>li>a { + font-size: 17px; + } + } .main-menu .navigation>li:last-child>a { margin-right: 25px; @@ -2308,24 +2309,26 @@ } /* Footer social icons only */ -.main-footer .social-links li a { - display: inline-flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: 50%; - background: #fff !important; /* white background */ - text-decoration: none; -} + .main-footer .social-links li a { + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50%; + background: #fff !important; + /* white background */ + text-decoration: none; + } -.main-footer .social-links li a i, -.main-footer .social-links li a i::before { - color: #e60000 !important; /* red icon */ - font-size: 18px; - line-height: 1; - display: inline-block; -} + .main-footer .social-links li a i, + .main-footer .social-links li a i::before { + color: #e60000 !important; + /* red icon */ + font-size: 18px; + line-height: 1; + display: inline-block; + } .main-footer .logo-widget p { @@ -2721,11 +2724,11 @@ } @media (max-width: 1440px) { - .header-style-two .header-lower .outer-container { - padding-left: 25px; - padding-right: 25px; - } -} + .header-style-two .header-lower .outer-container { + padding-left: 25px; + padding-right: 25px; + } + } @media only screen and (max-width: 500px) { .header-style-two .header-lower .outer-container { @@ -2953,48 +2956,49 @@ } @media (max-width: 992px) { - .main-menu, - .sticky-header, - .main-header.style-one .outer-container:before { - display: none !important; - } - .menu-area .mobile-nav-toggler { + .main-menu, + .sticky-header, + .main-header.style-one .outer-container:before { + display: none !important; + } + + .menu-area .mobile-nav-toggler { display: block; padding: 10px; } - .header-top .social-links { - display: none !important; - } - -} + .header-top .social-links { + display: none !important; + } -@media (max-width: 1200px) and (min-width: 1025px) { - .header-style-two .header-lower .outer-container { - padding: 0px 20px !important; - } -} + } + + @media (max-width: 1200px) and (min-width: 1025px) { + .header-style-two .header-lower .outer-container { + padding: 0px 20px !important; + } + } -@media (max-width: 1024px) and (min-width: 769px) { - .header-style-two .header-lower .outer-container { - padding: 0px 20px; - } -} + @media (max-width: 1024px) and (min-width: 769px) { + .header-style-two .header-lower .outer-container { + padding: 0px 20px; + } + } -@media (max-width: 1024px) { - .main-menu .navigation > li { - margin: 0 15px !important; - } -} + @media (max-width: 1024px) { + .main-menu .navigation>li { + margin: 0 15px !important; + } + } -@media (max-width: 1024px) { - .main-menu .navigation > li > a { - font-size: 14px !important; - } -} + @media (max-width: 1024px) { + .main-menu .navigation>li>a { + font-size: 14px !important; + } + } @media only screen and (min-width: 768px) { @@ -3298,6 +3302,25 @@ } } + .custom-content-box.mobile-style { + background: none; + } + +@media (min-width: 768px) and (max-width: 1024px) { + .custom-content-box.mobile-style { + top: 190px; + background: white; + border-radius: 15%; + opacity: 0.8; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .custom-content-box.with-background { + top: 170px; + } +} + @media (max-width: 425px) { .custom-content-box.mobile-style { /* background: white; */ @@ -3365,82 +3388,89 @@ } .sec-title-2 h2 { - font-size: 50px; - color: #fff; - font-weight: 700; - } + font-size: 50px; + color: #fff; + font-weight: 700; + } @media (max-width: 425px) { - .sec-title-2 { - display: flex; - flex-direction: column; - } + .sec-title-2 { + display: flex; + flex-direction: column; + } - .sec-title-2 h2 { - order: -1; - font-weight: normal; - font-size: 18px !important; - color: inherit; - } + .sec-title-2 h2 { + order: -1; + font-weight: normal; + font-size: 18px !important; + color: inherit; + } - .sec-title-2 span { - order: 1; - font-weight: bold; - font-size: 22px !important; - color: #fff; - display: block; - margin-top: 8px; - } -} -@media (max-width: 1024px) and (min-width: 769px) { - .info-block-one { - padding: 30px 7px !important; - } -} -@media (max-width: 768px) { - .blog-details-content .news-block-one .inner-box .lower-content h2 { - font-size: 38px !important; - line-height: 36px; - } -} + .sec-title-2 span { + order: 1; + font-weight: bold; + font-size: 22px !important; + color: #fff; + display: block; + margin-top: 8px; + } + } -@media (max-width: 425px) { - .blog-details-content .news-block-one .inner-box .lower-content h2 { - font-size: 22px !important; - line-height: 23px; - } -} -@media (max-width: 768px) { - .service-details-content h2 { - font-size: 38px !important; - } -} + @media (max-width: 1024px) and (min-width: 769px) { + .info-block-one { + padding: 30px 7px !important; + } + } -@media (max-width: 425px) { - .service-details-content h2 { - font-size: 22px !important; - } -} -@media (max-width: 425px) { - .pb_90 { - padding-top: 30px !important; - padding-bottom: 30px !important; - } -} -@media (max-width: 425px) { - .pt_90 { - padding-top: 30px !important; - } -} -@media (max-width: 425px) { - .sec-pad { - padding-top: 30px !important; - padding-bottom: 30px !important; - } -} -@media (max-width: 425px) { - .chooseus-section { - padding-top: 30px !important; - padding-bottom: 30px !important; - } -} \ No newline at end of file + @media (max-width: 768px) { + .blog-details-content .news-block-one .inner-box .lower-content h2 { + font-size: 38px !important; + line-height: 36px; + } + } + + @media (max-width: 425px) { + .blog-details-content .news-block-one .inner-box .lower-content h2 { + font-size: 22px !important; + line-height: 23px; + } + } + + @media (max-width: 768px) { + .service-details-content h2 { + font-size: 38px !important; + } + } + + @media (max-width: 425px) { + .service-details-content h2 { + font-size: 22px !important; + } + } + + @media (max-width: 425px) { + .pb_90 { + padding-top: 30px !important; + padding-bottom: 30px !important; + } + } + + @media (max-width: 425px) { + .pt_90 { + padding-top: 30px !important; + } + } + + @media (max-width: 425px) { + .sec-pad { + padding-top: 30px !important; + padding-bottom: 30px !important; + } + } + + @media (max-width: 425px) { + .chooseus-section { + padding-top: 30px !important; + padding-bottom: 30px !important; + } + } \ No newline at end of file