@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600,700,800&display=swap');


*,
*::after,
::before {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

:root {

  /*--------------- Background Variables ---------------*/

  --background-light: #f4f4f4;
  --background-dark: #0a081e;


  /*--------------- Buttons Variables ---------------*/

  --btn-secondary-border: #2196f3;
  --btn-primary: linear-gradient(90deg, #17A100 0%, #00FF5E 100%, rgba(0, 255, 94, 0) 100%);
  --btn-primary-borderRadius: 3px;
  --btn-primary-padding: 12px 24px;


  /*--------------- Box Variables ---------------*/

  --box-padding: 100px 15%;
  --box-padding-sides:  0 5%;
  --box-padding-topBot: 100px 0;

  /*--------------- Titles Variables ---------------*/

  --title-color: #0071FF;
  --title-fontSize: clamp(54px, 4.4vw, 70px);
  --title-letterSpacing: 2px;


  /*--------------- Subtitles Variables ---------------*/

  --subtitles-color: #0071FF;
  --subtitles-fontSize: 4em;
  --subtitles-letterSpacing: 2px;


  /*--------------- Paragraphs Variables ---------------*/

  --paragraphs-color: #272727;
  --paragraphs-fontSize: clamp(14px, 1.1vw, 24px);
  --paragraphs-fontWeght: 400;


  /*--------------- Menu Variables ---------------*/

  --menu-background: #000;
  --menu-fontSize: 14px;
  --menu-letterSpacing: 2px;
  --menu-padding: 10px 5%;
  --menu-color: #000;


  /*--------------- Card Variables ---------------*/

  --card-background: #fff;
  --card-padding: 36px 24px;


  /*--------------- General Variables ---------------*/

  --borderRadius: 15px;

  --primary_normal: #0085FF;
  --primary_light: #3ba0ff;
  --primary_dark: #00417D;

  --secondary_normal: #F7780D;
  --secondary_light: #ff933b;
  --secondary_dark: #c95a00;



  --purple: #562EED;
  --lightGreen: #17a100;


}


/*--------------- Classes ---------------*/

html,
body {
  scroll-behavior: smooth;
}

body {
  background: var(--background-light);
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 10px;
  height: 2px;
}

::-webkit-scrollbar-thumb {
  background: rgb(136, 152, 158);
  border-radius: 30px;
}

::-webkit-scrollbar-track {
  background: rgb(7, 12, 14);
}

.container {
  padding: var(--box-padding);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: flex-start;
  overflow: hidden;
}

h1 {
  color: var(--title-color);
  font-size: var(--title-fontSize);
  letter-spacing: var(--title-letterSpacing)
}

h2 {
  color: var(--subtitles-color);
  font-size: var(--subtitles-fontSize);
  letter-spacing: var(--subtitles-letterSpacing);
  position: relative;
  font-weight: 700;
  text-align: left;
}

h3 {
  font-size: 2.5em;

}

p {
  color: var(--paragraphs-color);
  font-size: var(--paragraphs-fontSize);
  font-weight: var(--paragraphs-fontWeght);
  text-align: justify !important;
}

.TLink {
  font-size: clamp(24px, 1.8vw, 24px);
  font-weight: 500;
  color: var(--lightGreen);
}

img {
  border-radius: var(--borderRadius);
}


/*--------------- Buttons ---------------*/

.btn-primary {
  background: var(--btn-primary);
  border-radius: var(--btn-primary-borderRadius);
  padding: var(--btn-primary-padding);
  border: none;
}

.btn-primary a {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

button,
a {
  cursor: pointer;
}

a {
  text-decoration: none;
  display: inline-block;
}


.btn {
  display: inline-block;
  padding: 12px 14px;
  -webkit-transition: .7s ease;
  transition: .7s ease;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  border: none;
}


.btn a, .btn-secondary a {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.btn-secondary {
  display: inline-block;
  padding: var(--btn-primary-padding);
  border-radius: var(--btn-primary-borderRadius);
  -webkit-transition: .7s ease;
  transition: .7s ease;
  text-transform: uppercase;
  background: transparent;
  position: relative;
  border: 2px solid var(--primary_normal);
  color: white;
}


/*--------------- Cards ---------------*/

/* Use os cards dentro de grids ou outro container 
para que eles preencham seu tamanho total */

/* .card {
width: 100%;
height: 100%;
background: var(--card-background);
border-radius: var(--card-borderRadius);
padding: var(--card-padding);
display: flex;
} */


/*--------------- grid2 / left/ right ---------------*/

/* Alinhamento de sessões */

.grid2 {
  max-width: 100%;
  padding: var(--box-padding);
  display: grid;
  grid-template-columns: 50% 50%;
}

.left,
.right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 90%;
}


.grid2 .left {
  align-items: flex-start;
}

.grid2 .right {
  align-items: flex-end;
}


.inverter .left{
  order: 2;
  align-items: flex-start;
}

.inverter .right{
  order: 1;
  align-items: flex-start;
}


.pacotes .right, .betterOption .right {
  align-items: center;
}

.pacotes .left img, .betterOption .right img{
  width: auto;
  max-width: 100%;
  max-height: 500px;
}




/*------------------------------------------------------- Responsive -------------------------------------------------------*/

@media screen and (max-width: 960px) {
  .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 32px 18px;
  }
}

@media(max-width:800px) {

  h2{
    font-size: 3em;
  }
  
  h3{
    font-size: 1.8em;
  }

  :root {
    --box-padding: 50px 4%;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .grid2 .left,
  .grid2 .right {
    align-items: center;
  }

  .left {
    align-items: center;
  }

  .right {
    align-items: center;
  }

  .TLink{
    font-size: 20px;
  }

  .left,
.right {
  max-width: 100%;
}


}