*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    
}
/* NAVRBAR */

body{
    background-image: linear-gradient(black,rgb(14, 13, 13));
}
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  
}
#logo{
    width:60px !important;
    height:60px !important;
    border-radius: 50px;
    position: relative;
    margin-top: -10px !important;
   
}

.navbar {
   
    background-color: #ffffff;
    height: 80px;
   /*  margin: 20px; */
   /*  border-radius: 16px; */
    padding: 1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
}

.navbar-brand {
    font-weight: 500;
    color: #000000;
    font-size: 24px;
    transition: color 0.3s;
}

.login-button {
    background-color: #4e0248;
    color: #ffffff;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.login-button:hover {
    background-color: #000000;
}


.navbar-toggler:focus,
.btn-close:focus {
    box-shadow: none;
    outline: none;
}

.nav-link {
    color: #000000;
    font-weight: 500;
    position: relative;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: color 0.3s;
    font-size: 20px;
    border: 3px solid #000000;
    border-radius: 20px;
    letter-spacing: 3px;
    opacity: 0.9;
    
    
    
}

.nav-link:hover,
.nav-link.active {
    background-color: #000000;
    color: #ffffff;
}


@media screen and (max-width: 768px) {
    .navbar {
        background-color: #ffffff;
        position: fixed;
        
    }
    
    .navbar-brand,
    .nav-link {
        color: rgb(0, 0, 0); 
        margin-top: 1rem;
    }

    #logo{
        width:60px;
        height:60px;
        border-radius: 50px;
        position: relative;
        margin-top: -10px !important;
        
    }
   

}
@media screen and (max-width: 1280px) {
    .navbar {
        background-color: #ffffff;
        position: fixed;
        
    }
    
    .navbar-brand,
    .nav-link {
        color: rgb(0, 0, 0); 
        margin-top: 1rem;
    }

    #logo{
        width:60px;
        height:60px;
        border-radius: 50px;
        position: relative;
        margin-top: -10px !important;
        
    }
   

}
@media screen and (max-width: 576px) {
    .navbar {
        background-color: #ffffff;
        position: fixed;
        
    }
    
    .navbar-brand,
    .nav-link {
        color: rgb(0, 0, 0); 
        margin-top: 1rem;
    }

    #logo{
        width:60px;
        height:60px;
        border-radius: 50px;
        position: relative;
        margin-top: -7px !important;
        
    }
   

}


@media (max-width:991px){
.nav-link::before{
    content: " ";
    position: absolute;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    visibility: hidden;
    transition: 0.3s ease-in-out;
}
.nav-link:hover::before, .nav-link.active::before{
    width: 100%;
    visibility: visible;
}

#logo{
    width:60px;
    height:60px;
    border-radius: 50px;
    position: relative;
    margin-top: -30px !important;
    
}
}


/* NAVBAR END */
.hero-section{
    background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.7)),url(images/digi444.jpg);

    background-position: center;
    flex-direction: column;

    background-size: cover;
    width: 100%;
    height: 90vh;
    position: relative;
    overflow: hidden;
}




.hero-s::before{
    background-color: rgba(0,0,0,0.6);
    content: " ";
    position: absolute;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
}
.hero-section .container{
    height: 100vh;
    z-index: 1;
    position: relative;
}
.hero-section h1 {

    font-size: 6vh;
    font-weight: 900;
    letter-spacing: 5px;
    color:  #ffffff;
    text-align: center;
    overflow: hidden; 
    white-space: nowrap; 

    animation: typeWriter 4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite forwards; 
    
}


@keyframes typeWriter {
    from {
        width: 0;
    }
    to {
        width: 100%; 
    }
}

@media screen and (max-width: 768px) {
    .hero-section h1 {
        font-size: 12px; 
        
        
    }
}

@media screen and (max-width: 576px) {
    .hero-section h1 {
        font-size: 14px; 
    }
}



