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


/* @font-face {
    font-family: PopLight;
    src: url("{% static 'fonts/Poppins-ExtraLight.ttf' %}");
}

@font-face {
    font-family: PopRegular;
    src: url("{% static 'fonts/Poppins-Regular.ttf' %}");
} */

body {
    font-family: PopLight;
}

.tcontainer {
    color: rgb(224, 224, 224);
    /* background: radial-gradient(circle, #ffffff, #757575,#000000); */
    /* background-image: url("{% static 'images/background-img.jpg' %}"); */
    background-position: center bottom;
    background-size: cover;
    padding-top: 90px;
}

.socicon {
    height: 20px;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    padding-left: 40px
}

.logo {
    font-size: 20px;
}

.thome {
    min-height: 90vh;
    display: grid;
    grid-template-columns: 5% 1fr 2fr 1fr 5%;
}

.tpic {
    overflow: hidden;
    height: auto;
    align-self: center;
    justify-self: center;
    display: flex;
}

.tpic img {
    height: 300px;
    transition: transform 0.3s ease-out;
    cursor: pointer;
}

@media (max-width: 426px) {
    .tpic img {
        height: 230px;
        transition: transform 0.3s ease-out;
        cursor: pointer;
    }
}

.tpic a {
    display: flex;
}

.tpleft {
    position: absolute;
}

.tpright {
    position: absolute;
}

.tpicleft {
    transform: translate(0%, 10%);
}

.tpicright {
    transform: translate(0%, -10%);
}

.tpic:hover .tpicright {
    transform: translate(0%, 0%);
}

.tpic:hover .tpicleft {
    transform: translate(0%, 0%);
}

.tdetails {
    grid-column: 2/3;
    align-self: end;
}

.tdetails h1 {
    font-size: 40px;
    font-family: PopRegular;
}

.tdetails h2 {
    font-size: 20px;
    padding: 20px 0px;
}

.pages {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.pages>div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pages h3 {
    font-size: 24px;
    padding: 30px;
}

.slide {
    height: 10px;
}

.pages svg {
    cursor: pointer;
    opacity: 0.5;
    transform: scale(2);
}

.pages svg:hover {
    animation: dot 0.5s ease-in-out infinite alternate;
}

.pages svg.active {
    opacity: 1;
}