body {
    background-image: url(https://img.freepik.com/free-vector/blue-curve-background_53876-113112.jpg?size=626&ext=jpg&ga=GA1.1.735520172.1710374400&semt=ais);
    background-size: cover;
}
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    body {
        display: flex;
       
        min-height: 100vh;
    }

    .container {
        position: relative;
        width: 1100px;
        display: flex;
        flex-wrap: wrap;
        gap: 2em;
        justify-content: center;

    }

    .container .box {
        position: relative;
        width: 275px;
        height: 275px;
        overflow: hidden;
        transition: 0.5s;
        justify-content: center;
    }

    .container .box:hover {
        z-index: 1;
        transform: scale(1.25);
        box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5);
    }

    .container .box .imgBx {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .container .box .imgBx:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: linear-gradient(180deg, #f00, #000);
    }

    .container .box .imgBx img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #img1 {
        background-image: url(images/bosnek_dikanq38.jpg);
        margin: auto;
    }
    
    #img2 {
        background-image: url(images/Rila.3.jpg);
        margin: auto;
    }
    
    #img3 {
        background-image: url(images/pirin22NB.jpg);
        margin: auto;
    }
    
    #img4 {
        background-image: url(images/rodopI3.jpg);
        margin: auto;
    }
    
    #img5 {
        background-image: url(images/stara4.jpg);
        margin: auto;
    }
    
    #img6 {
        background-image: url(images/srednag2NB.jpg);
        margin: auto;
    }

    .container .box .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        display: flex;
        padding: 20px;
        align-items: flex-end;

    }

    .container .box .content {
        color: #fdfdfa;
        font-weight: bold;
        transition: 0.5s;
        text-transform: uppercase;
        margin-bottom: 5px;
        font-size: 18px;
        text-align: center;
        transform: translateY(10px);
    }

    .container .box:hover .content h2 {
        transform: translateY(0);
        transition-delay: 0.6s;
    }

    .container .box .content p {
        color: #fbfafa;
        transform: translateY(200px);
        transition: 0.5s;
        font-size: 11px;
        text-align: start;
    }

    .container .box:hover .content p {
        transform: translateY(0);
        transition-delay: 0.7s;
    }

    a {
        background-color: rgb(77, 122, 248);
        color: white;
        padding: 5px 15px;
        display: block;
        text-align: center;
        margin: 8px 50px;
        text-decoration: none;
    }

    a:hover {
        background-color: rgb(239, 159, 85);
        color: white;
        cursor: pointer;
        transform: scale(1.3);
        transition: all is ease;
    }

    p {
        text-align: clip;
    }