/*---------------------------
[Template Structure]

Project:	 AlorPoth
Version:	 1.0
Primary Use: App Template 
Layout:      Responsive
Platforms:   Mobile & Tablet
-----------------------------


@charset "UTF-8";

/* 1. General */


:root[data-applied-mode="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bgd: #1d84a7;
  --text: #004DA8;
  --textp: #000000;
  --ftext: #02457a;
  --bgpre: #ffffff;
  --dtext: #000000;
  --drpha: #747474;
  --icon: #000000;
  --submit: #232323;
  --span: #000000;
  --scr: linear-gradient(95.2deg, rgba(173,252,234) 26.8%, rgba(192,229,246,1) 64% );
  --ftc: #fff;
  --bshadow1: #b0e0e6;
  --bxbb: #5D8AA8;
  --bxbbp: #5D8AA8;
  --bxbbtp: #0095B6;
  --bxbbg: #FFFFFF;
  --bxbfbg: #F6F7F9;
  --bxbpbg: #F6F7F9;
  --bxbptbg: #F6F7F9;
  --drftt: #008080;
  --drktt: #560319;
  --drvtt: #003366;
  --rdt: #9D120A;
  --flpt: #191970;
  --flpb: #20b2aa;
  --drgtt: #83251F;
  --butmt: #ffffff;
  --butmod: #2193b0;
  --test-butmod: #085078;
  --tsbg: #EAFDFC;
  --butmodbgl: repeating-linear-gradient(-45deg, rgba(5, 175, 242, 0.3), rgba(5, 175, 242, 0.3) 2px, rgba(5, 199, 242, 0.02) 2px, rgba(5, 199, 242, 0.02) 10px), linear-gradient(135deg, transparent, rgba(5, 199, 242, 0.001));
  --input-border: #1d84a7;
  --shadow1: #bebebe;
  --submit-shadow: #000;
  --shadow2: #e0e9f5;
  --gradient: #ffffff;
  --bgl: none;
}


