/* variables */
:root {
    --alt-orange: #FF783E;
    --vc-orange: #f56600;
    --dark-orange: #C4500E;
    --darker-orange: #A13D03; 
    --body-bg: #272C34; 
    --footer-bg: #000;
    --default-text: #fff; 
    --footer-text: #b5b5b5; 
    --nav-text: #000;
    --card-text: #000;
    --secondary-logo: #000; 
    --content-corner-radius: 1.25rem;
    --h1-font-size: 2rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --card-padding: 1.5rem;

    --home-card-bg: var(--vc-orange);
    --home-card-text: var(--card-text);
    --home-card-font-color: #000;
    --product-text-wrap-bg: var(--vc-orange);
    --product-text-color: #000;
    --employee-contact-bg: var(--vc-orange);
    --employee-contact-font-color: #000;
  }

/* gerneral global styling */
html,
body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 100%;
  height: 100%;
}
 
*,
*:before,
*:after {
  box-sizing: border-box;
}
 
abbr[title] {
  text-decoration: none;
}
 
ul {
  margin: 0;
  padding: 0;
}
 
li {
  list-style-type: none;
}

.screen-reader-only{
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;

}

/* web fonts */

  @font-face {
    font-family: "Battambangblack";
    src: url("../Battambang/Battambang-Black.ttf");
  }

  @font-face {
    font-family: "Battambangbold";
    src: url("../Battambang/Battambang-Bold.ttf");
  }

  @font-face {
    font-family: "OpenSans-Bold";
    src: url("../Open_Sans/static/OpenSans-Bold.ttf");
  }

  @font-face {
    font-family: "OpenSans-Regular";
    src: url("../Open_Sans/static/OpenSans-Regular.ttf");
  }

  @font-face {
    font-family: "OpenSans-Light";
    src: url("../Open_Sans/static/OpenSans-Light.ttf");
  }


/* Site styling */

#id_products, #id_mobilenav{
  display: none;
}

body{
    background: var(--body-bg);
    color: var(--default-text);
    font-family: OpenSans-Regular, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1rem;
}

header{
    background-color: #000;
    font-size: 0.75rem;
    padding: 10px;
}

header svg{
    display: inline-block;
    margin: 0 0.5rem -0.25rem;
}

header a, header a:active{
    color: #FF783E;
    text-decoration: none;
}

header a:hover{
    text-decoration: underline;
}

h1{
    font-family: Battambangblack, sans-serif;
    font-size: var(--h1-font-size);
    color: var(--vc-orange);
    line-height: 150%;
}

h2{
  font-family: Battambangbold, sans-serif;
  font-size: var(--h2-font-size);
  line-height: 130%;
}

h3{
  font-family: Battambangbold, sans-serif;
  font-size: var(--h3-font-size);
  margin: 0 0 1rem;
  line-height: 130%;
}

.Homepagehead{
  text-align: center;
}

p{
    font-family: OpenSans-Regular, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0;
}

.card-text{
  background: var(--home-card-bg);
  color: var(--home-card-font-color);
  padding: var(--card-padding);
  border-radius: var(--content-corner-radius);
  margin: 0 0 2rem;
}

.standout{
  font-family: OpenSans-Bold, sans-serif;
}

.card-text h2{
  margin: 0 0 1rem;
  padding: 0;
}

.home-card-text p{
  margin: 0 0 1rem;
}

h2{
  margin: 0 0 1rem;
  padding: 0;
}

.product-page img{
  width: 100%;
}

.product-page-text-wrap .h3{
  margin: 0;
  padding: 0;
}

/* homepage logo styling */
.homepage-logo{
  text-align: center;
}

.homepage-logo svg{
  width: 250px;
}

.st0 {
  fill: var(--body-bg);
}

.st1 {
  fill: var(--vc-orange);
  stroke-miterlimit: 10;
}

.secondary-logo{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.csi-state-only{
  width: 3.125rem;
}

.csi-text-only{
  width: 13rem;
}


.secondary-logo .st0 {
  fill: var(--secondary-logo);
}

.main{
  padding-top: 1rem;
  padding-bottom: 4rem;
}

.phone-icon, .email-icon{
  fill: var(--employee-contact-font-color);
}

.employee-contact img{
  margin: 0 0 1rem;
  border-radius: var(--content-corner-radius);
}

.employee-contact{
  background: var(--home-card-bg);
  color: var(--card-text);
  border-radius: var(--content-corner-radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
}

.employee-contact address{
  font-style: normal;
}

.employee-contact div a:hover{
  text-decoration: underline;
}

.employee-contact div a svg{
  margin: 0 0.3rem -0.25rem 0;
}

.office-layout{
  background: var(--darker-orange);
  color: var(--default-text);
  border-radius: var(--content-corner-radius);
  padding: 1rem;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-card h2{
  font-size: 1.25rem;
  margin: 0;
}

.product-card a:hover{
  text-decoration: underline;
}

.home-firsttext{
  font-family: OpenSans-Regular, sans-serif;
  font-size: 1rem;
  line-height: 1.55rem;
  color: var(--default-text);
  margin: 0 0 4rem;

}

.group-photo{
  width: 100%;
  margin: 0 0 1rem;
  border-radius: var(--content-corner-radius);
}

.home-page-links{
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 0 0 4rem;
}

.link-button{
  border-radius: var(--content-corner-radius);
  border: 2px solid var(--body-bg);
  padding: 1rem;
  background: var(--vc-orange);
  color: var(--nav-text) ;
  text-align: center;
  font-family: OpenSans-Bold, sans-serif;
  text-decoration: none;
}

.link-button:hover{
  text-decoration: underline;
}

.employee-contact .link-button{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.service-text ul{
  position: relative;
  left: 1.5rem;
  width: 90%;
}

.service-text li{
  list-style-type: disc;
  padding: 0.5rem 0;
}

.service-text h3{
  margin: 0;
}

.sitemap a{
  display: block;
  color: var(--default-text);
  font-family: OpenSans-Regular, sans-serif;
  line-height: 3rem;
  font-size: 1rem;
}

.sitemap-product-page{
  margin-left: 1rem;
}


/* media query for padding and layout */

nav, header, .main, footer{
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 375px) {
    nav, header, .main, footer{
      padding-left: 20px;
      padding-right: 20px;
    }
  }

@media (min-width: 800px) {
    nav, header, .main, footer{
      padding-left: 60px;
      padding-right: 60px;;
    }
  }

@media (min-width: 1200px) {
    nav, header, .main, footer{
      padding-left: 180px;
      padding-right: 180px;
    }
  }

  @media (max-width: 770px) {
    .home-card{
      display: flex;
      flex-direction: column;
    }
  }