/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=ast…
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.10.0.1744896977
Updated: 2025-04-17 13:36:17
*/
 
body {
    background-color: #fff;
}
 
/* Lazy-load effect */
img.lazy-load-animate {
    opacity: 0;
    transform: translateY(20px);  /* Slide from the bottom */
    transition: opacity 0.6s ease, transform 0.6s ease;
}
 
img.loaded {
    opacity: 1;
    transform: translateY(0);
}
 
/* Smooth scroll */
.custom-wrapper {
    scroll-behavior: smooth;
}
 
.view_services_cmt {
    text-align: right;
    position: inherit !important;
    /* top: -15px; */
    /* right: -6px; */
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.8s ease;
    BACKGROUND: WHITE;
    box-shadow: 0px 0 3px 0px #87d5f2;
}
 
/* Home services Blocks css start here */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
}
 
.service-card {
    width: 100%;
    text-align: center;
    transition: 0.3s;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
 
.service-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
    pointer-events: none;
    z-index: 2;
}
 
.service-card img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}
 
.service-card:hover a img {
    transform: scale(1.1);
}
 
.service-card h3 {
    position: absolute;
    z-index: 9;
    bottom: 17px;
    width: 100%;
    color: #fff;
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: 0;
    text-align: left;
    padding: 0 0 0 30px;
    left: 0;
}
/* Home services Blocks css end here */
 
/* Single services page css start here */
.single-service-banner {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-repeat: no-repeat;
    height: 600px;
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px 50px 20px;
}
 
.single-service-banner h1 {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: 73px;
    font-weight: 900;
    line-height: 85px;
    color: #FFFFFF;
}
 
.single-services .ast-container {
    display: block;
    --content-width: 1320px;
}
 
.ready-to-use-section h3 {
    font-family: Eurocine;
    font-weight: 900;
    font-size: 42px;
    line-height: 60px;
    letter-spacing: 0;
    color: #2EB4E8;
    text-align: center;
}
 
.ready-to-use-section h2.service_inner_heading {
    color: #161616;
    text-align: center;
}
 
h2.service_inner_heading {
    font-family: Eurocine;
    font-weight: 900;
    font-size: 42px;
    line-height: 53px;
    letter-spacing: 0;
    color: #2EB4E8;
}
 
p.service_inner_paragraph {
    margin-bottom: 0;
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #161616;
    line-height: 32px;
    letter-spacing: 0;
    padding: 20px 0 40px 0;
}
 
.breadcrumbs {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
}
 
.breadcrumbs a {
    color: #fff;
}
 
.ready-to-use-section p {
    padding: 20px 0 40px 0;
    text-align: center;
}
 
.ready-to-use-section {
    padding: 60px 0 80px 0;
}
 
.signature-design-section {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 60px;
    align-items: center;
    margin-bottom: 75px;
}
 
.ready-to-use-section a.start-project-btn {
    margin: 0 auto;
}
 
.signature-design-section h2 {
    font-family: Eurocine;
    font-weight: 900;
    font-size: 42px;
    line-height: 60px;
    color: #2EB4E8;
    letter-spacing: 0;
}
 
.image_signature_design {
    border-radius: 10px;
    overflow: hidden;
}
 
.image_signature_design img {
    height: 529px;
    width: 100%;
    object-position: center;
    object-fit: cover;
}
 
.signature-design-section p {
    padding: 20px 0 40px 0;
}
 
.the-way-we-work-section {
    padding: 80px 0 0 0;
}
 
.design-that-flows-section {
    grid-template-columns: 55% 45%;
    gap: 60px;
    display: grid;
    align-items: center;
    border-top: 1px solid #f5e9e9;
    padding: 49px 0;
}
 
a.start-project-btn {
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0;
    color: #161616;
    font-family: "Plus Jakarta Sans", Sans-serif;
    border: 1px solid #161616;
    border-radius: 50px;
    padding: 12px 29px;
    display: flex;
    transition: ease-in-out 0.5s;
    width: fit-content;
}
 
a.start-project-btn:hover {
    background-color: #161616;
    color: #fff;
}
 
/* Single services page css end here */
 
/* Our Work Gallery */
.our-work-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    gap: 10px;
    width: 100%;
}
.our-work-gallery .box_gallery_one {
    grid-column: span 0;
    grid-row: span 2;
}
.box_gallery img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
 
.box_gallery {
    overflow: hidden;
    border-radius: 10px;
}
.our-work-gallery .box_gallery_three {
    grid-column: span 1;
    grid-row: span 1;
}
 
 
/* Responsive */
@media all and (max-width: 767px) {
    .our-work-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 213px;
    }
 
    .our-work-gallery .box_gallery,
    .our-work-gallery .box_gallery.large {
        grid-column: span 1;
        grid-row: span 1;
    }
 
    .services-grid {
        grid-template-columns: 1fr;
    }
}
section.overview-section {
    display: flex;
    padding: 50px 0px;
}
.overview-heading h2 {
    font-size: 48px;
    font-weight: 800;
    font-family: 'Plus Jakarta Sans';
    color: #2EB4E8;
    line-height: 55px;
}
.overview-description p {
    font-size: 18px;
    font-weight: 500;
    font-family: 'Plus Jakarta Sans';
    color: #161616;
    line-height:32px;
}
.overview-description {
    padding: 0px 0px 0px 30px;
}
.overview-details strong {
    font-size: 18px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans';
    color: #161616;
    line-height:32px;
}
.overview-details span {
    color: #2EB4E8;
    font-family: 'Plus Jakarta Sans';
    font-weight: 600;
}
 
.our_gallery_single-tem {
    padding-bottom: 40px;
}
.cmt-box {
        z-index: 9;
}