/* ====================================== */
/* Desktop (default) - 980px and above                       /* ====================================== */

.phone-contact-area {
  position: absolute;
  top: 16px;
  right: 74px;
  color: #e9e9e9;
  text-transform: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 23px;
}

/* Phone number container */
.btn_one {
  color: var(--btn-one-text);
  border-width: var(--btn-border-width);
  background-color: var(--btn-one-bg);

  /* Fixed dimensions */
  /*
  width: 212px;
  height: 42px;
*/

  /* Icon on the left */
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

.btn_one:hover {
  color: var(--btn-one-text-hover);
  cursor: pointer;
}

.phone-icon {
  width: 24px;
  height: 24px;
  background-image: url("../img/mobile-icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
  margin-right: 8px;
}

.phone-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: right
}

/* Quote/Contact button */

.btn_two {
  color: var(--btn-two-text) !important;
  border: 2px solid var(--btn-two-border) !important;
  transition: var(--btn-two-transition) !important;
  background-color: var(--btn-two-bg) !important;

  /* Fixed dimensions */
  width: 212px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;

  padding-left: 12px;
  padding-right: 12px;
}

.btn_two:hover {
  color: var(--btn-two-text-hover) !important;
  border: 2px solid var(--btn-two-border-hover) !important;
  background-color: var(--btn-two-bg-hover) !important;
  cursor: pointer;
}

/* Base button styles */
.btn_one,
.btn_two {
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
}

/* Next
================================================ */

/* request quote button +++++++++++++++++++++++++++++ */

.btn-org {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 20px;

  color: var(--quote-btn-text);
  background-color: var(--quote-btn-bg);
  border: 2px solid var(--quote-btn-border);

  width: 240px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  cursor: pointer;

  transition: color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease;

/*  padding-top: 2px;*/
}

.quote {
  background-color: var(--quote-section-bg);
}

.quote:hover {
  color: var(--quote-btn-hover-text);
  background-color: var(--quote-btn-hover-bg);
  border: 2px solid var(--quote-btn-hover-border);
}

/* end - request quote button +++++++++++++++++++++++++++++ */

/* ====================================== */
/* Tablet - 979px and below 
/* ====================================== */
@media (max-width: 979px) {
    
.btn-org {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 20px;

  color: var(--quote-btn-text);
  background-color: var(--quote-btn-bg);
  border: 2px solid var(--quote-btn-border);

  width: 240px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  cursor: pointer;

  transition: color 0.3s ease,
              background-color 0.3s ease,
              border-color 0.3s ease;
    
/*  padding-top: 2px;*/
}

.quote {
  background-color: var(--quote-section-bg);
}

.quote:hover {
  color: var(--quote-btn-hover-text);
  background-color: var(--quote-btn-hover-bg);
  border: 2px solid var(--quote-btn-hover-border);
}

/* end - request quote button +++++++++++++++++++++++++++++ */
}


/* ====================================== */
/* Mobile - 733px and below                                               /* ====================================== */
@media (max-width: 733px) {
    
.btn-org {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 18px;

  color: var(--quote-btn-text);
  background-color: var(--quote-btn-bg);
  border: 2px solid var(--quote-btn-border);

  width: 100%;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  cursor: pointer;

  transition: color 0.3s ease,
              background-color 0.3s ease,
              border-color 0.3s ease;
    
/*  padding-top: 2px;*/
}

.quote {
  background-color: var(--quote-section-bg);
}

.quote:hover {
  color: var(--quote-btn-hover-text);
  background-color: var(--quote-btn-hover-bg);
  border: 2px solid var(--quote-btn-hover-border);
}

}

/* ====================================== */
/* Mobile - 733px and below                                           /* ====================================== */
@media (max-width: 733px) {
    

}
/* ====================================== */
/* Mobile - 380px and below                                           /* ====================================== */
@media (max-width: 380px) {

/*
 #menu-box-one {
  height: 50px;
  width: 50px;
  position: relative;
  top: 12px;
  right: 60px;
  display: block;
  cursor: pointer;
  z-index: 2;
 }

 .cover {
  height: 82px;
  width: 240px;
  background-color: #1b1d1f;
 }
*/
    
}