:root{
      --primary:#155fad;
      --dark:#0b3d91;
      --bg:#f4f6f8;
      --text:#222;
    }
    *,*:before,*:after{box-sizing:inherit}
    body{
      margin:0;
    font-family: "Noto Sans Devanagari", Arial, sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.9;
      padding-top:clamp(6rem,7vw,30rem);
    }
    .dktp{
        display: flex;
        align-items: center;
        gap: clamp(1rem,1vw,4rem);
        padding-top:clamp(1rem,1vw,3rem);
        padding-inline:clamp(0.5rem,1.5vw,4rem);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background:var(--primary);
        height:clamp(5rem,7vw,10rem);
        box-shadow:0 5px 10px rgba(110, 130, 173, 0.772);

    }
    header{
      color:#ffffff;
      text-align:center;
    }
    h1, h2, h3, h4 {
    font-family: "Noto Sans Devanagari", "Mangal", Arial, sans-serif;
    font-weight: 600;
    }
    header h1{
      margin:0;
      font-size:clamp(1.2rem,1.8vw,2.4rem);
    }
    nav{
      flex-grow:1;
      text-align: right;
      align-items:end;
      display: flex;
      justify-content: end;
    flex-wrap: wrap;
    text-transform: capitalize;
    padding-right: clamp(1rem,2vw,8rem);
    }
    nav a{
      color:#fff;
      text-decoration:none;
      margin:0 10px;
      font-size:clamp(0.8rem,1vw,2rem);
      transition: all 0.5s ease-in-out;
    }
    #mobile_nav{
        display: none;
    }
    nav a:hover{

        transform: scale(1.1);
        color: rgb(97, 255, 208);
        text-decoration: underline;
    }
.content{
    padding:clamp(1rem,1vw,6rem);
}
.content p{
    margin-top:0;
    font-size:clamp(1rem,1.4vw,1.3rem);
}
.content p:nth-of-type(odd) strong:nth-of-type(1){
        color: rgb(118, 1, 50);
    }
    .content p:nth-of-type(odd) strong:nth-of-type(2){
        color: rgb(126, 1, 118);
    }
    .content p:nth-of-type(odd) strong:nth-of-type(3){
        color:purple;
    }
    .content p:nth-of-type(odd) strong:nth-of-type(4){
        color:rgb(175, 88, 2);
    }
    .content p:nth-of-type(even) strong:nth-of-type(1){
        color: rgb(117, 16, 58);
    }
    .content p:nth-of-type(even) strong:nth-of-type(2){
        color: rgb(1, 112, 3);
    }
    .content p:nth-of-type(even) strong:nth-of-type(3){
        color: rgb(127, 2, 136);
    }
    .content p:nth-of-type(even) strong:nth-of-type(4){
        color: rgb(115, 34, 68);
    }
    .content p:nth-of-type(even) strong:nth-of-type(5){
        color:rgb(147, 3, 147);
    }
    .content p strong{
        font-weight: bolder;
    }
.content h2{
    margin-bottom: 0;
    font-size:clamp(1.1rem,1.7vw,3rem);
    color:rgb(29, 1, 185);
}
.content .top_heading{
text-align: center;
margin-bottom: clamp(1.5rem,2vw,5rem);
font-size:clamp(1.2rem,2.1vw,3rem);
color: rgb(209, 1, 32);
background-color: rgb(244, 205, 205);
}
    .note span{
        font-size: clamp(1rem,4.8vw,1.2rem);
        color: red;
        font-weight: bolder;
    }
    .note p{
        margin-top:clamp(0.5rem,1.3vw,2rem);
        font-size:clamp(0.95rem,1.4vw,2rem);
        color: rgb(0, 0, 0);
    }
h3{
    text-align: center;
    color: rgb(73, 168, 1);
    font-size:clamp(1.1rem,1.7vw,3rem);
}
.ListItems{
    font-size:clamp(1rem,1.3vw,3rem);
}
.content ul{
    padding-inline:clamp(1.8rem,3vw,5rem);
}
.note ul{
    padding-inline:clamp(1.3rem,5vw,5rem);
}
aside ul{
    padding-inline:clamp(1.5rem,5vw,5rem);
}
footer{
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem,3vw,9rem);
    background-color: black;
    border: solid black;
    text-align: center;
    padding-block:clamp(1rem,1vw,8rem);
}
footer p{
    margin: 0;
}
footer .f-nav{
    display: flex;
    justify-content: center;
    text-align: center;
    gap: clamp(1rem,1.3vw,7rem);
    text-transform: capitalize;
    color: white;
    overflow: hidden;
}
footer .f-nav a{
    margin: clamp(0.3rem,0.4vw,2rem);
    color: white;
    font-size:clamp(0.7rem,1vw,5rem);
    text-decoration: none;
    text-transform: capitalize;
    transition: all 0.5s ease-in-out;
}
footer *{
    box-sizing: content-box;
}
footer .f-nav a:hover{
    text-decoration:underline;
    text-decoration-thickness: 2px;
    text-decoration-color: green;
    color: rgb(60, 200, 255);
    transform: scale(1.2);
}
footer #social_link a{
    font-size: clamp(0.6rem,0.8vw,0.8rem);
}
footer .f-nav a i{
    font-size:clamp(0.8rem,1.6vw,8rem);
    margin-inline:clamp(0.3rem,0.6vw,3rem);
}
footer #ft-a{
    flex-wrap: wrap;
}
footer #copyright{
    font-size:clamp(0.7rem,1.1vw,5rem);
    color: white;
}

