/*
 * This CSS is extracted from stylecd70.css and is relevant for the content
 * you provided. It includes general styles and specific styles for the
 * desktop-only content.
 */

/* General body and wrapper styles */
body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
   font-display: swap; 
  background-color: #fff !important;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* Ensure no horizontal scroll */
}

#wrapper {
  width: 100%;
  float: left;
}

/* Browser center for content alignment */
.browser-center {
  max-width: 960px;
   background-color: transparent;
  width: 100%;
  margin: 0 auto;
  position: relative;  /* This was missing! */
  z-index: 10;        /* This ensures it's above other elements */
}

/* Main content area styles */
#main-content-area {
  width: 100%;
  float: left;
  background-color: white; 
  margin-bottom: 15px;
}

/* Left sidebar/navigation area */
#main-left-content-area {
  max-width: 255px;
  float: left;
}

#left-image-container {
  max-width: 243px;
  float: left;
  border: 1px solid #a4a4a4;
  background: #ececec;
  padding: 5px;
  margin-bottom: 40px;
  margin-top: 40px;
  font-family: "Open Sans";
  font-display: swap;
    list-style-type: none;
}

#left-image-container h1 {
  font-size: 28px;
  color: #333;
  font-weight: normal;
  margin-bottom: 10px;
}

#left-image-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  float: left;
    list-style: none;
}

#left-image-container li {
  width: 220px;
  float: left;
  background: url(https://www.technologymovers.net/images/dark-blue-icon.webp) left center no-repeat;
  padding-left: 25px;
  font-size: 15px;
  margin-bottom: 10px;
    list-style: none;
}

#left-image-container li a {
  color: #333;
    list-style: none;
}

#left-image-container li a:hover {
  color: #0891cb;
  list-style: none;
}

/* Right content area (main content) */
#main-right-content-area {
  width: 10px;
  float: right;
  margin-left: 20px;
}

#main-right-content-area h1 {
  color: #002d51;
  font-family: "Open Sans", sans-serif;
  font-display: swap;
  font-size: 36px;
  font-weight: normal;
  
}

#main-right-content-area h2 {
  color: #0a77bc;
  font-size: 26px;
  font-family: "Open Sans", sans-serif;
  font-display: swap;
  font-weight: normal;
  margin-top: 20px;
}

#main-right-content-area h3 {
  color: #555;
  font-size: 1.5em;
  margin-bottom: 10px;
  font-weight: normal;
}
#main-right-content-area h4 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: normal;
}
#main-right-content-area p {
  color: #555;
  font-size: 15px;
  font-weight: normal;
  margin: 5px 0 20px 0;
}

#main-right-content-area p img {
  text-align: center;
}

#main-right-content-area ul {
  list-style: none;
  margin: -10px 0 0 30px;
  padding: 0;
}

#main-right-content-area ul li {
  background: url(https://www.technologymovers.net/images/blue-arrow-bullet.webp) 0 7px no-repeat;
  color: #555;
  font-size: 15px;
  padding-left: 15px;
  margin-bottom: 5px;
}

#main-right-content-area ul ul {
  list-style: none;
  margin: 0 0 0 20px;
  padding: 0;
}

#main-right-content-area ul li li {
  background: url(https://www.technologymovers.net/images/grey-circle-bullet.webp) 0 9px no-repeat;
}

#main-right-content-area p a,
#main-right-content-area a {
  color: #0891cb;
}

/* Specific styles for the .entry-content div */
.entry-content {
  /* This width was present in the original media query for max-width: 768px,
     but given you want to reuse it as is for desktop, it's included here.
     You might need to adjust this if it conflicts with broader desktop layouts. */
  width: 687px;
}

.entry-content h4 {
  font-style: italic;
}

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

/* Location area styles */
#location-area {
  width: 100%;
  float: left;
  background: #ececec;
  border-bottom: 1px solid #c8c8c8;
  min-height: 200px;
  padding: 25px 0;
}

#location-area h2 {
  /* This style was missing in the provided CSS for #location-area h2,
     but it's a common heading style. Adding a default for consistency. */
  color: #002d51; /* Assuming a dark blue from other headings */
  font-family: "Open Sans", sans-serif;
  font-display: swap;
  font-size: 32px; /* Adjusted to be a reasonable size for a section heading */
  font-weight: normal;
  text-align: center; /* Centering for the map section */
  margin-bottom: 20px;
}

.location-map .map-area {
  width: 100%;
  float: left;
  margin: 10px 0 10px 0;
}

.location-map .map-area img {
  width: 100%;
  height: auto; /* Ensure image scales responsively */
}

/* Styles for desktop-only visibility */
.desktop-only {
  display: block; /* Visible by default on desktop */
}

.mobile-only {
  display: none; /* Hidden on desktop */
}

/* Media queries to hide desktop-only content on smaller screens */
@media screen and (max-width: 768px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
  /* Adjustments for main-right-content-area on smaller screens if it was to be visible */
  #main-right-content-area {
    width: 100%; /* Take full width on smaller screens */
    float: none;
    margin: 0;
  }
}

/* Further adjustments for even smaller mobile screens */
@media only screen and (min-width: 321px) and (max-width: 480px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
}

@media only screen and (min-width: 100px) and (max-width: 320px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
}

/* Custom button style from the HTML */
.custom-button {
    background-color:#004680;
    color:white;
    padding:14px 28px;
    text-decoration:none;
    border-radius:4px;
    font-weight:bold;
    display: inline-block; /* To allow padding and margin */
}

.custom-button:hover {
    /* Add hover effects if desired */
    opacity: 0.9;
}
#main-right-content-area {
  width: 1px;        /* Element is invisible */
  float: right;
  margin-left: 20px;
}