/* 
--- 01 TYPOGRAPHY SYSTEM

-- FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

-- Font weights: 400

-- Line heights: 1

--- 02 Colors

-- Primary: 0xBF1D2D
-- Secondary: #006430

go to make tint and shade generater website
-- Tints: #f9e8ea
-- Shades:
-- Accents:
-- Grays: 
#555
#333


--- 03 Images

-- Unsplash
-- UI Faces for customer faces website



--- 04 SHADOWS:

--- 05 BORDER-RADUIS:

--- 06 WHITESPACES:

- SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/

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

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  font-family: "Roboto", sans-serif;
  color: #212529;
  overflow-x: hidden;
}

/* ************************************** */
/* GENRAL REUSEABLE COMPONENT */
/* ************************************** */

.grid {
  display: grid;
  gap: 9.6rem;
}

.grid--2--cols {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3--cols {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4--cols {
  grid-template-columns: repeat(4, 1fr);
}
.grid--5--cols {
  grid-template-columns: repeat(5, 1fr);
}

.grid--center--v {
  align-items: center;
}

.container {
  max-width: 130rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.heading-primary {
  font-size: 3.6rem;
  letter-spacing: -0.5px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 4.8rem;
  animation: moveInLeft 1s ease-out;
}

.heading-secondary {
  font-size: 3rem;
  font-size: 500;
  margin-bottom: 3.2rem;
}
.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  padding: 1.6rem 3.2rem;
  font-size: 2rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.9rem;
  color: #fff;
  font-weight: 600;
  transition: background-color 0.3s;
}

.btn-fill:link,
.btn-fill:visited {
  background-color: #bf1d2d;
}

.btn--form {
  background-color: #991724;
  color: #fff;
  align-self: end;
  padding: 1.2rem;
}

.btn--form:hover {
  background-color: #bf1d2d;
}
.btn-fill:hover,
.btn-fill:active {
  background-color: #991724;
}

.btn-outline:link,
.btn-outline:visited {
  color: #fff;
  background-color: #006430;
}

.btn-outline:hover,
.btn-outline:active {
  color: #212529;
  background-color: #f9e8ea;

  box-shadow: inset 0 0 0 3px #006430;
}

.margin-right {
  margin-right: 1.6rem;
}

*:focus {
  outline: none;
  /* outline: 4px dotted #e5a5ab;
  outline-offset: 8px; */
  box-shadow: 0 0 0 0.8rem #e5a5ab92;
}

/* MOBILE */
.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;

  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #333;
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/* ************************************** */
/* HEADER */
/* ************************************** */

.header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4.8rem;
  height: 9.6rem;
  background-color: #f9e8ea;
}

.logo {
  font-size: 2.4rem;
  font-weight: 600;
  border-bottom: 2px solid rgb(153, 23, 36);
  color: rgb(0, 100, 48);
  padding: 3px;
}

.logo span:last-child {
  /* color: #005328; */
}

.logo a {
  text-decoration: none;
  color: inherit;
}

/* ************************************** */
/* NAVIGATION */
/* ************************************** */

.main-nav-list {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  list-style: none;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 500;
  text-decoration: none;
  color: #333;
  transition: all 0.3s;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #bf1d2d;
}

.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited {
  padding: 1.2rem 2.4rem;
  color: #fff;
  background-color: #bf1d2d;
  border-radius: 9px;
}

.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta:active {
  background-color: #991724;
}

/* ************************************** */
/* HERO SECTION */
/* ************************************** */

/* Hero section start */

.section-hero {
  background-color: #f9e8ea;
  padding: 4.8rem 0 9.6rem 0;
  backface-visibility: hidden;
}

.hero {
  max-width: 120rem;

  margin: 0 auto;

  display: grid;
  
  
  grid-template-columns: 1fr 1fr;
  padding: 0 3.2rem;
  gap: 4.8rem;
  
}


.hero-description {
  font-size: 2rem;
  margin-bottom: 4.8rem;

  line-height: 1.5;
}

.hero-img {
  width: 100%;
}

.student-box {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 4.8rem;
}

.student-img {
  display: flex;
}

.student-img img {
  height: 4.8rem;
  width: 4.8rem;
  margin-right: -1.6rem;
  border: 3px solid #f9e8ea;
  border-radius: 50%;
}


.student-img img:last-child {
  margin-right: 0;
}

.student-text {
  font-size: 1.8rem;
  font-weight: 600;
}

.student-text span {
  color: #991724;
}

/* ************************************** */
/* FEATURED IN SECTION */
/* ************************************** */
.section-featured-in {
  padding: 4.8rem 0;
  margin-bottom: 4.8rem;
}

.featured-heading {
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #888;
  text-align: center;
  margin-bottom: 2.4rem;
  letter-spacing: 0.75px;
}

/* ************************************** */
/* SCHEDUAL SECTION */
/* ************************************** */

.section-schedual {
  margin: 4.8rem 0;
}
.schedual-card {
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
  border-radius: 11px;
  overflow: hidden;
  transition: all 0.4s;
}

.schedual-card:hover {
  transform: translateY(-1.2rem);
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06);
}

.schedual-attribute {
  font-size: 1.6rem;
}


.schedual-img {
  width: 100%;
}

.schedual-content {
  padding: 3.2rem 4.8rem 4.8rem 4.8rem;
}
.schedual-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