@media screen and (max-width:600px){
    body{
        padding-top:34%;
    }
    .dktp{
        flex-direction: column;
        justify-content: space-between;
        padding-inline:0;
        padding-top: 0;
        height:clamp(6rem,32vw,10rem);
        background:linear-gradient(to left,rgb(1, 105, 180),rgb(2, 72, 158));
    }
    .dktp h1{
        flex-grow:1;
        display: flex;
        align-items: center;
        font-size:clamp(1.1rem,5vw,1.6rem);
    }
    nav{
        gap:clamp(0.5rem,4.9vw,2.5rem);
        flex-wrap: nowrap;
        background-color: rgb(2, 52, 134);
        flex-grow: 0;
        width:100%;
        justify-content: center;
        padding-block:clamp(0.3rem,1.8vw,0.7rem);
    }
    #desktop_nav{
        display: none;
    }
    #mobile_nav{
        display: block;
        display: flex;
        flex-wrap: wrap;
    }
    #mobile_nav a{
        margin:0;
        font-size:clamp(0.6rem,2.8vw,0.9rem);
        width: fit-content;
        text-align: center;
    }
    .content ul,ol{
        padding-inline:clamp(1.5rem,6vw,4rem);
    }
    .content h2,h3{
        font-size: clamp(1.1rem,4.2vw,1.3rem);
    }
    h2:nth-of-type(1){
        font-size:clamp(1.1rem,4.8vw,1.5rem);
    }
    .content p{
        font-size:clamp(0.9rem,4vw,1.023rem);
    }
    .note span{
        font-size: clamp(1rem,3.5vw,1.2rem);
        color: red;
        font-weight: bolder;
    }
    .note p{
        margin-top:clamp(0.5rem,1.3vw,2rem);
        font-size:clamp(0.9rem,4vw,1.05rem);
        color: rgb(0, 0, 0);
    }
    .ListItems{
        font-size:clamp(0.8rem,3.8vw,1.029rem);
    }
    footer .f-nav{
        gap:clamp(0.3rem,2vw,1rem);
    }
    footer .f-nav a{
        font-size: clamp(0.6rem,2.8vw,0.8rem);
    }
    footer #social_link a{
        font-size: clamp(0.6rem,2.7vw,0.8rem);
    }
    footer #copyright{
        font-size:clamp(0.6rem,2.7vw,0.8rem);
    }
    footer .f-nav a i{
        font-size:clamp(0.85rem,4.2vw,1.1rem);
        margin-inline:clamp(0.2rem,1.8vw,3rem);
    }
    p strong{
        font-weight:500;
    }
    footer{
        gap:clamp(1.5rem,5vw,4rem);
    }
}
@media screen and (min-width:1441px){
    body{
        padding-top:0;
    }
    .dktp{
        box-shadow:none;
    }
    .content p , .ListItems{
        font-size:clamp(1.2rem,1vw,3rem);
    }

    section{
        padding-inline: clamp(1rem,1vw,5rem);
    }
    .dktp{
        height:clamp(8rem,8vw,20rem);
        border:solid black;
        border-bottom: none;
    }
    h1{
        font-size:clamp(1.5rem,1.4vw,3rem);
    }
    nav{
        gap:clamp(1rem,0.5vw,5rem);
    }
    nav a{
        font-size:clamp(1.2rem,0.8vw,5rem);
        font-weight: bold;
    }
    main,header,footer{
        width: 70%;
        margin-inline:auto;
    }
    .dktp{
        position: relative;
    }
    header{
        display: flex;
        justify-content: center;
        margin-inline: auto;
    }
    .content{
        border: solid black;
        padding-inline:0;
        padding-inline:clamp(1rem,1.5vw,8rem);
        padding-top:clamp(1rem,2vw,8rem);
    }
    .content .top_heading{
        font-size: clamp(1.8rem,1.5vw,8rem);
        margin-bottom:clamp(1rem,1vw,4rem);
    }
    .content h2, .note span , h3{
        font-size:clamp(1.5rem,1.22vw,8rem);
    }
    footer{
        border: solid black;
        border-top: none;
        gap:clamp(1rem,2vw,9rem);
        padding-block:clamp(1rem,1.5vw,9rem);
    }
    footer .f-nav a{
        font-size:clamp(1rem,0.8vw,5rem);
    }
    footer #social_link a{
        font-size: clamp(0.6rem,0.7vw,0.8rem);
    }
    footer .f-nav a i{
        font-size:clamp(1rem,1vw,5rem);
    }
    footer #copyright{
        font-size:clamp(0.8rem,0.8vw,5rem);
    }
}