@charset "UTF-8";

/*
Theme Name: NAT Links
Theme URI: https://wordpress.org/themes/
Author: The NAT Team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.8
Requires PHP: 5.6
Version: 2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Media text...........Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

/* Categories 01 to 03 are the basics. */

/* Variables */
/* Variables */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --primary-color-dark: #2daa9e;
  --primary-color: #66d2ce;
  --text-primary: #f5f5f5;
  --text-dark: #00524a;
  --text-body: #555555;
  --primary-color-darker: #00524a;
  --primary-color-light: #66d2ce;
	--menu-bg: #e3e3e3;
}

body {
  font-size: 12px !important;
  color: var(--text-body) !important;
  font-family: "Inter", sans-serif !important;
  font-style: normal !important;
  font-optical-sizing: auto !important;
  font-weight: 300 !important;
  background-color: var(--text-primary) !important;
}
a {
  color: var(--primary-color-darker) !important;
  font-weight: 600;
}
.account-nav-link {
  color: var(--text-body) !important;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none !important;
  padding: 0px 10px !important;
}
.ad-horizondal {
  background-color: var(--text-body);
  opacity: 0.5;
  min-height: 90px;
  width: 728px;
  margin-right: auto !important;
  margin-left: auto !important;
  margin: 20px 0px;
}
.ad-banner {
  background-color: var(--text-body);
  opacity: 0.5;
  min-height: 60px;
  width: 468px;
  margin-right: auto !important;
  margin-left: auto !important;
  margin: 20px 0px;
}

.ad-square {
  background-color: var(--text-body);
  opacity: 0.5;
  min-height: 250px;
  width: 250px;
}
.ad-vertical {
  background-color: var(--text-body);
  opacity: 0.5;
  min-height: 600px;
  width: 300px;
}
.section-gap {
  margin-top: 80px !important;
}
.banner-sub-heading {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color-darker);
}

.banner-copy {
  font-size: 2rem;
  font-weight: 500;
}
.banner-heading {
  font-size: 4rem;
  font-weight: 700;
}

.padding-section {
  padding: 60px 10px;
}

.text-darker {
  color: var(--primary-color-darker) !important;
}
.primary-text {
  color: var(--primary-color) !important;
}

.primary-bg {
  background-color: var(--primary-color) !important;
  color: var(--text-primary) !important;
}

.dark-bg {
  background-color: var(--primary-color-dark) !important;
  color: var(--text-primary) !important;
}

.bg-darker {
  background-color: var(--primary-color-darker) !important;
  color: var(--text-primary) !important;
}

.light-bg {
  background-color: var(--text-primary);
  color: var(--text-body);
}

.nav-link {
  color: var(--text-primary) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active {
  color: var(--primary-color-darker) !important;

  transition: ease-in-out;
  transition-duration: 0.5;
}

.light-btn {
  background-color: var(--text-primary) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border-radius: 5px !important;
  border: 1px thin var(--text-body) !important;
  color: var(--text-body) !important;
  padding: auto !important;
}
.dark-btn {
  background-color: var(--primary-color-light) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border-radius: 5px !important;
  border: 1px thin var(--primary-color-light) !important;
  color: var(--text-body) !important;
  padding: auto !important;
}
.darker-btn {
  background-color: var(--primary-color-darker) !important;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  padding: 10px 15px;
  color: var(--text-primary) !important;
  border: none;
}
.primary-btn {
  background-color: var(--primary-color-dark) !important;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  padding: 10px 15px;
  color: var(--text-primary) !important;
  border: none;
  text-decoration: none;
}
.secondary-btn {
  background-color: var(--text-body);
  color: var(--text-primary);
  border: none !important;
  padding: 10px 15px;
  font-size: 16px;
}
.dark-btn-no-round {
  background-color: var(--primary-color-dark) !important;
  font-size: 16px;
  padding: 10px 15px;
  color: var(--text-primary) !important;
  border: none;
  text-decoration: none;
}
.darker-btn:hover {
  background-color: var(--primary-color-dark);
  border: none;
}

.banner-input {
  border: none;
  padding: 15px;
  background-color: var(--text-primary);
  width: 80%;
}

.banner-input:focus,
.banner-input:target,
.banner-input:focus-visible {
  border: none !important;
  outline: 1px solid var(--text-primary);
}

.nav-item {
  padding: 0px 15px !important;
  text-align: end !important;
}

.navbar-toggler {
  color: var(--text-primary) !important;
}

.footer-list li a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.footer-list li {
  padding: 5px 0px !important;
}

.primary-gradient {
  color: var(--text-primary);
  text-align: center;
  background: linear-gradient(180deg, #66d2ce, #2daa9e);
}

.icon-size {
  font-size: 4.5rem;
}

.section-2-block {
  padding: 50px;
}

.register-form {
  padding: 0px 60px;
}

input::placeholder {
  color: #999;
  font-size: 12px;
  opacity: 0.8;
}

.forget-password {
  padding: 25px 15px;
  width: 100%;
}

.share-icon-box {
  width: 50px;
  height: 50px;
  text-align: center;
  align-content: center;
  font-size: 20px;
  cursor: pointer;
}

#paginations a {
  padding: 0px 5px;
}

.code-img {
  cursor: pointer;
  opacity: 0.75;
}

.wp-block-button a {
  background-color: var(--primary-color-darker) !important;
  color: var(--text-primary) !important;
}
.pointer{
	cursor: pointer;
}

.profile-icon {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  border: 3px solid var(--primary-color-dark);
  position: relative;
}
.profile-icon::before {
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  font-size: 4rem;
  left: 0;
  top: 0;
  transform: translate(50%, 4%);
}

.settings-selector {
  background-color: var(--text-primary);
  color: #555555;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  width: 100%;
}
.selected {
  background-color: var(--primary-color-dark) !important;
  color: var(--text-primary) !important;
}

.menu-bg {
  background-color: var(--menu-bg);
}
.profile-input {
  width: 100%;
  height: 40px;
  padding: 0px 20px;
  border: none;
  border-bottom: 2px solid #55555550;
  color: var(--text-body);
}

.profile-input:active,
.profile-input:focus,
.profile-input:focus-visible,
.profile-input:focus-within {
  border-bottom: none;
  outline: 2px solid #55555550;
}

select {
  font-size: 14px !important;
  color: var(--text-body) !important;
}

.btn{
	font-size: 14px !important;
}
.wp-block-button__link{
	height: auto !important;
}

.darker-btn:disabled{
	opacity: 0.5 !important;
	 cursor: not-allowed; 
	pointer-events: none;
}

/* Initially hide the wrapper. We will make it visible 
   if the ad script successfully inserts content.
*/
#hAdWrapper {
    display: none; 
}
#sqAddWrapper {
    display: none; 
}