.hero-section h2{
    background-color: black;
    font-size: 2rem;
    color: #04e617;
    text-align: center;
   animation: slideInUp1 4s ease-out forwards infinite;
   letter-spacing: 10px;
   border-radius: 8px;
   border: 1px solid #04e617;
   
}


.hero-section p {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    animation: fadeIn 3s ease-out forwards;
    letter-spacing: 6.2px;
}


@media screen and (max-width: 768px) {
    .hero-section p {
        font-size: 12px; 
    }
    .hero-section h2{
        font-size: 16px;
        padding: 10px;
    }
}
@media screen and (max-width: 576px) {
    .hero-section p {
        font-size: 10px; 
    }
}

    

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(70px)
        
    }
    to {
        opacity: 1;
        transform: translateY(0);
       
    }
}
@keyframes slideInUp1 {
    from {
        opacity: 0;
        transform: translateY(70px)
        
    }
    to {
        opacity: 1;
        transform: translateY(0);
       
    }
  

}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
#PER h1{
    margin-top:5rem;
    margin-bottom: 5rem;
    font-size: 39px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
    
}
#offers h1{
    color: #04e617;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#offers h4,p{
    color: #fff;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#offers img{
    border-radius: 20px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}

@media screen and (max-width: 576px){
    #PER h1{
        margin-top:5rem;
        margin-bottom: 5rem;
        font-size: 30px;
        
    }

}



@media screen and (max-width: 768px) 
{
    #gridimg{
        align-items: center;
        width: 50px;
        height:50px;
        border-radius: 15px; 
        
    }


}
@media screen and (max-width: 576px) 
{
    #gridimg{
        align-items: center;
        width: 50px;
        height:50px;
        border-radius: 15px; 
        
    }


}




#description h1{
    color: #04e617;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#description p{
    color: #fff;
    margin-top: 5rem;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
    
    letter-spacing: 3px;
    line-height: 30px;
    text-align: justify;
}
#icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    margin-top: 5rem;
    border-radius: 15px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
  
}


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

    #icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 120px;
        margin-top: 5rem;
    }

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

    #icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 120px;
        margin-top: 5rem;
    }

}

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

    #icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 130px;
        height: 130px;
        margin-top: 5rem;
    }

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

    #icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        margin-top: 5rem;
       
    }

}

#icons h3{
    margin-top: 0.5rem;
    color: #fff;
    font-size: 16px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}


/* INTRO */

@keyframes CSSscrollReveal{
    from{

        opacity: 0;
        transform: translateY(100px);
    }
    to{ 
        opacity: 1;
        transform: translateY(0);


    }
}



#intro p{
    margin-top: 5rem;
    color: #fff;
    letter-spacing: 3.5px;
    line-height: 30px;
    text-align: justify;
    border: 1px solid #04e617;
    padding: 10px;
    animation:  CSSscrollReveal ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
    #intro img{
      
      
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5rem;
      border-radius: 25px;
      box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation:  CSSscrollReveal ease-in-out both ;
        animation-timeline: view();
        animation-range: entry 50% cover 50%;
     
    }
 
 
 



  
#type p{
    margin-top: 5rem;
    color: #fff;
    text-align: justify;
    letter-spacing: 3.5px;
    line-height: 30px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
    
    
}
@keyframes CSSscrollReveal1{
    from{

        opacity: 0;
        transform: translateY(100px);
    }
    to{ 
        opacity: 1;
        transform: translateY(0);


    }
}
#type img{
    width: 200px;
    height: 200px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
    2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
    6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
    animation: imgAnimation 2s ease-in-out infinite;
    margin-top: 5rem;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
    
}

@media screen and (max-width: 960px){
    #type img{
        width: 200px;
        height: 200px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
        animation:  CSSscrollReveal1 ease-in-out both ;
        animation-timeline: view();
        animation-range: entry 50% cover 50%;
    }


    @keyframes CSSscrollReveal1{
        from{
    
            opacity: 0;
            transform: translateY(100px);
        }
        to{ 
            opacity: 1;
            transform: translateY(0);
    
    
        }
    }

}

