/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}


@import url(https://fonts.googleapis.com/css?family=Open+Sans|Lobster|Roboto|Old+Standard+TT|Raleway);
.content, .browser__toolbar {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}


html {
    font: 100%/1.5 "Titillium Web", "Lucida Grande", "Lucida Sans", sans-serif;
}

body,
html {
    max-width: 100%;
    overflow-x: hidden;
}
  

:root{
    /* ===== Colors ===== */
    --body-color: #E4E9F7;
    --sidebar-color: #FFF;
    --primary-color: #695CFE;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;

    /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;
}

body{
    min-height: 100vh;
    background-color: var(--body-color);
    transition: var(--tran-05);
}

::selection{
    background-color: var(--primary-color);
    color: #fff;
}

body.dark{
    --body-color: #18191a;
    --sidebar-color: #242526;
    --primary-color: #3a3b3c;
    --primary-color-light: #3a3b3c;
    --toggle-color: #fff;
    --text-color: #ccc;
}

/* ===== Sidebar ===== */
 .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    padding: 10px 14px;
    background: var(--sidebar-color);
    transition: var(--tran-05);
    z-index: 100;
}
.sidebar.close{
    width: 88px;
}

/* ===== Reusable code - Here ===== */
.sidebar li{
    height: 50px;
    list-style: none;
    display: flex;
    align-items: center;
    border-radius: 6px;
    margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
}

.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.sidebar .text,
.sidebar .icon{
    color: var(--text-color);
    transition: var(--tran-03);
}

.sidebar .text{
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
}
.sidebar.close .text{
    opacity: 0;
}
/* =========================== */

.sidebar header{
    position: relative;
}

.sidebar header .image-text{
    display: flex;
    align-items: center;
}
.sidebar header .logo-text{
    display: flex;
    flex-direction: column;
}
header .image-text .name {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 600;
}

header .image-text .profession{
    font-size: 16px;
    margin-top: -2px;
    display: block;
}

.sidebar header .image{
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar header .image img{
    width: 40px;
    border-radius: 6px;
}

.sidebar header .toggle{
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%) rotate(180deg);
    height: 25px;
    width: 25px;
    background-color:#779bc6;
    color: var(--sidebar-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: var(--tran-05);
}

body.dark .sidebar header .toggle{
    color: var(--text-color);
}

.sidebar.close .toggle{
    transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu{
    margin-top: 40px;
}

.sidebar li.search-box{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    cursor: pointer;
    transition: var(--tran-05);
}

.sidebar li.search-box input{
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: var(--primary-color-light);
    color: var(--text-color);
    border-radius: 6px;
    font-size: 17px;
    font-weight: 500;
    transition: var(--tran-05);
}
.sidebar li a{
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--tran-03);
}

.sidebar li a:hover{
    background-color: #0055A8;
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text{
    color: var(--sidebar-color);
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text{
    color: var(--text-color);
}

.sidebar .menu-bar{
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
}
.menu-bar::-webkit-scrollbar{
    display: none;
}
.sidebar .menu-bar .mode{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    position: relative;
    transition: var(--tran-05);
}

.menu-bar .mode .sun-moon{
    height: 50px;
    width: 60px;
}

.mode .sun-moon i{
    position: absolute;
}
.mode .sun-moon i.sun{
    opacity: 0;
}
body.dark .mode .sun-moon i.sun{
    opacity: 1;
}
body.dark .mode .sun-moon i.moon{
    opacity: 0;
}

.menu-bar .bottom-content .toggle-switch{
    position: absolute;
    right: 0;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}
.toggle-switch .switch{
    position: relative;
    height: 22px;
    width: 40px;
    border-radius: 25px;
    background-color: var(--toggle-color);
    transition: var(--tran-05);
}

.switch::before{
    content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background-color: var(--sidebar-color);
    transition: var(--tran-04);
}

body.dark .switch::before{
    left: 20px;
}

.home{
    position: absolute;
    top: 0;
    top: 0;
    left: 250px;
    height: 144vh;
    width: calc(100% - 250px);
    /* background-color: var(--body-color); */
    transition: var(--tran-05);
}
.home .text{
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 12px 60px;
}

.sidebar.close ~ .home{
    left: 87px;
    height: 65rem;
    width: calc(100% - 86.8px);
}
body.dark .home .text{
    color: var(--text-color);
}




/* MODAL CSS */


body .modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
body .modal .bg {
  height: 41rem;
  width: 40rem;
  background-color: #4a75b0;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  z-index: -1;
}
body .modal .modal-container {
  padding: 3rem 5rem;
  background-color: #fff;
  color: #000;
  width: 570px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  border-radius: 10px;
  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.2);
}
body .modal .modal-container .modal-top {
  display: flex;
  justify-content: space-between;
  color: #808491;
  align-items: center;
}
body .modal .modal-container .modal-top :nth-child(1) {
  background-color: #F0F0F3;
  padding: 0.2rem 2rem;
  font-size: 1.2rem;
  border-radius: 2px;
  cursor: pointer;
}
body .modal .modal-container .modal-top :nth-child(2) {
  font-size: 1.5rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
}
body .modal .modal-container .modal-body {
  margin: 0rem 0 0rem 0;
}
body .modal .modal-container .modal-body h2 {
  font-size: 1.2rem;
}
body .modal .modal-container .modal-body p {
  opacity: 0.75;
  font-size: 0.72rem;
}
body .modal .modal-container .modal-form {
  display: flex;
  flex-direction: column;
}
body .modal .modal-container .modal-form h3 {
  margin: 0 0 0.6rem 0;
  padding: 0;
}
body .modal .modal-container .modal-form input {
  width: 77%;
  padding: 0.8rem 1rem;
  border-radius: 5px;
  border: 0.1rem solid #dfdfdf;
  outline: none;
  color:#000;
}
body .modal .modal-container .cta {
  margin-top: 3rem;
  display: flex;
  align-items: start;
}
body .modal .modal-container .cta button {
  margin: 0 2rem 0 0;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0.8rem 3rem;
  font-family: "Lato", sans-serif;
  font-weight: bold;
}
body .modal .modal-container .cta button:nth-child(1) {
  background-color: #4a75b0;
  color: #fff;
  border-radius: 4px;
  font-size: 1.1em;
}
body .modal .modal-container .cta button:nth-child(2) {

  color: #000;
  background-color: #00000012;
}


#modal2 tbody, td, tfoot, th, thead, tr{
padding-top: 3px;
padding-left: 10px;
}

#StgsModal2FormID{
  flex-direction: row !important;
}

