:root{
    --primary: #be246e;
    --primarylight: #df89b2;
    --primarybtn: #bd4d83;
    --primarybtnhover: #ab537d;

    --red: #a60000;
    --redlight: #f9a3a3;
    --redbtn: #000;
    --redbtnhover: #303030;

    --blue: #0010a6;
    --bluelight: #9aa2f1;
    --bluebtn: #000;
    --bluebtnhover: #303030;

    --green: #138700;

    --yellow: #b4b600;

    --orange: #fa8d00;
}


body,html{ height: 100% }

body{
    margin: 0;
    padding: 0;
    font-family: 'poppins', sans-serif;
    font-size: 15px;
    background: white;
}



*,p,h1,h2,h3,h4,h5,h6,ul{ margin: 0 }

ul{
    padding: 0;
    list-style-type: none;
}

a{
    color: inherit;
    text-decoration: none;
}

a:hover{
    text-decoration: none;
}


.fw1{ font-weight: lighter; }
.fw2{ font-weight: normal; }
.fw3{ font-weight: bold; }

.inline{ display: inline-block; }

.flex{display: flex;}
.jc{ justify-content: center; }
.jcb{ justify-content: space-between; }
.ai{ align-items: center; }
.inflex{ display: inline-flex; }
.jce{ justify-content: flex-end }


.rel{ position: relative; }
.abs{ position: absolute; }

.fs11{ font-size: 11px }
.fs12{ font-size: 12px }
.fs13{ font-size: 13px }
.fs14{ font-size: 14px }
.fs16{ font-size: 16px }
.fs17{ font-size: 17px }
.fs18{ font-size: 18px }
.fs19{ font-size: 19px }
.fs20{font-size: 19px;}

.fs30{ font-size: 30px }
.fs40{ font-size: 40px }
.fs50{ font-size: 50px }

.br100{ border-radius: 100px }

.m0{ margin: 0 }

.m10{margin: 10px 0;}
.m15{ margin: 15px }
.m20{margin: 20px 0;}

.mt5{ margin-top: 5px }
.mt10{ margin-top: 10px }
.mt15{ margin-top: 15px }
.mt20{ margin-top: 20px }

.mb5{ margin-bottom: 5px }
.mb10{ margin-bottom: 10px }
.mb15{ margin-bottom: 15px }
.mb20{ margin-bottom: 20px }

.mr5{ margin-right: 5px }
.mr10{ margin-right: 10px }
.mr20{ margin-right: 20px }


:root{
--first: #0F5EA7;
--second: #00A54E;

}

.cwhite{ color: white !important }


.cgray{ color: gray }

.cfirst{ color: var(--first) }
.csecond{ color: var(--second) }




.logoimg{

width: 200px;
}

.mainUl{

}
.mainUl li{
    display: inline-block;
}
.mainUl a{

display: block;

margin: 0 10px;
}

.searchTopFlex{

align-items: center;

border: 1px solid gray;

margin-left: 30px;
}
.inptopsearch{

background: none !important;

border: 0 !important;

outline: none !important;

width: 100%;

padding: 7px 12px;

padding-left: 37px;
}
.searchicontop{
    
position: absolute;
    
transform: translateX(12px);
}


.header{
    
padding: 17px 0;
    
background: #f1f1f1;
}

