@media (max-width: 1250px) {

    /*--------------------------
CTA
-----------------------------*/
    .cta {
        padding: 0.7rem 1.75rem;
    }

    /*--------------------------
Header
-----------------------------*/
    header nav .logo img {
        height: 5rem;
    }

    header nav .links-box {
        height: 3.25rem;
        padding: 0 1.5rem;
    }

    header nav .links-box ul {
        gap: 1.5rem;
    }

    header nav .hdr-cta {
        height: 3.25rem;
        padding: 0 1.5rem;
    }

    header nav .hdr-cta a {
        font-size: 1rem;
        font-weight: 500;
    }

    /*--------------------------
Hero
-----------------------------*/
    section.hero h1 {
        font-size: 5rem;
    }

    section.hero h1 span {
        padding: 0 4rem;
    }

    section.hero p {
        font-weight: 400;
        font-size: 1.1rem
    }

    /*--------------------------
Results
-----------------------------*/

    section.results .container .result h3 {
        font-size: 4rem;

    }

    section.results .container .result p {
        font-size: 1.1rem;
    }

    /*--------------------------
Clients
-----------------------------*/
    /*--------------------------
About
-----------------------------*/
    section.about .container .img-cont img {
        height: 23rem;
    }

    section.about .container .text-container h2 {
        font-size: 2.75rem;
    }

    section.about .container .text-container p {
        line-height: 27px;
        font-size: 1.1rem;
    }

    section.about .container .text-container .box {
        width: 20rem;
    }

    section.about .container .text-container .box h3 {
        font-size: 1.5rem;
        margin-bottom: .5rem;
    }

    section.about .container .text-container .box p {
        line-height: 22px;
        font-size: .9rem;
    }

    /*--------------------------
Problem Solution
-----------------------------*/
    section.prob-sol .box .heading-box p {
        font-size: 1.4rem;
    }

    section.prob-sol .box .txt-cont .problem-sol-line p {
        font-size: 1.1rem;
    }

    /*--------------------------
Expertise
-----------------------------*/
    section.expertise .container .service .img-cont {
        height: 12rem;

    }

    section.expertise .container .service h2 {
        font-size: 1.25rem;
    }

    section.expertise .container .service p {
        font-size: 1.1rem;
        line-height: 125%;
        margin-top: -1rem;
    }

    /*--------------------------
portfolio
-----------------------------*/
    .portfolio pre {
        font-size: 3rem;
    }

    .portfolio pre span {
        font-size: 4rem;
    }

    /*--------------------------
Case Study
-----------------------------*/
    section.case .container pre {
        font-size: 3.2rem;
    }

    section.case .container img {
        height: 9rem;
        left: 21rem;
    }

    section.case .container pre span {
        font-size: 4rem;
    }

    section.case .case-study-client .txt-cont h2 {
        font-size: 1.75rem;
    }

    section.case .case-study-client .txt-cont p {
        font-size: 1.1rem;
    }

    /*--------------------------
Testimonials
-----------------------------*/
    section.testimonials .container .testimonial p {

        font-weight: 600;
        font-size: 1.1rem;
        line-height: 140%;
    }
}



