/* =====================================
   DIGROW WORLD PREMIUM AGENCY STYLE
   ===================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


   :root{
       --primary:#ea5c1f;
       --primary-light:#ff914d;
       --dark:#212431;
       --blue:#4f5d75;
       --light:#f7f8fc;
       --white:#ffffff;
   
       --shadow:0 20px 50px rgba(0,0,0,.08);
       --shadow-hover:0 30px 70px rgba(0,0,0,.12);
   }
   
   
   
   *{
       margin:0;
       padding:0;
       box-sizing:border-box;
   }
   
   
   html{
       scroll-behavior:smooth;
   }
   
   
   body{
       font-family:'Inter',sans-serif;
       color:var(--dark);
       background:#fff;
       overflow-x:hidden;
   }
   
   
   
   section{
       padding:100px 0;
   }
   
   
   
   h1,h2,h3,h4{
       font-weight:800;
       letter-spacing:-.5px;
   }
   
   
   
   p{
       color:#667085;
       line-height:1.8;
   }
   
   
   
   /* =====================
      BUTTONS
   ===================== */
   
   
   .btn-primary2,
   .btn-success2{
   
       display:inline-block;
   
       padding:15px 35px;
   
       border:none;
   
       border-radius:50px;
   
       color:#fff;
   
       font-weight:700;
   
       text-decoration:none;
   
       position:relative;
   
       overflow:hidden;
   
       transition:
       transform .35s ease,
       box-shadow .35s ease;
   
   }
   
   
   
   .btn-primary2{
   
       background:
       linear-gradient(
       135deg,
       #ea5c1f,
       #ff914d
       );
   
       box-shadow:
       0 15px 35px rgba(234,92,31,.35);
   
   }
   
   
   
   .btn-success2{
   
       background:
       linear-gradient(
       135deg,
       #212431,
       #4f5d75
       );
   
       box-shadow:
       0 15px 35px rgba(33,36,49,.35);
   
   }
   
   
   
   .btn-primary2::before,
   .btn-success2::before{
   
       content:"";
   
       position:absolute;
   
       top:0;
   
       left:-100%;
   
       width:100%;
   
       height:100%;
   
   
       background:
       linear-gradient(
       120deg,
       transparent,
       rgba(255,255,255,.35),
       transparent
       );
   
   
       transition:.6s;
   
   }
   
   
   
   .btn-primary2:hover::before,
   .btn-success2:hover::before{
   
       left:100%;
   
   }
   
   
   
   .btn-primary2:hover,
   .btn-success2:hover{
   
       transform:translateY(-5px);
   
       color:#fff;
   
   }
   
   
   
   .btn-primary2:hover{
   
       box-shadow:
       0 25px 45px rgba(234,92,31,.45);
   
   }
   
   
   
   .btn-success2:hover{
   
       box-shadow:
       0 25px 45px rgba(33,36,49,.45);
   
   }
   
   
   
   
   /* =====================
      HERO SECTION
   ===================== */
   .hero-section{

    min-height:auto;

    display:flex;

    align-items:center;

    padding:90px 0 70px;

    overflow:visible;

}
   
   
   
   .hero-content{
   
       animation:
       fadeLeft 1s ease;
   
   }
   
   
   
   .hero-title{
   
       font-size:
       clamp(2.2rem,5vw,3.8rem);
   
       font-weight:800;
   
       line-height:1.2;
   
       color:#212431;
   
       margin-bottom:20px;
   
   }
   
   
   
   .hero-title-span{
   
       color:var(--primary);
   
   }
   
   
   
   .hero-description{
   
       font-size:
       clamp(1rem,2vw,1.15rem);
   
       line-height:1.8;
   
       color:#555;
   
       margin-bottom:30px;
   
   }
   
   
   
   /* =====================
      LOTTIE
   ===================== */
   
   
   .hero-lottie{
   
       width:100%;
   
       max-width:650px;
   
       height:500px;
   
       margin:auto;
   
       display:block;
   
       animation:
       floating 5s ease-in-out infinite;
   
   }
   
   
   
   /* =====================
      LARGE SCREEN
   ===================== */
   
   
   @media(min-width:1400px){
   
   
   .hero-section{
   
       min-height:
       calc(100vh - 85px);
   
   }
   
   
   .hero-lottie{
   
       height:600px;
   
   }
   
   
   .hero-title{
   
       font-size:3.5rem;
   
   }
   
   
   .hero-description{
   
       font-size:1.25rem;
   
   }
   
   
   }
   
   
   
   
   /* =====================
      TABLET
   ===================== */
   
   
   @media(max-width:991.98px){
   
   
   .hero-section{
   
       min-height:auto;
   
       padding:120px 0 70px;
   
   }
   
   
   .hero-content{
   
       text-align:center;
   
   }
   
   
   .hero-title{
   
       font-size:3.5rem;
   
   }
   
   
   .hero-description{
   
       font-size:1.05rem;
   
   }
   
   
   
   .hero-lottie{
   
       height:380px;
   
   }
   
   
   }
   
   
   
   
   
   /* =====================
      MOBILE
   ===================== */
   
   
   @media(max-width:767.98px){
   
   
   section{
   
       padding:70px 0;
   
   }
   
   
   .hero-section{
   
       padding:80px 0 40px;
   
   }
   
   
   
   .hero-title{
   
       font-size:3rem;
   
   }
   
   
   
   .hero-description{
   
       font-size:16px;
   
       line-height:1.7;
   
   }
   
   
   
   .hero-lottie{
   
       height:260px;
   
   }
   
   
   
   .hero-btn2{
   
       width:100%;
   
       max-width:250px;
   
   }
   
   
   }
   
   
   
   
   /* =====================
      SMALL MOBILE
   ===================== */
   
   
   @media(max-width:480px){
   
   
   .hero-title{
   
       font-size: 3rem;
   
   }
   
   
   .hero-lottie{
   
       height:220px;
   
   }
   
   
   .hero-description{
   
       font-size:15px;
   
   }
   
   
   }

   /* =====================================
   SECTION TITLE
===================================== */


