#about{
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #000; 
    background-blend-mode:darken; 
    padding-bottom: 100px;
}

.features{
    width: 80%;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-primary);
}

.fe-group{
    padding-top: 80px;
    margin: 0px auto;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.img-1 img{
    width: 100px;
}

.img-2 img{
    width: 140px;
}

.img-3 img{
    width: 120px;
}

.fe-group img{
    filter: drop-shadow(2px 10px 10px rgba(0, 102, 255, 0.4));
}

.fe-item{
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    filter: drop-shadow(2px 5px 10px rgba(255, 255, 255, 0.4));
}
.fe-item h2{
    color: var(--color-white);
    font-family: var(--text-font-family);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 1.2px;
}

.internship{
    padding: 80px 0;
    width: 80%;
    margin: 0 auto;
}

.about{
    width: 80%;
    margin: 0 auto;
    background-image: url(../img/bg-image.png);
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 70% auto;
    display:flex;
    justify-content:space-between;
    gap: 100px;
    align-items:center;
    overflow:hidden;
    background-color: rgba(0, 0, 0, 0.7); 
    background-blend-mode:darken; 
    padding-bottom: 10px;
}

.about::backdrop{
    background: rgba(0,0,0,0.5);
}

.about ul {
    width:70vmin;
    height:70vmin;
    position:relative;
    filter:drop-shadow(0 0 10px hsla(0,0%,0%,0.3));
}
.about li{
    --h: calc(100% / 3);
    --w: calc(1.15470053838 * var(--h));
    --a: calc(0.28867513459 * var(--h));
    --d: calc(0.57735026919 * var(--h));
    height:var(--h);
    width:var(--w);
    position:absolute;
}  

.about img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    --aw:24.99999999999%;
  clip-path:polygon(
    var(--aw) 0,
    0 50%,
    var(--aw) 100%,
    calc(100% - var(--aw)) 100%,
    100% 50%,
    calc(100% - var(--aw)) 0
  );
}

.about li:nth-of-type(1) {
    left:calc(50% - var(--a) - var(--d) * 0.5);
    top:0;
}
.about li:nth-of-type(2) {
    left:calc(50% - var(--a) * 2 - var(--d) * 1.5);
    top:calc(var(--h) * 0.5);
}
.about  li:nth-of-type(3) {
    left:calc(50% - var(--a) * 2 - var(--d) * 1.5);
    top:calc(var(--h) * 1.5);
}
.about  li:nth-of-type(4) {
    left:calc(50% - var(--a) - var(--d) * 0.5);
    top:calc(var(--h) * 2);
}
.about  li:nth-of-type(5) {
    left:calc(50% + var(--d) * 0.5);
    top:calc(var(--h) * 0.5);
}
.about li:nth-of-type(6) {
    left:calc(50% + var(--d) * 0.5);
    top:calc(var(--h) * 1.5);
}
   
.about li:hover {
    filter:drop-shadow(0 0 10px powderblue);
    z-index:10;
}

.about ul.animate {
    animation: rotateUl 5s linear; 
}
  
.about li.animate {
    animation: rotateLi 5s linear; 
}
  
@keyframes rotateUl {
    from {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(0);
    }
}
  
@keyframes rotateLi {
    from {
      transform: rotate(-360deg);
    }
    to {
      transform: rotate(0);
    }
}
  
.img-container-2 h1{
    font-family: var(--text-font-family);
    font-size: 2rem;
}

.img-container-2 span{
    color: var(--color-primary);
}

.img-container-2 p{
    color: var(--color-text);
}

.img-flex{
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: center;
}
.ticks{
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tick{
    display: flex;
    padding: 0 10px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-text);
    font-family: var(--text-font-family);
    font-size: 1.1rem;
    letter-spacing: 1.2px;
    border-radius: 10px;   
}
.tick p{
    color: #fff;
}

.play-btn2 {
    display: flex;
    justify-content: center;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: linear-gradient(30deg, rgb(255, 130, 0) 20%, rgb(255, 38, 0) 80%);
    transition: all 0.3s ease-in-out 0s;
    box-shadow: rgba(0, 0, 0, 0.698) 0px 0px 0px 0px;
    animation: 1.5s cubic-bezier(0.8, 0, 0, 1) 0s infinite normal none running pulse;
    align-items: center;
    border: 0;
  }
  
  .play-btn2:is(:hover, :focus) {
    transform: scale(1.2);
  }
  
  @keyframes pulse {
    100% {
      box-shadow: 0 0 0 45px rgba(193,244,246,0);
    }
  }
  
.play-box{
    display: flex;
    justify-content: center;
    background-image: url('../video/internship_poster.png') ;
    background-repeat: no-repeat;
    background-size: contain;
    align-items: center;
    width: 180px;
    height: 200px;
    background-color: #fff;
    border-radius: 10px;
}

.popup-container2 {
    display: none;
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.popup-container2 video{
    width: 100%;
    height: 100%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.popup-content2 {
    background-color: var(--bg-color);
    margin: 50px auto;
    padding: 20px;
    width: 60%;
    position: relative;
}

.close-btn2 {
    color: #aaa;
    padding-right: 5px;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn2:hover,
.close-btn2:focus {
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 1024px){
    #about{
        padding-bottom: 50px;
    }
    .about{
        gap: 2px;
    }
    .about ul{
        width:50vmin;
        height:50vmin;
    }
    .img-container-2 h1 {
        font-size: 1.6rem;
    }
    .tick p{
        font-size: 1rem;
    }
    .fe-group{
        padding-top: 40px;
    }
    .fe-item h2 {
        font-size: 1rem;
    }
}

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

    .features{
        width: 90%;
    }
    .img-1 img{
        width: 60px;
    }

    .img-2 img{
        width: 100px;
    }

    .img-3 img{
        width: 80px;
    }
    .about{
        padding: 30px;
        flex-direction: column;
    }
    .popup-content2 {
        margin: 150px auto;
        width: 80%;
    }
}

@media only screen and (max-width: 450px){
    #about {
        padding-bottom: 10px;
    }
    #about .features{
        display: block;
        width: 80%;
    }
    .about{
        padding: 10px;
    }
    .fe-group {
        padding-top: 10px;
    }
    .img-1 img {
        width: 50px;
    }
    .img-2 img {
        width: 80px;
    }
    .img-container-2{
        width: 95%;
    }
    .img-flex{
        gap: 10px;
    }
    .img-container-2 h1 {
        font-size: 1rem;
    }
    .tick p {
        font-size: 0.8rem;
    }
    .img-container-2 p {
        font-size: 0.8rem;
    }
    .popup-content2{
        margin: 50% auto;
        width: 90%;
    }
}