body{font-family: "Poppins", sans-serif;}

img{max-width: 100%;}
.text-color{color:#212529;}

h2{font-size: 32px; font-family: "Archivo Black", sans-serif;} h3{font-size: 24px;} h4{font-size: 20px;} h5{font-size: 18px;}
.yellow-text{color:#ff8800 !important}
.yellow-bg{background-color:#ff8800 !important}
.blue-text{color:#0C2B4B !important}
.blue-bg{background-color:#0C2B4B !important}
p{font-size: 14px;}

/* Preloader Styles */
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/* .container {
    max-width: 1536px;
} */
/* Navigation Part start*/
header{
    box-shadow: rgba(0,0,0, 0.2) 0 0 15px;
    -webkit-box-shadow: rgba(0,0,0, 0.2) 0 0 15px;
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 9;
}
.navbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #212529;
    padding: 10px 20px;
}

.navbar .logo {
    font-size: 24px;
    font-weight: bold;
}

.navbar .menu {
    display: flex;
    list-style: none;
    align-items: center;
}

.navbar .menu li {
    margin: 0 10px;
}

.navbar .menu a {
    color: #212529;
    text-decoration: none;
    padding: 8px 12px;
    position: relative;
    transition: color 0.3s ease;
    font-weight: 500;
}

 /* Hover effect */
 .navbar .menu a:hover {
    color: #0C2B4B; /* Tomato color */
}

/* Active effect */
.navbar .menu a.active {
    color: #0C2B4B;
    font-weight: 500;
}

/* Underline effect on hover */
.navbar .menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: #0C2B4B;
    transition: width 0.3s ease;
}

.navbar .menu a:hover::after,
.navbar .menu a.active::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

.btn-login {
    background-color: #0C2B4B;  
    color: #fff !important;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-login:hover {
    background-color: #0C2B4B !important; /* Darker blue on hover */
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2); /* Soft shadow */
}

a.btn-login:hover::after{background: transparent !important;}

.btn-login:active::after {
    background: transparent !important; /* Even darker blue when clicked */
    transform: scale(0.98); /* Slight press effect */
}

/* Mobile view */
@media (max-width: 768px) {
    .navbar{position: static;}
    .navbar .menu {
        display: none;
        flex-direction: column;
        background: #fff;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        position: absolute;
    }

    .navbar .menu.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    .navbar .menu li {
        text-align: center;
        margin: 0;
        padding: 10px 0;
    }
}

/* Navigation Part End*/


.slider {
    position: relative;
    width: 100%;
    height: 100%; /* Full-screen height */
    overflow: hidden;
}

/* Slides */
.slides {
    display: flex;
    width: 200%; /* 3 slides, 100% each */
    transition: transform 0.5s ease-in-out;

  
}

.slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: flex-start;
}

.slide1 { background: url('../images/banner1.jpg') no-repeat center center/cover;   padding:80px 30px; height:100dvh;}
.slide2 { background: url('../images/banner8.jpg') no-repeat center center/cover;   padding:80px 30px; height:100dvh;}



/* Slide Content */
.slide-content {
    background: rgba(255, 255, 255, 0.5); /* Dark overlay */
    padding: 40px;
    border-radius: 10px;
    margin-left:50px
}

.slide h1 {
    font-size: 42px;
    margin-bottom: 10px;
    font-family: "Archivo Black", sans-serif;
    color:#0C2B4B;
    font-weight: bold;
}

.slide p {
    font-size: 18px;
    margin-bottom: 15px;
}

.btn-slide {
    display: inline-block;
    background-color: #0C2B4B;
    color: #fff;
    padding: 12px 24px;
    font-size: 18px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-slide:hover {
    background-color: #0C2B4B;
    transform: scale(1.05);
}

/* Navigation Arrows */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    cursor: pointer;
    border: none;
}

.nav-arrow.left { left: 10px; }
.nav-arrow.right { right: 10px; }

/* Responsive Design */
@media (max-width: 768px) {
    .slide h1 {
        font-size: 32px;
    }

    .slide p {
        font-size: 16px;
    }

    .btn-slide {
        font-size: 16px;
        padding: 10px 20px;
    }
}

/* Box Container */
.info-box {
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:flex-start;
    text-align: center;
    background: #ededed;
    padding: 60px 20px 20px;
    margin: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Clean box shadow */
    transition: all 0.3s ease;
    height: 100%; /* Equal height */
    border-radius: 0; /* No border radius */
    border-bottom:2px solid #ff8800
}

/* Icon Style */
.info-box svg {
    font-size: 50px;
    color: #ff8800;
    margin-bottom: 15px;
}

/* Title Style */
.info-box h3 {
    font-size: 24px;
    margin-bottom: 25px;
    font-family: "Archivo Black", sans-serif;
    font-weight: 600;
    color:#0C2B4B;
}

/* Content Text */
.info-box p {
    font-size: 16px;
    color: #212529;
}

/* Hover Effect */
.info-box:hover {
    background: #0C2B4B;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

.info-box:hover svg , .info-box:hover p, .info-box:hover h3{
    color: #fff;
}


/* home page middle section start */
.aboutus{ margin-top:100px;
   /* background-image: url('../images/test_passing.jpg'); background-repeat: no-repeat;
   background-position: right top; min-height: 500px; background-size: 55%; */
}
.aboutus h2, .trad_course h2{
    font-family: "Archivo Black", sans-serif; font-weight: 800; color:#0C2B4B}
.aboutus h2 span  {color:#ff8800}

 /* Box Container */
 .custom-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    /* background: #f8f9fa; */
    padding: 0;
    margin: 0px;
    position: relative;
   /*  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); Clean box shadow */
    transition: all 0.3s ease;
    height: 100%; /* Same height for all boxes */
    border-radius: 0; /* Optional: No border radius */
    
}

/* Image Style */
.custom-box img {
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 15px;
}

/* Heading Style */
.custom-box h3 {
    font-size: 22px;
    color:#0C2B4B;
    margin-bottom: 10px;
}

/* Content Text */
.custom-box p {
    font-size: 14px;
    color: #212529;
    margin-bottom: 20px;
}

/* Button Style */
.custom-box .btn-start {
    background: transparent;
    color: #0C2B4B;
    padding: 10px 20px;
    border: none;
    transition: background 0.3s ease;
}
.custom-box .btn-start:hover {
    color:#ff8800
}
.bdr-btn {width:65%; border-bottom:1px dashed #ff8800; bottom:20px; position: absolute;left:0}
.home-contact{background-color: #0C2B4B;}
.home-contact form button:hover{background-color:#ff8800;}
.home-whyus {background-image: none !important;}
.home-whyus svg {font-size: 40px; color:#ff8800}
.home-whyus p {font-size: 14px}
/* home page middle section end */

/* Footer Section Start*/
footer, .signup-page{position: relative;}
footer h4{ font-size: 20px; color:#ffffff; text-align: left; }
footer ul {list-style: none; padding-left: 0 ;}
footer ul li {padding:3px 18px; background-image: url('../images/icon/right-arrow.svg'); background-repeat: no-repeat;
background-position: left center; background-size: 5%;}
footer ul li a{font-size: 14px; color:#fff; text-align: left;   text-decoration: none; }
footer ul li a:hover{font-size: 14px; color:#ff8800; text-align: left;   text-decoration: none; transition: 1s;}
.f-contact img{ width: 35px;}
.f-contact p {font-size: 14px;}
.f-contact p.address{background-image: url('../images/icon/map-maker.svg'); background-repeat: no-repeat;
    background-position: left top; background-size: 6%; padding-left:30px}
.f-contact p.phone{background-image: url('../images/icon/f-phone.svg'); background-repeat: no-repeat;
        background-position: left top; background-size: 6%; padding-left:30px}
        .f-contact p.f-email{background-image: url('../images/icon/f-email.svg'); background-repeat: no-repeat;
            background-position: left top; background-size: 6%; padding-left:30px}
            .f-contact p.f-email a{color: #fff; text-decoration: none;}
            .f-contact p.f-email a:hover{color: #ff8800;}
footer .social-media a{color:#fff; padding:4px 7px; border:1px solid #ffffff; border-radius: 100%; margin-right:7px;     width: 30px;
    height: 30px;
    text-align: center;
} 
footer .social-media a i{font-size: 14px;}
footer .social-media a:hover{background-color: #ff8800; transition: 1s;}
footer hr{border-color: #4681be}
.copyright p{ font-size: 14px; margin-bottom: 0;}
.copyright p a{ font-size: 14px; text-decoration: none; color:#fff;}
.copyright p a:hover{color: #ff8800;}
/* Footer Section End*/

/* Login Page Css Start */
.overlay{
    background-color: rgba(255, 255, 255, 0.5); position: fixed; z-index: 0; height: 100%; width: 100%;
}
.login-bg{background-image: url(../images/login-bg.jpg); background-repeat: no-repeat; background-size: cover; margin-top:0px}
.login-form {background-color: #ffffff; padding:25px; z-index: 1;}
.dnt-hv-acc {font-size: 12px;}
.fogt-psw a, .dnt-hv-acc a{font-size: 12px; color:#0C2B4B; text-decoration: none; }
.fogt-psw a:hover, .dnt-hv-acc a:hover{color:#ff8800}
.exam-list{ background-color: #ffffff; box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px;}
.exam-list:hover{box-shadow: rgba(0, 0, 0, 0.25) 0 0 40px; -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 0 40px; transition: 1s;}
.exam-list h3{text-align: left;}
.exam-list button{font-size: 16px; text-transform:capitalize; font-weight: 400;}

.numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 3px;
    max-width: 250px;
    margin: auto;
}
.box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cdcdcd;
    font-size: 18px;
    font-weight: 600;
    background: #ebefff;
}
.indicator {
    margin-top: 20px;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    display: inline-block;
    width: 100px;
    text-align: center;
    border-radius: 5px;
}
.red { background: red; }
.green { background: green; }

.que-ans .form-check input{ border-color:#212529}
.form-check label{font-size: 16px;}
/* .min-pass-marks{ 
    font-size: 16px; color:#212529; font-weight: 600; text-align: left; background-image: url('../images/icon/thumb.svg'); background-repeat: no-repeat; background-position: left center; padding-left:60px; background-size: 150px;
} */
.min-pass-marks{
    font-size: 16px;
    color: #212529;
    font-weight: 600;
    display: flex
;
    align-items: center;
    text-align: left;
    /* background-image: url(../images/icon/thumb.svg); */
    background-repeat: no-repeat;
    background-position: left center;
    /* padding-left: 60px; */
    background-size: 150px;
}

/* Login Page Css End */

.profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .profile-menu{
    position: relative;
  }
  
  .dropdown {
    position: absolute;
    top: 62px;
    right: 0%;
    width: 150px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1000;
  }
  
  .dropdown a {
    display: block;
    padding: 10px 18px;
    text-decoration: none;
    color: #333;
  }
  
  .dropdown a:hover {
    background-color: #f0f0f0;
  }
  
  #fs {
    padding: 1rem 0;
  }
  
  .qct {
    height: 200px;
  }
  
  .mainmargin {
    margin-top: 85px !important;
  }

  .dropdown1 {
    display: none;
    position: absolute;
    top: 62px;
    right: 0px;
    width: 180px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1000;
  }

  .dropdown1 a {
    display: block;
    padding: 10px 19px;
    text-decoration: none;
    color: #333;
  }

  .dropdown a:hover {
    background-color: #f0f0f0;
  }

  #fs {
    padding: 2rem 0;
  }
  .loc_states .form-control, .loc_cities .form-control{ font-size: 14px;}
.payment-plan mark{background-color: #ff8800; color:#fff;}

.tab-btn {
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
}
.tab-btn.active {
    background-color: #0C2B4B;
    color: white;
}
.price-card {
    border: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}
.price-card:hover {
    transform: translateY(-5px);
}
.price {
    font-size: 1.5rem;
    color: #0C2B4B;
    font-weight: bold;
}
.price span{color:#212529; font-size: 18px; font-weight: 600;}
.btn-plan {
    background-color: #ff8800;
    color: white;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
}
.btn-plan:hover {
    background-color: #0C2B4B;
    color: white;
}

.payment-plan .plan-content h3.price-card-title{font-size: 18px; font-weight: bold;}
.price-card ul li{text-align: left; padding:5px 0px 5px 5px;}
.price-card ul li svg {color: #ff8800; margin-right:10px; font-size: 20px;}

/* .signupbg {background-image: url('../images/signup_image.jpg'); background-repeat: no-repeat; background-size: cover;} */
.signup-form{
    background: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-signup {
    background-color: #0C2B4B;
    color: white;
}
.btn-signup:hover {
    background-color: #0C2B4B;
}
#exam-type .card h3 {font-size: 20px; color: #0C2B4B;}

.que-ans h3, .que-ans label {color:#000}
#questionGrid button {width: 40px !important;
    border: 0;
    height: 30px;
    margin-bottom: 10px;
    border-radius: 6px;}

    #allQuestions h3, #answerHistory h3, #examHistory h3,  #allQuestions ul li, #answerHistory ul li {color:#000; text-align: left;}
    #allQuestions ul li span, #answerHistory ul li span{color:#0C2B4B}
    #allQuestions img{max-width: 300px !important;}

    #allQuestions h4, #answerHistory h4{color:#0C2B4B !important; font-size: 18px;}
    h1#categoryTitle{color:#0C2B4B}
    .progress-bar{background-color: #f3f3f3;}
    #examSection {background-color:#f2f2f2;}

    #pagination .cursor-not-allowed {
        background-color: #dadada;
        border: 0 !important;
    }

    #pagination .bg-custom-blue { background-color: #0C2B4B;}
    /* #questionGrid .bg-primary {} */

    @media screen and (max-width:991px){
        .navbar .menu{
            padding-left:0;
        }
        .navbar .menu a {padding:8px 6px !important}
    }

    @media screen and (max-width:767px){
    footer .social-media a{
        margin-right:5px;
    }

    #province-container > div{max-width:49% !important}
}


    @media screen and (max-width:574px){
        #examHistory .table > thead th, #examHistory .table > tbody td{ font-size:14px}
        .examSection img { max-width: 250px !important;}
        #skipButton, #nextButton, #submitButton {padding-left: 15px !important;
            padding-right: 15px !important;
            font-size: 14px;}
            .slide-content{padding: 10px; margin-left:20px}
            .slide1,.slide2 {padding: 30px 30px;}
            .f-contact p.phone, .f-contact p.f-email, .f-contact p.address{
                background-size: 3% !important ;
            }
            #province-container > div{max-width:99% !important}
    }
    

    @media screen and (max-width:425px){
        #allQuestions img { max-width: 200px !important;}
 
    .f-contact p.phone, .f-contact p.f-email, .f-contact p.address{
        background-size: 4% !important;
    }
    #profileImageInput {width: 100% !important;}
}