.schedual-attributes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.schedual-content a:link,
.schedual-content a:visited {
  display: flex;
  justify-content: center;
  margin-top: 3.2rem;
  text-decoration: none;
  font-size: 1.6rem;
  background-color: #991724;
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 10rem;
  transition: all 0.3;
}

.schedual-content a:hover,
.schedual-content a:active {
  background-color: #bf1d2d;
}

li i {
  color: #991724;
  font-size: 2rem;
}

/* ************************************** */
/* SECTION TESTIMONUIALS */
/* ************************************** */

.sub-heading {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #991724;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  letter-spacing: 0.75px;
}

.section-testimonials {
  background-color: #f9e8ea;
  display: grid;
  grid-template-columns: 55fr 45fr;
}

.testimonials-container {
  padding: 4.8rem;
}
.testimonials {
  margin-top: 9.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 3.2rem;
  column-gap: 9.6rem;
}

.testimonial-img {
  width: 64px;
  border-radius: 50%;
  margin-bottom: 1.2rem;
}

.testimonial-text {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 1.6rem;
}

.testimonial-name {
  font-size: 1.6rem;
  color: #777;
}

/* gallary */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1.6rem;
  gap: 1.6rem;
}

.gallary-item {
  overflow: hidden;
}

.gallary-item img {
  display: block;
  width: 100%;
  transition: all 0.4s;
}

.gallary-item img:hover {
  transform: scale(1.1);
}

/*  */

.feature-section {
  margin: 4.8rem auto;
}

.features {
}

.feature {
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.075);
  padding: 3.2rem;
  border-radius: 11px;
  transition: all 0.4s;
}

.feature:hover {
  transform: translateY(-2rem);
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.1);
}

.feature-title {
  font-size: 2.4rem;
  color: #333;
  font-weight: 700;
  margin-bottom: 1.6rem;
}

.feature-text {
  font-size: 1.6rem;
  line-height: 1.6;
}

.feature-icon {
  color: #991724;
  font-size: 2.4rem;
  margin-bottom: 3.2rem;
  background-color: #f9e8ea;
  padding: 1.2rem;
  border-radius: 10px;
}

/* TEAM SECTION */
.section-team {
  padding: 10rem;
  /* background-color: #f9e8ea; */
}

.team-members {
  transition: all 0.4s;
  overflow: hidden;
}

.team-members:hover {
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.085);
  transform: translateY(-2rem);


}

.team-members img {
  width: 100%;
 
}
.team-content {
  padding: 2rem  ;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.team-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2rem;
  letter-spacing: -1px;
}
.team-description {
  font-size: 1.4rem;
  color: #222;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.team-members {
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.075);
  border-radius: 11px;
  overflow: hidden;
}

.team-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.team-links i {
  font-size: 2.4rem;
}

.fb {
  color: rgb(8, 102, 255);
}
.wt {
  color: rgb(38, 167, 22);
}
.ins {
  color: rgb(152, 48, 195);
}

.read-more:link,
.read-more:visited {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-size: 1.6rem;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  background-color: #991724;
}




/* SECTION CTA */

.section-CTA {
  padding: 9.6rem 0 12.8rem 0;
}

.cta {
  max-width: 105rem;
  margin: 0 auto;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.015);
  /* background-color: #f9e8ea; */
  background-image: linear-gradient(to right bottom, #bf1d2d, #e5a5ab);
  /* tem */

  border-radius: 11px;
}

.cta-text-box {
  color: #260609;

  padding: 4.8rem 6.4rem 6.4rem 6.4rem;
}

.cta-text {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 4.8rem;
}

.cta .heading-secondary {
  color: #260609;
  margin-bottom: 3.2rem;
}



.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 2.4rem;
  column-gap: 3.2rem;
}

.cta-form label {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}
.cta-form input,
.cta-form select {
  width: 100%;
  padding: 1.2rem;
  font-size: 1.8rem;
  font-family: inherit;
  border: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
  background-color: #f9e8ea;
  border-radius: 9px;
}

.cta-form input::placeholder {
  color: #aaa;
}

.cta-form select {
}
.cta-form button {
}

.cta *:focus {
  outline: none;
  /* outline: 4px dotted #e5a5ab;
  outline-offset: 8px; */
  box-shadow: 0 0 0 0.8rem #e5a5ab92;
}
/**************************/
/* FOOTER */
/**************************/

.footer {
  
  padding: 12.8rem 0;
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.01);
}

.grid--footer {
  grid-template-columns: 1.5fr 1.5fr 1fr 1fr;
}

.logo-col {
  display: flex;
  flex-direction: column;
}

/* .footer-logo {
  display: block;
  margin-bottom: 3.2rem;
} */

.my {
  text-decoration: none;
  font-size: 1.8rem;
 
}
.social-links {
  list-style: none;
  margin-top: 2rem;
  display: flex;
  gap: 2.4rem;
}

.social-icon {
  height: 2.4rem;
  width: 2.4rem;
}

.copyright {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #767676;
  margin-top: auto;
}

.footer-heading {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 4rem;
}

.contacts {
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.6;
}

.address {
  margin-bottom: 2.4rem;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.6rem;
  color: #767676;
  transition: all 0.3s;
}

.footer-link:hover,
.footer-link:active {
  color: #555;
}


/* ***************************
  ANIMATIONS
******************************/

@keyframes moveInLeft{
  0%{
    opacity: 0;
    transform: translateX(-10rem);
  }

  80%{
    transform: translateX(1rem);
  }

  100%{
    opacity: 1;
    transform: translateX(0);
  }
}