@import url(../../css/font.css);
@import url(../../css/init.css);
@import url(../../css/vars.css);
@import url(../../css/srgntopbar.css);
@import url(../../css/srgnmenu.css);
@import url(../../css/srgnfooter.css);
@import url(./mainslider.css);
@import url(../../css/secanim.css);

.threecardsbar{
    margin-top: -3rem;
}
.threecardscnt{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    row-gap: 1rem;
}

.onecard{
   flex-basis: 24%;
   min-width: 250px;
    min-height: 150px;
    padding: 1.5rem;
    background-image:url(../image/tornbg.png);
    background-repeat: repeat-x;
    background-position: top left;
    z-index: 2;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.onecard h5{
    font-family: 'Fahkwang-Medium', 'Courier New', Courier, monospace;
	font-size: 1.1rem;
	line-height: 1.3rem;
	letter-spacing: 0.05rem;
    text-align: center;
    color: white;
    padding:0.3rem  0.5rem;
    text-transform: uppercase;
}

.onecard p{
    padding-top: 2.5rem;
    font-family: 'Fahkwang-Regular', 'Courier New', Courier, monospace;
    font-size: 1rem;
    line-height: 1.2rem;
    letter-spacing: 0.05rem;
    text-align: justify;
    color: rgb(99, 95, 95);
}

@media screen and (max-width:500px){
    .threecardsbar{
        margin-top: 1rem;
    }
    .onecard{
        flex-basis: 80%;
        margin: 0 auto;
    }

    .onecard h5{
        padding-top: 0.4rem;
    }
}

.whatarewecard{
    width: 40%;
    margin: 0 auto;
    padding: 0 2rem 1rem;
    height: auto;
    position: relative;
}

.imagecard{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0;
    transition: 2s;
}

.whatarewecard:hover .imagecard{
    opacity: 1;
}

#profjj{
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}

.whatarewecard h5{
    text-align: center;
    padding: 1rem 0;
    color: var(--special-text-colorc);
}

.whatarewecard p{
    text-align: justify;
    line-height: 1.2rem;
    color: var(--secondary-text-color-light);
}

.otro-blockquote{
    width:100%;
    margin: 0 auto 2rem;
    padding:1rem 2rem 1rem 2rem;
    border-left:8px solid var(--special-text-colora);
    line-height:1.6;
    position: relative;
    background:#EDEDED;
  }

  @media screen and (max-width:500px){
    .whatarewecard{
        width: 100%;
    }
    .whatarewecard:hover .imagecard{
        opacity: 0;
    }
  }
  
.whyarewebar h2{
    font-family: 'Fahkwang-Bold', 'Courier New', Courier, monospace;
    font-size: 2rem;
    letter-spacing: 0.05rem;
    line-height: 2.2rem;
    text-align: center;
    text-transform: uppercase;
}



h1 {
    font-family: 'Fahkwang-Bold', 'Courier New', Courier, monospace;
    font-size: 2.5rem;
    letter-spacing: 0.05rem;
    line-height: 2.7rem;
}

h2 {
    font-family: 'Fahkwang-Bold', 'Courier New', Courier, monospace;
    font-size: 2rem;
    letter-spacing: 0.05rem;
    line-height: 2.2rem;
}

h3 {
    font-family: 'Fahkwang-Bold', 'Courier New', Courier, monospace;
    font-size: 1.8rem;
    letter-spacing: 0.05rem;
    line-height: 2rem;
}

h4 {
    font-family: 'Fahkwang-Bold', 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.03rem;
    line-height: 1.7rem;
}

h5 {
    font-family: 'Fahkwang-Bold', 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    letter-spacing: 0.05rem;
    line-height: 1.4rem;
}

h6 {
    font-family: 'Fahkwang-Light', 'Courier New', Courier, monospace;
    font-size: 1rem;
    letter-spacing: 0.05rem;
    line-height: 1.3rem;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.3rem;
}

.pdef {
    font-family: 'Fahkwang-Regular', 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    letter-spacing: 0.02rem;
    line-height: 1.1rem;
}

.psm{
  font-family: 'Fahkwang-Regular', 'Courier New', Courier, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.02rem;
  line-height: 1rem;
}

.pbg{
  font-family: 'Fahkwang-Light','Fahkwang-Regular', 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.03rem;
  line-height: 1.5rem;
}

.bline{
  display: block;
  width: 3rem;
  height: 3px;
  background-color: red;
  margin: 0 auto;
  margin-top: 1rem;
  padding: 0;
  margin-bottom: 3rem;
}

.tc{
  text-align: center;
}

.tl{
  text-align: left;
}

.tj{
  text-align: justify;
}

.tr{
  text-align: right;
}

.tucase{
  text-transform: uppercase;
}

.tcolpr{
  color: var(--primary-text-color);
}

.tcolsl{
  color: var( --secondary-text-color-light);
}

.tcolsd{
  color: var( --secondary-text-color-dark);
}

.tcolsp{
  color: var(--special-text-colora);
}

#slcontbar {
    background-image:url("../image/bgrd/blstrip.png");
    background-position: center center;
    background-repeat: no-repeat; 
    background-size: cover; 
    padding: 2rem 0 ;
    margin-bottom: 2rem;
}

.featurebar {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
    align-items: center;
    column-gap: 1rem;
}

.counteritem {
  min-width: 300px;
    flex-basis: calc(100% / 4 - 8rem);
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
    padding:1rem 0 0;
}

