.clsBranches {
    position:absolute;
    top:0px;
}

.clsBark {
    position: absolute;
    right: 0px;
    top:0px;
    z-index:1;
}

.clsGrass {
    position: absolute;
    bottom: 0;
    z-index:0;
}

.clsDeer {
    position: absolute;
    bottom: 0px;
    left:15px;
    z-index:1;
}

.clsCommonBox {
    width: 40%;
    padding:20px;
    border-radius:10px;
    /*background-image: url("../../../assets/img/commonbox.png");*/
    /*border-bottom-right-radius:40px;
    border-bottom-left-radius:40px;*/
}

.bgViolet { background-color:#B0205E !important; }
.bgGreen { background-color:#018E30 !important; }
.bgOrange { background-color:#E65F0E !important; }
.bgDarkBlue { background-color:#363A7A !important; }
.bgWhite { background-color:#FFF !important;  }
.bgClrProfile { background-color:#6E5CA6 !important;  }
.bgYellow { background-color:#F5BF28 !important; }
.clrBlack {color:#000 !important;}

.clsSignInBox {
    width: 40%;
    /*background-image: url("../../../assets/img/onlylogin.png");*/
    padding: 1% 2% 1% 2%;
    /*margin-top: 6%;*/
    border-radius:8px;
}

.clsSignInBox #divLogin {
    margin: 3% 0%;
    background-color:#F9BC2D;
    padding:4%;
    border-radius:8px;
}

.clsSignInBox #divForgotPassword {
    margin: 3% 0%;
    background-color:#F9BC2D;
    padding:4%;
    border-radius:8px;
}

#divCBookInfo {
    margin: 3% 0%;
    background-color:#F9BC2D;
    padding:1%;
    border-radius:8px;
}

#divLogin {
    margin: 3% 0%;
    background-color:#F9BC2D;
    padding:4%;
    border-radius:8px;
}

.clsBoxHeading {
    font-size:32px;
    color:#fff;
    font-weight:bold;
}

.clsBoxSubHeading {
    font-size:15px;
    color:#fff;
}

.clrBlink {
    color:#565188;
}

.clrWhite {
    color:#fff;
}

.clrBlink:hover {
    color:#565188;
}

.alist {
    min-height:25px;
}



.setup-box .setup-form {
    box-shadow: unset !important;
    background: unset !important;
}

#tabSignIn {
    border-radius: 10px !important;
    height: 30px !important;
    background-color: unset;
    font-weight: bolder;
    
}

#tabSignUp {
    border-radius: 10px !important;
    height: 30px !important;
    background-color: unset;
    font-weight: bolder;
    
}


.tabActive {
    background-color: #018E30  !important;
    color: #fff;
    border-radius: 10px !important;
    height: 30px !important;
}

#attributeList {
    font-size:10px;
}

.hKaradi {
    margin-top:2%;
}

#signup-form{
    margin-top:-1.1%;
}

#signup-form .form-floating label {
    font-size:11px;
}

.setup-box .setup-form input {
    height:40px !important;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
    height: calc(3.0rem + 2px) !important;
}

.form-select {
    font-size:11px !important;
}

.setup-box .setup-form input[type=submit] {
    border: none;
    /*background: url('../../../assets/img/submitbtn.png') no-repeat top left;*/
    background-color: #018E30 ;
    color:#fff;
}

.logoHeader {
    padding-top:0px;
}

#divForgotPassword {
    margin:5%;
}
.spagehead {
    margin: 0% 30%;
}

#booktitle {
    font-size:16px;
    
}

.avatar-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-wrap{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  overflow: hidden;        /* crop the img to the circle */
  display: inline-block;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border: 2px solid #eee;  /* optional border */
}

#coverimg img {
    border-radius:15px;
}

.gsinfo {
    font-size:11px;
}

.scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.grid-row {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap; /* Prevent wrapping */
}

.grid-item {
  flex: 0 0 auto;
  min-width: 180px;       /* Minimum width */
  max-width: 180px;       /* Max width for larger screens */
  width: 25vw;            /* Responsive width based on viewport */
  background-color: #fff;
  display: flex;
  flex-direction: column;  /* Make sure content stacks vertically */
  justify-content: flex-start; /* Align content to the top */
  border-radius: 6px;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 8px;
}

.gDetails {
    font-size: 11px;
     margin-top:10px;
}

.gridTitle {
    font-size: 13px;
    color: #0dcaf0;
    margin-bottom:10px;
}

/* Optional: Smooth scrolling and snap effect */
.scroll-container {
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.grid-item {
  scroll-snap-align: start;
}

/* Scrollbar styling for WebKit (Chrome, Edge, Safari) */
.scroll-container::-webkit-scrollbar {
  height: 10px; /* height for horizontal scrollbar */
}

.scroll-container::-webkit-scrollbar-track {
  background: #eee;     /* Light gray track */
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #4CAF50;  /* Green thumb */
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #388E3C;  /* Darker green on hover */
}

/* Firefox scrollbar styling */
.scroll-container {
  scrollbar-width: thin;
  scrollbar-color: #4CAF50 #eee;
}


#ResPagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
}

#ResPagination li {
    display: inline;
}
#ResPagination li {
    margin: 0 2px;
}
#ResPagination li a {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #000;
    background-color: #fff;
    border: 1px solid #dee2e6;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

