/*
--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6
Large: 1.8

- Letter spacing
-0.5px
0.75px

--- 02 COLORS

- Primary: #ff922b, #000, #FFF , #c3fae8
- Tints:
- Shades: #e68327
- Accents:
- Greys #555

--- 05 SHADOWS
    2px 2px 16px rgba(0, 0, 0, 0.256)

--- 06 BORDER-RADIUS
    4px 9px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/
/*-------------------------------------------------------

NAVIGATION SECTION

--------------------------------------------------------*/
.navigation {
  display: flex;
  width: 100vw;
  justify-content: space-between;
  position: fixed;
  z-index: 1;
  padding: 0.6rem 1rem 0 1rem;
}

.navigation-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  align-items: center;
  gap: 0.8rem;
}
.navigation-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  display: flex;
  justify-items: center;
  align-items: center;
  gap: 0.8rem;
  padding-right: 1.4rem;
}
.navigation a {
  color: white;
  padding: 0.8rem 1rem;
  font-size: 1.2rem;
  transition: all 0.3s;
  letter-spacing: 1px;
}
.navigation a:hover {
  box-shadow: inset 7rem 0 0 #e68327;
  border-radius: 9px;
  border: 3px solid rgba(0, 0, 0, 0.34);
}

.fusion-logo {
  width: 4.8rem;
}
.log-in {
  padding: 0.8rem 1.6rem;
  background-color: #ff922b;
  transition: all 0.3s;
}
.log-in:hover {
  box-shadow: inset 7rem 0 0 #82c91e !important;
}
.fusion-logo-img {
  width: 100%;
  display: inline;
}
.sticky {
  transition: all 0.3s;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.73);
}
.sticky a {
  color: white;
}
/*-------------------------------------------------------

HERO SECTION

--------------------------------------------------------*/
.hero {
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: linear-gradient(
      to right,
      rgba(34, 34, 34, 0.8),
      rgba(34, 34, 34, 0.4)
    ),
    url(../img/images/heroImage3.webp);
  position: relative;
  margin-bottom: 9.6rem;
}
.hero-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9.2rem 3rem 0 3rem;
  gap: 1rem;
}

h1 {
  font-size: 4.4rem;
  font-weight: 700;
  color: #fff;
}
h2 {
  font-size: 2rem;
  color: #ff922b;
  letter-spacing: 1.5px;
}
.hero-btn {
  font-size: 1.6rem;
  background-color: #ff922b;
  font-weight: 600;
  transition: all 0.3s;
  color: white;
}
.hero-btn:hover {
  background-color: #e68327;
  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.256);
  transform: scale(1.05);
  color: white;
}
.hero-btn-grp {
  display: flex;
  gap: 1rem;
  padding-top: 2rem;
}
.hero-bottom {
  width: 2.4rem;

  position: absolute;
  bottom: 2rem;
  right: 12rem;

  display: flex;
  gap: 0;
}
.hero-bottom-btn {
  border-radius: 0;
  font-size: 1.8rem;
}
.hero-bottom-btn-two {
  color: white;
  background-color: black;
}
/*-------------------------------------------------------

Why Chose Fusion Solar

--------------------------------------------------------*/
h3 {
  color: #ff922b;
  font-size: 1.8rem;
  letter-spacing: 0.8px;
  padding-bottom: 0.4rem;
  font-weight: 700;
  text-align: left;
}
h4 {
  color: #555;
  font-size: 3rem;
  margin-bottom: 4.8rem;
}

