@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap);
::-webkit-scrollbar{
    width: 8px;
    background:#0a183b0e;
}
::-webkit-scrollbar-track{
    background: transparent;
}
::-webkit-scrollbar-thumb{
    background: var(--color-gray);
    border-radius: 2px;
    overflow: hidden;
}
::-webkit-scrollbar-thumb:hover{
    background: var(--color-primary-dark);
}

input, textarea, select {
    touch-action: manipulation !important;
}

:root{
    --color-primary:#3B53ED;
    --color-primary-mid: #89b2ff;
    --color-primary-light:#cadeff;
    --color-primary-dark: #081330;
    --color-primary-mid-dark:#223b79;
    --color-primary-accent: #0022ff;
    --color-secondary:#a5b6be;
    --color-secondary-dark:#98a2a8;
    --color-secondary-light: #e9ecef;
    --color-accent: #28a745;
    --color-accent-dark: #218838;
    --color-accent-light: #51cf66;
    --color-bg: #f8f8f8;
    --color-bg-dark: #343a40;
    --color-bg-secondary:#f6f9ff;
    --color-bg-dialog:#0a183b5f;
    --color-bg-border:#08133014;
    --color-card-bg:#FFFFFF;
    --color-footer-bg: #081330;
    --color-bg-navbar:#081330;
    --color-bg-ai: #FFFFFF;
    --color-text: #333;
    --color-text-light: #fff;
    --color-text-primary: #081330;
    --color-text-secondary:#222222;
    --color-text-gray-300:#979797;
    --color-text-hint:rgba(99, 99, 99, 0.265);
    --color-text-chat-ai: #000;
    --color-text-chat-user: #ffffff;
    --color-text-chat:#dedefc;
    --color-white:#FFFFFF;
    --color-gray: #d3d3d3;
    --box-shadow-primary-color: rgba(0, 0, 0, 0.1);
    --box-shadow-secondary-color: rgba(0, 0, 0, 0.2);
}

/* Font families */
:root{
  --font-primary: 'Poppins', sans-serif;
  /* --font-secondary: 'Open Sans', sans-serif; */
}

/* Spacing */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-chat-msg: 8rem;
  --spacing-sec-left-right: 6rem;
}

/* Font Sizes */
:root {
  --font-size-xs: 0.525rem;
  --font-size-sm: 0.825rem;
  --font-size-md: 0.95rem;
  --font-size-lg: 1.35rem;
  --font-size-xl: 1.85rem;
  --font-size-navbar-a: 0.8rem;
}

/* Border Radius */
:root {
  --border-radius-sm: 6px;
  --border-radius:  8px;
  --border-radius-lg: 12px;
  --border-radius-chat-bg: 1rem;
  --border-radius-btn: 0.5rem;
}
/* others */
:root{
  --chat-icon-size: 1.35rem;
}

/* box-shadow */
:root{
  --box-shadow-primary: 0px 1px 2px var(--box-shadow-primary-color),-0px -0px 2px var(--box-shadow-primary-color);
  --box-shadow-secondary:0px 2px 3px var(--box-shadow-secondary-color);
  --box-shadow-navbar-bottom: 0 3px 3px -2px var(--box-shadow-primary-color);
}
/* Breakpoints */
:root {
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
}
/* width */
:root{
  --navbar-width: 200px;
  --navbar-short-width: 6rem;
}

/* Height */
:root{
  --top-navbar-height: 44px;
  --navbar-short-width: 6rem;
  --navbar-height: 4rem;
}

@media only screen and (max-width: 1025px) and (orientation: portrait){
  :root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-chat-msg: 10rem;
    --spacing-sec-left-right: 4rem;
  }
  
  /* Font Sizes */
  :root {
    --font-size-xs: 0.825rem;
    --font-size-sm: 1.15rem;
    --font-size-md: 1.4rem;
    --font-size-lg: 2rem;
    --font-size-xl: 2.25rem;
    --font-size-navbar-a: 1.25rem;
  }
  
  /* Border Radius */
  :root {
    --border-radius-sm: 6px;
    --border-radius:  10px;
    --border-radius-lg: 24px;
    --border-radius-chat-bg: 1.5rem;
    --border-radius-btn: 10px;
  }

  /* others */
  :root{
    --chat-icon-size: 2.25rem;
  }

  /* box-shadow */
  :root{
    --box-shadow-primary: 0px 1px 2px rgba(0, 0, 0, 0.1),-0px -0px 2px rgba(0, 0, 0, 0.1);
    --box-shadow-secondary:0px 2px 3px rgba(0, 0, 0, 0.2);
  }
  /* Breakpoints */
  :root {
    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 992px;
    --breakpoint-lg: 1200px;
  }
  :root{
    --top-navbar-height: 68px;
  }
}
 
@media only screen and (max-width: 991px){
    /* Height */
  :root{
    --top-navbar-height: 60px;
    --navbar-short-width: 6rem;
  }
  :root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-chat-msg: 10rem;
    --spacing-sec-left-right: 2.5rem;
  }
  
  /* Font Sizes */
  :root {
    --font-size-xs: 0.625rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.2rem;
    --font-size-lg: 2rem;
    --font-size-xl:2.25rem;
    --font-size-navbar-a: 1rem;
  }

  /* others */
  :root{
    --chat-icon-size: 1.75rem;
  }

  /* box-shadow */
  :root{
    --box-shadow-primary: 0px 1px 2px rgba(0, 0, 0, 0.1),-0px -0px 2px rgba(0, 0, 0, 0.1);
    --box-shadow-secondary:0px 2px 3px rgba(0, 0, 0, 0.2);
  }
  /* Breakpoints */
  :root {
    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 992px;
    --breakpoint-lg: 1200px;
  }
}
@media only screen and (max-width: 768px){
  :root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-chat-msg: 10rem;
    --spacing-sec-left-right: 4rem;
  }
  
  /* Font Sizes */
  :root {
    --font-size-xs: 0.825rem;
    --font-size-sm: 1.15rem;
    --font-size-md: 1.4rem;
    --font-size-lg: 2rem;
    --font-size-xl: 2.25rem;
    --font-size-navbar-a: 1.25rem;
  }

  /* others */
  :root{
    --chat-icon-size: 2.25rem;
  }

  /* box-shadow */
  :root{
    --box-shadow-primary: 0px 1px 2px rgba(0, 0, 0, 0.1),-0px -0px 2px rgba(0, 0, 0, 0.1);
    --box-shadow-secondary:0px 2px 3px rgba(0, 0, 0, 0.2);
  }
  /* Breakpoints */
  :root {
    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 992px;
    --breakpoint-lg: 1200px;
  }
  :root{
    --top-navbar-height: 68px;
  }
}
@media only screen and (max-width: 480px){
  :root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-chat-msg: 1rem;
    --spacing-sec-left-right: 1rem;
  }
  
  /* Font Sizes */
  :root {
    --font-size-xs: 0.625rem;
    --font-size-sm: 0.825rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.35rem;
    --font-size-xl: 1.75rem;
    --font-size-navbar-a: 0.925rem;
  }

  /* others */
  :root{
    --chat-icon-size: 1.65rem;
  }

  /* box-shadow */
  :root{
    --box-shadow-primary: 0px 1px 2px rgba(0, 0, 0, 0.1),-0px -0px 2px rgba(0, 0, 0, 0.1);
    --box-shadow-secondary:0px 2px 3px rgba(0, 0, 0, 0.2);
  }
  /* Breakpoints */
  :root {
    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 992px;
    --breakpoint-lg: 1200px;
  }
  :root{
    --top-navbar-height: 56px;
  }
}
/* reset.css */
body{
  /* transform: scale(0.9);
  transform-origin: 0 0; */
}

