body{
font-family: 'Sora', sans-serif !important;
}

p{
line-height:30px !important;
}

/* HEADER */

section#top-bar {
background-color: #17254E;
padding: 10px 0;
}

#top-bar li {
font-family: 'Sora', sans-serif;
color: white;
font-weight: 300;
font-size: 14px;
}

#top-bar li i {
color: #DC0404;
margin-right: 5px;
}

#top-bar li a {
color: white;
text-decoration: auto;
}

.social-links i {
color: white;
}

.social-links i:hover {
color: #dc0404;
transform: scale(1.2);
transition: transform 0.5s ease-in-out;
}

#top-bar ul.list-unstyled.left {
border-right: 1px solid #6e6a6a;
padding-right: 20px;
}

.cta-link {
display: inline-flex;
align-items: center;
background: #DC0404;
color: white;
font-size: 16px;
font-family: sans-serif;
padding: 0px 0px 0px 24px;
border-radius: 999px;
text-decoration: none;
position: relative;
overflow: hidden;
font-family: 'Sora', sans-serif;
transition: background 0.3s ease;
width: fit-content;
}

.cta-link .arrow-circle {
background: #FF2727;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 16px;
flex-shrink: 0;
}

.cta-link i {
font-size: 16px;
}

.cta-link:hover {
background: #17254E;
}

nav.navbar {
background-color: transparent !important;
}

a.nav-item.nav-link {
color: black;
font-family: 'Sora';
}

.navbar-nav {
gap: 20px;
margin-top: 5px;
}

div#navbarNavAltMarkup {
justify-content: center;
}

a.navbar-brand img{
position: absolute;
top: -5px;
background-color: WHITE;
border-radius: 0 0 30px 30px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#header .container {
padding: 5px 0;
}

a.navbar-brand {
min-width: 18%;
}


/* Section 1 */

a.btn2 {
text-decoration: auto;
color: #17254e;
background-color: transparent;
border: 1px solid #17254e;
border-radius: 40px;
padding: 16px 40px;
font-family: 'Sora';
}

a.btn2:hover {
background-color: #dc0404;
border-color: #dc0404;
color: white;
transition: all linear 0.2s;
}

.btn-group {
display: flex;
gap: 20px;
}

section#sec-1 {
background-image: url(/images/img2.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 70px 0;
}

#sec-1 h2 {
color: #17254E !important;
font-size: 50px !important;
font-family: 'Epilogue' !important;
font-weight: 700 !important;
text-transform: capitalize !important;
}

#sec-1 p {
color: #333932;
margin: 10px 0 30px;
}

#sec-1 .col-md-6 {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}

#sec-1 h4 {
color: #DC0404;
background-color: #dc040436;
width: fit-content;
font-size: 16px;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
font-weight: 400;
}

.counter {
background-color: white;
width: fit-content;
padding: 13px 40px;
border-radius: 100px;
display: flex;
gap: 20px;
align-items: center;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
position: absolute;
top: 8%;
left: 10%;
}

.counter img {
width: 100%;
height: min-content;
}

.counter span {
color: #704FE6;
}

/* Section 2 */


.experience-box {
width: 65%;
height: 220px;
border: 1px solid #f3f3f3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: sans-serif;
position: relative;
background: #f5f5f5;
border-radius: 0;
box-shadow: 0 2px -3px rgba(0,0,0,0.05);
z-index: 9;
margin-bottom: 20px;
}