/*----------------------------------------------------


1060px


-------------------------------------------------------*/
@media (max-width: 1060px) {
    /*--------------------------
Header
-----------------------------*/
.sidebar-menu {
    left: 2rem;
    width: unset;
    top: 8rem;
    transition: all 1s;
}



/* Hide Big Logo and CTA Etc */

header {
    background: linear-gradient(to bottom,
            var(--primary-bg) 0%,
            /* Start color (solid red) at the top */
           var(--primary-bg) 20%,
            /* Start color (solid blue) at 20% height */
            var(--primary-bg) 50%,
            /* Start color (solid green) at 50% height */
            rgba(0, 255, 0, 0) 100%
            /* Transparent color at the bottom */
        );
}
header nav{
    padding: 2rem 0 0 0;
}
header nav .logo img {
    display: none;
}

header nav .logo .small-logo {
    display: block;
    height: 4rem;
}

header nav .links-box ul {
    display: none;
}

header nav .hdr-cta {
    display: none !important;
}

header nav .links-box {
    background-color: transparent;
    border: none;
    height: max-content;
    width: max-content;
    padding:0;
    display: flex;
    align-items: center;
}

.toggle-btn i {
    display: block;
    font-size: 2rem;
}

/*--------------------------
Hero Section
-----------------------------*/
section.hero h1 {
    font-size: 3.5rem;
}
section.hero p {
    margin-bottom: 1.5rem;
    font-size: 1rem
}
/*--------------------------
Results
-----------------------------*/
section.results {
    padding: 5rem 7rem;

}

section.results .container .result h3 {
    font-size: 3.5rem;

}

section.results .container .result p {
    font-size: 1rem;
    margin-top: -.5rem;
}
    /*--------------------------
Clients
-----------------------------*/
section.our-clients {
    padding: 2rem 5rem;
}
section.our-clients .clients {
    justify-content: center;
gap: 3rem;
    }
    /*--------------------------
About 
-----------------------------*/
section.about {
    padding: 0 2rem;
}
section.about .container {
    align-items: center;
    flex-direction: column;
    gap: 2rem;

}
section.about .container .text-container {
    flex-direction: column;
    align-items: center;
}
section.about .container .text-container p {
    text-align: center;
    max-width: 37rem;
}
section.about .container .text-container .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    width: 20rem;
}
    /*--------------------------
Problems Solution
-----------------------------*/
section.prob-sol {
    padding: 5rem 2rem 0 2rem;

}
section.prob-sol .box .heading-box{
    height: 3rem;
    margin-bottom: 1.5rem;
}
section.prob-sol .box .heading-box p{
    font-size: 1.2rem;
}
section.prob-sol .box .txt-cont .problem-sol-line .tick-cross{
    min-height: 2.5rem;
    min-width: 2.5rem;
}
section.prob-sol .box .txt-cont .problem-sol-line .tick-cross i{
    font-size: 1.5rem;
}
section.prob-sol .box .txt-cont .problem-sol-line p{
    font-size: .9rem;
    font-weight: 500;
}
    /*--------------------------
Expertise
-----------------------------*/
section.expertise {
    padding: 5rem 2rem 0 2rem;
margin-bottom:10rem;
}
section.expertise .container .service{
    padding: 1rem;
}
section.expertise .container .service .img-cont{
    height: 10rem;

}
section.expertise .container .service h2{
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}
section.expertise .container .service p{
    font-size: .9rem;
    line-height: 130%;
}

    /*--------------------------
Portfolio
-----------------------------*/
.portfolio pre {
    font-size: 2.5rem;
    line-height: 100%;
}

.portfolio pre span {
    font-size: 2.75rem;
}
.portfolio .portfolio-vids {
    padding: 0 2rem;
    gap: 1.5rem;

}
/*--------------------------
Case Study
-----------------------------*/
section.case {
    padding: 5rem 2rem 0 2rem;

}
section.case .container pre{
    font-size: 3rem;
    }
    section.case .container img{
        height: 6rem;
    top: -1.5rem;
    left: 20.5rem;
    }
    section.case .container pre span{
        font-size: 3.5rem;
        font-weight: 700;
    }
    
        /*--------------------------
Testimonials
-----------------------------*/
section.testimonials{
    padding: 5rem 2rem 0 2rem;
}
section.testimonials .container .testimonial{
    padding: 1rem 1rem 1.5rem 1rem;

}
section.testimonials .container .testimonial p{
    font-weight: 500;
    font-size: .9rem;
    line-height: 140%;
    margin-bottom: 1.25rem;
}

section.testimonials .container .testimonial .abt-client img{
    height: 3rem;
    border: 2px solid var(--primary-stroke);
    
}
section.testimonials .container .testimonial .abt-client div h2{
    font-size: .9rem;
}
section.testimonials .container .testimonial .abt-client p{
    font-size: .8rem;
}
section.testimonials .container .testimonial::before {
    font-size: 8.5rem; /* Adjust size as needed */
    line-height: 0;
    bottom: 3.15rem; /* Adjust positioning as needed */
    right: 0; /* Adjust positioning as needed */
    font-weight: 900;
}
/*--------------------------
Team
-----------------------------*/
section.team {
    padding: 5rem 2rem 0 2rem;}
section.team .container .team-member h2{
    font-size: 1.25rem;
}
section.team .container .team-member p{
    font-size: .6rem;

}
section.team .container .team-member {
    height: 15rem;
    padding-bottom: 1.5rem;
}
section.team .container .team-member .icons{
    display: none;
}
/*--------------------------
Book a Call
-----------------------------*/
.book-a-call {
    padding: 0 2rem;
}
.book-a-call .container {
    padding: 1.5rem 1.5rem 2.5rem 1.5rem;
}
.book-a-call .container img {
    height: 3.5rem;
}

