:root {
    --white: #FFFFFF;
    --black: #000;
    --blackNav: #424242;
    --blueNav: #133A67;
    --yellowBanner: #FFC99D;
    --whiteBanner: #DADADA;
    --blueItem: #00ADB6;
    --blackItem: #3C4852;
    --infoGray: #808080;
    --redBanner: #BE6A67;
    --reviewsGray: #F1F1F1;
    --whiteFooter: #EEEEEE;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'cairo';
}

header {
    width: 100%;
    height:600px;
    background-size: cover;
    background-image: url("../../assets/images/bann.jpg");
    background-repeat: no-repeat;
}

header nav {
    width: 88%;
    margin: auto;
    display: flex;
}



header nav .navbar-nav {
    padding: 0px;
    margin: 0px;
}

header nav .navbar-nav .nav-item .nav-link {
    color: var(--white);
}

header nav .navbar-nav .nav-item .nav-link.active{
    color: var(--redBanner);
    font-weight: bolder;
}

header nav .navbar-nav .nav-item .nav-link.active::before {
    content: "";
    width: 30px;
    height: 1px;
    background-color: var(--redBanner) !important;
    position: absolute;
    bottom: 35px;
}


header nav .navbar-nav .nav-item .nav-link::before {
    content: "";
    width: 0px;
    height: 1px;
    background-color: var(--white);
    position: absolute;
    bottom: 35px;
}

header nav .navbar-nav .nav-item .nav-link:hover::before {
    width: 30px;
    transition: all 1s ease;
}