.experience-wrapper{
background: conic-gradient(#dc0404 75%, #ffffff 0);
padding: 6px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}

.circle-progress {
position: relative;
width: 90px;
height: 90px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
/* margin-bottom: 10px; */
/* border: 5px solid; */
/* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
}

.circle-progress span {
position: absolute;
font-weight: bold;
font-size: 20px;
color: #000000;
font-family: 'Sora';
}

.experience-text {
font-size: 14px;
color: #001935;
font-family: 'Sora';
font-size: 18px;
font-weight: 500;
}
.experience-box:after {
content: "";
background-color: transparent;
width: 90%;
height: 90%;
position: absolute;
z-index: -1;
border: 1px dashed #dc040438;
}

#sec-2 .col-md-7 img {
width: 100%;
}

h4 {
color: #dc0404 !important;
font-size: 16px !important;
font-weight: 400 !important;
text-transform: uppercase !important;
}

h2 {
color: #0E2A46 !important;
font-size: 45px !important;
font-weight: 700 !important;
font-family: poppins !important;
text-transform: capitalize !important;
}

#sec-2 p {
color: #574D4D;
margin: 20px 0 30px;
}

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

#sec-2 ul li {
margin-bottom: 10px;
font-weight: 600;
color: #17254e;
}

#sec-2 .col-md-7 img {
width: 90%;
}

section#sec-2 {
padding: 100px 0;
}

#sec-2 .col-md-6 {
display: flex;
flex-direction: column;
justify-content: center;
}
img.img6 {
position: absolute;
left: -10px;
}

#sec-2 .col-md-5 {
position: relative;
}

img.img4 {
margin-top: 60px;
margin-left: 30px;
}

/* Section 3 */

section#sec-3 {
background-image: url(/images/img7.png);
background-size: cover;
padding: 100px 0;
}

.course-card {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
position: relative;
}

.course-card img {
width: 100%;
}

.course-card h3 {
font-size: 24px;
color: #17254e;
}

.course-card .tag {
background-color: #FF2727;
width: fit-content;
padding: 5px 20px;
border-radius: 5px;
color: white;
position: absolute;
top: 30px;
left: 30px;
}

.course-card .rating {
display: flex;
color: #5a5555;
align-items: center;
gap: 5px;
margin: 20px 0;
}

.course-card .rating i {
color: #FBA608;
}

.course-card .rating h6 {
margin: 0;
}

.course-card p {
line-height: 30px;
margin-bottom: 30px;
}

.course-card:hover img {
filter: brightness(0.7);
transition: all linear .3s;
}


/* Section 4 */


#sec-4 p {
margin-bottom: 50px;
}
.stat-label {
font-weight: 500;
}
.progress {
height: 10px !important;
background-color: #e9ecef;
--bs-progress-bar-bg: #dc0404 !important;
}
.progress-bar {
background-color: #d60000;
}
.percent-badge {
background-color: #d60000;
color: white;
padding: 5px 8px 10px;
border-radius: 0;
font-size: 0.8rem;
position: absolute;
right: 40px;
top: -15px;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
.progress-container {
position: relative;
margin-bottom: 40px;
}


section#sec-4 {
padding: 100px 0;
background-image: url(/images/img12.png);
background-position: top right;
background-repeat: no-repeat;
position: relative;
}

section#sec-4:after {
content: url(/images/img13.png);
position: absolute !important;
bottom: 20%;
left: 0%;
z-index: -1;
}

img.img14 {
position: absolute;
right: 20%;
top: 0;
z-index:-1;
}

#sec-4 .col-md-6 {
position: relative;
display:flex;
justify-content: center;
flex-direction: column;
}

#sec-4 .col-md-6:nth-child(1) {
padding-right: 50px;
}


/*        Section 5          */


section#sec-5 {
    background-image: url(/images/img15.png);
    background-size: cover;
    padding: 100px 0;
}

#sec-5 .d-flex {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom:50px
}

#sec-5 h2 {
    width: 55%;
}

.featured-card h3 {
    font-size: 22px;
    color: #17254e;
    font-weight: 800;
    margin-top: 20px;
}

.featured-card {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background-color: white;
    border-radius: 5px;
    padding: 40px 10px;
    transition: all linear .2s;
}

.featured-card p {
    color: #574D4D;
    font-size: 14px;
    line-height: 26px !important;
    margin: 20px 0 30px;
}