/* Remove default margin and padding */
* {
    margin: 0;
    padding: 0;
  }
  
  /* Set default box-sizing to border-box */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Additional reset styles... */
  *{
    transition: 0.2s;
    scroll-behavior: smooth;
  }

  input:-webkit-autofill {
    background-color: #e0f7fa !important; /* Change to your desired background color */
    -webkit-text-fill-color: #000 !important; /* Ensure text color is readable */
    transition: background-color 5000s ease-in-out !important; /* Smooth transition */
}

.d-none{
  display: none !important;
}
.bx-close {
    transform: rotate(45deg);
}


/* --- navbar style --- */
.navbar{
    height: 100%;
    width:var(--navbar-width);
    position: fixed;
    left: 0;
    top: 0;
    background: var(--color-bg-navbar);
    text-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
    box-shadow: 4px 0 8px 0px rgba(0, 0, 0, 0.172); 
    border-right: 0.5px solid var(--color-bg-border);
    z-index: 999;
}


/* nav menu switch */
.navbar .menu-ic,
.navbar .share-ic,
.navbar .close-ic,
.menu,
.history-btn{
    display: none;
}
.top-header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rem 1rem;
    /* height: 58px; */
    min-height: var(--top-navbar-height);
    max-height: var(--top-navbar-height);
    /* border-bottom: 0.1px solid #bfc1d6; */
    border-bottom: 0.5px solid var(--color-bg-border);
    box-shadow: 0 3px 3px -2px #0c2469;
}

/* nav title style */
.navbar .nav-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.main .navbar .web-name{
    color: white;
    font-size: var(--font-size-md);
}
.navbar .nav-title p{
    color: var(--color-primary-accent);
    font-size: 0.45rem;
    font-weight: 300;
    font-style: italic;
}
.navbar .menu-btn,
.navbar .menu-switch-btn{
    background: transparent;
    border: none;
    color: white;
    font-size: 1.65rem;
}



.navbar .menu-btn:hover,
.navbar .menu-switch-btn:hover{
    color: var(--color-primary);
}