nav .btn-Nav1 {
    border: 1px solid var(--white);
    padding: 16px 52px;
    background-color: transparent;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

.banner{

    padding: 50px 0px ;
    width: 85%;
    margin: auto;
    margin-top: 100px;
    color: var(--white);
}

.banner h5{
    font-size: 16px;
    margin-bottom: 20px;
}

.banner h3{
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 15px;

}

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


.categories-course{
 width: 85%;
 display: flex;
 justify-content: space-between;
 margin: auto;
 margin-top: 50px;
 position: relative;
}

.categories-course .course-detalis{
width: 65%;
}
 
.info-cour div{
    padding: 10px 0px;
    padding-left: 40px;
    border-left: 1px solid rgba(168, 167, 174, 0.2);
}

.info-cour div span {
    font-weight: 600;
    font-size: 16px;
}

.info-cour div span:first-child{
   color:  #A8A7AE;
   font-size: 14px;
   margin-bottom: 5px;

}

.course-detalis-info h2{
    font-size: 40px;
    font-weight: bold;


}

.course-detalis-info p{
    font-size: 16px;
    color: #A8A7AE;
    margin-top: 15px;
}

.categories-course .fav{
    background-color: var(--blueNav);
    padding:  10px;
}

.categories-course .share{
    border: 1px solid var(--redBanner) ;
    margin-right: 10px;
    border-radius: 10px;
}

.categories-course .share{
    color: var(--redBanner);
    font-size: 16px;
    padding:0px 20px;
}

.categories-course .share svg{
    margin-left: 5px;
}

.personal-navbtns {
    border-bottom: 1px solid rgba(168, 167, 174, 0.2);
    margin-top: 40px;
    margin-bottom: 30px;
}
.personal-navbtns button{
    border-radius: 0px;
    font-size: 17px;
}
.personal-navbtns .active{
    border: none;
    color: var(--blueNav);
    font-weight: bold;
    border-bottom: 2px solid var(--blueNav);

}
.personal-navbtns button:not(.active) {
    border: none;
}

.overview h3{
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}

.overview p{
   color:#100F14;
   font-weight: 600;
}

.overview ul{
    list-style: none;
    margin-top: 20px;
}
.overview ul li{
    margin-bottom: 20px;
    color: #100F14;
    font-weight: 600;
}

.cards .cards__card{
    display: flex;
    align-items: center;
   padding:  10px;
   box-shadow: 5px 4px 30px 0px rgba(0, 0, 0, 0.07);
   border-radius: 10px;
   margin-bottom: 30px;

 }

.cards .cards__card div{
    margin-right: 20px;
}
.cards h4{
    font-size: 18px;
    color: #0A033C;
    font-weight: 600;
}

.cards span{
    color: #FF6652;
font-size: 14px;
text-align: right;
width: 100%;

}

.cards__card-layout{
    background-color: white;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0px;
    cursor:not-allowed;
}

.trainer{
    width: 100%;
}

.trainer h3{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.trainer__content{
border: 1px solid rgba(168, 167, 174, 0.2);
border-radius: 10px;
padding: 30px;

}

.trainer h4{
font-size: 20px ;
font-weight: bold;
}

.trainer span{
    color: #100F14;
}

.trainer p{
    font-weight: 600;

}

.comments h3{
    color: #100F14;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.comments .comments__content{
    box-shadow: 5px 4px 30px 0px rgba(0, 0, 0, 0.08);
padding: 30px 40px;
border-radius: 10px;
}

.comments .rate{
    display: inline-block;
    font-size: 60px;
    color: #5260E5;
    font-weight: bold;
}
 
.comments .com{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.comment__text{
    padding: 14px 0px;
    border-bottom: 1px solid rgba(168, 167, 174, 0.2);
    margin-bottom: 10px;
}

.comment__text h4{
    font-size: 16px;
    font-weight: bold;

}

.comment__text h3{
    font-size: 16px;
    font-weight: bold;
}
.comment__text p{
    font-size: 16px;
    font-weight: 600;
}

.comment__text span{
    font-size: 14px;
    color: #A8A7AE;
}

.cardd{

background-color: white;
}
.course-card{
    border: 1px solid rgba(168, 167, 174, 0.2);
    width: 80%;
    border-radius: 20px;
    padding: 30px;
    margin: auto;
    position: relative;
    top: -16%;
    background-color: white;
}

.course-card .subscribe{
background-color: var(--blueNav);
color: var(--white);    
padding: 16px 0px;

}
.course-card .video video{
    width: 100%;
    border-radius: 20px;
}

.course-card ul{
    list-style: none;
    margin-top: 40px;

}

.course-card ul li{
    padding: 16px 0px ;
    border-top: 1px solid rgba(168, 167, 174, 0.2);

}

.course-card ul li h4{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 14px;
}

.course-card ul li svg{
    margin-left: 10px;
}

.course-card ul li span{
    color: #100F14;
    font-weight: 600;
}
/* courses */

.courses {
    background-color: #FBFBFB;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:50px 0px ;
    position: relative;
}

.courses .rocket{
    position: absolute;
    left: 0;
    top: 0;
}

.courses .book{
    position: absolute;
    right: 0;
    bottom: 10%;
}
.courses .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: auto;
}

.content .courses__title {
    text-align: center;
    margin-top: 46px;
}

.content .courses__title h2 {
    font-size: 40px;
    font-weight: bold;
    color: var(--black);
}

.content .courses__title p {
    color: #A8A7AE;
    font-size: 16px;
}

.courses .content .courses__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95%;
    margin: auto;
    justify-content: center;

}



.courses .content .courses__content .pagination li {
    color: #989898;
    background-color: #F2F2F2;
    border-radius: 8px;
    padding: 16px 30px;
    cursor: pointer;
    border: none;
    font-size: 16px;
    font-weight: bold;

}

.courses .content .courses__content .pagination li.active {
    background-color: var(--redBanner);
    color: var(--white);
}

.courses .content .courses__content .card {
    border: none;
    box-shadow: 0px 0px 20px 0px rgba(62, 28, 131, 0.1);
    margin-bottom: 10px;

}

.courses .content .courses__content .card .card-body {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 16px 0px;
}

.courses .content .courses__content .card .card-body h2 {
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 1.5;
    margin-top: 10px;
}

.courses .content .courses__content .card .card-body h2 span {
    font-weight: lighter;
}

.courses .content .courses__content .card .card-body hr {
    width: 100%;
    background-color: #EFF3F7;
    opacity: 0.1;

}

.courses .content .courses__content .card .card-body .card_details button {
    background-color: var(--blueNav);
    color: var(--white);
    font-weight: bold;
    padding: 11px 27px;
}

.courses .content .courses__content .card .card-body .card_details div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--redBanner);
}

.courses .content .courses__content .card .card-body .card_details div span {
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    color: var(--black);
}


footer {
    background-color: var(--blueNav);
    background-image: url("../../assets/images/footer__bg.png");
    height: 500px;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0px;
    position: relative;


}


footer .foot__pic {
    position: absolute;
    bottom: 0;
    left: 0;
}

footer .footer__content {
    width: 75%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin: auto;
    margin-bottom: 100px;
    margin-top: 50px;
}

footer .footer__content h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
}

footer .footer__content ul li {
    padding: 4px 0px;
}

footer .footer__content ul li a {
    text-decoration: none;
    color: var(--whiteFooter);
}

footer .footer__content ul li a:hover {
    color: var(--white);
    text-decoration: underline;
}

footer .footer__content .subscribe form img {
    margin-bottom: 8px;
}

footer .footer__content .subscribe form h5 {
    color: var(--white);
    font-size: 24px;
    margin-bottom: 8px;
}

footer .footer__content .subscribe form p {
    color: var(--white);
    font-size: 14px;
    margin-bottom: 8px;
    padding: 10px 0px;
}

footer .footer__content .subscribe form div {
    background-color: var(--white);
}

footer .footer__content .subscribe form div .btn-footer {
    padding: 17px 40px;
    background-color: var(--redBanner);
    color: var(--white);
    border: none;
}