.featured-card:hover {
    transform: scale(1.02);
    transition: all linear .2s;
}


/*          Section 6             */

section#sec-6 {
    padding: 80px 0;
    background-image: url(/images/img20.png);
    background-size: cover;
}

#sec-6 h4 {text-transform: capitalize !important;font-size: 20px !important;}

#sec-6 h2 {
    color: white !important;
    font-family: 'Epilogue' !important;
    font-weight: 500 !important;
    text-transform: none !important;
    margin: 20px 0;
}

#sec-6 i.fas.fa-play {
    background-color: white;
    color: #dc0404;
    padding: 20px 22px;
    border-radius: 50%;
    font-size: 24px;
}

#sec-6 p {
    text-decoration: underline;
    color: white;
    margin: 20px 0;
}

#sec-6 .col-md-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.ripple-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.play-icon {
  font-size: 60px;
  color: red;
  z-index: 2;
  position: relative;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

.ripple-wrapper p {
  margin-top: 10px;
  font-weight: bold;
  color: #333;
}


/*            Section 7           */

section#sec-7 {
    padding: 100px 0;
    background-image: url(/images/img24.png);
    background-repeat: no-repeat;
    background-color: #F3F5F4;
}

#sec-7 h2{
     font-family: 'Epilogue' !important;
     margin-top: 10px;
}

#sec-7 .col-md-6 {display: flex;justify-content: center;flex-direction: column;position:relative;}

#sec-7 ul {
    padding: 0;
    list-style-type: none;
    columns: 2;
}

#sec-7 ul i {
    color: #dc0404;
    margin-right: 10px;
}

#sec-7 ul li {
    color: #17254e;
    font-weight: 500;
    margin-bottom: 10px;
}

img.img23 {
    position: absolute;
    bottom: -10%;
    right: 25%;
}

img.img22 {
    position: absolute;
    right: -60px;
    top: -50px;
    z-index: 0 !important;
}

#sec-7 img {
    z-index: 9;
   
}


/*      Section 8          */



.testimonial-card {
  height: 300px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  border: 2px dashed #dc0404;
  border-radius: 10px;
  background: #fff;
  text-align:left;
}

.testimonial-card img {
  width: 50px !important;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.testimonial-author-info span {
  display: block;
  font-size: 14px;
  color: #0020BE;
}

.testimonial-card p.text-danger {
    color: #dc0404 !important;
}

.owl-carousel {
    margin-top: 50px;
}

section#sec-8 {
    padding: 100px 0;
    background-image: url(/images/img25.png);
    background-repeat: no-repeat;
    background-position: top right;
}

#sec-8 h2 {
    font-family: 'Epilogue' !important;
    margin-top: 20px;
}

.testimonial-author-info strong {
    color: #17254e;
}


/*Footer*/

footer {
    background-image: url(/images/img28.png);
    background-size: cover;
    /* overflow-x: hidden !important; */
}

.social-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-box i {
    background-color: #7d7d7d1c;
    padding: 20px;
    border-radius: 50%;
    border: 1px solid grey;
}

.social-box strong {
    color: #dc0404;
    font-weight: 300;
    font-size: 16px;
}

.social-box p {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}