.nav-profile{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0 0.75rem 0;
    align-items: center;
    justify-content: center;
}
/* nav web logo style */
.nav-profile .web-logo {
    width: 44px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Add relative positioning to the .web-logo element */
}
.nav-profile .web-logo img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.nav-profile .web-logo::after {
    content: "";
    position: absolute;
    bottom: 2px;
    right: 0px;
    height: 14px;
    width: 14px;
    border: 3px solid var(--color-bg-navbar);
    background-color: rgb(5, 190, 5);
    z-index: 2;
    border-radius: 50%; /* Add border-radius to make it a circle */
}
.nav-profile h2{
    font-size: 0.825rem;
    margin-top: 0.25rem;
    color: white;
}
.nav-profile .view-profile-btn{
    margin-top: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.6rem;
    /* background-color: var(--color-primary-mid); */
    border: 1px solid var(--color-primary-mid);
    border-radius: var(--border-radius-btn);
    color: var(--color-primary-mid) !important;
}
.nav-profile .view-profile-btn i{
    font-size: 0.7rem;
    font-weight: 500;
}
.nav-profile .view-profile-btn p{
    font-size: 0.6rem;
    display: flex;
    padding-left: 4px;
    font-weight: 500;
    color: var(--color-primary-mid) !important;
}
.nav-profile .view-profile-btn span{
    padding-left: 4px;
    padding-right: 0.25rem;
}
.nav-profile .view-profile-btn:hover{
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.nav-profile .view-profile-btn:hover,
.nav-profile .view-profile-btn:hover p{
    color: var(--color-white) !important;
}



/* nav menu style */
.navbar .nav-menu{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-around;
    transform: translateX(0);
}
 .navbar .nav-menu .nav-div{
    width: 100%;
    height: 100%;
    /* padding-left: 1.75rem; */
    overflow: hidden;
    position: relative;
}
.navbar .nav-menu .nav-div .nav-div-item{
    margin-bottom: 0.5rem;
    width: 100%;
}
.navbar .nav-menu .nav-div .nav-div-item.active{
    position: relative;
}

/* nav link style */
.navbar .nav-menu .nav-div .nav-div-item a{
    min-height: 38px;
    border-radius: var(--border-radius-btn);
    text-decoration: none;
    padding: 0.625rem 1rem;
    color: var(--color-secondary-dark);
    display: flex;
    margin: 0.15rem 1rem;
    align-items: center;
    position: relative;
}
.navbar .nav-menu .nav-div i{
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.navbar .nav-menu .nav-div .nav-div-item.active a{
    /* border: 1px solid var(--color-primary); */
    color: var(--color-primary-accent);
    background-color: #121950;
    background-color: var(--color-primary);
    color: white;
}
.navbar .nav-menu .nav-div .nav-div-item.active::after {
    content: "";
    background-color: var(--color-primary);
    /* background-color: #0d1c8f; */
    width: 7px;
    height: 100%;
    right: -1px;
    top: 50%; 
    transform: translateY(-50%);
    position: absolute;
    z-index: 9;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
/* nav link hover style*/
.navbar .nav-menu .nav-div .nav-div-item a:hover {
    color: var(--color-primary-accent);
    color: #fff;
}
.navbar .nav-menu .nav-div .nav-div-item a:hover,
.navbar .nav-menu .nav-div .nav-div-item:hover::after {
    background-color: var(--color-primary-accent);
}






/* .navbar .nav-menu .nav-div .nav-div-item.active::after{
    content: "";
    background-color: var(--color-primary-dark);
    width: 8px;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 9;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
} */




/* nav bottom style */
.nav-bottom{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.nav-bottom .download-btns-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.25rem;
}
.nav-bottom .download-btns-container h4{
    color: var(--color-white);
    font-size: 0.6rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}
.nav-bottom .download-btns-container a{
    font-size: 1.45rem;
    color: var(--color-primary);
    padding: 1rem 0.15rem !important;
}
.nav-bottom .download-btns-container a:hover{
    color: var(--color-white);
}



.play-store-btn,
.app-store-btn{
    display: flex;
    padding: 0.1rem;
    align-items: center;
    text-decoration: none;
    border-radius: 6px;
    width: 126px;
    height: 37px;
    border: 0.5px solid var(--color-gray);
    color: white !important;
}
.app-store-btn{
    color: var(--color-primary-dark) !important;
    background-color: var(--color-primary-mid);
    border: none;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.play-store-btn .bxl-play-store,
.app-store-btn .bxl-apple{
    font-size: 1.2rem;
    margin-right: 0;
    padding: 7px 10px;
}
#play-store-btn .play-store-txt,
.app-store-btn .play-store-txt{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-right: 15px;
    
}
#play-store-btn .play-store-txt p,
#play-store-btn .play-store-txt h3{
    color: white;
}
#play-store-btn .play-store-txt p,
.app-store-btn .play-store-txt p{
    font-weight: 400;
    font-size: 0.4rem;
    text-transform: uppercase;
}
#play-store-btn .play-store-txt h3,
.app-store-btn .play-store-txt h3{
    font-weight: 700;
    font-size: 0.65rem;
}
.app-store-btn:hover,
#play-store-btn:hover{
    border-color: transparent;
    background-color: var(--color-primary);
    color: var(--color-white) !important;
}
#play-store-btn:hover,
.app-store-btn:hover,
#play-store-btn:hover p,
.app-store-btn:hover p,
#play-store-btn:hover h3,
.app-store-btn:hover h3{
    color: var(--color-white) !important;
}


/* --- short-navbar STYLE ---*/
.main.short-main{
    padding-left: var(--navbar-short-width);
}
.main .short-navbar{
    width: var(--navbar-short-width);
    padding: 0;
    transition: all 0.4s;
}
.main .short-navbar .top-header{
    justify-content: center;
    /* height: 56px; */
}
.short-navbar .menu-btn{
    position: static;
}
.short-navbar .web-logo{
    margin-top: 0;
}
.main .short-navbar .nav-menu .nav-div{
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main .short-navbar .nav-menu .nav-div .nav-active{
    /* background-color: unset; */
}
.main .short-navbar .nav-menu .nav-div a{

}
.main .short-navbar .nav-menu .nav-div i{
    margin-right: 0;
    height: 1.75rem;
    width: 2.25rem;
    font-size: 0.9rem;
}

.short-navbar .play-store-btn,
 .short-navbar .app-store-btn{
    width: auto;
    padding: 3px;
    height: 40px;
}
.short-navbar .app-store-btn{
    margin-bottom: 0;
}
.short-navbar .nav-menu .nav-div a{
    border-radius: 30px;
}
/* .short-navbar .nav-menu .nav-div .nav-active i{
    background: var(--color-white);
    color: var(--color-primary);
}
.main .short-navbar .nav-menu .nav-div a:hover{
    background-color: transparent;
} */
.short-navbar .nav-bottom{
    position: absolute;
    bottom: 1rem;
}

.nav-short-inactive{
    display: block;
}
.hidden{
    display: none !important;
}


/* --- wrapper style --- */
.wrapper{
    height: 100%;
    width: 100%;
    overflow: hidden;
    
}
.main{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    padding-left: var(--navbar-width);
}


.main-container{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.hz-navbar{
    /* background-color: var(--color-bg-secondary); */
    margin-left: var(--navbar-width);
    height: 50px;
    width: calc(100% - var(--navbar-width));
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--box-shadow-primary);
    padding: 0 var(--spacing-sec-left-right);
    z-index: 998;
}
.hz-navbar .hz-navbar-title{
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}




/* --- section style --- */
.content{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* overflow-y: scroll;
    overflow-x: hidden; */
    overflow: hidden;
    background-color: var(--color-bg);
}
.section-container{
    width: 100%;
    padding: var(--spacing-sec-left-right);
    background-color: var(--color-bg);
}
.section-head{
    margin-bottom: 2rem;
 }
.section-head-div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 30px;
}
.sec-title{
    font-size: var(--font-size-lg);
    font-weight: 700;
}
.section-des{
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 300;
}
.section-head .section-head-img-container{
    width: 100%;
    display: flex;
    align-items: center;
}
.section-head .section-head-img-container img{
    width: 430px;
    margin: 1rem 0;
}



/* --- footer style --- */
.footer{
    width: 100%;
    padding: 6rem var(--spacing-sec-left-right) 4rem var(--spacing-sec-left-right);
    display: flex;
    background-color: var(--color-footer-bg);
}

/* footer container */
.footer .left-con{
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.footer .right-con{
    width: 35%;
    display: flex;
    justify-content: end;
    /* align-items: center; */
    flex-direction: column;
}
.footer .left-con,
.footer .right-con{
    
}

/* footer element style */
.footer .left-con .logo-div{
    max-width: 300px;
}
.footer .left-con .logo-div h2{
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-white);
}
.footer .left-con .logo-div h1{
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: 300;
    margin-bottom: 8px;
    font-style: italic;
}
.footer .left-con .logo-div p{
    font-size: var(--font-size-sm);
    font-weight: 300;
    text-align: justify;
    color: var(--color-white);
}

.footer .right-con a{
    text-decoration: none;
    color: var(--color-white);
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 10px 0;
    font-weight: 500;
}
.footer .right-con a i{
    font-size: 1rem;
    margin-right: 6px;
}
.footer .right-con a:hover{
    background-color: transparent;
    color: var(--color-primary);
}
.footer .right-con a:hover i{
    transform: rotate(90deg);
    transition: transform 0.2s;
}

/* footer copyright text */
.copyright-txt{
    color: #a6a6a6;
    font-size: 0.7rem;
    font-weight: 300;
    width: 100%;
    margin-top: 0.5rem;
    opacity: 0.5;
}



@media only screen and (max-width: 1025px) and (orientation: portrait){
    /* -- wrapper style -- */
    /* .wrapper{
        overflow: hidden;
    } */
    .main{
        flex-direction: column;
        padding-left: 0;
    }
    .main-scroll{
        margin-top: var(--top-navbar-height);
    }

    .section-head .section-head-img-container img{
        width: 100%;
    }
    .navbar .menu-switch-btn {
        display: none;
    }


    /*  --- navbar style --- */
    .main .navbar{
        height: var(--top-navbar-height);
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin-right: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        border-radius: unset;
        box-shadow: var(--box-shadow-navbar-bottom);
    }
    .top-header{
        border: none;
        box-shadow: none;
    }
    .web-logo img{
        width: 3.7rem;
    }
    .main .navbar .nav-title{
        flex: 1;
        align-items: flex-start;
        justify-content: flex-start;
        margin-left: 0rem;
    }
    .nav-profile .web-logo img{
        width: 60px;
        height: 60px;
    }
    .nav-profile h2{
        font-size: 1rem;
    }
    .nav-profile .view-profile-btn p,
    .nav-profile .view-profile-btn i,
    .nav-profile .view-profile-btn span{
        font-size: 0.825rem;
    }
    .main .navbar .web-name{
       font-size: 1.3rem;
       margin-top: -4px;
    }
    .navbar .nav-title p{
        font-size: 0.625rem;
    }
    .main .navbar .web-developer{
        font-size: 1.1rem;
        color: #dedefc;
    }
    .main .navbar .nav-menu{
        justify-content: start;
        align-items: center;
        width: 280px;
        position: absolute;
        left: 0;
        top: 0;
        height: 100dvh;
        z-index: -2;
        padding-bottom: 2rem;
        background-color: var(--color-bg-navbar);
        margin-top: var(--top-navbar-height);
        transform: translateX(-100%);
        transition: transform 0.3s ease; /* Smooth transition */
        box-shadow: 4px 0 4px -2px rgba(0, 0, 0, 0.05); 
        border-right: 0.5px solid var(--color-bg-border);
        z-index: 998;
    }
    .main .navbar .nav-menu .nav-div{
        position: relative;

    }
    .main .navbar .point-div{
       width: 20%;
    }

    .main .navbar .nav-menu .nav-active{
       border-radius: unset;
    }
    .navbar .nav-menu .nav-div .nav-div-item a{
        padding: 0.8rem 1rem;
        margin: 0.6rem 1.5rem;
    }
    .main .navbar .nav-menu .nav-div i{
        font-size: 1.45rem;
        margin-right: 20px;
    }

    /* navbar icon style */
    .navbar .menu-btn{
        display: none;
    }
    .web-logo{
        margin-top: 0;
    }

    .navbar .menu-ic,
    .navbar .share-ic{
        font-size: 2.7rem;
        color: var(--color-white);
        display: block;
    }
    .navbar .share-ic{
        font-size: 2.5rem;
    }
    .main .navbar .nav-menu .close-ic{
        color: var(--color-white);
        position: absolute;
        top: 40px;
        right: 0;
        display: block;
        font-size: 2rem;
    }
     /* navbar menu icon style */
    #menuBtn {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    .bar {
        width: 28px;
        height: 4px;
        background-color: white;
        margin: 3px 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    #menuBtn.close .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    #menuBtn.close .bar:nth-child(2) {
        opacity: 0;
    }

    #menuBtn.close .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* navbar bottom design */
    #play-store-btn, .app-store-btn{
        width: 175px;
        height: 54px;
        padding: 0.8rem 0.5rem;
    }
    .app-store-btn{
        margin-bottom: 3.5rem;
    }
    #play-store-btn .play-store-txt p, .app-store-btn .play-store-txt p{
        font-size: 0.725rem;
    }
    #play-store-btn .play-store-txt h3, .app-store-btn .play-store-txt h3{
        font-size: 0.825rem;
    }
    #play-store-btn .bxl-play-store, .app-store-btn .bxl-apple{
        font-size: 1.825rem;
        margin-right: 0.25rem;
    }
    .main .navbar .profile{
        padding: 2rem 0;
        font-size: 1.6rem;
    }

    .chat-page-content,
    .bible-content{
        margin-top: var(--top-navbar-height);
        height: calc(100dvh - var(--top-navbar-height)) !important;
    }
    .footer .left-con .logo-div{
        max-width: 400px;
    }
}

