@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,200&display=swap');

:root {
 
    --hero-bg: url(./images/HerobgRight.svg), #2E2F2E;
    --left-textcolor: #FCFCFC;
    --faded-whitex: #2E2F2E;
  }

  .dark-theme {
   
    --hero-bg: url(./images/HerobgRightlight.svg), #E4E4E4;
    --left-textcolor: #2E2F2E;
    --faded-whitex: #FCFCFC;
   
  }


.HeroSection{
    background:var(--hero-bg);
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:auto;
    padding-left:5%;
    padding-right:5%;
    padding-top:3rem;
    padding-bottom:3rem;
}
.HeroSectionRight{
   
    width:100%;
    height:auto;
    /* margin-top:2.5rem; */
}
.HeroSectionLeft{
  
    width:100%;
    height:auto;
    padding-top:0rem;
    padding-bottom:3rem;

}
.Lefttext{
    color: var(--left-textcolor);
    width:100%;
    font-size:2.1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: bolder;
    line-height: 132.4%;
    letter-spacing: -0.005em;
}
.leftparagraph{
    color: var(--left-textcolor);
    font-size:0.8rem;
    width:100%;
    line-height:172%;
}
.Learnmore{
    background-color: #F36F2E;
    border: 0;
    border-radius: 0;
    height:2.3rem;
    width:8.9rem;
    margin-top:0.5rem;

}
.Learnmore:hover{
    background-color: #F36F2E;
   

}
.landingImage{
    width:85%;
    margin-left: auto;
    margin-right:auto;
    text-align: center;
    justify-content: flex-end;
    align-items: center;
    display: flex;

    
}
.aboutherosection{
    background-image: url(./images//bg.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   
    padding-left:5%;
    padding-right:5%;
    padding-top:8rem;
    padding-bottom:8rem;
    width:100%;
    height:auto;

}

.serviceherosection{
    background-image: url(./images//bg2.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   
    padding-left:5%;
    padding-right:5%;
    padding-top:8rem;
    padding-bottom:8rem;
    width:100%;
    height:auto;

}
.aboutheading{
    color: #E4E4E4;
    font-size:3.0rem;
    font-weight:bold;
}
.aboutparagraph{
    color: #E4E4E4;
    font-size:0.8rem;
    line-height:197%;
}
.aboutcenter{
    display: flex;
    justify-content: center;
    align-items: center;
}



    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {  
     
    }
    
    
    /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
    @media (min-width: 768px) { 
    
        .HeroSection{
            background:var(--hero-bg);
            background-repeat: no-repeat;
            background-size: cover;
            width:100%;
            height:auto;
            padding-left:4%;
            padding-right:4%;
            padding-top:6rem;
            padding-bottom:6rem;
        }
        .HeroSectionRight{
           
            width:100%;
            height:auto;
        }
        .HeroSectionLeft{
          
            width:100%;
            height:auto;
            padding-bottom:0rem;
            padding-top:2rem; 
        
        }
        .Lefttext{
            color: var(--left-textcolor);
            width:90%;
            font-size:2.4rem;
            font-family: 'Poppins', sans-serif;
            font-weight: bolder;
            line-height: 142.4%;
            letter-spacing: -0.005em;
        }
        .leftparagraph{
            color: var(--left-textcolor);
            font-size:0.8rem;
            width:90%;
        }
        .Learnmore{
            background-color: #F36F2E;
            border: 0;
            border-radius: 0;
            height:2.5rem;
            width:8.7rem;
            margin-top:0.5rem;
        
        }
        .landingImage{
            width:85%;
            margin-left: auto;
            margin-right:auto;
            text-align: center;
            justify-content: flex-start;
            align-items: center;
            display: flex;
            float: none;
            
        }
        .aboutherosection{
            background-image: url(./images//productbg.png);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
           
            padding-left:10%;
            padding-right:10%;
            padding-top:8rem;
            padding-bottom:8rem;
            width:100%;
            height:auto;
        
        }
        .aboutheading{
            color: #E4E4E4;
            font-size:4.0rem;
            font-weight:bold;
        }
        .aboutparagraph{
            color: #E4E4E4;
            font-size:0.8rem;
            line-height:187%;
        }
        
      
      
    
    }
    
    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) { 
        .HeroSection{
            background:var(--hero-bg);
            background-repeat: no-repeat;
            background-size: cover;
            width:100%;
            height:auto;
            padding-left:6%;
            padding-right:6%;
            padding-top:6rem;
            padding-bottom:6rem;
        
        }
        .HeroSectionRight{
           
            width:100%;
            height:auto;
        }
        .HeroSectionLeft{
          
            width:100%;
            height:auto;
            /* padding-top:4rem; */
        
        }
        .Lefttext{
            color: var(--left-textcolor);
            width:80%;
            font-size:2.4rem;
            font-family: 'Poppins', sans-serif;
            font-weight: bolder;
            line-height: 142.4%;
            letter-spacing: -0.005em;
        }
        .leftparagraph{
            color: var(--left-textcolor);
            font-size:0.8rem;
            width:87%;
        }
        .Learnmore{
            background-color: #F36F2E;
            border: 0;
            border-radius: 10.8952px 1.53075px;
            height:2.5rem;
            width:8.7rem;
            margin-top:0.5rem;
        
        }
        .aboutherosection{
            background-image: url(./images//productbg.png);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
           
            padding-left:10%;
            padding-right:10%;
            padding-top:8rem;
            padding-bottom:8rem;
            width:100%;
            height:auto;
        
        }
        .aboutheading{
            color: #E4E4E4;
            font-size:4.0rem;
            font-weight:bold;
        }
        .aboutparagraph{
            color: #E4E4E4;
            font-size:0.8rem;
            line-height:187%;
        }
        
      
  
    }
    
    
    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
        .HeroSection{
            background:var(--hero-bg);
            background-repeat: no-repeat;
            background-size: cover;
            width:100%;
            height:auto;
            padding-left:6%;
            padding-right:6%;
            padding-top:6rem;
            padding-bottom:6rem;
        }
        .HeroSectionRight{
           
            width:100%;
            height:auto;
            /* margin-top:5rem; */
        }
        .HeroSectionLeft{
          
            width:100%;
            height:auto;
            padding-bottom:0rem;
            padding-top:1rem; 
            /* padding-top:10rem; */
        
        }
        .Lefttext{
            color: var(--left-textcolor);
            width:80%;
            font-size:2.4rem;
            font-family: 'Poppins', sans-serif;
            font-weight: bolder;
            line-height: 142.4%;
            letter-spacing: -0.005em;
        }
        .leftparagraph{
            color: var(--left-textcolor);
            font-size:0.8rem;
            width:87%;
        }
        .Learnmore{
            background-color: #F36F2E;
            border: 0;
            border-radius: 0;
            height:2.5rem;
            width:8.7rem;
            margin-top:0.5rem;
        
        }
        .aboutherosection{
            background-image: url(./images//productbg.png);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
           
            padding-left:17%;
            padding-right:17%;
            padding-top:8rem;
            padding-bottom:8rem;
            width:100%;
            height:auto;
        
        }
        .aboutheading{
            color: #E4E4E4;
            font-size:4.0rem;
            font-weight:bold;
        }
        .aboutparagraph{
            color: #E4E4E4;
            font-size:0.8rem;
            line-height:187%;
        }
        
      
     
    
    }



     /* Extra large devices (large desktops, 1200px and up) */
     @media (min-width: 1400px) {
        .HeroSection{
            background:var(--hero-bg);
            background-repeat: no-repeat;
            background-size: cover;
            width:100%;
            height:auto;
            padding-left:6%;
            padding-right:6%;
            padding-top:6rem;
            padding-bottom:6rem;
        }
        .HeroSectionRight{
           
            width:100%;
            height:auto;
            margin-top:1rem;
        }
        .HeroSectionLeft{
          
            width:100%;
            height:auto;
            padding-top:4rem;
        
        }
        .Lefttext{
            color: var(--left-textcolor);
            width:80%;
            font-size:2.4rem;
            font-family: 'Poppins', sans-serif;
            font-weight: bolder;
            line-height: 142.4%;
            letter-spacing: -0.005em;
        }
        .leftparagraph{
            color: var(--left-textcolor);
            font-size:0.8rem;
            width:87%;
        }
        .Learnmore{
            background-color: #F36F2E;
            border: 0;
            border-radius: 0;
            height:2.5rem;
            width:8.7rem;
            margin-top:0.5rem;
        
        }
        
      
     
    
    }




/* scrolling */