/** Setting some styles for the topics links */
.topic-link {
    text-decoration: none;
    color: var(--dark-color);
    transition: all 0.3s ease;
}
.topic-link:hover {
    color : hsl(200, 29%, 20%, .85);
}

/** Start Attractions Section  */
/* easy transition */
.attractions .mainTopic, .attractions .secondaryStory {
    transition: all 0.3s ease;
}
/* The main topic */
.attractions .mainTopic img{
    width: 100%;
    height: 70%;
    object-fit: cover;
}
/* The secondary topics */
.attractions .secondaryStory img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}
/* hover effect */
.attractions .mainTopic:hover, .attractions .secondaryStory:hover{
    color : hsl(200, 29%, 20%, .85);
    filter: brightness(1.15);
}

/* The Latest Section in the attractions */
/* Category */
.attractions .latest .category {
    color: var(--light-red);
    font-weight: bold;
}
/* Topic title */
.attractions .latest .title {
    transition: all 0.5s ease;
    font-style: italic;
    text-decoration: none;
    color : var(--dark-color);
}
/* Topic title's hover effect */
.attractions .latest .title:hover {
    font-style: italic;
    padding-left: 0.5rem;
    color : hsl(200, 29%, 20%, .75);
    text-decoration: underline;
}
/** End Attractions Section  */

/** Start Categories Section */
/* See All button styles */
.see-all {
    text-decoration: none;
}
.see-all span {
    color: var(--dark-color);
    border-radius: 1.5rem;
    border: 1px solid var(--dark-color); 
    padding: 0.5rem;
    transition: all 0.3s ease-in-out;
}
.see-all span:hover {
    text-decoration: underline;
}

/* Hover effect for categories' topics */
.topicLinks:hover {
    color : hsl(200, 29%, 20%, .85);
    filter: brightness(1.15);
}
/* The sub category of the topic */
.subCategory {
    color: var(--dark-color);
    font-style: italic;
    font-weight: bold;
}
/** End Categories Section */