.why-fusion {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 3rem;
  padding-bottom: 3.6rem;
}
.why-fusion h3 {
  font-size: 1.8rem;
}
.why-fusion p {
  line-height: 1.6;
}
.why-image {
  width: 100%;
  height: 100%;
}
.why h3 {
  padding-bottom: 2.4rem;
}
.why h4 {
  padding-bottom: 3.6rem;
}
.why-box {
  display: grid;
  overflow: hidden;
  grid-template-columns: 1fr 2.5fr;
  gap: 1.8rem;
  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.363);
  border-radius: 9px;
}
.why-box h3 {
  padding-bottom: 0.8rem;
  padding-top: 1.2rem;
}
.why-box div p {
  padding: 1.2rem 0.8rem 1.8rem 0;
  font-size: 1.6rem;
}
.why-box:nth-child(2) {
  grid-template-columns: 2.5fr 1fr;
  padding-left: 1.2rem;
}
.why-box:nth-child(3) {
  margin-bottom: 3.6rem;
}
.expandable {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 2.4rem;
}
.why-expandable .expandable-heading {
  font-size: 1.8rem;
  padding: 0.8rem 0.8rem;
}
.why-expandable {
  box-shadow: 2px 2px 32px rgba(0, 0, 0, 0.256);
  border-radius: 9px;
  width: 45vw;
  margin: auto;
  display: grid;
  align-self: center;
  justify-self: center;
  grid-template-columns: 1fr 8fr 1fr;
  gap: 1.2rem;
  max-height: 4.6rem;
  overflow: hidden;
  transition: all 0.3s;
}
.why-expandable h3 {
  align-self: center;
  justify-self: start;
  grid-row: 1/2;
  grid-column: 2/3;
}
.number {
  align-self: center;
  justify-self: end;
  grid-row: 1/2;
  grid-column: 1/2;
  font-size: 2.2rem;
  padding-right: 1.8rem;
  color: #777;
}
.why-expandable .why-para {
  grid-row: 2/3;
  grid-column: 2/4;
  font-size: 1.6rem;
  padding-bottom: 1.6rem;
}
.down-icon {
  font-size: 1.8rem;
  padding: 0.8rem 1.4rem;
  color: #555;
  grid-row: 1/2;
  grid-column: 3/4;
  justify-self: center;
}
.why-expandable:hover {
  max-height: 15rem;
  border-top: 4px solid #ff922b;
}
.why {
  margin-bottom: 17.2rem;
}
/*-------------------------------------------------------

TESTIMONIAL

--------------------------------------------------------*/
.testimonials {
  padding-bottom: 18.4rem;
}
.testimonial-face {
  border-radius: 50%;
  width: 9.6rem;
  border: 3px solid white;
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  transition: all 0.7s;
}

.mousehovering {
  position: inherit;
  width: 50%;
  height: auto;
  border-radius: 0;
  transform: translateY(0);
}

.testimonial {
  width: 25vw;
  margin-top: 3.6rem;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 2px 2px 32px rgba(0, 0, 0, 0.256);
  /* gap: 1.2rem; */
  line-height: 1.8;
  letter-spacing: 0.8px;
  transition: all 0.7s;
}
.testimonial p:nth-child(2) {
  font-size: 1.6rem;
  font-weight: 600;
  padding-bottom: 1.2rem;
  padding: 3.6rem;
  padding-top: 5.6rem;
  background-color: #ff922b;
  color: white;
  border-radius: 9px;
}
.testimonial p:nth-child(3) {
  font-weight: 500;
  font-size: 1.4rem;
  align-self: flex-end;
  padding: 1.8rem;
}
.testimonial-box {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 8.8rem;
}
.testimonial:nth-child(1) {
  grid-column: 1/3;
  grid-row: 1/2;
}
.testimonial:nth-child(2) {
  grid-column: 3/5;
  grid-row: 1/2;
}
.testimonial:nth-child(3) {
  grid-column: 2/4;
  grid-row: 3/4;
}
.testimonial:nth-child(4) {
  grid-column: 1/3;
  grid-row: 2/3;
}
.testimonial:nth-child(5) {
  grid-column: 3/5;
  grid-row: 2/3;
}
.testimonials h3 {
  padding-bottom: 2.4rem;
  text-align: center;
}
.testimonials h4 {
  padding-bottom: 3.6rem;
  text-align: center;
}
/*------------------------------------------------

TOP VArients

---------------------------------------------------*/
.products {
  display: grid;
  grid-template-columns: repeat(3, 0.8fr);
  gap: 3rem;
  padding-bottom: 9.2rem;
  margin-bottom: 6.4rem;
}
.product-card {
  width: 30rem;
  display: grid;
  gap: 1.2rem;
  text-align: center;
  padding: 1.2rem;
  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.37);
  border-radius: 9px;
  transition: all 1s;
}
.center-card {
  transform: scale(1.2);
}
.product-heading {
  font-size: 1.6rem;
  color: #ff922b;
}
.product-img {
  width: 100%;
  height: 279px;
  transition: all 0.3s;
}
.img-box {
  width: 100%;
  overflow: hidden;
}
.top-box {
  border-top: 3px solid #e68327;
}
.product-img:hover {
  transform: scale(1.15);
}
.product-text-box {
  padding: 0 1.2rem;
}
.product-text {
  font-size: 1.2rem;
  padding-top: 0.8rem;
}
.top-products h4,
.top-products h3 {
  text-align: center;
  padding-bottom: 1.2rem;
}
.top-products h4 {
  padding-bottom: 4.4rem;
}

