/* BASE Settings BEGINS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  background-color: transparent;

}

@font-face {
  font-family: ultimateFont;
  src: url('./fonts/roofs.otf');
}

@font-face {
  font-family: ultimateFont2;
  src: url('./fonts/sphererez.ttf')
}

h1,
h2,
h3 {
  font-family: Helvetica, sans-serif;
}

h1 {
  color: white;
}

p,
h4 {
  font-family: Verdana, serif;
}

li {
  font-family: 'ultimateFont', Garamond, sans-serif;
  font-weight: 10;
}

html {
  align-items: center;
  align-content: center;
  align-self: center;
  text-align: center;
  background-color: #f5f5f5;
  width: 100vw;
  overflow-x: hidden;
}

body {
  width: 100vw;
  overflow-x: hidden;
}

@font-face {
  font-family: 'ultimate';
  src: url(font/sphererez.tff)format('TTF');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'roofs';
  src: url(font/roofs.otf)format('OTF');
  font-weight: normal;
  font-style: normal;
}

/* header NAVIGATION BEGINS*/
header nav {
  position: fixed;
  width: 100%;
  height: inherit;
  z-index: 4;
  background-color: white;
  padding: 0 0 0 0;
}

.navburger {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: fixed;
  height: 35px;
  width: 45px;
  right: 30px;
  top: 35px;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.lines {
  background-color: transparent;
  display: block;
}

.navburger .lines span {
  width: 23px;
  height: 2px;
  background-color: white;
  margin: 5px 0;
  border-radius: 2px;
  display: block;
  border-radius: 0px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.ajupiter {
  background-color: transparent;
  background-image: url();
  width: 100%;
  height: 200%;
  display: none;
  z-index: 5;
}

.burgermenu {
  display: none;
  position: fixed;
  top: 2%;
  left: 5%;
  background-image: url(ultlogos/jhfooter.png);
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0px 20px 40px 10px rgba(0, 0, 0, 0.9);
  border: rgba(255, 255, 255, 0.3);
  width: 90vw;
  height: 95vh;
  padding: 2rem 1rem;
  text-align: center;
  margin-inline: auto;
  z-index: 4;
}

header nav ul {
  display: flex;
  justify-content: space-around;
}

header nav ul .logo {
  transform: skewX(-20deg);
  background-image: linear-gradient(to bottom left, #0F51929f, #0F519200, transparent);
  padding: 1rem 1rem;
}

header nav ul img {
  width: 180px;
  height: auto;
  position: relative;

  transform: skewX(20deg);
}

.menulogo {
  display: none;
  position: absolute;
  height: 126px;
  width: auto;
  transform: skewX(20deg);

  right: -71px;
}

.emergencyicon {
  height: 50px;
  width: auto;
  transform: skewX(20deg);
  position: absolute;

  top: 2rem;
  left: 1rem;
  animation: eicon 2s ease-in-out infinite;

}

@keyframes eicon {
  70% {
    transform: skewX(20deg) translateY(0%);
  }

  80% {
    transform: skewX(20deg) translateY(-15%);
  }

  90% {
    transform: skewX(20deg) translateY(0%);
  }

  95% {
    transform: skewX(20deg) translateY(-7%);
  }

  97% {
    transform: skewX(20deg) translateY(0%);
  }

  99% {
    transform: skewX(20deg) translateY(-3%);
  }

  100% {
    transform: skewX(20deg) translateY(0);
  }
}

.emergencyicon:hover {
  transform: scale(110%) skewX(20deg);
}

.headermenu {
  display: none;
}

.headermenu h1 {
  transform: skewX(20deg);
  text-align: left;
  padding: 1.5rem 0 0 1.5rem;
  font-family: 'ultimateFont';
  font-size: 1.2rem;
  font-weight: 10;
}

.secondbox {
  width: 90%;
  height: auto;
  background-image: linear-gradient(#0F5192A9, #0F5192BB, #0F5192FF);
  transform: skewX(-20deg);
  position: relative;
  z-index: 1;
}

.burgerlinks {
  color: white;

  display: inline-block;
}


.burgerlinks h3 {
  margin: 0.75rem;
  font-size: 1rem;
  font-family: 'ultimateFont', Garamond, sans-serif;
  font-weight: 10;
}

.burgerlinks li {
  margin: 0.75rem;
  font-size: 0.8rem;
  font-family: 'ultimateFont2', Garamond, sans-serif;
  font-weight: 900;
}

.firsthalfnav {
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-around;
}

.secondhalfnav p {
  text-align: center;
}

.secondhalfnav li {
  font-family:
}

.navcontainer {
  width: 100%;
  overflow: hidden;
  color: white;

}

.navcontainer img {
  width: 80%;
}


header nav ul li {
  display: none;
}

header nav ul .submenu {
  background-image: linear-gradient(to bottom left, #E01F27, #E01F2799);
  color: white;
  transform: skewX(-20deg);
  padding: .5rem 2rem .5rem 1rem;
  width: 90%;
  border-radius: 0 0 0 0;
  position: relative;
}

header nav ul .submenu li a {
  color: white;
  transform: skewX(20deg);
}

header nav .mainmenu {
  height: auto;
  transform: skewX(-20deg);
}

header nav .mainmenu li {
  border-left: 2px solid red;
  margin: .2rem;
}

header nav .mainmenu li a {
  padding: 0 2rem 0 1rem;
  transform: skewX(20deg);
}

a {
  color: inherit;
}

/* What is this doing?! what is this linked to?!?!  */
header nav ul button {
  line-height: 1.0rem;
  margin: 1.5rem;
  padding: 1rem;
  width: 120px;
  font-size: 1.3rem;
  font-family: sans-serif;
  border-radius: 50px;
  color: white;
  background-color: #259;
  text-decoration: none;
}

header nav ul button:hover {
  background-color: rgb(204, 0, 0);
}

/* What is this doing?! what is this linked to?!?!  */


/* Linked to script actuating a display */
.burgermenu.active {
  display: block;
}

.ajupiter.active {
  display: block;
}

.lines.active {
  display: none;
}


/* Linked to script actuating a display */

@media (min-width: 53em) {
  .headermenu {
    display: block;
    width: 100%;
    height: auto;
    background-image: linear-gradient(#0F5192, #0F5192Cf, #0F5192);
    transform: skewX(-20deg);

  }
}

@media (min-width: 40em) {
  header nav {
    position: fixed;
    width: 100%;
    z-index: 4;
    background-color: white;
    padding: 0 0 0 0;
    display: block;
  }

  header nav .navburger {
    display: none;
  }

  header nav ul {
    display: flex;
    justify-content: space-around;
  }

  header nav ul li {
    display: flex;
  }

  header nav ul .submenu li {
    justify-content: flex-end;
  }

  header nav ul li a {
    color: #0F5192;

    font-style: normal;
    font-weight: bolder;
    font-size: 1rem;
    text-transform: uppercase;
  }

  header nav .submenu li a:hover {
    color: #0F5192;
  }

  header nav .mainmenu li a:hover {
    color: #E01F27;
  }

  .menulogo {
    display: block;
  }
}

/*NAVIGATION ENDS*/
.videobanner {
  position: relative;
  overflow: hidden;
  top: 6rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 6rem;
  height: 60vh;
  width: 100vw;

}

.videobanner video {
  width: 100vw;
  height: 100%;
  max-height: auto;
  object-fit: cover;
  object-position: center;
}

.homevideo {
  width: 100vw;
  height: 100%;
  max-height: auto;
  object-fit: cover;
  object-position: center;
}

.overlayv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(0, 0, 0, 0.5) -2px, transparent 2px);
  z-index: 2;
  pointer-events: none;
  /* Allows clicks to interact with elements behind the overlay */
  /* Other properties */
  background-size: 2px 2px;
  /* Adjust the size to control the density and spacing of dots */
}

.bannercopy {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 50%;
  padding: 2rem;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.bannercopy h1 {
  position: relative;
  top: -200px;
  font-size: 4.5rem;
  font-variant-caps: small-caps;
  line-height: 4.5rem;
  text-align: left;
  z-index: 1;
  font-family: 'ultimateFont2';
  margin-left: -0.6rem;
}

.bannercopy .bannerlogo {
  font-family: 'ultimateFont';
  font-weight: 10;
  right: -60px;
}

.bannercopy h3 {
  position: absolute;
  font-family: Verdana;
  font-variant-caps: small-caps;
  font-size: 1.3rem;
  color: white;
  text-align: left;
  top: 20%;
  padding: 2rem 0rem;
  margin-top: -30px;
}

.bannercopy .homebuttons {
  position: absolute;
  right: 15%;
  top: 37%;
}

.bannercopy button {
  padding: .5rem 1rem;
  margin: 0 1rem;
  color: white;
  font-size: 1.2rem;
  font-variant: small-caps;
  cursor: pointer;
}

.bannercopy button:hover {
  background-color: white;
  color: #0F5192;
}

.aboutstaff button {
  padding: .5rem 1rem;
  margin: 1rem 1rem;
  color: white;
  font-size: 1.2rem;
  font-variant: small-caps;
  cursor: pointer;
}

.aboutstaff button:hover {
  background-color: white;
  color: #0F5192;
  border: 2px solid #0F5192;

}

.homebuttons {
  display: flex;
  align-items: center;
}

.homebutton1 {
  background-color: #0F5192;
  border: none;
}

.homebutton2 {
  border: 3px solid white;
  color: black;
}

.homebutton2 a {
  color: black;
}

@media (min-width: 56rem) {
  .bannercopy h1 {
    font-size: 6.5rem;

  }

  .bannercopy p {
    top: 19%;
  }

  .bannercopy .homebuttons {
    right: 15%;
    top: 39%;
  }

  .bannercopy button {
    padding: .5rem 2rem
  }

  .bannercopy .bannerlogo {
    font-family: 'ultimateFont';
    font-weight: 10;
    right: -85px;
  }
}



/* NEW WEBDESIGN MAIN BANNER BEGINS */
.mainbanner {
  margin-left: -5rem;
  display: flex;
  gap: .25rem;
  width: 100%;
  height: 50vh;
  min-height: 20rem;
}

.showcase {
  display: flex;
  overflow: scroll;
  height: 40vh;
}

.thebanners {
  position: relative;
  min-width: 20rem;
  width: 20rem;
  height: auto;
  color: white;
  font-size: 1rem;
  padding: 1.5rem 3rem;
  margin: .5rem 0;
  text-align: left;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  display: flex;
  flex-direction: column-reverse;
  transition: .5s;
  overflow-x: hidden;
  overflow-y: hidden;
}
.thebanners img {
  position: absolute;
  top: 0; 
  left: -20vw; 
  width: (100% + 20vw); 
  height: auto;
  max-height: 30rem;
  min-height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: skewX(20deg); /* Unskew the image */
  pointer-events: none;
}

@media (min-width: 40rem){
  .thebanners img{
    top: 0; 
    left: -10vw; 
    width: (100% + 30vw); 
  }

  .mainbanner {
    display: flex;
    padding-top: 0px;
  }

  .thebanners {
    transform: skewX(-20deg);
    width: 20rem;
  }

  .thebanners:hover {
    position: inherit;
    padding: 5rem;
    min-width: 25rem;
    transition: .8s;
  }
}

@media (min-width: 70rem){
  .thebanners img{
    top: 0; 
    left: -5vw; 
    width: (100% + 40vw); 
  }
}

.showcase img {
  /* clip-path: polygon(35% 0%, 100% 0%, 65% 100%, 0% 100%); */
  position: relative;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  transition: .5s;
  border-radius: 1px;
  padding: 1rem;

}

.projectdetails {
  position: absolute;
  color: white;
  font-size: 1rem;
  padding: 1rem 4rem;
  left: 0px;
  text-align: left;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  display: flex;
  flex-direction: column-reverse;
  transition: .5s;
  background-image: linear-gradient(#0F5192, #0F5192, #0F5192);
  background-position: left;
  background-size: cover;
  text-align: right;
  z-index: 1;
}

.projectdetails h1,
.projectdetails h3,
.projectdetails h4,
.projectdetails p {
  transform: skewX(20deg);
}

.projectdetails h1,
.projectdetails h1 {
  line-height: 3rem;
  letter-spacing: 2px;
}

.projectdetails p {
  text-align: right;
}


.thebanners a span {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.thebanners h1,
.thebanners h3,
.thebanners h4,
.thebanners p {
  transform: skewX(20deg);
  z-index: 2;
}


.thebanners h1 {
  letter-spacing: 2px;
}

.redGradiant::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(#0000, #0000, #E01F27);
  pointer-events: none;
}

.blueGradiant::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(#0000, #0000, #0F5192);
  pointer-events: none;
}


.home {
  background-image: linear-gradient(#0000, #0000, #0F5192), url(img/renovations/homerenovations.webp);
  background-position: left;
  background-size: cover;
}

.metal {
  background-image: linear-gradient(#0000, #0000, #E01F27), url(img/metalroofs/metalbanner.webp);
  background-position: left;
  background-size: cover;
}

.storm {
  background-image: linear-gradient(#0000, #0000, #E01F27), url(img/storm/tree.webp);
  background-position: right;
  background-size: cover;
}

.storm1 {
  background-image: linear-gradient(#0000, #0000, #E01F27), url(img/storm/tree.webp);
  background-position: right;
  background-size: cover;
  margin-left: -15rem;
}

.asphalt {
  background-image: linear-gradient(#0000, #0000, #E01F27), url(img/asphalt/asphalthome.webp);
  background-position: right;
  background-size: cover;
}

.gutter {
  background-image: linear-gradient(#0000, #0000, #0F5192), url(img/gutters/gutterhome.webp);
  background-position: right;
  background-size: cover;
}

.siding {
  background-image: linear-gradient(#0000, #0000, #0F5192), url(img/siding/sidinghome.webp);
  background-position: bottom;
  background-size: cover;
}


/* new web design MAIN BANNER ENDS */


.ultimate {
  width: 100%;
  height: auto;
  min-height: 120px;
  background-color: #259;
  color: white;
  align-items: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: flex-end;
}

.gradientbanner {
  background-image: url(ultlogos/halfgradientbanner.png);
  background-size: cover;
  background-position: center, top;
  background-repeat: no-repeat;
  width: 100%;
  height: 25vh;
}


/* new web design ICON BEGINS */
.jhicons {
  width: 100%;
  padding: 2rem;
  margin: 5% 0;
}

.homeicons {

  margin: 1rem;
  text-align: center;

  align-self: center;
  color: #0F5192;
}

.homeicons img {
  width: 20%;
}

.homeicons h1,
.homeicons p {
  color: #0F5192;
}

.homeicons p {
  color: #0F5192;
  text-align: justify;
}

@media (min-width: 40rem) {
  .jhicons {
    display: flex;
    align-items: flex-end;
  }

  .homeicons img {
    width: 50%;

  }

  .homeicons {
    flex: 1;
    position: relative;
    align-self: baseline;
  }
}

/* new web design ICON ENDS */


/* new webdesign REPEATING RED LINES BEGINS */
.repeatinglinesred,
.repeatinglinesred2 {
  background-image: repeating-linear-gradient(-65deg, red 0px, red 1px, transparent 2px, transparent 10px);
  min-height: 65vh;
  align-items: center;
  align-content: center;
  margin: 5% 0;
  overflow: hidden;
}

.experienceyears {
  width: 100%;
  height: auto;
  background-color: rgba(205, 0, 0, 1);
  padding: 2rem 2rem;
  z-index: 2;
  transform: skewX(-20deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

.experienceyears p,
.experienceyears h2,
.experienceyears h3 {
  transform: skewX(20deg);
  color: white;
  margin: 0 1rem;
}

.experienceyears h3 {
  display: none;
}

.experienceyears p {
  text-indent: 10px;
  text-align: left;
}

.exyearsredbox h3 {
  transform: skewX(20deg);
  color: white;
  padding: .5rem 1rem;
}

.exyearsredbox {
  position: relative;
  width: 80%;
  height: 13vh;
  margin-top: -1%;
  right: 60px;
  background-color: rgba(205, 0, 0, 1);
  z-index: 0;
  transform: skewX(-20deg);
}

.repeatinglinesred img {
  width: 100%;
  margin: auto;
  z-index: 1;
}

.repeatinglinesred2 img {
  width: 100%;
  margin: auto;
  z-index: 1;
  transform: rotateX(360deg) rotateY(180deg);
}

@media (min-width: 40rem) {

  .repeatinglinesred,
  .repeatinglinesred2 {
    display: flex;
  }

  .repeatinglinesred2 {
    display: flex;
    flex-direction: row-reverse;
  }

  .repeatinglinesred img,
  .repeatinglinesred2 img {
    width: 70%;
    margin: 0px -150px;
  }

  .experienceyears {
    height: auto;
    margin-left: .5rem;
  }

  .experienceyears h3 {
    display: block;
    transform: skewX(20deg);
    color: white;
    margin: 1rem;
  }

  .exyearsredbox {
    width: 40%;
    height: 300px;
    right: -60px;
    z-index: 1;
  }

  .repeatinglinesred2 .exyearsredbox {
    width: 40%;
    right: 60px;
  }

  .exyearsredbox a,
  .exyearsredbox h3 {
    display: none;
  }

  .firstmetal {
    height: 50rem;
    width: auto;
  }
}


/* new webdesign REPEATING RED LINES ENDS */


/* new webdesign REPEATING BLUE LINES BEGINS */
.newportfolio {
  margin: 5% 0;
  width: 100%;

  overflow-x: hidden;


}

.newportfolio .repeatinglinesblue {
  position: absolute;
  background-image: repeating-linear-gradient(-65deg, transparent 0px, transparent 1px, #259 2px, #259 10px);

  min-height: 95%;
  width: 40%;
  z-index: -1;
  left: 30%;
}

.newportfolio img {
  position: relative;
  width: 20rem;
  height: 20rem;
  margin: 1rem;
  object-fit: cover;
  z-index: 3;
}

.newportfolio .servicebox {
  position: relative;
  width: 25rem;
  height: 25rem;
  margin: 2rem auto;
  z-index: 3;
  transition: .4s;
  background-repeat: no-repeat;
  background-size: cover;
  align-content: center;
}

.servicebox h1 {
  font-size: 3rem;
}

.stormservice {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5)), url(img/storm/tree.jpg);
}

.homeservice {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5)), url(img/renovations/homerenovations.jpg);
}

.metalservice {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5)), url(img/metalroofs/metalbanner.jpg);
}

.roofservice {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5)), url(img/asphalt/asphalthome.jpg);
}

.sidingservice {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5)), url(img/siding/sidinghome.jpeg);
}

.gutterservice {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5)), url(img/gutters/aigutter.jpg);
}

.newportfolio .stormservice:hover {
  width: 30rem;
  transition: .7s;
  background-image: linear-gradient(#0000, #0000, #E01F01), url(img/storm/tree.jpg);
  background-position: center;
}

.newportfolio .homeservice:hover {
  width: 30rem;
  transition: .7s;
  background-image: linear-gradient(#0000, #0000, #E01F01), url(img/renovations/homerenovations.jpg);
  background-position: center;
}

.newportfolio .metalservice:hover {
  width: 30rem;
  transition: .7s;
  background-image: linear-gradient(#0000, #0000, #E01F01), url(img/metalroofs/metalbanner.jpg);
  background-position: center;
}

.newportfolio .roofservice:hover {
  width: 30rem;
  transition: .7s;
  background-image: linear-gradient(#0000, #0000, #E01F01), url(img/asphalt/asphalthome.jpg);
  background-position: center;
}

.newportfolio .sidingservice:hover {
  width: 30rem;
  transition: .7s;
  background-image: linear-gradient(#0000, #0000, #E01F01), url(img/siding/sidinghome.jpeg);
  background-position: center;
}

.newportfolio .gutterservice:hover {
  width: 30rem;
  transition: .7s;
  background-image: linear-gradient(#0000, #0000, #E01F01), url(img/gutters/aigutter.jpg);
  background-position: center;
}



@media (min-width: 40rem) {
  .newportfolio {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    align-content: center;
    align-self: center;
  }

  .newportfolio .repeatinglinesblue {
    position: absolute;
    background-image: repeating-linear-gradient(-65deg, transparent 0px, transparent 1px, #259 2px, #259 10px);
    min-height: 20vh;
    width: 100%;
    z-index: 0;
    align-self: center;
    left: 0%;
  }

  .newportfolio img {
    width: 25rem;
    height: 25rem;
    object-fit: cover;
    z-index: 3;
  }

  .newportfolio .roofservice {
    width: 25rem;
    height: 25rem;
    object-fit: cover;
    z-index: 3;
  }

  .newportfolio .sidingservice {
    width: 25rem;
    height: 25rem;
    object-fit: cover;
    z-index: 3;
  }

  .newportfolio .gutterservice {
    width: 25rem;
    height: 25rem;
    object-fit: cover;
    z-index: 3;
  }

}

/* new webdesign REPEATING BLUE LINES ENDS */


/* new webdesign WHY ULTIMATE BEGINS */
.whyultimate {
  width: 80vw;
  padding: 1rem;
  margin: auto;
}

.whyultimate img {
  width: 80vw;
  height: auto;
  object-fit: cover;
}

.whyultimate .reasonsultimate span {
  position: absolute;
  height: 1px;
  width: 35%;
  display: flex;
  background-color: #259;
}

.whyultimate .reasonsultimate h1,
.whyultimate .reasonsultimate h3,
.whyultimate .reasonsultimate p {
  color: #259;
  text-align: left;
}

.whyultimate .reasonsultimate {
  padding: 1rem 2rem;
}

.whyultimate .reasonsultimate p {
  font-size: 1rem;
}

.whyultimate .reasonsultimate h3 {
  font-weight: lighter;
  margin: .5rem 0rem;
}

.whyultimate .reasonsultimate h1 {
  margin-top: 1rem;
}

.whyultimate .reasonsultimate h2 {
  text-align: right;
  color: red;
}

.whyultimate .reasonsultimate h2:hover {
  transform: scale(1);
  color: blue;
  text-align: right;
}

@media (min-width: 40rem) {
  .whyultimate {
    display: flex;
  }

  .whyultimate img {
    width: 50%;
  }
}

/* new webdesign WHY ULTIMATE ENDS */


/* Cropped Roof BEGINS */
.croppedroof {
  position: relative;
  background-image: url(img/ultroof.png);
  height: 70vh;
  width: 100vw;
  margin: -10px auto 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  z-index: 2;
}

/* Cropped Roof ENDS */

/* gutters */
.bodyfaqs img {
  object-fit: cover;

}

.faqs h1 {
  color: #259;
}

.bodyfaqs section {
  flex: 1;
  margin: 1rem;
}

.bodyfaqs .guttercontainer {
  height: 60vh;
  width: auto;
  background-size: cover;
  background-repeat: no-repeat;

}

.one {
  background-image: url(img/gutters/gutterladder.jpeg);
}

.two {
  background-image: url(img/gutters/gutters1.jpeg);
  background-position: left;
}

.guttercontainer h2 {
  margin: 2rem;
}

.guttercontainer p {
  margin: 2rem 0rem;
}

.copycontainer {
  display: inline-flex;
  margin: 2rem;
}

.copycontainer h2 {
  flex: 1;
  justify-content: c;

}

.copycontainer p {
  flex: 1;

}

@media (min-width: 40rem) {
  .bodyfaqs {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

/* gutters END */

/* insurance & FAQS Page COPY DESIGN & SECTIOn begins */

.ultinsurance {
  margin: 2rem 0;
}

.onehalf {
  text-align: left;
  padding: 1rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;

}

.onehalf .iconandcopy {
  display: flex;
  align-items: center;
  max-width: 600px;
  margin: auto;
}

.onehalf .iconandcopy img {
  flex: 1;
  position: relative;
  width: 30%;
  height: auto;
  display: float;
}

.onehalf .iconandcopy .copy {
  flex: 3;
  position: relative;
  background-color: #0001;
  margin: 0;
  padding: .5rem;


}

.onehalf .iconandcopy .copy p {
  font-size: .8rem;
  color: black;

}

.copy2 {
  flex: 3;
  position: relative;

  margin: 0;
  padding: .5rem;


}

.copy2 p {
  font-size: .8rem;
  color: black;
  text-indent: 1rem;
  ;

}

.onehalf .iconandcopy .copy h3 {
  color: #999999;
}

.steps {
  display: flex;
  align-items: baseline;
}

.steps h2 {
  font-size: 7rem;
  color: rgb(204, 0, 0);
}

.steps h3 {
  font-size: 3rem;
  color: #259;
  font-variant: small-caps;

}

@media (min-width:40rem) {
  .ultinsurance {
    display: flex;
  }
}


.insurancebanner,
.bodyfaqs,
.faqs {
  width: 100hv;
  margin: 1rem;
  padding: 5% 10%;
  background-color: white;
  text-align: center;
}

.insurancebanner h1,
.insurancebanner p {
  color: black;
  text-align: left;
}

/* insurance copy ends */

/* INSURANCE LOGOS BEGINS */
.scrollbanner {
  width: 99.2%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.scrollbanner::-webkit-scrollbar {
  display: none;
}

.scroll-inner {
  display: flex;
  gap: 3rem;
}

.logos {
  display: flex;
  align-items: center;
}

.logos img {
  width: 200px;
}

@media (min-width: 40rem){
  .scrollbannerwidth{
    margin: 0 auto;
    max-width: 80%;
  }
}

/* @keyframes scroll-right {
  0% {
    transform: translateX();
  }
  100% {
    transform: translateX(-50.6%);
  }
} 







/* ASPHALT PAGE section BEGINS*/
.welcome {
  height: 90vh;
  padding-top: 85px;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.aboutusimg {
  background-image: url(img/trucks/teamtruck.jpeg);
  background-position: right;
}

.projectsvideo {
  display: block;
  position: absolute;
  width: 55%;
  height: 75%;
  object-fit: cover;
  background-position: left;
  z-index: 2;
  animation-name: homepic;
  animation-duration: 1.5s;
  animation-delay: 0;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

}

.banneroverlay {

  position: absolute;
  left: 0;
  width: 55%;
  height: 75%;
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(0, 0, 0, .9) -2px, transparent 2px);
  pointer-events: none;
  /* Allows clicks to interact with elements behind the overlay */
  /* Other properties */
  background-size: 2px 2px;
  /* Adjust the size to control the density and spacing of dots */
  z-index: 2;
  animation-name: homepic;
  animation-duration: 1.5s;
  animation-delay: 0;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}


@keyframes homepic {
  from {
    left: -350px;
    opacity: 0%;
  }

  to {
    left: -0px;
    opacity: 100%;
  }
}

.ubw {
  display: block;
  position: absolute;
  max-width: 600px;
  background-color: transparent;
  height: auto;
  right: calc(70vw - 90%);
  bottom: 0;
  z-index: 1;
  animation-name: rightin;
  animation-duration: 1.5s;
  animation-delay: 0s;
  animation-timing-function: ease;
}

@keyframes rightin {
  from {
    right: -300px;
    opacity: 0%;
  }

  to {
    right: -10px;
    opacity: 100%;
  }
}

.redbanner {
  display: block;
  position: absolute;
  width: 85%;
  height: 80vh;
  right: 0;
  background-color: #E01F27;
  z-index: 0;
  overflow: hidden;
}

.welcomecopy {
  display: block;
  padding: 2rem;
  margin-left: calc(30vw - 0%);
  max-width: 30rem;
}

.welcomecopy h1,
.welcomecopy p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

@media (min-width: 40em) {
  .welcomecopy {
    margin-left: calc(40vw - 0%);
  }
}

.redbox {
  display: block;
  position: relative;
  background-color: #E01F27;
  width: 6rem;
  height: 6rem;
  top: 50px;
  z-index: 2;
  animation-name: homeredbox;
  animation-duration: 1s;
  animation-fill-mode: backwards;
}


@keyframes homeredbox {
  from {
    left: -200px;
    opacity: 0%;
  }

  to {
    left: -10px;
    opacity: 100%;
  }
}

.welcome h1 {
  display: block;
  position: relative;
  font-size: clamp(4em, 8rem + 10vh, 1em);
  text-align: justify;
  max-width: 25rem;
  z-index: 3;
  animation-name: rightin;
  animation-duration: 1s;
  animation-direction: normal;
  animation-timing-function: ease-out;
}

.welcome p {
  display: block;
  position: relative;
  max-width: 25rem;
  font-size: 1.2rem;
  text-align: justify;
  color: white;
  z-index: 3;
  animation-name: rightin;
  animation-duration: 1s;
  animation-timing-function: ease-in;
}

.bluebutton {
  position: relative;
  line-height: 1.2rem;
  padding: 1rem;
  font-size: 1.2rem;
  color: white;
  border-radius: 50px;
  background-color: #E01F27;
  z-index: 3;
  animation-name: rightin;
  animation-duration: 1s;
  animation-fill-mode: backwards;
}

/* ASPHALT PAGE Section ENDS*/


/*ULTIMATE Experience Section ENDS */


/*PORTFOLIO Section Begins*/


.copy h1,
.copy p {
  position: relative;
  text-align: left;
  color: white;
  padding: .5rem;
}

.copy {
  width: 100%;
}

/*4th Section ENDS*/


/*Quality Service Section BEGINS*/
.qualityservices {
  align-items: center;
  align-content: center;

  margin: auto;
}

.qsbox {
  position: relative;
  margin: 1rem;
  padding: 1rem;

  text-align: center;
  background-color: white;

}

.qsbox img {
  width: 100%;
  height: 100%;

}

.qsbox h2 {
  color: #259;
  margin: .5rem 0;
}

.qsbox p {
  color: black;
  margin: 1.rem 0;
  text-align: justify;
}

.qsbox:hover {
  background-color: #E01F27;
}

.qsbox:hover h2 {
  color: white;
}

.qsbox:hover p {
  color: white;
}

@media (min-width: 40em) {
  .qualityservices {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 95%;
    margin: auto;
  }
}

/*Quality Service Section BEGINS*/



/* TITLE BANNERS FOR OUR SERVICES, PROJECTS, ABOUT US, begins */
.emptybanner {
  width: 100%;
  height: 11vh;
  background-position: center;
  background-size: cover;
  padding: 2rem;
  font-size: 1.5rem;
  align-content: flex-end;
}

@media (min-width: 40em) {
  .emptybanner {
    height: 16vh;
  }
}

.titlebanner {
  width: 100%;
  min-height: 80vh;
  height: auto;
  background-color: rgb(209, 0, 0);
  background-image: linear-gradient(#0F5192, #0000, #0F5192), url(img/newconstruction.jpg);
  background-position: center;
  background-size: cover;
  padding: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  padding-top: 155px;
}

.titlebanner h1 {
  position: relative;
  top: 5vh;
  left: 10vw;
  font-size: 3.5rem;

  width: 20%;
  text-align: left;
}

.titlebanner h3 {
  position: relative;
  top: 5vh;
  left: 10vw;
  font-size: 1.5rem;
  font-variant: small-caps;
  width: 80%;
  text-align: left;
  color: white;
}

.titlebanner p {
  position: relative;
  top: 5vh;
  left: 10vw;
  font-size: 1rem;
  width: 70vw;
  max-width: 600px;
  color: white;
  text-align: justify;
}

.restorations {
  background-image: linear-gradient(#0F5192, #0000, #0F5192), url(img/midweststormai.jpg);
  padding: 0rem;
  align-items: center;
  min-height: 60vh;
}

.emergencytruck {
  position: relative;
  animation-name: emergencytruck;
  animation-duration: .8s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;


}

.emergencytruck img {
  width: 100vw;
  height: auto;

}

@keyframes emergencytruck {
  from {
    left: -650px;
    opacity: 0%;
  }

  to {
    left: -0px;
    opacity: 100%;
  }
}

.renovations {
  background-image: linear-gradient(#0F5192, #0000, #0F5192), url(img/renovations/beams.jpeg);
  background-position: center;
}

.projects {
  background-image: linear-gradient(#0F5192, #0000, #0F5192), url(img/services/machinery.jpeg);
  background-position: center;
}

.gutterss {
  background-image: linear-gradient(#0F5192, #0000, #0F5192), url(img/gutters/aigutter.jpg);
  background-position: top;
}

.sidings {
  background-image: linear-gradient(#0F5192, #0000, #0F5192), url(img/siding/moodysiding2.jpeg);
  background-position: center;
}

.metalroofs {
  background-image: linear-gradient(#0F5192, #0000, #0F5192), url(img/metalroofs/metalhospital2.jpg);
  background-position: top;
}

.newconstructions {
  background-image: linear-gradient(#0F5192, #0000, #0F5192), url(img/projects/48th/48th1.jpeg);
  background-position: center;

}

.gencon {
  background-image: linear-gradient(#0F5192, #0000, #0F5192), url(img/services/generalcontracting.jpeg);
  background-position: center;
}

@media (min-width: 40rem) {
  .titlebanner h1 {

    font-size: 6.5rem;
    width: 20%;
    line-height: 6.5rem;

  }

}


/* TITLE BANNERS FOR OUR SERVICES, PROJECTS, ABOUT US end */



.servicesection5 {
  position: relative;
  margin: 20px 0 30px 0;
  padding: 1rem;
  background-color: white;
}

.servicesection {
  margin: 20px 0 30px 0;
  padding: 1rem;
  max-height: auto;
}

.servicesection p {
  color: black;
  padding: 1rem;
  line-height: 1.7rem;
  text-align: justify;
}

.servicesection5 p {
  color: black;
  padding: 1rem;
  line-height: 1.7rem;
}

.servicesection button {
  line-height: 1rem;
  margin: 1rem;
  padding: 1rem;
  font-size: 1.3rem;
  border-radius: 25px;
  color: white;
  background-color: rgb(209, 0, 0);
  display: block;
}

.servicecontainer {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.servicecontainer div {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.servicecontainer h1 {
  color: #259;
  font-size: 3.2rem;
}

.servicecontainer .borderred {
  color: white;
  -webkit-text-stroke: 1px red;
  font-size: 3.2rem;
}

.servicesectionimages {
  display: flex;
  gap: .5em;

}

.servicesectionimages {
  flex: 1;
}

.servicesectionimages img {
  width: 50%;

  height: auto;
  padding: .5rem;
  border-radius: 15px;
  margin-bottom: 0px;
  object-fit: cover;
}

.usecopy {
  padding: 2rem;
  margin: 2rem 0rem;
  ;
}

.usecopy h1 {
  color: #259;
  font-size: 2rem;
}

.usecopy1,
.usecopy2 {
  padding: 2rem;
  margin: 2rem 0rem;
  background-color: #E01F27;
  text-align: center;
  align-content: center;
  text-transform: uppercase;
}

.usecopy2 {

  background-color: #0F5192;
  font-size: 1.5rem;
}

.usecopy1 h1 {
  color: white;
  font-size: 2.5rem;
}

.usecopy p {
  color: #444;
  line-height: 2rem;
  font-size: 1.5rem;
  max-width: 75%;
  margin: 2rem auto;
}

.guarantee {
  background-color: rgb(209, 0, 0, .7);
  background-image: linear-gradient(#2599, #2599), url(img/portfolio3.jpg);
  background-position: center;
  background-size: cover;
  padding: 3rem 5rem;
  border-radius: 10px;
  margin: 1rem;
  color: white;
}

.guarantee button {
  line-height: 1rem;
  margin: 1rem;
  padding: 1rem;
  font-size: 1.2rem;
  font-family: sans-serif;
  border-radius: 25px;
  color: white;
  background-color: rgb(209, 0, 0);
}

.chooseus {
  display: none;
  background-color: rgb(209, 0, 0, .7);
  background-image: linear-gradient(rgb(206, 0, 0, .8), rgb(206, 0, 0, .7)), url(img/portfolio5.jpg);
  background-position: center;
  background-size: cover;
  padding: 5rem;
  border-radius: 10px;
  margin: 1rem;
  color: white;

}

.guarantee h1,
.chooseus h1 {
  margin: 1rem;
  font-size: 1.5rem;
}

.guarantee p,
.chooseus p {
  margin: 1rem;

}

.chooseus button {
  line-height: 1rem;
  margin: 1rem;
  padding: 1rem;
  font-size: 1.2rem;
  font-family: sans-serif;
  border-radius: 25px;
  color: white;
  background-color: #259;
}

@media (min-width: 60rem) {
  .servicesection {
    display: flex;
    margin: 5rem 2rem;
  }

  .servicecontainer {
    padding: 1rem;

  }

  .servicesection5 {
    display: flex;
  }

  .end {
    flex-direction: row-reverse;
  }

  .end .servicecontainer div h1 {
    text-align: right;
  }

  .redandblue {
    display: flex;
    align-items: center;


  }

  .redandblue .guarantee {
    right: -45px;
    height: auto;
    position: relative;
    z-index: 0;
    align-content: center;


  }

  .redandblue .chooseus {
    display: block;
    right: 45px;
    height: 50vh;
    width: 80vw;

    position: relative;
    align-content: center;
    z-index: 1;
  }
}

@media (min-width: 40rem) {
  .redandblue {
    display: flex;
    align-items: center;
  }

  .redandblue .guarantee {
    right: -45px;
    height: 60vh;
    position: relative;
    z-index: 0;
    align-content: center;
  }

  .redandblue .chooseus {
    display: block;
    right: 45px;
    height: 50vh;
    width: 80vw;

    position: relative;
    align-content: center;
    z-index: 1;
  }
}

/* blog */

.blog {
  background-color: white;
  padding: 2rem;
  margin: 1rem;
  text-align: left;

}

.blogs {
  padding: 1rem;
  margin: 1rem;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.articles img {
  width: 100%;
  max-width: 400px;
  height: 300px;
  object-fit: cover;
}

.articles {
  background-color: white;
  width: 375px;
  margin: 1.5rem;
  box-shadow: 10px 10px 25px #888888;
  text-align: center;
}

.articles h3 {
  padding: 1rem 1rem;
}

.blogdata {
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eeeeee;
}

.blogstitlebanner {
  width: 100%;
  min-height: 80vh;
  height: auto;
  background-color: #259;
  background-position: center;
  background-size: cover;
  padding: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  padding-top: 155px;
}

.blogstitlebanner h1 {
  position: relative;
  top: 5vh;
  font-size: 3rem;
  text-align: center;
  padding-bottom: 25%;
}

.blogcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.blogcontainer img {
  margin-top: -9rem;
  max-width: 800px;
  width: 95%;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.blogarticle {
  background-color: white;
  padding: 2rem;
  margin: 1rem;
  text-align: left;
  max-width: 800px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  width: 95%;

}

.blogarticle h1 {
  color: black;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.blogarticle p {
  color: black;
  line-height: 1.8;
  margin-bottom: 1rem;
  text-indent: 15px;
}

.blogarticle h3 {
  color: black;
  line-height: 1.8;
  margin-bottom: 1rem;
  text-align: justify;
  text-transform: uppercase;
  font-weight: 200;
}

.blogarticle h4 {
  color: black;
  line-height: 1.8;
  margin-bottom: 1rem;
  text-align: center;
}

.blogarticle hr {
  color: black;
  margin-bottom: 1rem;
}

.blogarticle b {
  color: red;
}

.blogarticle ul {
  list-style: disc inside;
}

.blogarticle li {
  color: black;
  margin-bottom: 1rem;
  text-indent: 15px;
  font-family: Verdana, serif;
  list-style: inherit;
}

.nextprevious {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blogbox {
  position: relative;
  width: 100%;
  height: 20rem;
  z-index: 3;
  transition: .4s;
  background-repeat: no-repeat;
  background-size: cover;
  align-content: center;
}

.blogbox h1 {
  font-size: 3rem;
}

.asphaltblogbox {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5)), url(img/asphalt/asphalt2.jpeg);
}

.sidingblogbox {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5)), url(img/projects/curiel/curielsiding2.jpeg);
}

.guttersblogbox {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5)), url(img/gutters/aigutter1.jpg);
}

.metalroofsblogbox {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5)), url(img/metalroofs/moodymetalroof3.jpeg);
}

@media (min-width: 70rem) {
  .blogstitlebanner h1 {
    font-size: 3.5rem;
    padding-right: 20% !important;
    padding-left: 20% !important;
    padding-bottom: 20%;
  }

  .blogcontainer {
    justify-content: center;
  }

  .blogcontainer img {
    margin-top: -15rem !important;
  }


}

@media (min-width: 48rem) and (max-width: 69.99rem) {
  .blogstitlebanner h1 {
    font-size: 3rem;
    padding-right: 10% !important;
    padding-left: 10% !important;
    padding-bottom: 20%;
  }

  .blogcontainer {
    justify-content: center;
  }

  .blogcontainer img {
    margin-top: -12rem !important;
  }


}



/* blog */

/* About Us BEGINS*/
.staffcenterbox {
  width: 100%;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;

}

.staffwrapper {
  background-image: linear-gradient(rgb(206, 0, 0, .7), rgb(206, 0, 0, .7)), url(img/portfolio4.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  min-width: 400px;
  max-width: 600px;
  justify-content: center;
  align-items: center;
  border-radius: 2%;
  margin: 1rem;
}

.staffwrapper img {
  width: 50%;
  height: 50%;
}

.staffwrapper .stafftitle {
  width: 50%;
  height: auto;
  display: flex;
  flex-direction: column;


}

.stafftitle h1,
.stafftitle h3,
.stafftitle a {
  margin: 1rem 0.1rem;
  color: white;

}

.stafftitle h1 {
  font-family: ultimate;
}

.stafftitle h3 {
  font-family: roofs;
}

.staffquote {

  background-image: url(icons/bluebackground.png);
  background-size: contain;

}

.staffquote p {
  color: white;
  text-align: justify;
  text-indent: 2rem;
  margin: 1rem;

}

.staffbox {
  margin: 1rem 0rem 20rem 0rem;
}

@media (min-width: 40rem) {

  .staffquote {
    padding: 4rem 8rem;
  }

  .staff {
    width: 450px;
  }

  .staffbox {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-around;
  }
}

.staffpicsquare {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 300px;

  margin: 2rem 0rem;
  overflow: hidden;
  perspective: 1px;
}

.bgpolygon {
  position: absolute;
  top: 96%;
  left: 50%;
  width: 400px;
  height: 160px;
  transform: translate(-50%, -50%) translateZ(-1px) scale(2);

  background-size: cover;
  background-position: bottom;
  z-index: 1;
  border-radius: 20px;

  will-change: transform;
  transition: 0.3s ease;
}

.bgpolygon.jessicahouse {
  background-image: linear-gradient(rgb(206, 0, 0, .1), rgb(206, 0, 0, .7)), url(img/trucks/truck6.jpeg);
  /* Replace with your background image */
}

.bgpolygon.domingohouse {
  background-image: linear-gradient(rgb(206, 0, 0, .1), rgb(206, 0, 0, .7)), url(img/trucks/truck7.jpeg);
  /* Replace with your background image */
}

.bgpolygon.colehouse {
  background-image: linear-gradient(rgb(206, 0, 0, .1), rgb(206, 0, 0, .7)), url(img/trucks/truck1.jpeg);
  /* Replace with your background image */
}

.bgpolygon.keithhouse {
  background-image: linear-gradient(rgb(206, 0, 0, .1), rgb(206, 0, 0, .7)), url(img/trucks/truck2.jpeg);
  /* Replace with your background image */
}

.bgpolygon.tylerhouse {
  background-image: linear-gradient(rgb(206, 0, 0, .1), rgb(206, 0, 0, .7)), url(img/trucks/truck3.jpeg);
  /* Replace with your background image */
}

.staffpic {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 250px;
  height: 300px;
  transform: translate(-50%, -50%) translateZ(0px);
  background-size: cover;
  z-index: 2;
  will-change: transform;
}

.bgpolygon:hover {

  position: absolute;
  top: 80%;
  left: 50%;
  width: 600px;
  height: 280px;

  will-change: transform;
  transition: 0.3s ease;

}

.staffpic.jessica {
  background-image: url('staff/jessica.png');
  width: 265px;
}

.staffpic.domingo {
  background-image: url('staff/domingo.png');
}

.staffpic.cole {
  background-image: url('staff/cole.png');
}

.staffpic.keith {
  background-image: url('staff/keith.png');
}

.staffpic.tyler {
  background-image: url('staff/tyler.png');
}

.aboutstaff {
  position: relative;
}

.aboutstaff h1 {
  color: black;
  font-family: ultimateFont;
  font-weight: 100;
}

.aboutstaff h3 {
  font-family: ultimateFont2;
  font-weight: 800;
}








/* ABOUT US ENDS */

/* CONTACT US begins */
.contactus {
  padding: 2rem;
  background-color: white;
  color: #259;
  margin: 1rem;
  border-radius: 2%;
}

.contactus h1 {
  color: #259;
  margin: 1rem;
}

.contactus h4 {
  color: red;
}

.contactus input {
  position: relative;
  width: 100%;
  border-radius: 15px;
  border-style: solid;
  height: auto;
  font-family: sans-serif;
  font-size: 1rem;
  text-indent: 10px;
}

.contactus .inputfield {
  display: flex;
  margin: 2rem 0;
  justify-content: center;

}

.contactus .inputfield label {
  flex: 1;
  margin: 1rem 0;
}

.contactus .inputfield input {
  flex: 2;
  margin: .2rem 0;
}

.contactus .inputmessage input {

  height: 200px;

}

.contactus button {
  padding: .5rem 2rem;
  margin: 0 1rem;
  color: white;
  font-size: 1.2rem;
  font-variant: small-caps;
  cursor: pointer;
  background-color: #0F5192;
  border: none;
  margin: 1rem;
  border-radius: .5rem;
}

.contactus button:hover {
  background-color: red;
  color: white;

}

@media (min-width: 40rem) {
  .contactus {
    margin: 1rem calc(10rem - 10vw);
    padding: 2rem 5rem;

  }
}

@media (min-width: 60rem) {
  .contactus {
    margin: 1rem calc(25rem - 10vw);
    padding: 1% 5%;
    max-width: 80%;

  }

  .contactus .inputfield label {
    flex: 1;
  }

  .contactus .inputfield input {
    flex: 3;
  }
}

/* CONTACT US ends */


/* FAQS Page */
.bodyfaqs h1 {
  color: #0F5192;
  text-align: left;
}

.bodyfaqs p {
  color: black;
}

.bodyfaqs img {
  width: 100%;
  height: auto;
}

.faq {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;

}


/*FOOTER BEGINS*/
footer {
  height: auto;
  width: 100vw;
  overflow: hidden;
}

.footerbanner {
  background-color: #0F5192;
  width: 100%;
  height: 200px;
  display: flex;
}

.footerbanner .lefthalf {
  width: 52.5%;
  height: 100%;
  background-image: linear-gradient(to left, #E01F27, #E01F27, transparent);
  transform: skewX(-20deg);

}

.footerbanner .lefthalf img {

  height: 100%;
  width: auto;
  object-fit: cover;
  opacity: .7;


  transform: skewX(20deg);
}

.footerbanner .righthalf {
  width: 50%;
  height: 100%;
  text-align: right;
  margin-right: 1rem;
  align-content: flex-end;
}

.footerbanner .righthalf h1 {
  position: relative;
  color: white;
  font-size: 2rem;
  -webkit-text-stroke: .05rem white;

}

footer .footerbannerlasthalf {
  background-color: #259;
  background-image: url(ultlogos/jhfooter.png);
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 2rem 1rem 2rem 1rem;
  width: 100%;

}

footer img {
  width: 70%;
}

.footercopy {
  width: 100%;
  color: white;
  padding: 1rem 2rem;
}

.footercopy p {
  text-align: center;
  max-width: 85%;
  margin: auto;

}

.footercopy li {
  line-height: 2rem;
}

.socialicons img {
  width: 30px;
  height: 30px;
  margin: 1.5rem;
}

.links {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  /* border-top: 7px solid #259;
  border-left: 7px solid #259;
  border-right: 7px solid #259;
  background-image: linear-gradient(to bottom left, rgba(200, 200, 200, 0.6), #259);
  transform: skewX(-20deg);
  border-radius: 0 0 120px 0; */
  color: white;
}

.links ul {
  margin-bottom: 1rem;
}

.links ul h3 {
  font-size: 1.25rem;
  text-align: left;
  margin: .5rem;
  font-family: 'ultimateFont', Garamond, sans-serif;
  font-weight: 100;
}
.links ul li {
  /* transform: skewX(20deg); */
  text-align: left;
  margin: .5rem;
  font-family: 'ultimateFont2', Garamond, sans-serif;
  font-weight: 500;
}

.footerbannerlasthalf .copyright {

  width: 97%;
  align-self: flex-end;
  text-align: center;
  font-size: .9rem;
  color: white;
}

@media (min-width: 40rem) {
  .footerbanner .lefthalf img {
    opacity: 1;
  }

  .footerbanner .righthalf {
    text-align: left;
  }

  .footerbanner .righthalf h1 {
    font-size: 2.5rem;
    padding-left: 10%;
  }

  .footerbannerlasthalf {
    display: flex;
  }

  footer .footerbannerlasthalf {
    background-position: center;
  }

  .footerbannerlasthalf .copyright {
    position: absolute;
    width: 97%;
    align-self: flex-end;
    text-align: center;
  }
}




.lastly {
  background-color: #00426A;
  display: flex;
  justify-content: center;
  gap: .2rem;
  color: white;
  align-items: center;
}

.lastly h4 {
  font-weight: 100;
  line-height: .7rem;
  font-size: .5rem;
  font-family: monospace;
}

.lastly p {
  font-family: courier;
  color: transparent;
  margin: 0;
  padding: 0;
  position: relative;
  font-size: .7rem;
  content: "JUPITER HOUSE";
}

.lastly p::before {
  content: "JUPITER HOUSE";
  position: absolute;
  width: 0%;
  height: 100%;
  overflow: hidden;
  color: white;
  transition: 0.5s ease-in-out;
  white-space: nowrap;
}

.lastly p:hover::before {
  width: 100%;
}

/*FOOTER ENDS*/


button {
  font-family: sans-serif;
}