/* slider starts */

#slider {



  overflow: hidden;

  /* min-height: 80vh; */

  background-color: #eff0eb;
}


#slider .side-img {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;
}

#slider .side-img img {
    padding-top:20px;
    width: calc(100% + 25px);
    margin-bottom: -25px;
}

#slider .side-img::before {
  content: "";

  position: absolute;

  display: inline-block;

  width: 450px;

  height: 450px;

  border-radius: 50%;

  background-color: var(--color-one);

  z-index: -1;
}
@media(max-width:576px){
    
#slider{
     background: linear-gradient(to bottom, rgb(0 0 0 / 51%) , rgb(0 0 0 / 51%) 100%), url(../images/mobile-slider.png) no-repeat;
  
 background-position:center;
 background-size:cover;

 color:white;
}
#slider .main-heading{
    color:white;
}
#slider .main-heading span {
    display: inline-block !important;
    color: white;
}
}

/*  */

/* ============== slider end ============== */

/* ================ courses and training section ================== */

.section-title {
  font-size: 30px;

  margin-bottom: 25px;
}

.course-box .img-box {
  overflow: hidden;
  min-height: 210px;

  max-height: 210px;

  position: relative;
}
.course-box .img-box img {


  object-fit: cover;
  width: 100%;
  height: 100%;
}

.course-box .img-box .visit {
  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  background-color: rgba(0, 0, 0, 0.664);

  opacity: 0;

  transition: all ease 0.2s;
}

.course-box .img-box .visit span {
  width: 0px;

  overflow: hidden;

  transition: all ease 0.5s;

  transition-delay: 0.1s;
}

.course-box {
  border-bottom: 2px solid var(--color-one);

  display: inline-block;

  border-radius: 5px;

  overflow: hidden;

  transition: all ease 0.2s;
}

.course-box:hover .visit {
  opacity: 1;
}

.course-box:hover .visit span {
  width: 40px;
  transition-delay: 0.5s;
}

.course-box .course-content {
  color: black;
  background:white;
}
#course-training p{
    text-align:justify;
}
#course-training .main-box{
    padding:15px;
    border-radius:10px;
    background-color:#eff6f9;
}

#course-training .view-all {
  color: black;

  right: 0;

  bottom: 27px;

  padding: 5px 20px;

  background: var(--button-color);

  color: white;

  border-radius: 4px;

  z-index: 2;
}

.course-box .course-content p {
  height: 100px;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 4;

  line-clamp: 4;

  -webkit-box-orient: vertical;
}

.owl-stage {
  padding-bottom: 70px;
}

.course-name {
  z-index: 2;

  font-weight: 500;

          background-color: var(--color-one);

  color: white;

  padding: 5px 10px;

  display: block;

  bottom: 0;

  left: 0;

  width: 229px;

  position: absolute;

  transition: all ease 0.2s;
}

.course-box:hover .course-name {
  background-color: var(--button-color);

  color: rgb(255, 255, 255);
}

#course-training .owl-nav {
  position: absolute;

  right: 50%;

  bottom: 0;

  display: flex;

  transform: translate(50%);
}

#course-training .owl-nav button {
  background-color: transparent !important;
}

#course-training .owl-nav button span {
  display: none;
}

#course-training .owl-nav .owl-prev:before,
#course-training .owl-nav .owl-next:before {
  display: inline-block;

  width: 35px;

  height: 35px;

  border-radius: 50%;

  font-size: 41px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: rgb(8, 8, 8);

  font-family: bootstrap-icons;

  font-size: 30px;
}

#course-training .owl-nav .owl-prev:before {
  content: "\F12C";
}

#course-training .owl-nav .owl-next:before {
  content: "\F135";
}

#course-training .owl-nav .owl-prev:hover:before,
#course-training .owl-nav .owl-next:hover:before {
  background: var(--button-color);

  color: white;
}

/* ================ courses and training end ================== */

#find-college {
  position: relative;
}

#find-college .title a img {
  width: 30px;
}

#find-college .left h2 {
  font-size: 65px;

  font-weight: 900;
}

#find-college .left span {
  word-spacing: 3px;

  color: var(--button-color);
}