@media only screen and (max-width: 480px){
    .navbar .nav-menu .nav-div .nav-div-item a{
        padding: 0.625rem 0.8rem;
        margin: 0.6rem 1.5rem;
    }
    .nav-profile .web-logo img{
        width: 40px;
        height: 40px;
    }
    .navbar .nav-menu .nav-div .nav-div-item a span{
        font-size: 0.9rem;
    }
    .footer{
        padding: 2.5rem var(--spacing-sec-left-right);
        flex-direction: column-reverse;
    }
    .footer .left-con, 
    .footer .right-con{
        width: 100%;
    }
    .footer .right-con{
        margin-bottom: 4rem;
    }
    .footer .left-con .logo-div{
        max-width: 100%;
    }
    .main .navbar .nav-menu .nav-div i{
        font-size: 1.15rem;
    }
}
a:visited{
  color: var(--color-primary);
}
/* --- card style --- */
.card,
.default-card{
    background-color: var(--color-card-bg);
    box-shadow: var(--box-shadow-primary);
    border-radius: var(--border-radius);
    transition: all 0.2s ease-in;
    cursor: pointer;
}
.card{
    display: flex;
    align-items: center;
    padding: 0rem .7rem; 
    min-height: 3.8rem;
}

.contains-loader {
    height: 80px;
    width: 90px;
    background-color: var(--color-card-bg);
    box-shadow: var(--box-shadow-primary);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: var(--border-radius);
}
.contains-loader i {
    font-size: 2rem;
    animation: spin 2s linear infinite;
    color: var(---color-text-primary) !important; /* Initial color */
}
.contains-loader p{
    margin-top: 4px;
    font-size: 10px;
}

@keyframes spin {
    from { 
        transform: rotate(0deg); 
    }
    to { 
        transform: rotate(360deg);  
    }
}

/* --- loading bar style --- */
#loading-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    backdrop-filter: blur(3px);
}
#loading-dialog .default-card{
    padding: 1rem;
}
.loading-div-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.loading-image {
    width: 56px;
    position: relative;
    z-index: 1;
}
.loading-cover {
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    background-color: var(--color-bg); 
    animation: reveal 3s ease-out infinite;
    border-top-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    z-index: 2; 
}

.loading-spinner {
    position: absolute;
    border: 4px solid #e9e9e9;
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    z-index: 3;
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes reveal {
    0% { 
        height: 100%; 
        transform: rotate(60deg);
    }
    100% { 
        height: 0; 
    }
}



/* --- alert dialog style --- */
.alert-dialog {
    position: fixed;
    top: 100%; /* Initially off screen */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-dialog);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
    transition: top 0.4s ease; /* Transition for top property */
}

.alert-dialog.show {
    top: 0; /* Slides into view */
}

