@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

.body {
    font-family: 'Poppins', sans-serif;
}

.events {
    margin-bottom: 5%;
}

.events .events-page {
    background: #FFFFFF;
    box-shadow: 0px 0px 13px #00000029;
    border-radius: 10px;
    padding: 2% 3%;
    margin-top: 4%;
    margin-bottom: 5%;
}


.events .events-img {
    width: 100%;
    height: auto;
    margin-top: 10%;
    margin-bottom: 5%;
}

.events .text-holder-events h5 {
    color: #000000;
    font-size: 23px;
    font-weight: 700;
    margin-top: 10%;
}

.events .text-holder-events .box-img {
    width: 10px;
    height: 10px;
    margin-bottom: 5px;
}

.events .text-holder-events p {
    font-size: 14px;
    color: #000000;
    text-align: justify;
    margin-left: 3%;
    margin-top: 5%;
    font-weight: 500;
    word-spacing: -1px;
}

.events .read-more-btn .read-more {
    width: 100px;
    height: 32px;
    background: #FFF0E5;
    box-shadow: inset 0px 3px 6px #00000029, 0px 3px 3px #0000001A;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    margin-left: 3%;
}

.events .read-more-btn .read-more-sub {
    margin-top: 25%;
}

.events .read-more-btn .read-more:hover {
    color: #000000;
    background-color: #FF832D;
}

.events .events-page .events-title h2{
    font-size: 25px;
    font-weight: 800;
}

.events .events-page .events-title .title-around:hover {

    &:before,
    &:after {
        content: "";
        transition: 0.3s;
        width: 20px;

    }
}

.events .events-page .events-title .title-around {
    text-align: center;
    color: #000000;


    &:before,
    &:after {
        content: "";
        display: inline-block;
        width: 50px;
        height: 2px;
        vertical-align: middle;
        background-color: #707070ad;
        margin-bottom: 5px;
    }
}

.events .events-page .events-title .title-around .vr {
    font-size: 20px;
    background: #707070ad;
    opacity: 1;
    width: 2px;
}

@media(min-width:0px) and (max-width:320px) {
    .events .text-holder-events p {
        font-size: 13px;
        margin-left: 0%;
    }

   .events .text-holder-events p {
        font-size: 14px;
    }
   
    .events .read-more-btn .read-more {
        margin-left: 0%;
    }
    .events .text-holder-events h5 {
        margin-top: 5%;
        font-size: 15px;
    }

    .events .events-img {
        margin-bottom: 0%;
        margin-top: 5%;
    }

    .events .read-more-btn .read-more {
        margin-left: 0%;
    }
}

@media(min-width:321px) and (max-width:485px) {
    .events .text-holder-events p {
        font-size: 13px;
        margin-left: 0%;
    }



    .events .read-more-btn .read-more {
        margin-left: 0%;
    }

    .events .text-holder-events p {
        font-size: 13px;
        margin-left: 0%;
    }
   
    .events .read-more-btn .read-more {
        margin-left: 0%;
    }
    .events .text-holder-events h5 {
        margin-top: 5%;
        font-size: 15px;
    }

    .events .events-img {
        margin-bottom: 0%;
        margin-top: 5%;
    }
}

@media(min-width:486px) and (max-width:576px) {
    .events .text-holder-events p {
        font-size: 13px;
        margin-left: 0%;
    }
   
    .events .read-more-btn .read-more {
        margin-left: 0%;
    }
    .events .text-holder-events h5 {
        margin-top: 5%;
        font-size: 22px;
    }

    .events .events-img {
        margin-bottom: 0%;
        margin-top: 5%;
    }
}

@media(min-width:577px) and (max-width:768px) {
    .events .text-holder-events h5 {
        margin-top: 5%;
    }

    .events .events-img {
        margin-bottom: 0%;
        margin-top: 5%;
    }
}

@media(min-width:769px) and (max-width:992px) {
    .events .text-holder-events h5 {
        margin-top: 5%;
    }

    .events .events-img {
        margin-bottom: 0%;
        margin-top: 5%;
    }
    
}

@media(min-width:992px) and (max-width:1200px) {
    .events .text-holder-events h5 {
        font-size: 20px;
        margin-top: 5%;
    }

    .events .text-holder-events p {
        font-size: 13px;
    }

    .events .events-img {
        margin-top: 5%;
    }
 
}