.container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 20px;
            }
            .directory {
                background-color: #f0f0f0;
                padding: 15px;
                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
                margin-bottom: 20px;
            }
            .directory h3 {
                margin-bottom: 10px;
            }
            .directory ul {
                list-style-type: none;
                padding: 0;
            }
            .directory ul li {
                margin-bottom: 10px;
            }
            .content-section {
                margin-bottom: 40px;
            }
            .intro {
                margin-bottom: 20px;
              
            }
            .recommendations {
                background-color: #e9f7fa;
                padding: 20px;
                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            }
            .recommendations h3 {
                margin-bottom: 10px;
            }
            .recommendations ul {
                list-style-type: none;
                padding: 0;
            }
            .recommendations ul li {
                margin-bottom: 10px;
            }
.editor_txt {
overflow: visible;
line-height: 1.6;
background: #fff;
font-size: 14px;
}

@media (max-width: 1480px) {
.wide {
width: auto;
padding-left: 0px;
padding-right: 20px;
box-sizing: border-box;
}
}

/* Common Styles */
.module {
box-sizing: border-box;
margin: 1px;
padding: 1px;
border: 1px solid #ddd;
text-align: center;
overflow: hidden;
position: relative;
}

.module-img {
max-width: 100%;
height: auto;
transition: transform 0.3s ease-in-out;
}

.module:hover .module-img {
transform: scale(1.1);
}

.module-title h2 {
margin: 10px 0;
font-size: 20px;
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}

.module-title h2:hover {
color: #007BFF;
text-decoration: underline;
}

/* PC Styles */
@media only screen and (min-width: 768px) {
.module {
width: calc(33.33% - 20px); /* 3 modules in a row with margins */
float: left;
margin-bottom: 50px;
}
}

/* Mobile Styles */
@media only screen and (max-width: 767px) {
.module {
width: 100%; /* Full width on mobile */
}
}