/**************** Computer *************************/
          /* Desktop navigation */
@media (max-width:1024px){
	.nav-links{
		flex:1;
		position:static;
		width:auto;
		height:auto;
		background:none;
		padding:0;
	}
    nav{
        padding:20px 30px;	
    }
    nav img{
        width:110px;
    }
    .nav-links ul{
        gap:15px;
    }
    .nav-links ul li a{
        font-size:16px;
		color:#000;
    }
}
          /* Desktop navigation */
/**************** Computer *************************/
            /* Tablet navigation */
/* =========================
   MOBILE RIGHT-SIDE MENU
========================= */

@media screen and (max-width: 900px) {
  nav {
    width: 100%;
    padding: 1rem 1.25rem;
  }

  nav img {
    width: 100px;
  }

  /* Hamburger icon */
  nav > .fa-bars {
    display: block;
    width: auto;
    color: #000;
    font-size: 1.6rem;
    cursor: pointer;
  }

  /* Hidden right-side navigation panel */
  .nav-links {
    position: fixed;
    top: 0;
    right: -280px;
    z-index: 9999;

    display: block;
    width: 280px;
    height: 100dvh;
    padding: 5rem 1.75rem 2rem;

    background:var(--blue-color);
    box-shadow: -5px 0 18px rgba(0, 0, 0, 0.18);
    overflow-y: auto;

    transition: right 0.35s ease;
  }

  .nav-links ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .nav-links ul li {
    width: 100%;
    padding: 0.8rem 0;
  }

  .nav-links ul li a {
    width: 100%;
    color: var(--white-color);
    font-size: 1.15rem;
  }

  .nav-links ul li::after {
    width: 0;
    margin: 0.35rem 0 0;
    background:var(--white-color);
  }

  .nav-links ul li:hover::after {
    width: 100%;
  }

  /* Close icon inside the panel */
  .nav-links .fa-times {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;

    display: block;
    width: auto;
    color: #000;
    font-size: 1.6rem;
    cursor: pointer;
  }
}

            /* Tablet navigation */
/**************** Computer *************************/
            /* Mobile navigation */


            /* Mobile navigation */
/**************** Computer *************************/
/*	Responsive media query for max width 900px	*/
@media screen and (max-width: 900px){
	:root{
	
	--font-size-m: 1rem;
	--font-size-l: 1.3rem;
	--font-size-xl: 1.5rem;
	--font-size-xxl: 1.8rem;
	}	
	.hero-section .section-content{
		flex-wrap:wrap;
	}
	.secton-content{
		margin-top:8rem;	
	}
	.hero-section .hero-details .title{
		margin-top:5rem;
	}
	.hero-section .hero-details .button{
		width:30%;
	}
}





/**************** Tablet Size ************************/
 
/**************** Tablet Size ************************/

/**************** Mobile Phone ***********************/    
    
/**************** Mobile Phone ***********************/