.countimg{
    width: 30%;
  }
  .countertxt {
    width: 70%;
  }
  
  .countimg{
      width: 100px;
      border-radius: 100%;
      box-sizing: border-box;
    display: inline-block;   
    border-color: white;
    border-width: 10px;
    text-align: center;
    color: white;
    line-height: 180px;
    border-style: double;
  } 
  
  .countertxt{
    display: flex;
    padding: 0 1rem;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 0.5rem;
  }
  
  .countnum {
      font-family: var(--mid-title-font-family);
      text-align: left;
      font-size: 2rem;
      color: var(--primary-text-color);
      text-shadow: 2px 2px 2px black;
      font-weight: 800;
  }
  
  .counthead {
      font-family: var(--mid-title-font-family);
      text-align: left;
      font-size: 1rem;
      color: var(--primary-text-color);
      line-height: 2rem;
      /* font-weight: bold; */
  }
  
  @media (max-width:350px){
    .countnum{
      font-size: 1.2rem;
    }
  }
  @media (max-width:315px){
    .counteritem{
      flex-direction: column;
    }
  
    .countertxt{
      width: 100%;
      padding-top: 1rem;
      align-items: center;
    }
  }


  /* -------------------------------------------------------------- */




/* ----------------------------------------------------------- */

.testimbg{
  background: linear-gradient(110deg, #0000ff 50%, #0a486f 50%);
}

.testimcnt{
    width: 100%;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0 2rem;
 }

 .testimcnt .item{
    width: 800px;
    min-height: 100%;
    display: flex;
    background: #fff;
    margin: 0 auto;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
 }

 .testimcnt .item img, .testimimg{
    flex-basis: 30%;
 }

 .testdata{
    flex-basis: 70%;
    width: 100%;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
 }

 .testdata .tetname,
 .testdata h6 {
    color: var(--special-text-colora);
 }

 @media screen and (max-width:800px){
    .testimcnt .item{
        width: 80%;
        height: auto;
    }
    .testimcnt .item{
        flex-direction: column;
    }
    .testdata{
        padding: 1.5rem;
    }
 }


 /* ---------------------------------------------------- */
 .fcoursebar{
    background-color: var(--primary-bg-color);
}

.fcoursecnt{
  width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
}

.fcourseitem{
    position: relative;
    flex-basis: calc(100% / 3 - 8rem);
    min-width: 300px;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent
}

.fcourseitem img {
    width:100%;
    transition: 1s all ease-in-out;
  }

  .fcourseitem:hover img {
    transform: scale(1.5);
    opacity: 0;
  }

  .fcourseitem:hover div p{
    font-weight: 500 !important;
  }

  .fcourseitem div {
    position: absolute;
    width: 100%;
    padding: 2rem;
    top: 0;
    left: 0;
  }

  .fcourseitem div h4{
    font-family: 'Fahkwang-Medium','Fahkwang-Regular', 'Courier New', Courier, monospace;
    font-size: 1.2rem !important;
    padding: 1rem;
    background-color: blue;
}

.fcourseitem div p{
    font-family: 'Fahkwang-Regular','Fahkwang-Regular', 'Courier New', Courier, monospace;
  padding-top: 1rem;
  color: white !important;
  font-weight: 600 !important;
  line-height: 1.1rem;
}
  

.fcourseitem:hover p{
  color: black !important;
}
  @media (max-width:550px){
    .fcourseitem div h4{
        font-size: 0.9rem;
    }
  }
  .defbtnarea{
    width: auto;
    margin: 0 auto;
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .btnmoredet{
    font-family: 'Fahkwang-Regular','Fahkwang-Regular', 'Courier New', Courier, monospace;
    padding: 1rem;
  }


  /* ------------------------------------------------------------------ */

  .affilicnt{
    width: 80%;
    margin: 0 auto;
 }
 .carouselb div {
  text-align: center;
  width: 250px;
  height: 250px;
  margin: 5px 40px;
  padding: 10px;
  float: left;
  position: relative;
  background-color: white;
  border: 1px solid rgba(138,45,0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}


.carouselb div span {
  display: none;
  font-family: 'Oswald-Light';
  line-height: 0.9em;
  font-size: 0.9em;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.affbtnarea{
   width: auto;
    margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   padding: 2rem 0 0 1rem;
}

.getinvcnt{
  width: 50%;
  margin: 0 auto;
  padding: 1rem 2rem;
}

.getinvcnt p{
  font-family: 'Fahkwang-Regular','Fahkwang-Regular', 'Courier New', Courier, monospace;
  font-size: 1.3rem;
  text-align: justify;
  line-height: 1.5rem;
  color: rgb(59, 58, 58);

}

.getinvbtnarea{
  width: auto;
   margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 2rem;
  padding: 2rem 0 0 1rem;
}

/* ---------------------------------------------------------- */

.rcenterscnt{
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 1rem;
}

.rcnecesity{
  width: 50%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.rcnecesityimg{
  min-width: 200px;
  width: 30%;
}

.rcnecesityimg img{
  display: block;
  margin: 0 auto;
}

.rcnecesitytxt{
  width:60%;
  padding: 2rem;
}

.rcnecesitytxt p{
  font-family: 'Fahkwang-Regular','Fahkwang-Regular', 'Courier New', Courier, monospace;
  font-size: 1.2rem;
  text-align: justify;
  line-height: 1.4rem;
  color: rgb(59, 58, 58);
}

@media screen and (max-width:1015px){
  .rcnecesity{
    width: 80%;
  }
}

@media screen and (max-width:650px){
  .rcnecesity{
    width:100%;
  }
}

@media screen and (max-width:516px){
  .rcnecesityimg,  
  .rcnecesitytxt{
    width:100%;
  }
}