/* google font */
@import url("https://fonts.googleapis.com/css?family=Acme|Lobster|Patua+One|Rubik|Sniglet");

/* selects all(globl selecor, parring and margin will be ac to element width and size*/
* {
  box-sizing: border-box;
}

header,
section {
  overflow-x: hidden;
}

/* creating variables */
:root {
  --Sniglet-font: "Sniglet", cursive;
  --Rubik: "Rubik", cursive;
  --Patua: "Patua One", cursive;
  --Lobster: "lobster", cursive;
  --light-black: #2e2c2caf;
  --bggradient: linear-gradient(to bottom, #ef7b15,#ec4d94);
  --light-gray: rgba(255, 255, 255, 0.877);
}

.format-me{
  color: #e96d14;
  font-size:xx-large;
  font-family: var(--Sniglet-font);
}

.format-me2{
  color: #f6f4f4;
  font-size:x-large;
  font-family: var(--Sniglet-font);
}

header a {
  font-family: var(--Sniglet-font);
  font-size: 0.9em;
  color: whitesmoke;
}



header .nav-item:last-child {
  padding-right: 10.5em;

}

header .nav-item {
  padding: 0.9em;
  
}

header .navbar-brand {
  padding-left: 8rem;
  color: #e5e5e5;
}

/* added */
header .nav-link{
  
  color: #e5e5e5;
}
header .nav-link:hover {
  color: gray;
}

/* main texts padding (in a whole) */
header .row .welc-text {
  /* changed from 22 to 2 */
  padding: 2vmin 1vmin;
  padding-bottom: 65vmin;
  /* addedfrmv */
  font-family: var(--Rubik);
}

/* removed  use?*/
/* header .mainimg {
  padding: 4.2vmin 1vmin;
  margin-top: 0%;
  margin-bottom: 0%;
} */

header .mainimg img {
  width: 30%;
  /* padding: 0.2vmin 1vmin; */

}


/* colorz */
header {
  background: #e96d14;
  /* fallback for old browsers */
  background: var(--bggradient);
  color: rgb(255, 255, 255);
}

header .container .welc-text {
  font-family: "Rubik", sans-serif;
}

/* header .container .col-md-12 h6 {
  padding: 1vmin;
  
  letter-spacing: 4px;
} */

header .container .welc-text h1 {
  font-size: 8.5vmin;
  font-weight: bold;
  padding: 0.1em 0em;
}

header .container .welc-text p {
  padding: 1vmin 5vmin;
}

.primary-btn {
  border-radius: 30px;
  font-weight: bold;
}

/********** section 1 **************/

.section-1 {
  padding: 20vmin 0vmin;
}

.section-1 .row .col-md-6 .pray img {
  opacity: 0.8;
  width: 80%;
  border-radius: 0.2em;
}

/* to  float overpanel*/
.section-1 .row .col-md-6:last-child {
  position: relative;
}

/* about padding and other , padding 3rd changed frm 20 to 8*/
.section-1 .row .col-md-6 .panel {
  position: absolute;
  top: 7vmin;
  left: -18vmin;
  background: white;
  border-radius: 3px;
  text-align: left;
  padding: 13vmin 5vmin 8vmin 10vmin;
  box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
  font-family: var(--Rubik);
  z-index: 1;
}

/* about title */
.section-1 .row .col-md-6 .panel h1 {
  font-weight: bold;
  padding: 0.4em 0;
  font-size: 2em;
}
/* about paragrphs ,color chnged from 0.5 to 0.6*/
.section-1 .row .col-md-6 .panel p {
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.6);
}

/*  Section 2  */

/* cover for pros */
.cover {
  width: 100%;
  height: 55vmin;
  background: url("img/pexels-element-digital-775031.jpg");
  background-position: -24rem -19rem;
  background-size: 150%;
  position: relative;
}

.cover .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.cover .content {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  padding-top: 19vmin;
}

.cover .content > h1 {
  font-family: var(--Patua);
  font-size: 6vmin;
  color: whitesmoke;
}
/* edit */
.cover .content > h2 {
  font-family: var(--Patua);
  font-size: 6vmin;
  color: whitesmoke;
}

.cover .content > p {
  font-family: var(--Rubik);
  font-size: 2vmin;
  color: #e5e5e5;
}
/* feaures rectangle */
.box .rect {
  position: relative;
  z-index: 1;
  background: white;
  width: 17rem;
  height: 12rem;
  padding-top: 3.5vmin;
  /* edited 1 rem to 6px */
  margin: 1rem;
  /* edited from 0.5em */
  border-radius: 1em;
  /* added border color specification */
  border-color:black;
  box-shadow: 1px 2px 50px 0px rgba(255, 0, 0, 0.349);
  
}
/* to sledge rects over image */
#boxgroup1 {
  margin-top: -15vmin;
}
/* fontize changed from 5 to 2 */
.box .rect h2 {
  font-size: 2.5rem;
  color: rgb(217, 20, 20);
}

