@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap%27');
 


:root {
    /* --ff-primary: "Open Sans", sans-serif;
    --ff-accent: "Source Sans Pro", sans-serif; */
  --blue: #1a2b6c;
    --orange: #D35400;
    --sm-orang: #f13624;
  --white-color: white;
  --primary-color: #1A2B6D;
  --primary-dark: #1A2B6D;
  
    --clr-neutral-100: #fff;
    --clr-neutral-300: #ddd;
    --clr-neutral-500: #555555;
    --clr-neutral-800: #111827;
    --clr-primary: #041964;

    --transition: 250ms ease-in-out;
    --heading: 2.5rem;
    --card-heading: 2.1rem;
    --card-subheading:1.6rem;
    --sub-heading: 1.2rem;
    --para-font-size: 1rem;

}

.font-heading {
    font-size: 1.25rem;
    color: orangered;
    font-weight: bold;
}
.p-bold{
 font-size: 1.1rem;
 font-weight: bold;
}
p {
    font-size: var(--para-font-size);
    text-align: justify;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,html {
    /* overflow-x: hidden; */
    /* opacity: 0.25px; */
    scroll-behavior: smooth;
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings:
        "GRAD" 0;
}

.site-content {
    padding: 50px 0;
}

/* ! ================= POST IMAGE ================= */

.site-main {
    padding-right: 40px;

}

.post-img img {
    height: 100%;
    min-width: 50vw;

}

a {
    text-decoration: none !important;
    /* color: inherit !important; */
}

.nav-link-first{
   color: inherit !important;
}



@media (min-width: 320px),(min-width: 768px) {
    img {
        height:auto;
        width: 100%;
    }

}


/* TODO ================= HEADINGS ================= */
/* 


@media (min-width: 768px) {
    h3 {
        font-size: 2.5rem;
    }
} */

/* TODO ================= META ================= */

.entry-meta {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 20px;
}

.entry-meta span {
    margin-right: 15px;
}

/* ? ================= SIDEBAR ================= */

.left-sidebar {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    top: 20px;
    height: fit-content;
    border-radius: 10px;
}

.left-sidebar ul {
    padding-left: 18px;
}

.left-sidebar li {
    margin-bottom: 10px;
}

.space-line {
    width: 20px;
}

/* ! ================= COMMENTS ================= */

.comments-area {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.comments-area h4 {
    font-weight: 2.5rem;
    font-style: initial;
}

.comment-form .form-control {
    border-radius: 6px;
}

.comment-form button {
    vertical-align: baseline;
    padding: 10px 30px;
    font-weight: 600;
}







/* -----------------------blog--------------------------- */
.create-points{
    list-style-type: none;
}

.code-div{
    background: black;
    width: 100%;
    padding: 20px;
}
.copy-icon{
    display: flex;
    align-items: center;
    justify-content: end;
}
.btn-copy{
    background-color: transparent;
    color: white;
    border: none;
}

.api-table {
  width: 100%;
  border-collapse: collapse;
}

.api-table th,
.api-table td {
  border: 1px solid #ddd;
  padding: 10px;
}

.api-table th {
  background-color: #0d6efd;
  color: #fff;
  text-align: left;
}

.api-table tr:nth-child(even) {
  background-color: #f8f9fa;
}

.ol-div{
    display: flex;
    flex-direction: column;
    gap:20px;
}

.blog-main {
    position: relative;
    
}

.left-sidebar {
    position: sticky;
    top: 120px;
    height: fit-content;
    height: 50rem;
    overflow-y: auto;
}

@media screen and (min-width: 299px) and (max-width: 699px) {
        .entry-meta{
            text-align: center;
        }
        .post .card-heading{
            font-size: 1.8rem;
            text-align: center;
        }

        .post .card-subheading{
            font-size: 1.4rem;
            text-align: left;
        }

}


 .go-setting::marker {
font-weight: 700;
font-size: 1.25rem;
       }
       .organization::marker{
        font-weight: 700;
   font-size: 1.25rem;
       }

       .tax::marker{
        font-weight: 700;
   font-size: 1.25rem;
       }

       .using-ui::marker{
        font-weight: 700;
   font-size: 1.25rem;
       }

       .order-no::marker{
        font-weight: 700;
   font-size: 1rem;
       }


@media screen and (min-width: 299px) and (max-width: 699px) {
    .card-subheading {
         text-align: left; 
    }
    .site-content{
        padding: 20px;
    }
}