﻿@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
font-family: "PT Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 600;
}

.btn-primary {
background-color: #004875;
border: none;
padding: 12px 30px;
color: #ffffff !important;
font-size: 16px;
font-weight: 600;
}

.btn-primary:hover {
color: #ffffff;
background-color: #83b873;
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
color: #fff;
background-color: #83b873;
border-color: #83b873;
box-shadow: 0 0 0 .25rem rgb(131 184 115 / 32%);
}

.foot-btn-1, .foot-btn-2 {
display: block;
width: 100%;
background-color: rgb(0 84 166);
color: #ffffff;
padding: 10px 15px;
border-radius: 30px 30px 0 0;
text-transform: uppercase;
text-align: center;
font-size: 16px;
font-weight: 600;
transition: ease-in-out all 0.2s;
}

.foot-btn-2 {
border-radius: 0 0 30px 30px;
margin-top: 15px;
}

.foot-btn-1:hover, .foot-btn-2:hover {
background-color: #333333;
color: #ffffff;
}


.navbar-light .navbar-nav .nav-link .logout-btn i {
font-size: 21px;
color: #ed1c24;
}

.form-box h2 span {
color: #ed1c24;
}

.form-box h2 {
text-align: center;
font-weight: 500;
margin-bottom: 10px;
font-size: 27px;
}

.t-Form label {
font-size: 15px;
color: #222222;
font-weight: 600;
}

.b_center {
margin: 80px 0;
}

.form-box {
margin-bottom: 0;
}

.navbar {
position: relative;
}

.navbar-light .navbar-brand {
margin: 0;
padding: 0;
}

.navbar .navbar-brand img {
width: 220px;
}

.btn-otp {
background-color: #ed1c24;
}

.main-footer {
padding: 0;
}

 .main-footer h2 {
  color: #004875;
  font-size: 21px;
  margin-bottom: 20px;
  position: relative;
  text-transform: capitalize;
  padding-bottom: 15px;
 }
 .main-footer h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 50px;
  background: #024a72;
 }

.main-footer-area {
background-color: #efefef;
position: relative;
width: 100%;
padding: 60px 0 0 0;
}

.footer-bottom {
padding: 15px 0;
border-top: 1px solid #024a726e;
margin: 30px 0 0 0;
}

.contact-strip {
background-color: #0056b3;
color: #fff;
padding: 30px 15px;
margin: 60px 0 0 0;
}

.contact-row {
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}

.contact-widget-col {
flex: 1;
min-width: 220px;
display: flex;
align-items: flex-start;
gap: 15px;
}

.contact-widget-col .icon-box {
width: 40px;
height: 40px;
background: #fff;
color: #000;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
font-size: 20px;
flex-shrink: 0;
}

.contact-widget-col .icon-box i {
color: #000000;
}

.contact-widget-col h6 {
margin: 0 0 10px;
font-size: 21px;
font-weight: 500;
color: #ffffff;
font-family: "Oswald", sans-serif;
}

.contact-widget-col p {
margin: 0;
font-size: 14px;
color: #f1f1f1;
}

/* Social icons */
.contact-widget-col .social-icons {
display: inline-block;
margin: 15px 0 0 0;
}

.contact-widget-col .social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
background: #fff;
margin-right: 8px;
border-radius: 5px;
font-size: 18px;
text-decoration: none;
transition: 0.3s;
}

.contact-widget-col .social-icons a:hover {
transform: translateY(-3px);
}

.main-footer .link-widget h3, .main-footer .contact-widget h3, .main-footer .link-widget h3, .main-footer .contact-widget h3, .main-footer .link-widget h3, .main-footer .contact-widget h3, .main-footer .gallery-widget h3 {
font-size: 16px;
font-weight: bold;
color: #1b739c;
position: relative;
padding-bottom: 4px;
margin-bottom: 20px;
background: white;
width: auto;
border-radius: 10px;
display: inline-block;
padding: 5px 15px;
margin-top: 0;
text-transform: capitalize;
font-weight: 500;
}