/* When the ad script successfully inserts content 
   into #hAd, it makes the <ins> element visible.
   This CSS checks if #hAd is NOT empty.
*/
#hAd:not(:empty) {
    /* Re-show the wrapper if the ad unit is successfully filled. 
       Use the display property appropriate for your layout (e.g., block, flex, etc.).
    */
    display: block !important; 
}
#sqAd:not(:empty) {

    display: block !important; 
}

/* OPTIONAL: A common technique for AdSense is to hide the <ins> tag
   itself if it has no content. This helps in many modern browsers.
*/
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

/* Article format */

/* Container for the entire article */
article {
    max-width: 85%; /* Reduces total width for an elegant feel */
    margin: 60px auto; /* Centers the article with top/bottom spacing */
    padding: 60px 40px;
    background: #ffffff;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Header Section: Title and Meta */
.entry-header {
    text-align: center;
    margin-bottom: 50px;
}

.entry-header h1 {
    font-size: 2.8rem;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

/* Body Content: Readability focus */
.entry-content {
    font-size: 1.15rem;
    line-height: 1.85; /* Better spacing for long-form reading */
    color: #374151;
}

.entry-content p {
    margin-bottom: 1.5rem;
}

/* Style links with your brand green */
.entry-content a {
    color: #00d084; 
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.entry-content a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Footer Section: Meta info and Categories */
.entry-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.95rem;
    color: #6b7280;
}

.entry-footer a {
    color: #00d084;
    text-decoration: none;
    font-weight: 500;
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
    .entry-header h1 {
        font-size: 2rem;
    }
    article {
        margin: 20px auto;
		max-width: 100%; /* Reduces total width for an elegant feel */
  		padding: 40px 20px;
    }
}

/* end of article format  */

/* Blogs page */
.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin: 40px 0;
}

.blog-card {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 24px;
  background: #fff;
  transition: all 0.25s ease;
  height: 100%;
  display: flex;
}

.blog-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

.blog-card-content {
  display: flex;
  flex-direction: column;
}

.blog-date {
  font-size: 13px;
  color: #777;
  margin-bottom: 8px;
}

.blog-title {
  font-size: 20px;
  margin: 0 0 12px;
  line-height: 1.4;
}

.blog-title a {
  text-decoration: none;
  color: #222;
}

.blog-title a:hover {
  color: #0073aa;
}

.blog-excerpt {
  flex-grow: 1;
  font-size: 15px;
  color: #444;
  margin-bottom: 16px;
}

.read-more-btn {
  text-decoration: none;
  font-weight: 600;
  color: #0073aa;
}


@media (max-width: 540px) {
	.account-nav-link{
		font-size: 22px !important;
		line-height: 2;
	}
	.adResHide{
		display: none !important;
	}
}