body{
 
    background: linear-gradient(270deg, #a30000, #250f0f, #000000);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
    
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
    
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.section-heading{
  color: rgba(255, 255, 255, 0.482);
}
 .sub-heading{
  color: rgb(248, 248, 248);
 }
 .blue-heading{
color: white;
font-size: 60px;
 }
.para{
  color: rgb(228, 228,228 );
}





/* what people miss */


.guidance-right{
  margin-top: 5rem;
}
.guidance-right .g-box{

  width: 95%;
  margin: auto;
  padding: 1rem;
  display: flex;

  flex-direction: row;
  justify-content: space-around;

}

.guidance-right .g-box .g-i-box{
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.guidance-right .g-box .g-i-box img{
height: 400px;
width: 400px;
}
.guidance-right .g-box .g-t-box{
  display: flex;
  flex-direction: column;
  width: 50%;
  padding-left: 2rem;

}
.guidance-right .g-box .g-t-box .blue-heading{
  font-size: 60px;
}

@media (max-width: 768px){

 .guidance-right .g-box{
  flex-direction: column;
 }
 .guidance-right .g-box .g-i-box{
  width: 100%;

 }

 .guidance-right .g-box .g-t-box{
  width: 100%;
  justify-content: center;
  align-items: center;
 }



}
@media (max-width: 500px){

  .guidance-right .g-box .g-t-box .blue-heading{
  font-size: 30px;
  text-align: center;
}
.guidance-right .g-box .g-i-box img{
height: 300px;
width: 300px;
}
.guidance-right .g-box .g-t-box{
  
}

}

/* duration */


.guidance-left{
  margin-top: 5rem;
}
.guidance-left .g-box{

  width: 95%;
  padding: 1rem;
  display: flex;

  flex-direction: row-reverse;
  justify-content: space-around;

}

.guidance-left .g-box .g-i-box{
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.guidance-left .g-box .g-i-box img{
height: 500px;
width: 500px;
}
.guidance-left .g-box .g-t-box{
  display: flex;
  flex-direction: column;
  width: 50%;
  padding-left: 2rem;

}
.guidance-left .g-box .g-t-box .blue-heading{
  font-size: 60px;
}

@media (max-width: 768px){

 .guidance-left .g-box{
  flex-direction: column;
 }
 .guidance-left .g-box .g-i-box{
  width: 100%;

 }

 .guidance-left .g-box .g-t-box{
  width: 100%;
  justify-content: center;
  align-items: center;
 }



}
@media (max-width: 500px){

  .guidance-left .g-box .g-t-box .blue-heading{
  font-size: 30px;
  text-align: center;
}
.guidance-left .g-box .g-i-box img{
height: 300px;
width: 300px;
}

}


.headbox{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  width:95% ;
  margin: auto;
}
@media (max-width: 768px){
  .headbox .blue-heading{
    font-size: 50px;
  }
}




.promisse{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

padding: 2rem;
margin-top: rem;
width: 60%;
margin: auto;
margin-top: 2rem;


}
.promisse .para{
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
  text-align: center;
  color: rgb(255, 255, 255);
}
@media (max-width: 768px){
  .promisse{
    width: 95%;
  }
  .promisse .para{
    font-size: 20px;
  }
}

.headbox img{
  height: 400px;
  width: 400px;
}


/* do and dont */

.do-dont{
  display: flex;
  flex-direction: row;
  justify-content: space-around;

}
.do-dont .do{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40%;
  padding: 1.5rem;
  
}
.do-dont .dont{
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}

@media (max-width: 768px){
  .do-dont{
flex-direction: column;
  }
  .do-dont .do{
    width: 90%;
    justify-content: start;
    align-items: flex-start;
    margin: auto;
    margin-bottom: 1.2rem;
  }
  .do-dont .dont{
    
    margin: auto;
    width: 90%;
    justify-content: start;
    align-items: flex-start;
  }
  .headbox img{
    height: 300px;
    width: 300px;
  }

}