@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: "Ubuntu", sans-serif;
}

/* start my classes */

.bg-success-50 {
    background-color: rgba(25, 135, 84, 0.5);
}

.text-color-gradient {
    background: -webkit-linear-gradient(yellow, red);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.color-facebook {
    color: #1877f2;
}
.color-linkedin {
    color: #0a66c2;
}
.color-whatsapp {
    color: #25d366;
}
.color-twitter {
    color: #1da1f2;
}
.color-instagram {
    color: #e1306c;
}
/* end my classes */

/* start aside */
aside i {
    transition: 0.5s;
}
aside i:hover {
    transform: scale(1.2);
}
/* end aside */

/* start bg img 01, 02 */
.photo1 {
    background: url(../images/img_01.jpg) center fixed;
    background-size: cover;
}
.photo2 {
    background: url(../images/img_02.jpg) center fixed;
    background-size: cover;
}
/* end bg img 01, 02 */

/* start Grid sec */
.grid-sec .card {
    border: 0;
}
.grid-sec .card::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    border: 1px solid rgb(25, 135, 84);
    border-radius: 4px;
    background-color: rgba(25, 135, 84, 0.3);
    opacity: 0;
    transition: 0.5s;
}
.grid-sec .card:hover::after {
    opacity: 1;
    width: 100%;
    height: 100%;
}
.grid-sec .card::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    bottom: 0;
    right: 0;
    border: 1px solid rgb(25, 135, 84);
    border-radius: 4px;
    background-color: rgba(25, 135, 84, 0.3);
    opacity: 0;
    transition: 0.5s;
}
.grid-sec .card:hover::before {
    opacity: 1;
    width: 100%;
    height: 100%;
}
.grid-sec .card:hover .card-body {
    z-index: 1;
}
/* end Grid sec */

/* start thanks sec */
.thanks .row .card {
    border: 0;
    transition: 0.5s;
}
.thanks .row .card,
.thanks .row .card::before,
.thanks .row .card .card-img {
    border-radius: 20px;
}
.thanks .row .card::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid rgb(25, 135, 84);
    background-color: rgba(0, 65, 34, 0.8);
    margin-left: -12px;
    transition: 0.5s;
}
.thanks .row .card .card-img-overlay {
    z-index: 1;
}
.thanks .row .card:hover {
    transform: scale(0.9);
}
.thanks .row .card:hover::before {
    background-color: rgba(0, 65, 34, 0.5);
}
/* end thanks sec */

/* start news sec */
.news .card .card-body > div {
    position: relative;
}
.news .row .card .row .img-card {
    min-height: 250px;
    background: #198754 url(../images/Tot3n5amon.jpg) center;
    background-size: cover;
    transition: 0.5s;
}
@media (min-width: 768px) {
    .news .row .card .row .img-card.img-right {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
        order: 2;
    }
    .news .row .card .row .img-card.img-left {
        clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
    }
}
.news .card .card-body .small::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 65, 34, 0.8);
    transition: 0.5s;
    border-radius: 20px;
}
.news .card:hover .card-body .small::after {
    width: 120px;
}
.news .card:hover .row .img-card {
    transform: scale(1.1);
}
.news .card .card-body .badge {
    background-color: gray;
    transition: 0.5s;
}
.news .card .card-body .badge:hover {
    background-color: #004122;
}
/* end news sec */

/* start join-us sec */
.join-us .row div i,
.join-us .row div {
    transition: 0.5s;
}
.join-us .row div:hover {
    transform: scale(1.1);
}
.join-us .row div i:hover {
    transform: rotateZ(360deg);
}
/* end join-us sec */