@font-face {
    font-family: "Kalam";
    src: url("../fonts/Kalam-Bold.ttf") format("truetype");
}

label.error {
    color: #EF4444;
}

footer {
    background: #000000;
}

.contact-form {
    border-radius: 4px;
}

.Kalam-font {
    text-align: justify;
    text-justify: inter-word;
    font-family: "Kalam" ;
}

.rotate-90 {
    transform: rotate(90deg);
    transform-origin: center;
}

.rotate-negative-90 {
    transform: rotate(-90deg);
    transform-origin: center;
}

.rotate-180 {
    transform: rotate(-180deg);
    transform-origin: center;
}

/* Hide email icon on small screens and show phone icon */
.icon-email {
    display: none;
}

/* On screens larger than 768px, show email icon and hide phone icon */
@media (min-width: 768px) {
    .icon-phone {
        display: none;
    }
    .icon-email {
        display: inline-block;
    }
}

.portfolio-style02 {
    position: relative;
}
.portfolio-style02 .portfolio-img {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin: 0; }
.portfolio-style02 .left-radius {
    border-radius: 100px 10px 10px 10px; }
.portfolio-style02 .right-radius {
    border-radius: 10px 100px 10px 10px; }
.portfolio-style02 .top-radius {
    border-radius: 180px 180px 10px 10px; }
.portfolio-style02 .portfolio-content, .portfolio-style02 .portfolio-img img {
    transition: all 0.3s ease-in-out; }

.portfolio-style02 .portfolio-content {
    left: 0px;
    bottom: 20px; /* Example position - adjust if needed */
    background-color: rgba(0, 0, 0, 0.3) !important;
    opacity: 1;
    right: 0;
    margin: 0 20px;
    visibility: visible;
    position: absolute;
    z-index: 2;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.08);
    transition: all 0.5s ease-in-out;
}

@media screen and (max-width: 1199px) {
    .portfolio-style02 .portfolio-content {
        padding: 20px; } }

@media (max-width: 767px) {
    .hide-on-mobile {
        display: none;
    }
}

@media (min-width: 767px) {
    .show-on-mobile {
        display: none;
    }
}