
*{box-sizing: border-box;}
.roadmap-title{border-left: 1px solid #dedede;border-top: 1px solid #dedede; padding: 5px;position: relative; font-size: 12px; font-weight: 700; color:#777;}
.roadmap-title big{font-size: 30px;line-height: 30px; font-weight:normal; display: inline-block; vertical-align: middle; margin-right:6px;}
.roadmap-title em{background: #dedede; border-radius: 50%; color: #9b9b9b; cursor: pointer; font-size: 14px; font-style: normal; font-weight: 900; height: 24px; line-height: 28px; position: absolute; right: 5px; text-align: center; top: 8px; width: 24px;}

.roadmap-maintitle{position: relative; z-index:2;}

.roadmap-title i{background: #f7f7f7; border: 1px solid #dedede; border-radius: 10px 0 10px 0; display: none; font-size: 12px; font-style: normal; left: -1px; line-height: 18px; padding: 20px; position: absolute; top: 52px; width: 562px; z-index: 30; font-weight:normal;}
.roadmap-title i:after, .roadmap-title i:before{border: solid transparent; bottom: 100%; content: " "; height: 0; left: 270px; pointer-events: none; position: absolute; width: 0;}
.roadmap-title i:before{border-color: hsla(0, 0%, 87%, 0) hsla(0, 0%, 87%, 0) #dedede; border-width: 13px; margin-left: -13px;}
.roadmap-title i:after {border-color: hsla(0, 0%, 97%, 0) hsla(0, 0%, 97%, 0) #f7f7f7; border-width: 12px; margin-left: -12px;}

.roadmap-title em:hover + i{display:inline;}

.roadmap-maintitle .colthird .roadmap-title i{left: auto; right:0;}
.roadmap-maintitle .colthird .roadmap-title i:before{left: auto; right:3px;}
.roadmap-maintitle .colthird .roadmap-title i:after{left: auto; right:4px;}

.roadmap-row{margin:0 -11px;}
.roadmap-col{padding: 0px 11px;}
.colfirst{float: left; width: 312px; position: relative; z-index:1; box-sizing: border-box;}
.colsecond{float: left; width: 312px; box-sizing: border-box;}
.colthird{float: left; box-sizing: border-box; width:624px;}
.colfourth{float: left; width:936px; box-sizing: border-box;}
.colfourthsub{float: left; width: 312px;}
.colhalf {float: left; width: ; box-sizing: border-box;}

.colthirdsub{float: left; width:312px; box-sizing: border-box;}
.floatright{float: right;}
.roadmap-col.colthirdsub.floatright{min-height: 45vh;}


.roadmap-container{padding-left: 15px; padding-right: 15px; position: relative; font-family: "Fira Sans", sans-serif; color:#777;}

@media (min-width: 960px) {
    .roadmap-container{margin-left: auto; margin-right: auto; width: 940px; padding:0 11px;}
}

@media (min-width: 1260px) {
    .roadmap-container{
        margin-left: auto;
        margin-right: auto;
        width: 1250px;
        padding:0 11px;
        color:#777;
    }
}



.roadmap-content{display: none;}
.expend .roadmap-content{display:block;}
.courses-list{display: block; margin-top: 12px;}
.courses-list:first-child{margin-top:0;}
.courses-list .roadmap-content-head{border-top-left-radius:10px;}
.courses-list:first-child .roadmap-content-head{border-top-left-radius:0;}

.roadmap-paths{display: none;}
.blue-roadmap-path, .red-roadmap-path, .dark-roadmap-path{display: block;}

.roadmap-blue .roadmap-paths .line1{border-left: 4px solid #005e85; border-top: 4px solid #005e85; border-top-left-radius: 10px; height: 14px; left: -14px; position: absolute; top: 40px; width: 14px;}
.roadmap-blue .roadmap-paths .line2{background: #005e85; height: 62px; left: -14px; margin-top: 14px; position: absolute; top: 40px; width: 4px;}
.roadmap-blue .roadmap-paths .line3{border-bottom: 4px solid #005e85; border-bottom-right-radius: 10px; border-right: 4px solid #005e85; height: 14px; left: -22px; position: absolute; top: 116px; width: 12px;}

.roadmap-dark .roadmap-paths .line1{border-bottom: 4px solid #40474e; border-bottom-left-radius: 10px; border-left: 4px solid #40474e; height: 14px; left: -14px; position: absolute; top: 30px; width: 14px;}
.roadmap-dark .roadmap-paths .line2{background: #40474e; height: 62px; left: -14px; margin-top: 14px; position: absolute; top: -46px; width: 4px;}
.roadmap-dark .roadmap-paths .line3{border-right: 4px solid #40474e; border-top: 4px solid #40474e; border-top-right-radius: 10px; height: 14px; left: -22px; position: absolute; top: -46px; width: 12px;}

.roadmap-red .roadmap-paths .line1{background:url(../img/red-ani-sort.gif) no-repeat 0 0; height: 4px; left: -22px; position: absolute; top: 41px; width: 22px;}
.roadmap-red .roadmap-paths .line2, .roadmap-red .roadmap-paths .line3{display: none;}


.before-left:before{background:url(../img/Blue-ani-sort.gif) no-repeat 0 0; content: ""; display: block; height: 4px; left: -22px; position: absolute; top: 40px; width: 22px;}
.roadmap-red.before-left:before{background:url(../img/red-ani-sort.gif) no-repeat 0 0;}
.roadmap-dark.before-left:before{background:url(../img/dark-ani-sort.gif) no-repeat 0 0;}

.roadmap-green.before-left:before{background:url(../img/green-ani.gif) no-repeat 0 0; content: ""; display: block; height: 4px; left: -335px; position: absolute; top: 40px; width: 335px;}
.expend-open{display: none;}
.expend .expend-open{display: block; top:40px;}
.expend .default-open{display: none;}


.roadmap-box-num{border-radius: 0 0 7px 0; font-size: 13px; font-weight: 700; line-height: 25px; padding-right: 13px; text-align: right; margin-right:-13px;}
.roadmap-content-head{color: #fff; font-weight: 700; height: 30px; line-height: 30px; padding: 0 0 0 13px; font-size:13px;}
ul.roadmap-ullist{padding: 0; margin: 0;}
ul.roadmap-ullist li{display: block; margin: 0; padding: 0; position: relative;}
ul.roadmap-ullist li a{font-size: 13px; border: 1px solid #dedede; border-top: none; background:#fff; align-items: center; display: flex; font-weight: 700; justify-content: space-between; -webkit-text-decoration: underline; color: #000; font-weight: 400; padding:8px 12px; text-decoration: none; text-transform: capitalize;}
ul.roadmap-ullist li a:hover{background: #e6eff3;}
ul.roadmap-ullist li:last-child a{border-bottom-right-radius:10px;}
ul.roadmap-ullist li a span{color: #0081b6; display: inline-block; font-weight: 600; -webkit-text-decoration: underline; text-decoration: underline; text-transform: capitalize;}

.roadmap-box{color: #fff; padding: 0; position: relative; margin:12px 0; transition: opacity .3s ease-out;}
.top-gape{margin-top: 110px;}
.roadmap-blue-fix{margin-top:12px;}
.roadmap-red-fix{margin-top:110px;}
.roadmap-dark-fix{margin-top:206px;}

.expend + .roadmap-box.roadmap-red .roadmap-paths, .expend + .roadmap-box.roadmap-red + .roadmap-box.roadmap-dark .roadmap-paths{display: none;}
.expend ~ .roadmap-box.roadmap-blue .roadmap-paths, .expend.roadmap-box.roadmap-red + .roadmap-box.roadmap-dark .roadmap-paths{display: none;}

.roadmap-blue.expend .roadmap-paths .line2, .roadmap-blue.expend .roadmap-paths .line3, .roadmap-dark.expend .roadmap-paths .line2, .roadmap-dark.expend .roadmap-paths .line3{display: none;}
.roadmap-blue.expend .roadmap-paths .line1, .roadmap-dark.expend .roadmap-paths .line1{width:24px; left:-23px; border-radius:0; border-left:0;}

.roadmap-box-head{padding: 13px 13px 0; border-radius: 10px 0 10px 0; border:2px solid transparent; cursor: pointer; background-repeat: no-repeat !important;background-size: cover !important;background-position: center !important;}
.expend .roadmap-box-head{border-bottom-right-radius:0;}
.roadmap-box-title{font-size: 15px; font-weight: 700; line-height: 1; margin-bottom:7px;}
.roadmap-box-description{font-size: 14px; font-style: italic; font-weight: 300; line-height: 1; margin-bottom:7px;}
.roadmap-box-btn{border-radius: 0 0 0 10px; cursor: pointer; font-size: 25px; height: 25px; line-height: 25px; position: absolute; right: 0; text-align: center; top: 0; width: 25px;}
.roadmap-box-btn:before{content: "+"; display: inline-block; line-height: 25px;}
.expend .roadmap-box-btn:before{content: "-";}

.roadmap-blue .roadmap-box-head{border-color:#8fcef9; color:#183f59;}
.roadmap-blue .roadmap-box-num{background: #72c8f4; background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #72c8f4);}
.roadmap-blue .roadmap-content-head{background: #72c8f4;  color:#183f59;}
.roadmap-blue .roadmap-box-btn{background: #60bceb;}

.roadmap-red .roadmap-box-head{background:#b52625; border-color: #dd56a9; color:#4d1633;}
.roadmap-red .roadmap-box-num{background: #dd56a9; background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #dd56a9);}
.roadmap-red .roadmap-content-head{background: #dd56a9; color:#4d1633;}
.roadmap-red .roadmap-box-btn{background: #dd56a9;}

.roadmap-dark .roadmap-box-head{background: #40474e; border-color: #474a4f;}
.roadmap-dark .roadmap-box-num{background: #474a4f; background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #474a4f);}
.roadmap-dark .roadmap-content-head{background: #474a4f}
.roadmap-dark .roadmap-box-btn{background: #1e1e1e;}

.roadmap-orange .roadmap-box-head{background: #ec7600; border-color: #f68f50; color:#732710;}
.roadmap-orange .roadmap-box-num{background: #f68f50; background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #f68f50);}
.roadmap-orange .roadmap-content-head{background: #f68f50; color:#732710;}
.roadmap-orange .roadmap-box-btn{background: #f68f50;}

.roadmap-bluelight .roadmap-box-head{background: #00a8d5; border-color: #03b0f9; color:#083347;}
.roadmap-bluelight .roadmap-box-num{background: #03b0f9; background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #03b0f9);}
.roadmap-bluelight .roadmap-content-head{background: #03b0f9;  color:#083347;}
.roadmap-bluelight .roadmap-box-btn{background: #03b0f9;}

.roadmap-green .roadmap-box-head{background: #529535; border-color: #a7e76c; color:#1a5d0e;}
.roadmap-green .roadmap-box-num{background: #a7e76c; background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #a7e76c);}
.roadmap-green .roadmap-content-head{background: #a7e76c;  color:#1a5d0e;}
.roadmap-green .roadmap-box-btn{background: #a7e76c;}


.blue-roadmap-path img{position: absolute; right: 100%; top: 36px;}
.dark-roadmap-path img{position: absolute; right: 100%; top: -43px;}


.web-none{display: none;}

.disable-hover{opacity:0.25;}
.select-disable{opacity:0.25;}
.parent-block-hover{opacity: 1}

.webnone{display: none;}
.roadmap-section{padding:20px 0;}
.clearfix{clear: both;}
/*.main-section{min-height: calc(100vh - 278px);}*/

/*Header Footer Css Start*/
.web-header{padding:10px 0; border-bottom:1px solid #f0f0f0; position: relative; z-index:105; background-color:#fff;}
.web-header .roadmap-container{ display: flex; align-items: center; justify-content: space-between;}

.header-left{display: flex; align-items: center;}
.web-menu{list-style: none; padding: 0; display: inline-block; margin-left:50px;}
.web-menu ul{margin: 0; list-style: none; padding: 0;}
.web-menu li{display: inline-block; position: relative; padding:0;}
.web-menu li a{font-size: 16px; font-weight: 500; text-decoration: none; color:#003450; display: inline-block; padding:6px 14px; letter-spacing:0.5px;}
.web-menu li a:hover{color: #019fc2;}

.web-menu{display: none;}
.mobile-menu{display: block;}
@media (min-width: 992px){
    .web-menu{display: block;}
    .mobile-menu{display: none;}
}


.header-right{display: flex; align-items: center; position: relative;}
.header-right ul{ list-style: none; padding:0; margin:0;}
.user-icon{cursor: pointer; background:transparent; border:0;}
.custom-btn{padding: 9px 20px; background: #005e85; color: #fff; border: 1px solid #005e85; font-size: 15px; text-transform: capitalize; cursor: pointer; display: inline-block;}
.custom-btn:hover, .custom-btn:focus, .custom-btn:active{background:#019fc2; color: #fff; border-color:#019fc2;}

.user-menu{position: relative;}
.header-right .profile-drop{position: absolute; top:100%; left:0; background:#fff; padding:3px; box-shadow:0 4px 15px 0 rgba(0,0,0,0.15); display: block; min-width:160px;}
.header-right .profile-drop button{width:100%; padding:8px 12px; font-size:14px; background:#fff; text-align: left; border:0; cursor: pointer; margin-top:2px; outline: none; box-shadow: none;}
.header-right .profile-drop button:hover{background:#019fc2; color: #fff;}
.profile-name{font-size:15px; font-weight:600; background: #e5f7ff; color: #005e85; padding:10px 12px; outline: none; box-shadow: none;}

.toggle-custom-btn, .search-togglebtn{width: 40px; height: 40px; line-height:50px; border-radius: 50%; border: 0; background: #005e85; cursor: pointer; padding:0;}
.toggle-custom-btn svg{width: 22px; height: 22px;}

.search-toggle{position: absolute; top:-3px; right:100%; margin-right:12px;}
.search-toggle input{width:100%; height:50px;  min-width:400px; padding:10px;  background:#fff; border:1px solid #d9d9d9; border-radius:30px; font-size:15px; padding-left:22px; outline: none; box-shadow: none;}
.search-toggle input:focus{border-color:#005e85;}

.closesearchicon{display: none;}
.search-togglebtn svg{width:18px; height: 18px; }
.search-change .closesearchicon{display:inline-block;}
.search-change .searchicon{display: none;}

.head-action{display: inline-block;}
.toggle-custom-btn{display: none;}
.mobilemenudiv{position: relative;}

.web-footer{background:#011d29; color:#fff; clear: both; padding:30px 0 0;}
.foot-menu a{color:#fff; text-decoration: none; font-size:16px; text-transform: capitalize;}
.foot-menu a:hover, .foot-menu a:focus, .foot-menu a:active, .copyright a:hover, .copyright a:focus, .copyright a:active{color:#00a8d5;}

.social-media li{display:inline-block;}
.social-media li span{display:none;}
.social-media a{color:#fff; text-decoration: none; margin:5px; font-size:14px; font-weight:normal; background-color:transparent; display: block; padding:14px 14px; display: flex; align-items: center; gap:10px; letter-spacing:0.5px; text-transform: uppercase; border:2px solid rgba(255,255,255,0.2);}
.social-media a svg{width:20px; height:20px; fill:#fff}
.social-media a:hover{color:#fff; background-color:#00a8d5; border-color:#00a8d5;}
.footermenu-title{font-size:20px; font-weight:600; margin-bottom:20px; color:#fff; text-transform: uppercase;}


.copyright{font-size:14px; border-top:1px solid rgba(255,255,255,0.05); padding:8px 0; margin-top:10px; color:rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: space-between;}
.copyright a{color:#fff; text-decoration: none; margin-right:30px; letter-spacing:0.5px;}

.web-footer ul{list-style: none; padding:0; margin:0;}
.web-footer ul li{margin:0 0 18px;}

.subscribe-box{margin-top:44px;}
.subscribe-box input{width:100%; height:50px; border-radius:0; border:0; background-color:#fff; font-size:16px; padding:8px 17px; outline: none; box-shadow: none;}
.web-btn{width:100%; height:50px; border-radius:0; border:0; font-size:16px; padding:8px 17px;margin-top:10px; background-color:#00a8d5; color:#fff; cursor: pointer; text-transform: uppercase;}

.web-footer-row{margin:0 -15px; display: flex ; flex-wrap: wrap;}
.footer-col{padding:0 15px; width:100%; margin-bottom:15px;}


.foot-menu ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    grid-gap: 0;
}

@media(min-width:640px){
.col-sm{width:50%; margin-bottom:0;}
    
}

@media(min-width:768px){
.col-md{width:50%; margin-bottom:0;}
    
}

@media(min-width:992px){
.col-lg{width:33.33%; margin-bottom:0;}
}

/*Header Footer Css End*/

/*Dark Mode Css Start*/
.dark-mode-icon{background:#005e85; border:0; width:40px; height:40px; border-radius:50%; padding:0; margin-left:12px; cursor: pointer;}
.dark-mode-icon svg{fill:#fff; width:28px; height:auto;}
body.dark-mode {background-color:#00000e;}
body.dark-mode .web-header{border-bottom-color:rgba(255,255,255,0.15)}
body.dark-mode .web-header, body.dark-mode .content, body.dark-mode .web-footer{background-color:transparent !important; color:#fff !important}
body.dark-mode .content P{color:#fff !important}
body.dark-mode .web-footer{border-top:1px solid rgba(255,255,255,0.15);}
body.dark-mode .web-menu li a{color:#fff;}
body.dark-mode .toggle-custom-btn, body.dark-mode .search-togglebtn, body.dark-mode .dark-mode-icon, body.dark-mode .custom-btn{background-color:#fff; color:#000;}

body.dark-mode .search-togglebtn svg path{stroke:#000;}
body.dark-mode .user-icon svg path{fill:#fff;}
body.dark-mode .dark-mode-icon svg, body.dark-mode .toggle-custom-btn svg path{fill:#000;}

body.dark-mode .page-title{background-color:rgba(255,255,255,0.04)}

/*Dark Mode Css End*/




@media (max-width:1259px){
    .colfirst, .colsecond, .colthird{width:33.33%;}
    .roadmap-col.colthirdsub.floatright{min-height:1px;}
    .colfourth{width:942px;}

    .roadmap-green.before-left:before{left: -340px; width: 340px;}
}

@media (max-width:991px){
    .web-none{display: block;}
    .md-none{display:none;}

    .roadmap-container{width: 290px; margin:0 auto;}
    .web-header .roadmap-container, .web-footer .roadmap-container{width:100%;}
    .colfirst, .colsecond, .colthird{width:100%;}
    .roadmap-paths{display: none;}
    .before-left:before, .roadmap-green.before-left:before{display: none;}
    .top-gape{margin:0;}
    .colthirdsub, .colfourthsub{width:100%; box-sizing: border-box;}
    .floatright{float:left;}

    .colfourth{width:100%;}
    .roadmap-title.web-none{border-left: 0; margin: 15px 0 0;}
    .roadmap-title em{display: none;}

    .webnone{display: block;}
    .mobile-none{display: none;}
    .roadmap-box{height: auto !important;}

    .toggle-custom-btn{display:inline-block;}
    .mobile-menu{position: absolute; top: 100%; right:0; left: auto; width: 200px; display: none; background: #fff; padding:3px; z-index:100; border-radius:6px; margin-top:2px; box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.15);}
    .mobile-menu li{display: block; margin-bottom:6px;}
    .mobile-menu li a{display: block; font-size:15px; color:#000; padding:8px 15px; text-decoration: none;}
    .mobile-menu li a:hover{background: #019fc2; color: #fff;}
    .show-menu{display:block;}
    .custom-btn{padding: 7px 13px;font-size: 13px;}

    .mobilemenudiv{order:12; margin-left:8px;}
    .toggle-custom-btn svg{margin-bottom:-2px;}
    .search-toggle input{min-width: 380px;}

}

@media (max-width:767px){
    .search-toggle{top: 100%; right: 0; margin: 0px;}
    .search-toggle input{min-width: 635px;}
}

@media (max-width:600px){
    .website-brand img{max-width: 70px;}
    .search-toggle input{min-width: 345px;}

    .copyright{display: block; text-align: center;}
    .copyright a{margin:0 10px;}

    .toggle-custom-btn, .search-togglebtn, .dark-mode-icon{width:30px; height:30px; line-height:36px;}
    .dark-mode-icon{line-height:40px;}
    .toggle-custom-btn svg, .dark-mode-icon svg{width:20px; height:20px;}
    .search-togglebtn svg{width:15px; height:15px;}
    .user-icon svg{width:30px; height:30px;}

    .dark-mode-icon, .mobilemenudiv{margin-left:5px;}
    .custom-btn{font-size:11px;}
}