#find-college .review-box .img-box {
  width: 50px;
  height: 50px;
  border: 2px solid var(--button-color);

  border-radius: 50%;

  background-color: var(--button-color);

  flex-shrink: 0;
}

#find-college .review-box .name {
  color: rgb(79, 79, 79);
}

#find-college .img-box {
  width: 100%;

}
@media(max-width:576px){
    #find-college .img-box {
    height: 222px;
}
}

#find-college .img-box img.left {
  border-top-left-radius: 15px;
height:100%;
  border-bottom-left-radius: 15px;

  object-fit: cover;

  width: 100%;
}

#find-college .img-box img.right {
  border-top-right-radius: 15px;
height:100%;
  border-bottom-right-radius: 15px;

  object-fit: cover;

  width: 100%;
}

#find-college .content h3 {
  font-size: 40px;

  font-weight: 900;

  margin-bottom: 30px;
}

.flex-box {
  display: flex;

  flex-wrap: wrap;
}

.col-box {
  width: 50%;
}

@media (max-width: 992px) {
  .col-box {
    width: 100%;
  }
}

.padding-left {
  padding-left: 20px;
}

.padding-right {
  padding-right: 20px;
}

.img-padding-right {
  padding-right: 20px;
}

.img-padding-left {
  padding-left: 20px;
}

#find-college .para {
  font-size: 20px;
  text-align:justify;

  color: rgb(64, 64, 64);
}

.padding-bottom {
  padding-bottom: 60px;
}

.content-padding {
  padding: 50px;
  padding-top:0px;
}

#find-college .title {
  padding-left: 50px;
}

/* ========================= */

#testimonials .overlay {
  background-color: rgba(0, 0, 0, 0.432);

  height: 100%;
}

#testimonials .img-box {
  width: 50px;

  height: 50px;

  border-radius: 50%;

  background-color: rgb(78, 78, 78);

  border: 3px solid white;
}

/* cource acourdion */

#accordionExample {
  max-width: 800px;

  margin: auto;
}

.accordion-button:focus {
  border-color: transparent !important;

  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  color: #101010 !important;

  background-color: var(--blue) !important;

  box-shadow: none !important;

  font-weight: 600;
}

.accordion-button::after {
  content: "+";

  background: transparent !important;

  transform: rotate(0) !important;
}

.accordion-button:not(.collapsed):after {
  content: "-";
}

.accordion-item {
  margin-bottom: 15px;

  border: none !important;

  border-top: 2px solid rgba(221, 221, 221, 0.714) !important;

  border-radius: 0px !important;

  overflow: hidden;
}

.accordion-header button {
  font-weight: 500;
}

/*  =========================*/

#mail-box .main-box {
  border: 2px solid black;

  padding: 100px 50px;

  position: relative;

  border-radius: 15px;

  overflow: hidden;
}

#mail-box .main-box::before {
  position: absolute;

  content: "";

  display: inline-block;

  width: 100%;

  height: 300px;

  background-color: rgb(233 233 233);

  z-index: -2;

  left: -100px;

  transform: rotate(17deg);

  bottom: -258px;
}

#mail-box .main-box::after {
  position: absolute;

  content: "";

  display: inline-block;

  width: 100%;

  height: 300px;

  background-color: rgba(214, 214, 214, 0.473);

  z-index: -1;

  right: -24%;

  transform: rotate(344deg);

  bottom: -58%;
}

#mail-box .main-box .profiles {
  max-width: 700px;

  margin: auto;
}

#mail-box .main-box .profile-box {
  width: 55px;

  height: 55px;

  border-radius: 50%;

  border: 2px solid black;

  flex-shrink: 0;
}

#mail-box .main-box .profiles h3 {
  font-size: 50px;

  margin-bottom: 50px;

  font-weight: 700;
}

#mail-box form {
  max-width: 500px;

  margin: auto;
}

#mail-box form button {
  background-color: var(--button-color);

  padding: 7px 15px;

  border-radius: 5px;

  color: white;

  font-weight: 500;
}

#mail-box form input {
  border: 1px solid var(--button-color);

  padding: 10px;
}

/* ================= */

