.section-mission-vision {
  position: relative;
  margin-bottom: 30px;
}
.section-mission-vision .background{
  position: absolute;
z-index: -100000;
width: 100%;
top: -7%;
right: 0%;
  width: fit-content;
  background-size:contain;
  opacity: .5;
}



.section-mission-vision .vision {
  background-color: white;
  min-height: 230px;
  box-sizing: border-box;
  padding: 25px;
  /* text-align: center; */
  border-radius: 7px;
  box-shadow: 0px 20px 35px 0px #68401329;
  border: none;
  text-align: center;
  display: flex
;
  flex-direction: column;
  justify-content: center;
  align-items: start;


}
.section-mission-vision p {
color: #525259;
font-size: 1rem;
}
.section-mission-vision .border-making {
border-top: 1px solid rgb(0, 0, 0 ,.2) ;
  
}
.section-mission-vision .vision h1{
font-size: 60px;
margin:0px
}
.section-mission-vision .vision p{
font-size: 15px;
margin: 0px;
}

.section-product-details {
  position: relative;
  margin-bottom: 30px;
  background-image: url(../images/product-lists/background-dark-2.png), url(../images/product-lists/background-dark.png);
  background-position: center, center;
  background-size: cover, cover;
  /* height: 300px; */
  z-index: 10000;
  padding-top: 40px;
  padding-bottom: 40px;
}