.alert-dialog .dialog-container{
    background-color: var(--color-card-bg);
    border-radius: 10px;
    display: flex;
    max-width: 370px;
    max-height: 350px;
    padding: 20px 20px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: relative;
}
.alert-dialog .dialog-container .lottie-container{
    width: 120px;
    height: 120px;
    margin-top: -1rem;
}
.alert-dialog .dialog-container .dialog-body{
    display: flex;
    overflow: hidden;
}
.alert-dialog .dialog-container .close-btn{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.5rem;
    padding: 0.5rem;
}

.alert-dialog .dialog-container .dialog-title h2{
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--color-text-primary);
    font-weight: 600;
}
.alert-dialog .dialog-container .dialog-body p{
    font-size: 0.825rem;
    color: #545454;
    margin-bottom: 1.75rem;
}
.alert-dialog .dialog-container .dialog-footer{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}


.alert-dialog .dialog-container .dialog-footer .dark-btn{
    background-color: var(--color-primary);
    color: var(--color-white);
}
.alert-dialog .dialog-container .dialog-footer .dark-btn:hover{
    background-color: var(--color-primary-dark);
}

/* alert text style */
#alertText {
    position: fixed;
    bottom: 10rem;
    left: 70%;
    transform: translateX(-50%);
    background-color: #333;
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 30px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 99999999;
}




/* --- default dialog style ---  */
.default-dialog {
    position: fixed;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-dialog);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
    transition: top 0.4s ease; /* Transition for top property */
}

.default-dialog.show {
    top: 0; /* Slides into view */
}

.default-dialog .default-dialog-container{
    width: 430px;
    background-color: var(--color-card-bg);
    border-radius: 10px;
    display: flex;
    max-width: 430px;
    max-height: 510px;
    padding: 2rem;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    /* flex-wrap: wrap; */
    text-align: center;
    position: relative;
    padding: 1.5rem;
}
.preview-dialog .default-dialog-container{
    width: 800px;
    height: 500px;
    max-width: 800px;
    flex-direction: row;
    overflow: hidden;
    padding: 0 0.5rem;
}
.preview-dialog .default-dialog-container .inner-box{
    width: 50%;
    height: 94%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0.5rem;
    border-radius: 6px;
}
.preview-dialog .default-dialog-container .inner-box:nth-child(2){
    padding: 0.25rem 1rem !important;

}
.preview-dialog .default-dialog-container .preview-canva-img{
    width: 100%;
    border-radius: 6px;
    border: 1.25px solid var(--color-primary-light);
}
.file-input-container {
    position: relative;
    width: 90%;
}
  
.file-input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
  
.file-input-label {
    width: 100%;
    display: inline-block;
    background-color: var(--color-gray); /* Change color as per your preference */
    color: var(--color-text-primary);
    padding: 30px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.9rem;
}
  
.file-input-label:hover {
    background-color: #0056b3; /* Change color as per your preference */
}

.preview-dialog .default-dialog-container .inner-box .btn-div{
    margin-top: 2rem;
    display: flex;
    gap: 0.5rem;
}
 
.default-dialog .default-dialog-container .dialog-container-box{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
    width: 100%;
}
.default-dialog .default-dialog-container .dialog-container-box .profile-icon-demo{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(---color-text-primary);
    
}
.default-dialog-container .dialog-container-box input{
    margin-left: 10px;
}
.default-dialog-container .dialog-container-box button {
    border-radius: var(--border-radius-lg);
    background-color: var(--color-primary-dark);
    font-size: 0.75rem;
    color: var(--color-white);
    padding: 0.35rem 0.75rem;
    margin-left: 0.75rem;
}

.default-dialog-container .dialog-form{
    flex: 1;
    width: 100%;
}
.default-dialog-container .dialog-form h2{
    width: 100%;
    text-align: left;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}
.default-dialog-container .dialog-form .dialog-form-btn-div{
    display: flex;
    gap: 10px;
    margin-top: 1rem;
}
.default-dialog-container .dialog-form .dialog-form-btn-div button{
    flex: 1;
}




/* --- custom dialog style --- */
#custom_dialog{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-dialog);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
    display: none;
}
.custom_dialog-div{
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    display: flex;
    max-width: 300px;
    padding: 20px 20px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.custom_dialog-div h3{
    margin: 15px 0;
}
.custom_dialog-div .button{
    width: 100%;
    height: 2.65rem;
    padding: 0px 2rem;
    margin-top: 1.2rem;
    background-color: var(--color-bg-secondary);
    border-radius: 30px;
    color: var(--color-primary);
    outline: none;
    border: none;
    font-weight: 500;
    font-size: 1rem;

}
.custom_dialog-div .button:hover{
    background-color: var(--color-primary);
    color: #fff;
}
.custom_dialog-div .close-ic{
    background-color: #1d2224c6;
    font-size: 1.3rem;
    padding: 5px;
    position: absolute;
    border-radius: 50px;
    bottom: 150px;
    color: var(--color-white);
}




/* --- Preloader style --- */

.small-preloader-dialog .preloader-dialog-div {
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    padding: 1.25rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    box-shadow: var(--box-shadow-primary);
}
.small-preloader-dialog .preloader-dialog-div i{
    font-size: 2rem;
    font-weight: 500;
    animation: spin 2s linear infinite;
}
.small-preloader-dialog .preloader-dialog-div p{
    font-size: var(--font-size-sm);
    margin-top: 0.5rem;
}

.small-preloader-dialog,
#book-name-dialog,
#chapter-dialog,
#language-dialog,
#translation-dialog{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
    display: none;
}
.small-preloader-dialog{
    display: flex;
}





/* --- Bible dialog style --- */
.dialog-book-div,
.dialog-chapter-div,
.language-dialog-div,
.translation-dialog-div{
    background-color: var(--color-bg);
    border-radius: 10px;
    display: flex;
    padding: 0px 20px 30px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 92vh;
    min-width: 45vw;
    justify-content: flex-start;
    box-shadow: var(--box-shadow-primary);
}
.dialog-title-div{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0.75rem;
}
.dialog-title-div button{
    border-radius: 3rem;
    border: none;
    color: var(--color-text-primary);
    padding: 0.35rem 0.35rem 2px 0.35rem;
}
.dialog-title-div button:hover{
    color: var(--color-primary);
}
.dialog-title-div button i{
    font-size: 1.75rem;
}

.dialog-title-div h3{
    color: var(--color-text-primary);
    font-size: 1.25rem;
    flex: 1;
    text-align: start;
}
.dialog-chapter-div h3{
    text-align: center !important;
}