footer .r1 .col-md-4.center {
    border-left: 1px solid #6c757d;
    border-right: 1px solid #6c757d;
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

footer hr {
    margin: 0;    
}

footer .r1 .col-md-4 {
    padding: 40px 0;
    display: flex;
    justify-content: center;
}

footer img {
    width: 80%;
}

footer a.text-white i {
    background-color: #ffd4d412;
    /* padding: 15px; */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #dc0404;
}

footer a.text-white {
    text-decoration: none;
    width: fit-content;
    display: inline-flex;
}

footer li {
    font-weight: 300;
    font-size: 14px;
    margin-bottom: 14px;
}

footer li i {
    margin-right: 10px;
}

footer ul {
    margin-top: 30px;
}

footer form {
    margin-top: 30px;
}

footer input.form-control {
    height: 50px;
    border-radius: 0;
}

footer button.btn {
    background-color: #dc0404;
    border-radius: 0;
    color: white;
    height: 50px;
    font-weight: 300;
    margin-top: 10px;
}

footer button.btn:hover {
    background-color: #17254e;
}

footer .r2.row {
    padding: 50px 0;
}

.text-center.small a {
    color: #dc0404;
}

footer a.text-white i:hover {transform: scale(1.1);transition: all linear .3s;background-color: #dc0404;color: white;}

footer .text-center.small {
    padding: 20px;
}

/*Inner Banner*/

section#inner-banner {
    background-image: url(/images/img2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 170px 0;
    text-align: center;
}

section#inner-banner a {
    color: #dc0404;
    text-decoration: none;
    margin: 10px;
}

#inner-banner h2 {
    font-size: 70px !important;
    font-family: 'Epilogue' !important;
}


/*   Login Register   */



.form-box {
      max-width: 500px !important;
      width: 100% !important;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      padding: 0 !important;
    }

    .form-box .nav-tabs {
      background-color: #17254e;
    }

    .form-box .nav-tabs .nav-link {
      border: none;
      border-radius: 0;
      color: #fff;
      font-weight: 600;
      padding: 14px;
      transition: 0.3s;
    }

    .form-box .nav-tabs .nav-link.active {
      background-color: #dc0404;
      color: #fff;
    }

    .form-box .tab-content {
      padding: 25px;
    }

    .form-box .form-control {
      border-radius: 30px;
      padding: 12px 20px;
      border: 1px solid #ccc;
    }

   .form-box  .form-control:focus {
      border-color: #dc0404;
      box-shadow: 0 0 5px rgba(220, 4, 4, 0.5);
    }

    .form-box .btn-primary {
      background-color: #dc0404;
      border: none;
      border-radius: 30px;
      padding: 10px 25px;
      font-weight: bold;
    }

    .form-box .btn-primary:hover {
      background-color: #b70303;
    }

   .form-box .form-group label {
      font-weight: 500;
      margin-bottom: 6px;
    }

    .form-box .text-center small {
      color: #888;
    }
    
    section#login-register {
    padding: 70px 0;
    margin-top: 70px;
}

section#login-register .row {
    justify-content: center;
}

.form-box .form-group {
    margin-bottom: 30px;
}

#login-register .col-md-6 {
    display: flex;
    align-items: center;
    justify-content: center;
}

section#login-register img {
    width: 70%;
}

/*   Contact Us   */


#contact {
      background-color: #17254e;
      padding: 60px 20px;
      color: #fff;
    }

    #contact h2 {
      text-align: center;
      color: #fff !important;
      margin-bottom: 40px;
      font-weight: bold;
    }

    #contact .contact-box {
      background-color: #17254e;
      border: 2px solid #dc0404;
      border-radius: 15px;
      padding: 40px;
      max-width: 600px;
      margin: auto;
    }

    #contact .form-label {
      font-weight: 500;
      color: #fff;
    }

    #contact .form-control {
      background-color: transparent;
      color: #fff;
      border: 1px solid #dc0404;
      border-radius: 30px;
      padding: 12px 20px;
    }

    #contact .form-control::placeholder {
      color: #ccc;
    }

    #contact .form-control:focus {
      border-color: #dc0404;
      box-shadow: 0 0 10px rgba(220, 4, 4, 0.5);
      background-color: transparent;
      color: #fff;
    }

    #contact .btn-primary {
      background-color: #dc0404;
      border: none;
      border-radius: 30px;
      padding: 12px;
      font-weight: bold;
      transition: all 0.3s ease;
    }

    #contact .btn-primary:hover {
      background-color: #a80303;
    }