.portfolio-section {
border-radius: 0;
display: flex;
flex-direction: column;
}
.portfolio-container {
background-color: rgba(30, 21, 16, 1);
width: 100%;
padding-top: 40px;
padding-bottom: 40px;
}
.portfolio-grid {
gap: 66px;
display: flex;
justify-content: start;
align-items: center;

}
.portfolio-intro {
display: flex;
width: 100%;
flex-direction: column;
align-items: start;
font-family: Poppins, sans-serif;
color: #fff;
}
.portfolio-header {
display: flex;
gap: 16px;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.22px;
}
.portfolio-title {
flex-grow: 1;
}
.header-decoration {
aspect-ratio: 13.51;
object-fit: contain;
width: 81px;
margin: auto 0;
}
.portfolio-heading {
font-size: 39px;
font-weight: 500;
line-height: 41px;
letter-spacing: -0.44px;
margin-top: 20px;
width: 320px;
}
.portfolio-description {
color: rgba(150, 143, 140, 1);
font-size: 16px;
font-weight: 300;
letter-spacing: -0.2px;
align-self: stretch;
margin-top: 24px;
}
.portfolio-image {
object-fit: contain;
width: 100%;
border-radius: 0;
margin-top: 66px;
}
.portfolio-column {
display: flex;
flex-direction: column;
line-height: normal;
}
.portfolio-column.one {
display: flex;
flex-direction: column;
line-height: normal;
width: 25%;
}
.featured-image {
aspect-ratio: 0.67;
object-fit: contain;
width: 370px;
border-radius: 0;
max-width: 100%;
flex-grow: 1;
}
.project-card {
display: flex;
flex-direction: column;
position: relative;
aspect-ratio: 0.739;
align-items: start;
font-family: Poppins, sans-serif;
padding-top: 190px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
position: relative;
margin-right: 10px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.project-image {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
object-fit: contain;
/* background-color: rgba(0, 0, 0, 0.5); */
}
.project-card:hover .project-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.project-category {
position: relative;
font-size: 17px;
color: #fff;
font-weight: 400;
padding: 8px 29px;
background: linear-gradient(90deg, #F19117 0%, #FFC173 100%);
}
.project-title {
position: relative;
background-color: #fff;
font-size: 16px;
color: #000;
font-weight: 500;
letter-spacing: -0.27px;
line-height: 27px;
padding: 7px 29px;
z-index: 10000;
height: 107px;
}
.project-link {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 46px;
background:#EF7D00;
border: none;
width: 69%;
font-size: 18px;
margin: auto;
text-align: center;
border-radius: 20px;
transition:  0.3s ease, transform 0.3s ease;
color: white;
text-decoration: none;
}
.project-link:hover {
display: flex;
padding: 5px 46px;
background:#EF7D00;
border: none;
width: 69%;
font-size: 18px;
margin: auto;
text-align: center;
border-radius: 20px;
transition:  0.3s ease, transform 0.3s ease;
color: white;
text-decoration: none;
}
.learning-card {
display: flex;
flex-direction: column;
position: relative;
aspect-ratio: 0.687;
font-family: Poppins, sans-serif;
}
.learning-overlay {
position: relative;
background-color: rgba(45, 48, 43, 0.17);
display: flex;
flex-direction: column;
padding: 318px 31px 32px;
}
.slick-slider {
width: 70% !important;
}
.slick-dotted.slick-slider {
margin-bottom: 0px !important;
}
.project-card:hover .project-title {
padding-bottom: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 100000000 !important;
overflow: visible !important;
top: -70px;
height: 171px;
}
.project-card:hover .overlay {
opacity: 1;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -35.43%, #FF8E00 119.46%);
}
.project-card:hover .project-category {
background: linear-gradient(90deg, #764C00 0%, #A46A01 100%);
}
.project-card:hover .project-category {
top: -70px;
}
.project-card:hover .portfolio-column {
z-index: -1000000 !important;
}
.project-card:hover .project-link {
display: block;
margin-top: 10px;
padding: 5px 10px;
background-color: #f19117;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 15px;
}
.project-card:hover .project-category {
background-color: rgba(0, 0, 0, 0.7);
}

.demo-popup {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}

.demo-popup-content {
background-color: #1e1510;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
color: #fff;
font-family: 'Nunito', sans-serif;
margin-top: 10%;
border-radius: 15px;
}

.close-btn {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

h2 {
font-size: 24px;
margin-bottom: 20px;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
}

input {
margin-bottom: 15px;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
}


.form-success {
display: none;
margin-top: 20px;
color: #f19117;
}



.hero-container {
  border-radius: 0;
  display: flex;
  max-width: 888px;
  flex-direction: column;
  align-items: center;
  color: rgba(23, 18, 18, 1);
  text-align: center;
  font: 26px Poppins, sans-serif;
  margin-top: 50px;
  margin-bottom: 50px;
}
.hero-title {
  font-size: 50px;
  font-weight: 600;
  align-self: stretch;
  width: 100%;
}
.hero-description {
  font-weight: 400;
  line-height: 25px;
  margin: 28px 0 0;
}
.cta-wrapper {
  display: flex;
  width: 227px;
  max-width: 100%;
  color: rgba(255, 255, 255, 1);
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
  margin: 20px 0 20px 17px;
  height: 35px;
}
.cta-button {
  border-radius: 77px;
  max-width: 100%;
  background-color: rgba(255, 165, 0, 1);
  flex-grow: 1;
  width: fit-content;
  /* padding: 10px 14px; */
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  height: 40px;
  /* margin-right: 10px; */
  line-height: 22px;
}
.cta-icon {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 40px;
  border-radius: 77px;
  background-color: rgba(255, 165, 0, 1);
  height: 40px;
}


.price-box.style2 {
  z-index: 1;
  border-radius: 11px;
  border: 1px solid var(--Color-Palette-Green-green-100, #DFEEC3);
  background: var(--Color-Palette-White-white-50, #FEFEFE);
  box-shadow: 0px 0px 12px 0px rgba(64, 84, 26, 0.10);
  padding: 20px;
  height: 100%;
}

.price-title-wrap{
  
  display: flex;
  gap: 15px;
}

.price-box.style2 .price-title-wrap .box-title {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.price-box.style2 .price-box_text {
font-size: 16px;
font-weight: 400;
/* font-family: var(--body-font); */
/* color: var(--body-color); */
margin-top: 11px;
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 30px;
}

.price-box.style2 .price-box_content{
height:291px
}

.price-box .available-list {
padding: 0;
margin-bottom: 35px;
height: 202px;
}

.available-list ul {
padding: 0;
margin: 0;
list-style: none;
}

.th-ani {
-webkit-transition: all 500ms ease;
transition: all 500ms ease
}

.th-ani:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px)
}

.available-list li {
position: relative;
/* font-family: var(--body-font); */
font-weight: 400;
font-size: 16px;
line-height: 26px;
padding-left: 12px;
margin-bottom: 10px;
text-transform: capitalize;
/* color: var(--body-color); */
}


.price-box.style2 .available-list li i {
color: var(rgb(134, 240, 134));
margin-right: 10px;
}

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

.product-key-delivery {
    padding: 10px;
    overflow: hidden;
}
.product-key-delivery .product-reference {
    margin-top: 12px;
}
.section-product-details {
    padding-top: 10px;
}
.about-us-grid .card-body {
    padding: 34px;
}
.about-us-company-glance .solutions .image > span {
    right: 0;
    bottom: -6px;
}
.about-us-section-principles .row > .custom-col {
  width: 50%;
  margin: 0;
}
.about-us .custom-btn-group {
  position: initial!important;
  margin-bottom: 10px;
}

  .portfolio-container {
      max-width: 100%;
      padding: 20px 0px 20px 0px;
      margin: auto;
     margin-left: 0px !important;
    }
    .portfolio-grid {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      margin-left: 0px;
     
    }
    .portfolio-column {
      width: 80%;
      margin: auto;
    }
    .portfolio-column:nth-child(1) {
      width: 100%;
    }
    .portfolio-intro {
      margin-top: 40px;
    }
    .portfolio-image {
      margin-top: 40px;
    }
    .featured-image {
      margin-top: 40px;
    }
    .project-card {
      margin-top: 40px;
      margin-right: 0px;
     
    }
    .project-category {
      padding: 0 20px;
    }
    .project-title {
      padding: 0 20px;
      
    }
    .learning-card {
      margin-top: 40px;
    }
    .learning-overlay {
      padding: 100px 0px 0;
    }
    .slick-slider{
      margin: auto !important;
      margin-top: 10px;
      margin-bottom: 30px !important;
                            
    }
}