/*------------------------------------------------

OUR History

---------------------------------------------------*/
.history {
  margin-bottom: 18.4rem;
}
.history h3 {
  text-align: center;
  margin-bottom: 3.6rem;
}
.history-text {
  width: 60vw;
  margin: 0 auto;
}
b {
  font-size: 1.6rem;
  font-weight: 700;
  padding-bottom: 1.4rem;
  color: Black;
}
.para-box p {
  font-size: 1.4rem;
  margin-top: 3.6rem;
  padding: 1.2rem;
}
.odd-para-box {
  text-align: right;
  border-right: 4px solid #ff922b;
  border-top: 4px solid #ff922b;
  border-bottom: 4px solid #ff922b;
  position: relative;
}
.even-para-box {
  text-align: left;
  border-left: 4px solid #ff922b;
  position: relative;
}
.first-para-box {
  border-top: 0 solid #ff922b;
}
.odd-para-box::after {
  content: "Year";
  font-size: 2rem;
  padding: 0.5rem 3rem;
  background-color: #82c91e;
  box-shadow: 2px 2px 32px rgba(0, 0, 0, 0.267);
  border-radius: 1000px;
  position: absolute;
  top: 2.4rem;
  right: -8rem;
}
.even-para-box::after {
  content: "Year";
  font-size: 2rem;
  padding: 0.5rem 3rem;
  background-color: #82c91e;
  box-shadow: 2px 2px 32px rgba(0, 0, 0, 0.267);
  border-radius: 1000px;
  position: absolute;
  top: 2.4rem;
  left: -8rem;
}
.year-one::after {
  content: "2000";
}
.year-two::after {
  content: "2003";
}
.year-three::after {
  content: "2006";
}
.year-four::after {
  content: "2010";
}
.year-five::after {
  content: "2012";
}
.year-six::after {
  content: "2013";
}
.year-seven::after {
  content: "2014";
}
.year-eight::after {
  content: "2015";
}
.year-nine::after {
  content: "2016";
}
.year-ten::after {
  content: "2017";
}
.year-eleven::after {
  content: "2018";
}
.year-twelve::after {
  content: "2019";
}
.year-thirteen::after {
  content: "2020";
}
.year-fourteen::after {
  content: "2021";
}
/*------------------------------------------------------

CALCULATOR

---------------------------------------------------------*/
.calculator {
  padding-bottom: 9.6rem;
}
.calc-text-box {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
}
.calculator-text:nth-child(2) {
  padding-bottom: 2.4rem;
}
.calculator-text {
  font-size: 1.8rem;
  font-weight: 600;
  padding-bottom: 5.4rem;
}