.section-tag{

    display:inline-block;

    background:
    rgba(234,92,31,.12);

    color:var(--primary);

    padding:8px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.3px;

}



section h2{

    font-size:42px;

    line-height:1.2;

    margin:20px 0;

    color:var(--dark);

}



@media(max-width:768px){

section h2{

    font-size:32px;

}

}



/* =====================================
   PREMIUM COMMON CARDS
===================================== */


.feature-box,
.service-card,
.industry-card,
.choose-card,
.process-card,
.feature-card,
.technology-card,
.portfolio-card,
.pricing-card,
.testimonial-card{


    background:
    rgba(255,255,255,.85);


    backdrop-filter:
    blur(12px);


    border-radius:28px;


    padding:35px;


    border:
    1px solid rgba(255,255,255,.5);


    box-shadow:
    var(--shadow);


    transition:
    transform .45s ease,
    box-shadow .45s ease;


    height:100%;


}



.feature-box:hover,
.service-card:hover,
.industry-card:hover,
.choose-card:hover,
.process-card:hover,
.feature-card:hover,
.technology-card:hover,
.portfolio-card:hover,
.pricing-card:hover,
.testimonial-card:hover{


    transform:
    translateY(-12px);


    box-shadow:
    var(--shadow-hover);


}



/* =====================================
   ICON DESIGN
===================================== */


.feature-box i,
.service-card i,
.industry-card i,
.choose-card i,
.process-card i,
.feature-card i{


    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;


    background:
    linear-gradient(
    135deg,
    rgba(234,92,31,.15),
    rgba(255,145,77,.25)
    );


    color:
    var(--primary);


    border-radius:20px;


    font-size:32px;


    margin-bottom:25px;


}

/* =====================================
   TRUST BAR
===================================== */


.trust-bar{

    padding:60px 0;

    background:
    linear-gradient(
        135deg,
        #212431,
        #343a55
    );

}


.trust-item{

    display:flex;

    align-items:center;

    gap:20px;

    padding:25px;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    border-radius:25px;

    border:1px solid rgba(255,255,255,.15);

    transition:.4s ease;

}


.trust-item:hover{

    transform:translateY(-8px);

    background:
    rgba(255,255,255,.15);

}



.trust-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;


    background:
    linear-gradient(
        135deg,
        #ea5c1f,
        #ff914d
    );

    color:white;

    font-size:28px;

}



.trust-item h3{

    margin:0;

    color:white;

    font-size:32px;

    font-weight:800;

}



.trust-item p{

    margin:5px 0 0;

    color:#d1d5db;

    font-size:15px;

}



@media(max-width:768px){

    .trust-item{

        justify-content:center;

    }

}

/* =====================================
   ABOUT SECTION
===================================== */


.about-digrow-world img{


    border-radius:35px;


    box-shadow:
    0 30px 70px rgba(0,0,0,.15);


    transition:.5s;


}



.about-digrow-world img:hover{

    transform:
    scale(1.03);

}