.main-footer .footer-socila li {
margin: 0 0 18px 0;
padding: 0;
}

.main-footer .footer-socila li:last-child {
margin: 0;
}

.main-footer .link-widget li a, .main-footer .gallery-widget li a {
color: #000;
text-decoration: none;
transition: all 0.5s;
font-size: 15px;
font-weight: 500;
}

.main-footer .link-widget li a:hover, .main-footer .gallery-widget li a:hover {
color: #000000;
}

.main-footer-area p {
color: #000000;
font-size: 16px;
}

.main-footer .link-widget li span:before,
.main-footer .gallery-widget li span:before {
content: "\f054";
font-family: "FontAwesome";
font-size: 10px;
color: #ffffff;
margin-right: 3px;
}

.footer-sm {
display: flex;
margin: 0;
padding: 0;
align-items: center;
gap: 10px;
}

.footer-sm li a img {
width: 30px;
border-radius: 5px;
}

.united-logo img {
width: 130px;
margin: 0 0 15px 0;
}

.marquee-row {
margin-top: 30px;
}

.marquee-row marquee p {
margin: 0;
}

.marquee-row marquee p a {
color: #aaaaaa;
}

.marquee-row marquee p a:hover {
color: #ffffff;
}

.copyright-text {
font-size: 16px;
display: block;
color: #000;
}

.footer-contact-detail-widget p, .footer-contact-detail-widget p a {
color: #000000;
}

.footer-contact-detail-widget h6 {
font-size: 18px;
font-weight: 600;
}

.footer-contact-detail-widget ul {
display: flex;
gap: 15px;
margin: 15px 0 0 0;
}

.footer-contact-detail-widget ul li a {
border: 1px solid #024a72;
font-size: 16px;
width: 45px;
height: 45px;
display: flex;
margin-right: 0;
justify-content: center;
align-items: center;
transition: 0.5s all;
text-align: center;
color: #024a72 !important;
}

.footer-contact-detail-widget ul li a:hover {
text-decoration: none;
color: #ffffff !important;
background: #024a72;
border-color: #024a72;
}
/*.copyright-text:before {
    content: "";
    display: inline-block;
    position: relative;
    top: -4px;
    width: 52px;
    height: 2px;
    margin-right: 10px;
    background: rgba(255, 255, 255, 0.2);
}*/
.social {
display: flex;
align-items: center;
justify-content: end;
gap: 10px;
}

.social i {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
width: 28px;
height: 28px;
line-height: 28px;
text-align: center;
border-radius: 3px;
background: #222;
transition: 0.2s ease;
}

.social i:hover {
background-color: #644e28;
color: #ffffff;
}

.user-icon {
width: 90px;
height: 90px;
margin: 0 auto 30px auto;
padding: 0;
}

.form-box {
padding: 30px 24px;
border-radius: 5px;
margin-bottom: 0;
}

.user-icon img {
height: auto;
width: auto;
}

.myForm input {
border-radius: 5px;
position: static;
}

.btn-otp {
 background-color: rgb(1, 72, 117);
}

 .btn-otp:hover {
  color: #ffffff;
  background-color: #83b873;
 }

.btn-dealer {
background-color: #06b0ef;
}

.btn-dealer:hover {
background-color: #ed1c24;
}

.dropdown-menu[data-bs-popper] {
top: 100%;
left: 0;
margin-top: 7px;
min-width: 240px;
background-color: #ffffff;
border-radius: 0;
border: none;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
padding: 0;
}

.dropdown-menu li {
border-bottom: 1px solid #e8eef3;
}

.dropdown-menu li:last-child {
border-bottom: none;
}

.dropdown-item {
display: block;
width: 100%;
padding: 12px 15px;
clear: both;
color: #004875;
text-align: inherit;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border: 0;
font-size: 15px;
border: none;
font-weight: 500;
}

.dropdown-item:hover {
background-color: #f5f5f5;
color: #004875;
}

.t-Form {
padding: 30px 24px;
border: 1px solid #e1e0e0;
border-radius: 5px;
}

.t-Area {
padding: 0;
}