.dialog-container{
    max-width: 85vw;
    max-height: 100%;
    margin: 0 auto;
    overflow: hidden;
    width: 85vw;
    height: 100%;
}
.translation-dialog-div .dialog-container,
.language-dialog-div .dialog-container{
    width: 100%;
    height: 100%;
}
.dialog-container-list{
    max-height: 100%;
    width: 100%;
    display: grid;
    grid-gap: 15px;
    padding: 5px 10px;
    overflow-y: auto;
}

.dialog-book-div .book-name-list{
    grid-template-columns: repeat(auto-fit, minmax(13vw, 3fr));
}

.dialog-book-div .book-name-list .book-name{
    font-size: var(--font-size-sm);
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.7rem;
    color: var(--color-text-primary);
    background-color: var(--color-card-bg);
    border: 1px solid #e9e9e9;
    /* box-shadow: var(--box-shadow-primary); */
    border-radius: var(--border-radius);
    transition: all 0.2s ease-in;
    cursor: pointer;
}


.dialog-chapter-div .chapter-list{
    grid-template-columns: repeat(auto-fit, minmax(6vw, 3fr));
}
.dialog-chapter-div .chapter-list .chapter{
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.7rem;
    color: var(--color-text-primary);
    max-width: 100%;
    background-color: var(--color-card-bg);
    border: 1px solid #e9e9e9;
    /* box-shadow: var(--box-shadow-primary); */
    border-radius: var(--border-radius);
    transition: all 0.2s ease-in;
    cursor: pointer;
}
.language-dialog-list {
    grid-template-columns: repeat(auto-fit, minmax(20vw, 3fr));
}

.language{
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.7rem;
    color: var(--color-text-primary);
    max-width: 100%;
    background-color: var(--color-card-bg);
    border: 1px solid #e9e9e9;
    /* box-shadow: var(--box-shadow-primary); */
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    transition: all 0.2s ease-in;
    cursor: pointer;
}

.translation-dialog-list .translation{
    display: flex;
    padding: 1rem;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    color: var(--color-text-primary);
    max-width: 100%;
    cursor: pointer;
    position: relative;
    background-color: var(--color-card-bg);
    border: 1px solid #e9e9e9;
    /* box-shadow: var(--box-shadow-primary); */
    border-radius: var(--border-radius);
    transition: all 0.2s ease-in;
    cursor: pointer;
}
.translation-dialog-list .translation h4{
    font-size: var(--font-size-sm);
}
.translation-dialog-list .translation p{
    font-size: var(--font-size-sm);
    opacity: 0.75;
    max-width: 65%;
    text-align: left;
}
.translation-dialog-list .translation a{
    position: absolute;
    right: 0;
    margin-right: 1rem;
    text-decoration: none;
    color: var(--color-primary);
}
.dialog-container-list .book-name:hover,
.dialog-container-list .chapter:hover,
.dialog-container-list .language:hover,
.translation-dialog-list .translation:hover{
    background-color: var(--color-primary-mid-dark);
    color: #fff;
}

.translation-dialog-list .translation:hover h4,
.translation-dialog-list .translation:hover p,
.translation-dialog-list .translation:hover a{
    color: #fff;
}



/* --- typing indicator style --- */
.typing-indicator{
    will-change: transform;
    width: fit-content;
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    margin: 1rem 0;
}
.typing-indicator .typing-div{
    padding: 0.8rem;
    background: var(--color-white);
    border-radius: var(--border-radius-chat-bg);
    display: flex;
    box-shadow: var(--box-shadow-primary);
}
.typing-indicator img{
    width: var(--chat-icon-size);
    height: var(--chat-icon-size);
    margin: 0 7px;
    border-radius: 50%;
}

.typing-indicator span{
    height: 0.485rem;
    width: 0.485rem;
    margin: 0 3px;
    background-color: var(--color-text-primary);
    display: block;
    border-radius: 50%;
    opacity: 0.2;
}
.typing-indicator span:nth-child(1){
    animation: 1s blink infinite 0.25s;
}
.typing-indicator span:nth-child(2){
    animation: 1s blink infinite 0.50s;
}
.typing-indicator span:nth-child(3){
    animation: 1s blink infinite 0.75s;
}

/* typing indiacator animation */
.typing-indicator span:nth-child(4){
    animation: 1s blink infinite 1s;
}
@keyframes blink {
    50%{
        opacity: 1;
    }
}



/*  */
.light-bold-title{
    font-weight: 300;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}
.light-bold-title span{
    font-weight: 600;
}




 /* --- cookies styles --- */
 .cookies-permission{
    display: none;
    position: fixed;
    left: -100%;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1001;
    cursor: pointer;
    background-color: var(--color-bg-dialog);
    transition: left 0.2s ease-in-out;
}

.cookies-permission .cookies-div{
    background-color: var(--color-bg);
    position: absolute;
    align-items: start;
    justify-content: start;
    left: 35%;
    bottom: 2rem;
    padding: 20px;
    display: flex;
    width: 300px;
    flex-direction: column;
    border-radius: 10px;
    transform: translate(-50%, 0);
}
.cookies-permission.show{
    left: 0%;
    display: flex;
}

.cookies-permission i{
    font-size: 4rem;
    color: var(--color-text-primary);
}
.cookies-permission .app-content{
    display: flex;
    flex-direction: column;
}
.cookies-permission h1{
    font-size: 1.1rem;
    font-weight: 600;
    text-align: start;
    color: var(--color-text-primary);
}
.cookies-permission p{
    font-size: 0.95rem;
    margin-top: 5px;
    text-align: justify;
}
.cookies-permission a{
    text-align: right !important;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--color-primary);
    text-transform: lowercase;
}
.cookies-permission .app-content-btn{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1rem;
}
.cookies-permission .btn{
    padding-left: 2rem;
    padding-right: 2rem;
    margin-left: 0.5rem;
}

.app-store-dialog{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-dialog);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
}
.app-store-dialog.show{
    display: flex;
}

.app-store-dialog-div{
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 500px;
    width: 470px;
    justify-content: flex-start;
}
.app-store-dialog-div img{
    height: 380px;
}
.app-store-dialog-div .dialog-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
}
.app-store-dialog-div .dialog-container #play-store-btn{
    padding: 3px 0;
}
.app-store-dialog-div .app-play-store-btn{
    display: flex;
    border: none;
    background-color: var(--color-primary) !important;
    padding: 3px 0;
    width: 12vw;
    align-items: center;
    text-decoration: none;
    color: var(--color-white) !important;
    border-radius: 6px;
    margin: 0 10px;
}
.app-store-dialog-div  .first{
    background-color: #dbdbdb !important;
    color: #222 !important;
}
.app-store-dialog-div .app-play-store-btn .bxl-play-store{
    color: var(--color-white) !important;
    font-size: 1.9rem;
    margin-right: 0;
    padding: 7px;
}
.app-store-dialog-div .app-play-store-btn .bx-globe{
    color: #222;
    font-size: 1.85rem;
    margin-right: 0;
    padding: 8px;
}
.app-store-dialog-div .app-play-store-btn .play-store-txt{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-right: 15px;
}
.app-store-dialog-div .app-play-store-btn .play-store-txt p{
    font-weight: 400;
    font-size: 0.6rem;
    text-transform: capitalize;
}
.app-store-dialog-div .app-play-store-btn .play-store-txt h3{
    font-weight: 600;
    font-size: 0.95rem;
}