@media screen and (max-width: 1280px){
    #type img{
        width: 200px;
        height: 200px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
        animation:  CSSscrollReveal1 ease-in-out both ;
        animation-timeline: view();
        animation-range: entry 50% cover 50%;
    }


    @keyframes CSSscrollReveal1{
        from{
    
            opacity: 0;
            transform: translateY(100px);
        }
        to{ 
            opacity: 1;
            transform: translateY(0);
    
    
        }
    }

}

@media screen and (max-width: 768px){
    #type img{
        width: 200px;
        height: 200px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
        animation:  CSSscrollReveal1 ease-in-out both ;
        animation-timeline: view();
        animation-range: entry 50% cover 50%;
    }


    @keyframes CSSscrollReveal1{
        from{
    
            opacity: 0;
            transform: translateY(100px);
        }
        to{ 
            opacity: 1;
            transform: translateY(0);
    
    
        }
    }

}

@media screen and (max-width: 576px){
    #type img{
        width: 200px;
        height: 200px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
        animation:  CSSscrollReveal1 ease-in-out both ;
        animation-timeline: view();
        animation-range: entry 50% cover 50%;
    }


    @keyframes CSSscrollReveal1{
        from{
    
            opacity: 0;
            transform: translateY(100px);
        }
        to{ 
            opacity: 1;
            transform: translateY(0);
    
    
        }
    }

}
 #type h3{
    margin-top: 1rem;
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    text-align: center;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
 }
#type1 p{
    margin-top: 5rem;
    color: #fff;
    text-align: justify;
    letter-spacing: 3.5px;
    line-height: 30px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#type1 img{
    width: 200px;
    height: 200px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
    2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
    6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
    animation: imgAnimation 2s ease-in-out infinite;
    margin-top: 5rem;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;

}



@media screen and (max-width: 960px){
    #type1 img{
        width: 200px;
        height: 200px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 1280px){
    #type1 img{
        width: 180px;
        height: 180px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 768px){
    #type1 img{
        width: 150px;
        height: 150px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 576px){
    #type1 img{
        width: 120px;
        height: 120px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}




#type1 h3{
    margin-top: 1rem;
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    text-align: center;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
 }
#type2 p{
    margin-top: 5rem;
    color: #fff;
    text-align: justify;
    letter-spacing: 3.5px;
    line-height: 30px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#type2 img{
    margin-top: 5rem;
    width: 200px;
    height: 200px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
    2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
    6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
    animation: imgAnimation 2s ease-in-out infinite;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}



@media screen and (max-width: 960px){
    #type2 img{
        width: 200px;
        height: 200px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 1280px){
    #type2 img{
        width: 180px;
        height: 180px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 768px){
    #type2 img{
        width: 150px;
        height: 150px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 576px){
    #type2 img{
        width: 120px;
        height: 120px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}


#type2 h3{
    margin-top: 1rem;
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    text-align: center;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
 }
#type3 p{
    margin-top: 5rem;
    color: #fff;
    text-align: justify;
    letter-spacing: 3.5px;
    line-height: 30px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#type3 img{
    margin-top: 5rem;
    width: 200px;
    height: 200px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
    2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
    6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
    animation: imgAnimation 2s ease-in-out infinite;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}




@media screen and (max-width: 960px){
    #type3 img{
        width: 200px;
        height: 200px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 1280px){
    #type3 img{
        width: 180px;
        height: 180px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 768px){
    #type3 img{
        width: 150px;
        height: 150px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 576px){
    #type3 img{
        width: 120px;
        height: 120px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
#type3 h3{
    margin-top: 1rem;
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    text-align: center;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
 }
#type4 p{
    margin-top: 5rem;
    color: #fff;
    text-align: justify;
    letter-spacing: 3.5px;
    line-height: 30px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}

@keyframes imgAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1); 
    }
}


#type4 img {
    margin-top: 5rem;
    width: 200px;
    height: 200px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
    2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
    6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
    animation: imgAnimation 2s ease-in-out infinite;
     
     animation:  CSSscrollReveal1 ease-in-out both ;
     animation-timeline: view();
     animation-range: entry 50% cover 50%;
    }