:root[data-applied-mode="dark"] {
  color-scheme: dark;
  --bg: #1D2733;
  --bgd: #0F1823;
  --text: #7CC3FB;
  --textp: #f5fffa;
  --ftext: #ccc;
  --bgpre: #1D2733;
  --dtext: #fff;
  --drpha: #b0c4de;
  --icon: cyan;
  --submit: rgb(255, 0, 98);
  --span: #E8EDF0;
  --scr: linear-gradient(95.2deg, rgba(173,252,234,0.2) 26.8%, rgba(192,229,246,0.2) 64% );
  --ftc: #F8F9FB;
  --bshadow1: #000;
  --bxbb: #13719E;
  --bxbbtp: #4EB2EB;
  --bxbbp: #4EB2EB;
  --bxbbg: #1D2733;
  --bxbfbg: #01232C;
  --bxbpbg: #0E1623;
  --bxbptbg: #1F3253;
  --drftt: #CCDDFB;
  --drktt: #00BFFF;
  --drvtt: #7CC3FB;
  --rdt: #CCDDFB;
  --flpt: #48d1cc;
  --flpb: #20b2aa;
  --drgtt: #5AB9EA;
  --butmt: #87cefa;
  --butmod: #1D2733;
  --tsbg: #1D2733;
  --butmodbgl: repeating-linear-gradient(-45deg, rgba(5, 175, 242, 0.1), rgba(5, 175, 242, 0.1) 2px, rgba(5, 199, 242, 0.02) 2px, rgba(5, 199, 242, 0.02) 10px), linear-gradient(135deg, transparent, rgba(5, 199, 242, 0.001));
  --input-border: rgba(0, 0, 0, 0.1);
  --shadow1: #1A1B1F;
  --shadow2: #000;
  --submit-shadow: rgb(17, 21, 28);
  --gradient: linear-gradient(70deg, #5AB9EA, #68C5DB, #5AB9EA, #68C5DB);
  --bgl: none;
}


:root[data-applied-mode="bright"] {
  color-scheme: bright;
  --bg: #8A307F;
  --bgd: linear-gradient(135deg, #61045f 0%, #61045f 100%);
  --text: #b6fbff;
  --textp: #fff;
  --ftext: #fff;
  --bgpre: #8A307F;
  --dtext: #fff;
  --drpha: #C2CAD0;
  --icon: rgb(255, 0, 106);
  --submit: #0ff;
  --span: #fff;
  --scr: linear-gradient(95.2deg, rgba(173,252,234,0.3) 26.8%, rgba(192,229,246,0.3) 64% );
  --ftc: #F8F9FB;
  --bshadow1: #191970;
  --bxbb: #2bc0e4;
  --bxbbp: #2bc0e4;
  --bxbbtp: #2bc0e4;
  --bxbbg: #800080;
  --bxbfbg: #234E70;
  --bxbpbg: linear-gradient(135deg, #61045f 0%, #800080 100%);
  --bxbptbg: linear-gradient(135deg, #61045f 0%, #800080 100%);
  --drftt: #87cefa;
  --drktt: #ffdde1;
  --drvtt: #68C5DB;
  --rdt: #f5fffa;
  --flpt: #afeeee;
  --flpb: #afeeee;
  --drgtt: #87cefa;
  --butmt: #fff;
  --butmod: #5f2c82;
  --tsbg: linear-gradient(135deg, #61045f 0%, #800080 100%);
  --butmodbgl: repeating-linear-gradient(-45deg, rgba(5, 175, 242, 0.1), rgba(5, 175, 242, 0.1) 2px, rgba(5, 199, 242, 0.02) 2px, rgba(5, 199, 242, 0.02) 10px), linear-gradient(135deg, transparent, rgba(5, 199, 242, 0.001));
  --input-border: rgba(0, 0, 0, 0.1);
  --shadow1: rgba(187, 187, 187, 0.1);
  --shadow2: rgba(0, 0, 0, 0.35);
  --submit-shadow: rgba(0, 0, 0, 0.365);
  --gradient: linear-gradient(70deg, #26d962, #ffffff, #00ffff, #26d962, #2680d9 );
  --bgl: repeating-linear-gradient(-45deg, rgba(5, 175, 242, 0.1), rgba(5, 175, 242, 0.1) 2px, rgba(5, 199, 242, 0.02) 2px, rgba(5, 199, 242, 0.02) 10px), linear-gradient(135deg, transparent, rgba(5, 199, 242, 0.001));
}



.headermode {
     
    margin-top: 3px;
    margin-right: 6px; 
    font-size: 16px; 
  text-align: right;
  font-weight: 500;
  background: var(--gradient);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;

}


.righth {
float: right;
margin-right: 3px;
margin-top: 12px;
}



.buttonthe {
  cursor: pointer;
  width: fit-content;
  margin-right: 8px;
  margin-top: 10px;
  font-size: 16px;
 float: right;

  width: 87px;
  text-align: right;
  font-weight: 600;
  background: var(--gradient);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}




.go-top {
  cursor: pointer;
}





html {
  box-sizing: border-box;
line-height:20px;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.table-scroll {
  position:relative;
  width:100%;
  z-index: 2;
  margin: auto;
  overflow: auto;
  height: 360px;
  border: 1px solid #005AA7;
}
.table-scroll table {
  width: 100%;
  min-width: 760px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.table-wrap {
  position: relative;
}
.table-scroll th,
.table-scroll td {
  padding: 9px 10px;
    border-right: 1px solid #fffcdc;
    border-bottom: 1px solid #fffcdc;
    box-shadow: 0 0 2px 2px rgba(58, 119, 255, 0.15), 0 0 15px 5px rgba(58, 119, 255, 0.15);
  background: #EAFDFC;
  color: #0A2647;
  vertical-align: top;
  text-align:center;
  font-size:17px;
  font-weight: 500;
  text-indent:7px;
}
.table-scroll thead th {
  background: #0E8388;
  color: #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index:4;
}
/* safari and ios need the tfoot itself to be position:sticky also */
.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #FFFFFF;
  color: #0E8388;
  z-index:5;
}



th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 3;
  background: #3F979B;
  color: #ffffff;
    border-bottom: 1px solid #fff;
}
thead th:first-child,
tfoot th:first-child {
  z-index: 6;
}


.table-pos {
  position: fixed;
}

.table-clear{
    height:350px;
}






.doubleclick {
  position: relative;
  overflow: hidden;
}
.doubleclick__layer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.doubleclick__layer-1 {
  background-color: red;
  transition-delay: 0.5s;
  transition-property: transform;
}
.doubleclick__layer-1:focus {
  transform: translateX(-100%);
  transition-delay: 0s;
}
.doubleclick__layer-1:focus + .doubleclick__layer-2 {
  -webkit-animation-name: show;
          animation-name: show;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.doubleclick__layer-2 {
  background-color: green;
  transform: translateX(-100%);
}

@-webkit-keyframes show {
  from {
    transform: none;
  }
  to {
    transform: none;
  }
}

@keyframes show {
  from {
    transform: none;
  }
  to {
    transform: none;
  }
}


.focus-within:focus-within .element {
  color: #28a745;
}






/* Buttons */

button
{
  padding:5px 7px;
  overflow:hidden;
  position:relative;
  font-weight: 600;
  z-index:0;
  font-size:14px;
  font-family:inherit;
  color: var(--butmt)!important;
  border:none;
    background-color: var(--butmod)!important;
    background-image: var(--butmodbgl)!important;
  border-radius: 6px;
  box-shadow:0 0 0 rgba(0,0,0,0.5);
  cursor:pointer;
  outline:none;
  transition:all 150ms ease;
  transform:translate3d(0,0,0);
  -webkit-font-smoothing:antialiased;
}

button::-moz-focus-inner { border:0; }

.keyboardfocus button:focus,
button:hover
{
  box-shadow:0.175em 0.175em 0 rgba(0,0,0,0.15);
  transform:translate(-0.105em,-0.105em);
}

button:active
{
  background:#42454e;
  box-shadow:0 0 0 rgba(0,0,0,0.5);
  transform:translate3d(0,0,0);
  transition-duration:50ms;
}

/* Colours */

.button_action { background:#03a0e0; }
.button_action:active { background:#0387bf; }

.button_affirm { background:#84ba0a; }
.button_affirm:active { background:#6f9e09; }

.button_danger { background:#e34704; }
.button_danger:active { background:#c5471d; }

/* Ripple */

.button_ripple
{
  display:block;
  width:0;
  height:0;
  margin:-1em;
  position:absolute;
  z-index:-1;
  top:50%;
  left:50%;
  border:1em solid black;
  border-radius:1em;
  -webkit-animation-name:ripple;
          animation-name:ripple;
  -webkit-animation-duration:500ms;
          animation-duration:500ms;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
  -webkit-animation-timing-function:ease-out;
          animation-timing-function:ease-out;
  opacity:0;
}

@-webkit-keyframes ripple
{
  0%
  {
    transform:scale(1);
    opacity:0.5;
  }
  100%
  {
    transform:scale(5);
    opacity:0;
  }
}

@keyframes ripple
{
  0%
  {
    transform:scale(1);
    opacity:0.5;
  }
  100%
  {
    transform:scale(5);
    opacity:0;
  }
}

/* Icons */

.icon
{
  display:inline-block;
  width:0.75em;
  height:0.75em;
}

.icon_svg
{
  display:block;
  width:100%;
  height:100%;
}

.icon_svg path
{
  fill:currentColor;
}








body{

    
}

.bg-blue1{      background-color:#3498db!important;  }
.bg-blue2{      background-color:#2980b9!important;  }
.bg-magenta1{   background-color:#9b59b6!important;  }
.bg-magenta2{   background-color:#8e44ad!important;  }
.bg-dark1{      background-color:#34495e!important;  }
.bg-dark2{      background-color:#2c3e50!important;  }
.bg-green1{     background-color:#2ecc71!important;  }
.bg-green2{     background-color:#27ae60!important;  }
.bg-red1{       background-color:#e74c3c!important;  }
.bg-red2{       background-color:#c0392b!important;  }
.bg-teal1{      background-color:#1abc9c!important;  }
.bg-teal2{      background-color:#16a085!important;  }
.bg-yellow2{    background-color:#f39c12!important;  }
.bg-yellow1{    background-color:#f1c40f!important;  }
.bg-orange1{    background-color:#d35400!important;  }
.bg-orange2{    background-color:#e67e22!important;  }

.text-blue1{      color:#3498db!important;  }
.text-blue2{      color:#2980b9!important;  }
.text-magenta1{   color:#9b59b6!important;  }
.text-magenta2{   color:#8e44ad!important;  }
.text-dark1{      color:#34495e!important;  }
.text-dark2{      color:#2c3e50!important;  }
.text-green1{     color:#2ecc71!important;  }
.text-green2{     color:#27ae60!important;  }
.text-red1{       color:#e74c3c!important;  }
.text-red2{       color:#c0392b!important;  }
.text-teal1{      color:#1abc9c!important;  }
.text-teal2{      color:#16a085!important;  }
.text-yellow2{    color:#f39c12!important;  }
.text-yellow1{    color:#f1c40f!important;  }
.text-orange1{    color:#d35400!important;  }
.text-orange2{    color:#e67e22!important;  }

.facebook-color{    background-color:#3b5998;    color:#FFFFFF;}
.twitter-color{     background-color:#4099ff;    color:#FFFFFF;}
.google-color{      background-color:#d34836;    color:#FFFFFF;}
.pinterest-color{    background-color: #818A2F;    color:#FFFFFF;}
.sms-color{         background-color:#27ae60;    color:#FFFFFF;}
.mail-color{        background-color:#3498db;    color:#FFFFFF;}


/*Fullscreen Slider Image*/
.slider-image-1{background-image:url(../images/pictures/3.jpg);}
.slider-image-2{background-image:url(../images/pictures/1.jpg);}
.slider-image-3{background-image:url(../images/pictures/5.jpg);}

/*Background for fullscreens*/

.bg1{
    background-image:url(../images/pictures/1.jpg);   
    background-position:center center;
}

.bg2{
    background-image:url(../images/pictures/2.jpg);   
    background-position:center center;
}

.bg3{
    background-image:url(../images/pictures/3.jpg);   
    background-position:center center;
}

.bg4{
    background-image:url(../images/pictures/4.jpg);   
    background-position:center center;
}

/*Styles*/

.header{
    position:fixed;
    width:100%;
    z-index:98;
    padding-left:9px;
    padding-right:9px;
    padding-top:2px;
    padding-bottom:2px;
    background: var(--bgd);
}

.header-clear{
    height:74px;
}


.scroll-line {
  height: 2px;
  margin-top: 70px;
  margin-bottom: -2px;
  background: var(--scr);
  width: 0%;
}


.header .decoration{
    margin-bottom:0px;
}

.header-logo {
    width: 145px;
    height: 70px;
    background-size: 145px 70px;
    background-image: url(../images/header-logo3.png);
    /*! margin-top: 0px; */
    float: left;
    background-repeat: no-repeat;
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 34px;
    height: 34px;
    min-width: 34px;
    margin: 20px 2px 0 6px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 16px;
}

.header-icons{
    height:70px;
    padding-top:16px;
    padding-right:5px;
    width:125px;
    float:right;
    margin-bottom:0px;
}

.header-icons a{
    float:right;
    width:30px;
    height:30px;
    margin-left:10px;
    border-radius:30px;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.header-icons a:hover{
    -moz-transform: scale(1.15,1.15)!important;
    -webkit-transform: scale(1.15,1.15)!important;
    -o-transform: scale(1.15,1.15)!important;
    -ms-transform: scale(1.15,1.15)!important;
    transform: scale(1.15,1.15)!important;
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.header-icons a i{
    font-size:12px;
    line-height:30px;
    width:30px;
    text-align:center;
    color:#FFFFFF;
}


#preloader {

background: var(--bgpre)!important;
}


#status {

color: var(--dtext)!important;
}


.fade-animation {
    -webkit-animation-name: fade-in-up;
    animation-name: fade-in-up;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fade-in-up {
0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
}
75% {
    opacity: 0.9;
}
100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
}

@keyframes fade-in-up {
0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
}
75% {
    opacity: 0.9;
}
100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
}







.bxb {
 margin-top:13px;
 margin-bottom:13px;
 margin-left:1px;
 margin-right:1px;
 padding-top:10px;
 padding-bottom:10px;
 padding-left:5px;
 padding-right:5px;
 border-left: 2px solid var(--bxbb);
 border-right: 0.775px solid var(--bxbb);
 border-radius: 8px;

background: var(--bxbbg);

box-shadow: 
        inset 0px 11px 8px -10px rgba(0, 0, 0, 0.16),
        inset 0px -11px 8px -10px rgba(0, 0, 0, 0.16); 

}


.bxbf {
 margin-top:13px;
 margin-bottom:13px;
 margin-left:1px;
 margin-right:1px;
 padding-top:10px;
 padding-bottom:10px;
 padding-left:5px;
 padding-right:5px;
 border-left: 2px solid var(--bxbb);
 border-right: 0.775px solid var(--bxbb);
 border-radius: 8px;
 background: var(--bxbfbg);
 box-shadow: inset 0px 11px 8px -10px rgba(0, 0, 0, 0.16),
inset 0px -11px 8px -10px rgba(0, 0, 0, 0.16); 
}

.ha {
color:#0b8043;
text-align:justify;
font-size:16px;
line-height:20px;
margin-top:2px;
margin-right:2px;
margin-bottom:5px;
margin-left:2px;
}


.rgt {
color:#c75900;
text-align:right;
font-size:15px;
text-indent:0px;
line-height:19px;
margin-top:4px;
margin-right:2px;
}


/* Arabic script fonts - AlQuranIndoPak (QuranWBW) is the primary
   display face; Noorehuda, Uthmanic Hafs (King Fahd Complex Qur'an
   typeface) and Droid Naskh are fallbacks, in that order. unicode-range
   keeps these scoped to Arabic codepoints only, so Bengali text sharing
   the same element is unaffected. */
@font-face {
    font-family: 'AlQuranIndoPak';
    src: url('../fonts/AlQuranIndoPakbyQuranWBW.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
    font-family: 'Noorehuda';
    src: url('../fonts/noorehuda.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
    font-family: 'ArabicDisplay';
    src: url('../fonts/UthmanicHafs1_Ver09.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
    font-family: 'DroidNaskh';
    src: url('../fonts/DroidNaskhRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* Bangla body font - Kalpurush. Self-hosted (rather than the remote
   fonts.maateen.me / kriti.app URLs) so it still loads with no network
   connection, consistent with every other font in this project. No
   unicode-range restriction here: this is the general site font, not
   scoped to a script the way the Arabic faces above are. */
@font-face {
    font-family: 'Kalpurush';
    src: url('../fonts/kalpurush.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Kalpurush', Arial, sans-serif !important;
}

.drft {
color: var(--drftt);
text-align:right;
direction: rtl;
font-family: 'AlQuranIndoPak', 'Noorehuda', 'ArabicDisplay', 'DroidNaskh', serif;
font-size:26px;
line-height:46px;
font-weight: normal;
margin-right:4px;
}

.drkt {
color: var(--drktt);
text-align:left;
font-family: 'AlQuranIndoPak', 'Noorehuda', 'ArabicDisplay', 'Kalpurush', sans-serif;
font-size:19px;
line-height:26px;
margin-left:4px;
}

.drvt {
color: var(--drvtt);
text-align:left;
font-family: 'AlQuranIndoPak', 'Noorehuda', 'ArabicDisplay', 'Kalpurush', sans-serif;
font-size:19px;
line-height:26px;
margin-left:4px;
}




.flp {
color:var(--flpt);
font-size:16px;
line-height:20px;
border-top:1px solid var(--flpb);
margin-top:8px;
padding-top:8px;
margin-bottom:7px;
}


.dha {
color:#0b8043;
text-align:justify;
font-size:16px;
line-height:20px;
margin-left:3px;
margin-bottom:3px;
}



.rd {
color:var(--rdt);
margin-top:20px;
font-size:18px;
font-weight: 500;
}





.drgt {
color: var(--drgtt);
text-align:left;
font-family: 'AlQuranIndoPak', 'Noorehuda', 'ArabicDisplay', 'Kalpurush', sans-serif;
font-weight:none;
font-size:16px;
line-height:20px;
margin-left:4px;
}



.bxbp {
 margin-top:11px;
 margin-bottom:11px;
 margin-left:1px;
 margin-right:1px;
 padding-top:14px;
 padding-bottom:14px;
 padding-left:4px;
 padding-right:4px;
 border-left: 2px solid var(--bxbbp);
 border-right: 0.775px solid var(--bxbbp);
 border-radius: 8px;
 background: var(--bxbpbg);

 box-shadow: inset 0px 11px 8px -10px rgba(0, 0, 0, 0.16),
        inset 0px -11px 8px -10px rgba(0, 0, 0, 0.16); 
}


.bxbpt {
 margin-top:11px;
 margin-bottom:11px;
 margin-left:1px;
 margin-right:1px;
 padding-top:14px;
 padding-bottom:14px;
 padding-left:4px;
 padding-right:4px;
 border-left: 2px solid var(--bxbbtp);
 border-right: 0.775px solid var(--bxbbtp);
 border-radius: 8px;
 background: var(--bxbptbg);

 box-shadow: inset 0px 11px 8px -10px rgba(0, 0, 0, 0.16),
        inset 0px -11px 8px -10px rgba(0, 0, 0, 0.16); 
}


.drpt {
color: var(--textp)!important;
text-align:left;
font-size:20px;
line-height:25px;
font-weight: 400;
margin-left:4px;
}

.drpt a {
color: var(--textp)!important;
text-decoration: none!important;
}


.drpt a:hover {
color: var(--drpha)!important;
cursor: pointer!important;
}


.footer {
color: var(--ftc);
background: var(--bgd);

}


.footer a {
color: var(--ftc)!important;
text-decoration: none!important;
}


.footer a:hover {
color: var(--ftc)!important;
cursor: pointer!important;
}







@keyframes text-glow {
  from {
    text-shadow: 0 0 1px #05C7F2;
  }
  to {
    text-shadow: 0 0 5px #05C7F2;
  }
}


@media (max-width: 400px) {
  .container {
    padding: 20px;
  }
}



.fa-solid {
  cursor: pointer;
}

.handle-error {
  border: 1px solid red !important;
  color: red !important;
}

.disable,
.disable + i {
  cursor: not-allowed;
  opacity: 0.2;
}

#error {
  color: red;
  display: none;
  opacity: 0;
  animation: fade 2s ease forwards;
}


/*# sourceMappingURL=style.css.map */



/*Homepage Settings*/

@media(min-width:768px){/*
    .circle-slider{
        width:400px!important;
        margin-left:auto;
        margin-right:auto;
    }*/
}

.homepage-slider{
    margin-top:-35px;
}

.full-slider{
    margin-top:-35px!important;
}

.circle-slider{
    margin-top:-35px!important;
}

.circle-slider div{
    padding-top:10px!important;
}

.circle-slider img{
    width:84%!important;
    margin-left:auto;
    margin-right:auto;
    display:block;
    border-radius:100%;
    border:solid 10px #FFFFFF;
    -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);
            box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease; 
}

.circle-slider img:hover{
    -moz-transform: scale(1.02,1.02);
    -webkit-transform: scale(1.02,1.02);
    -o-transform: scale(1.02,1.02);
    -ms-transform: scale(1.02,1.02);
    transform: scale(1.02,1.02);
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;  
}

.circle-slider div h1{
    text-align:center;
    font-size:20px;
    font-weight:600;
    padding-top:30px;
}

.circle-slider div em{
    display:block;
    text-align:center;
    font-style:normal;
    font-size:12px;
    margin-top:-5px;
}

.circle-slider div p{
    text-align:center;
    padding-left:30px;
    padding-right:30px;
}

.circle-slider div a{
    margin-top:-10px;
    margin-bottom:20px!important;
}

/*Thumbnails Columns*/

@media (min-width:760px){
    .thumb-column{
        width:50%;
        float:left;
    }
}

.thumb-column{
	line-height:24px;
	display:block;
	padding-bottom:0px;
}

.thumb-column a{
	display:block;
	text-align:right;
}

.thumb-column img{
    margin-top:5px;
    -moz-transform: scale(0.95, 0.95);
    -webkit-transform: scale(0.95, 0.95);
    -o-transform: scale(0.95, 0.95);
    -ms-transform: scale(0.95, 0.95);
    transform: scale(0.95, 0.95);
	width:100px;
	height:100px;
	border-radius:100px;
	float:left;
	margin-right:20px;
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.thumb-column img:hover{
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.thumb-column strong{
	color:#1a1a1a;
	display:inline-block;
	padding-bottom:5px;
	font-size:15px;
    padding-top:10px;
    font-weight:700;
}

.thumb-column em{
	font-style:normal;
    line-height:28px;
}


@media (min-width:600px){
	.thumb-column img{
		width:140px;
		height:140px;
		border-radius:150px;	
	}
	
	.thumb-column em{
		line-height:28px;	
	}
	
	.thumb-column strong{
		padding-top:10px;	
	}
}

/*Content Heading*/
/*///////////////*/

.content-heading{
    z-index:60;
    position:relative;
	margin-bottom:30px;	
}

.content-heading h4{
	color:#FFFFFF;
	position:absolute;	
	z-index:20;
	text-transform:uppercase;
	margin-top:37px;
	padding-left:30px;
    pointer-events:none;
    font-weight:800;
}

.content-heading{
	height:120px;	
}

.content-heading p{
	color:#FFFFFF;
	position:absolute;	
	z-index:98;
	margin-top:58px;
	padding-left:30px;
	opacity:0.5;
    pointer-events:none;
}

.content-heading .overlay{
	z-index:9;
	background-color:rgba(0,0,0,0.8);
}

.content-heading a{
	font-size:20px;
	position:absolute;
	color:#1f1f1f!important;
	right:31px;	
	z-index:98;
    width:50px;
    height:50px;
    text-align:center;
    line-height:50px;
    background-color:#FFFFFF;
    border-radius:50px;
    margin-top:35px;
}

.content-heading img{
    min-height:120px;
	width:100%;
	display:block;
	position:relative;
	z-index:2;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.content-heading img:hover{
    filter: blur(3px);  
    -webkit-filter:blur(3px);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

@media (min-width:768px){
	.content-heading{
		height:140px;	
	}
	
	.content-heading h4{
		font-size:20px;	
		margin-top:45px;
		padding-left:50px;
	}
	
	.content-heading p{
		font-size:15px;	
		margin-top:75px;
		padding-left:50px;
	}
	
.content-heading a{
        font-size:20px;
        position:absolute;
        color:#1f1f1f!important;
        right:31px;	
        z-index:98;
        width:60px;
        height:60px;
        top:5px;
        text-align:center;
        line-height:60px;
        background-color:#FFFFFF;
        border-radius:60px;
        margin-top:35px;
    }

}

/*////////////////////*/
/*Quote & Staff Slider*/
/*////////////////////*/

.staff-item img{
	border-radius:300px;	
	max-width:150px;
	margin-left:auto;
	margin-right:auto;
    margin-top:10px;
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.staff-item img:hover{
    -moz-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.staff-item h4{
	text-align:center;
	margin-top:20px;	
	font-size:16px;
}

.staff-item em{
	text-align:center;
	font-size:12px;
	color:#e34e47;
	display:block;
	margin-top:-10px;
	margin-bottom:10px;
	font-style:normal;
}

.staff-item strong{
    font-size:12px;
	display:block;	
	font-weight:400;
	text-align:center;
	padding-left:20px;
	padding-right:20px;
    margin-bottom:20px;
	line-height:28px;
}

/* 8. Quote Slider */

.quote-slider h4{
	font-family:'Source Sans Pro', sans-serif;
	font-size:18px;
	font-weight:300;	
	width:87%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	line-height:36px;
}

.quote-slider a{
	text-align:center;
	margin-top:20px;	
}

/*Center Socials*/

.center-socials{
    width:165px;
    margin-left:auto;
    margin-right:auto;  
    margin-bottom:0px;
    padding-top:10px;
    margin-top:-10px;
	align-content:center;
}

.center-socials a{
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
    margin-bottom:30px;
    -webkit-box-shadow: 0 1px 5px 2px rgba(0,0,0,0.15);
            box-shadow: 0 1px 5px 2px rgba(0,0,0,0.15); 
}

.center-socials a:hover{
    color:#FFFFFF;
    transform:scale(1.2, 1.2);
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}

.center-socials a i{
    width:40px;
    height:40px;
    line-height:40px;
}

.center-socials .facebook-social{
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
    border-radius:40px;
    float:left;
    margin-left:7px;
    margin-right:7px;
}

.center-socials .twitter-social{
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
    border-radius:40px;
    float:left;
    margin-left:7px;
    margin-right:7px;
}

.center-socials .google-social{
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
    border-radius:40px;
    float:left;
    margin-left:7px;
    margin-right:7px;
}


.show-share-bottom{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:25px;
    color:#FFFFFF;
}

.show-share-bottom:hover{color:#FFFFFF;}

/*Animation*/

.highlight-link {    
    -webkit-animation: highlights 550ms infinite;
    -moz-animation: highlights 550ms infinite;
    -ms-animation: highlights 550ms infinite;
    -o-animation: highlights 550ms infinite;
    animation: highlights 550ms infinite;
}

@-webkit-keyframes highlights {
    100% { 
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    50% { 
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    } 
}


/* new */

.fancy-titles.noimg {
    padding-top: 62px;
}


.fancy-titles {
    position: relative;
    padding-top: 13px;
    padding-bottom:14px;
    margin: 0px 0px -7px;
    text-align: center;
	
}


.fancy-titles::before {
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    width: 100%;
    height: 100%;
   
}

.fancy-titles {
    text-align: center;
}

.fancy-titles.noimg::before {
    background: transparent none repeat scroll 0px center;
}


.fancy-titles h1 {
    font-size: 24px;
    color: var(--text);
}

.fancy-titles h2 {
    font: 300 17px "Open Sans",Arial,Helvetica,sans-serif;
    color: var(--text);
}


.fancy-titles::after {
    position: absolute;
    content: "";
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 8px;
    text-align: center;
	
    }
.box01 {
    min-height: 94vh;
    background-color: var(--bg);
    background-image: var(--bgl);
    color: var(--span);
    font-size:19px;
    line-height:26px;
    border-radius: none;
}

.p019 {
    padding: 10px !important;
}
/* new setp class */
.step {
    float: left;
    margin: 0 12px 0 0;
    background: #7c9cc8;
    padding: 5px 10px 4px;
    border-left: 4px solid #4d6f9e;
    font: 14px Georgia,Arial,Helvetica,sans-serif;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
}
/* new toc class */
.toc {
    margin: 0 0 15px;
    padding: 20px;
    text-align: left;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
    box-shadow: 0 3px 3px rgba(0,0,0,0.08);
}
a::before {
   
    top: 7px;
    left: 0;
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #999;
}

.heading {
    font-size: 16px;
    font-weight: bold;
    word-spacing: -2px;
}
	
	.heading.h2{
		font-size:17px;
		font-weight:bold;
		}
			.heading.h3{
		font-size:17px;
		font-weight:bold;
		}
	
	.notify.success {
    background-image: url(../img/icons/check_26x26-22197c9.png);
    background-repeat: no-repeat;
    background-position: 17px 17px;
}
.notify.success {
    border: 1px solid #d0e7b2;
    border-left: 3px solid #86c06a;
    background: #e7ffcd;
    color: #477b2e;
}
.notify.success {
    background-image: url(../images/totorial%20image/check_26x26-22197c9.png);
    background-repeat: no-repeat;
    background-position: 17px 17px;
}
.notify {
    max-width: 980px;
    margin: 0 auto 20px;
    line-height: 20px;
    padding: 15px 
    15px 15px 20px;
    text-align: left;
}

.bold {
    font-weight: 700 !important;
}

.notify.warning {
    border: 1px solid #e6e998;
    background: #feffdd;
    border-left: 3px solid #c4c064;
    color: #646406;
}
.notify.warning {
      background-image: url(../images/totorial%20image/warning_32x27-22197c9.png);
    background-repeat: no-repeat;
    background-position: 17px 17px;
}
.notify strong:first-of-type {
    display: block;
    margin: 0 0 15px;
    padding: 0 0 0 38px;
    line-height: 30px;
    font-size: 16px;
    text-transform: uppercase;
}

.notify.information {
    color: #2b586e;
}
.notify.information {
    border: 1px solid #d6e2ea;
    border-left: 3px solid #6aa4c0;
    background: #f1f9fe;
    color: #2b586e;}
.notify.information {
    background-image: url(../images/totorial%20image/info_26x26-22197c9.png);
    background-repeat: no-repeat;
    background-position: 17px 17px;
}


/** Next button*/
.bta{
    height: 32px;
    width: 70px;
    background-color:#f5f5f5;
    text-decoration: none;
    border-radius: 7px;
    color:#00295b;
    border: 1px solid grey;
    font-size: 15px;
    text-align: center;
    padding-top:5px;
    padding-bottom:1px;
    margin-top:24px;
    margin-bottom:14px;
    margin-left:8px;
    margin-right:8px;
   	float:left;
}
.bta:hover {
    height: 36px;
    width: 74px;
    font-size:16px;
    background-color:#e5e5e5;
    color:#000000;
    padding-top:8px;
	
}

body{
	text-align:normal;
	list-style-type:none;
	}
.blog-posts {
    width: 100%;
    float: left;
}

.dir {
	
    background: transparent url(../images/totorial%20image/r.jpg) no-repeat scroll -1px 2px;
    padding: 0px 10px;
    text-decoration: none;
}

.heading.h3 {
    font-size: 16px;
    font-weight: bold;
    word-spacing: 2px;
}

.la {
    line-height: 22px;
    margin-bottom: 5px;
    list-style: none;
}
.toggle{
	display:block;
	}


section.toggle {
    margin: 10px 0 0;
    position: relative;
    clear: both;
}
 section {
    display: block;
}

section.toggle {
    margin: 10px 0 0;
    position: relative;
    clear: both;
	text-align:left;
}

section.toggle > label {
    -moz-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    -webkit-transition: all .15s ease-out;
    background: #f4f4f4;
   border-left: 3px solid #21759B;
    color: #000;
    display: block;
    font-size: 1.1em;
    min-height: 20px;
    padding: 12px 20px 12px 10px;
    position: relative;
    cursor: pointer;
    font-weight: 400;
    transition: all .15s ease-out;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}
section.toggle > label::before {
    border: 6px solid transparent;
    border-left-color: inherit;
    content: '';
    margin-top: -6px;
    position: absolute;
    right: 4px;
    top: 50%;
}


section.toggle > div.toggle-content {
    display: none;
}


section.toggle.active > label::before {
    border: 6px solid transparent;
    border-top-color: inherit;
    margin-top: -3px;
    right: 2px;
}




section.toggle.active i.icon-minus {
    display: inline;
}
section.toggle > label i.icon-minus {
    display: none;
	list-style-type:upper-roman;
}
section.toggle > label i {
    font-size: .9em;
    margin-right: 0px;
    position: relative;
    top: -1px;
	
}
.icon {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


section.toggle.active i.icon-plus {
    display: none;
	list-style:none;
}
section.toggle > label i.icon-plus {
    display: inline;
	list-style:none;
}

ul.list li {
    color: #000;
}
ul.list li {
    background: url(../images/totorial%20image/icon-bullet.png) no-repeat 0 4px;
    padding: 0 0 0 19px;
    list-style: none;
    margin-bottom: 5px;
}
ul.list li {
    margin-bottom: 10px;
}
li {
    line-height: 24px;
}

div.content p {
    margin: .0em .2em. 8em .2em;
    padding: 0;
    text-align: justify;
    color: #000;
    font-size: 16px !important;
}

iframe{
	
	
	width:100%;
	
}
.main-logo{margin-left:auto;
margin-right:auto;
 width:95px; 
}
.logo-img{ width:55%;
margin:auto;
			
}











.block-wrapper {
	display: flex; 
 justify-content: center; 
 margin-top: 12px;
 margin-bottom: 12px;
}

.block-wrapper .button_ripple {
	display: none; 
}

.c-block {
 margin: 0 50px;
 padding-top: 8px;
 padding-bottom: 8px;
 padding-left: 15px;
 padding-right: 15px;
}

button,
b {
  display: inline-block;
  text-align: center;
}

button {
  border: none;
  cursor: pointer;
}
button:focus {
  outline: none;
}

.button {
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  font-size: 36px;
  transition: 0.2s;
}
.button:hover {
  opacity: 0.9;
}
.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}


.button-reset {
  padding: 8px 12px;
  border-radius: 5px;
  border: none;
  font-size: 36px;
  transition: 0.2s;
}

.button-reset:hover {
  opacity: 0.9;
}

.result {
  margin-right: 10px;
  margin-left: 10px;
  font-size: 36px;
  color:var(--text);
}




.tt {
color:var(--text);
text-align:center;
font-weight:500;
font-size:20px;
line-height:26px;
margin-top:22px;
margin-bottom:17px;
}

/* ---------------------------------------
   Desktop / large-screen layout
   Constrain the shared app template (header,
   content, footer) to a comfortable reading
   width on big screens instead of stretching
   edge-to-edge. Standalone full-bleed pages
   (tasbeehcounter, 99 names, Contact us, the
   quiz games) don't use this shared template,
   so they stay full width. The homepage uses
   its own wider column further below, since
   its hero/grid sections were built for it.

   NOTE: on the content-page template, .footer
   is a SIBLING of .all-elements (not nested
   inside it), so it needs its own rule here -
   constraining only .all-elements left the
   footer full-width beneath a narrow column.
----------------------------------------- */
@media (min-width: 768px) {
    body:not(.home) {
        background: var(--shadow2);
    }

    body:not(.home) .all-elements {
        max-width: 760px;
        margin: 0 auto;
        min-height: 100vh;
        background: var(--bg);
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.12);
    }

    /* Centered with left:50%+negative margin, NOT transform:translateX -
       a transform on .header would make it the positioning reference
       for its position:fixed/absolute children (#overlay, .sidenav,
       #closeBtn all live inside .header), breaking them relative to
       the real viewport. Margin-based centering avoids that entirely. */
    body:not(.home) .header {
        max-width: 760px;
        left: 50%;
        right: auto;
        margin-left: -380px;
    }

    body:not(.home) .footer {
        max-width: 760px;
        margin: 0 auto;
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.12);
    }
}

/* Homepage: same "boxed, centered" idea, but at the wider column its
   hero/grid sections were designed for instead of the 760px reading
   width used by article pages. */
@media (min-width: 1280px) {
    body.home {
        background: var(--shadow2);
    }

    body.home .all-elements {
        max-width: 1240px;
        margin: 0 auto;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
    }

    /* margin-left, not transform - see note on the article-page .header
       rule above: a transform here would hijack the positioning of
       #overlay/.sidenav/#closeBtn, which all live inside .header. */
    body.home .header {
        max-width: 1240px;
        left: 50%;
        right: auto;
        margin-left: -620px;
    }

    /* The drawer intentionally keeps its default left:0 (true viewport
       edge) instead of trying to align with the centered column above.
       An earlier attempt to reposition it here via calc(50vw - ...)
       didn't account for its base rule's separate closed-state
       transform:translateX(-360px) - the two combined could leave a
       sliver of the (still "closed") drawer visible on very wide
       screens, showing its own internal scrollbar as a stray handle
       on the left edge. Left at 0, the drawer is always safely
       off-screen when closed, at any viewport width, and opening from
       the true screen edge reads fine since the dark overlay already
       covers the whole window while it's open. */
}