.calc-img {
  width: 100%;
}
.calc-btn {
  padding: 1.6rem 6rem;
  font-size: 2.4rem;
  color: white;
  border-radius: 9px;
  background-color: #ff922b;
  transition: 0.2s all;
}
.calc-btn:hover {
  transform: scale(1.1);
  box-shadow: 3px 2px 32px rgba(0, 0, 0, 0.268);
}

/*------------------------------------------------------

Quote

---------------------------------------------------------*/
.quote-box {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-radius: 9px;
  padding: 2.4rem;
  gap: 1.8rem;
  margin-right: 0;
}
.quote-box label {
  font-size: 1.8rem;
  display: block;
  padding-bottom: 0.8rem;
}
.quote-box input {
  width: 80%;
  height: 2.6rem;
  font-size: 1.8rem;
  border: 0 solid black;
  border-bottom: 4px solid #ff922b;
}
.quote-box input:active {
  border: 0 solid black;
  border-bottom: 4px solid #ff922b;
}
.one {
  grid-row: 1/2;
  grid-column: 1/4;
}
.two {
  grid-row: 1/2;
  grid-column: 4/7;
}
.three {
  grid-column: 1/6;
  grid-row: 2/3;
}
.four {
  grid-column: 1/3;
  grid-row: 3/4;
}
.five {
  grid-column: 3/5;
  grid-row: 3/4;
}
.six {
  grid-column: 5/7;
  grid-row: 3/4;
}
.seven {
  grid-column: 1/4;
  padding-top: 1.8rem;
  grid-row: 4/5;
}
#placing {
  width: 100%;
  font-size: 1.8rem;
}
.get-a-quote {
  grid-column: 2/6;
  grid-row: 5/6;
  font-size: 2.4rem;
  background-color: #ff922b;
  border: 0 solid black;
  border-radius: 9px;
  height: 3.6rem !important;
  transition: all 0.6s;
  margin-top: 1.2rem;
  color: white;
}
.get-a-quote:hover {
  background-color: #e68327;
  box-shadow: 2px 2px 32px rgba(0, 0, 0, 0.233);
  transform: scale(1.1);
}
.box {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  justify-content: center;
  margin-bottom: 9.2rem;
  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.233);
}
.box-img {
  width: 100%;
}
/*-------------------------------------------------------

Partner

----------------------------------------------------------*/
.part-img {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}
.part-img img:nth-child(3) {
  align-self: center;
  height: 20%;
}
.part-img img {
  width: 60%;
  height: 80%;
} /*-------------------------------------------------------

Footer

----------------------------------------------------------*/
.footer-class {
  padding: 6.6rem 0 5.2rem 0;
  justify-content: space-around;
}
.footer-heading {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 3.2rem;
}
.footer-nav {
  list-style: none;
}
.footer-nav a:link,
.footer-nav a:visited {
  font-size: 1.6rem;
  line-height: 1.6;
  text-decoration: none;
  color: #777;
  transition: all 0.3s;
}
.footer-nav a:hover,
.footer-nav a:active {
  color: #222;
}
.social-links {
  list-style: none;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 2.8rem;
}
.social-links li a {
  justify-self: center;
}
.social-icons:link,
.social-icons:visited {
  font-size: 2.4rem;
  color: #000;
  transition: all 0.3s;
}
.social-icons:hover,
.social-icons:active {
  color: #e67e22;
}
.copyright {
  font-size: 1.2rem;
  line-height: 1.4;
  color: #777;
}
.footer-section {
  background-color: #c3fae8;
  margin-top: 15rem;
}
.contacts p {
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 500;
  color: #777;
}
.contacts p:nth-child(1) {
  margin-bottom: 0.4rem;
  line-height: 1.2;
}
.contacts p:nth-child(2) a {
  line-height: 1.4;
  color: #777;
}
.ctacontainer {
  padding: 2.4rem 0;
}
.grid {
  display: grid;
}
.grid-5-col {
  grid-template-columns: repeat(5, 1fr);
}
.grid-2-col {
  grid-template-columns: repeat(2, 1fr);
}