@media screen and (max-width: 960px){
    #type4 img{
        width: 200px;
        height: 200px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 1280px){
    #type4 img{
        width: 180px;
        height: 180px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 768px){
    #type4 img{
        width: 150px;
        height: 150px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}
@media screen and (max-width: 576px){
    #type4 img{
        width: 120px;
        height: 120px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
        2.8px 2.8px 2.2px rgba(236, 236, 236, 0.02),
        6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(90, 167, 90, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
        animation: imgAnimation 2s ease-in-out infinite;
        margin-top: 5rem;
    }
}

#type4 h3{
    margin-top: 1rem;
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    text-align: center;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
 }


/* LEARN */

#learn h1{
    color: #04e617;
    text-align: left;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#learn{
    display: flex;
    align-items: center;
    justify-content: center;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
    
}
#learn ul li{
    list-style: none;
    text-align: left;
    color: #fff;
    font-size: 16px;
    line-height: 50px;
    letter-spacing: 3px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#learn p{
    font-size: 16;
    font-weight: 600;
    color: yellow;
    line-height: 40px;
    letter-spacing: 3px;
    border: 1px solid #04e617;
    padding: 10px;
    border-radius: 20px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}


/* MANAGE */


#manage{
    display: flex;
    align-items: center;
    justify-content: center;
}
#manage h1{
    color: #04e617;
    text-align: left;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#manage button{
    background-color: #ffffff;
    color: #000;
    padding: 15px;
    border-radius: 15px;
    margin-top: 3rem;
    font-size: 14px;
    font-weight: bold;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}



/* BUSINESS */


#business{
    display: flex;
    justify-content: center;
    align-items: center;

}
#business h1{
    color: #04e617;
    margin-top: 3rem;
    font-size: 30px;
    border: 2px solid #ffbb00;
    border-radius: 15px;
    text-align: center;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#business h3{
    color: #fff;
    font-weight: bold;
    margin-top: 3rem;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#business p{
    text-align:justify;
    letter-spacing: 3px;
    line-height: 30px;
    padding: 10px;
    border: 1px solid #ffbb00;
    border-radius: 15px;
    margin-top: 2rem;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}


#price{
    
    display: flex;
    align-items: center;
    justify-content: center;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
   
}

#price h1{
    color: #04e617;
    text-align: center;
    font-size: 30px;
    margin-bottom: 3rem;
    text-decoration: underline;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#price h4{
    color: #6617CB;
    font-size: 18px;
    font-weight: bold;
    margin-top: 1rem;
    border: 1px solid #6617CB;
    padding: 8px;
    border-radius: 15px;
    text-align: left;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#price ul li{
    list-style: none;
    color: #fff;
    font-size: 20px;
    line-height:50px;
    letter-spacing: 2px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#price h2{
    color: #fff;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#price p{
    text-align:left;
    margin-left: 1rem;
    color: #04e617;
    margin-top: 3rem;
    font-size: 18px;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#border{
   
    margin-top: 1rem;
    margin-bottom: 1rem;
}

@media screen and (max-width: 576px){
    #price{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #price h1{
        color: #04e617;
        text-align: center;
        font-size: 30px;
        margin-bottom: 3rem;
        text-decoration: underline;
    }
    #price h4{
        color: #6617CB;
        font-size: 16px;
        font-weight: bold;
        margin-top: 1rem;
        border: 1px solid #6617CB;
        padding: 8px;
        border-radius: 15px;
        text-align: left;
    }
    #price ul li{
        list-style: none;
        color: #fff;
        font-size: 18px;
        line-height:50px;
        letter-spacing: 2px;
    }
    #price h2{
        color: #fff;
    }
    #price p{
        text-align:left;
        margin-left: 1rem;
        color: #04e617;
        margin-top: 3rem;
        font-size: 16px;
    }

}