.app-store-dialog-div .app-play-store-btn:hover{
    color: var(--color-white);
    background-color: var(--color-primary);
}
.app-store-dialog-div .app-play-store-btn .bxl-play-store:hover{
    color: var(--color-white) !important;
}

.app-store-dialog-div .first:hover{
    color: var(--color-white);
    background-color: #222;
}
.app-store-dialog-div .first .bx-globe:hover{
    color: var(--color-white) !important;
}










@media only screen and (max-width: 1025px){
    .translation-dialog-list .translation{
        padding: 1.15rem;
    }
    .dialog-book-div .book-name-list .book-name,
    .language{
        height: 3.5rem;
    }
    .preview-dialog .default-dialog-container{
        max-width: 900px;
        width: 900px;
        height: 580px;
        max-height: 550px;
    }
}

@media only screen and (max-width: 769px){
    .dialog-book-div .book-name-list{
        grid-template-columns: repeat(auto-fit, minmax(25vw, 3fr));
    }
    .dialog-chapter-div .chapter-list{
        grid-template-columns: repeat(auto-fit, minmax(15vw, 3fr));
    }
    .language-dialog-list{
        grid-template-columns: repeat(auto-fit, minmax(30vw, 3fr));
    }

    .default-dialog .default-dialog-container{
        width: 380px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        max-height: 700px !important;
    }
    .preview-dialog .default-dialog-container .inner-box{
        width: 100%;
    }
    .preview-dialog .default-dialog-container .inner-box-right{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
    .file-input-container{
        width: 100%;
    }
    .preview-dialog .default-dialog-container .inner-box:nth-child(2){
        padding: 1rem !important;
        padding-bottom: 2rem !important;
    }
}
@media only screen and (max-width: 480px){
    .default-dialog .default-dialog-container{
        width: 380px;
        
    }
    .preview-dialog .default-dialog-container .inner-box{
        width: 100%;
    }
    .file-input-container{
        width: 100%;
    }
}
button{
    outline: none !important;
    border: none;
    background-color: transparent;
}


/* --- Button styles --- */
.btn,
.a-btn,
.btn-outline,
.a-btn-outline{
    width: fit-content;
    padding: 0.75rem 1.25rem;
    background-color: var( --color-primary);
    border: 1.35px solid var( --color-primary);
    border-radius: 1.5rem;
    color: var(--color-white);
    font-weight: 500;
    font-size: var(--font-size-sm);
    text-decoration: none;
    text-align: center;
    transition: 0.3s ease-in-out;
}
.btn:visited,
.a-btn:visited{
    color: var(--color-white);
}
.btn-outline:visited,
.a-btn-outline:visited{
    color: var(--color-text-primary);
}
.a-btn:hover,
.btn:hover{
    background-color: var(--color-primary-dark);
    border: 1.35px solid var(--color-primary-dark);
}
.btn-outline,
.a-btn-outline{
    border: 1.35px solid var(--color-text-primary);
    background-color: transparent;
    color: var(--color-text-primary);
}
.btn-outline:hover,
.a-btn-outline:hover{
    border: 1.35px solid var(--color-primary-dark);
    background-color: var(--color-primary-dark);
    color: #fff;
}

@media only screen and (max-width: 1024px) and (orientation: portrait) {
    .btn, .a-btn, .btn-outline, .a-btn-outline{
        padding: 0.75rem 1.5rem;
    }
}

/* --- Accordian styles --- */
.accordion{
    /* background-color: #d5dcf1c0; */
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--font-size-sm);
    width: 100%;
    padding: 0.75rem 0;
    border: none;
    outline: none;
    transition: 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    text-align: left;
    font-weight: 400;
}

