/******************************************
    Version: 1.0
/******************************************/

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.cd-headline.clip span {
        font-size: 30px; /* Larger font size for larger tablets and desktops */
        white-space: normal; /* Allow text to wrap */
        word-wrap: break-word; /* Allow breaking long words */
        display: inline-block; /* Allow the text to wrap naturally */
        line-height: 1.5; /* Adjust line height for readability */
        max-width: 100%; /* Ensure it takes full width */
    }
    .view-button {
        display: inline-block; /* Show View button for desktops */
    }
	
}

@media (min-width: 768px) and (max-width: 991px) {
    .view-button {
        display: none !important; 
    }
    #mainNav {
        background-color: #333333;
    }
    .navbar-dark .navbar-brand {
        width: 55%;
    }
    .navbar-dark .navbar-nav .nav-link::after {
        display: none;
    }
    .navbar-dark .navbar-toggler {
        color: rgba(255, 255, 255);
        border-color: rgba(255, 255, 255);
    }
    .heading h1 {
        font-size: 28px;
    }
    .heading p {
        font-size: 14px;
    }
	.cd-headline.clip span {
        font-size: 24px; /* Adjust font size for tablets */
        white-space: normal; /* Allow text to wrap */
        word-wrap: break-word; /* Break long words if necessary */
        display: inline-block; /* Allow text to wrap */
        line-height: 1.4; /* Adjust line height for better readability */
        max-width: 100%; /* Ensure full width usage */
    }
    .section-title h3 {
        font-size: 28px;
    }
    .section-title p {
        font-size: 14px;
    }
    #clouds {
        margin-top: -35%;
    }
    .message-box {
        margin-bottom: 30px;
    }
    .filter-button-group button {
        padding: 12px 27px;
    }
    .filter-button-group {
        text-align: center !important;
    }
    .post-box {
        margin-bottom: 30px;
    }
    .footer-distributed .footer-left {
        text-align: center;
    }
    .cd-headline.clip {
		width: 100%;
		display: block;
	}
	
    .btn.btn-lg.btn-light.shadow-sm {
        font-size: 1rem; /* Adjust font size of button */
        padding: 10px 20px;
    }
}

@media (max-width: 767px) {
    .view-button {
        display: none !important; /* Hide View button for tablets and smaller screens */
    }
    #mainNav {
        background-color: #333333;
    }
    .navbar-dark .navbar-brand {
        width: 55%;
    }
    .navbar-dark .navbar-nav .nav-link::after {
        display: none;
    }
    .navbar-dark .navbar-toggler {
        color: rgba(255, 255, 255);
        border-color: rgba(255, 255, 255);
    }
    .heading h1 {
        font-size: 24px;
    }
    .heading p {
        font-size: 12px;
    }
	.cd-headline.clip span {
        font-size: 18px; /* Smaller font size for mobile devices */
        white-space: normal; /* Allow text to wrap */
        word-wrap: break-word; /* Ensure words break properly on smaller screens */
        display: inline-block; /* Ensure text behaves as a block-level element */
        line-height: 1.3; /* Adjust line height for better spacing */
        max-width: 100%; /* Ensure the text takes full width */
    }
	
    .section-title h3 {
        font-size: 24px;
    }
    .section-title p {
        font-size: 12px;
    }
    #clouds {
        margin-top: -35%;
    }
    .message-box {
        margin-bottom: 30px;
    }
    .filter-button-group button {
        padding: 10px 20px;
    }
    .filter-button-group {
        text-align: center !important;
    }
    .post-box {
        margin-bottom: 30px;
    }
    .footer-distributed .footer-left {
        text-align: center;
    }
    .btn.btn-lg.btn-light.shadow-sm {
		font-size: 0.8rem;
        padding: 6px 10px;
    }
}

@media only screen and (min-width: 280px) and (max-width: 599px) {
    .view-button {
        display: none !important; /* Hide View button for tablets and smaller screens */
    }
    #mainNav {
        background-color: #333333;
    }
    .navbar-dark .navbar-brand {
        width: 55%;
    }
    .navbar-dark .navbar-nav .nav-link::after {
        display: none;
    }
    .navbar-dark .navbar-toggler {
        color: rgba(255, 255, 255);
        border-color: rgba(255, 255, 255);
    }
    .heading h1 {
        font-size: 22px;
    }
    .heading p {
        font-size: 12px;
    }
	.cd-headline.clip span {
        font-size: 16px; /* Further smaller font size for very small screens */
        white-space: normal; /* Allow text to wrap */
        word-wrap: break-word; /* Break long words if necessary */
        display: inline-block; /* Allow text to behave as inline-block */
        line-height: 1.2; /* Adjust line height */
        max-width: 100%; /* Ensure text fits within the screen */
    }
	.cd-headline.clip {
		display: flex; /* Use flexbox to center the text */
		justify-content: center; /* Horizontally center the content */
		align-items: center; /* Vertically align text in the middle */
		width: 100%; /* Take full width of the container */
		text-align: center; /* Center text */
		overflow: hidden; /* Prevent text from overflowing */
		flex-wrap: wrap; /* Allow text to wrap in case of long text */
	}
	
	.cd-words-wrapper b {
		display: inline-block; /* Allow the text to wrap within the span */
	}
	
    .section-title h3 {
        font-size: 22px;
    }
    .section-title p {
        font-size: 12px;
    }
    #clouds {
        margin-top: -35%;
    }
    .message-box {
        margin-bottom: 30px;
    }
    .filter-button-group button {
        padding: 8px 15px;
    }
    .filter-button-group {
        text-align: center !important;
    }
    .post-box {
        margin-bottom: 30px;
    }
    .footer-distributed .footer-left {
        text-align: center;
    }
    .btn.btn-lg.btn-light.shadow-sm {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}