@media screen and (max-width: 768px){
    #price{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #price h1{
        color: #04e617;
        text-align: center;
        font-size: 30px;
        margin-bottom: 3rem;
        text-decoration: underline;
    }
    #price h4{
        color: #6617CB;
        font-size: 14px;
        font-weight: bold;
        margin-top: 1rem;
        border: 1px solid #6617CB;
        padding: 8px;
        border-radius: 15px;
        text-align: left;
    }
    #price ul li{
        list-style: none;
        color: #fff;
        font-size: 16px;
        line-height:50px;
        letter-spacing: 2px;
    }
    #price h2{
        color: #fff;
    }
    #price p{
        text-align:left;
        margin-left: 1rem;
        color: #04e617;
        margin-top: 3rem;
        font-size: 14px;
    }

}

@media screen and (max-width: 968px){
    #price{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #price h1{
        color: #04e617;
        text-align: center;
        font-size: 30px;
        margin-bottom: 3rem;
        text-decoration: underline;
    }
    #price h4{
        color: #6617CB;
        font-size: 12px;
        font-weight: bold;
        margin-top: 1rem;
        border: 1px solid #6617CB;
        padding: 8px;
        border-radius: 15px;
        text-align: left;
    }
    #price ul li{
        list-style: none;
        color: #fff;
        font-size: 14px;
        line-height:50px;
        letter-spacing: 2px;
    }
    #price h2{
        color: #fff;
    }
    #price p{
        text-align:left;
        margin-left: 1rem;
        color: #04e617;
        margin-top: 3rem;
        font-size: 12px;
    }

}
@media screen and (max-width: 1280px){
    #price{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #price h1{
        color: #04e617;
        text-align: center;
        font-size: 30px;
        margin-bottom: 3rem;
        text-decoration: underline;
    }
    #price h4{
        color: #6617CB;
        font-size: 13px;
        font-weight: bold;
        margin-top: 1rem;
        border: 1px solid #6617CB;
        padding: 8px;
        border-radius: 15px;
        text-align: left;
    }
    #price ul li{
        list-style: none;
        color: #fff;
        font-size: 12px;
        line-height:50px;
        letter-spacing: 2px;
        text-align: left;
    }
    #price h2{
        color: #fff;
    }
    #price p{
        text-align:left;
    margin-left: 1rem;
        color: #04e617;
        margin-top: 3rem;
        font-size: 13px;
    }

}




/* POPUP */ 
.hidden {
    display: none;
  }
  
  #contactFormContainer {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }
  
  #contactForm {
    background-image: linear-gradient(to left,rgb(0, 0, 0),#222222);
    color: #ffffff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 400px;
    
    
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  .floating-register {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
  }
  
  #registerButton {
    display: block;
    padding: 10px 20px;
    background-color: #09e702;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    animation: floatingcard 1s ease-in-out infinite alternate;
}

@keyframes floatingcard{
  from {
      transform: translateY(0);
  }
  to {
      transform: translateY(-10px); 
  }
}
  
  
  #registerButton:hover {
    background-color: #055709;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="number"],
  textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
  }
  
  button[type="submit"] {
    background-color: #ffffff;
    color: rgb(55, 3, 177);
    border: none;
    border-radius: 3px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }
  
  button[type="submit"]:hover {
    background-color: #ffffff;
  }



/* WM */
.contact-buttons {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    transition: top 0.3s; 
  }
  
  .contact-buttons.scrolled {
    top: calc(100% - 100px); 
  }
  
  .contact-buttons a {
    display: block;
    margin-bottom: 10px;
  }
  
  .contact-buttons a img {
    width: 50px;
    height: auto;
    border-radius: 5px;
  }
  
  .email-button img {
    width: 56.5px;
    height: auto;
    border-radius: 5px;
  }
  
  .whatsapp-button img {
    width: 42px;
    height: auto;
    border-radius: 6px;
    
    margin-left: 4px;
  }
  
  #FBS {
    margin-right: 5px;
  }
  
  .instagram-button img {
    width: 50px;
    height: auto;
    border-radius: 5px;
  }
  
 
hr{
    border-top: 5px solid #04e617;
    border-radius: 10px;
}


