.required::after { content: " *"; color: #e32; position: absolute; margin: 0px 0px 0px 2px; font-size: 12px; padding: 0 5px 0 0; } .desc-hero { position: absolute; z-index: 2; left: 5%; } .output-container { align-items: center; display: flex; flex-direction: column; justify-content: center; margin: 50px; } .member { margin-top: 20%; } .desc-content-section h1 { color: #1d1d1f; font-family: Montserrat, sans-serif; font-size: 48px; font-weight: 700; letter-spacing: -.05em; text-align: center; text-transform: uppercase; } .desc-content-section { margin-bottom: 5%; } .portfolio-wrap { margin-bottom: 10%; } .portfolio-wrap h1 { color: #000000; /* font-family: Helvetica Nue, sans-serif; */ font-size: 25px; font-weight: 900; /* letter-spacing: -.05em; */ line-height: 25px; } .portfolio-wrap h2 { font-size: 25px; font-weight: 900; color: #68b3ff; transition: 0.3s; text-transform: uppercase; } .output-container h1 { color: #1d1d1f; font-family: Montserrat, sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -.05em; text-align: center; text-transform: uppercase; } .output-container h2 { font-size: 25px; font-weight: 900; color: #68b3ff; transition: 0.3s; text-transform: uppercase; } .output-container h3 { color: #000000; /* font-family: Helvetica Nue, sans-serif; */ font-size: 25px; font-weight: 700; /* letter-spacing: -.05em; */ line-height: 27px; } .output-container p { color: #777; /* font-family: Helvetica Nue, sans-serif; */ font-size: 17px; font-weight: 400; /* letter-spacing: -.05em; */ line-height: 27px; } .output-container .output-section { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 20px; } .output-container .output-section .output-content { align-items: center; background-color: #fbfbfd; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; margin: 20px; width: 420px; padding: 20px 0; } .output-container .output-section .output-content h4 { color: #000000; /* font-family: Helvetica, sans-serif; */ font-size: 25px; font-weight: 900; letter-spacing: -.05em; line-height: 23px; } .output-container .output-section .output-content p { align-items: center; text-align: center; color: #777; /* font-family: Helvetica, sans-serif; */ font-size: 18px; font-weight: 400; letter-spacing: -.05em; line-height: 30px; margin: 20px; max-width: 400px; } .output-container .output-section .output-content .output-img { margin: 20px; width: 100%; aspect-ratio: 16/9; object-fit: contain; } .content-section { align-items: center; background-color: #efefef; border-radius: 10px; display: flex; flex-direction: row; gap: 1em; justify-content: space-between; margin: 20px; padding: 50px 80px; } .content-section.portfolio-details { align-items: center; background-color: #efefef; border-radius: 10px; display: flex; flex-direction: row; gap: 1em; justify-content: space-between; margin: 20px 0; padding: 50px 80px; } .content-section .desc-content-section { align-items: flex-start; display: flex; flex-direction: column; } .content-section .desc-content-section .output-img { margin: 0; margin-bottom: 5%; width: 50%; aspect-ratio: 16/9; object-fit: contain; } .content-section .desc-content-section .p-content { margin: 10px 0; text-align: left; } .content-section .desc-img { display: flex; flex-direction: column; max-width: 600px; overflow: hidden; } .styles-module_whatsappButton__IWx9V a { align-items: center; background-color: #25d366; border-radius: 50%; bottom: 2rem; box-shadow: 0 4px 12px 0 rgb(0 0 0/15%); cursor: pointer; display: flex; height: 60px; justify-content: center; position: fixed; right: 2rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 60px; cursor: pointer; z-index: 999999; } .swiper-image { width: 200px; height: 100%; aspect-ratio: 8/8; object-fit: contain; } .swiper { height: 100vh !important; } .swiper-slide { background-position: center; background-size: cover; width: 100px; height: 100px; } .services .swiper-slide img { display: block; width: 350px; height: 216px; } .portfolio-details .swiper-slide img { display: block; width: 350px; height: 216px; } .services .swiper { height: 100% !important; } .banner-image { object-fit: cover; object-position: center; } #team .img-fluid.img-member { max-width: 100%; height: 200px; padding: 20px 0; aspect-ratio: 16/9; object-fit: contain; object-position: center; } /* Media Screen */ /* Mobile Portrait */ @media screen and (min-width: 320px) and (max-width: 767px) { .swiper { height: 40% !important; } .breadcrumbs { margin-top: 64px; } .breadcrumbs h2 { font-size: 5vw; font-weight: 500; } .breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0 0 10px 0; margin: 0; font-size: 3vw; } .swiper-slide { background-position: center; background-size: cover; width: 100px; height: 90px; } .swiper-image { width: 150px; height: 100%; aspect-ratio: 8/8; object-fit: contain; } .swiper-slide img { margin-top: 10px; display: block; width: 100%; height: 60%; object-fit: cover; } .services .swiper { height: 70% !important; } .section-header h3 { font-size: 5vw; font-weight: 500; color: #777; text-transform: uppercase; } .section-header p { font-size: 5vw; margin: 15px 0 30px 0; font-weight: 900; color: #000000; } .header .logo span { font-size: 4vw; font-weight: 900; letter-spacing: 1px; color: #ffffff; font-family: "Nunito", sans-serif; margin-top: 3px; } .header .logo img { max-height: 50px; width: 50px; margin-right: 6px; } #portfolio-hero .desc-hero { top: auto; left: auto; z-index: 2; } .desc-hero { top: auto; left: 10%; z-index: 2; } .hero h1 { font-family: sans-serif; font-size: 4vw; font-weight: 900; color: #ffffff; text-shadow: 2px 2px 4px #858585; margin-left: 10%; } .hero h5 { font-family: serif; font-size: 3vw; font-weight: 300; margin: 5px 0 0 0; color: #ffffff; margin-left: 10%; } .about h3 { font-size: 5vw; font-weight: 500; color: #777; text-transform: uppercase; } .about p { font-size: 5vw; font-weight: 400; color: #000000; } .about div { font-size: 4vw; font-weight: 400; color: #777; } .portfolio h3 { font-size: 5vw; font-weight: 500; color: #777; text-transform: uppercase; } .portfolio .portfolio-wrap h3 { font-weight: 600; font-size: 5vw; text-transform: uppercase; color: #000000; padding-top: 15px; margin: 0; } .portfolio .portfolio-wrap p { font-weight: 400; font-size: 4vw; text-transform: uppercase; color: #000000; padding-bottom: 15px; /* margin: 0; */ } .portfolio-details .other-projects a h3 { color: #1d1d1f; /* font-family: montserrat,sans-serif; */ font-size: 18px; font-weight: 600; letter-spacing: -4%; line-height: 20px; margin: 0 20px; max-width: 300px; text-align: left; } .services h3 { font-size: 5vw; font-weight: 500; color: #777; text-transform: uppercase; } .services a { font-size: 5vw; font-weight: 900; margin: 15px 0 30px 0; color: #000000; } .services .service-box.blue .read-more { color: #777; } .services .service-box:hover h3, .services .service-box:hover p, .services .service-box:hover .read-more { color: #68b3ff; } .blog .desc-content-section h1 { font-size: 5vw; font-weight: 700; font-family: Montserrat, sans-serif; color: #000000; margin-top: 0px; transition: 0.3s; } .blog .desc-content-section h2 { font-size: 5vw; font-weight: 900; color: #68b3ff; transition: 0.3s; text-transform: uppercase; } .blog .desc-content-section p { font-size: 4vw; color: #777; font-weight: 400; margin-top: 0px; transition: 0.3s; } .blog .entry { padding: 30px; margin-bottom: 60px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .blog .mx-auto { height: 30vh !important; width: 100%; } .blog .entry .entry-title a { font-size: 5vw; font-weight: 900; color: #000000; transition: 0.3s; text-transform: uppercase; } .blog .entry .entry-title { font-size: 5vw; font-weight: bold; padding: 0; margin: 0 0 20px 0; } .blog .entry .entry-content p { font-size: 4vw; color: #777; margin-top: 0px; transition: 0.3s; } .blog .blog-author { padding: 0px; margin-bottom: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .blog .blog-author p { font-style: italic; color: #777; } .blog .blog-author img { width: 100px; margin-right: 20px; } .blog .blog-author h4 { font-weight: 600; font-size: 5vw; margin-bottom: 0px; padding: 0; color: #012970; } .content-section .desc-content-section .output-img { margin: 0; margin-bottom: 10%; width: 100%; aspect-ratio: 16/9; object-fit: contain; } .faq h3 { font-size: 5vw; font-weight: 500; color: #777; text-transform: uppercase; } .faq .accordion-button p { font-size: 4vw; font-weight: 400; } .faq .accordion-body p { font-size: 4vw; font-weight: 400; } .portfolio #portfolio-flters li { cursor: pointer; display: inline-block; padding: 8px 20px 10px 20px; font-size: 4vw; font-weight: 500; line-height: 1; color: #777; margin: 0 4px 8px 4px; transition: 0.3s; border-radius: 50px; border: 1px solid #fff; } .portfolio-details .card-info h2 { font-size: 5vw; font-weight: 900; color: #000000; } .portfolio-details .card-info p { font-size: 4vw; font-weight: 400; color: #777; } .output-container h1 { font-size: 6vw; font-weight: 600; color: #000000; text-transform: uppercase; } .output-container .output-section .output-content p { text-align: center; font-size: 5vw; font-weight: 400; color: #777; } .output-container h3 { color: #000000; /* font-family: Helvetica Nue, sans-serif; */ font-size: 5vw; font-weight: 900; /* letter-spacing: -.05em; */ line-height: 27px; } .output-container .output-section .output-content h4 { color: #000000; /* font-family: Helvetica, sans-serif; */ font-size: 5vw; font-weight: 900; letter-spacing: -.05em; line-height: 23px; } .output-container p { color: #777; /* font-family: Helvetica Nue, sans-serif; */ font-size: 4vw; font-weight: 400; /* letter-spacing: -.05em; */ line-height: 27px; } .navbar .dropdown ul a { padding: 10px 20px; font-size: 4vw; color: #777; text-transform: none; font-weight: 500; } .testimonials h3 { font-size: 5vw; font-weight: 500; color: #777; text-transform: uppercase; } .testimonials .testimonial-item p { font-size: 4vw; font-style: italic; font-weight: 200; color: #777; margin: 0 auto 15px auto; } .testimonials .testimonial-item h3 { font-size: 4vw; font-weight: 600; margin: 10px 0 5px 0; color: #000000; } .testimonials .testimonial-item h4 { font-size: 4vw; color: #777; margin: 0; } .team h3 { font-size: 5vw; font-weight: 500; color: #777; text-transform: uppercase; } .team .member .member-info h4 { font-size: 5vw; font-weight: 900; margin-bottom: 5px; color: #000000; } .team .member .member-info span { font-size: 4vw; font-weight: 400; display: block; color: #777; } .team .member .member-info p { font-style: normal; font-size: 4vw; padding-top: 2px; line-height: 26px; color: #777; } .clients h3 { font-size: 5vw; font-weight: 500; color: #777; text-transform: uppercase; } .recent-blog-posts .post-box .post-title { font-size: 5vw; color: #000000; font-weight: 700; margin-bottom: 18px; position: relative; transition: 0.3s; } .recent-blog-posts .post-box .post-date { font-size: 4vw; font-weight: 400; color: rgba(1, 41, 112, 0.6); display: block; margin-bottom: 10px; } .footer { font-size: 4vw; } .footer .footer-top .footer-info .logo span { font-size: 5vw; font-weight: 500; letter-spacing: 1px; color: #777; font-family: "Nunito", sans-serif; margin-top: 3px; } .footer .footer-top .footer-info p { font-size: 5vw; line-height: 24px; margin-bottom: 0; font-family: "Nunito", sans-serif; } .footer .footer-top h4 { font-size: 4vw; font-weight: 500; color: #000000; text-transform: uppercase; position: relative; padding-bottom: 12px; } .footer .footer-top .footer-links ul a { font-size: 4vw; color: #777; transition: 0.3s; display: inline-block; line-height: 1; } .footer .copyright { text-align: center; padding-top: 5vw; color: #777; } .portfolio-details .other-projects a p { color: #888; font-family: helvetica, sans-serif; font-size: 2.7vw; font-weight: 200; letter-spacing: -4%; line-height: 15px; margin: 0 20px; text-align: left; width: 80%; } section#portfolio-hero { overflow: hidden; padding: 0; } .content-section { align-items: center; background-color: #efefef; border-radius: 10px; display: flex; flex-direction: row; gap: 1em; justify-content: space-between; margin: 20px; padding: 50px 30px; } .output-container .output-section .output-content { align-items: center; background-color: #efefef; display: flex; flex-direction: column; justify-content: space-between; margin: 20px; width: 420px; padding: 20px 0; border-radius: 20px; } .desc-content-section h1 { color: #1d1d1f; font-family: Montserrat, sans-serif; font-size: 6vw; font-weight: 700; letter-spacing: -.05em; text-align: center; text-transform: uppercase; } .portfolio-wrap h1 { color: #000000; /* font-family: Helvetica Nue, sans-serif; */ font-size: 5vw; font-weight: 900; /* letter-spacing: -.05em; */ line-height: 25px; } .portfolio-wrap h2 { font-size: 5vw; font-weight: 900; color: #68b3ff; transition: 0.3s; text-transform: uppercase; } .width-25 { width: 100% !important; } } /* Mobile Lanscape */ @media (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { .swiper { height: 500px; } .desc-hero { left: 5%; } .swiper-image { width: 150px; height: 100%; aspect-ratio: 8/8; object-fit: contain; } } /* Tablet */ @media screen and (min-width: 768px) and (max-width: 1024px) { .swiper { height: 500px; } .desc-hero { left: 5%; } .swiper-image { width: 150px; height: 100%; aspect-ratio: 8/8; object-fit: contain; } } /* Tablet Lanscape */ @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .swiper { height: 500px; } .desc-hero { left: 5%; } } /* Laptop View */ @media screen and (min-width: 1025px) and (max-width: 1600px) { .swiper-image { width: 150px; height: 100%; aspect-ratio: 8/8; object-fit: contain; object-position: center; } } .h-20 { height: 20rem !important; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0 !important; left: 0 !important; width: 100% !important; } .swiper-main { margin: 100px auto; width: 320px; height: 240px; } .swiper-slide { display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: bold; color: #fff; } .portfolio-details .other-projects { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 20px; } .portfolio-details .other-projects a { text-decoration: none; } .portfolio-details .other-projects a .other-project-item { align-items: center; justify-content: center; border-radius: 10px; display: flex; flex-direction: column; transition: transform 0.3s ease-in; } .portfolio-details .other-projects a .other-project-item img { border-radius: 10px; height: 211px; margin: 20px; object-fit: cover; width: 374px; } .portfolio-details .other-projects a h3 { color: #1d1d1f; /* font-family: montserrat,sans-serif; */ font-size: 18px; font-weight: 600; letter-spacing: -4%; line-height: 20px; margin: 0 20px; max-width: 300px; text-align: left; } .portfolio-details .other-projects a p { color: #888; font-family: helvetica, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: -4%; line-height: 20px; margin: 0 20px; text-align: left; width: 80%; } .portfolio-details .other-projects a .other-project-item:hover { transform: scale(1.15); transition: all 0.3s ease-in-out; } .lds-dual-ring { display: flex; width: 150px; height: 150px; margin: 4rem auto 0; } .lds-dual-ring:after { content: " "; display: block; width: 120px; height: 120px; margin: 8px; border-radius: 50%; border: 6px solid #5a5757; border-color: #494848 transparent #fff transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .width-25 { width: 25%; }