#StgRenameSaveBtnID{
  color: white;
}


#CancBtn2:after{
  border: 0 !important;
}


#CancBtn:after{
  border: 0 !important;
}



/* Copy from here */
.btn-primary {
    color: #fff;
    border-radius: 3px;
    background-image: linear-gradient( 179deg, #397991 45%, #7298c4 90%);
    box-shadow: 0px 9px 32px 0px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    border: 0;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not([disabled]):not(.disabled).active,
.btn-primary:not([disabled]):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    background-image: linear-gradient( 182deg, #397991 54%, #154ac1 172%);
    box-shadow: 0px 9px 32px 0px rgba(0, 0, 0, 0.3);
    color: #FFF;
}



@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
	overflow: hidden;
  background: #3F3F3F;
  color: #415868;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}




.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
line-height: 0 !important;
}

.h3, h3{
    font-size: calc(0.8rem + .6vw) !important;
}


.ArticlesSpanClass{
    font-size: 16px;
}


.ArticlesViewCoverPicture{
    position: relative;
    top:25%;
    left: 20%;
}

.ArticlesBodyTxtClass{
    position: relative;
    width: 99%;
    text-align: justify;
}


#ArticlesContID h6{
    margin-bottom: 0;
    font-weight: 100;
}

.col-sm-8{
    max-width: 99% !important;
    width: 99% !important;
}

#ArticlesBodyTxtContID{
    width: 93%;
    margin: auto;
}