/* =====================================
   SERVICES
===================================== */


.services-section{


    background:
    linear-gradient(
    180deg,
    #ffffff,
    #f8f9fc
    );


}



.service-card h3{

    margin:20px 0 15px;

    color:var(--dark);

}



.service-card p{

    font-size:15px;

}



/* =====================================
   PORTFOLIO
===================================== */


.portfolio-card{


    padding:0;

    overflow:hidden;


}



.portfolio-card img{


    width:100%;


    transition:.6s;


}



.portfolio-card:hover img{


    transform:
    scale(1.08);


}



.portfolio-content{


    padding:30px;


}



.portfolio-content h3{


    margin-bottom:10px;


}



/* =====================================
   PRICING SECTION
===================================== */


.pricing-card{


    position:relative;

    overflow:hidden;


}



.pricing-card.featured{


    transform:
    scale(1.06);


    border:
    2px solid var(--primary);


}



.pricing-card.featured::before{


    content:"POPULAR";


    position:absolute;


    top:20px;

    right:-35px;


    background:
    var(--primary);


    color:white;


    padding:8px 45px;


    font-size:12px;


    font-weight:700;


    transform:
    rotate(45deg);


}




.plan-tag{


    display:inline-block;


    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary-light)
    );


    color:white;


    padding:8px 20px;


    border-radius:50px;


    font-weight:700;


}





/* =====================================
   PROCESS SECTION
===================================== */

.step-number{

    position:relative;

    width:75px;
    height:75px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:25px;

    border-radius:50%;

    font-size:24px;
    font-weight:800;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #ea5c1f,
        #ff914d
    );

    z-index:1;

    box-shadow:
    0 15px 35px rgba(234,92,31,.35);

    transition:.4s ease;

}


/* Glow Effect */

.step-number::before{

    content:"";

    position:absolute;

    width:100%;
    height:100%;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #60a5fa
    );
    filter:blur(20px);
    opacity:.5;

    z-index:-1;

}


/* Inner Circle */

.step-number::after{

    content:"";

    position:absolute;

    inset:5px;

    border-radius:50%;

    background:
    rgba(255,255,255,.15);

    border:
    1px solid rgba(255,255,255,.35);

}


/* Keep number above effects */

.step-number{

    isolation:isolate;

}

.step-number{
    text-shadow:
    0 3px 10px rgba(0,0,0,.35);
}


/* Hover */

.process-card:hover .step-number{

    transform:
    translateY(-8px)
    scale(1.08);

    box-shadow:
    0 25px 50px rgba(234,92,31,.45);

}

.process-card{

    position:relative;
    overflow:hidden;

    background:#fff;

    border-radius:30px;

    padding:35px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

    transition:.45s ease;

}


.process-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 35px 80px rgba(0,0,0,.14);

}


/* =====================================
   WHY DIGROW WORLD
===================================== */


.why-card{


    background:


    linear-gradient(
    135deg,
    #212431,
    #343a55
    );


    color:white;


    padding:50px;


    border-radius:35px;


    box-shadow:

    0 30px 70px rgba(0,0,0,.25);


}



.why-card h2,
.why-card h3{

    color:white;

}



.why-card li{


    margin:18px 0;


    color:#ddd;


}




/* =====================================
   TECHNOLOGY
===================================== */


.technology-card{


    text-align:center;


}



.technology-card img{


    height:60px;


    object-fit:contain;


    margin-bottom:20px;


}





/* =====================================
   FAQ
===================================== */


.faq-section{


    background:
    #f8f9fc;


}



.faq-section .accordion-item{


    border:none;


    margin-bottom:15px;


    border-radius:20px;


    overflow:hidden;


    box-shadow:
    var(--shadow);


}



.faq-section button{


    font-weight:700;


    padding:20px;


}



/* =====================================
   ANIMATIONS
===================================== */


@keyframes floating{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}


}



@keyframes fadeLeft{


from{


opacity:0;


transform:
translateX(-60px);


}



to{


opacity:1;


transform:none;


}


}



@keyframes fadeUp{


from{


opacity:0;


transform:
translateY(40px);


}



to{


opacity:1;


transform:none;


}


}




/* =====================================
   RESPONSIVE CARD FIX
===================================== */


@media(max-width:768px){


.feature-box,
.service-card,
.industry-card,
.choose-card,
.process-card,
.feature-card,
.technology-card,
.pricing-card,
.testimonial-card{


    padding:25px;

}



.pricing-card.featured{


    transform:none;


}



.why-card{


    padding:30px;


}


}