*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: 'Sequel-Sans-Bold-Head';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Sequel-Sans-Bold-Head.otf') format('woff');
}

@font-face {
    font-family: 'MYRIADPRO-REGULAR';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/MYRIADPRO-REGULAR.OTF') format('woff');
}
@font-face {
    font-family: 'MYRIADPRO-SEMIBOLD';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/MYRIADPRO-SEMIBOLD.OTF') format('woff');
}
:root {
    --MYRIADPRO-SEMIBOLD: 'MYRIADPRO-SEMIBOLD';
    --MYRIADPRO-REGULAR: 'MYRIADPRO-REGULAR';
    --sequel-head: 'Sequel-Sans-Bold-Head';
}
@media (max-width: 576px) {
    .hero-section{
        background-image: url("../images/pattern-image.jpg");
        background-size: 100% 100%;
        color: #00adee;
        width: 100%;
        height: 50vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;    
    }
    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
        background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(0,0,0,0.5468312324929971) 0%, rgba(0,0,0,0.18828781512605042) 0%, rgba(0,0,0,0.21069677871148462) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 36%);
    }

    .hero-section h1{
      font-family: var(--sequel-head);  
      font-size: 3rem;
    }
    .text-section{
        width: 90%;
        margin: 2rem auto;        
    }

    .description{
        font-family: var(--MYRIADPRO-REGULAR);
        font-size: 1.3rem;
    }
    .paragraph{
        display: flex;
        gap: 10px;
    }
    .paragraph .srno,
    .paragraph h6{
        font-family: var(--MYRIADPRO-SEMIBOLD);
        font-size: 1.3rem;
    }
    .paragraph p{
        font-family: var(--MYRIADPRO-REGULAR);
        font-size: 1.3rem;
    }
}
@media (min-width: 576px) {
    .hero-section{
        background-image: url("../images/pattern-image.jpg");
        background-size: 100% 100%;
        color: #00adee;
        width: 100%;
        height: 60vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;    
    }
    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
        background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(0,0,0,0.5468312324929971) 0%, rgba(0,0,0,0.18828781512605042) 0%, rgba(0,0,0,0.21069677871148462) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 36%);
    }
    .hero-section h1{
        font-family: var(--sequel-head);  
        font-size: 3rem;
      }
    .text-section{
        width: 90%;
        margin: 2rem auto;
    }

    .description{
        font-family: var(--MYRIADPRO-REGULAR);
        font-size: 1.2rem;
     }
    .paragraph{
        display: flex;
        gap: 10px;
    }

    .paragraph .srno,
    .paragraph h6{
        font-family: var(--MYRIADPRO-SEMIBOLD);
        font-size: 1.3rem;
    }
    .paragraph p{
        font-family: var(--MYRIADPRO-REGULAR);
        font-size: 1.2rem;
    }
}
@media (min-width: 768px) {
    .text-section{
        width:80%;
    }
}
@media (min-width: 992px) {
    .text-section{
        width:70%;
    }
}