/* Accrodian icon styles */
.accordion i:first-of-type{
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    border-radius: 30px;
    padding: 0.4rem;
    margin-right: 0.6rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.accordion i:last-child{
    margin-top: -0.35rem;
    font-size: 1.55rem;
    color: var(--color-text);
    font-weight: 700;
    padding: 0rem 0.75rem;
}
.accordion span{
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
}
.bx-plus:before {
    content: "\002B"; /* Unicode for plus sign */
}
.bx-minus:before {
    content: "\2212"; /* Unicode for minus sign */
}

.panel {
    color: var(--color-text);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 2.25rem 0rem 2.25rem;
    transition: max-height 0.7s ease-in-out, opacity 0.5s ease-in-out, padding 0.1 ease-in-out;
    position: relative; /* Needed for pseudo-element positioning */
}

.panel.show {
    max-height: 500px; /* Adjust based on content */
    opacity: 1;
    padding: 0 2.25rem 0.75rem 2.25rem; /* Constant padding */
}

.panel::before {
    content: '';
    display: block;
    height: 0.75rem; /* Additional padding */
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}




  
.panel p{
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 300;
    line-height: 1.5;
}

.accordion.active .icon {
    transform: rotate(180deg);
    transition: transform 0.2s;
}

.accordion-container .card{
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: auto;
    background-color: var(--color-card-bg);
}
/*---------------------------------------------*/
*{
  font-family:  var(--font-primary);
}
input {
	outline: none;
	border: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }

input::-webkit-input-placeholder { color: #c6c6c6;}
input:-moz-placeholder { color: #c6c6c6;}
input::-moz-placeholder { color: #c6c6c6;}
input:-ms-input-placeholder { color: #c6c6c6;}

textarea::-webkit-input-placeholder { color: #c6c6c6;}
textarea:-moz-placeholder { color: #c6c6c6;}
textarea::-moz-placeholder { color: #c6c6c6;}
textarea:-ms-input-placeholder { color: #c6c6c6;}


label {
  display: block;
  margin: 0;
}







/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
    height: 60px;
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    margin-bottom: 1rem;
    text-align: start;
  }
  .otp-div{
      margin-top: 0.65rem;
  }
  .otp-div .alert-div p {
      font-size: var(--font-size-xs);
      color: rgb(5, 147, 5);
  }
  .otp-div,
  .new-pw-div{
      display: none;
  }
  
  .label-input100 {
    font-size: var(--font-size-sm);
    color: #c6c6c6;
    line-height: 1.2;
    display: block;
    position: absolute;
    pointer-events: none;
    width: 100%;
    padding-left: 1rem;
    left: 0;
    top: 20px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
  
  .input100 {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--color-text-primary);
    line-height: 1;
    padding: 0 1rem;
    font-size: var(--font-size-sm);
  }
  
  input.input100 {
    height: 100%;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
  
  /*---------------------------------------------*/
  
  .focus-input100 {
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    top: -1px;
    left: -1px;
    pointer-events: none;
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  
    -webkit-transform: scaleX(1.1) scaleY(1.3);
    -moz-transform: scaleX(1.1) scaleY(1.3);
    -ms-transform: scaleX(1.1) scaleY(1.3);
    -o-transform: scaleX(1.1) scaleY(1.3);
    transform: scaleX(1.1) scaleY(1.3);
  }
  
  .input100:focus + .focus-input100 {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  
  .eff-focus-selection {
    visibility: visible;
    opacity: 1;
  
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  
  .input100:focus {
    height: 48px;
  }
  
  .input100:focus + .focus-input100 + .label-input100 {
    top: 8px;
    font-size: var(--font-size-xs);
  }
  
  .has-val {
    height: 48px !important;
  }
  
  .has-val + .focus-input100 + .label-input100 {
      top: 8px;
      font-size: var(--font-size-xs);
  }
  
  /*==================================================================
  [ Restyle Checkbox ]*/
  .checkbox-div-parent{
      margin-top: 0.8rem;
      padding: 0 0.5rem;
  }
  .checkbox-div{
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .checkbox-div label{
      font-size: var(--font-size-sm);
      margin-left: 6px;
      color: var(--color-text-primary);
  }
  .forgot-btn{
    font-size: var(--font-size-sm);
  }
  
  .label-checkbox100 {
    font-size: var(--font-size-sm);
    color: #c6c6c6;
    display: block;
    position: relative;
    padding-left: 26px;
    cursor: pointer;
  }
  
  .input-checkbox100:checked + .label-checkbox100::before {
    color: #6675df;
  }
  
  .d-flex-1{
      display: flex;
      justify-content: space-between;
  }
  
  /*------------------------------------------------------------------
  [ Button ]*/
  .container-login100-form-btn {
    width: 100%;
    max-width: 24rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.9rem;
  }
  
  .login100-form-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 50px;
    border-radius: var(--border-radius-lg);
    background: var(--color-primary);
    font-size: var(--font-size-sm);
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
      font-weight: 500;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
  
  .login100-form-btn:hover {
    background: var(--color-primary-dark);
  }
  
  .login50-form-outline {
      width: calc(50% - 4px);
      height: 50px;
      background-color: transparent;
      border-radius: var(--border-radius-lg);
      text-transform: uppercase;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 1rem;
      letter-spacing: 1px;
      font-weight: 500;
      font-size: var(--font-size-sm);
  }
  
  .login50-form-outline i{
      font-size: 1.25rem;
  }
  
  .login50-form-outline span{
      flex: 1;
  }
  
  .container-login100-form-btn .login50-form-outline:nth-child(1){
      margin-right: 4px;
      border: 1px solid #b72323;
      color: #b72323;
  }
  .container-login100-form-btn .login50-form-outline:nth-child(1):hover {
      color: white;
      background: #b72323;
  }
  .container-login100-form-btn .login50-form-outline:nth-child(2){
      margin-left: 4px;
      border: 1px solid #201f34;
      color: #201f34;
  } 
  .container-login100-form-btn .login50-form-outline:nth-child(2):hover{
      color: white;
      background-color: #201f34;
  }
  
  .onlytxt{
      font-size: var(--font-size-xs);
      margin-top: 0.9rem;
      color: #9999;
      text-align: center;
  }





  /* --- Contact form style --- */
.contact-content form .form-div{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.contact-content .contact-btn-div{
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-content .contact-btn-div button{
  width: 30%;
}
.contact-content form .left,
.contact-content form .right{
  width: 47%;
  
}
.contact-content form .left{
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  margin-bottom: 1rem;
}

.contact-content form .right textarea{
  width: 100%;
  height: 96%;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: none;
  outline: none;
  resize: none;
  min-height: 224px;
}
.contact-content form .left .input-div{
  padding: 0;
  display: flex;
  min-height: unset;
  padding: 0.9rem 1rem;
  margin-bottom: 2rem;
}

.contact-content form .input-div input,
.contact-content form .input-div select{
  border: none;
  outline: none;
 height: 100%;
 flex: 1;
 font-size: var(--font-size-sm);
 font-weight: 400;
 margin-right: 1rem;
}
.contact-content form .input-div select{
  margin-right: 0;
}
.contact-content form .input-div input::placeholder,
.contact-content form  textarea::placeholder{
  color: #cccccc;
}
.contact-content form label{
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  margin-bottom: 10px;
}
.contact-content form select{
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  margin-right: 0.75rem;
}
.contact-content form select option{
 /* padding: 1rem; */
}
.contact-content .wrap-input100{
  margin-bottom: 1.25rem !important;
}

.contact-content .right .conatct-textarea{
  height: 224px;
  margin-bottom: 0;
}
@media only screen and (max-width: 1025px) and (orientation: portrait){
  .login50-form-outline,
  .login100-form-btn{
    height: 56px;
  }
  .wrap-input100{
    height: 75px;
  }
  .label-input100{
    top: 28px;
  }
}
@media only screen and (max-width: 991px){

}

@media only screen and (max-width: 768px){
  .login50-form-outline,
  .login100-form-btn{
    height: 50px;
  }
  .wrap-input100{
    height: 60px;
  }
  .label-input100{
    top: 22px;
  }
}

@media only screen and (max-width: 480px){
  .contact-content form .form-div{
    flex-direction: column;
  }
  .contact-content form .left, .contact-content form .right{
    width: 100%;
  }
  .contact-content{
    padding-bottom: 3rem;
  }
}

@media only screen and (max-width: 390px){

}


body {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  overflow: hidden;
  overflow-y: auto;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-text-primary);
}
p{
  font-weight: 300;
  color: var(--color-text-primary);
}
a{
  text-decoration: none;
}

/* Icons */
/* @import url('https://cdn-uicons.flaticon.com/2.4.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/2.4.0/uicons-brands/css/uicons-brands.css');
@import url('https://cdn-uicons.flaticon.com/2.4.0/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/2.4.0/uicons-solid-straight/css/uicons-solid-straight.css');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'); */

/* AOS CSS */
/* @import url('https://unpkg.com/aos@2.3.1/dist/aos.css'); */