/* general reset */
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* general information */
/*
this site supports English and Persian languages.
________________________ 
En font: rubik 300 400 600
Fr font: iran-sans

font size:
48,

^^^^^^^^^^^^^^^^^^^^^^^^^
*/


/* general colors / general spacing */
:root{
  --main--color--1--shade2: #EBFF9D;
  --main--color--1: #3BCD50;
  --main--color--1--shade: #B1F60E;
  
  --main--color--2--shade2: #FDEDB9;
  --main--color--2: #EF4F3C;
  --main--color--2--shade: #F6A923;

  --main--color--3--shade2: #FEE1E4;
  --main--color--3: #a026d9;
  --main--color--3--shade: #F33F60;

  --main--color--4--shade2: #CAF8FD;
  --main--color--4: #1b4ae4;
  --main--color--4--shade: #0EB9D6;

  /* default color for the website */
  --selected--main--color--shade2:#EBFF9D;
  --selected--main--color: #33C652;
  --selected--main--color--shade:#B1F60E;

  --selected--nav--color: var(--nav-color-1);
  --selected--subnav--color: var(--subnav-color-1);

  /* nav colors: */
  --nav-color-1: #3679F1;
  --subnav-color-1: #3B82F6;
  
  --nav-color-2: #E23A3A;
  --subnav-color-2: #EF4444;


  /* background color of the website. */
  --main--body--color: #18181B;
  --main--body--color--shade: #27272b;

  --input--color: #232327;

  --main--nav--color: #19191C;
  --main--nav--color--shade: #2e2e2e;

  /* text color */
  --main--text--color: #e7e7e7;
  --main--text--gray--color: #c4c4c4;
  --main--gray--color: #4e4e4e;

  --main--text--dark--color: #18181B;

  /* linear-gradient */
  --nav--linear--gradient: linear-gradient(
    45deg,
    var(--main--nav--color),
    var(--main--nav--color--shade)
  );
  --nav--hover--gradient: linear-gradient(
    var( --selected--nav--color),
    var( --selected--nav--color)
  );

  --subnav--gradient: linear-gradient(
    var( --selected--subnav--color),
    var( --selected--subnav--color)
  );

  --main--background--gradient: linear-gradient(
    45deg,
    var(--selected--main--color),
    var(--selected--main--color--shade)
  );


  /* spaces and font sizes */
  --nav--top--margin: 80px;
}


/* @font-face {
  font-family: iran-sans;
  src: url(".\fonts\IRANSansWeb(FaNum).woff") format("woff"),
    url(".\fonts\IRANSansWeb(FaNum).woff2") format("woff2");
  /* src: url("../fonts/IRANSansWeb\(FaNum\).woff") format("woff"),
    url("../fonts/IRANSansWeb\(FaNum\).woff2") format("woff2"); */
    
/* } */ 

html{
  font-family:  'Rubik', sans-serif;
  
  color: var(--main--text--color);
  background-color: black;
}

body{
  position: relative;
}



/* ////////// */
/* containers */
/* ////////// */
.general-colors-container{
  position: absolute;
  top: 40%;
  left: 1.5%;
}

.main-container{
  width: 82%;
  /* height: 93vh; */

  /* center the container */
  margin: 25px auto;

  /* display: flex; */

  position: relative;
}

/* /////// */
/* navbar */
/* ////// */
nav{
  /* order: 2; */
  /* align-self: flex-start; */
  height: 92%;

  top: 90px;
  right: 78px;

  z-index: 100;
}

nav,
.general-colors-container{
  position: fixed;
}

nav div{
  /* for subnavs */
  position: relative;

  padding: 12px;
  background-image: var(--nav--linear--gradient);

  transition: all 1s;
}

nav div:hover{
  background-image: var(--nav--hover--gradient);
}

.social-meadias-container{
  display: flex;
  flex-direction: column;
}

.social-meadias-container img{
  width: 22px;
  height: 22px;

  opacity: 0.1;

  margin-top: 7px;
  margin-left: 6.5px;

  transition: all 0.3s;
}

.social-meadias-container:hover{
  background-image: var(--nav--linear--gradient) ;
}

.social-meadias-container img:hover{
  opacity: 1;
  transform: scale(1.5);
}

/* /////////// */

main{
  background-image: linear-gradient(
    45deg,
    var(--main--body--color), 
    var(--main--body--color--shade) 60%
  );

  min-width: 96%;
  min-height: 94vh;

}

.home-section--main-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  
  margin: 0 auto;
  margin-top: 60px;
}


/* ///////// */
/* componets */
/* ///////// */
.icon{
  width: 35px;
  height: 30px;
  stroke: white;
}

.general-colors-container div{
  transition: all 0.4s;
}

.general-colors-container div:not(:first-child)
{
  width: 20px;
  height: 20px;
  border-radius: 2px;
  margin-bottom: 3px;
}

.general-colors-container div:not(:first-child):hover{
  transform: scaleX(2);

}
.general-colors-container:hover  .colors-icon{
  stroke: white;
}

.colors-icon{
  width: 21px;
  height: 21px;
  stroke: var(--main--gray--color);
}


.green-box{ background-color: var(--main--color--1); }
.orange-box{background-color: var(--main--color--2);}
.purple-box{background-color: var(--main--color--3);}
.blue-box{background-color: var(--main--color--4);}



/* /////////////////////// */
/* home section components */
/* /////////////////////// */
.home-section--main-container h1{
  font-size: 60px;

  margin-top: 28px;
  margin-bottom: 20px;

  padding: 6px;
}

hr{
  width: 30%;
  height: 1px;
  border: none;

  background-image: var(--main--background--gradient);

  margin-bottom: 40px;
}

.home-section--main-container p{
  width: 55%;
  /* letter-spacing: 1px; */
  line-height: 1.5;
  text-align: right ;
}




/* //////////// */
/* summary table */
.summary-table-box{
  display: flex;
  align-items: center;
  
  background-image: var(--main--background--gradient);

  padding: 30px 10px;
}

.summary-table-box div{
  min-width: 250px;
  padding: 15px;

  border-right: 1px solid rgba(63, 63, 70, 0.418);

  text-align: center;
  
  height: 100px;
}

.summary-table-box div:last-child{
  border: none;
}

.summary-table-box  p:first-child{
  font-size: 33px;
  color: #18181B;
}

.summary-table-box  p:last-child{
  color: rgb(63,63,70);
}

.summary-table-box div p{
  width: 100%;
  text-align: center;
}

/* /////// */
/* subnav */
.subnav-container{
  position: absolute;
  right: 55px;
  top: 0;

  padding: 5px;
  width: 74px;
  height: 100%;

  text-align: center;

  /* nav has background-image. */
  background-image: var(--subnav--gradient);

  z-index: 1;

  /* control by css */
  display: none;

  /* appear animation */
  animation-name: subnav;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
}

@keyframes subnav {
  0%{
    translate: 75%;
    opacity: 0.4;
  }
  50%{
    opacity: 0.8;
  }
}

.subnav-container span{
  display: inline-block;
  margin: 25% auto;
}


/* new css selector for learning */
nav div:hover > .subnav-container{
  display: block;
}

nav div:not(:hover) > .subnav-container{
  animation-name: subnav-disappear;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}

@keyframes subnav-disappear{
  0%{
    display: block;
  }
  100%{
    opacity: 0;
    translate: 100%;
    display: none;
  }
}

/* style for selected nav. */
.selected-section,
.selected-section:hover,
.selected-section svg{
  background-image: var(--main--background--gradient);

  stroke: black;
}
.selected-section:hover > .subnav-container{
  display: none;
}

.hidden{
  display: none !important;
}