.book-a-call .container h2 {
    font-size: 2rem;
}

.book-a-call .container p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.book-a-call .container a {
    display: inline;
}
.book-a-call .container a.filled-cta {
    margin-right: 1rem;

}
}
/*----------------------------------------------------


850px


-------------------------------------------------------*/
@media (max-width: 850px) {
    /*--------------------------
Header
-----------------------------*/
header{
    padding: 0 2rem;
}

header nav .logo .small-logo {
    display: block;
    height: 3rem;
}
/*--------------------------
Hero
-----------------------------*/
section.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

section.hero h1 span {
    padding: 0 2.5rem;
    border: 3px solid var(--primary-stroke);
}

section.hero p {
    margin-bottom: 1rem;
    font-size: .8rem
}

/*--------------------------
Results
-----------------------------*/
section.results .container .result h3 {
    font-size: 2.5rem;

}

section.results .container .result p {
    font-size: .7rem;
    margin-top: -.6rem;
}
/*--------------------------
problem sol
-----------------------------*/
section.prob-sol .container {
    max-width: 35rem;
    flex-direction: column;
    gap: 1.5rem;

}
/*--------------------------
Expertise
-----------------------------*/
section.expertise .container {
max-width: max-content; 
grid-template-columns: repeat(2, 1fr);

}
section.expertise .container .service .img-cont{
    width: 100%;
    height: 15rem;

}
section.expertise .container .service h2{
    font-size: 1.8rem;
}
section.expertise .container .service p{
    font-size: 1.2rem;
    line-height: 130%;
}
/*--------------------------
Portfolio
-----------------------------*/
.portfolio .portfolio-vids {
    display: grid;
grid-template-columns: repeat(2, 1fr);

    flex-direction: column;
    gap: 1.5rem;
    align-items: center;

}
.portfolio .portfolio-vids .first-left-one {
    position: relative;
    top: 0;
    transform:none;
}

.portfolio .portfolio-vids .second-left-one {
    position: relative;
    top: 0;
    transform: none;

}

.portfolio .portfolio-vids .second-right-one {
    position: relative;
    top: 0;
    transform:none;

}

.portfolio .portfolio-vids .first-right-one {
    position: relative;
    top: 0;
    transform:none;

}
    .portfolio .landescape-vids{
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .portfolio .landescape-vids .landescape{
        flex: 1;
        width: 100%;
        margin: 0 2rem;
    }
/*--------------------------
Case Study
-----------------------------*/
section.case .container {
padding: 3rem 1.5rem 2rem 1.5rem;

}
section.case .container pre{
    line-height: 120%;
    font-weight: 500;
    font-size: 2.25rem;
    position: relative;
    }
    section.case .container img{
        height: 5rem;
    position: absolute;
    top: -1rem;
    left: 15.5rem;
    }
    section.case .container pre span{
        font-size: 2.5rem;
    }
    section.case .container .case-study-clients-container{
        padding: 1.5rem 2rem 1.5rem 1.5rem;
    }
    section.case .case-study-client .txt-cont h2{
        font-size: 1.25rem;
    }
    section.case .case-study-client .txt-cont p{
        font-size: 1rem;
    }
    section.case .case-study-client  i{
        font-size: 1.25rem;
    }
    /*--------------------------
Testimonials
-----------------------------*/
section.testimonials .container{
    display: grid;
grid-template-columns: repeat(2, 1fr);

}
/*--------------------------
Team
-----------------------------*/
section.team .container {
    flex-direction: column;
    max-width: 25rem;
    height: 150rem;
}

section.team .container .team-member h2{
    font-size: 2.5rem;
}
section.team .container .team-member p{
    font-weight: 400;
    font-size: 1.2rem;

}
section.team .container .team-member .icons{
    display: block;
}
}
/*----------------------------------------------------


600px


-------------------------------------------------------*/
@media (max-width: 600px) {
    /*--------------------------
Hero
-----------------------------*/
section.hero {
padding: 0 ;
}
section.hero h1 {
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    font-size: 2.2rem;
}

section.hero h1 span {
    padding: 0 2rem;
    border: 2px solid var(--primary-stroke);
}

section.hero p {
    font-size: .7rem
}

/*--------------------------
Results
-----------------------------*/
section.results {
    margin-top: 1rem !important;

}
section.results .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
section.results .container .result h3 {
    color: var(--primary-color);
    font-size: 3rem;

}

section.results .container .result p {
    font-family: "poppins";
    font-size: 1.1rem;
    margin-top: -.5rem;
}
/*--------------------------
About
-----------------------------*/
section.about .container {
    padding: 0 3rem;
}

section.about .container .img-cont img {
    height: 15rem;
}
section.about .container .text-container h2 {
    font-size: 2.5rem;
}

section.about .container .text-container p {
    font-size: .9rem;
    width: 17rem;
    line-height: 130%;
}
section.about .container .text-container .box {
    background-color: #021A2C;
    padding: 1rem 2rem;
    border-radius: 1rem;
    width: 15rem;
}
/*--------------------------
Problem Solve
-----------------------------*/
section.prob-sol .box .heading-box{
    height: 2.5rem;
}
section.prob-sol .box .heading-box p{
    font-size: .8rem;
}
section.prob-sol .box .txt-cont .problem-sol-line .tick-cross{
    min-height:2rem;
    min-width: 2rem;
}
section.prob-sol .box .txt-cont .problem-sol-line .tick-cross i{
    font-size: 1.4rem;
}
section.prob-sol .box .txt-cont .problem-sol-line p{
    font-size: .8rem;
    font-weight: 500;
}
/*--------------------------
Expertise
-----------------------------*/
section.expertise .container .service .img-cont{
    width: 100%;
    height: 15rem;

}
section.expertise .container .service img{
    width: 100%;
}

.portfolio pre {
    font-size: 2rem;
    margin-top: 5rem;
}

.portfolio pre span {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}
.portfolio .portfolio-vids {
    display: flex;
flex-direction: column;
}
.portfolio .portfolio-vid{
    width: max-content;
    margin: 0 1rem;
}
/*--------------------------
Case Study
-----------------------------*/
section.case {
    padding: 5rem 1rem 0 1rem;

}
section.case .container {
padding: 2rem 1rem 1rem 1rem;

}
section.case .container pre{
    margin-bottom: 1rem;
    font-size: 1.5rem;
    }
    section.case .container img{
        height: 4rem;
    position: absolute;
    top: -1rem;
    left: 10rem;
    }
    section.case .container pre span{
        font-size: 1.75rem;
        font-weight: 700;
    }
/*--------------------------
testimonials
-----------------------------*/
section.testimonials{
    padding: 5rem 1rem 0 1rem;
}
section.testimonials .container{
    display: flex;
    flex-direction: column;
    max-width: 25rem;


}
/*--------------------------
Team
-----------------------------*/
section.team {
    padding: 5rem 1rem 0 1rem;

}
section.expertise .container {

    display: flex;
    flex-direction: column;
    
    }

/*--------------------------
Book a Call
-----------------------------*/
.book-a-call {
    padding: 0 1rem;
}
.book-a-call .container a {
    font-size: .75rem;

}
.book-a-call .container a.filled-cta {
    margin-right: .5rem;

}}

/* -----------------------------------------
FAQs Responsive
----------------------------------------- */
   
   @media screen and (max-width: 768px) {
    section.qns-ans {
      padding: 3rem 2rem 0 2rem;
      margin: 3rem auto;
    }
    
    section.qns-ans .faq {
      padding: 1.5rem 2rem;
      margin-bottom: 1.5rem;
    }
    
    .accordion {
      font-size: 1.3rem;
    }
    
    .accordion i {
      font-size: 1.4rem;
    }
    
    .pannel p {
      font-size: 1.1rem;
    }
     
   }
   
   @media screen and (max-width: 576px) {
  
 section.our-clients .clients {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* always 2 columns */
  gap: 16px; /* optional spacing */
}

section.our-clients .clients .client:last-child:nth-child(odd) {
  grid-column: 1 / -1;       /* make it span both columns */
  justify-self: center;      /* center it */
}
section.our-clients .clients .client img {
  scale: 0.95; 
}

    section.qns-ans {
      padding: 2rem 1rem 0 1rem;
      margin: 2rem auto;
    }
    
    section.qns-ans .faq {
      padding: 1.2rem 1.5rem;
      margin-bottom: 1rem;
      border-width: 2px;
    }
    
    .accordion {
      font-size: 1.1rem;
    }
    
    .accordion i {
      font-size: 1.2rem;
    }
    
    .pannel {
      padding-top: 1.5rem;
    }
    
    .pannel p {
      font-size: 1rem;
    }
   }