:root{ --bg-color-fair:#f9f9fb; --bg-color-white:#fff; --txt-color-normal:#535151; --txt-color-dark:#070707; --color-main:#AA0882; --color-dim-white: #dedede; --color-main2: #D59951; --main-color3: #433978; --main-color4: #C3595B; --light-white:#e1e1e1; --hd--darkcolor:#535151; --lighter-black:#888686; --white-hovercl:#e6e3e3; --shadow-color:#bab9b9; } .all_ico{ width: 20px; height: 20px; display: inline-block; box-sizing: border-box; color: inherit; } #notif_box { position: fixed; height: auto; background-color: var(--bg-color-fair); color: black; z-index: 300; display: none; left: 0px; width: 100%; min-width: 200px; padding-bottom: 50px; bottom: 0px; box-sizing: border-box; padding-top: 7px; text-align: center;}  #cancl:hover, #cancl:focus, #cancl:active{background-color:va (--color-dim-white);}  #ok{ height: auto; width: 100px; border-radius: 4px; padding: 10px; left: 20px; position: relative; margin:auto; bottom: 4px; cursor: pointer; font-weight: bold; font-size: 14px; color: va (--color-dim-white); background-color: var(--main-color3); box-sizing: border-box; border: none; outline: none; } body { font-family: 'Fira Sans Condensed', sans-serif; margin: 0px; box-sizing: border-box; } h1{ position: relative; font-family: 'Acme', sans-serif;   } .page-text{ color: var(--txt-color-normal); box-sizing: border-box; text-align: left; font-family: 'Roboto Condensed', sans-serif;  font-size: 1.2rem; line-height: 2; max-width: 99%;  padding: 10px; }   /* news letter box styling. */ .data_info_wrapper{ display: flex;  flex-wrap: wrap;  position: relative;  box-sizing: border-box;  width: 100%;  max-height: 450px;  height: auto;  justify-content: center; align-items: center;  margin-bottom: 2rem; } .data_info_img_wrap{ height: 450px;  overflow: hidden;  box-sizing: border-box;  width: 50%;  display: flex; justify-content: center; align-items: center; } 

.data_info_box{ display: flex; align-items: flex-start; width: 50%;  left: -40px; flex-direction: column; position: relative; background-color: var(--bg-color-white); border-radius: 1rem; box-shadow: 0px 0px 20px var(--shadow-color); box-sizing: border-box; padding: 2rem; overflow: hidden; max-width: 90%; cursor: default; } .data_info_header{ font-weight: 600;line-height: 1.1; font-size: 1.6rem; } .n-letter-btn{ font-size: large;  font-weight: bolder;  margin-top: 1rem; background-color: var(--color-main);  color: var(--txt-color-dark);  padding: 7px 1.4rem;  border-radius: 5px; cursor: pointer; } .n-letter-btn:active, .n-letter-btn:hover, .n-letter-btn:focus{ background-color: var(--txt-color-normal); } .news-letter-form{ display: block;  position: relative;  min-width: 70%;  width:280px;  padding: 10px;  border-radius: 10px;  box-sizing: border-box;  align-self: flex-start; height: 40px;  border: 2px solid var(--shadow-color); cursor: text; }   /*search components styling..  */   #search_box_wrap{ display: flex;  background-color: transparent; z-index: 200;  max-width: 550px;  right: 1rem;  width: 0px; height: 40px;  position: absolute;  justify-content: center;  align-items: center; box-sizing: border-box; overflow: hidden; transition: all .5s;   } #search_field{ height:32px; width: 100%; min-width: 100%; overflow: hidden; color: var(--main-color3); box-sizing: border-box; background-color: rgb(224, 224, 224); Padding-left: 0.5rem; padding-right: calc(0.5rem + 60px); font-size: 18px; z-index: 140; border-radius: 8px; outline: none; border: none; transition: .5s; } #submit{ height:28px; width: 60px; position: absolute; box-sizing:border-box; display:block; border: none; cursor: pointer; border: 1px solid var(--main-color3); right: 2px; top: 2px; z-index: 150; border-radius: 6px; outline: none; } #search{ display: flex; justify-content: center; align-items: center; position: relative; background-color: transparent; width: calc(100% - 1rem); box-sizing: border-box; margin-right: 0rem; /* left: 1rem; */ }  #search_icon_holder{ height:30px; width: 30px; overflow: hidden; box-sizing:border-box; display:block; background-color: var(--bg-color-fair); border-radius: 15px; transition: .3s; z-index: 201; cursor: pointer; } #search_icon_holder:hover, #search_icon_holder:active, #search_icon_holder:focus{ background-color: va (--white-hovercl); } #src-holder{ height: 100%;  padding: 3px;  box-sizing: border-box;  color: var(--txt-color-dark); width: 100%;  background-color: inherit;  display: inline-block;  box-sizing: border-box; } #src-and-sd-holder{  display: flex;  height: 40px;   box-sizing: border-box;  position: absolute;  right: calc(1rem + 8px);   background-color: inherit;   justify-content: center;   align-items: center  } 


#s_line{ display: none; position: absolute; width: 300px; height: 1px; background-color: var(--lighter-black); bottom: 2px; right: 7px; } #s_cover{ position: fixed; height: 100%; width: 100%; background-color: #f9f4f44d; left: 0px; display: none; top: 0px; opacity: 0.9; z-index: 120; }   /* side bar component stylings.. */ #side_bar_content{ position: fixed; height: 100%; width: 0%; box-sizing: border-box; max-width: 80%; background-color: var(--main-color3); left: 0px; top: 0px; padding: 0px; font-size: x-large; font-weight: bolder; text-transform: capitalize; box-sizing: border-box; overflow: hidden; display: block;  z-index: 200; transition: .3s; } .side_bar_article{  text-decoration: none;  color: var(--bg-color-fair); height: 50px; margin-bottom: 300px; width: 100%; z-index:100; box-sizing: border-box;  text-decoration: none;  } .side_bar_he{ margin: 18px; box-sizing: border-box; font-size: 1.1rem; height: fit-content; padding-top: 4px; overflow: hidden; color: var(--bg-color-white); transition: .3s;  } .side_bar_he:hover, .side_bar_he:active, .side_bar_he:focus{ color: var(--white-hovercl); transform: scale(0.9); } #side_bar{ height: 40px; display: none; width: 40px; outline: none; border-radius: 20px; background-color: var(--bg-color-fair); box-sizing: border-box; transition: .3s; z-index: 205; cursor: pointer; } #side_bar:hover, #side_bar:active, #side_bar:focus{ background-color: var(--white-hovercl); }  #sb_icon1{ position: relative; display: block; height: 4px; width: 25px; background-color: var(--lighter-black); margin: 10px auto 2px auto; border-radius: 2px; transition: .3s; } #sb_icon2{ position: relative; display: block; height: 4px; width: 25px; background-color: var(--lighter-black); margin: 4px auto 2px auto; border-radius: 2px; transition: .3s; } #sb_icon3{ position: relative; display: block; height: 4px; width: 25px; background-color: var(--lighter-black); margin: 4px auto 10px auto; border-radius: 2px; transition: .3s; }  #cover{ position: fixed; height: 100%; width: 100%; background-color: #a6a6ba2f; left: 0px; display: none; top: 0px; opacity: 0.9; z-index: 80; } #sidebar_cont{ position: absolute; width: 100%; height: auto; bottom: 70px; font-size: medium; font-weight: 50px; text-align: center; background-color: transparent; left: 0px; } .sidebar_icons{ position: relative; display: inline-block; background-color: transparent; width: 30px; padding-top: 5px; height: 25px; margin: 5px 7px 5px 7px; } /* my_header styling */ #base_header { position: fixed; width: 100%; height: 70px; z-index: 100; background-color: var(--bg-color-white); right: 0px; left: 0px; top: 0px; transition: .3s; } #pg-top-img{ width: 100%; height: auto; } @import url('https://fonts.googleapis.com/css2?family=Akronim&display=swap'); #site_name{ height: 40px; width: auto;  display: flex;  justify-content: center;  align-items: center; font-size: 1.7rem !important; font-style: italic; /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */ /* font-family: 'Bad Script', cursive; */ font-family: 'Akronim', cursive; margin-left: 0.5rem; font-weight: bold; overflow: hidden; color: var(--color-main); transition: .3s; } #st_icon{ height: 40px;  display: inline-block; background-color: transparent; width: auto; } .logo_wrap{ height: 40px; border-radius: 20px; background-color: var(--main-color);  width:40px; justify-content: center;  align-items: center;overflow: hidden; } #sb-sn-box{ display: flex; box-sizing: border-box; height: 100%; justify-content: center; align-items: center; margin-left: 1rem; background-color: transparent; }   /* navigation styling starts here.. */ .my_nav_links { text-transform: capitalize; position: relative; width: fit-content; display: inherit; font-size: 1.1rem; font-weight: lighter; height: 100%; overflow: hidden; padding: 10px; white-space: nowrap; text-overflow: ellipsis; z-index: 31; margin: 0px 5px 0px 5px; color: var(--txt-color-normal); background-color: transparent; border: none; outline: none; box-sizing: border-box; cursor: pointer; } .nav_a_tag { text-decoration: none; color: var(--txt-color-normal); } .my_nav_links:hover, .my_nav_links:active, .my_nav_links:focus{ color: var(--main-color4); } #my-nav-hug{ position: relative;  width: 100%;  display: flex; align-items: center; justify-content: flex-start; background-color: transparent;  height: 70px; box-sizing: border-box; margin: auto;  max-width: 1200px; } #my-navbar { z-index: 30; background-color: transparent; top: 0px;  display: flex; justify-content: space-evenly; height: 70px; margin-left: 1rem; gap: 1rem; padding: 0px 1rem; width: auto; box-sizing: border-box; } #my_sect_body{ margin: auto; display: block; position: relative; width: 100%; height: auto; min-height: 100%; min-width: 100%; max-width: 1750px; text-align: center; background-color: var(--bg-color-white); box-sizing: border-box; padding-top: -80px; } #page-wrap{ width: 100%;  height: auto;  min-height: 600px;  box-sizing: border-box; display: flex;  gap: 5rem;  flex-direction: column; align-items: center;  max-width: 1200px; margin:1rem auto; position: relative;   } article{ background-color: inherit; } a{ text-decoration: none; color: inherit; } #page-header{ position: relative; width: 100%; left: 0px; height: auto; box-sizing: border-box; text-align: left; font-size: xx-large; margin: 1rem auto; color: var(--hd--darkcolor); padding: 1rem 0rem 0rem 1rem; display: block; } i{ color: var(--hd--darkcolor); font-size: smaller;  font-weight: bolder; display: block; text-align: left; padding: 0px 0px 0.4rem 1.2rem; position: relative; } h2{ box-sizing: border-box; margin: 2.4rem auto 0.3rem auto; } .clamp4{ overflow: hidden; text-overflow: ellipsis; white-space: initial; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } #direction-wrap{ position: relative; display: flex; font-weight: bolder; font-size: 13px; box-sizing: border-box; gap: 0.6rem; flex-wrap: wrap; justify-content: left; align-items: center; margin: 1rem; } #dir-wrap-cnt{ position: relative; display: flex; background-color: transparent; font-weight: bolder; font-size: 13px; box-sizing: border-box; gap: 0.6rem; justify-content: center; align-items: center; text-shadow: 0px 0px 1px var(--color-main2); color: var(--bg-color-white); } .hidden-line{ visibility: hidden; } .line{ width: 95%; height: 2px; box-sizing: border-box; display: block; margin: 1rem auto; background-color: var(--shadow-color); } .stk_box{ position: sticky; top: 80px; width: 100%; box-sizing: border-box; height: auto; display: block; background-color: inherit;   }   #direction-wrap{ position: relative; display: flex; font-weight: bolder; font-size: 13px; box-sizing: border-box; width: 100%; max-width: 900px; margin: 1rem auto 0px auto; gap: 0.6rem; flex-wrap: wrap; justify-content: left; align-items: center; color: var(--color-main);   }   /* text pages.. */   .cont-hd{ position: relative; width: 100%; left: 0px; line-height: 1.2; height: auto; box-sizing: border-box; text-align: left; font-size: 1.9rem; margin: 2rem auto 0.5rem 0rem; color: var(--hd--darkcolor); padding: 0rem; display: block;   }   .txt{ max-width: 900px; margin-top: 0px;   }   #page-txt{ padding: 1rem;  line-height: 1.8;  text-align: left;  font-family: 'Roboto Condensed', sans-serif;  font-size: 1.05rem;  max-width: 100%;  box-sizing: border-box; color: var(--hd--darkcolor); } #page-hd{ position: relative; width: 100%; left: 0px; height: auto; box-sizing: border-box; max-width: 600px; text-align: left; font-size: 2.3rem; line-height: 1.2; margin-top: 0px; color: var(--hd--darkcolor); display: block; } #page-top-wrap{ position: relative; display: flex; width: 100%; height: 300px; max-height: 300px !important; justify-content: center; align-items: center; background-color: var(--main-color4); left: 0px; margin: auto; flex-direction: column; gap: 1rem; } #page-content{ display: block; box-sizing: border-box; position: relative; margin: auto; width: 100%; max-width: 900px; height: auto;   } .bg-page-hd{ position: relative; width: 100%; left: 0px; height: auto; box-sizing: border-box; font-weight: 900; width: 100%; margin: auto; text-align: center; background-color:transparent; font-size: xxx-large; margin: 1rem auto; color: var(--light-white); padding: 1rem 0rem 0rem 1rem; display: block; } #pg-tp-img{   width: 100%;   height: auto; } #page-top-imghug{   display: flex;   position: absolute;   overflow: hidden;   height: 100%;   width: 100%;   left: 0px;   top: 0px;   box-sizing: border-box;   justify-content: center;   align-items: center; background-color: var(--main-color3);  } #page-top-imghug::after{   content: '';   position: absolute;   display: block;   top: 0px;   left: 0px;   background-color: var(--main-color3);   width: 100%;   height: 100%;   opacity: .5; } .st_btn{   width: auto;   background-color: var(--color-main);   color: var(--color-dim-white); font-size: 1.1rem; font-weight: bolder;   padding: 0.4rem 3.5rem;   border-radius: 2rem;   box-sizing: border-box;   height: auto;   transition: .4s;   display: flex;   justify-content: center;   align-items: center;   align-self: center;   margin: auto;   cursor: pointer; } .st_btn:active, .st_btn:hover, .st_btn:focus{   color: var(--color-main2);   background-color: var(--main-color3); }   @media screen and (max-width: 950px){   #my-navbar{   display: none; } #side_bar{   display: block;} } @media screen and (max-width: 680px) { #pg-top-img{ width: auto; height: 100%; }   } @media screen and (max-width:550px){ #direction-wrap{ padding-left: 1rem;} #dir-wrap-cnt{ flex-wrap: wrap; } .bg-page-hd{ font-size: xx-large; padding: 0.5rem 1.5rem; line-height: 1.2; }  .data_info_wrapper{ width: 100%;  max-width: 100% !important; max-height: none;  justify-content: center; align-items: center;  flex-direction: column; box-sizing: border-box; } .data_info_img_wrap{ width: 100%;  height: auto; } .data_info_img{ width: 100%; height: auto; } .data_info_box{ align-items: center; width: 88%;  max-width: none; left: auto; top: -60px; padding: 1rem; } .news-letter-form{ margin: auto;  width: 80%;  align-self: center; } .data_info_header{ font-weight: 700; font-size: 1.4rem; }   } @media screen and (max-width:450px){ #pg-tp-img{ width: auto; height: 100%; } .njiko-box-title{ -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 65px; font-size: 1.05rem; margin: 3px auto 0px 0px; } } @media screen and (max-width:282px){ #dir-wrap-cnt a, #dir-wrap-cnt span{ font-size: 0.6rem; } .tst_box_wrap{ height: 260px; width: 96%;   }  ul{ margin: auto; list-style-type: none; margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; box-sizing: border-box;  }  .hidden-line{  display: none !important;  }  #page-header{  margin: 0px !important;  }  .bg-page-hd{ font-size: 1.3rem; padding: 1rem; word-wrap: normal;  word-break: keep-all; box-sizing: border-box; } i{ font-size: 12px !important; padding-left: 0px !important; } #_nm{font-size: 1.4rem;} } @media screen and (max-width:225px){ #_nm{display: none;} body{ word-break: break-all; } } @media screen and (max-width:150px){ .bg-page-hd{ word-break: break-all; } }