/*------------------- Global CSS -------------------*/ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */ * { padding: 0; margin: 0; } body { font-family: "Poppins", sans-serif !important; background: #FFF !important; } p, h1, h2, h3, h4, h5, h6 { margin-bottom: 0px; } a { text-decoration: none; } .container { width: 100%; max-width: 100%; padding-left: 80px; padding-right: 80px; } .custom-btn a { display: inline-flex; padding: 10px 20px; align-items: center; gap: 12px; border-radius: 23px; background: #102D7A; color: #FFF; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; height: 44px; margin-top: 30px; } .section-gap { padding: 70px 0px; } .header { position: sticky; top: -51px; z-index: 1024; } /*------------------- Top Header Section CSS -------------------*/ .top-header { padding: 10px 0px; background: #B7CCF8; } .top-header-contact { display: flex; align-items: center; column-gap: 17px; } .top-header-item { display: inline-flex; align-items: center; column-gap: 8px; } .top-header-item .text p { color: #343844; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; font-family: "Roboto", sans-serif; } /*------------------- Top Header Social Section CSS -------------------*/ .social-item { width: 30px; height: 30px; border: 1.4px solid #343844; border-radius: 50px; display: flex; align-items: center; justify-content: center; } .top-social-info { display: flex; align-items: center; column-gap: 10px; justify-content: flex-end; } .social-item { transition: all 0.8s ease-in-out; } .social-item:hover { background: #fff; border: 1.4px solid #fff; } .social-item:hover img { transform: scale(1.3); transition: all 0.8s ease-in-out; } /*------------------- Navbar Section CSS -------------------*/ .custom-navbar { background: #102D7A; padding: 10px 0px; z-index: 9; position: relative; box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px; border-bottom: 1px solid rgba(75, 81, 98, 0.50); } .custom-navbar .navbar-brand { margin-right: 7rem; } .custom-navbar .navbar-brand img { width: 220px; } .custom-navbar .navbar { padding: 0; } .custom-navbar .nav-link { cursor: pointer; color: #FFF; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; padding: 0px 30px 0px 0px !important; } .custom-navbar .nav-link:focus { color: #FFF !important; } .custom-navbar .dropdown-menu { border: 0; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; } .custom-navbar .dropdown-item { padding: 8px 12px; color: #1478F1; font-size: 13px; font-style: normal; font-weight: 500; line-height: normal; } .navbar-nav .nav-link.show { color: #fff; } .dropdown-item.active, .dropdown-item:active { background-color: transparent; } /*------------------- Navbar Search Bar Section CSS -------------------*/ .search-box { display: inline-block; position: relative; filter: drop-shadow(0 1px #0091c2); } .search-box span { color: #FFF; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; margin-right: 4px; } .search-box::after { content: ""; background: #fff; width: 1.8px; height: 12px; position: absolute; top: 17px; right: -4px; transform: rotate(135deg); } .search-box input { color: #fff; font-size: 12px; background: transparent; width: 17px; height: 17px; padding: 7px; border: solid 2px #fff; outline: none; border-radius: 35px; transition: width 0.5s; cursor: pointer; } .search-box input::placeholder { color: #efefef; opacity: 0; transition: opacity 150ms ease-in-out; } .search-box input:focus::placeholder { opacity: 1; } .search-box input:focus, .search-box input:not(:placeholder-shown) { width: 150px; padding: 14px; } /*------------------- Navbar Login Button CSS -------------------*/ .login-btn { display: inline-flex; height: 47px; padding: 4px 4px 5px 14px; align-items: center; gap: 8px; border-radius: 30px; background: #FFF; } .login-btn .icon { display: flex; width: 38px; height: 38px; padding: 10px 11px; align-items: center; gap: 10px; border-radius: 23.5px; background: #1478F1; } .login-btn .text { color: #343844; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; font-family: "Roboto", sans-serif; } .navbar-right { display: flex; align-items: center; column-gap: 90px; } .navbar-nav .nav-link.active { color: #1478F1; } .nav-link:hover { color: #fff; } /*------------------- Home Banner Section CSS -------------------*/ .hero { background: url(../img/banner.webp); background-size: cover; background-position: bottom; height: 655px; } .hero-caption { margin-top: 80px; } .hero-caption h1 { color: #FFF; font-size: 48px; font-style: normal; font-weight: 600; line-height: 60px; letter-spacing: -1.44px; margin-bottom: 25px; } .text-blue { color: #1478F1; } .hero-caption p { color: #A9A8A8; font-size: 16px; font-style: normal; font-weight: 400; line-height: 26px; margin-right: 7rem; margin-bottom: 50px; } .hero-btn { display: inline-flex; padding: 9px 11px; align-items: center; gap: 10px; border-radius: 30px; background: #FFF; border: 2px solid #fff; transition: all 1s ease-in-out; } .hero-btn a { color: #343844; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; display: flex; align-items: center; column-gap: 10px; transition: all 1s ease-in-out; } .hero-btn .btn-wapper { display: flex; width: 47px; height: 47px; padding: 10px 11px; align-items: center; gap: 10px; border-radius: 23.5px; background: #1478F1; transition: all 1s ease-in-out; } .btn-wapper svg path { transition: all 1s ease-in-out; } .hero-btn:hover { border: 2px solid #fff; background: transparent; } .hero-btn:hover a { color: #fff; } .hero-btn:hover .btn-wapper { background: #fff; } .hero-btn:hover .btn-wapper svg path { fill: #1478F1; } /*------------------- Home Client Logo Section CSS -------------------*/ .title { color: #1F284F; font-size: 38px; font-style: normal; font-weight: 600; line-height: 40px; letter-spacing: 0.19px; } .client-logo { margin-top: 40px; } .logo-wapper { padding: 26px 32px; background: #fff; width: 100%; height: auto; max-width: 170px; max-height: 72px; display: flex; align-items: center; justify-content: center; } /*------------------- Home Service Section CSS -------------------*/ .home-service-inner, .home-portfolio-inner, .home-blog-inner { padding: 0px 60px; position: relative; } .home-service-inner::after, .home-portfolio-inner::after, .home-blog-inner::after { background-image: url("../img/service-bg.webp"); background-color: #102D7A; background-position: center; background-size: cover; background-repeat: no-repeat; height: 575px; border-radius: 10px; padding: 0px 60px; position: absolute; top: 0; content: ""; width: 100%; left: 0; z-index: -9; } .service-title, .portfolio-title, .blog-title { color: #FFF; font-size: 48px; font-style: normal; font-weight: 600; line-height: 60px; letter-spacing: -1.2px; } .service-desciption, .portfolio-desciption, .blog-desciption { color: #FFF; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; } .card-item { border-radius: 12px; background: #FFF; box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.25); /* padding: 0px 28px 0px 28px; */ max-height: 484px; overflow: hidden; margin-bottom: 15px; position: relative; } .card-inner { padding: 30px 30px 20px 30px; } .card-text h3 { color: #111827; font-size: 28px; font-style: normal; font-weight: 600; line-height: 32px; letter-spacing: -0.7px; margin-bottom: 14px; margin-right: 2rem; } .card-text p { color: #374151; font-size: 13px; font-style: normal; font-weight: 400; line-height: 16px; margin-bottom: 20px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 4; } .card-btn a { color: #1478F1; font-size: 12px; font-style: normal; font-weight: 600; line-height: 16px; display: flex; align-items: center; gap: 10px; } .card-img { text-align: center; } .card-img img { max-width: 100%; height: auto; } .screen-img { margin-top: -100px; } .card-btn { position: relative; z-index: 99; } /* .home-service-card .col-lg-4:nth-child(3) .card-inner { padding: 0px 28px 28px 28px; }*/ /*.home-service-card .col-lg-4:nth-child(6) .card-inner { padding: 0px 28px 28px 28px; }*/ .service-header, .portfolio-header { padding: 40px 0px; } /*------------------- Home Quick Step Section CSS -------------------*/ .quick-step-item { margin-right: 0rem; position: relative; padding-bottom: 30px; } .quick-step-item h3 { color: #000; font-size: 24px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.7px; position: relative; } .quick-step-item p { color: #727272; font-size: 16px; font-style: normal; font-weight: 400; line-height: 21px; } .quick-step-item h3::before { content: " "; position: absolute; width: 15px; height: 15px; background: #1478F1; border-radius: 50px; top: 12px; left: -28px; } .quick-step-item::before { content: " "; position: absolute; height: 100%; top: 24px; left: -21px; border: 1px dashed #1478F1; } .quick-step-item:last-child::before { display: none; } .quick-steps-img { animation: moveUpDown 8s ease-in-out infinite; } /*------------------- Home Portfolio Section CSS -------------------*/ .portfolio-card-item { border-radius: 12px; background: #FFF; box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.25); overflow: hidden; margin-bottom: 20px; position: relative; min-height: 430px; } .portfolio-card-info { /*padding: 15px 60px 22px 15px;*/ padding: 15px 20px; } .portfolio-card-text span { display: inline-flex; padding: 4px 10px; justify-content: center; align-items: center; gap: 4px; border-radius: 6px; background: rgba(64, 123, 255, 0.05); color: #102D7A; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; margin-bottom: 14px; } .portfolio-card-text h3 { color: #181A2A; font-size: 20px; font-style: normal; font-weight: 600; line-height: 28px; margin-bottom: 14px; } .portfolio-card-text p { color: #374151; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; margin-bottom: 20px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 4; } .portfolio-card-btn a { color: #1478F1; font-size: 12px; font-style: normal; font-weight: 600; line-height: 16px; display: flex; align-items: center; gap: 10px; } /*------------------- Number Count Section CSS -------------------*/ .number-count { background: #F5F5F5; padding: 80px 0px 124px 0px; } .top-text { color: #102D7A; text-align: center; font-size: 14px; font-style: normal; font-weight: 600; line-height: 14px; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 18px; display: inline-block; } .description { color: #727272; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; margin-top: 14px; margin-right: 13px; } .number-count-item h3 { color: #102D7A; font-size: 44px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 12px; } .number-count-item h3 span { font-weight: 400; } .number-count-item p { color: #495A67; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } .number-count-item { position: relative; } .number-count-item::before { content: ""; position: absolute; width: 31px; height: 31px; background: #102D7A; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); display: block; border-radius: 50px; top: 28px; left: -40px; } .number-count-item.bg-skyblue::before { background: #B7CCF8; } .number-count-item.bg-blue::before { background: #1478F1; } .number-count-item.bg-offwhite::before { background: #EFF5F2; } .number-count-info { display: flex; justify-content: space-between; padding-bottom: 30px; padding-top: 30px; } .number-count-detail { position: relative; } .number-count-detail::after { content: ""; position: absolute; border: 1px solid rgba(0, 0, 0, 0.20); height: 85%; top: 30px; left: 50%; } .number-count-detail::before { content: ""; position: absolute; border: 1px solid rgba(0, 0, 0, 0.20); height: 137%; top: -46px; left: 13.3rem; transform: rotate(90deg); } .number-graph { margin-left: 2rem; } .number-graph { position: relative; } .number-graph::after { content: ""; position: absolute; background-image: url("../img/number-dots.webp"); width: 160.33px; height: 142.906px; top: -48px; right: 0; } .number-graph::before { content: ""; position: absolute; background-image: url("../img/number-dots-2.webp"); width: 176.691px; height: 142px; bottom: -105px; left: 0; } .number-graph img { position: relative; width: 285px; z-index: 9; } /*------------------- Why Choose Us Section CSS -------------------*/ .why-choose { background-image: url("../img/why-choose-bg.webp"); background-size: cover; background-repeat: no-repeat; background-position: top; padding: 50px 0px; } .why-choose-img { animation: moveUpDown 3s ease-in-out infinite; text-align: end; } @keyframes moveUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); /* Adjust this value as needed */ } 100% { transform: translateY(0); } } .why-choose-content h2 { margin-bottom: 30px; } .why-choose-list ul { margin-top: 45px; margin-left: 28px; } .why-choose-list ul li { color: #252422; font-size: 16px; font-style: normal; font-weight: 400; line-height: 19.2px; margin-bottom: 20px; position: relative; } .why-choose-list ul li::before { content: ""; position: absolute; background-image: url(../img/trick.webp); top: -2px; left: -30px; width: 20px; height: 20px; } .why-choose-btn a { display: inline-flex; padding: 10px 20px; align-items: center; gap: 12px; border-radius: 23px; background: #102D7A; color: #FFF; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; height: 44px; margin-top: 30px; } /*------------------- Our Benefit Section CSS -------------------*/ .our-benefit { background: #F5F5F5; padding: 50px 0px; } .our-benefit-info { display: flex; align-items: center; flex-direction: column; row-gap: 15px; text-align: center; position: relative; } .our-benefit-info::after { content: ""; position: absolute; background-image: url(../img/feature-icon.webp); top: 22px; left: 15px; width: 261px; height: 346px; } .our-benefit-detail { display: flex; column-gap: 40px; } .experience-info { display: flex; padding: 33px 32px; justify-content: space-between; align-items: center; column-gap: 10px; border-radius: 20px; background: #102D7A; margin-bottom: 23px; width: 100%; max-width: 282px; } .experience-info h2 { color: #FFF; font-size: 50px; font-style: normal; font-weight: 700; line-height: 60px; } .experience-info p { color: #FFF; font-size: 18px; font-style: normal; font-weight: 600; line-height: 28px; } .our-benefit-card .card-title h3 { color: #102D7A; font-size: 22px; font-style: normal; font-weight: 700; line-height: 30px; } .our-benefit-card { display: flex; align-items: center; column-gap: 22px; margin-bottom: 20px; } .our-benefit-item { border-radius: 20px; border: 2px solid #E3DBD8; padding: 31px 28px; margin-bottom: 15px; } .our-benefit-item:hover { border: 2px solid #0BB3F7; transition: all 0.8s ease-in-out; box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.25); } .card-list li { margin-bottom: 14px; position: relative; padding-left: 30px; color: #727272; font-size: 16px; font-style: normal; font-weight: 400; line-height: 30px; } .card-list li::before { content: ""; position: absolute; background-image: url(../img/green-trick.webp); top: 9px; left: 0px; width: 16px; height: 12px; } .card-list li:last-child { margin-bottom: 0px; } .benefit-card-info { margin-top: 35px; } .rotate { animation: identifier 20s linear infinite; } @keyframes identifier { 0% { transform: rotate(0deg) } to { transform: rotate(1turn) } } .benefit-logo { position: relative; } .benefit-logo::after { content: ""; position: absolute; background-image: url(../img/benefit-location.webp); top: 38%; left: 37%; width: 51px; height: 51px; } /*------------------- Testimonial Section CSS -------------------*/ .testimonial .title { color: #102D7A; text-align: center; font-size: 50px; font-style: normal; font-weight: 700; line-height: 60px; padding: 0px 15px; margin-bottom: 54px; } .testimonial-info { border-radius: 20px; background: #102D7A; padding: 60px 60px 40px 60px; } .slider-inner p { color: #FFF; font-size: 28px; font-style: normal; font-weight: 400; line-height: 50px; } .slider-inner { padding: 0px 17px; } .testimonial-slider { margin-top: 20px; } .testimonial-info .slider-user { display: inline-flex; column-gap: 20px; align-items: center; margin-top: 40px; } .testimonial-info .slider-user .icon { width: 70px; height: 70px; } .testimonial-info .content h3 { color: #FFF; font-size: 22px; font-style: normal; font-weight: 700; line-height: 30px; } .testimonial-info .content p { color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: 30px; } .testimonial-info .owl-prev { width: 60px; height: 60px; filter: drop-shadow(0px 6px 50px rgba(37, 37, 37, 0.05)); background-color: #FFF !important; border-radius: 50px !important; margin-right: 15px !important; } .testimonial-info .owl-next { width: 60px; height: 60px; filter: drop-shadow(0px 6px 50px rgba(37, 37, 37, 0.05)); background-color: #FFF !important; border-radius: 50px !important; } .testimonial-info .owl-theme .owl-nav { margin-top: 39px !important; text-align: end !important; } .testimonial-info .owl-nav i { color: #034833; font-size: 16px; font-style: normal; font-weight: 900; line-height: normal; } .testimonial-slider { position: relative; } .testimonial-slider::after { content: ""; position: absolute; width: 72%; height: 1px; background: #FFF; bottom: 32px; } /*------------------- FAQ Section CSS -------------------*/ .home-faq .title { color: #102D7A; text-align: center; font-size: 50px; font-style: normal; font-weight: 700; line-height: 60px; padding: 0px 15px; margin-bottom: 54px; } .accordion-button:not(.collapsed)::after { background-image: url(../img/up-arrow.webp); transform: rotate(-360deg); } .accordion-button::after { background-image: url(../img/r-arrow.webp); background-size: auto; width: 40px; height: 40px; } .accordion-button:not(.collapsed) { border-radius: 20px 20px 0px 0px !important; background: rgba(20, 120, 241, 0.23); box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05); } .accordion-item { border: none; margin-bottom: 20px; box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05); border-radius: 20px !important; } .accordion-button { background: #fff; border-radius: 20px !important; color: #102D7A !important; font-size: 18px; font-style: normal; font-weight: 600; line-height: 28px; } .accordion-body { background-color: #fff; color: #727272; font-size: 16px; font-style: normal; font-weight: 400; line-height: 30px; padding-right: 3rem; } .accordion-button:focus { box-shadow: unset; } /*------------------- Request Quote Section CSS -------------------*/ .request-quote-info { display: flex; align-items: center; justify-content: space-between; margin-right: 5.3rem; padding: 34px 0px; } .request-quote-item { display: flex; align-items: center; column-gap: 16px; } .request-quote-item .text { color: #061E42; font-size: 18px; font-style: normal; font-weight: 600; line-height: 25px; } .request-quote-content { margin-right: 5rem; margin-bottom: 60px; } .request-quote-content .description { color: #727272; font-size: 14px; margin-right: 40px; } .request-quote-contact { display: flex; align-items: center; column-gap: 20px; } .request-quote-contact p { color: #061E42; font-size: 18px; font-style: normal; font-weight: 600; line-height: 25px; margin-bottom: 8px; } .blue-color { color: #102D7A !important; } .request-quote-form { border-radius: 12px; background: #102D7A; padding: 50px 51px; } .request-quote-form .form-control { border-radius: 15px; background: #FFF; padding: 16px 20px; color: #6E6A74; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; border: none; resize: none; } .request-quote-form .form-select { border-radius: 15px; padding: 16px 20px; color: #6E6A74; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; border: none; } .request-quote-form button { border-radius: 15px; background: #FFF; padding: 16px 0px; color: #102D7A; font-size: 14px; font-style: normal; font-weight: 500; line-height: 15px; border: 0; } .request-quote-form button:hover { background: #FFF !important; color: #102D7A !important; border: 0; } .form-control:focus, .form-select:focus { border-color: transparent; outline: 0px; box-shadow: unset; } /*------------------- CTA Section CSS -------------------*/ .home-cta-content .description { margin-right: 6rem; margin-bottom: 10px; } .home-cta-inner { border-radius: 20px; background: #FFF; box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05); height: 351px; position: relative; } .home-cta-inner::after { position: absolute; content: ""; width: 704.638px; height: 354.775px; background-image: url(../img/map.webp); background-position: top; background-repeat: no-repeat; top: 0px; left: 12rem; } .cta-img { background-image: url(../img/cta-img.webp); background-position: center; background-repeat: no-repeat; width: 522px; height: 391px; margin-top: -20px; position: relative; z-index: 9; } .home-cta-content { margin-left: 40px; position: relative; z-index: 9; } .home-cta { padding-top: 25px; } /*------------------- Contact Number Section CSS -------------------*/ .contact-number { background: #102D7A; padding: 14px 0px; position: relative; margin-bottom: 0px; } .contact-number-item { display: flex; align-items: center; column-gap: 15px; position: relative; } .contact-number-inner .vr { display: inline-block; min-height: 4em; background-color: rgba(255, 255, 255, 0.45); opacity: 1; margin-top: 7px; } .contact-number-item .content h3 { color: #FFF; font-size: 45px; font-style: normal; font-weight: 700; line-height: 50px; letter-spacing: -1.48px; } /*------------------- Blogs Section CSS -------------------*/ .blog-card-item { border-radius: 12px; background: #FFF; box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.25); padding: 10px 10px 34px 10px; } .blog-card-text span { border-radius: 6px; background: rgba(64, 123, 255, 0.05); display: inline-block; padding: 4px 10px; justify-content: center; align-items: center; color: #102D7A; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; } .blog-card-info { padding: 8px; } .blog-card-text h3 { color: #181A2A; font-size: 18px; font-style: normal; font-weight: 600; line-height: 28px; padding: 20px 0px; } .blog-card-btm { display: flex; align-items: center; column-gap: 20px; } .blog-card-user { display: flex; align-items: center; column-gap: 12px; } .blog-card-btm .content p, .blog-card-date p { color: #97989F; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .blog-card-img, .portfolio-card-img { overflow: hidden; } .blog-card-img img, .portfolio-card-img img { transition: transform 0.8s ease; } .blog-card-item:hover .blog-card-img img, .portfolio-card-item:hover .portfolio-card-img img { transform: scale(1.1); } /*------------------- Footer Section CSS -------------------*/ .footer-top { background: #102D7A; height: 368px; } .footer-logo h2 { color: #FFF; font-size: 40px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 30px; } .footer-info { text-align: center; background: #B7CCF8; padding: 23px 19px; height: 100%; } .footer-info p { color: #343844; text-align: center; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; } .newsletter { margin-top: 40px; margin-bottom: 26px; } .newsletter-inner .form-control { color: #6E6A74; font-size: 12px; font-style: normal; font-weight: 300; line-height: 20px; } .newsletter-inner .form-control { height: 46.407px; } .newsletter-inner button { border-radius: 0px 4px 4px 0px; background: #112D7A; height: 46.407px; color: #FFF; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; border: none; position: absolute; top: 0; right: 0; padding: 13px 9px; } .newsletter-inner { position: relative; } .footer-item { display: flex; align-items: baseline; margin-bottom: 24px; column-gap: 10px; } .footer-item .icon img { min-width: 16px; } .footer-title h3 { color: #FFF; font-size: 18px; font-style: normal; font-weight: 700; line-height: 20px; } .footer-item .text p { color: #EAF9FF; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: 0.5px; } .footer-list { margin-top: 25px; margin-bottom: 32px; } .footer-social-item { width: 40px; height: 40px; border-radius: 4px; background: #B7CCF8; display: inline-flex; align-items: center; justify-content: center; } .footer-social-item i { font-size: 20px; color: #000; } .footer-link { display: flex; align-items: baseline; margin-bottom: 10px; column-gap: 10px; transition: all 0.8s ease-in-out; } .footer-link .text p { color: #FFF; font-size: 12px; font-style: normal; font-weight: 400; line-height: 10px; transition: all 0.8s ease-in-out; } .footer-list li:hover .footer-link { margin-left: 10px; } .footer-list li:hover .footer-link .text p { color: #B7CCF8; font-weight: 500; font-size: 13px; } .footer-detail { margin: 64px 0px; } .footer-btm { background: #B7CCF8; padding: 15px 0px; } .copy-right p { color: #343844; font-size: 12px; font-style: normal; font-weight: 500; line-height: 20px; } .copy-right p a { color: #112D7A; margin-right: 10px; } .copy-right p a:last-child { margin-left: 10px; } /*------------------- Page banner Section CSS -------------------*/ .page-banner { text-align: center; background-image: url("../img/page-banner.webp"); background-position: center; background-size: cover; padding: 60px 0px 100px 0px; } .page-banner-content h1 { color: #FFF; text-align: center; font-size: 48px; font-style: normal; font-weight: 600; line-height: 60px; letter-spacing: -1.44px; margin-bottom: 20px; } .page-banner-content p { color: #A9A8A8; text-align: center; font-feature-settings: 'liga' off, 'clig' off; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } /*------------------- About Page CSS -------------------*/ .about-item { border-radius: 20px; border: 1px solid #EBEBEB; background: #FFF; padding: 18px 32px 18px 23px; display: flex; align-items: flex-start; gap: 17px; margin-bottom: 16px; transition: all 1s ease-in-out; } .about-item .icon { min-width: 54px; min-height: 54px; background: rgba(16, 45, 122, 0.10); padding: 14px; border-radius: 50%; transition: all 1s ease-in-out; } .about-item .content h3 { color: #4D4D4D; font-size: 20px; font-style: normal; font-weight: 600; line-height: 24px; transition: all 1s ease-in-out; } .about-item .content p { color: #4D4D4D; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; transition: all 1s ease-in-out; } .about-item:hover { border: 1px solid #102D7A; background: #102D7A; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .about-item:hover .icon { background-color: #fff; } .about-item:hover .content h3 { color: #fff; } .about-item:hover .content p { color: #fff; } .about-content .description { margin: 30px 0px; } .rating-inner { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .rating { border-radius: 10px; background: #202124; box-shadow: 0px 0px 4px 0px rgba(16, 45, 122, 0.10); display: inline-block; padding: 15px; position: absolute; bottom: 29px; left: -56px; animation: moveUpDown 3s ease-in-out infinite; } .rating-inner h4 { color: #FFF; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; } .rating p { color: #FFF; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } .trustpilot-rating { display: inline-block; padding: 15px; border-radius: 10px; background: #FFF; box-shadow: 0px 0px 4px 0px rgba(16, 45, 122, 0.10); position: absolute; top: -40px; right: -6px; animation: moveUpDown 8s ease-in-out infinite; } .trustpilot-rating p { color: #000; font-size: 12px; font-style: normal; font-weight: 600; line-height: normal; } .trustpilot-rating-inner { display: flex; align-items: center; gap: 9px; } .trustpilot-rating-inner h4 { color: #000; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; } .about-img { position: relative; margin-top: 12px; } .about-sec { margin: 40px 0px; position: relative; } .about-sec::before { position: absolute; content: ""; background-image: url("../img/vector.webp"); left: 0; top: -42px; width: 270px; height: 239px; animation: identifier 20s linear infinite; } .about-feature-item h3 { color: #FFF; font-size: 38px; font-style: normal; font-weight: 700; line-height: normal; } .about-feature-item p { color: #FFF; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } .about-feature { background-image: url("../img/feacture-bg.webp"); background-color: #102D7A; } .about-feature-number { display: flex; align-items: center; justify-content: space-around; } .about-feature-top .title { color: #FFF; } .about-feature { padding: 60px 0px; } .about-feature-top { margin-bottom: 60px; } .about-feature-card { border-radius: 20px; background: rgba(255, 255, 255, 0.10); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10); padding: 30px 26px; transition: all 0.8s ease-in-out; } .about-feature-card .text h3 { color: #FFF; font-size: 20px; font-style: normal; font-weight: 500; line-height: normal; margin-bottom: 12px; transition: all 0.8s ease-in-out; } .about-feature-card .text p { color: #FFF; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; transition: all 0.8s ease-in-out; } .about-feature-card .icon img { transition: all 0.8s ease-in-out; } .about-feature-card .text { margin-top: 21px; margin-bottom: 30px; } .about-feature-btn { display: inline-flex; padding: 8px 19px; align-items: center; gap: 20px; border-radius: 23px; background: #136B8B; } .about-feature-btn a { color: #FFF; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } .about-feature-card:hover { background-color: #fff; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10); } .about-feature-card:hover .text h3 { color: #3C4D6B; } .about-feature-card:hover .text p { color: #778191; } .about-feature-card:hover .icon img { filter: brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(1074%) hue-rotate(184deg) brightness(90%) contrast(87%); } .about-choose-content .title { border-bottom: 1px solid #E4E4E4; padding-bottom: 30px; } .about-choose-content .description { padding-top: 22px; } .about-choose-card .icon { width: 60px; height: 60px; border-radius: 10px; background: #102D7A; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10); display: inline-flex; align-items: center; justify-content: center; padding: 15px; margin-bottom: 20px; transition: all 0.8s ease-in-out; } .about-choose-card .text h3 { color: #3C4D6B; font-size: 20px; font-style: normal; font-weight: 500; line-height: normal; margin-bottom: 22px; transition: all 0.8s ease-in-out; } .about-choose-card .text p { color: #778191; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; transition: all 0.8s ease-in-out; } .about-choose-card { border-radius: 20px; background: #FFF; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10); padding: 22px 23px; margin-bottom: 22px; transition: all 0.8s ease-in-out; } .about-choose-card:hover { background: #102D7A; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10); } .about-choose-card:hover .icon { background: #fff; } .about-choose-card:hover .icon img { filter: brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(1074%) hue-rotate(184deg) brightness(90%) contrast(87%); transition: all 0.8s ease-in-out; } .about-choose-card:hover .text h3 { color: #fff; } .about-choose-card:hover .text p { color: #fff; } .about-choose { background-image: url("../img/about-choose-bg.webp"); background-position: center; background-size: cover; } /*------------------- Service Page CSS -------------------*/ .service-index { border-radius: 20px; background: #FFF; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10); padding: 25px 21px; width: 100%; max-width: 96%; position: sticky; top: 30px; z-index: 99; } .service-index h2 { color: #1F284F; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: 0.36px; } .content-list { margin-top: 30px; border-left: 1px solid #DFDFC1; } .table-index { margin-left: 24px; } .table-index li a { color: rgba(114, 114, 114, 0.70); font-size: 16px; font-style: normal; font-weight: 500; line-height: 30px; letter-spacing: 0.24px; } .table-index li a.active { color: #727272; position: relative; } .table-index li a.active::after { content: " "; position: absolute; top: 0; background: #1478F1; width: 3px; height: 23px; left: -26px; z-index: 99; } .table-index li { padding: 9px 0px; } .service-details { border-radius: 20px; background: #FFF; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10); padding: 26px 24px; } .service-form { border-radius: 20px; background: #FFF; box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25); padding: 25px 23px 26px 28px; position: sticky; top: 32px; z-index: 999; } .service-info .col-lg-8 { width: 100%; max-width: 72%; } .service-info .col-lg-4 { width: 100%; max-width: 28%; } .service-form p { color: #727272; font-size: 13px; font-style: normal; font-weight: 400; line-height: 15px; letter-spacing: 0.195px; margin: 16px 0px; } .service-form p a { color: #102D7A; } .input-wapper { position: relative; margin-bottom: 13px; } .input-wapper i { position: absolute; top: 18px; left: 11px; } .input-wapper .c-code { position: absolute; top: 0.6px; left: 0.6px; border-radius: 4px 0px 0px 4px; background: #EBEBEB; width: 61px; padding: 12.5px 12px; } .input-wapper span { color: #303030; font-size: 14px; font-style: normal; font-weight: 400; line-height: 15px; letter-spacing: 0.21px; } .service-form .form-control { border-radius: 5px; border: 1px solid #BBD2D8; background: #FFF; padding: 14px 14px 14px 38px; color: #303030; font-size: 14px; font-style: normal; font-weight: 400; line-height: 15px; letter-spacing: 0.21px; } .service-form .form-select { border-radius: 5px; border: 1px solid #BBD2D8; padding: 14px 14px 14px 12px; color: #303030; font-size: 14px; font-style: normal; font-weight: 400; line-height: 15px; letter-spacing: 0.21px; } .service-form .form-control#inputNumber { padding-left: 75px; } .service-form .form-title h3 { color: #1F284F; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; font-family: "Open Sans", sans-serif; position: relative; } .service-form .form-title h3::after { content: ""; position: absolute; border-bottom: 2px solid #102D7A; width: 50px; bottom: -13px; left: 0; } .service-box .title { margin-bottom: 26px; } .service-form .btn { display: inline-flex; padding: 10px 30px; justify-content: center; align-items: center; border-radius: 8px; background: #102D7A; color: #FFF; font-family: "Open Sans"; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.25px; margin-top: 24px; width: 100%; } .service-wapper { display: flex; align-content: center; justify-content: space-between; gap: 33px; } .service-box { padding-bottom: 35px; border-bottom: 1px solid rgba(48, 48, 48, 0.30); } .service-list-item { padding-bottom: 22px; margin-left: 38px; position: relative; margin-top: 24px; } .service-list-item::before { position: absolute; content: ""; background-image: url("../img/trick-icon.webp"); width: 20px; height: 20px; top: 5px; left: -38px; } .service-list-item h3 { color: #1F284F; font-size: 20px; font-style: normal; font-weight: 700; line-height: 32px; } .service-list-item p { color: #727272; font-size: 16px; font-style: normal; font-weight: 400; line-height: 28px; } .service-cta { border-radius: 8px; background: #102D7A; padding: 28px 30px; } .service-cta-innner h3 { color: #FFF; font-size: 24px; font-style: normal; font-weight: 700; line-height: 32px; } .service-cta-innner p { color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: 28px; } .service-cta .custom-btn a { color: #102D7A; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; padding: 8px 19px; margin-top: 0; } .dots-list { margin-top: 20px; } .dots-list li { color: #727272; font-size: 16px; font-style: normal; font-weight: 400; line-height: 32px; } .service-step { margin-left: 44px; margin-top: 30px; } .service-step-item { position: relative; } .service-step { counter-reset: step-counter; } .service-step-item::after { position: absolute; content: counter(step-counter); counter-increment: step-counter; display: flex; min-width: 30px; height: 30px; padding: 7px 11px 7px 10px; justify-content: center; align-items: center; border-radius: 15px; border: 1px solid #102D7A; background: #FFF; color: #102D7A; text-align: center; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px; top: 3px; left: -44px; } .service-step-item::before { position: absolute; content: " "; border: 1px dashed #D1D5DB; height: 100%; top: 30px; left: -28px; } .service-step-item:last-child:before { display: none; } .service-step-item h3 { color: #1F284F; font-size: 20px; font-style: normal; font-weight: 700; line-height: 32px; margin-bottom: 12px; } .service-step-item p { color: #727272; font-size: 16px; font-style: normal; font-weight: 400; line-height: 28px; } .service-step-item { margin-bottom: 24px; } .service-faq .title { margin: 40px 0px; } .service-slider { background-image: url("../img/screen/slider-background.webp"); background-position: center; background-size: cover; } .template-card { background-color: #102D7A; background-image: url("../img/screen/vector.webp"); background-position: center; background-size: cover; padding: 52px 42px 0px 42px; border-radius: 18px; background-repeat: no-repeat; height: 100%; position: relative; } .template-card h3 { color: #FFF; font-size: 28px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 21px; } .template-card p { color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .template-card-btn .login-btn { padding: 6px 5px 6px 19px; width: auto; margin-bottom: 40px; height: auto; gap: 18px; position: absolute; bottom: 0; } .template-card-btn .login-btn .text { color: #102D7A; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; font-family: "Open Sans", sans-serif; } .template-wapper { border-bottom: 1px solid rgba(0, 0, 0, 0.10); padding-bottom: 40px; } .template-caption-btn { display: flex; align-items: center; justify-content: space-between; } .template-caption-btn span img { width: auto !important; } .template-caption-btn span { display: flex; align-items: center; gap: 5px; } .template-caption-btn .text p { color: #1F284F; font-size: 16px; font-style: normal; font-weight: 500; line-height: 32px; } .template-caption-btn .text span { color: rgba(31, 40, 79, 0.50); font-size: 14px; font-style: normal; font-weight: 500; line-height: 32px; } .template-caption { padding: 0px 12px; } .template-caption h3 { color: #1F284F; font-size: 18px; font-style: normal; font-weight: 700; line-height: 32px; margin-bottom: 8px; } .template-caption-btn .btn { border-radius: 18px; border: 1px solid #102D7A; padding: 10px 22px; transition: all 0.8s ease-in-out; } .template-caption-btn .btn button { color: #102D7A; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; transition: all 0.8s ease-in-out; border: 0; background: transparent; } .template-caption-btn .btn:hover { background: #102D7A; } .template-caption-btn .btn:hover button { color: #fff; } .template-slider-wapper .owl-theme .owl-nav { position: absolute; right: 0; top: -5.5rem; margin-top: 0 !important; } .service-slider .slider-caption { margin-bottom: 40px; } .template-slider-wapper .owl-theme .owl-nav [class*=owl-]:hover { background: transparent !important; } .inquery-form.service-form { box-shadow: none; padding: 0px; } .inquery-form-popup .modal-body { padding: 30px; } .inquery-form-popup .modal-dialog { max-width: 400px; } .btn:first-child:active { color: #FFF; background: #102D7A; border-color: #102D7A; } .inquery-form-popup .modal-title { color: #1F284F; } .inquery-form-popup .modal-header { padding: 18px 24px 0px 30px; border-bottom: 0px; } .inquery-form-popup .modal-header .btn-close { border: 1px solid #102D7A; border-radius: 50%; padding: 10px; } /*------------------- Blogs Page CSS -------------------*/ .blog-card { border: 2px solid #EEE; background: #FFF; margin-bottom: 20px; position: relative; overflow: hidden; } .blog-img { overflow: hidden; } .blog-img img { transition: transform 0.8s ease; } .blog-card:hover .blog-img img { transform: scale(1.1); } .blog-content { padding: 15px 24px; } .user-info img { border-radius: 50%; } .user-info h3 { color: #000; font-size: 15px; font-style: normal; font-weight: 600; line-height: 25px; } .blog-btm { display: flex; align-items: center; justify-content: space-between; } .user-info h4 { color: #000; font-size: 15px; font-style: normal; font-weight: 600; line-height: 25px; } .blog-btm a { color: #505050; font-size: 16px; font-style: normal; font-weight: 700; line-height: 25px; position: relative; padding: 6px 14px; } .blog-content h3 { color: #181E23; font-size: 20px; font-style: normal; font-weight: 500; line-height: 27px; letter-spacing: 0.3px; margin-top: 20px; margin-bottom: 40px; } .blog-content span { color: rgba(35, 35, 35, 0.50); font-size: 15px; font-style: normal; font-weight: 400; line-height: 25px; } .blog-btm a::before { content: ""; position: absolute; top: 5px; width: 26px; height: 26px; background-color: rgba(16, 45, 122, 0.15); border-radius: 50px; left: 4px; display: inline-block; transition: all 1s ease-in-out; } .blog-btm a:hover::before { width: 100%; top: 5px; left: 0px; } .blog-right-side { background: #FFF; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); padding: 38px 38px 20px 38px; margin-bottom: 36px; } .category-title h3 { color: #181E23; font-size: 20px; font-style: normal; font-weight: 600; line-height: 24px; border-bottom: 1px solid #181E23; padding-bottom: 5px; } .blog-category-info { margin-top: 36px; margin-right: 25px; } .blog-category-item { border-radius: 10px; background: rgba(16, 45, 122, 0.05); padding: 17px 7px; margin-bottom: 12px; } .blog-resent-item .text { padding-bottom: 15px; padding-top: 10px; border-bottom: 1px solid rgba(24, 30, 35, 0.50); } .blog-category-item p { color: #181E23; text-align: center; font-size: 14px; font-style: normal; font-weight: 400; line-height: 10px; letter-spacing: 0.21px; } .blog-category-item:hover { background: #102D7A; } .blog-category-item:hover p { color: #fff; font-weight: 600; } .rounded-16 { border-radius: 16px; } .blog-resent-info { margin: 32px 0px; } .blog-resent-item { display: flex; align-items: center; gap: 28px; } .blog-resent-item span { color: #181E23; font-size: 14px; font-style: normal; font-weight: 300; line-height: 24px; } .blog-resent-item p { color: #181E23; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; } .blog-resent-info .custom-btn a { padding: 10px 30px; margin-top: 48px; } /*------------------- Portfolio Details Page CSS -------------------*/ .portfolio-overview-content { margin-right: 5rem; } .feature-item h4 { color: #3C4D6B; font-size: 18px; font-style: normal; font-weight: 700; line-height: 24px; text-transform: capitalize; position: relative; margin-left: 39px; } .feature-item h4::before { position: absolute; content: ""; background-image: url("../img/portfolio/check-circle.webp"); width: 26px; height: 26px; top: 0px; left: -40px; } .feature-item { display: inline-block; border-radius: 25.5px; background: #F7F7F7; padding: 12px 15px; } .feature-inner { display: flex; gap: 15px; margin-top: 40px; } .portfolio-details-feature { background: #F2F2F2; padding-bottom: 60px; } .feature-content .title { margin: 25px 0px; } .feature-content .description { margin-right: 14rem; } .portfolio-details-heading { padding: 0px 6rem; } .portfolio-details-tab { border-radius: 10px; border: 1px solid #EEE; background: #FFF; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15); margin-top: 50px; } .portfolio-details-nav { padding: 50px 46px 18px 46px; } .portfolio-details-nav .nav-pills { position: relative; } .portfolio-details-nav .nav-pills::after { position: absolute; content: " "; border: 1px dashed #102D7A; height: 109%; top: -80px; right: -172px; } .details-nav-title h3 { color: #011E41; font-size: 24px; font-style: normal; font-weight: 700; line-height: 30px; letter-spacing: 0.36px; position: relative; border-bottom: 1px solid #EEE; display: inline-block; padding-bottom: 21px; } .details-nav-title h3::after { content: ""; position: absolute; border-bottom: 2px solid #102D7A; width: 89px; bottom: 16px; left: 0; } .portfolio-details-nav .nav-pills { display: inline-flex; flex-direction: column; margin-top: 33px; } .portfolio-details-nav .nav-pills .nav-link { color: #011E41; font-size: 18px; font-style: normal; font-weight: 500; line-height: 30px; letter-spacing: 0.27px; border-radius: 5px; border-bottom: 1px solid #F4F4F4; padding: 8px 24px; width: 100%; text-align: left; margin-bottom: 18px; position: relative; } .portfolio-details-nav .nav-pills .nav-item { position: relative; } .portfolio-details-nav .nav-pills .nav-item::after { content: ""; position: absolute; width: 18px; height: 18px; border: 4px solid #102D7A; border-radius: 50%; top: 14px; right: -180px; background: #fff; z-index: 9; } .portfolio-details-nav .nav-pills .nav-item.active::after { background: #EFA434; } .portfolio-details-nav .nav-pills .nav-link.active, .portfolio-details-nav.nav-pills .show>.nav-link { color: #fff; background-color: #102D7A; border-radius: 5px; transition: all 0.8s ease-in-out; } .nav-details { border-radius: 0px 10px 10px 0px; border: 1px solid #EEE; background: #FFF; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15); padding: 40px 32px; height: 100%; } .nav-details-inner h3 { color: #011E41; font-size: 24px; font-style: normal; font-weight: 700; line-height: 42px; letter-spacing: 0.36px; } .nav-details-inner .inner-img { margin-top: 40px; } .portfolio-benfit { background: #102D7A; } .portfolio-benfit-inner { text-align: center; padding: 0px 20rem; } .portfolio-benfit-inner .top-text { color: #fff; } .portfolio-benfit-inner .title { color: #fff; } .benfit-icon { width: 133px; height: 133px; background: rgba(255, 255, 255, 0.05); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 26px; } .benfit-text p { color: #FFF; text-align: center; font-size: 18px; font-style: normal; font-weight: 700; line-height: 26px; letter-spacing: 0.27px; } .portfolio-benfit-item { text-align: center; margin-bottom: 85px; } .portfolio-benfit-info { margin-top: 60px; } .work-process-step .work-process-item { width: 100%; max-width: 230px; } .process-step { position: relative; } .process-step .work-process-item:last-child::before { position: absolute; content: ""; width: 20px; height: 20px; background: #fff; border: 4px solid #102D7A; border-radius: 50%; bottom: -8px; right: -6px; } .process-step .work-process-item:last-child::after { position: absolute; content: ""; width: 20px; height: 20px; background: #fff; border: 4px solid #102D7A; border-radius: 50%; bottom: -8px; left: -90px; } .process-step::before { content: ""; position: absolute; width: 60px; border-bottom: 4px dashed #102D7A; bottom: 0; left: -71px; } .work-process-item .icon { margin-left: 4rem; } .work-process-item .text h3 { color: #1F284F; font-size: 42px; font-style: normal; font-weight: 600; line-height: 30px; letter-spacing: 0.63px; margin-bottom: 18px; margin-top: 18px; } .work-process-item .text h5 { color: #1F284F; font-size: 20px; font-style: normal; font-weight: 700; line-height: 30px; letter-spacing: 0.3px; } .work-process-info { margin: 44px 0px; } .text-inner { position: relative; /* padding-bottom: 50px; */ border-bottom: 4px dashed #102D7A; height: 42vh; } .text-inner::before { position: absolute; content: ""; width: 12px; height: 12px; background-color: #102d7a; border-radius: 50%; bottom: -7px; left: -21px; outline-offset: 3px; outline: 5px solid #102D7A; } .text-inner::after { position: absolute; content: ""; height: 90%; border-radius: 10px; bottom: 12px; left: -17px; border: 3px solid #102D7A; } .work-process-step { display: flex; justify-content: center; position: relative; } .work-process { position: relative; } .work-process::before { position: absolute; content: ""; background-image: url(../img/vector.webp); left: 0; top: 24px; width: 270px; height: 239px; animation: identifier 20s linear infinite; } .portfolio-pages { background: #F2F2F2; } .page-img { width: 100%; margin: auto; border: 2px solid #fff; border-radius: 8px; cursor: n-resize; box-shadow: 0 20px 60px rgba(0, 0, 0, .08); } .page-img img { width: 100%; object-fit: cover; object-position: top; height: 100%; max-height: 475px; transition: 8s all ease; } .page-img img:hover { object-position: bottom; } .page-info { text-align: center; } .page-info .page-text h3 { color: #1F284F; text-align: center; font-size: 22px; font-style: normal; font-weight: 700; line-height: 46px; margin-top: 10px; } .portfolio-pages-inner { margin-top: 45px; } .store-btn { display: flex; align-items: center; gap: 16px; margin-top: 50px; } .app-screen-content .title { margin-bottom: 22px; } .app-screen-img { margin-bottom: -206px; } .request-quote { background: #fff; position: relative; } .app-screen { padding-top: 50px; } /*------------------- Blog Listing Page CSS -------------------*/ .blog-card-grid, .blog-details { width: 100%; max-width: 98.8%; } .comment-title h3 { color: #181E23; font-size: 20px; font-style: normal; font-weight: 700; line-height: 30px; letter-spacing: 0.3px; margin-bottom: 20px; } .comment-title { position: relative; } .comment-title::after { position: absolute; content: ""; width: 57px; height: 2px; background: #FFB600; top: 32px; left: 0; } .comment-author { display: flex; align-items: center; gap: 20px; } .comment-author .icon img { border-radius: 50%; } .comment-author .text span { color: rgba(24, 30, 35, 0.50); font-size: 14px; font-style: normal; font-weight: 600; line-height: 18px; display: block; } .comment-item { padding: 20px 0px 30px 0px; padding-top: 10px; border-bottom: 1px solid rgba(24, 30, 35, 0.50); } .comment-item p { color: #181E23; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; margin-bottom: 30px; margin-top: 20px; } .blog-comment { padding: 22px 42px 22px 26px; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .comment-item:last-child { border: none; } .blog-cta { background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); padding: 20px 38px 35px 38px; margin-top: 20px; text-align: center; position: sticky; top: 102px; z-index: 9; margin-bottom: 22px; } .blog-cta h3 { color: #102D7A; text-align: center; font-size: 50px; font-style: normal; font-weight: 700; line-height: normal; } .blog-cta p { color: #181E23; text-align: center; font-size: 17px; font-style: normal; font-weight: 600; line-height: 24px; letter-spacing: 0.255px; padding: 22px 0px; } .page-nav { margin: 50px 0px; } .pagination { --bs-pagination-border-width: none; gap: 30px; border-radius: 10px; background: #FFF; box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15); height: 73px; align-items: center; } .page-item .page-link { color: rgba(51, 74, 115, 0.50); font-size: 17px; font-style: normal; font-weight: 600; line-height: 20px; } .page-item:last-child .page-link { color: #131F2B; font-size: 17px; font-style: normal; font-weight: 600; line-height: 20px; } .page-link:hover, .page-link:focus { background: transparent; box-shadow: none; } .page-link.active { border-radius: 5px; background: #0060B4; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); padding: 9px 15px; color: #fff; } .page-link.dots { color: #0060B4; } .page-link.prev.disabled { color: rgba(51, 74, 115, 0.50); background: transparent; } .page-link.prev.disabled svg path { fill: #334A73; fill-opacity: 0.5; } .page-link.prev { color: #131F2B; } /*------------------- Contact Page CSS -------------------*/ .contact-form { border-radius: 20px; background: #EBEEF7; padding: 30px 33px 34px 33px; } .form-title { margin-bottom: 40px; } .form-title h3 { color: #061E42; font-size: 28px; font-style: normal; font-weight: 700; line-height: 50px; letter-spacing: 0.42px; } .form-title p { color: #727272; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; } .contact-form .form-control { border-radius: 5px; background: #FFF; color: #6E6A74; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; padding: 13px 20px; margin-bottom: 6px; border: 0; } .contact-form .form-select { border-radius: 5px; color: #6E6A74; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; padding: 13px 20px; margin-bottom: 6px; border: 0; } .contact-form button { border-radius: 5px; background: #102D7A; padding: 20px 0px; color: #fff; font-size: 14px; font-style: normal; font-weight: 500; line-height: 15px; border: 0; } .contact-detail-info { width: 100%; max-width: 93%; margin-left: auto; } .contact-detail-content .title { margin-right: 18px; } .contact-detail-item .icon img { width: 44px; height: 44px; margin-bottom: 18px; } .contact-detail-item .content h3 { color: #061E42; font-size: 22px; font-style: normal; font-weight: 600; line-height: 25px; letter-spacing: 0.33px; margin-bottom: 15px; } .contact-detail-item .content p { color: #061E42; font-size: 18px; font-style: normal; font-weight: 400; line-height: 25px; } .contact-detail-contact { border-bottom: 1px solid rgba(0, 0, 0, 0.10); padding-bottom: 20px; margin-top: 48px; } .contact-detail-info h6 { color: #727272; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; margin-top: 18px; } /*------------------- blog detail Page CSS -------------------*/ .blog-details img { border-radius: 20px; } .blog-post-btm { margin: 24px 0px; display: flex; align-items: center; gap: 32px; } .blog-post-item { display: flex; align-items: baseline; gap: 12px; } .blog-post-item .text span { color: rgba(48, 48, 48, 0.70); font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: 0.21px; } .blog-post-item .icon img { border-radius: 0px; } .post-quote p { color: #727272; font-size: 20px; font-style: normal; font-weight: 600; line-height: 33px; } .post-quote { border-radius: 10px; background: linear-gradient(90deg, rgba(16, 45, 122, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%); padding: 41px 30px 34px 111px; position: relative; margin: 46px 0px; } .post-quote::before { content: ""; position: absolute; background-image: url("../img/post-quats.webp"); background-repeat: no-repeat; top: 16px; left: 44px; width: 58px; height: 49px; } .post-content .title { margin-top: 32px; } .post-content .service-list-item { padding-bottom: 0px; } .post-cta .custom-btn a { margin-top: 0px; } .blog-btm .user-info img { width: auto !important; } .related-blog .owl-theme .owl-nav.disabled+.owl-dots { margin-top: 30px; } .related-blog .owl-theme .owl-dots .owl-dot span { width: 13px; height: 13px; border-radius: 50px; background: #D9D9D9 !important; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #102D7A !important; } /*------------------- Privacy Policy Page CSS -------------------*/ .privacy-policy .tools-list p { position: relative; } .privacy-policy .tools-list p::before { position: absolute; content: ""; background-image: url(../img/trick-icon.webp); top: 2px; left: -32px; width: 20px; height: 20px; } .privacy-policy .list-item { margin-left: 32px; margin-bottom: 30px; } .privacy-policy-item h2 { color: #303030; font-size: 24px; font-style: normal; font-weight: 700; line-height: 28px; letter-spacing: 0.36px; margin-bottom: 25px; margin-top: 30px; } .privacy-policy-content { border-radius: 20px; background: #FFF; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15); padding: 32px 34px; } .privacy-policy h3 { color: #303030; font-size: 14px; font-style: normal; font-weight: 600; line-height: 24px; letter-spacing: 0.21px; margin-left: 30px; margin-bottom: 20px; display: block; } .privacy-policy-item { border-bottom: 1px solid rgba(48, 48, 48, 0.50); } /*------------------- Error Page CSS -------------------*/ .error-banner { background: #fff; padding: 5.98rem 0rem; } .error-banner-content h1 { color: #102D7A; text-align: center; font-size: 100px; font-style: normal; font-weight: 700; line-height: 60px; margin-bottom: 3.5rem; } .error-banner-content p { color: #102D7A; text-align: center; font-size: 30px; font-style: normal; font-weight: 500; line-height: 50px; margin-top: 20px; } .error-banner-content .custom-btn a { background: #102D7A; padding: 20px 30px; height: 60px; border-radius: 999px; color: #fff; } .portfolio-details-list { margin-top: 30px; } .portfolio-details-list .accordion-button:not(.collapsed)::after { background-image: url(../img/up-arrow.webp); transform: rotate(-360deg); } .portfolio-details-list .accordion-button::after { background-image: url(../img/portfolio/right-arrow.webp); background-size: auto; width: 40px; height: 40px; } .portfolio-details-list .accordion-body { padding-top: 32px; } .portfolio-details-list { display: none; } /* ----------------- Price Plan ---------------- */ .price-plan { background: #F5F5F5; } .pricing-table { background: #fff; box-shadow: 0px 1px 10px -6px rgba(0, 0, 0, .15); padding: 2rem; border-radius: 4px; transition: .3s; } .pricing-table:hover { box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, .15); } .pricing-table .pricing-label { border-radius: 2px; padding: .25rem .5rem; margin-bottom: 1rem; display: inline-block; font-size: 12px; font-weight: 500; } .pricing-table h2 { color: #3b3b3b; font-size: 24px; font-weight: 500; } .pricing-table h5 { color: #B3B3B3; font-size: 14px; font-weight: 400; } .pricing-table .pricing-features { margin-top: 2rem; } .pricing-table .pricing-features .feature { font-size: 14px; margin: .5rem 0; color: #B3B3B3; } .pricing-table .pricing-features .feature span { display: inline-block; float: right; color: #3b3b3b; font-weight: 500; } .pricing-table .price-tag { margin-top: 2rem; text-align: center; font-weight: 500; } .pricing-table .price-tag .symbol { font-size: 24px; } .pricing-table .price-tag .amount { letter-spacing: -2px; font-size: 64px; } .pricing-table .price-tag .after { color: #3b3b3b; font-weight: 500; } .pricing-table .price-button { display: block; color: #fff; margin-top: 2rem; padding: .75rem; border-radius: 2px; text-align: center; font-weight: 500; transition: .3s; } .pricing-table .price-button:hover { text-decoration: none; } .purple .pricing-label { background: #cad2ff; color: #627afe; } .purple .price-tag { color: #627afe; } .purple .price-button { background: #627afe; } .purple .price-button:hover { background: #546dfe; } .turquoise .pricing-label { background: #b9edee; color: #44cdd2; } .turquoise .price-tag { color: #44cdd2; } .turquoise .price-button { background: #44cdd2; } .turquoise .price-button:hover { background: #2dbcc4; } .red .pricing-label { background: #ffc4c4; color: #ff5e5e; } .red .price-tag { color: #ff5e5e; } .red .price-button { background: #ff5e5e; } .red .price-button:hover { background: #f23c3c; } /* -------------- Plan ------------ */ .plans { /* width: 96%; max-width: 1128px; */ margin: 0 auto; } .plans_container { padding: 1rem 0 2rem; } .plansHero { text-align: center; padding: 5rem 0 4.5rem; line-height: 1.21; } .plansHero_title { font-weight: 700; font-size: 2rem; margin: 0 0 1rem 0; color: #000; } .plansHero_subtitle { margin: 0; } .planItem { background-color: #fff; border: 1px solid #e6e6e6; border-radius: 1rem; box-shadow: none; padding: 2rem 1.5rem; display: inline-flex; flex-direction: column; } .planItem_container { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.5rem; } .planItem .price { margin: 2rem 0; } .planItem-pro { border: 0; box-shadow: 0px 14px 30px rgba(204, 204, 204, 0.32); } .planItem-pro .label { background-color: #1769ff; color: #fff; font-weight: 600; line-height: 1.25; font-size: 1rem; text-align: center; padding: 0.625rem 1.125rem; border-radius: 2rem; } .planItem-entp { background-color: #1769ff; } .planItem-entp .card-info h2 { color: #fff; } .planItem-entp .card_desc { color: #fff; } .planItem-entp .featureList li { color: #fff; } .planItem-entp .card { color: #fff; } .planItem_container .featureList li:before { content: ""; background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.552.134 5.717 10.97 1.448 6.701 0 8.149l5.717 5.717L18 1.583 16.552.134Z' fill='%231478F1'/%3E%3C/svg%3E%0A"); background-size: cover; display: block; width: 1.125rem; height: 0.875rem; } .planItem-entp .card_icon { background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.813 11.077 21 1.155l17.187 9.922v19.846L21 40.845 3.813 30.923V11.077Z' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='21' cy='21' r='8' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); background-size: cover; } .planItem-entp .price, .planItem-entp .featureList { color: #fff; } .planItem-entp .featureList li:before { background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.552.134 5.717 10.97 1.448 6.701 0 8.149l5.717 5.717L18 1.583 16.552.134Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A"); } .planItem .button { margin-top: auto; } .planItem .button { background-color: #c2dbfa; color: #1F284F; border-radius: 0.5rem; display: block; width: 100%; padding: 1rem 1.5rem; border: 0; line-height: inherit; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.1s ease-in-out; user-select: none; } .planItem .button.button:hover { transform: translateY(-2px); box-shadow: 0px 6px 10px rgb(234 76 137 / 20%), 0px 6px 10px #c2dbfa; } .planItem .button.button-pink { background-color: #1478F1 !important; color: #fff; } .planItem .button.button-pink:hover { box-shadow: 0px 6px 10px rgb(234 76 137 / 20%), 0px 6px 10px #c2dbfa; } .planItem .button.button-white { background-color: #fff !important; } .planItem .button.button-white:hover { box-shadow: 0px 6px 10px rgb(255 255 255 / 30%); } .card_header { display: flex; gap: 1rem; align-items: center; } .card_icon { width: 2.625rem; height: 2.625rem; position: relative; } .card-info h2 { color: #000; font-size: 1.5rem; line-height: 1.2; font-weight: 400; margin: 0; } .card_desc { margin: 1.5rem 0 0; color: #656c7c; } .featureList { padding-left: 0; } .featureList li { color: #000; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; } .featureList li:before { background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.552.134 5.717 10.97 1.448 6.701 0 8.149l5.717 5.717L18 1.583 16.552.134Z' fill='%231478F1'/%3E%3C/svg%3E%0A"); } .featureList li.disabled { color: #b1b8c9; } .featureList li.disabled:before { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 1.414 16.586 0 9 7.586 1.414 0 0 1.414 7.586 9 0 16.586 1.414 18 9 10.414 16.586 18 18 16.586 10.414 9 18 1.414Z' fill='%23B1B8C9'/%3E%3C/svg%3E"); height: 1.125rem; } .plans .symbol.symbol-rounded { border-radius: 50%; } .plans .symbol.symbol-rounded:after { border-radius: 50%; } .plans .symbol { border: 2px solid #1769ff; width: 2.625rem; height: 2.625rem; border-radius: 0.25rem; position: relative; } .plans .symbol:after { content: ""; display: block; position: absolute; border: 2px solid #102D7A; width: 1.5rem; height: 1.5rem; border-radius: 0.25rem; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (max-width: 640px) { .plans { max-width: 480px; width: 90%; } .planItem_container { grid-auto-flow: row; } } @media screen and (min-width: 641px) and (max-width: 768px) { html { font-size: 12px; } } @media screen and (min-width: 769px) and (max-width: 1080px) { html { font-size: 14px; } } .price { display: flex; color: #000; align-items: center; gap: 0.5625rem; font-weight: 600; font-size: 2rem; margin: 0; } .price span { font-size: 1rem; font-weight: 400; color: #656c7c; } .inquerForm .modal-header { position: absolute; top: 0; z-index: 9; right: 0px; border: 0; } .inquerForm .modal-header .btn-close { font-size: 12px; color: #102D7A; opacity: 1; } .inquerForm .request-quote-form { border-radius: 6px; padding: 30px 24px; } .inquerForm .request-quote-form h2 { color: #fff; font-size: 20px; font-style: normal; font-weight: 700; line-height: 32px; text-align: center; margin-bottom: 24px; margin-top: 20px; padding: 0px 20px; } .inquerForm .modal-dialog { max-width: 420px; } .amount-info td { color: #1F284F; font-size: 15px; font-style: normal; font-weight: 700; line-height: 32px; letter-spacing: 0.225px; padding-top: 20px; } .c-logo h2 { color: #1F284F; font-size: 40px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; margin-bottom: 40px; } .amout-caption p { color: rgba(48, 48, 48, 0.50); font-size: 15px; font-style: normal; font-weight: 700; line-height: 20px; letter-spacing: 0.225px; margin-bottom: 18px; } .amout-caption h3 { color: #303030; font-size: 37px; font-style: normal; font-weight: 600; line-height: 30px; letter-spacing: 0.555px; } .amount-info { margin-top: 40px; } .amount-info .form-control { height: 47px; color: rgba(48, 48, 48, 0.50); font-size: 15px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: 0.225px; border-color: #0F2D7A; background: #EEEFF1; } .text-disabled { color: rgba(48, 48, 48, 0.50) !important; } .checkout-amount { background: #F1F5FB; } .table { --bs-table-bg: #F1F5FB; } .checkout { width: 100%; max-width: 75%; padding: 75px 0px; } .card-section { width: 100%; max-width: 75%; padding: 75px 0px; margin-left: 50px; } .card-section .title h2 { color: #1F284F; font-size: 26px; font-style: normal; font-weight: 700; line-height: 30px; letter-spacing: 0.3px; margin-bottom: 40px; } .card-section p { color: #1F284F; font-size: 18px; font-style: normal; font-weight: 400; line-height: 30px; margin-bottom: 8px; margin-top: 18px; } .card-section .input-wapper { position: relative; margin-bottom: 0; } .border-btm { border-bottom: 1px solid rgba(48, 48, 48, 0.50); } .border-left { border-left: 1px solid rgba(48, 48, 48, 0.50); } .br-top-6 { border-radius: 6px 6px 0px 0px !important; } .br-6 { border-radius: 6px !important; } .br-btm-6 { border-radius: 0px 0px 6px 6px !important; } .br-btml-6 { border-bottom-left-radius: 6px !important; } .br-btmr-6 { border-bottom-right-radius: 6px !important; } .card-section .input-wapper .form-label { position: absolute; top: 13px; left: 21px; color: #1F284F; font-size: 15px; font-style: normal; font-weight: 400; line-height: 30px; } .card-section .input-wapper .form-control { background-color: #EEEFF1; padding: 11px 20px; } .card-section .input-wapper .select2-selection { background-color: #EEEFF1; padding: 12px 20px; border-radius: 6px 6px 0px 0px; border: 0; height: 48px; } .card-section .input-wapper .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 12px; right: 1px; width: 20px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { background-image: url("../img/down.svg"); margin-left: -20px !important; margin-top: -7px !important; width: 16px !important; height: 16px !important; border-style: inset !important; border-width: 0px !important; } .input-wapper .form-control.email { color: rgba(48, 48, 48, 0.87); font-size: 15px; font-style: normal; font-weight: 400; line-height: 30px; letter-spacing: 0.225px; padding-left: 5rem; } .input-wapper .form-control { border-radius: 0; } .card-section .input-wapper.border-btm img { position: absolute; top: 3px; right: 8px; } .input-wapper.border-left img { top: 13px; position: absolute; right: 14px; } .contct-info button { border-radius: 5px; background: #102D7A; padding: 16px 0px; color: #fff; font-size: 14px; font-style: normal; font-weight: 500; line-height: 15px; border: 0; margin-top: 24px; } .bg-gray { background: #F1F5FB; } .contct-info .input-wapper.border-btm img { position: relative; } .service-navbar { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; gap: 8px; overflow-x: scroll; overflow-y: hidden; padding-bottom: 12px; } .service-navbar .nav-link { display: inline-flex; padding: 10px 20px; .lazy-image { display: block; width: 100%; height: auto; } align-items: center; gap: 12px; border-radius: 23px; background: #102D7A; color: #FFF; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; height: 44px; width: 100%; min-width: 135px; justify-content: center; white-space: nowrap; } .potfolio-navbar { position: sticky; top: 8px; z-index: 1021; background-color: #fff; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); } .lazy-image { display: block; width: 100%; height: auto; } .error-message { color: red !important; font-size: 13px; display: none; } /* width */ .potfolio-navbar ::-webkit-scrollbar { width: 8px; height: 8px; } /* Track */ .potfolio-navbar ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ .potfolio-navbar ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; } /* Handle on hover */ .potfolio-navbar ::-webkit-scrollbar-thumb:hover { background: #1478F1; } .portfolio-top { margin-top: 4% !important; } .menu-dropdown { position: relative; } .custom-list { position: absolute; display: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; background-color: #fff; border-radius: 6px; padding: 10px 5px; } .sub-list { position: absolute; left: 50%; top: 0; display: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; background-color: #fff; border-radius: 6px; transform: translate(55%, 0%); } .custom-dropdown i { font-size: 13px; } .submenu-dropdown a { display: flex; align-items: center; justify-content: space-between; } .rotate-icon { transform: rotate(0deg); transition: transform 0.3s ease; } .submenu-dropdown { position: relative; } /* New CSS App screenshot_slider */ .screenshot_slider .owl-item .item { transform: translate3d(0, 0, 0); margin: 20px 0; } .screenshot_slider .owl-item .item img { transition: 0.3s; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transform: scale(0.80); border-radius: 20px; } .screenshot_slider .owl-item.center .item img { transform: scale(0.9); border-radius: 20px; border: 2px solid rgba(0, 0, 0, 0.15); } /* Position navigation buttons */ .screenshot_slider .owl-nav { position: absolute; top: 45%; width: 100%; transform: translateY(-45%); display: flex; justify-content: space-between; pointer-events: none; /* Prevents blocking slides */ } /* Style for previous (left) button */ .screenshot_slider .owl-nav .owl-prev { position: absolute; left: 0%; } /* Style for next (right) button */ .screenshot_slider .owl-nav .owl-next { position: absolute; right: 0%; } /* Navigation buttons styling */ .screenshot_slider .owl-nav button { background: #102D7A !important; color: #fff !important; border-radius: 50%; width: 45px; height: 45px; font-size: 22px !important; display: flex; align-items: center; justify-content: center; box-shadow: 0px 5px 10px rgba(255, 117, 140, 0.3); transition: all 0.3s ease-in-out; pointer-events: auto; /* Enables clicking */ cursor: pointer; } /* Hover effect for navigation buttons */ .screenshot_slider .owl-nav button:hover { background: linear-gradient(135deg, #ff4583, #ff5150) !important; transform: scale(1.1); box-shadow: 0px 8px 15px rgba(255, 0, 71, 0.4); } /* Adjusting dots position */ .screenshot_slider .owl-dots { text-align: center; margin-top: 20px; } .screenshot_slider.owl-carousel .owl-dots.disabled, .screenshot_slider.owl-carousel .owl-nav.disabled { display: block !important; } /* Adjusting dots position */ .screenshot_slider .owl-dots { text-align: center; margin-top: 20px; } /* Styling for inactive dots */ .screenshot_slider .owl-dots.disabled { display: block !important; opacity: 0.5; pointer-events: none; } /* Individual dot styles */ .screenshot_slider .owl-dot { width: 12px; height: 12px; background: #1478F1 !important; border-radius: 50%; display: inline-block !important; margin: 5px; transition: all 0.3s ease-in-out; position: relative; } /* Active dot style */ .screenshot_slider .owl-dot.active { background: linear-gradient(135deg, #102D7A, #1478F1) !important; width: 14px; height: 14px; box-shadow: 0px 0px 8px rgba(255, 81, 80, 0.6) !important; transform: scale(1.2); } /* Dot hover effect */ .screenshot_slider .owl-dot:hover { transform: scale(1.3); background: linear-gradient(135deg, #1478F1, #1478F1) !important; box-shadow: 0px 0px 10px rgba(255, 81, 80, 0.5); }