.c-Btn .btn-otp {
 height: calc(3.0rem + 1px) !important;
 font-size: 16px !important;
 border-radius: 5px;
 align-items: center;
 justify-content: center;
 display: flex;
 font-weight: 600 !important;
}

.thanksbox h6 {
font-size: 27px !important;
font-weight: 500;
color: #ed1c24 !important;
}

.thanksbox p {
font-size: 16px !important;
padding-top: 24px;
margin-bottom: 0px !important;
}

.welcome-name {
position: relative;
top: 0px;
left: 45px;
line-height: 1.2;
}

.welcome-name p {
font-size: 14px;
margin: 0;
color: #ffffff;
}

.welcome-name label {
color: #ed1c24;
font-size: 18px;
font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link .logout-btn {
font-size: 15px;
color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link .logout-btn i {
font-size: 24px;
color: #ed1c24;
}

.top-head {
background-color: #1b739c;
padding: 5px 0;
}

.top-head p {
color: #ffffff;
margin: 0;
}

.top-head p a {
font-size: 13px;
color: #ffffff;
font-weight: 500;
}


.otp-page {
 padding: 80px 0;
}

 .otp-page .card {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
  padding: 24px;
  border-radius: 15px;
  max-width: 520px;
  width: 100%;
 }

 .otp-page .form-control {
  font-size: 18px;
  height: calc(3.5rem + 1px) !important;
  text-align: center;
  font-weight: 600;
 }

 .otp-page .card-header {
  margin: 0 0 15px 0;
  border: none;
  background-color: #ffffff;
 }

  .otp-page .card-header img {
   margin: 0 0 60px 0;
   width: 250px;
  }

.thanksbox.form-box label {font-size: 24px;}



.job-history {
 border: 1px solid #dbdbdb;
 margin: 0 0 30px 0;
 border-radius: 5px;
 padding: 24px 15px;
 text-align: start !important;
 width: 100%;
}

 .job-history p {
  text-align: start;
 }

 .job-history .job-history-detail h3 {
  font-size: 21px;
  margin: 0 0 15px 0;
 }

.call-to-technician p {
 display: flex;
 gap: 0;
 align-items: start;
 font-weight: 600;
 flex-direction: column;
}

 .call-to-technician p small {
  color: #ed1c24;
  font-size: 16px;
 }

 .call-to-technician p a {
  border: 1px solid #024a72;
  font-size: 16px;
  width: 40px !important;
  height: 40px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s all;
  text-align: center;
  color: #024a72 !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0;
 }

  .call-to-technician p a:hover {
   color: #ffffff !important;
   background: #ed1c24;
   border-color: #024a72;
  }

.status-pending {
 padding: 8px 15px;
 background-color: #e8e8e8;
 display: inline-flex;
 border-radius: 5px;
 border: 1px solid #222;
}

 .status-pending p {
  margin: 0;
  color: #222;
  font-size: 16px;
  font-weight: 600;
 }

.status-closed {
 padding: 8px 15px;
 background-color: #a8f4d1;
 display: inline-flex;
 border-radius: 5px;
 border: 1px solid #198754;
}

 .status-closed p {
  margin: 0;
  color: #198754;
  font-size: 16px;
  font-weight: 600;
 }


.status-hold {
 padding: 8px 15px;
 background-color: #fff0cf;
 display: inline-flex;
 border-radius: 5px;
 border: 1px solid #a48200;
}

 .status-hold p {
  margin: 0;
  color: #a48200;
  font-size: 16px;
  font-weight: 600;
 }

.status-assigned {
 padding: 8px 15px;
 background-color: #c0e6ff;
 display: inline-flex;
 border-radius: 5px;
 border: 1px solid #004a78;
}

 .status-assigned p {
  margin: 0;
  color: #014775;
  font-size: 16px;
  font-weight: 600;
 }

.print-btn {
 padding: 8px 15px !important;
 background-color: #e8ffe1 !important;
 display: inline-flex !important;
 border-radius: 5px !important;
 border: 1px solid #83b873 !important;
 min-width: auto;
 text-align: center !important;
 align-items: center;
 justify-content: center;
 gap: 5px;
 font-size: 18px;
 color: #82b772;
 margin: 15px 0 0 0;
 font-weight: 600;
 width: auto !important;
}

 .print-btn:hover {
  background-color: #82b772 !important;
  border-color: #82b772 !important;
  color: #ffffff;
 }

.job-buttons {width: 100%;
display: flex;
flex-direction: column;
gap: 24px;
}

.signup-page {padding: 80px 0;}
 .signup-page .card {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
  padding: 24px;
  border-radius: 15px;
  max-width: 520px;
  width: 100%;
 }

@media (min-width: 992px) {
 .navbar-expand-lg .navbar-nav .nav-link {
padding: 15px 0 15px 30px;
font-size: 16px;
color: #000000;
font-weight: 500;
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
color: #222222;
}

.navbar-dark .navbar-nav .nav-link .logout-btn i {
font-size: 21px;
color: #ed1c24;
}

 .welcome-name label {
  color: #81b772;
  font-size: 16px;
  margin-bottom: 0px !important;
font-weight: 600;
 }
}

@media screen and (max-width: 1399px) {
.navbar .navbar-brand img {
width: 200px;
}

.welcome-name {
top: 0;
left: 10px;
}

 .navbar-expand-lg .navbar-nav .nav-link {
  padding: 15px 0 15px 24px;
 }

.navbar-brand {
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
}
 .icon-Btn a {
  border-radius: 5px;
  padding: 24px 15px;
 }
 .icon-Btn img {
  width: 70px; 
 }
 .job-history .job-history-detail h3 {
  font-size: 18px !important; 
 }
 .form-Head h1 {font-size: 30px;}
}

@media screen and (max-width: 1199px) {

.navbar .navbar-brand img {
position: static; 
width: 160px;
}
 .navbar-expand-lg .navbar-nav .nav-link { 
  font-size: 15px; 
 }

.welcome-name {
left: 0;
top: 0;
}

.dropdown-item {
display: block;
width: 100%;
padding: 2px 15px;
clear: both;
color: #222222;
text-align: inherit;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border: 0;
font-size: 13px;
border: none;
font-weight: 500;
}

.b_center {
margin: 50px 0;
}

.myForm input {
padding: 10px 15px;
font-size: 18px;
}

.form-Head {
font-size: 24px;
}

.thanksbox h6 {
font-size: 21px !important;
}

.myForm {
width: 100%;
}
 .form-Head h1 {
  font-size: 27px;
  margin: 30px 0 0 0;
  margin-bottom: 0px;
 }
}

@media screen and (max-width: 991px) {
.navbar-expand-lg .navbar-nav .nav-link {
font-size: 15px;
color: #222222;
font-weight: 500;
}

.dropdown-item {
padding: 4px 15px;
font-size: 14px;
border: none;
font-weight: 500;
}

.navbar .navbar-brand img {
width: 130px;
}

.navbar-expand-lg .navbar-nav .nav-link {
padding: 5px 0;
}

.navbar-nav {
max-width: 700px;
margin: 0 auto;
}

.welcome-name {
position: static;
text-align: center;
}

.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
position: absolute;
top: 0;
background: #ffffff;
width: 100%;
left: 0;
right: 0;
top: 64px;
padding: 0 15px;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
}

.navbar-toggler-icon {
display: inline-block;
width: 1.1em;
height: 1.2em;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}

.logout-btn i {
font-size: 21px;
color: #ed1c24;
}

.navbar-brand {
padding: 0;
margin: 0;
}

.b_center {
margin: 50px 0;
}

.user-icon {
width: 80px;
height: 80px;
margin: 0 auto 24px auto;
padding: 0;
}

.myForm input {
width: 100%;
padding: 10px 15px;
;
font-size: 18px;
}

.form-box h4 {
font-size: 18px;
}

.myForm {
width: 100%;
}

.main-footer h2 {
font-size: 21px;
margin: 24px 0 15px 0;
}

.footer-bottom a {
font-size: 14px;
}

.main-footer .link-widget li a, .main-footer .gallery-widget li a {
font-size: 14px;
}

.main-footer-area {
padding: 0;
}

.contact-widget-col h6 {
font-size: 18px;
margin: 0 0 5px 0;
}

.main-footer-area p {
font-size: 14px;
}

.contact-widget-col .social-icons a {
width: 30px;
height: 30px;
font-size: 15px;
}

.contact-widget-col .icon-box {
width: 35px;
height: 35px;
background: #fff;
font-size: 16px;
}

.contact-widget-col .social-icons {
margin: 10px 0 0 0;
}

.contact-row {
gap: 15px;
flex-direction: column;
}

.contact-strip {
padding: 24px 15px;
margin: 30px 0 0 0;
}

.foot-btn-1, .foot-btn-2 {
font-size: 14px;
}
 .footer-contact-detail-widget ul li a {
  font-size: 15px;
  width: 35px;
  height: 35px;
 }
 .footer-contact-detail-widget ul {
  display: flex;
  gap: 5px;
  margin: 15px 0 0 0;
 }
 .job-buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 24px;
 }
 .icon-Btn a {
  border-radius: 5px;
  padding: 24px 15px;
  width: 50%;
 }
}