.headerFlex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.videoBack{

border: 1px solid gray;

margin: 12px 0;
}
.thumbBack{

overflow: hidden;

height: 200px;
}
.thumbimg{
    transition: 0.4s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbBack:hover img{
    transform: scale(1.1);
}


.videoTitle{

font-weight: bold;

font-size: 26px;

color: var(--blue);
}

.videoCategory{
    color: gray;
    font-size: 13px;
    margin: 7px 0 10px;
}

.viewTxt{

}
.viewTxt i{

margin-right: 5px;
}

.videoCont{
    
padding: 50px 0;
}



.videoBack .inner{
    
padding: 16px 20px;
}

.btn1{
    
border: 1px solid black;
    
padding: 10px 20px;
    
display: inline-block;
    
color: black;
    
font-weight: 500;
}



.bars{

position: absolute;

right: 20px;

top: 11px;

display: none;

cursor: pointer;

z-index: 999;
}

.bars span{
    
background: black;
    
width: 23px;
    
height: 2px;
    
display: block;
    
margin: 6px 0;
}





/* homepage */


section.section-banner {
    padding: 70px 0;
    background: #060273 url(../img/back3.jpg);
}

.section-banner h2 {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 65px;
    line-height: 54px;
    color: #fff;
}

.section-banner h2 span {
    /* background: var(--blue); */
    color: var(--bluelight);
    /* padding: 3px 10px; */
    /* display: inline; */
    /* font-size: 28px; */
    /* line-height: 34px; */
}

.section-banner h2 span:first-child {
    background: transparent;
    color: var(--bluelight);
    font-size: 42px;
    padding: 0;
}

.section-banner p {
    color: #fff;
    margin: 20px 0;
}

.section-banner a {
    background: var(--bluebtn);
    color: #fff;
    padding: 10px  25px;
    display: inline-block;
    /* margin-top: 12px; */
    border-radius: 5px;
    transition: 200ms ease-in-out;
}

.section-banner a:hover {
    background: var(--bluebtnhover);
}

.section-banner .col-lg-7 {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.discount img {
    width: 410px;
    position: relative;
    z-index: 1;
}

.discount::after {
    position: absolute;
    width: 230px;
    height: 230px;
    background: var(--bluelight);
    /* border-radius: 100%; */
    left: 0;
    right: 0;
    margin: auto;
    top: 60px;
    z-index: 0;
    transform: rotate(45deg) skew(10deg, 10deg);
}

.discount {
    position: relative;
}



.description {
    color: #999;
    font-size: 13px;
}


.orange {
    color: orange;
}

.viewTxt i {
    color: var(--blue);
    font-size: 14px;
}

.viewTxt span {
    font-size: 12px;
    color: #333;
}

/* footer */

/* styles.css */

/* Style for the view count */
.viewTxt {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #555; /* Change color as needed */
}

.viewTxt i {
    margin-right: 5px; /* Space between icon and text */
}

/* Footer styles */
.footer {
    background-color: #333; /* Dark background for footer */
    color: #fff; /* White text color */
    padding: 40px 0 20px; /* Padding for footer */
}

.footer h3 {
    margin-bottom: 15px; /* Space below headings */
    font-size: 18px; /* Heading size */
}

.footer p {
    font-size: 14px; /* Paragraph size */
}

.footer ul {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    display: flex;
    gap: 10px;
}

.footer ul li {
    margin-bottom: 10px; /* Space between list items */
}

.footer ul li a {
    color: #fff; /* White link color */
    text-decoration: none; /* Remove underline */
}

.footer ul li a:hover {
    text-decoration: underline; /* Underline on hover */
}

.copyright {
    text-align: center; /* Center copyright text */
    margin-top: 20px; /* Space above copyright */
    font-size: 12px; /* Smaller font size */
    border-top: 1px solid #454545;
    padding-top: 20px;
}

/* Custom styles for the detail page */
.detail-page {
    padding: 40px 0;
}

.detail-page h2 {
    font-size: 2.5rem;
    margin: 20px 0;
}

.detail-page .category,
.detail-page .date {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 15px;
}

.detail-page .video-container {
    /* margin-bottom: 30px; */
}

.detail-page .long-description {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    border-top: 1px solid #ccc;
    padding-top: 20px;
    margin-top: 20px;
    color: #333;
}

.detail-page .share-buttons {
    margin-top: 20px;
}

.related-posts {
    list-style: none;
    padding: 0;
}

.related-posts li {
    margin-bottom: 20px;
    display: flex;
}

.related-posts img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    width: 50%;
    margin-right: 20px;
}

.related-posts h4 {
    font-size: 1.2rem;
    margin: 0 0 10px;
}

.related-posts .btn-secondary {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.related-posts .btn-secondary:hover {
    background-color: #0056b3;
}

.video-container iframe {
    width: 100%;
    height: 400px;
}

.detail-page p.category, .detail-page p.date {
    font-size: 14px;
    margin: 0 0 5px;
}

.video-container {
    margin-top: 0px;
}

.related-posts li i {
    margin-right: 10px;
    color: var(--blue);
}

.related-posts li p {
    font-size: 13px;
}

.detail-page h3 {
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 21px;
    font-weight: 600;
    color: var(--blue);
}

button.btn.btn-primary {
    background: var(--blue);
    border: 1px solid var(--blue);
}

@media screen and ( max-width: 992px ) {


.bars{
    display: block;
}

.headerFlex{
    display: block;
}
.searchTopFlex{
    margin: 0
}


.mainUl{
    padding: 17px 0;
    text-align: center;
}


.headerFlex{
    display: none;
}



.section-banner h2 span:first-child {
    font-size: 40px;
}

.section-banner h2 {
    font-size: 40px;
    display: block;
    width: 100%;
}

.discount::after {
    display: none;
}

.discount img {
    margin-top: 20px;
    width: 100%;
}




.detail-page h3 {
    margin-top: 40px;
}



.mb-90{
    margin-bottom: 90px;
    height: 90px;
}

footer{
    display: none;
}



}
 

/* Mobile Navigation Bar Styles */
.mobile-nav {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff; /* Background color */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Shadow effect */
    text-align: center;
    padding: 10px 0;
    z-index: 1000; /* Ensure it is above other content */
    justify-content: space-around;
}

.mobile-nav .nav-item {
    /* flex: 0 0 20%; */ /* Equal space for each item */
    color: #333; /* Text color */
    text-decoration: none; /* Remove underline */
    font-size: 13px; /* Font size */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    gap: 6px;
}

.mobile-nav .plus-icon {
    position: relative;
    top: -25px; /* Adjust position of the plus icon */
    background-color: var(--blue); /* Background color for the plus icon */
    border-radius: 50%; /* Circular shape */
    width: 50px; /* Width of the icon */
    height: 50px; /* Height of the icon */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #080404; /* Icon color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow effect */
    /* flex: 0 0 13%; */
    /* border: 5px solid #fff; */
}

.mobile-nav .nav-item:hover {
    color: #007bff; /* Change color on hover */
}

.mobile-nav .nav-item i {
    font-size:20px;
    color: var(--blue);
}

.mobile-nav .plus-icon i {
    color: #ffffff;
}

/* Media Query for Mobile View */
@media (max-width: 992px) {

    .mobile-nav {
        display: flex; /* Show the nav bar on mobile */
    }

    section.section-banner{
            text-align: center;
            padding: 40px 0;
    }

.section-banner a{
    
display: block;
    
margin: 0 auto;
}

.section-banner p{
    
width: 100%;
}










}















/* user detail page start */



.userDetailBox{

padding: 70px 0;
}

.userDetailBox .inner{

text-align: center;
}


.userDetailBox .userimg{

width: 140px;

height: 140px;

border-radius: 200px;

box-shadow: 0 22px 23px hwb(0deg 0% 100% / 9%);

border: 1px solid #d3d3d3;
}
.userDetailBox .imgBack{

display: inline-block;
}
.verifiedTick{
    position: absolute;
    background: #31e731;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    right: 0;
    color: white;
    bottom: 0;
}
.userDetailBox .name{

font-weight: 600;

margin: 30px 0 10px;
}
.userDetailBox .desc{
    
color: #969696;
    
margin: 0 auto 16px;
    
font-size: 13px;
    
max-width: 340px;
}

.twoBtnFlex{

gap: 15px;

margin: 0 0 30px;
}

.twoBtnFlex a{

display: flex;

align-items: center;

justify-content: center;

border: 1px solid #dedede;

border-radius: 100px;

width: 35px;

user-select: none;

height: 35px;
}
.twoBtnFlex a img{

width: 19px;
}



.btmBtnFlex{

gap: 12px;
}

.btmBtnFlex a{border: 1px solid #dedede;padding: 10px 20px;border-radius: 100px;font-size: 13px;box-shadow: 0 5px 16px #0000000a;color: black !important;!i;!;transition: 0.3s ease;}



.btmBtnFlex .btnFirst{
    
background: #5dfd96;
    
border-color: #5dfd96;
}

.btmBtnFlex .btnFirst:hover{
    background: #56e288
}



.twoBtnFlex a:hover{
    border: 1px solid #bdbdbd;
    box-shadow: 0 3px 10px #00000024
}


.btmBtnFlex a:hover{
    box-shadow: 0 3px 10px #00000024
    
}



/* user detail page end */



/* inscription start */



.inscriptionBack{

}


.regBack{

padding: 17px;

border: 1px solid #dedede;

border-radius: 12px;
}

.RegTop{

background: #5d79fd;

text-align: center;

padding: 30px 10px;

border-radius: 12px;

margin: 0 0 20px;
}
.RegTop .title{
    
}
.RegTop p{
    
font-size: 13px;
    
margin: 10px 0 0;
}
.lbl1{

font-size: 13px;
}

.inp1{

width: 100%;

padding: 6px 10px;

border: 1px solid #dedede;

border-radius: 7px;

margin: 0 0 16px;

outline: none !important;
}
.inp1:hover,
.inp1:focus
{border: 1px solid #5d79fd;}



.regBtn{
    width: 100%;
    text-align: center;
    border: none !important;
    outline: none !important;
    background: #5dfd96;
    padding: 9px 10px;
    transition: 0.3s ease;
    border-radius: 8px;
}
.regBtn:hover{
    background: #56e288;
}


.companyFlex{
    display: flex;
    align-items: center;
    display: inline-block;
    user-select: none;
    cursor: pointer;
}
.companyCheck{
    
width: 15px;
    
height: 15px;
    
margin-right: 6px;
}


#companyDetails{
    display: none;
    padding: 20px 0 0;
}


.textarea1{

max-width: 100%;

max-height: 500px;

width: 100%;

min-height: 100px;
}













/* inscription end */