/* Card */
.course-content {
  background: var(--color10);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-right: solid var(--hover-color) 2px;
  border-left: solid var(--hover-color) 2px;
  border-bottom: solid var(--hover-color) 2px;
}

.Card_Icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  background: var(--main-color);
  color: var(--hover-color);
  border: var(--hover-color) 3px solid;
  border-radius: 50%;
  padding: 0.25rem;
  width: 3rem;
  /* Adjust the width as needed */
  height: 3rem;
  /* Adjust the height as needed */
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-rounded {
  width: 4rem;
  /* Adjust the width as needed */
  height: 4rem;
  /* Adjust the height as needed */
  display: inline-block;
  justify-content: center;
  align-items: center;
}

.cardround {
  background: transparent;
  max-width: 100vw;
}

.cardround .card-image-container {
  border-radius: 20px;

}

.tre {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

  background-position: center;
  background-size: cover;
}

.course_image {
  height: 300px;
  min-width: max-content;
}


.customcard {
  background-color: transparent;
  ;
}

/*-----------------------------------------------------------------*/
/*  flip card */

.flip-card {
  background-color: transparent;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner,
.flip-card-inner.rotateY {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}


.btn-H1L {
  border-radius: 25px;
 
}

.form-custom {
  width: fit-content;
  max-width: 100vw;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: #efc319;
  background-color: #1090be;
  border-color: rgb(29, 255, 29);
  border: solid 2px;
}
.btn-outline-primary {
  color: #0A446B;
  border-color: #0A446B;
  background:white;
}
.btn-outline-primary {
  --bs-btn-color: #0A446B;
  --bs-btn-border-color: #0A446B;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0A446B;
  --bs-btn-hover-border-color: #0A446B;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0A446B;
  --bs-btn-active-border-color: #0A446B;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0A446B;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0A446B;
  --bs-gradient: none;
}


.stop1  {
  animation: colora1 4s ease-in infinite  ;
}
.stop2  {
  animation: colora2 4s ease-in infinite  ;
}
.stop3  {
  animation: colora3 4s ease-in infinite  ;
}
.stop4  {
  animation: colora4 4s ease-in infinite  ;
}
.stop5  {
  animation: colora5 4s ease-in infinite  ;
}
.stop6  {
  animation: colora6 4s ease-in infinite  ;
}
@keyframes draw {
  0% {
    stroke-dashoffset: 500;
    stroke-dasharray: 250;
  }

  100% {
    stroke-dashoffset: 1000;
    stroke-dasharray: 25;
  }
}


@keyframes colora1 {
  0% {
    stop-color: #86d9fa; /* Start color */
    offset: 0%;
    }
    25% {
      stop-color: #10202b;  /* Mid color */
    }
    50% {
      stop-color: #86d9fa; /* End color */
      offset: 100%;
    }
    75% {
    stop-color: #10202b; /* Start color */
    }
    100% {
      offset: 0%;
      stop-color: #86d9fa;  /* Mid color */
    }
}

@keyframes colora2 {
  0% {
    stop-color: #54dae7; /* Start color */
    offset :50%;
    }
    25% {
      stop-color: #0d1b25;  /* Mid color */
      offset: 100%;
    }
    65% {
      stop-color: #54dae7; /* End color */
      offset :50%;
    }
    75% {
      stop-color: #0d1b25;  /* Mid color */
      offset :0%;
    }
    100% {
      stop-color: #54dae7; /* End color */
    }
}

@keyframes colora3 {
  0% {
    stop-color: #54dae7; /* Start color */
    offset: 100%;
    }
    25% {
      stop-color: #0a2537;  /* Mid color */
    }
    50% {
      stop-color: #20c2f8; /* End color */
      offset: 0%;
    }
    75% {
      stop-color: #0a2537;  /* Mid color */
    }
    100% {
      stop-color: #54dae7; /* End color */
      offset: 100%;
    }
}

@keyframes colora4 {
  0% {
      stop-color: #efc319; /* Start color */
    }
    50% {
      stop-color: #efc319; /* Mid color */
    }
    100% {
      stop-color: #f1d153; /* End color */
    }
}
@keyframes colora5 {
  0% {
      stop-color: #efc319; /* Start color */
    }
    50% {
      stop-color: #efc319; /* Mid color */
    }
    100% {
      stop-color: #f1d153; /* End color */
    }
}
@keyframes colora6 {
  0% {
      stop-color: #efc319; /* Start color */
    }
    50% {
      stop-color: #efc319; /* Mid color */
    }
    100% {
      stop-color: #f1d153; /* End color */
    }
}

.cls-1,
.cls-2 {
  stroke-dasharray: 500;
  stroke-dashoffset: 250;
  animation: draw 10s ease-in infinite both alternate;
}
.cls-11,
.cls-22 {
  stroke-dasharray: 500;
  stroke-dashoffset: 250;
  animation: draw 10s ease-in infinite both alternate;

}
.cls-111,
.cls-222 {
  
  animation: draw 10s ease-in infinite both alternate;
}
/*----------------------------------------------------------------------------------------*/
/* Sweet Alert*/
.swal2-icon.swal2-success {
  border-color: #a5dc86;
  color: #a5dc86
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 3.75em;
  height: 7.5em;
  transform: rotate(45deg);
  border-radius: 50%
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -.4375em;
  left: -2.0635em;
  transform: rotate(-45deg);
  transform-origin: 3.75em 3.75em;
  border-radius: 7.5em 0 0 7.5em
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -.6875em;
  left: 1.875em;
  transform: rotate(-45deg);
  transform-origin: 0 3.75em;
  border-radius: 0 7.5em 7.5em 0
}

.swal2-icon.swal2-success .swal2-success-ring {
  position: absolute;
  z-index: 2;
  top: -.25em;
  left: -.25em;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  border: .25em solid hsla(98,55%,69%,.3);
  border-radius: 50%
}

.swal2-icon.swal2-success .swal2-success-fix {
  position: absolute;
  z-index: 1;
  top: .5em;
  left: 1.625em;
  width: .4375em;
  height: 5.625em;
  transform: rotate(-45deg)
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
  display: block;
  position: absolute;
  z-index: 2;
  height: .3125em;
  border-radius: .125em;
  background-color: #a5dc86
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
  top: 2.875em;
  left: .8125em;
  width: 1.5625em;
  transform: rotate(45deg)
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
  top: 2.375em;
  right: .5em;
  width: 2.9375em;
  transform: rotate(-45deg)
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-tip {
  animation: t .75s
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long {
  animation: u .75s
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right {
  animation: v 4.25s ease-in
}


@keyframes n {
  0% {
      transform: translateY(-.625em) rotate(2deg)
  }

  33% {
      transform: translateY(0) rotate(-2deg)
  }

  66% {
      transform: translateY(.3125em) rotate(2deg)
  }

  to {
      transform: translateY(0) rotate(0deg)
  }
}

@keyframes o {
  to {
      transform: rotate(1deg);
      opacity: 0
  }
}

@keyframes p {
  0% {
      top: .5625em;
      left: .0625em;
      width: 0
  }

  54% {
      top: .125em;
      left: .125em;
      width: 0
  }

  70% {
      top: .625em;
      left: -.25em;
      width: 1.625em
  }

  84% {
      top: 1.0625em;
      left: .75em;
      width: .5em
  }

  to {
      top: 1.125em;
      left: .1875em;
      width: .75em
  }
}

@keyframes q {
  0% {
      top: 1.625em;
      right: 1.375em;
      width: 0
  }

  65% {
      top: 1.25em;
      right: .9375em;
      width: 0
  }

  84% {
      top: .9375em;
      right: 0;
      width: 1.125em
  }

  to {
      top: .9375em;
      right: .1875em;
      width: 1.375em
  }
}

@keyframes r {
  0% {
      transform: scale(.7)
  }

  45% {
      transform: scale(1.05)
  }

  80% {
      transform: scale(.95)
  }

  to {
      transform: scale(1)
  }
}

@keyframes s {
  0% {
      transform: scale(1);
      opacity: 1
  }

  to {
      transform: scale(.5);
      opacity: 0
  }
}

@keyframes t {
  0% {
      top: 1.1875em;
      left: .0625em;
      width: 0
  }

  54% {
      top: 1.0625em;
      left: .125em;
      width: 0
  }

  70% {
      top: 2.1875em;
      left: -.375em;
      width: 3.125em
  }

  84% {
      top: 3em;
      left: 1.3125em;
      width: 1.0625em
  }

  to {
      top: 2.8125em;
      left: .8125em;
      width: 1.5625em
  }
}

@keyframes u {
  0% {
      top: 3.375em;
      right: 2.875em;
      width: 0
  }

  65% {
      top: 3.375em;
      right: 2.875em;
      width: 0
  }

  84% {
      top: 2.1875em;
      right: 0;
      width: 3.4375em
  }

  to {
      top: 2.375em;
      right: .5em;
      width: 2.9375em
  }
}

@keyframes v {
  0% {
      transform: rotate(-45deg)
  }

  5% {
      transform: rotate(-45deg)
  }

  12% {
      transform: rotate(-405deg)
  }

  to {
      transform: rotate(-405deg)
  }
}

@keyframes w {
  0% {
      margin-top: 1.625em;
      transform: scale(.4);
      opacity: 0
  }

  50% {
      margin-top: 1.625em;
      transform: scale(.4);
      opacity: 0
  }

  80% {
      margin-top: -.375em;
      transform: scale(1.15)
  }

  to {
      margin-top: 0;
      transform: scale(1);
      opacity: 1
  }
}

@keyframes x {
  0% {
      transform: rotateX(100deg);
      opacity: 0
  }

  to {
      transform: rotateX(0deg);
      opacity: 1
  }
}

@keyframes y {
  0% {
      transform: rotate(0deg)
  }

  to {
      transform: rotate(1turn)
  }
}


.float-button {
  position: fixed;
  bottom: 15px;
  right: 15px;
  transition: all 0.3s ease;
  z-index: 9999;
}

.float-button button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color2);
  color: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.float-button button i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.float-button .icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 80px; /* Update bottom position */
  right: 10px;
  transform: translateY(100%); /* Move list offscreen initially */
  display: none;
  transition: transform 0.3s ease; /* Add smooth animation for opening/closing the list */
}

.float-button .icon-list li {
  margin-bottom: 10px;
  opacity: 0;
  transition: all 0.3s ease;
}

.float-button .icon-list li a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--main-color);
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.float-button.opened {
  right: 50px;
}

.float-button.opened button {
  background-color: var(--hover-color);
}

.float-button.opened .icon-list {
  display: block;
  transform: translateY(0); /* Move list onscreen with smooth animation */
}

.float-button.opened .icon-list li {
  opacity: 1;
}

 
  
 
.cols_Flip{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col_Flip{
  width: calc(100%);
  margin: 1rem 0px;
  cursor: pointer;
}

.container_Flip{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-perspective: 1000px;
            perspective: 1000px;
}

.front_Flip,
.back_Flip{
  background-size: cover;
  box-shadow: 0 4px 8px 0 rgba(2, 40, 78, 0.25);
  border-radius: 10px;
    background-position: center;
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    text-align: center;
    min-height: 500px;
    height: auto;
    border-radius: 10px;
    color: #fff;
    /* font-size: 1.5rem; */
}

.back_Flip{
  background: #cedce7;
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,var(--main-color) 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,var(--main-color) 100%);
  background: linear-gradient(45deg,  #cedce7 0%,var(--main-color) 100%);
}

.front_Flip:after{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .6;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.container_Flip:hover .front_Flip,
.container_Flip:hover .back_Flip{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back_Flip{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner_Flip{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}

.container_Flip .back_Flip{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container_Flip .front_Flip{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container_Flip:hover .back_Flip{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.container_Flip:hover .front_Flip{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.front_Flip .inner_Flip p{
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
}

.front_Flip .inner_Flip p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front_Flip .inner_Flip span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

/* @media screen and (max-width: 64rem){
  .col_Flip{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .col_Flip{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .col_Flip{
    width: 100%;
    margin: 0 0 2rem 0;
  }
} */

.back_Flip .inner_Flip span:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}



  /* hero */
  #hero {
    background-image: url('../../content/landing/final/1.jpg');
    background-size: cover;
    background-position: center ;
  }
  .bgbrand{
    padding-top: 5rem;
    background-image: url('../../content/landing/final/1.jpg');
    background-size: cover;
    background-position: bottom ;
    width: 100vw;
    min-height: 100vh;
  }

  .shaker {
    animation: shake 1s ease-in-out infinite, changeColor 4s ease-in-out infinite;
  }

  @keyframes shake {
    0% { transform: translateX(0); }
    30% { transform: translateX(5px) rotate(15deg); }
    50% { transform: translateX(-5px) rotate(-15deg); }
    75% { transform: translateX(5px) rotate(15deg); }
    100% { transform: translateX(0); }
  }

  @keyframes changeColor {
    0%, 50% { color: var(--main-color); }
    25%, 75% { color: var(--hover-color);; }
  }

  
.btn-H1{
  min-width: 35%;
}
.btn-H1R{
  border-top-right-radius: 25vw !important;
  border-bottom-right-radius: 0px;
}
.btn-H1L{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 25vw !important;

}


.form-custom{
  width: fit-content;
  max-width: 100vw;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  color: white;
  background-color: rgb(16, 144, 190);
  border-color: rgb(29, 255, 29);
  border: solid 2px ;
}

.btn-outline-primary {
  --bs-btn-color: var(--main-color);
  --bs-btn-border-color: var(--main-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--main-color);
  --bs-btn-hover-border-color:var(--main-color);
  --bs-btn-focus-shadow-rgb: 13,110,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg:var(--main-color);
  --bs-btn-active-border-color:var(--main-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:var(--main-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color:var(--main-color);
  --bs-gradient: none;
}
.input-field1{
  background-color: rgba(1, 21, 38, 0.7);
   color: white; 
   border-bottom-right-radius: 40px; 
   border-top-right-radius: 40px;
}

.input-field2{
  background-color:  rgba(0, 22, 40, 0.7);
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  color: var(--hover-color);
}

.btn-outline-primary{
  background-color: var(--main-color);
  color: var(--hover-color);
}


.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 10px 10 10px 30px;
  font-family: "Tajawal", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--color4);
  white-space: nowrap;
  transition: 0.3s;
  
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  
  right: 15px;
  border-radius: 5px;
  background-color: var(--color1);
  overflow-y: auto;
  transition: 0.3s;
  min-width: 80vw;
}

.nav-header {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.MCF {
  color: var(--hover-color);
}

.navbar li a{
  padding: 0.25rem 1rem  ;
  margin: 1rem 0px ;
  border-bottom: 1px solid #eef0ef;
}
.navbar li a i{
  padding: 0 1rem  ;
}

.navbar .active a i ,.navbar .active a span , .navbar .active a {
  color: var(--hover-color);
  border-color: var(--hover-color);
}

.tt a{
 
  background-color: var(--hover-color) !important ;
}
.blurey {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(0.75);
  }

  20% {
    transform: scale(1);
  }

  40% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(0.75);
  }

  30% {
    transform: scale(1);
  }

  40% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.heart {
  color: #eb5e28;
  animation: heartbeat 1s infinite;
}


.subanim {
  animation: heartbeat 2s infinite;
}



@keyframes draw {
  0% {
    stroke-dashoffset: 500;
    stroke-dasharray: 250;
  }

  100% {
    stroke-dashoffset: 1000;
    stroke-dasharray: 25;
  }
}

.cls-1,
.cls-2 {
  stroke-dasharray: 500;
  stroke-dashoffset: 250;
  animation: draw 10s ease-in infinite both alternate;
}

.footer .social-links a:hover {
  background-color: var(--hover-color) !important;
  color: whitesmoke !important;
  border : solid 1px whitesmoke  !important;
}
.footer .social-links a {
  background-color: var(--main-color) !important;
  color: whitesmoke !important;
  
}
#footer{
  background-color: var(--main-color) !important
}
  

.cource-details-tabs .nav-link.active {
  color: var(--hover-color);
  border-color: var(--hover-color);
  background-color: var(--main-color);
}




/* ==================== News ================= */
.social_icon {
  cursor: pointer;
  margin: 0.25rem;
}

.social_icon i {
  font-size: larger;
}

.social_container {
  position: absolute;
  bottom: 0px;
  left: 40px;
}

.action_container {
  position: absolute;
  bottom: 0px;
  right: 40px;
}

.important_container {
  position: absolute;
  top: 5px;
  right: 40px;
}
iframe{
  width: -webkit-fill-available;
  min-height: 300px;
}

#events .card-img img{
 max-height: 300px;
}
.important_container i {
  font-size: xx-large;
  color: var(--hover-color);
}

.social_body {
  padding-bottom: 30px;
}

.readMorebtn {
  background: transparent;
  border: 3px solid var(--hover-color);
  color: var(--main-color);
}

.readMorebtn :hover {
  background: var(--main-color) border 3px solid var(--hover-color);
  color: var(--color10);
}

#newss li i {
  color: var(--hover-color);
}

/* ----------------------------
/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
  margin-bottom: 30px;
}

.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 35px auto;
  list-style: none;
  text-align: center;
  background: #fff;
  border-radius: 50px;
  padding: 2px 15px;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 10px 15px 8px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #272829;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: var(--main-color);
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.portfolio .portfolio-wrap::before {
  content: "";
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
  opacity: 1;
  left: 0;
  right: 0;
  bottom: -60px;
  z-index: 3;
  position: absolute;
  transition: all ease-in-out 0.3s;
  display: flex;
  justify-content: center;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: #fff;
  font-size: 28px;
  text-align: center;
  background: var(--main-color);
  transition: 0.3s;
  width: 50%;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  background: var(--main-color);
}

.portfolio .portfolio-wrap .portfolio-links a+a {
  border-left: 1px solid var(--hover-color);
}

.portfolio .portfolio-wrap:hover::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-links {
  opacity: 1;
  bottom: 0;
}