#budget{
    display: flex;
    align-items: center;
    justify-content: center;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}

#budget h3{
    color: #fff;
    text-align: center;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#budget h5{
    color: #04e617;
    text-align: center;
    
    border-radius: 15px;
    font-size:20px;
    
      animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;

}

/* #call button{
   
    background-color: #4CBB17;
    color: #fff;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
    animation: floatingcard 1s ease-in-out infinite alternate;
}
@media screen and(max-width:576px) {
    #call button{
       
        background-color: #4CBB17;
        color: #fff;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 999;
        animation: floatingcard 1s ease-in-out infinite alternate;
    }
    
}
@media screen and(max-width:768px) {
    #call button{
        margin-bottom:25rem;
        background-color: #4CBB17;
        color: #fff;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        position: fixed;
        bottom: 20px;
      left: 20px;
        z-index: 999;
        animation: floatingcard 1s ease-in-out infinite alternate;
    }
    
}
@media screen and(max-width:960px) {
    #call button{
        margin-bottom:25rem;
        background-color: #4CBB17;
        color: #fff;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 999;
        animation: floatingcard 1s ease-in-out infinite alternate;
    }
    
}
@media screen and(max-width:1280px) {
    #call button{
        margin-bottom:25rem;
        background-color: #4CBB17;
        color: #fff;
        border-radius: 50%;
        width: 70px;
        height: 70px;
        position: fixed;
        bottom: 20px;
      left: 20px;
        z-index: 999;
        animation: floatingcard 1s ease-in-out infinite alternate;
    }
    
}
#call .btn-icon{
    font-size: 50px !important;
} */
/* #FAQ */
#faq{
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
    margin-top: 3rem;
}
.accordion{
    width:100%;
    background: transparent;
}

.accordion-item{
    background-color: #6617CB;
    color: white;
    border: none;
    box-shadow: 0 10px 12px 0 #00000033, 0 10px 20px 0 rgba(0, 0, 0, 0.19);
}
.accordion-body{
    background: #6617CB;
    font-size: 0.9rem;

}
.accordion-button{
    font-size: 0.8rem;
    background: transparent;
    outline: none;
    border: 1px solid #000;
    color: white;
    font-weight: 500;
}
.accordion-button:focus{
    box-shadow: none;
    border: 1px solid #000;
}

.accordion-button:not(.collapsed){
    background: #000;
    color: #fff;
    box-shadow: none;
}

/* .accordion-button::after{
    background-image: none;
    content: "\f0d7";
    width: auto;
    height: auto;
} */

.accordion-button:not(.collapsed::after){
    background-image: none;
color: #fff;
}

/* FAQ2 */
.accordion{
    width:100%;
    background: transparent;
}

.accordion-item{
    background-color: #000000;
    color: white;
    border: none;
    box-shadow: 0 10px 12px 0 #00000033, 0 10px 20px 0 rgba(0, 0, 0, 0.19);
}
.accordion-body{
    background: #369c07;
    font-size: 0.9rem;

}
.accordion-button1{
    font-size: 0.8rem;
    background: transparent;
    outline: none;
    border: 1px solid #000;
    color: white;
    font-weight: 500;
    
}
.accordion-button1:focus{
    box-shadow: none;
    border: 1px solid #000;
}

.accordion-button1:not(.collapsed){
    background: #000;
    color: #fff;
    box-shadow: none;
}

.accordion-button::after{
    background-image: none;
    content: " ⬇️";
    width: auto;
    height: auto;
}

.accordion-button1:not(.collapsed::after){
    background-image: none;
color: #fff;
}

#faq h1{
    text-align: center;
    color: #04e617;
}

#helpline h1{
text-align: left;
font-size:25px;
font-weight: 500;

}

#helpline p{
line-height:50px;
font-size: 16px;
letter-spacing: 2px;

}
   
#getin{
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
}
#getin h1{
    text-align: center;
    margin-top: 3rem;
    margin-top: 2rem;
    color: #fff;
}