@media screen and (max-width: 767px) {

 .job-history p { 
  font-size: 15px;
 }
.navbar-brand {
padding: 0;
margin-right: 0;
}

 .copyright-text {
  font-size: 15px;
  display: block;
  color: #000;
 }

.navbar .navbar-brand img {
position: static;
width: 150px;
}

.form-Head {
font-size: 24px;
}

.t-Head {
margin-bottom: 15px;
}

.t-Form {
padding: 24px 15px;
}

.icon-Btn img {
width: 70px;
}

.welcome-name {
position: relative;
top: 0;
left: 0;
text-align: center;
}

.welcome-name label {
font-size: 16px;
font-weight: 400;
margin: 0;
}

.navbar-nav {
max-width: 516px;
margin: 0 auto;
}

.navbar-expand-lg .navbar-nav .nav-link {
padding: 5px 0 5px 0;
}
 .main-footer h2 {
  font-size: 18px;
  margin: 20px 0 15px 0;
 }

.main-footer .link-widget h3, .main-footer .contact-widget h3, .main-footer .link-widget h3, .main-footer .contact-widget h3, .main-footer .link-widget h3, .main-footer .contact-widget h3, .main-footer .gallery-widget h3 {
font-weight: 500;
font-size: 15px;
margin: 15px 0 10px 0;
}

.social {
margin: 5px 0 0 0;
}

.united-logo img {
width: 150px;
}

.myForm {
max-width: 100%;
}

.b_center {
margin: 40px 0;
}

.form-box h4 {
margin-bottom: 15px;
font-size: 18px;
}

.form-box {
padding: 24px 15px;
}

.myForm input {
padding: 10px 15px;
font-size: 18px;
}

.user-icon {
width: 70px;
height: 70px;
margin: 0 auto 24px auto;
}

.btn-otp {
padding: 10px 15px !important;
font-size: 16px !important;
}

 .job-history .job-history-detail h3 { 
  margin: 0 0 5px 0;
 }
 .call-to-technician p {
  gap: 5px !important;
  align-items: start;
  flex-direction: row;
  margin: 0 0 15px 0;
 }

}

@media screen and (max-width: 575px) {
 .main-footer .link-widget li a, .main-footer .gallery-widget li a {
  font-size: 13px;
 }
 .main-footer .footer-socila li {
  margin: 0 0 10px 0;
  padding: 0;
 }
 .navbar .navbar-brand img {
  position: static;
  width: 120px;
 }
 .print-btn { 
  font-size: 16px; 
 }
 .otp-page .card { 
  padding: 24px 15px;
  border-radius: 10px; 
  width: 95%;
 }
 .signup-page .card {
  padding: 24px 15px;
  border-radius: 10px;
  width: 95%;
 }
}
