@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/futur.ttf') format('truetype'),
         url('../fonts/Futura-Bold-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
h2{
    word-wrap: break-word;
}

.book-content{    overflow: hidden;}
:root{
    --bg-theme: #f30000;
}
img{max-width:100%;}
a{text-decoration: none;}
body{padding:0; margin:0; background-color:#000; }
/* background-image: url('../img/1130.webp'); */
.bg-bgkr{ width:100%;  align-items: center; justify-content: center; background-repeat: no-repeat;background-size:cover; position: relative; height:100vh;}
/* .bg-bgkr::before{position: absolute; content: ''; background-color:#000; left:0; top:0; width:100%; height:100%;} */

.desktoph h2{font-size:80px;  color:#fff; margin-bottom: 0;}
.desktoph p{font-size:14px; color:#fff; margin-bottom: 0;}
.custom-radio label  {
    color: #fff;
    border: 1.5px solid #fff;
    flex: 1 1 200px;
    cursor: pointer;
    border-radius: 4px;
    width: 350px;
    height: 230px;
    display: flex
;
    align-items: center;
    justify-content: center;
    font-size: 47px;
    padding: 10px;
    font-weight: 700;
    text-align: center;
    max-width: 100%;
}
.desktop-options {display: flex;max-width: 1000px;flex-wrap: wrap;column-gap: 60px;row-gap: 60px;text-align: center;justify-content: center;}
.custom-radio input{display: none;}
/* .cu{margin-left: -60px;} */
input[type="radio"]:checked + label {
    border-color:var(--bg-theme); /* Change border color when checked */
}
.desktopsof{display: flex; align-items: center; row-gap:60px; flex-direction: column; justify-content: center;}
.downloadapp img{max-width: 25px;min-width: 25px;}
.downloadapp{
    display: flex
;
    column-gap: 0px;
    padding: 8px 13px;
    background: #ffffff4f;
    border-radius: 25px 0px 0px 25px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    position: absolute;
    right: 0;
    top: 36%;
}
.downloadapp:hover{background-color:var(--bg-theme); }
.downloadbtn{color:#fff; display: none;}
.desktoph{text-align: center;}
.logo{color:#fff; margin-bottom: 0; font-weight:800;}
.header{ padding:25px; position: absolute; top: 0;left: 0;}
.setting img{max-width:25px; min-width:25px; animation: rotateAnimation 5s linear infinite; cursor: pointer;}
.setting { position: absolute; right: 0; top: 30%; width: 55px; height: 40px; background-color: #ffffff4f; border-radius: 40px 0 0 40px; transition: 0.5s ease-in-out; display: flex; align-items: center; padding-left: 15px;}

/* mnodal  */
.modal-content{background-color: #373636; border:1px solid #ff000075; border-radius: 0;}
.column-gap{column-gap:12px;}
.btn-close img{max-width:16px; min-width:16px;}
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #000;
    background: none !important;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
}
.modal-body h6{
    color: #acabab;
    text-align: center;
    padding-bottom: 25px;
}
/* modal */

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* details work */
.details-work {
    max-width: 700px;
    width: 90%;
    margin: auto;
    height: 90vh;
    position: relative;
    top: 100px;
}
    .desktop-accordion{ display: flex ; flex-direction: column; row-gap: 40px;}
.accordion-button:not(.collapsed) {
    color: #fff !important;
   
    box-shadow: none !important;
}
.desktop-accordion-btn {
    border:none !important;
    border-radius: 31px !important;
    background-color:#ffffff4f !important;
    color:#fff;
    
}
.desktop-accordion-body {padding: 1rem 1.25rem;margin-top: 20px; color:#fff !important; border-left: 0.5px solid #ffffff85; border-right: 0.5px solid #ffffff85; padding: 4px 23px;}
.desktop-accordion-item{background-color: transparent;}
.accordion-button::after { background-image: url('../img/download-down.svg') !important; }
.details-heads{color:#fff; margin-bottom:0; }
.details-head{text-align: center; margin:40px 0;}
.book-content h6 {font-size:18px;}
.book-content p{font-size:14px;}
/* dsetails work */

.admin-nav{
    background-color: #373636;
    padding: 17px 0;
    border-bottom: 1px solid #646464;
    z-index: 111;
}
.sidebar {
    background-color: #373636;
    display: inline-block;
    height: 100vh;
    position: fixed;
    top: 0px;
    padding-top:90px;
    z-index: 11;
    width: 200px;
    transition: width 0.4s ease-in-out;
    border-right: 1px solid #646464;
}
.rw-gap{row-gap:10px;}
.rw-gaps{row-gap:24px;}
.nav-item.active{  background-color: #565656  !important;}
.nav-link{color:#fff;}
.nav-link{

&:hover{color:#fff;}
&:focus{color:#fff;}

}
.body-area{margin-left:200px; padding-top:15px; transition: margin-left 0.4s ease-in-out;}
.dashboard-head{font-size:30px; color:#fff; padding-left:0px;}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

}

.baricon {
    color: #fff;
    font-size: 25px;
    position: absolute;
    top: 91px;
    right: -52px;
  cursor: pointer;
    padding: 7px 15px;
    transition: 0.5s ease-in-out;

    &:hover {background-color:red;}
}
.sidebar.closed {
    width: 0;
}

.body-area.closed {
    margin-left: 0;
}

.baricon.closed {
    left: 10px;
}
.sidebar.closed ul {
    opacity: 0;
    visibility: hidden;
}
.nav-desktop-none{display: none;}
.nav-mobile-none{display: block;}
/* input */
.inputcustom{height:45px; background-color:#424141; color:#fff; border:none;
&:focus{background-color:#424141; color: #fff;}
&::placeholder{color:#acabab;}
}
/* input */
.themebtn{height: 45px; display: flex; align-items: center; border-radius: 4px; justify-content: center; color:#acabab; background-color:#424141; padding:8px 30px; cursor: pointer; transition: 0.5s ease-in-out;
&:hover{background-color: red; color: #fff;}
}

.manage-radio input{display: none;}
.manage-radio label {
    color: #fff;
    border: 1.5px solid #646464;
    flex: 1 1 200px;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
   height: 180px;
    display: flex
;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding: 10px 25px;
    font-weight: 600;
    text-align: center;
    max-width: 100%;
}
.selectdesign{  -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none; 
   background-image: url('../img/arrow-dwon.svg'); 
    background-repeat: no-repeat;
    background-position: right 15px center; 
    background-size: 10px; 
    padding-right:22px; 
    height:45px;
    border: none;
    cursor: pointer;
    background-color:#424141; color:#fff; border:none;
    &:focus {outline: none; box-shadow: none;}
}
.login{  border: 1px solid #646464;  background-color: #373636; padding:40px 20px; max-width:500px; width:90%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; row-gap:20px;
    h3{font-size:18px; text-align: center; margin-bottom:20px; color:#fff;}
}
.loginother{color:#acabab; cursor:pointer; text-decoration: none; transition: 0.5s ease-in-out;
&:hover{color:red;}
}
@media(max-width:1440px) {
    .custom-radio label {  color: #fff; border: 1.5px solid #fff;flex: 1 1 200px;cursor: pointer; border-radius: 4px; width: 330px; height: 200px; display: flex; align-items: center; justify-content: center; font-size: 33px; padding: 10px; font-weight: 700; text-align: center;}
    .desktoph h2 { font-size: 35px;}
    .desktopsof { row-gap: 50px;}

    .desktop-options { display: flex;width: 730px;}
}
@media(max-width:1220px) {
    .custom-radio label {  color: #fff; border: 1.5px solid #fff; flex: 1 1 200px;  cursor: pointer;  border-radius: 4px; width: 245px;  height: 168px;display: flex; align-items: center; justify-content: center; font-size: 28px; padding: 10px; font-weight: 700; text-align: center;}
    .desktoph h2 { font-size: 35px;}
    .desktopsof { row-gap: 50px;}
   
    .desktop-options { display: flex;width:500px;}
}


@media(max-width:768px) {
    .custom-radio label {  color: #fff; border: 1.5px solid #fff; flex: 1 1 200px;  cursor: pointer;  border-radius: 4px; width: 245px;  height: 168px;display: flex; align-items: center; justify-content: center; font-size: 28px; padding: 10px; font-weight: 700; text-align: center;}
    .desktoph h2 { font-size:48px;}
    .desktopsof { row-gap: 50px;}
    .baricon {
        color: #fff;
        font-size: 23px;
        position: absolute;
        top: 66px;
        right: -50px;
        cursor: pointer;
        padding: 7px 15px;
        transition: 0.5s ease-in-out;
    }
    .body-area {
        padding-top: 10px;
        margin-left: 0;
      
    }
    
    .dashboard-head {
        font-size: 21px;}
    .baricon {
        color: #fff;
        font-size: 23px;
        position: relative;
        top: 0;
        right: 0;
        cursor: pointer;
        padding: 7px 15px;
        transition: 0.5s ease-in-out;
    }
    .nav-desktop-none{display:block;}
    .nav-mobile-none{display: none;}
    
    /*  */
    .sidebar ul {
        list-style: none;
        padding: 0;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    
    }
    .sidebar.closed ul {
        opacity: 1;
        visibility: visible;
    }
    .body-area{margin-left:0px; padding-top:15px; transition: margin-left 0.4s ease-in-out;}
    .sidebar {
       
        width:0px;
        
    }
    .sidebar.closed {
        width: 200px;
    }
    
    /*  */
  
}
@media(max-width:576px) {
    .manage-radio label {height:79px; font-size:12px; font-weight: 600;}
    .downloadbtn {
        color: #fff; display: block;}
 .header {padding: 9px;}
/* .bg-bgkr{background-image: url('../img/1130.webp');} */
.desktop-options { display: flex;width: 100%; flex-wrap: wrap; column-gap: 60px;  row-gap: 28px; text-align: center; justify-content: center;}
.desktopsof {  row-gap:35px;flex-direction: column;justify-content: center;}
.desktoph h2 { font-size:45px;  color: #fff; text-align: center;}
.downloadapp { display: flex; column-gap: 2px; padding: 12px 19px; background: #ffffff4f; border-radius: 25px; cursor: pointer; transition: 0.3s ease-in-out;  position: relative;  right: 0; top: 0;}


}

@media(max-width:425px) {
    .desktoph h2 {font-size:40px;}
    .custom-radio label {color: #fff; border: 1.5px solid #fff;flex: 1 1 200px; cursor: pointer; border-radius: 4px; width: 171px; height: 101px; font-size: 20px;}
    .desktopsof {row-gap:60px;}
}
@media(max-width:375px) {
    .desktoph h2 {font-size:40px;}
    .custom-radio label {color: #fff; border: 1.5px solid #fff;flex: 1 1 200px; cursor: pointer; border-radius: 4px; width: 200px; height: 120px; font-size: 20px;}
    .desktopsof {row-gap: 55px;}
}
@media(max-width:320px) {
.header { padding: 9px;}
.desktopsof { row-gap:40px;}
.downloadapp { margin-top:0px;}
.desktoph h2 {font-size:35px;}
.custom-radio label {color: #fff;border: 1.5px solid #fff;flex: 1 1 200px;cursor: pointer;border-radius: 4px;width: 180px; height:110px; font-size: 16px;}
.setting img {max-width: 18px; min-width: 18px;}
.setting {position: absolute;right: 0;top: 30%;width: 40px;height: 33px;background-color: #ffffff4f;border-radius: 40px 0 0 40px;transition: 0.5s ease-in-out;display: flex;align-items: center; padding-left: 10px;}
}