.Home-Articles-item-description{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.Home-Articles-item-description p{
    padding-right: 20px;
}


.Home-all-Articles-item{
    margin-bottom: 30px;
    padding-left: 230px;
    border-bottom: 1px solid #7298c4;
    position: relative;
    min-height: 110px;
    overflow: hidden;
}




  section {
    display: block;
  }
  
  .wrapper {
    width: 100%;
    clear: both;
  }
  
  .code-example {
    padding-top: 0;
  }
  
  .codecontainer {
    margin: 0 auto;
    width: auto;
    max-width: 1020px;
    list-style: none;
    zoom: 1;
  }
  .codecontainer:before, .codecontainer:after {
    content: "";
    display: table;
  }
  
  .codecontent {
    width: auto;
    padding: 3em 2em;
  }
  
  .browser__toolbar {
    width: 100%;
    height: 28px;
    line-height: 28px;
    position: relative;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    background-color: #E7E7E7;
  }
  .browser__body {
    font: normal 1em monospace;
    background-color: #FCFCFC;
    border: 1px solid #E7E7E7;
  }
  
  .toolbar__control,
  .toolbar__control:before,
  .toolbar__control:after {
    width: 12px;
    height: 12px;
    background-color: #FFF;
    border-radius: 50%;
    display: inline-block;
  }
  
  .toolbar__control {
    position: relative;
    margin-left: 26px;
    margin-top: 7px;
  }
  .toolbar__control:before, .toolbar__control:after {
    content: "";
    position: absolute;
    top: 0;
  }
  .toolbar__control:before {
    left: -120%;
  }
  .toolbar__control:after {
    right: -120%;
  }
  
  .codeicon {
    color: #a2a2a2;
    line-height: 28px;
    margin-right: 12px;
    margin-top:5px;
    float: right;
  }

  .js{
    position: relative;
    left: 2rem;
  }
  .js span{
    line-height: 25.5px;
  }
  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    line-height: 1.2 !important;
  }
  
  .hljs-comment {
    color: #93A1A1;
  }
  
  .hljs-built_in {
    color: #268BD2;
  }

  .hljs-includes {
    color: #0000ff;
  }


   .hljs-includes-red {
    color: #fc0324;
  }
  
  .hljs-keyword {
    color: #859900;
  }

  .hljs-void {
    color: #4d4df7;
  }

   .hljs-OnTick {
    color: #8a2be2;
  }


  
  .hljs-params {
    color: #6C71C4;
  }
  
  .hljs-string {
    color: #2AA198;
  }


  
  



  #ArtLowHead_left:hover {
   cursor: pointer;
   opacity:1 !important;
}

 #ArtLowHead_right:hover {
   cursor: pointer;
   opacity:1 !important;
}
/* ---Commenting Section Style */

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
  body { font-family: 'Inter', sans-serif; }
  
  .comment-thread {
      border-left: 2px solid #e5e7eb;
      margin-left: 1rem;
      padding-left: 1rem;
  }
  
  .comment-fade-in {
      animation: fadeIn 0.3s ease-in;
  }
  
  @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
  }
  
  .reply-form {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
  }
  
  .reply-form.active {
      max-height: 300px;
      max-width: 360px;
  }

  .clk_2{
    background-color: #2563eb;
    font-size: 0.92em;
    margin: 0 0.4rem 0 0.4rem;
    color: white;
    width: 4rem;
  }



*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:0.5rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-3{margin-left:0.75rem}.ml-4{margin-left:1rem}.mt-2{margin-top:0.5rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.flex{display:flex}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.min-h-screen{min-height:100vh}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.max-w-4xl{max-width:56rem}.flex-1{flex:1 1 0%}.resize-none{resize:none}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.75rem * var(--tw-space-x-reverse));margin-left:calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22 / var(--tw-bg-opacity, 1))}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-relaxed{line-height:1.625}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.hover\:text-blue-700:hover{--tw-text-opacity:1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.focus\:border-transparent:focus{border-color:transparent}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity, 1))}@media (min-width: 640px){.sm\:p-6{padding:1.5rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}}@media (min-width: 1024px){.lg\:p-8{padding:2rem}}


  
/* ---Commenting Section Style */

/* ---Scrolling btn scroll Section Style Start */

.scroll-btn {
    position: fixed;
    right: 20px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background:#7398c4;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s, transform 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000;
}

/* Separate vertical positions */
#scrollTopBtn { bottom: 80px; }
#scrollCommentsBtn { bottom: 20px; font-size: 20px; }

.scroll-btn.show {
    opacity: 1;
    pointer-events: auto;
}

.scroll-btn:hover {
    transform: scale(1.1);
}


/* ---Scrolling btn scroll Section Style End */

/* ========================= Responsive Starts ============================== */


  
@media only screen and (max-width: 1010px) {
   
    .container-fluid{
        width: 80% !important;
    }
    
}




  
@media only screen and (max-width: 901px) {
   
  .Home-all-Articles-item{
      padding-left: 0px!important;
  }
  
}


  
@media only screen and (max-width: 680px) {
   
    #SuggItemsContID{
       flex-direction: column;
    }




    
}


  
@media only screen and (max-width: 600px) {
   
    .container-fluid{
        width: 80% !important;
    }

    .Home-all-Articles-item{
        padding: 0;
        padding-top:0em;

    }

    .Home-Articles-item-description{
      flex-direction: column-reverse !important;      
  }

    
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
        line-height: 1.2 !important;
    }
    


    .ArticlesViewCoverPicture{
        left: 0;
    }

    
}




  
@media only screen and (max-width: 450px) {
   
    .container-fluid{
        width: 99% !important;
    }




    
}




  
/* ========================= Responsive Ends ============================== */