#ResPagination li.active a {
    z-index: 1;
    color: #fff;
    background-color: #6E4436;
    border-color: #6E4436;
}

#ResPagination li a:hover {
    color: #0056b3;
    background-color: #6E4436;
    border-color: #6E4436;
}

.card-box {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 3px;
    margin-bottom: 5px;
}

.img-fluid {
    height:110px;
    padding:5px 5px;
    text-align:center;
}

.alist {
    padding:5px 0px;
    border-bottom:1px solid #eee;
}

.alist:last-of-type {
  border-bottom: none;
}

#lTitle {
    font-size:14px;
    font-weight:bold;
}

.mgLR10 { margin: 0px 10px;}
.p10 { padding: 10px;}
.aDetails {min-height:110px;}
.circleBox {border-radius:8px;}

/*--------------------------------------------------------------
# Custom Scroll bar
--------------------------------------------------------------*/
.scroll {
    overflow-y: scroll;
    height: 340px;
    width: 100%;
    padding: 6px;
}

.scroll::-webkit-scrollbar {
    width: 6px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(100,67,59,0.1);
    border-radius: 5px;
    background-color: #64433B;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px #FFCB6E;
    background-color: #FFCB6E;
}

.karadiHImg {
    width:21%
}


.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://audiobooks.karaditales.com/assets/img/bgdesktop.jpg');
    background-size: cover;     /* keeps full image visible */
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #ffffff;    /* fills blank space if aspect ratio differs */
    z-index: -1;                  /* keeps background behind content */
}

.clsBarks {
    position: fixed;       /* stays visible even when scrolling */
    left: -24px;            /* 10px from the left edge */
    bottom: -7px;          /* 10px from the bottom edge */
    z-index: 10;           /* appears above background but below main content if needed */
    width: 15vw;           /* responsive width (10% of screen width) */
    max-width: 15%;      /* limits size on large screens */
    height: auto;          /* maintain image aspect ratio */
    pointer-events: none;  /* optional – allows clicking through the image */
}

.clsRabbit {
    position: fixed;       /* stays visible even when scrolling */
    right: -6.4%;            /* 10px from the left edge */
    bottom: -10%;          /* 10px from the bottom edge */
    z-index: 0;           /* appears above background but below main content if needed */
    width: 21vw;           /* responsive width (10% of screen width) */
    max-width: 24%;      /* limits size on large screens */
    height: auto;          /* maintain image aspect ratio */
    pointer-events: none;  /* optional – allows clicking through the image */
}

.avatar-wrap {
    display: flex;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */
}



@media (max-width: 768px) {
    .background-image {
        background-image: url('https://audiobooks.karaditales.com/assets/img/bgmobile.jpg');
    }
}

@media (min-width: 769px) and (max-width: 1440px) {
    .background-image {
        background-image: url('https://audiobooks.karaditales.com/assets/img/bgdesktop.jpg');
    }
}

@media (min-width: 1441px) {
    .background-image {
        background-image: url('https://audiobooks.karaditales.com/assets/img/bglargedesktop.jpg');
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .background-image {
        background-image: url('https://audiobooks.karaditales.com/assets/img/bgtablet.jpg');
        background-size: cover;
        background-position: center top;
    }
}


@media screen and (max-width: 768px) {
    
    .m-m-t-10 {
        margin-top:10px;
    }

    .m-no-margin {
        margin:0px;
    }

    .m-no-padding {
        padding:0px;
    }

    .karadiHImg {
        width:45%;
    }

    .clsBoxHeading {
        font-size:29px;
        color:#fff;
        font-weight:bold;
    }

    .clsBoxSubHeading {
        font-size:13px;
        color:#fff;
    }

    #signup-form {
        margin-top:-2.3%
    }

    .clsDeer {
        display: none;
    }

    .clsBark {
        display: none;
    }

    .clsBranches {
        width:100% !important;
        height:50px;
    }

    /*.clsCommonBox {
        width: 350px !important;
        height: 530px;
        background-image: url("../../../assets/img/commonbox-mobile-nw.png?id=1331");
        padding: 15px 38px;
        margin:10px 0px 0px 0px;
    }*/

    .clsCommonBox {
        width: 90%;
        padding:20px;
        border-radius:10px;
        /*background-image: url("../../../assets/img/commonbox.png");*/
        /*border-bottom-right-radius:40px;
        border-bottom-left-radius:40px;*/
    }

    #attributeList {
        font-size:9px !important;
    }

    body {
        font-size: 11px !important;
    }

    .mg-t-25 {
        margin-top:10px !important;
    }

    .clsGrass {
        height:30px;
    }

    .medium-fnt {
        font-size: 12px;
    }

    .logoHeader {
        padding-top: 10px;
    }

    .clsSignInBox {
        /*margin-top:25%;*/
    }

    .spagehead {
        margin: 0% 14%;
    }
    .hKaradi {
        margin-top:24%;
    }

    .clsSignInBox {
        width:90%;
    }

    #headerbox img {
        width:50px !important;
        height:50px !important;
    }

    #librarylist {
        overflow-y:scroll;
        height:280px;
    }

    .footer{
        color:#fff;
    }

    .card-box {
        padding:10px;
    }

    .mHide {
        display:none;
    }
    
}