*{
    box-sizing: border-box;
    scroll-behavior: smooth;
}
body{
    margin: 0;
}
.main-title {
    text-transform: uppercase;
    margin: 50px auto 0;
    border: 2px solid black;
    padding: 10px 20px 10px;
    font-size: 30px;
    width: fit-content;
    position: relative;
    z-index: 1;
    border-radius: 10px;
    transition: .3s;
    
}

.main-title::before,
.main-title::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: blue;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.main-title::before {
    left: -30px;
}

.main-title::after {
    right: -30px;
}

.main-title:hover::before {
    z-index: -1;
    animation: left-move 0.5s linear forwards;
}

.main-title:hover::after {
    z-index: -1;
    animation: right-move 0.5s linear forwards;
}

.main-title:hover {
    color: white;
    border: 2px solid white;
    transition-delay: 0.5s;
}
@keyframes left-move {
    50% {
        left: 0;
        width: 12px;
        height: 12px;
    }

    100% {
        left: 0;
        border-radius: 0;
        width: 50%;
        height: 100%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
}

@keyframes right-move {
    50% {
        right: 0;
        width: 12px;
        height: 12px;
    }

    100% {
        right: 0;
        border-radius: 0;
        width: 50%;
        height: 100%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
}
.trans-toggle {
    transition: 0.5s ease-in-out;
    position: absolute;
    left: 0;
    right:0;
    z-index: 1000;
}

.trans-toggle-active {
   
   opacity: 1;
    
}

.trans-toggle-hide {
    
    opacity: 0;
}
.hero{
    height: calc(100vh - 48px);
}
.hero h2{
    min-height: 70px;
    text-align: end;
    
}
.hero p{
    color: white;
    background-color: rgba(251, 8, 8);
    border-radius: 5px;
}
.courses .box{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd  ;
    border-radius: 6px;
    padding: 10px;
    min-height: 230px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}
.courses .box.show{
    opacity: 1;
    transform: translateY(0);
}
.courses .box .image{
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 6px;    
}
.courses .box .image img{
    width: 100%;
    height: 100%;
    
    transition: transform 0.3s ease-in-out;
}
.courses .box .image img:hover{
    transform: scale(1.1);
}
.courses .box h3{
    border: 1px solid rgb(39, 9, 236);
    cursor: pointer;
}
.courses .box:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}
@keyframes transform {
    0% {
        transform: translateX(50px);
    }
    50% {
        transform: translateX(50px) scale(1.05);
    }
    100% {
        transform: translateX(0) scale(1);
    }
}       
@media (max-width: 639px) {
    .courses .box {
        width: 220px;
        height: 200px;
        overflow: hidden;
    }

}
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}
.about section > div{
    max-width: 500px;
    margin:0 auto 80px;
    padding: 20px; 
    background-color: #f9f9f9;
    border-radius: 10px;
    
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
section>div:hover{
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: 0.3s linear;
}
@media (max-width: 768px) {
    .hero h2 {
        font-size: 1.5rem;
    }
    .hero p {
        font-size: 1rem;
    }
}
@keyframes all{
    0% {
        transform: translateX(50px);
    }
    50% {
        transform: translateX(50px) scale(1.05);
    }
    100% {
        transform: translateX(0) scale(1);
    }
}
.social-icons i{
    color: rgb(192, 192, 192);
}
.facebook:hover{
    color:#1877F2;
}
.whatsapp:hover{
    color:#25D366;
}
.telegram:hover{
    color:#0088CC;
}
.linkedin:hover{
    color:#0077B5;
}
@media (max-width: 768px) {
    footer .data {
        font-size: 1.5rem;
        flex-direction: column;
        justify-content: center;
        row-gap: 10px;
    }

    footer .data p {
        font-size: 1rem;
    }
}