#message {
     background: 
   linear-gradient(to bottom, rgb(0 0 0 / 60%) , rgb(0 0 0 / 60%) 100%),
   url(../images/message-crop.png) no-repeat;
  
 background-position:center;
 background-size:cover;
 

}

#message .message-box {
  max-width: 700px;

  margin: auto;

  border: 2px solid black;

  background-color: white;

  padding: 20px;
}
#message h3{
    color:white;
}

/* footer start */

#footer {
    padding:30px 0px;
  background-color: rgb(46, 46, 46);

  position: relative;

  overflow: hidden;

  /* height: 400px; */
}

#footer::before {
  position: absolute;

  content: "";

  display: inline-block;

  width: 100%;

  height: 300px;

  background-color: rgba(71, 71, 71, 0.26);

  z-index: 1;

  right: -24%;

  transform: rotate(344deg);

  bottom: -25%;

  pointer-events: none;
}

#footer .logo img {
  width: 60px;
}

#footer form {
  max-width: 400px;
}

#footer form button {
  background-color: var(--color-one);

  padding: 7px 15px;

  border-radius: 5px;

  color: white;

  font-weight: 500;
}

#footer form input {
  border: 1px solid var(--button-color);

  padding: 7px;
}

#footer .footer-links a {
  color: white;

  margin-bottom: 15px;

  display: block;

  transition: all ease 0.2s;

  z-index: 2;
}

#footer .footer-links a:hover {
  color: var(--color-one);

  transform: scale(1.1) translateX(15px);

  font-weight: 600;
}

#footer .social-links a {
  width: 35px;

  height: 35px;

  border-radius: 5px;

  background-color: #bbbbbb;

  color: black;

  font-size: 18px;

  border: 2px solid #bbbbbb;

  transition: all ease 0.2s;

  z-index: 2;
}

#footer .social-links a i {
  transition: all ease 0.2s;
}

#footer .social-links a:hover {
  color: var(--color-one);

  background-color: transparent;
}

#footer .social-links a:hover .bi-instagram {
  background: -webkit-linear-gradient(#8503e9, #f700ff, #ff0066);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}

#footer .social-links a:hover .bi-facebook {
  color: rgb(0, 136, 255);
}

#footer .contact .box:not(last-child){
    margin-bottom:15px;
}
#footer .contact .box h5{
    color:var(--color-one);
}
#footer  .links {
    padding-left:50px;
}
#footer .box ul li{
    margin-bottom:10px;
}
#footer a{
    transition:all ease .2s;
}

#footer .box ul li a{
color:white;
transition:all ease .2s;
}
#footer .box a:hover{
color:var(--color-one) !important;

}
#footer .contact .box span{
display:block;
    
}
#footer h3{
    font-size:26px;
}
#footer{
    padding-bottom:10px;
}

/* ============================ about page start =============================== */

#how-it-works .box {
  overflow: hidden;

  max-height: 350px;

  position: relative;
}

#how-it-works .box img {
  width: 100%;

  object-fit: cover;

  max-height: 100%;

  border-radius: 7px;
}

#how-it-works .box .icon-box {
  width: 100px;

  height: 100px;

  border-radius: 50%;

  margin-bottom: 15px !important;
}

#about-content .details p {
  text-align: justify;
}

#about-content ul li:not(:last-child) {
  margin-bottom: 10px;
}

#about-content ul li {
  list-style: inside;
}

/* ===========================single page courses =========================== */

#course-details .left .img-box {
  overflow: hidden;

  width: 100%;

  border-radius: 5px;
}

#course-details .left .updates .text {
  color: var(--dark-blue);

  font-weight: 600;
}

#course-details .left .updates .stars {
  color: rgb(255, 145, 0);
}
#course-details .left p{
 text-align:justify;
}

#course-details .left .updates .time {
  color: var(--gray);
}

#course-details .left .img-box img {
  width: 100%;
}
#course-details .left img {
  max-width: 100% !important;
}

#course-details .left h3 {
  font-weight: 600;

  color: var(--dark-blue);
}

#course-details .left h4 {
  /* font-size: 20px; */

  color: white;

  background-color: #00bbf0;

  padding: 10px;

  font-weight: 600;
}



