/* About Page Stylesheet */

/* Large Device */
/* (Laptop, Desktop */
@media screen and (min-width: 1024px) {
     /* header section */
     .header-section{
        margin-bottom: 0.5rem;
    }
    .header-section .header{
        margin: 0px 0px !important;
        padding: 0px 0px !important;
        width: 100%;
        background: radial-gradient(farthest-side at 1% 100%, #0e2250, #040e23);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 50vh;
    }
    .header-section .header .header-content{
        margin-top: 20vh;
        height: auto;
        color: white;
        width: 60%;
    }
    /* about section */
    .about-section{
        margin-bottom: 5rem;
        padding-bottom: 5rem;
    }
    .about-section .nav-card{
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1rem;
        position: relative;
        top: -40px;
        background: linear-gradient(#fd3737, #fa6d0f);
        border-radius: 5px;
    }
    .about-section .nav-card .nav-item .nav-link.active{
        font-weight: bolder;
        color: white;
    }
    .about-section .nav-card .nav-item .nav-link.active::after{
        content: '';
        display: block;
        border-bottom: 3px solid white;
        width: 20px;
    }
    .about-section .nav-card .nav-item a{
        color: #fafafa;
    }
    .about-section .nav-card .nav-item .nav-link:hover{
        color: white;
        font-weight: bold;
    }
    .about-section .title h1::after{
        content: '';
        display: block;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border-bottom: 5px solid #fa6d0f;
        width: 100px;
    }
}

/* Medium Device */
/* (Tablet) */
@media screen and (min-width: 768px) and (max-width: 1023px){
    /* header section */
    .header-section{
       margin-bottom: 0.5rem;
   }
   .header-section .header{
       margin: 0px 0px !important;
       padding: 0px 0px !important;
       width: 100%;
       background: radial-gradient(farthest-side at 1% 100%, #0e2250, #040e23);
       background-repeat: no-repeat;
       background-size: 100%;
       height: 30vh;
   }
   .header-section .header .header-content{
       margin-top: 15vh;
       height: auto;
       color: white;
   }
   /* about section */
   .about-section{
       margin-bottom: 5rem;
       padding-bottom: 5rem;
   }
   .about-section .nav-card{
       padding-top: 1rem;
       padding-bottom: 1rem;
       padding-left: 1rem;
       position: relative;
       top: -40px;
       background: linear-gradient(#fd3737, #fa6d0f);
       border-radius: 5px;
   }
   .about-section .nav-card .nav-item .nav-link.active{
       font-weight: bolder;
       color: white;
   }
   .about-section .nav-card .nav-item .nav-link.active::after{
       content: '';
       display: block;
       border-bottom: 3px solid white;
       width: 20px;
   }
   .about-section .nav-card .nav-item a{
       color: #fafafa;
   }
   .about-section .nav-card .nav-item .nav-link:hover{
       color: white;
       font-weight: bold;
   }
   .about-section .title h1::after{
       content: '';
       display: block;
       margin-top: 1rem;
       margin-bottom: 1rem;
       border-bottom: 5px solid #fa6d0f;
       width: 100px;
   }
}

/* Small Device */
/* (smartphone) */
@media screen and (max-width: 767px){
    /* header section */
    .header-section{
       margin-bottom: 0.5rem;
   }
   .header-section .header{
       margin: 0px 0px !important;
       padding: 0px 0px !important;
       width: 100%;
       background: radial-gradient(farthest-side at 1% 100%, #0e2250, #040e23);
       background-repeat: no-repeat;
       background-size: 100%;
       height: 50vh;
   }
   .header-section .header .header-content{
       margin-top: 20vh;
       height: auto;
       color: white;
   }
   /* about section */
   .about-section{
       margin-bottom: 5rem;
       padding-bottom: 5rem;
   }
   .about-section .nav-card{
       padding-top: 1rem;
       padding-bottom: 1rem;
       padding-left: 1rem;
       position: relative;
       top: -40px;
       background: linear-gradient(#fd3737, #fa6d0f);
       border-radius: 5px;
   }
   .about-section .nav-card .nav-item .nav-link.active{
       font-weight: bolder;
       color: white;
   }
   .about-section .nav-card .nav-item .nav-link.active::after{
       content: '';
       display: block;
       border-bottom: 3px solid white;
       width: 20px;
   }
   .about-section .nav-card .nav-item a{
       color: #fafafa;
   }
   .about-section .nav-card .nav-item .nav-link:hover{
       color: white;
       font-weight: bold;
   }
   .about-section .title h1::after{
       content: '';
       display: block;
       margin-top: 1rem;
       margin-bottom: 1rem;
       border-bottom: 5px solid #fa6d0f;
       width: 100px;
   }
}

/* Extra Small Device */
/* (small smartphone )*/
@media screen and (max-width: 360px){
  
}