*{
    padding: 0px;
    margin: 0px;
}

.navbar-nav {
    display: flex;
    justify-content: center;
    width: 100%;
}
.navbar{
    --bs-navbar-padding-x: 1;
}
.bgtop{
    background-color: rgb(188,32,47);
    padding-left: 4%;
    padding-right: 4%;
}
.home-section{
    background-color: #F0F0F0;
}
.nav-text{
    font-size: 20px;
    color: rgb(188,32,47);
}
.mainpra{
    font-size: 20px;
}
.first-img{
    box-shadow: 0px 1px 48px black;
}
.home-section{
    background-color: #F0F0F0;
}
.bottam-line {
    border-bottom: none; 
}

.bottam-line.scroll {
    border-bottom: 2px solid rgb(188,32,47); 
}


.logo{
    width: 90px;
}

.txt{
    font-size: 18px;
}
li{
   
    font-size: 20px;
    padding-left: 2%;
}
.nav-text:hover{
    border-bottom: 2px solid rgb(188,32,47); 
}
.navbar-nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.hidden {
    display: none;
}
.center-container {
    text-align: center; 
}
.inline-p {
    display: inline;
    margin-right: 10px;
}

.nav-number {
    display: none;
    color: rgb(188, 32, 47);
    font-size: 14px;
    margin-left: auto;
    align-items: center;
    margin-right: 5%;
    margin-left: 1%;
    display: flex;
}

.nav-number i {
    margin-right: 8px;
}
.aa{
    padding-left: 8%;
    padding-right: 8%;
}
.headtxt{
    font-family: 'Fjalla One', sans-serif;
    font-size: 33px;
    font-weight: 600;
}

.txtstyle{
    font-family: Tahoma, Verdana, sans-serif;
}
.headtext{
    font-weight: 500;
 
}
#mobile-icon {
    display: none;
}
.topnav {
    padding-top: 150px;
}

    .headtext1{
        font-family: 'Fjalla One', sans-serif;
        font-size: 36px;
        font-weight: 780;
    }

  .line{
    border: 1px solid rgb(188,32,47);
    width: 20%;
}

.home-section{
    background-color: #F0F0F0;
}

.btntext{
    text-decoration: none;
    color: #fff;
}
.button-size{
    margin-left: 8px;
    width: 28%;
}

.line{
    border: 1px solid rgb(188,32,47);
    width: 15%;
}

.cardtext{
    font-size: 18px;
    text-align: justify;   
}

.header-num {
    color:#fff;
    text-decoration: none;
}

.header-num:visited {
color:#fff;
text-decoration: none;
}

.header-num:hover {
color:#fff;
text-decoration: none;
}

.header-num:active {
color:#fff;
text-decoration: none;
}

/*-------------------- Animation css--------------- */

.animation-service {
    position: relative; 
    animation-name: exa;
    animation-duration: 5s;
}

@keyframes exa {
    0%   {left: -100px; top: 0px;}
    25%  {left: 0px; top: 0px;}
   
}

.animation-service1 {
    position: relative; 
    animation-name: exa1;
    animation-duration: 5s;
}

@keyframes exa1 {
    0%   {right: -100px; top: 0px;}
    25%  {right: 0px; top: 0px;}
   
}

.service-animation {
    position: relative;
    opacity: 0; 
    transition: opacity 1s ease-in-out; 
}

.service-animation.animate {
    opacity: 1;
    animation-name: exa1;
    animation-duration: 1s;
}

 
/*----------------------- image-text ------------------------*/


* {
  box-sizing: border-box;
}

img {
  width: 100%;
  display: block;
}
.xyz {
    color: #fff;
    color: #000;
    box-shadow: 0px 0px 1px black;
    margin-top: 10%;
    margin-bottom: 10%;
    padding: 8%;
    background:rgb(240,240,240,0.7);
}

.image-stack::after {
    content: ' ';
    display: table;
    clear: both;
  }

  .image-stack__item--top {
      float: left;
      width: 66%;
      margin-right: -100%;
      position: relative;
      z-index: 1;
  }

  .image-stack__item--bottom {
      float: right;
      width: 75%;
  }

@supports (display: grid) {
  .image-stack {
    display: grid;
    position: relative; 
    grid-template-columns: repeat(12, 1fr);
  }

  .image-stack__item--bottom {
    grid-column: 4 / -1;
    grid-row: 1;
    width: 100%;
  }

  .image-stack__item--top {
    grid-row: 1;
    grid-column: 2 / span 8;
    padding-top: 7%; 
    width: 90%;
  }
}

@media (max-width: 768px) {
    .xyz {
        padding: 5%;
    }

    /* ----change1----- */
    .cardtext{
        font-size: 17px !important;
        
    }

    /* --------------------- */
    .headtext1{
        font-family: 'Fjalla One', sans-serif;
        font-size: 20px;
        font-weight: 780;
    }
    .headtext{
        font-size: 22px;
    }
    .headtxt{
        font-size: 24px; 
    }
    .mainpra {
        font-size: 18px;
    }
    .txt-res{
        font-size: 18px !important;
    }
    .txt-res1{
        font-size:10px !important;
         color:green
    }

    .btn1{
        text-align: center;
        justify-content: center;
    }
    .first-img1{
        
        padding: 2rem;
    }
    .txt2{
        font-size: 22px;
    }
    
    .txt {
        font-size: 16px;
    }  
        .inline-p {
            display: inline;
            margin-right: 0px;
        }

        .nav-res{
            font-size: 12px;
        }
        
        .inline-p {
            display: inline;
            margin-right: 0px;
        }
        .nav-res{
            font-size: 14px;
        } 
}

@media screen and (max-width: 480px){

    .headtxt{
        font-family: 'Fjalla One', sans-serif;
        font-size: 20px !important;
        font-weight: 600;
        text-align: center;
    }
    .mainpra{
        font-size: 16px;
        margin-bottom:16px;
    }
    #mobile-icon {
        display: none;
    }
    
    
    #mobile-icon.scroll{
        display: block; 
    }

    .bottam-line.scroll .nav-number {
        display: flex; /* Show when scrolled on small screens */
    }
    .topnav {
        padding-top: 70px !important;
    }

    .btn1{
        text-align: center;
    }
    .first-img1{
        
        padding: 2rem;
    }
.txt2{
    font-size: 18px;
}

.service-text {
    order: 2; /* Move text below the image */
}

.service-image {
    order: 10; /* Move image above the text */
}

.image-stack {
    display: flex;
    /* flex-direction: column; */
    flex-direction: column-reverse; 
    align-items: center;
}

.line{
    width:30%;
}

.image-stack__item--top {
    float: left;
    width: 100%;
    margin-right:0%;
    position: relative;
    z-index: 1;
    margin-top: -4rem;
}

.xyz {
    background:rgb(240,240,240,0.6);
}

.headtext {
    font-size: 22px;
}

/* ---------change1----------- */
.btntext{
font-size: 12px;
width: 30%;
height: 35px;
}

/* ------------------ */
.btn{
    margin-left: 8px;
    text-align: center;
    --bs-btn-padding-x: 0.18rem;
    --bs-btn-padding-y: 0.270rem;
}

/* -----------change2------ */
.btncall{
    font-size: 14px;
    margin-left: 8px;
    text-align: center;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.370rem;
}
/* ------------------ */

.bgtop{
    padding-left: 0%;
    padding-right: 0%;
    }
   
    .logo {
        width: 70px;
    }
    .nav-res{
        font-size: 12px;
    }
    
    .inline-p {
        display: inline;
        margin-right: 0px;
    }

}