body {
  background-color: #F5F5F7;
  height: 50%;
}

h1 {/*title*/
font-family: customFonts;
  color: #1D1D1F;
}
h2 { /*heading*/
  font-family: customFonts;
    color: #1D1D1F;
    padding-left: 100px;
  }
@font-face { /*pentru fontul google*/
    font-family: customFonts;
    src: url(ProductSansRegular.ttf);
}
p { /*pentru style paragrafe*/
  font-family: customFonts;
  padding-left:100px;
  padding-right:100px;
  color: #1D1D1F;
}
.center { /*pentru imagini centrate*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
/* Rounded border */
hr.rounded {
  border-top: 8px solid #9DC08B;
  border-radius: 5px;
}



/*COLOANE*/
* {
  box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

.left {
  width: 80%;
}

.right {
  width: 20%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
}



/*buton scroll to top*/
/*buton scroll to top*/
body {
  display: grid;
  grid-template-columns: auto; 
}

.top {
  --offset: 50px; 
  
  position: fixed;
  bottom: 20px;      
  margin-right:10px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));
  
  /* visual styling */
  width:55px;
  aspect-ratio:1;
  background:#609966;
  border-radius:10px;
}
.top:before {
  content:"";
  position:absolute;
  inset:30%;
  transform:translateY(20%) rotate(-45deg);
  border-top:5px solid #fff;
  border-right:5px solid #fff;
}

p {
  font-size: 25px;
}

/* remove the below if you don't want smooth scrolling */
html,
body {
  scroll-behavior: smooth;
}




/*remove vertical scroll bar*/
/* hide scrollbar but allow scrolling 
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: scroll; 
}

body::-webkit-scrollbar {
  display: none;
}

/* other styling 
* {
  background-color: #EAF0F6;
  color: #2D3E50;
  font-family: 'Arial';
  font-size: 26px;
  font-weight: bold;
}*/




/*responsiveness for different devices*/
/* Styles for desktop */
.container {
  width: 960px;
  overflow:hidden;
}

@media (max-width: 768px) {
  .container {
    width: 720px;
  }
}
@media (max-width: 480px) {
  .container {
    width: 100%;
  }
}










      /* unvisited link */
a:link {
  color: #9DC08B;
  text-decoration:none;
}

/* visited link */
a:visited {
  color: #9DC08B;
}

/* mouse over link */
a:hover {
  color: #609966;
}

/* selected link */
a:active {
  text-decoration:none;
}