.box .rect > p {
  font-family: var(--Patua);
}



/* Section Events */

.section-4 .container h1 {
  /* font-size: 6vmin; padding 14 to */
  padding-top: 14vmin; 
  font-weight: bold;
  font-size: 2em;
}

.section-4 .events {
  padding: 10vmin 4vmin;
}

/* added height and worked  */
.section-4 .card {
  width: 22em;
  height: 25em;
  margin-top: 10vmin;
  
}




.section-4 .card .card-text {
  padding: 0.5em;
}




/* added */
.section-4 .card-text-webinar {
  font-size: 1.5em;
  color:darkslategray;
  font-family: var(--Sniglet-font);
  padding: 0.8em;
  
}
/* added */
.section-4 .card-text-healthtips {
  font-size: 1.2em;
  font-family: var(--Sniglet-font);
  
}
/* added */
.section-4 .card-text-review {
  font-size: 1.2em;
  font-family: var(--Sniglet-font);
  font-style: italic;
}
/* added */
.section-4 .card-comingsoon{
  padding: 0.5em;
  font-size: 1.4em;
  font-family:var(--Lobster);
  font-style: italic;
  font-weight: bold;
  color: #f66409;
  padding: 0.8em;
}

.section-4 .card-body > a {
  font-size: 1.5em;
}
/* added review persons*/
.section-4 .card-body > h4 {
  font-style: var(--Sniglet-font);
}


  /* added for  new webbinar image*/
  .section-4 .card-img-web {
  
    width: 100%;
    height: 100%;
    /* both was 100% */
    /* padding-left: 2.2rem; */
    
  }
  /* added : whole class : to button alignment closer to image */
  .section-4 .card-body-registerbtn{
    
    padding: 0.1vmin 2vmin;
    margin-top: 0.3vmin;
  }


.section-4 .carousel-item {
  
  padding-left: 3rem;


}




/* formatting images in events */
.border-radius {
  border-radius: 340px;
  width: 60%;
  
}




footer {
  background: rgba(0, 0, 0, 0.815);
  overflow-x: hidden;
  /* edit 14 to 4 and 18 to 8  */
  padding: 4vmin 8vmin;
}

footer p > span {
  color: #ff512f;
}



/* icons color */
footer .column i {
  color: #f73e06;
}

/* It is Adjacent sibling combinator */

footer .column i + i {
  padding: 0 0.5em;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.815);
  z-index: 9999;
  transition: all 1.5s ease;
}


/* making it responsive for mobile devices */
@media only screen and (max-width: 768px) {

  /* added for removing about image for device other than desktop */
  .pray #polina-image{
    display: none;
  }
  .section-1{
    width: 100vw;
    padding: 0  0 20vmin 0;
  }



  header .navbar-brand {
    padding-left: 1rem;
  }

  /* added for logo */
  header .mainimg img {
    width: 80%;
    /* padding: 0.2vmin 1vmin; */
  
  }

  .section-1 .row .col-md-6 .panel {
    position: initial;
    width: initial;
    height: initial;
  }
  .section-2 .cover {
    background-position: -25vmin -10vmin;
  }
  /* edited */
  .numbers .rect {
    width: 15rem;
    height: 10rem;
  }
  .numbers .rect h1 {
    font-size: 2rem;
  }
  /* added */
  .numbers .rect h2 {
    font-size: 1.5rem;
  }


  /* added */
  /* .section-4 h1 {
    font-size: 10rem;
    font-weight:700;
  } */

  .section-4 .carousel-item {
    padding-left: 0.6rem;
  }
  /* .section-4 .events{
    display: flex;
    flex-direction: column;
    align-content: center;
  } */
  /* .section-4 .carousel-inner{
    width: 24rem;
  } */




  footer .row .col-md-2 {
    margin-top: 8vmin;
  }


}

/* screen size 375px */

@media only screen and (max-width: 375px) {

  header .mainimg img {
    width: 75%;
    /* padding: 0.2vmin 1vmin; */
  
  }


  .section-4 .card {
    width: 18em;
  }


}

@media only screen and (max-width: 320px) {

  header .mainimg img {
    width: 70%;
    /* padding: 0.2vmin 1vmin; */
  
  }

  .section-4 .carousel-inner {
    margin-left: -4vmin;
  }



  /*not working: added margin top for first main image*/
  /* .mainimg{
    margin-top: 0;
    padding-top: 2px;
  } */
}