body {font-family: 'Calibri', sans-serif; background: #e8e8ec; color: #1e2040; font-size: 16px;}

.headerOuter { background: url(../images/headerbg.jpg) no-repeat center center; padding: 30px 0 ;}

.headerInn { display: grid; grid-template-columns: 20% 1fr; gap: 20px;}

.rightTop a { color: #fff; text-decoration: none; font-weight: bold; font-size: 16px;}

a.themeBtn { background: #fe0f20; color: #fff; padding: 10px 20px; border-radius: 150px; text-decoration: none;}

a.themeBtn:hover { background: #ffff; color: #000;}



a, button, .hover-effect {

    transition: all 0.3s ease-in-out;

}

/* a:hover, button:hover, .hover-effect:hover {

    transform: scale(1.05);

} */

.rightTop { display: flex; gap: 20px; justify-content: flex-end; align-items: center;}

.TopMenu { padding-top: 30px;}

.TopMenu a { color: #fff; font-size: 16px; text-transform: uppercase; font-weight: bold; text-decoration: none !important;}

.TopMenu a:hover { color: #fff;}

.TopMenu ul  { display: flex; justify-content: flex-end;}

.TopMenu ul li { list-style: none; margin-right: 20px;}

.whiteBox { background: #fff; padding: 20px; border-radius: 15px; margin: 0px 0 ;}

.title  { color: #fe0f20; font-size: 22px; font-weight: bold; margin-bottom: 20px;}

.title2  { color: #fe0f20; font-size: 18px; font-weight: bold; }





.smallBox { width: 500px;  margin: 100px auto ;}

.label { display:  flex; justify-content: space-between; padding: 7px 0 ;} 

.label a, .signedOuter a { color: #fe0f20;  font-weight: bold;}





button { background: #fe0f20 !important; color: #fff !important; padding: 10px 40px !important; border-radius: 150px; text-decoration: none; border: none !important;}



.buttonOuter { padding: 10px 0 0 0;}

.smallBox { font-weight: bold ;}

.footerOuter { background: #1e2040; color: #fff; text-align: center; color: #fff; padding: 15px 0 ;}

.signedOuter { display: flex; gap:40px; justify-content: space-between; align-items: center; margin-top: 20px;}

/* .signedOuter input { width: 30px;} */

.remmeber { font-weight: normal; display: flex; gap: 10px; align-items: flex-start;}

.remmeber input { margin-top: 7px;}

.redlink { color: #fe0f20;}

.alredyaccount { padding-top: 15px;}

.stepList ul  {  display: flex; padding: 30px 0 0 0;}

.stepList ul li { list-style: none; margin-right: 20px; display: flex; align-items: center; gap: 10px; font-size: 22px;}

.stepList ul li.act { color: #fe0f20;}

.stepList ul li span { width: 40px; height: 40px; background: #838496; display: flex; justify-content: center; align-items: center; border-radius: 50px; color: #fff;}

.stepList ul li.act span {  background: #fe0f20;}

.formTitle { font-weight: bold;}

.red {  color: #fe0f20;}

.whiteBox .lable  { display: block; font-weight: bold; color: #1e2040; padding-bottom: 7px;}

.formRow { padding: 10px 0 ;}

.form-control { border-radius: 10px; }

.width_70 { width: 70%;}

h1 { font-weight: bold; font-size: 22px;}

.prices { font-weight: bold; color: #fe0f20;}

.package_List_ouer { display: grid; gap: 40px; grid-template-columns: 1fr 1fr 1fr;}

.packageList { border-radius: 7px ; border: solid 1px #afbbd3 ; }

.packageradioRow { background: #1e2040;  border-radius: 7px 7px 0 0 ; padding: 10px; color: #fff; font-size: 22px; font-weight: bold;}

.packageListContent { padding: 15px 20px 15px 20px;}







.custom-checkbox {

    display: flex;

    align-items: center;

    cursor: pointer;

    gap: 10px;

    position: relative;

}



.custom-checkbox input {

    display: none;

}







.custom-checkbox .checkmark {

    width: 20px;

    height: 20px;

    background-color: white;

    /* border: 2px solid gray; */

    border-radius: 4px;

    position: relative;

    transition: background-color 0.3s, border-color 0.3s;

}



/* Change color when checked */

.custom-checkbox input:checked + .checkmark {

    background-color: red;

    border-color: red;

}



/* Checkmark icon */

.custom-checkbox input:checked + .checkmark::after {

    content: "✔";

    display: block;

    text-align: center;

    color: white;

    font-size: 16px;

    font-weight: bold;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.instructorBox { display: flex; width: 50%; background: #00000010; justify-content: space-between; padding: 20px; border-radius: 15px;}

.instrcotrName { font-size: 22px; font-weight: bold;}

.searchInstrotor a { color: #fe0f20;}
.searchInstrotor div { background-color: #fe0f20; color: #fff; border-radius: 15px; padding: 7px 15px; cursor: pointer;}
.purchaseType { padding-top: 15px;}

.Datekey { display: flex; gap: 20px;  padding: 10px 0 ; align-items: center;}

.avaibale { width: 20px; height: 20px; background: #fff; border-radius: 50%; border: solid 1px #00000050;}

.notavaibale { width: 20px; height: 20px; background: #d3d3d3; border-radius: 50%;} 

.seletedDay { width: 20px; height: 20px; background: #ffd4d5; border-radius: 50%;} 

   

.name { font-weight: bold;}



.calendar-container {

    width: 315px;

    padding: 0px;

    /* border: 1px solid #ccc; */

    text-align: center;

    font-family: Arial, sans-serif;

}



.calendar-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.calendar-container button {

    cursor: pointer;

    padding: 5px 10px !important;

    border: none;

    background: #1e2040 !important;

    color: white;

    font-size: 16px;

    border-radius: 4px;

}



.calendar-container button:hover {

    background: #0056b3;

}



.calendar-days {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    font-weight: bold;

    margin-top: 10px;

}



.calendar-dates {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 5px;

    margin-top: 10px;

}



.date {

    padding: 10px;

    border-radius: 4px;

    cursor: pointer;

    transition: background 0.3s;

}



.date:hover {

    background: #f0f0f0;

}



.selected {

    background: red;

    color: white;

    font-weight: bold;

}



.dateCalender { display: flex; gap: 25px;}

.seletedDate { color: #fe0f20; margin: 0 0 00px 0 ; padding: 7px 15px  7px 0px; font-weight: bold; 
    
     border-radius: 7px;}  

.avaibaleTime { display: flex; gap: 20px; flex-wrap: wrap;}

.timeLIst { background: #1e2040; padding: 10px 30px; color: #fff; border-radius: 5px; cursor: pointer; margin-bottom: 15px;}

.timeLIst:hover, .timeLIst.act { background: #fe0f20; }

.timeSlot { border-left: solid 3px #d2d2d9; padding-left: 30px;}

.cartRow { display: grid; grid-template-columns: 1fr 1fr 5%; justify-content: space-between; padding: 7px;}



.cardHeader  { background: #e8e8ec; border-radius: 7px 7px 0 0 ;}

.cardHeader .cartRow { font-weight: bold;}

.tableCart  { border: solid 1px #afbbd3; border-radius: 7px;}

.totalRow { display: grid; grid-template-columns: 1fr 5%; padding: 7px; gap: 20px;}

.totalName { text-align: right;}

.totalCOunting { border: solid 1px #afbbd3;  font-weight: bold;}

.remmeberCart { text-align: right; display: flex; justify-content: flex-end; padding: 15px 0 ;}

.carbtn { text-align: right;}

.userProfile { display: grid; grid-template-columns: 20% 1fr; gap: 50px; padding: 50px 0 ;}

.userLeft { background: #fff; border-radius: 15px; padding: 15px 25px;}

.userLeft ul { padding: 0 0 30px 0; margin: 0;}

.userLeft ul li { list-style: none; border-bottom: solid 1px #c1c1ca;}

.userLeft ul li a { color: #1e2040; font-weight: bold; text-decoration: none; padding: 7px 0 ; display: block;}

.userLeft ul li a:hover { color: #fe0f20;}

.boxes { display: grid; gap: 30px; grid-template-columns: 1fr 1fr 1fr;}

.box { background: #fff; border-radius: 15px; }

.box img { border-radius: 15px; width: 100%;}

.boxContent { padding: 30px;}

.boxContent .themeBtn { background: #fe0f20; color: #fff; border-radius: 15px; width: 100%; text-align: center; display: block;}

.boxContent .themeBtn:hover { background: #1e2040; color: #fff;}

.lessonsRow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding: 10px 0 ;}

.lessionsHeader { font-weight: bold;}

.lessionsList .lessonsRow { border-top:solid 1px #ccd3da}

.navbar-toggler { display: none !important;}

.green { color: green;}

.changeyourDetails .formRow label { display: block; font-weight: bold;}

.sections { border-top: solid 1px #00000030; margin-top: 20px; padding-top: 20px;}





.addressList  { border:solid 1px #ccd3da; padding: 20px ; border-radius: 10px;}

.addressList h5 { font-weight: bold;}

.addressListOuter { display: grid;grid-template-columns: 1fr 1fr; gap: 40px; padding: 25px  0 0 0;} 

button.btn-close { width: 30px !important; height: 30px !important; color: #fff !important; padding: 0px !important; text-align: center; opacity: 1;}

@media (min-width: 100px) and (max-width: 767px) {

.headerRight { display: none !important;}
.smallBox {
    width: 95%;
    margin: 20px auto;
}

.headerInn { grid-template-columns: 1fr; text-align: center;}
.headerLeft img { width: 100px;}
.boxes, .userProfile { grid-template-columns: 1fr; gap: 0;}
.boxes { gap: 40px;}
.userProfile { padding: 0;}
.stepList ul { display: grid; grid-template-columns: 1fr; gap: 15px;}
.stepList ul li { font-size: 16px;}
.p-6 { padding: 0px !important;}
.width_70 { width: 100%;}
.package_List_ouer { grid-template-columns: 1fr; gap: 15px;}
.dateCalender, .instructorBox { width: 100%; grid-template-columns: 1fr; display: grid; gap: 15px;}
.calendar-container, .flatpickr-calendar.open, .flatpickr-calendar.inline  { width: 100% !important; max-width: 100% !important;}
.cartRow { grid-template-columns: 1fr 1fr 1fr;}
.totalRow { grid-template-columns: 1fr 1fr;}
#payment-form{ width: 100% !important;}
#payment-form .row { margin: 0px !important;}
.whiteBox { margin-bottom: 20px;}
.addressListOuter  { grid-template-columns: 1fr;} 
.userRight { padding-top: 30px;}
}

/* Hide sidebar by default on small screens */
#sidebarMenu {
    display: block;
    background: #f0f0f0;
    padding: 15px;
}

/* Show the button only on small screens */
.settings-toggle {
    display: none;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    font-size: 16px;
    margin: 10px;
    border-radius: 5px;
}

@media (max-width: 768px) {
    #sidebarMenu  {  display: none;}
    .settings-toggle {
        display: block;
    }
}