#course-details .right h4 {
  color: var(--gray);
}

#course-details .left ul li {
  list-style: disc;
  width: 100%;
}
#course-details .left ul {
  padding-left: 15px;
}

#course-details form {
  border-radius: 7px;

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */

  padding: 20px;
}

.duration-box {
  border-radius: 7px;

  margin-bottom: 30px;

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */

  padding: 20px;
}

#course-details form input,
#course-details textarea {
  font-size: 14px;
}

#course-details form .theme-button1 {
  border: none;

  outline: none;

  width: 100%;
}

/* ================== blogs start ======================== */

#cards .main-box .img-box img {
  width: 100%;

  height: auto;
}
#cards p{
    text-align:justify;
}

#cards .main-box {
  overflow: hidden;

  border-radius: 5px;

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  transition: all ease 0.5s;
}

#cards .main-box:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#cards .main-box .card-content {
  padding: 30px 20px;
}

#cards .four-col p {
  font-size: 14px;
  color: rgb(29, 29, 29);
}
#cards .four-col p:not(:last-child) {
  margin-bottom: 10px;
}

#cards .main-box .card-content .title {
  color: var(--color-two);
  min-height: 60px;
  font-weight: 500;
}
#cards .main-box .card-content .four-col {
  max-height: 188px;
  overflow: hidden;
}

#cards .main-box .card-content .readBtn {
  margin-top: 12px;
  color: var(--color-one);
  display: block;
  font-weight: 500;
}

#cards .main-box .date span {
  color: var(--gray);
}

/*  */

/* ============== blog end ========================== */

/* ======= single blogs start ================ */

#single-blog .left .img-box {
  border-radius: 10px;

  max-height: 500px;

  overflow: hidden;
}

#single-blog .left {
  border-radius: 10px;

  box-shadow: rgb(0 0 0 / 8%) 0px 5px 16px 0px !important;
}

#single-blog .post-by {
  font-weight: 500;
}

#single-blog .blog-details {
  padding: 20px 30px;
}

#single-blog .title {
  font-weight: 600;

  color: var(--color-two);
}

/*  */

#single-blog .right {
  position: sticky;

  top: 20px;
}

#single-blog .right .box {
  color: black;

  border-bottom: 1px solid var(--color-one);

  padding: 15px;

  border-radius: 5px;
}

#single-blog .date {
  flex-shrink: 0;
}

#single-blog .right h4 {
  color: var(--color-two);
}

#single-blog .right .box:hover {
  box-shadow: rgb(0 0 0 / 16%) 0px 5px 16px 0px !important;
}

#single-blog .right .img-box {
  max-height: 100px;

  max-height: 150px;

  border-radius: 5px;

  overflow: hidden;
}

#single-blog .right .img-box img {
  max-height: 100px;

  width: auto;

  height: 100%;
}

#single-blog .right .box .img-box {
  flex-shrink: 0;
}

#single-blog .right .title {
  font-weight: 500;

  color: var(--color-two);
}

#single-blog .right .para {
  max-height: 45px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 3;
}

#single-blog .right .box .small-content {
  padding: 15px 15px;
  border-radius: 7px;
  max-height: 90px;
  overflow: hidden;
  padding-top: 0;
}

/* blog single page end ====================== */

/*============== contact page start ================== */

#get-in-touch .icon i {
  height: 50px;

  width: 50px;

  border-radius: 50%;

  background-color: var(--color-two);

  color: white;
}

#get-in-touch .box {
  padding: 20px;

  border-radius: 10px;

  transition: all ease 0.5s;

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

#get-in-touch .box:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#get-in-touch .detail h5 {
  color: var(--color-two);
}

#get-in-touch .right h3 {
  color: var(--color-two);

  font-weight: 700;
}

#get-in-touch .right {
  padding: 20px;
}

#get-in-touch .right form input {
  padding: 10px 10px;
}

#get-in-touch .right .theme-button1 {
  display: block;

  width: 100%;

  border: none;

  padding: 12px;
}

#get-in-touch .right .social-links a {
  color: var(--color-two) !important;
}

form input::placeholder,
form textarea::placeholder {
  font-size: 13px !important;
}