#getin label{
    color: #04e617;
    font-size: 18px;
    font-weight: bold;
}


















#inner-link{
    display: flex;
    align-items: center;
    justify-content: center;
    
    }
    
    #inner-link ul{
        list-style: none;
    }
    
    #inner-link ul li{
        font-size: 18px;
        margin-top: 1rem;
    
    }
    



    .map {
        height: 400px; 
        border: 1px solid #ccc; 
    }
    
    .address {
        padding: 20px; 
        border: 1px solid #ccc; 
        border-radius: 5px; 
        background-color: #f9f9f9; 
    }
    
    .address h2 {
        margin-top: 0; 
        font-size: 24px; 
        color: #333; 
    }
    
    .address p {
        margin: 10px 0; 
        font-size: 16px; 
        color: #666; 
    }
    
    #map{
        margin-top: 5rem;
        animation:  CSSscrollReveal1 ease-in-out both ;
        animation-timeline: view();
        animation-range: entry 50% cover 50%;
    }
    #map iframe {
  
        margin-bottom: 5rem;
        width: 500px;
        height: 500px;
        border-radius: 0px 30px 0px 30px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    @media (max-width: 768px) {
        #map iframe {
            width: 100%; 
            height: 300px;
            border-radius: 30px; 
        }
    }
    #map h2{
        color: #000;
        font-size: 32px;
        font-weight: bold;
        font-family: sans-serif;
    }
    #map p{
        color: #000;
        font-size: 20px;
        letter-spacing: 2px;
        line-height: 30px;
    }
    


    #servlink1{
        background-color: #ca2f00;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
    }
    #servlink2{
        background-color: #0051ff;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
    }
    #servlink3{
        background-color: #000000;
        color: #00ff40;
        font-size: 18px;
        font-weight: bold;
    }
    
    
    .service-link {
        display: block;
        text-align: center;
        padding: 20px 0;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 20px;
        margin-top: 20px;
        text-decoration: none;
        color: #333;
        transition: background-color 0.3s ease;
        animation:  CSSscrollReveal1 ease-in-out both ;
        animation-timeline: view();
        animation-range: entry 50% cover 50%;
    }
    
    .service-link:hover {
        background-color: #ddd;
    }
    


#footer{
    min-height: 100vh;
    background-color: #101010;
    padding: 85px 0;
    animation:  CSSscrollReveal1 ease-in-out both ;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
    margin-top: 5rem;


}
#footer i{
    font-size: 25px !important;
    margin:1rem;
    margin-top: 3rem;

}
#footer i:hover{
    color: #fff;
    font-weight: 700 !important;
}
#footer h2{
    color: #fff;
    text-transform: uppercase;
}
@media (max-width:767px){
    #footer{
        background-color: #333131;
        padding: 85px 0;
    
    
    }
}
@media (max-width:576px){
    #footer{
        background-color: #111111;
        padding: 85px 0;
    
    
    }
}
#footer button{
    padding: 10px;
    position: relative;
    background-color: #0051ff;
    color: #fff;
    font-weight: bold;
    border-radius: 50px;
    letter-spacing: 5px;
}
#footer button:hover{
    background-color: #134cc9;
}

.single-box p{
color: #fff;
line-height: 1.9;
}

.single-box h3{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.single-box.card-area{
    color: #04e617;
    font-size: 20px;
    margin-right: 10px;
}
.single-box ul{
    list-style: none;
    padding: 0;

}

.single-box ul li a{
text-decoration: none;
color: #04e617;
line-height: 2.5;
font-weight: 100;
}
.single-box ul li a:hover{
    color: #87e3ff;
}

.single-box h2{
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}
.basic-addon2{
    background: #ffbb00 !important;
    color: #fff;
}
.socials i{
font-size: 18px;
margin-right: 15px;
}

@media (max-width:767px){
    .single-box{
        margin-bottom: 50px;
    }
}

@media (min-width:768px) and (max-width:991px){
    .single-box{
        margin-bottom: 50px;
    }
}
#copyright{
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 15rem;
}