/*
Theme Name: H2 Academy
Theme URI: http://H2Academy.com
Description: H2 Academy
Author: H2 Academy
Author URI: http://H2Academy.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: H2 Academy
*/
/* Reset and basic styles */




@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.swiper-wrapper {
    height: 500px !important;
}
.mob80pc60{
     height: 60px; 
     overflow: hidden; 
}
.d-flex.align-items-center .check img {
    margin-top: 5px;
}
@media (max-width: 480px) {
    .swiper {
    height: 480px !important;
}
}

/* === LOGIN SECTION DESIHN === */
*{
    padding:0;
    margin:0;
    box-sizing: border-box; 
}
a:hover {
  color: #23527c;
  text-decoration: none;
}
.section__container {
  max-width: var(--max-width);
  margin: auto;
  padding: 2rem 1rem; 
}
html,
body {
  scroll-behavior: smooth;
  overflow-x: hidden; 
} 
:root{
    --primary-clr:#172350;
    --fw-heading:800;
    --fw-primary:600;
    --fw-normal:500;
    --fw-secondary:400;
    --font-primary: Lato;
    --font-secondary:"Poppins", sans-serif;
    --max-width:1250px;
    --white:#fff;
    --secondary-clr: #242424;
    --para-clr:#737272;
    --third-clr:#0096C3;
    --keyword-bg: #2EC4B61A;
    --card-btn: #EF880D;
}
.register__margin_bottom{
  margin-bottom:70px;
}
.register__margin_bottom__login{
  margin-bottom:190px;
}
a{
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6{
  margin: 0px;
}
ul{
  list-style: none;
}
 
.login{   
    border-radius: 6px; 
    padding-top: 50px;
}
.heading{
    font-family: Lato;
    font-size: 28px;
    font-weight: 800;
    line-height: 33.6px; 
    text-align: center;
    color: #172350;

}
.sub__heading{
    font-family:var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 19.2px;
    text-align: center;
    color:var(--primary-clr);
    margin-top: 15px;
}
.login__logo{
    margin-bottom: 20px;
}
.login__logo img{
    width: 78px;
    height: 52px;
    gap: 0px; 

}
 /* === LOGIN FORM DESIGN START ===  */
 .login__form{
    margin-top:40px;
 }
.login__form label{
    font-family:var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 16.8px;
    text-align: left;
    color: #808080;
}
.login__form input{
    width:100%;
    height:54px;
    padding: 8px 19px 8px 22px;
    gap: 10px;
    border-radius: 10px;
    border: 2px;
    color: var(--secondary-clr);
    border: 2px solid #F1F1F1;
    font-family: Lato;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px; 
    margin-top: 10px;
  background: #F9F9F9;
}
.login__form input:focus{
  border: 2px solid #0096C366;
}
.login__form input[type=submit]{
  width:100%;
  height:58px; 
  border-radius: 6px ;
  border: 1px;
  background: #EF880D;
  border: 1px solid #EF880D;
  color:#fff;
  transition: all 0.5s;
  margin-top: 50px;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: var(--fw-primary);
}
.login__form input[type=submit]:hover{
    color:#fff;
    background:#ef890dd3;
}
.login__form select:focus{
  border: 2px solid #0096C366;
}
.login__form select{
  margin-top: 10px;
  height:54px; 
}
.login__form 
.select::after{
  top: 8px;
}
select {
    /* Reset Select */
    appearance: none;
    outline: 10px red; 
    box-shadow: none;
    /* Personalize */
    flex: 1;
    padding: 0 1em;
    color: var(--secondary-clr);
    background: #F9F9F9;
    background-image: none;
    cursor: pointer; 
    border: 2px solid #F1F1F1;
    border-radius: 10px;
    font-family: var(--font-secondary);
    background-image: url("image/selectIcon.svg");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 10px 12px;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select wrapper */
.select {
  position: relative;
  display: flex;
  border-radius: .25em;
}
/* Arrow */
 
.showHidePw{
  width: 20px;
  height: 20px; 
  color: #808080;
  font-size: 25px;
  position:absolute;
  right:4%;
  top:56%;
  cursor: pointer;
}
.showHidePwNew{
  width: 20px;
  height: 20px; 
  color: #808080;
  font-size: 25px;
  position:absolute;
  right:4%;
  top:56%;
  cursor: pointer;
}
.login__form textarea{ 
  height: 198px;
  padding: 16px 14px 16px 14px;
  border-radius: 8px;
  border: 2px;
  border: 2px solid #F1F1F1;
  background: #F9F9F9;
  outline: none;
  resize: none;
  outline: none;
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 400;
  line-height: 21.6px;
  text-align: left;
color: var(--secondary-clr);
}
.login__form textarea:focus{
  color: var(--secondary-clr);;
  background-color: #F9F9F9;
  border-color: #F1F1F1 !important; 
} 
.forget__link{
    text-align: right;
    display: block;
}
.btn__submit{
    width:100%;
    height:58px; 
    border-radius: 6px ;
    border: 1px;
    background: #EF880D;
    border: 1px solid #EF880D;
    color:#fff;
    transition: all 0.5s;
    margin-top: 50px;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: var(--fw-primary);
}
.btn__submit:hover{
    color:#fff;
    background:#ef890dd3;
}
.forget__link{
    font-family:var(--font-primary);
    font-size: 16px;
    font-weight: var(--fw-normal);
    line-height: 19.2px;
    text-align: right;
    color: var(--primary-clr);
    transition: all 0.5s;

}
.footer__form{
    margin-top: 20px;
}
.footer__form .footer__text{
    font-family:var(--font-primary);
    font-size: 16px;
    font-weight: var(--fw-normal);
    line-height: 19.2px;
    text-align: center;
    color: var(--primary-clr); 

}
.register__link{
    font-family:var(--font-primary);
    font-size: 16px;
    font-weight: var(--fw-primary);
    line-height: 19.2px;
    text-align: center;
    color:#0096C3;
    transition: all 0.5s;

}
  /* === LOGIN FORM DESIGN END ===  */

  /* LOGIN RIGHT AREA DESIGN START HERE  */
 
  .start{
    top:-10%;
    right:-20%;
    z-index: -1;
  }
 .end{
    bottom:0;
    left:-10%;
    z-index: -1;
  }
  .right__login__image .main{
    z-index: 2;
    max-width: 382px;
    min-width: 300px;
  }
  .right__login__image .top{
    top:-20%;
    z-index: -1;
    right: 5%;
    max-width: 183px;
  }
  .right__login__image .right{
    left:18%;
    bottom:-10%; 
    max-width: 183px;
  }
  .login__right__image{
    left:3% !important;
  }
  .right__login__footer{
    width: 100%;
    margin: auto;
    margin-top:30px;
  }
  .footer__heading h1{
    font-family: var(--font-secondary);
    font-size: 20px;
    font-weight: 700;
    line-height: 35px; 
    color: #242424;
  }
  .register__heading h1{
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: var(--fw-heading);
    line-height: 38.4px; 
    color: #172350;
  }
  .footer__heading h1 span{ 
    color: #0096C3 ;
  }
  .footer__heading p{
    font-family:var(--font-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px; 
    color: #737272;
    margin-top: 20px;
  }
  .register__heading p{
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--fw-normal);
    line-height: 24px; 
    color: #172350;

  }
  .right__login__footer .row{ 
    height: 153px;
    border-radius: 10px;
    z-index: 999; 
    margin: auto;
    margin-top: 50px; 
  }
  .right__login__footer .row .col-4 .icon{
    width: 50px;
    height: 50px;
    border-radius: 6px ;
  }
  .right__login__footer .row .col-4 .icon.first{
    background: #0EB1141A;
  }
  .right__login__footer .row .col-4 .icon.second{
    background: #6A86E621;
  }
  .right__login__footer .row .col-4 .icon.third{
    background: #FFECDD;
  }
  .right__login__footer .row .col-4 .icon img{
    width: 24px;
    height: 24px; 
    padding: 3.01px 3.01px 3.03px 3.03px; 
  }
  .right__login__footer .row .col-4 h2{
    font-family:var(--font-secondary);
    font-size: 14px;
    font-weight: var(--fw-primary);
    line-height: 21px;
    text-align: left;
    color: #242424;
    margin-top: 12px;
  }
  .right__login__footer .row .col-4 h6{
    font-family:var(--font-secondary);
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    text-align: left;
    color: #737272;
    margin-top:6px;
  }
   /* LOGIN RIGHT AREA DESIGN END HERE  */
  /* === HOME PAGE DESIGN  START HERE ===  */
  .title__head{
    font-family: var(--font-secondary);
    font-size: 48px;
    font-weight: 700;
    line-height: 67.2px; 
    color: #161619;
  }
  .card__para{
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px;
    text-align: left;
    color: var(--para-clr); 
  }
  .card__para a{
    color: var(--third-clr);
    text-decoration: underline;
    transition: all 0.4s; 
    margin-left: 5px; 
  }
  .card__para a:hover{
    color: #0096c3b4;
  }
.heading__prara{
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 27.2px;
  color: var(--para-clr); 
}  
  /* === header section design ===  */
  header{
    width: 100%;
    box-shadow: 0px 4px 20px 0px #0096C31F;
    position: relative;
    z-index: 999999;
  }
  nav { 
    width: 100%;
    z-index: 9;

  }
  .nav__links {
    z-index: 99;
  }
  .nav__header {
    padding: .5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; 
  }
  header .section__container{
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  } 
  .nav__logo a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
  }
  .nav__logo a img{
   width: 100px;
  }
  
  .nav__menu__btn {
    font-size: 1.5rem;
    color: var(--white);
    cursor: pointer;
  }
  .nav__links {
    position: absolute; 
    width: 100%;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 25px;
    background-color:#fff;
    transform: translateX(100%);
    padding-top: 2px;
    transition: 0.3s;
    top: 100%;
  }
  
  .nav__links.open { 
    transform: translateX(0%);
  }
  
  .nav__links a {
    font-weight: 700;
    color: var(--white);
    transition: all 0.3s;
  }
  .nav__links a:hover{
    color: var(--card-btn);
  }
  .nav__links a.active{
    color: var(--card-btn);
  }
  .nav__links .btn {
    padding: 0;
    background-color: transparent;
  }
  
  .nav__btns {
    display: none;
  }
  .btns {
    padding: 0.75rem 1.5rem; 
    color: var(--white);
    white-space: nowrap;
    border-radius: 4px;
    transition: 0.3s;
    cursor: pointer;   
    border-radius: 6px ;
    opacity: 0px;
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 21px; 
    background: transparent;
    border: none;

  }
  .btns
  .btn__secondary{
    background: var(--card-btn);
  }
  .btn__primary{
    border: 1px solid #01394B
  }
 
  .btns:hover{
    background-color: var(--card-btn) !important;
    color: var(--white) !important;
    border-color: #fff;
  }
  .btns.active{
    background-color: var(--card-btn) !important;
    color: var(--white) !important;
    border-color: #fff;
  }
/* heor __header design start  */
.hero__header .round{ 
  left:50%; 
  border-radius: 50%; 
  bottom:15%; 
}
.hero__header .round__in{
  background: #0096C30F;
  padding:20px; 
  width:200px;
  height:200px;
  border-radius: 50%;
}
.hero__header .round__in img{
  width:80%;
}


.play__btn{
  top:50%;
  left:50%;
  transform: translate(-50% ,-50%);
  width:30%;
  z-index: -1 !important;
}
.sub__head{
  font-family:var(--font-secondary);
  font-size: 16px;
  font-weight:var(--fw-normal);
  line-height: 90px;
  letter-spacing: 0.31em;
  color: #0096C3;
}
.left__hero .box h1{
  font-family: Poppins;
    font-size: 50px;
    font-weight: 700;
    line-height: 60px;
  color: #242424;
  
  background: linear-gradient(90deg, #242424 42.96%, #0096C3 69.12%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; 
}
.left__hero .box h1 span{
  background: linear-gradient(90deg, #242424 42.96%, #0096C3 69.12%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; 
}
.left__hero .box p{
  line-height: 28.8px;
  margin-top: 20px;
}
.btn__see__more{
  width:200px;  
  line-height:48px;
  border-radius: 6px;
  background: var(--card-btn);
  color: var(--white);
  transition: all 0.5s;
  margin-top:40px;
  font-weight: var(--fw-primary) !important;
}
.btn__see__more:hover{
  color:var(--white);
  background-color: #ef890dbd;
}

.footer__hero{
  height: auto;
  border-radius: 16px ;
  box-shadow: 0px 0px 20px 0px #1723500D;
  background: #FFFFFF;
  padding:2rem;
  z-index: 1111;
}
.footer__hero .image__box{
  width:72px;
  height:60px; 
  border-radius: 4px;
  padding:10px
}
.footer__hero .image__box img{ 
  padding: 2.83px 4.25px 2.83px 4.25px; 
}
.footer__hero .box-1{
  background: #F6D2101C;
}
.box-2{
  background: #FDBE752E;
}
.box-3{
  background: #98FD752E;
}
.box-4{
  background: #551DCB24;
}
.footer__hero .text{
  margin-left:15px;
}
.footer__hero .text h2{
  margin-top: 0px;
  color: #01394B;
}
.footer__hero .text p{
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 400;
  line-height: 22.1px; 
  color: var(--para-clr);
  margin-top:15px;
}


/* RESOURCE CENTER DESIGN START HERE */
.resource__center{ 
  background: #2EC4B60D;
}
.resource__center .card{
  border-radius: 10px;
  box-shadow: 0px 4px 20px 0px #1723500D;

}
.resource__heading p{
  margin-top: 10px;
}
.select__box select{  
  height:46px;
  padding: 8px 19px 8px 19px; 
  border-radius: 10px; 
  border: 1px solid #0096C366;
  
  font-family:var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  color: #242424;
  width:218px; 
}
.see__all{
  width:125px;
  height:46px; 
  border-radius: 10px ;
  border: 1px ;
  border: 1px solid #0096C366;
  background: #F9F9F9;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: var(--fw-normal);
  line-height: 32.2px; 
  color: #0096C3;
  transition: 0.5s;
}
.see__all:hover{
  color:#0096C3;
  background-color: #fff;
}
/* card design  */
.card__sub__heading{
  font-family:var(--font-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: 0.28em; 
  color: #0096C3;
  text-transform: uppercase;
}
.card-title h2{
  font-family: var(--font-secondary); 
  line-height: 30px;  
}

.card-title .date{
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 23.8px;
  text-align: left;
}
.card-title .date img{
  width: 18px;
  height: 18px; 
  margin-right: 10px;
}
.body__footer{
  margin: 20px auto;
}
.more__details{ 
  border-radius: 6px;
  background: var(--card-btn);
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: var(--fw-primary); 
  color: var(--white);  
  line-height: 30px;  
  flex-basis:100%;
  transition: all 0.3s;
}
.more__details_sub{ 
  border-radius: 4px;
  background: #DBD8D8; 
  margin-left: 10px;
  background-image: url(image/sub_white.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 42px;
  height: 41px;
  padding: 5px;
}
.more__details_sub.active {
  border-radius: 4px;
  background: #DBD8D8; 
  margin-left: 10px;
  background-image: url(image/black.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 42px;
  height: 41px;
  padding: 5px;
}
.more__details_sub img{
  width: 24px;
  height: 24px;
}


/*new*/
.more__details_sub1{ 
  border-radius: 4px;
  background: #DBD8D8; 
  margin-left: 10px;
  background-image: url(image/sub_white.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 42px;
  height: 41px;
  padding: 5px;
}
.more__details_sub1.active {
  border-radius: 4px;
  background: #DBD8D8; 
  margin-left: 10px;
  background-image: url(image/black.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 42px;
  height: 41px;
  padding: 5px;
}
.more__details_sub1 img{
  width: 24px;
  height: 24px;
}    

/*new*/


.more__details:hover{
  background: #ef890db9;
  color: var(--white);
}
.body__footer .download{ 
  height: 42px;    
  border-radius: 6px;
  border: 1px solid #01394B;
  text-align: center;
  flex-basis:15%;
  transition: all 0.3s;
}
.body__footer .download:hover{
  background-color: #F9F9F9;
}
.round__btn div{

 
  margin:auto 3px;
}
.swiper-pagination-bullet{
  background: #d4d0d0;
  width:12px;
  height:12px; 
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.98);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.98);
}
.swiper-pagination-bullet-active{
  background: #0096C39C !important;
}
/* academy section design start here  */
.academy__left .card{
  background: #2EC4B60D;
  border-radius: 6px;
} 
.academy__left .check{
  width:20px;
  height:20px;
  border-radius:50%;
  background: var(--card-btn);
  text-align: center;
  line-height:15px;;
}
.academy__left__head{
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 600;
  line-height: 25.2px;
  color: #000000;
  text-wrap: nowrap;
}
.academy__head p{ 
  font-size: 18px; 
  line-height: 32.4px; 
  margin-top: 26px;
}
.academy__left .card__para{
  margin-top: 20px;
}
/* academy__right  */
.academy__right{
  padding-top: 112px;
}
.academy__right .green{
  top: 8%;
  left: -9%;
}
.academy__right .red{
  bottom:-5%;
  right:-9%;
}
.center__image__new{
  top:40%;
  right: -12%;
  width:200px;
  z-index: -1;
}
.academy__right .middle{
  top:46%;
  left:-25%;
}
.middile__image{
  height:730px; 
}
.nextPrve .swiper-button-prev{
  top: 98.4% ;
  left: 47.2% ;
  width: 20px;
  height: 20px;
}
.nextPrve .swiper-button-next{
  top: 98.4% ;
  right: 45.6%;
  width: 20px;
  height: 20px;
}
.roundedd{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0096C39C;
  position: absolute;
  left: 50%;
  bottom: 2%;
}
.nextPrve .swiper-button-prev::after {
  display: none;
}
.nextPrve .swiper-button-next::after {
  display: none;
}

/* RESOURCE CENTER DESIGN END HERE */
/* education training section design start here  */
.education__training{
  margin-bottom: 150px;
}
.image_gellary img{
  width: 100%;
}
 .education__position__image{
  width:300px;
  max-width: 250px;
 }
 .education__position__image.first{
  bottom:-13%;
  left:24%;
 }
 .education__position__image.secend{
  bottom: -5%;
  left: -7%;
  z-index: -1;
 }
.right__education p{
  margin-top: 30px; 
  line-height: 28.8px; 
}
/* keyword div  */
 .keyword{
  margin-top:20px;
 }
.keyword .keyword__item{  
  height: 36px;
  gap: 0px;
  border-radius: 20px ;
  background: #2EC4B60D;
  padding: 20px 15px;  
  margin: 5px;
cursor: pointer;
}
.keyword .keyword__item h6{
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: var(--fw-normal);
  line-height: 21px; 
  color: #242424;
  margin-left: 5px;
}
/* education training section design end here  */
/* === project accses section start here === */
.project_accsses{
  background: linear-gradient(116.82deg, rgba(255, 151, 245, 0.05) 11.92%, rgba(0, 150, 195, 0.05) 98.16%);
}
.card-head{
  display: block;
  transition: all 0.3s;
}
.card-head:hover{
  text-decoration: underline;
  color: var(--primary-clr);
}
.text .card-head:hover{
  text-decoration: none;
}
.mySwiperOne{
  padding-bottom: 100px;
}
.project_accsses .card{  
  border-radius: 8px 8px 9px 8px; 
}
.card-head{
  font-family: var(--font-secondary);
  font-size: 20px;
  font-weight: 600;
  line-height: 32px; 
  color: var(--primary-clr); 
  margin: 20px auto;
}
.list__card__head__text{
  font-size: 20px !important;
}
.arrow-btn{
  position: fixed;
  bottom: 30px;
  right: 30px;
  opacity: .5s,visibility .5s ;
  opacity: 0;
  z-index: 10000;
  transition: all 0.5s;
  width:50px;
  height: 50px;
  text-align: center;
  display: block;
  border-radius: 50%;
  background-color:#0096C3 ;
  line-height: 50px;
}
.arrow-btn a i{
  font-size: 24px;
  color: var(--white) ;
}
.arrow-btn:hover{
  background-color:#03A6EC;
}
.arrow-btn.show{
  opacity: 1;
}
.card .user{
  margin:10px auto;
}
.user h6{
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 23.8px; 
  color: #737272;
  margin-left:6px;
}
.card__btn{
  width: 100%; 
  border-radius: 6px;
  border: 1px solid var(--card-btn);
  margin-top: 20px;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: var(--fw-primary);
  line-height:30px; 
  color: #EF880D;
  box-shadow: none;
}
.card__btn:hover{
  color:#E4740D
}

/* === project accses section end here === */
/* === blog sectin design start here ===  */
.blog .card-head{
  display: block;
  transition: all 0.3s;
}
.blog .card-head:hover{
  text-decoration: underline;
  color: var(--primary-clr);
}
.blog .card{
  background:#2EC4B60D !important; 
  border-radius: 8px;
  padding: 10px; 
}
.mySwiper{
  padding-bottom: 100px;
}
.title__head span{
  background: linear-gradient(90deg, #242424 42.96%, #0096C3 69.12%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; 
}
.title__head{
  background: linear-gradient(90deg, #242424 42.96%, #0096C3 69.12%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; 
}
/* banner section design start here  */
.banner .inner{
  width: 80%;
  text-align: center;
  margin: auto;
}
.banner .inner a{
  transition: all 0.3s;
}
.banner .inner a:hover{
  color: var(--third-clr);
}
.banner .inner a.active{
  color: #242424;
  font-weight: var(--fw-primary);
  transition: all 0.3s;
}
.banner .inner a.active:hover{
  color:#078bc4; 
}
.home__banner{
  background: #F9F9F9;
  padding:100px 0px;
}
.home__banner .banner__inner{ 
  height: 316px; 
  border-radius: 12px ;
  background: #0096C3CC;
  
}
.home__banner .banner__box h1{
  font-family: Poppins;
  font-size: 40px;
  font-weight: 600;
  line-height: 60px; 
  color: #FFFFFF;
}
.banner__btn{
  width: 180px; 
  border-radius: 10px;
  background: #000000;
  box-shadow: 0px 0px 8px 0px #0096C32E;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 400;
  line-height: 40px; 
  color:var(--white);
  transition: all 0.4s;
  margin-top: 22px;
}
.banner__btn:hover{
  background-color: #000000cb;
  color:#ffffffd0;
}
.banner__22{
  top:0;
  left:0;
  border-radius: inherit;
}
.banner__23{
  right:0;
  bottom:0;
  border-radius: inherit;
}
.banner__24{
  top:-40%;
  right:8%;
}
.banner__25{
  top:15%;
  right:6%;
}
.banner__26{
 bottom:28%;
 left:8%;
}
.banner__27{
  bottom:15%;
  left:6%;
 }
 /* footer section design start here  */
 .footer{
  background: #022838F0;
 }
 .sub_footer__item { 
  height:180px;
  justify-content: center;
 }
 .sub_footer__item.secend{
  border-left: 1px solid #777777;
  border-right: 1px solid #777777;
 }
 .footer .sub_footer__item .footer__icon{
  width:60px;
  height:60px;
  border-radius: 50%;
  border: 1px solid #777777;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  padding-top: 15px;
 }
 .footer .sub_footer__item .footer__icon img{
  width: 23.93px;
  height: 24px; 
 }
 .footer .section__container{
  padding:4rem 1rem ;
 }
 .footer .sub_footer__item .footer__text{
  margin-left: 10px;
 }
 .footer .sub_footer__item .footer__text h2{
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--fw-normal);
  line-height: 19.2px; 
  color: #0096C3;
  cursor: pointer;
 }
 .footer .sub_footer__item .footer__text h1{
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #FFFFFF;
  margin-top: 10px;
  cursor: pointer;
 }
 .footer .footer__hr{
    border:none;
    outline: none;
    height:2px; 
    background: #777777;
 }

 /* footer bottom design  */
.footer__items img{
  width: 100px;
} 
 .footer .footer__bottom .footer__items h2{
  font-family: var(--font-primary);
  font-size: 38px;
  font-weight: var(--fw-heading);
  line-height: 45.6px; 
  color: var(--third-clr);
  margin-left: 10px;
 }
 .footer .footer__bottom .footer__items p{
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: var(--fw-normal);
  line-height: 23px; 
  color: #FFFFFF;
  margin-top:20px;
 }
 .footer .footer__bottom .footer__items .socal__links{
  margin-top: 30px;
 }
 .footer .footer__bottom .footer__items .socal__links ul li{
  border-radius: 4px;
  border: 0.7px 0px 0px 0px;
  background:  var(--third-clr);;
  border: 0.7px solid  var(--third-clr);;
  transition: all .5s;
  width: 32px;
  height: 32px;
  text-align: center;
  margin: 6px;
  border-radius: 5px;
 }
 
 .footer .footer__bottom .footer__items .socal__links ul li:hover{
  background-color: #0096c3b0;
 }
 .footer .footer__bottom .footer__items .socal__links ul li a i{
  color:var(--white);
  font-size: 20px;
  font-weight:500;
 }

.footer .footer__bottom .footer__items .footer__heading{
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: var(--fw-heading);
  line-height: 24px;  
  color: var(--white);
 }
.footer .footer__bottom .footer__items .links{
  margin-top: 30px;
}
.footer .footer__bottom .footer__items .links li{
  margin:5px auto;
}
 .footer .footer__bottom .footer__items .links li a{
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 400;
    line-height: 19.2px; 
    color: var(--white);
    transition: all 0.5s;
 }
 .footer .footer__bottom .footer__items .links li a img{
  width:24px;
  height:23px;
 }
 .footer .footer__bottom .footer__items .links li a:hover{
  color:  var(--third-clr);
 }
 .footer .footer__bottom .footer__items .links li a.active{
  color: var(--third-clr);
 }
 .footer .footer__bottom .footer__items .subscribe input{
    width: 288.2px;
    height: 49px; 
    border-radius: 8px;
    background-color: var(--white);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px; 
    color: #172350;
    padding-left:15px;
    margin-top:20px;
    outline: none;
 } 
 .footer .footer__bottom .footer__items .subscribe input[type=submit]{
  width: 147.74px;
  height: 46px;  
  border-radius: 10px;
  background:  var(--third-clr);
  color: var(--white);
  box-shadow: 0px 0px 8px 0px #0096C32E;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: center;
  transition: all 0.3s;
 }
 .footer .footer__bottom .footer__items .subscribe input[type=submit]:hover{
  background-color: #0096c3c0;
 }
/* footer section design end here  */
/* === HOME PAGE DESIGN  END HERE  ===  */
/* === RESOURCE PAGE DESIGN START HERE ===  */
.orginal__section .swiper-slide{
  background-image: url('image/orginal.jpeg'); 
  height: 226px;   
  line-height: 226px;
  background-size: cover; 
}
.orginal__banner__right_text h1{
  font-family: Helvetica;
  font-size: 61.72px;
  font-weight: 700;
  line-height: 70.97px;
  color:var(--white);
}
.orginal__banner__right_text h4{
  font-family: Helvetica;
  font-size: 20px;
  font-weight: 400;
  line-height: 23px; 
  color:var(--white);
}
.orginal__banner__left_text a{
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 700;
  line-height: 18.4px;
  text-align: center; 
  height: 18px; 
  color:var(--white);
  width: 216px;
  height:64px;
  padding: 23px 24px 23px 24px; 
  border-radius: 7.71px ;
  background: #03A6EC;
  transition: all 0.3s;
}
.orginal__banner__left_text a:hover{
  color:var(--white);
  background: #03a6ecbb;
}
.banner{
      background-image: url('image/banner.png'); 
      height: 300px; 
      background-position: center;
      background-size: cover;
    }
    .banner .inner .home{
      font-family: var(--font-secondary);
      font-size: 16px;
      font-weight: 600;
      line-height: 27.2px;
      color: var(--secondary-clr) !important;
    }
    .banner .inner i{   
      font-size: 18px;
      color: var(--secondary-clr); 
      margin-top: 1px;
    }
    .bannerss .inner i{
      font-size: 28px;
      color: var(--secondary-clr); 
      margin-top: -2px;
    }
    .banner .inner h1{
      font-family: var(--font-primary);
      font-size: 48px;
      font-weight: 700;
      line-height: 72px;
      color: #242424;
      margin-top: 10px;
    }
    #myTabContent{
      padding-bottom:50px;
    }
    .banner .inner h2{
      font-family: var(--font-primary); 
      font-size: 16px;
      font-weight: var(--fw-normal);
      line-height: 27.2px;
      color: var(--secondary-clr);
    }
    .banner .inner a{
      font-family: var(--font-primary); 
      font-size: 16px;
      font-weight: var(--fw-normal);
      line-height: 27.2px;
      color: var(--secondary-clr);
      text-transform: uppercase;
    }
    .banner .inner img{
      width: 18px;
    }
    .bannerss{
      margin-bottom: 2.5rem !important;
    }
    .bannerss .inner .home{
      font-family: var(--font-secondary);
      font-size: 16px;
      font-weight: 600;
      line-height: 27.2px;
      color: var(--secondary-clr);
      text-transform: uppercase;
      transition: all 0.3s;
    }
    .bannerss .inner .home:hover{
      color: var(--third-clr);
    }
    .bannerss .inner i{ 
      font-size: 20px;
      color: var(--secondary-clr);
    }
    .bannerss .inner h1{
      font-family: var(--font-primary);
      font-size: 48px;
      font-weight: 700;
      line-height: 72px; 
      color: var(--secondary-clr);
    }


    /* === main resource section design start here ===  */
    .resource__main{
      background-color: #F9F9F9;
    }

    /* fillter side design  */
    .fillter .card{
      box-shadow: 0px 0px 15px 0px #0096C326;
      border-radius: 6px;
    }
    .fillter_card_title{
      font-family: var(--font-primary);
      font-size: 18px;
      font-weight: 700;
      line-height: 21.6px;
      color: var(--secondary-clr);
    }
    .fillter_card_title__see_more{
      font-size: 16px;
      color: var(--secondary-clr);
      font-weight: 500;
      margin: 0px;
      margin-left: 30px ;
    }
    .header__see__more{
      margin-bottom: 15px !important;
    }
    .fillter_card_title__see_less{
      font-size: 16px;
      color: var(--secondary-clr);
      font-weight: 500;
      margin: 0px;
      margin-left: 30px;
    }
    .see_less{
      margin-top: 10px !important;
      display: none !important;
    }
    .see_less.dnone{
      display: block !important;
    }
    .fillter_card_title__see_less:hover {
      text-decoration: none !important;
    }
    .header__see__more i{
      margin-left: 15px;
    }
    .fillter .card form .check__items{
         margin:20px auto;
         display: flex;
         align-items: center; 
    } 
    .all__country{
      margin-top: -7px;
      overflow:auto;
    }
  
    .all__country__list{
      max-height: 0px;
      overflow:auto;
      transition: all 0.3s;
    }
    .all__country__list::-webkit-scrollbar{
      width:0px;
  }
    .header__see__more.active{
      display: none !important;
    }
    .all__country i{
      margin-top: 5px;
      font-size: 18px;
    }
    .all__country__list.active{
      max-height:300px;
      transition: all 0.3s;
    }
    .all__country__list.active .check__items:first-child{
      margin-top: 10px;
    }
    .all__country__list.active::-webkit-scrollbar{
      width:0px;
    }
    .all__country__list::-webkit-scrollbar{
      width:0px;
    }
    .check__items a{
      transition: all 0.5s;
    }
    .check__items a:hover{
      text-decoration: underline;
      color: var(--secondary-clr);
    }
    .fillter .card form .check__items label{
      font-family: var(--font-secondary);
      font-size: 15px;
      font-weight: 400;
      line-height: 22.5px; 
      color: var(--para-clr);
      margin-left: 10px;
    } 
 .fillter .card{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top:2rem;
  padding-bottom: 2rem;
 }
    input[type="checkbox"] { 
      -webkit-appearance: none; 
      appearance: none;
  
      background-color:var(--white);
      width:23px;
      height: 23px;
      border: 1px solid #E2E2E2;
      border-radius: 2px;
      transform: translateY(-0.075em);
      display: grid;
      place-content: center;
    }
    
    .fillter input[type="checkbox"]::before {
      content: "";
      width: 13px;
      height: 13px;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      transform: scale(0);  
      background-color: var(--white);
    }
    .fillter input[type="checkbox"]:checked{
      background:var(--card-btn);
      -webkit-appearance: none; 
      appearance: none;
    }
   .fillter input[type="checkbox"]:checked::before {
      transform: scale(1);
    } 
    .resource__header__item label{
      font-family: var(--font-secondary);
      font-size: 15px;
      font-weight: 400;
      line-height: 22.5px; 
      color: var(--para-clr);
      margin-right: 10px; 
      text-transform: capitalize;
    }
    .resource__header__item select{
      /* Reset Select */
      appearance: none;
      outline: 10px red; 
      box-shadow: none;
      /* Personalize */
      flex: 1;
      padding: 0 1em;
      color: var(--secondary-clr);
      background: #F9F9F9;
      cursor: pointer;
      border: 2px solid #0096C366; 
      font-size: 16px;
      font-weight: 400;
      line-height: 19.2px; 
      background-image: url("image/selectIcon.svg");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 10px 12px;
    }
    /* Remove IE arrow */
    .resource__header__item select::-ms-expand {
      display: none;
    }
    /* Custom Select wrapper */
    .resource__header__item select {
      position: relative;
      display: flex;
      width: 170px !important;
      height: 3em;
      border-radius: .25em;
      overflow: hidden;
      border-radius:10px;
    }
    /* Arrow */
    .resource__header__item select::before {
      content: '\25BC';
      position: absolute;
      top: 0;
      right: 1%;
      padding: 1em; 
      transition: .25s all ease;
      pointer-events: none;
    }
    .resource__search{
      width:100%;
      height:46px;
      padding: 8px 19px 8px 19px;
      border-radius: 10px ;
      background: #F9F9F9;
      border: 2px solid #F1EFEF;
      position: relative;
    }
    .resource__search input{
      width: 80%;
      outline: none;
      background-color: transparent;
      font-family: var(--font-primary);
      font-size: 16px;
      font-weight: 400;
      line-height: 19.2px; 
      padding-left:20px;
    }
    .resource__search i{
      width: 18px;
      height: 18px; 
      border: 1.5px 0px 0px 0px; 
      font-size: 20px;
      position: absolute;
      left: 12px; 
      top: 12%;
    }
    .resource__header__item .grid{
      width:100px;
      height:46px;  
      border-radius:5px ; 
      background: #F9F9F9;
      box-shadow: 0px 0px 8px 0px #0096C32E;
      color: var(--primary-clr);
      font-family: var(--font-secondary);
      font-size: 16px;
      font-weight: var(--fw-normal);
      line-height: 27.2px; 
      transition: all 0.3s;
    }
    .resource__header__item .grid i{  
      font-size:22px;
      color: var(--third-clr);
      margin-right:6px;
    }
    .resource__header__item .grid.active{
        background: var(--third-clr);
        color: var(--white);
    }  
    .resource__header__item .grid.active i{
        color: var(--white);
    }

    .resource__header__item .grid:hover{
      background: var(--third-clr);
      color: var(--white);
  }  
  .resource__header__item .grid:hover i{
      color: var(--white);
  }
  .resource__header .keyword .keyword__item h6{
    font-size: 12px;
    line-height: 18px;
  }
  
  .pagenation__ul li a{
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 400;
    line-height: 22.5px;
    text-align: center;
    color: var(--secondary-clr);
    width: 30px;
    height: 30px; 
    background: #FFFFFF;
    border: 1px solid var(--third-clr);  
    border-radius:4px ; 
    text-align: center;
    line-height:30px;
    margin:auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s; 
  }
  .pagenation__ul li span{
    font-size:35px;
    color: #D9D9D9;
    cursor: pointer;
  }
  .pagenation .pagenation__ul li a:hover{
    background-color:var(--secondary-clr);
  }
  .pagenation .pagenation__ul li a.active{
    color: var(--white);
  }

  .pagenation .pagenation__ul li a.active{
    background-color:var(--secondary-clr);
  }
  .pagenation .pagenation__ul li:hover a{
    color: var(--white);
  }
    /* === main resource section design end here ===  */
/* === RESOURCE PAGE DESIGN END HERE ===  */

/* === resource list page design here  === */
.resource__header .list__card{  
  padding: 24px 19px 24px 19px;
  gap: 10px;
  border-radius: 10px;
  box-shadow: 0px 4px 20px 0px #1723500D;
  background-color: #fff;
}
.title__card__list{
  background: #0096C31A;
}
.resource__header .list__card .card-title{
  flex-basis: 22%;
  flex-direction: column;
}
.list__card  hr{
  border: 1px solid #DBD8D8
}
.resource__header .list__card .card-title .card-head{
  margin-bottom:50px !important;
}
.resource__header .list__card .card-summary{
  flex-basis: 40%;
}
.resource__header .list__card .card-tag{
  align-items: end;
  flex-basis:19%;
}
.resource__header .list__card .body__footer{
  flex-basis: 21%;
  align-content: end;
  flex-direction: column;
}
.resource__header .list__card .card-head{ 
    font-size: 16px;
    line-height: 27.2px; 
}
.bootom__start{
  display: flex;
  justify-content: end;
  flex-basis:100%;
  right:4%;
}
.bootom__end{ 
  flex-basis: 100%; 
}
.resource__header .list__card .user{ 
  flex-basis: 25%; 
}
.resource__header .list__card h4{
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px; 
  color: var(--secondary-clr);
}


/* prodyction page design start here  */
.prodaction__header .user{
 margin-right: 10px;
  
} 
.prodaction__header .more__details{
  width: 153px;
  height:41px; 
  border-radius: 6px;
  background:var(--card-btn);
  color: var(--white);
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: var(--fw-normal);
  line-height: 27.2px;
  transition: all 0.3s;
}
.prodaction__header .more__details:hover{
  background-color: #ef890db4;
}
.production__banner{
  margin-top: 20px;
}
.production__content{
  margin:20px auto;
  margin-top: 0px;
}
.production__content .production__content__item {
  margin-top: 20px;
}
.production__content .production__content__item h1{
  font-family: var(--font-secondary);
  font-size: 36px;
  font-weight: 600;
  line-height: 54px; 
  color: var(--secondary-clr);
}
.production__content .production__content__item h2{
  font-family: var(--font-secondary);
  font-size: 28px;
  font-weight: 600;
  line-height: 44.8px; 
  color: var(--primary-clr);
}
.production__content .production__content__item p{
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 28.8px;
  text-align: justify;
  color: var(--para-clr);
  margin-top: 20px;
}
.production__tags .keyword .keyword__item{
  padding:10px 15px;
}
.production__tags .keyword .keyword__item  h6{
  font-size: 12px;
}
.production__tags .keyword label{
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: var(--fw-primary);
  line-height: 24px; 
  color: var(--primary-clr);
  margin-right: 10px;;
} 
.production__Share .Share .Share_title{
  font-family: var(--font-secondary);
  font-weight: var(--fw-primary);
  color: var(--secondary-clr); 
  font-size: 16px; 
  line-height: 24px;
}
.production__Share .Share ul li{
  margin: auto 5px;
}
.production__Share .Share ul li a img{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
/* production__comment design here  */
.production__comment{
  margin:30px auto;
}
.comment__box{ 
  height: 268px;  
  border: 1px solid #DBD8D8;
  background-color: var(--white);
  border-radius: 5px;
}
.production__comment .comment__title{
  margin-bottom: 20px;
}
.comment__title h1{
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: var(--fw-primary);
  line-height: 38.4px; 
  color: var(--primary-clr)
}
.comment__detail{
  margin-left: 20px;
}
.comment__box .comment__detail .comm__user__name{
  font-family:var(--font-secondary);
  font-size: 20px;
  font-weight: var(--fw-primary);
  line-height: 32px;
  color: var(--para-clr);
}
.comment__box .comment__detail .comm__date{
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: var(--fw-normal);
  line-height: 23.8px; 
  color: #B7B7B7;
}
.comment__box .comment__detail .comm_text{
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px; 
  color: #969595;
  margin-top: 15px;
}
.comm_reply a{
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: var(--fw-primary);
  line-height: 25.6px; 
  color: var(--primary-clr);
}
.comm_reply a img{
  margin-left: 10px;
}
.production__comment__insert .comment__form input,textarea{
  width:100%;
  outline: none;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 28.8px; 
  color: var(--para-clr);
}
.production__comment__insert .comment__form textarea{
  height: 268px; 
  border: 1px ;
  border: 1px solid #DBD8D8;
  background-color: var(--white);
  padding: 20px;
  margin-top: 30px;
  resize: none;
  border-radius: 10px;
}
.production__comment__insert .comment__form input{
  height: 58px; 
  border: 1px;
  border: 1px solid #DBD8D8;
  background-color: var(--white);
  padding: 25px;
  border-radius: 10px;
}
.production__comment__insert .comment__form input[type=submit]{
  transition: all 0.3s;
  width: 204px;
  height:58px;
  padding: 17px 64px 20px 64px;
  border-radius: 6px ; 
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: var(--fw-primary);
  line-height: 24px; 
  color: var(--white);
  background-color: var(--card-btn);
}
.production__comment__insert .comment__form input[type=submit]:hover{
  background-color: #ef890dcb;
}

/* production right side design start here  */
.fillet__search__box input{ 
  background: #F9F9F9;
  border: 2px solid #F1EFEF;
  color:var(--secondary-clr);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px; 
  width: 90%;
}
.production__head h2{
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: var(--fw-normal);
  line-height: 24px; 
  color: var(--secondary-clr);
}
.production__head a{
  width:72px;
  height:30px;  
  border-radius: 5px ;
  border: 1px solid #0096C366;
  background: #F9F9F9;
  font-family: Poppins;
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  text-align: right;
  color: var(--third-clr);
  transition: all 0.3s;
}
.production__head a:hover{
  border: 1px solid var(--third-clr);
  color:var(--third-clr);
}
.fillter .card-head{
  font-size: 18px;
  line-height: 27px;
}
.fillter .card__para{
  font-family: var(--font-primary); 
  line-height: 22.4px; 
}
.fillter .user{
  margin-left: 5px; 
}
.fillter .user:last-child{
  width: auto !important;
}
.fillter .user h6{ 
  font-size: 12px; 
  line-height: 20.4px; 
  margin-left: 5px;
}

.like__pro_text h2{
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 700;
  line-height: 30.6px;
  color: #464646;
}
.like__pro_text h6{
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: var(--fw-normal);
  line-height: 20.4px; 
  color: var(--para-clr);
}
.like .like__count h1{
  font-family: var(--font-secondary);
  font-size: 17px;
  font-weight: var(--fw-primary);
  line-height: 28.9px; 
  color: var(--secondary-clr);
}
.like .like__count h6{
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: var(--fw-normal);
  line-height: 18.7px; 
  color: var(--para-clr);
}
.like__img{
  background: linear-gradient(0deg, #D9D9D9, #D9D9D9),
linear-gradient(0deg, rgba(0, 0, 0, 0.39), rgba(0, 0, 0, 0.39));
/*height: 100%;*/
}
 
.like__img .like__comm{
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.like__img .like__comm h6{
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: var(--fw-normal);
  line-height: 27.2px; 
  color: #C4C4C4;
}
.like__img .like__comm i{
  width: 21px; 
  color: #C4C4C4;

}
.ss__title img{
  width: 17px;
  height: 17.5px; 
  
}
.ss__title h5{
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 16.8px; 
  color: var(--secondary-clr);
  margin: auto 5px;
}
.ss__title h6{
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px; 
  color: var(--para-clr); 
}
.ss .twtter{
  background: #F5F5F5;
  border-radius: 2px;
}
.twtter__des .twtter__user_name{
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 19.2px; 
  color: #424242;
}
.twtter__des .twtter_user__id{
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 14.4px; 
  color: #A4A4A4;
}
.twtter__des .twtter__user__post__text{
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 400;
  line-height: 19.14px;
  color: #363636;
  margin-top:10px;
}
.twtter__des__flex img{
  margin: auto 5px;
  width: 16px;
  height: 16px;
  padding: 2px 1.33px 1.77px 1.33px; 

}
.twtter__time{ 
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 16.8px;
  text-align: right;
  color: #A4A4A4;
  text-wrap: nowrap;
}
.twtter__image__flexs h3{
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 14.4px;
  color: #A4A4A4;
  margin: auto 2px;
}
.twtter__image__gellary img{
  margin: -5px;
}

/* training and education page design here  */
.program__form{  
  border-radius: 10px ; 
  background: #FFFFFF;
  box-shadow: 0px 0px 40px 0px #3350B621; 
  padding:3rem 5rem; 
  z-index: 1111;
} 
.program_section{
  background-color: #F9F9F9;
}
.group_29{
  top:55%;
  left:-1%;  
}
.group_50{
  bottom:8%;
  left:7%;
}
.program__title h2{
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 28.8px; 
  color: var(--primary-clr);
  text-transform: uppercase;
}
.program__form .search__input{ 
  height:70px; 
  padding: 23px 51px 23px 30px;
  border-radius: 8px; 
  background: #0096C30A;
  border: 2px solid #0096C366;
  width: 100%;
  outline: none;
}
.education__select{
 width:32%;
} 
.education__select .select::after{
  display: none;
}
.education__select img{
  width: 20px;
}
.vscomp-ele{
  max-width: 100% ;
  height: 54px;
}
.vscomp-wrapper{
  height: 100%;
}
.vscomp-toggle-button{
  appearance: none;
  outline: 10px red;
  box-shadow: none;
  flex: 1;
  padding: 0 1em; 
    color: var(--secondary-clr);
  background: #F9F9F9;
    background-image: none;
  background-image: none;
  cursor: pointer;
  border: 2px solid #F1F1F1;
  border-radius: 10px;
  font-family: var(--font-secondary);
}
.vscomp-wrapper.focused .vscomp-toggle-button, .vscomp-wrapper:focus .vscomp-toggle-button {
  box-shadow:none !important;
}
.vscomp-value{
  color: var(--secondary-clr);
}
.vscomp-wrapper:not(.has-value) .vscomp-value{
  opacity: 1;
}
.vscomp-toggle-button{
  position: relative;
}
.vscomp-arrow{
  position: absolute;
  background-image: url("image/selectIcon.svg");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px 12px;
  right: 0%;
}
.vscomp-arrow::after {
  display: none;

  position: absolute;
}
.education__select label{
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--fw-primary);
  line-height: 16.8px;
  color: #808080;
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.education__select label img{
  width: 20px;
  height: 20px; 
  margin-right: 10px;
}
.education__select select{
  height: 54px !important;
  width: 100%;
}
.selec .select{
  width:100%;
  height:54px;
  padding: 16px 14px 16px 14px; 
  border-radius: 8px;
  background: #F9F9F9;
  border: 2px solid #F1F1F1 ;
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 400;
  line-height: 21.6px; 
  color: var(--secondary-clr);
  display: block;
}
.program__form form input[type=submit]{
  width:180px; 
  border-radius: 6px;
  background: #EF880D;
  color: var(--white);
  font-family: Poppins;
  font-size: 16px;
  font-weight: 600;
  line-height:60px;
  height:60;   
  transition: all 0.3s;
  border: none !important;
}
.program__form form input[type=submit]:hover{
  background-color: #ef890dc4;
}
 
/* program card design here  */
.program__section__card{
  margin-top: 4rem;
}
.program__section__card .card{
  box-shadow: 0px 0px 20px 0px #1723500D;
  flex-direction: column;
  padding: 2.5rem;
  z-index: 1;
}
.element__number{
  width: 90px;
  height: 72px; 
  border-radius: 4px;
}
.program__element1{
  background: #FDBE752E;
}
.program__element2{
  background: #98FD752E;
}
.program__element3{
  background: #551DCB1A;
}
.element__number h2{
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: var(--fw-primary);
  line-height: 36px; 
}
.program__element1 h2{
  color: var(--card-btn);
}
.program__element2 h2{
  color: #19771D;
}
.program__element3 h2{
  color: #551DCB;
}
.program__section__card .card .program__text__box .card-head{
    color: #01394B;
}
.program__section__card .card .program__text__box .card__para{
  color: var(--para-clr);
  font-size: 13px; 
  line-height: 22.1px; 
  margin-top: 5px;
}

/* === international page design start here === */
.internatinal__body ul li{
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: var(--fw-normal);
  line-height: 22.5px; 
  color: var(--third-clr);
  margin-top: 10px;
}
.internatinal__body ul li span{
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px; 
  color: var(--para-clr); 
  margin-left: 6px;
}
.internatinal__program__items {
  box-shadow: 0px 0px 15px 0px #0096C326;
  border-radius: 5px;
}
/* === international page two design here  === */
.international__immage {
  flex-basis: 22%;
}
.international__title{
  font-family: Poppins;
  font-size: 28px;
  font-weight: 600;
  line-height: 44.8px;
  color: #172350;

}
.international__immage h4{
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: var(--fw-primary);
  line-height: 25.6px; 
  color: var(--white);
}
.international__immage img{
  height: 270px;
  object-fit: cover;
  z-index: -1;
}
.international__head h3{
  font-family: var(--font-secondary);
  font-size: 20px;
  font-weight: var(--fw-primary);
  line-height: 32px; 
  color: var(--third-clr);
}


.nav-link{ 
  height:46px;
  padding: 8px 19px 8px 19px;
  border-radius: 10px ;
  box-shadow: 0px 0px 8px 0px #0096C32E;
  background: #F9F9F9;
  margin: auto 10px;
  transition: all 0.3s;
  border:none
}
.nav-tabs .nav-link{
border-radius: 5px;
transition: all 0.3s;
}
.nav-tabs .nav-link:hover{
  border: 1px solid #0096C366;
  color: #495057;
}
.nav-link{
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--fw-normal);
  line-height: 27.2px;
  color: var(--secondary-clr);
  
}
.nav-tabs .nav-link.active{
  border:1px solid #0096C366 !important;
}

.tablet__show{
  display: none !important;
}

.international__hr{
  border: 1px solid #DBD8D8
}
/* international__table  */
.international__table tr{
  padding:1.5rem;
  display: flex;
}
.international__table tr.grey{
  /*padding: 25px 19px 25px 19px;*/
  border-radius: 4px;
  background: #F1F1F1;

}
.international__table tr.grey {
    padding: 1.5 rem !important;
}
.international__table td.bold{
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: var(--fw-primary);
  line-height: 21.6px; 
  color: var(--secondary-clr);
  width:30%;
}
.international__table td{
  font-family: var(--font-primary); 
  color: var(--secondary-clr); 
  font-size: 16px;
  font-weight: 400;
  line-height: 28.8px; 
  color: var(--secondary-clr);
  width: 60%;
  padding: 20px;
}

.international__table h3{
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: var(--fw-primary);
  line-height: 21.6px; 
  color: var(--secondary-clr); 
  padding: 20px;
}
.international__table p{
  font-family: var(--font-primary); 
  color: var(--secondary-clr); 
  font-size: 16px;
  font-weight: 400;
  line-height: 28.8px; 
  color: var(--secondary-clr); 
  /*padding: 20px;*/
}
.international__banner__contact__head h1{
  font-family: var(--font-secondary);
  font-size: 40px;
  font-weight: 700;
  line-height: 60px; 
  color: var(--primary-clr);
}
.contact__padding{
  padding-top: 5rem;
  padding-bottom: 6rem;
}
.international__banner__contact__head p{
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: var(--fw-normal);
  line-height: 25.5px; 
  color: var(--para-clr);
}
.international__banner__contact__body{
  margin:40px auto;
  margin-top: 20px;
}
.international__banner__contact__body h1{
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: var(--fw-primary);
  line-height: 38.4px; 
  color: var(--third-clr);
}
.international__banner__contact__body h2{
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: var(--fw-normal);
  line-height: 30.6px; 
  color: var(--secondary-clr);
}
.international__banner__contact__links_head{
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: var(--fw-primary);
  line-height: 40.8px; 
  color: var(--secondary-clr);
}
.international__banner__contact__links ul li{
  margin:5px auto;
}
.international__banner__contact__links ul li img{
  width: 18px;
  height: 18px; 
  margin-right:8px;
}
.international__banner__contact__links ul li a{
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: var(--fw-normal);
  line-height: 22.1px;
  color: var(--para-clr);
  margin-left: 7px;
  transition: all 0.3s;
}
.international__banner__contact__links ul li a:hover{
  text-decoration: underline;
}
/* === new page design here  === */
.new__items .new__text a{
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: var(--fw-primary);
  line-height: 22.4px;
  color: var(--primary-clr);
}
.new__items .new__text .date{
  margin-top: 10px;
}
.new__items .new__text .date img{
  width: 13px;
  height: 13px; 
}
.new__items .new__text .date h6{
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: var(--fw-primary);
  line-height: 18.7px; 
  color: var(--para-clr);
  margin-left: 5px; 
}
.card__btn__bg{
  background-color: var(--card-btn);
  color: var(--white);
}
.card__btn img{
  width: 22px;
  height: 22px; 
  margin-top: -4px;
}
.card__btn__bg:hover{
  background-color: #ef890dcc;
  color: var(--white);
}

/* === blog page design here ===  */
.blogPage .prodaction__header .user h6{
  font-size: 14px;
}
.blog__banner{
  background: #01394B;
}
.blog__banner__user__name{
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: var(--fw-primary);
  line-height: 38.4px; 
  color: var(--white);
}
.blog__banner_des{
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 300;
  line-height: 25.2px; 
  color: var(--third-clr);
}
.socal__icon ul li{
  margin: 5px;
  transition: all 0.4s;
}
.socal__icon ul li a:hover img{
  opacity: 0.5;
}
.swiper-button-prev{
  position: absolute;
  color: var(--white);
  width: 62px;
  height:62px; 
  background: #73727245;
  border-radius: 50%;
  font-size: 18px; 
  top:50%; 
  left:-1%;
}
.swiper-button-next{
  position: absolute;
  color: var(--white);
  width: 62px;
  height:62px; 
  background: #73727245;
  border-radius: 50%;
  font-size: 18px;
  top:50%; 
  right: -1%;
}
.swiper-button-next::after{
  content: 'next';
  font-size: 22px;
  font-weight: 800;
}
.swiper-button-prev::after {
  content: 'prev';
  font-size: 22px;
  font-weight: 800;
}
.fevarite{
    background:url(image/white__book.svg);
    cursor: pointer;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
}
.fevarite.active{
  background:url(image/black.svg) !important; 
  cursor: pointer; 
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.comment__user__profile img{
  width: 120px;
  height: 120px;
}
.like__profile img{
  width:60px;
  height: 60px;
}
.resource__center .more__details{
  flex-basis:72%;
}
.new__text  a{
  transition: all 0.3s;
}
.new__text  a:hover{
text-decoration: underline;
}
.card-title a{
  transition: all 0.3s;
}
.card-title a:hover{
  text-decoration: underline;
}
.desktop__margin{
  margin-bottom: 150px;
}
.desktop__margin__lgin{
  margin-bottom: 170px;
}
.login__text__margin{
  margin-top:90px;
}
.login__form .select::after {
  top: 13px;
}
/* === SOME RESPONSIVE CODE HERE === */
   @media(width > 1024px){
    
  nav {
    position: relative; 
    padding-block: 2rem;
    padding-inline: 1rem;
    max-width: var(--max-width);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height:90px !important;
    background-color: transparent;
  }
  .nav__header {
    flex: 1;
    padding: 0;
    background-color: transparent;
  }
  .nav__menu__btn {
    display: none;
  }
  .nav__links {
    position: static;
    padding: 0;
    flex-direction: row;
    background-color: transparent;
    transform: none;
  }
  .nav__links a {
    padding-block: 5px;
    color: var(--primary-clr); 
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 500;
    line-height: 21px; 
  }
  .nav__links a:hover {
    border-color: var(--primary-color);
  }
  .nav__links__btn {
    display: none;
  }
  .nav__btns {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
  }
  .nav__btns .btn__primary {
    color: var(--text-dark);
    background-color: transparent;
  } 
  }
  /*==== responsive code start here ==== */
  @media (max-width: 1068px){
    .register__margin_bottom{
      margin-bottom:0px;
     }
    /* === home page responsive code start here ===  */
    
    .left__hero .box h1{
      font-size: 50px;
      line-height: 70px; 
    }
    .btn__see__more{
      font-size: 16px;
    }
    .title__head {
      font-size: 45px; 
      line-height: 60px; 
    }
    .more__details{
      font-weight: 600;
    }
    .academy__head p {
      font-size: 16px;
      line-height: 27.4px; 
    }
    .academy__left__head{
      font-size: 16px;
    }
    .card__para{
      font-size: 16px;
    }
    .sub__head{
      line-height:69px;
    }
     .nav__menu__btn i{
      color: var(--secondary-clr);
      font-size:30px;
     }
     .nav__links a{
      color: var(--primary-clr);
     }
     .btns:hover{
      background-color: transparent;
     }
     .nav__links {
      position: absolute; 
      right: -100%;
      width: 40%; 
      align-items: initial;
      justify-content: initial;
      flex-direction: column;   
      transition: 0.3s;
      height: 100vh;
      z-index: 999999999999999999;
    }
    .nav__links.open { 
      right: 0%;
    }
    .register__margin_bottom__login{
      margin-bottom:0px;
    }
    .nextPrve .swiper-button-next{
      right: 44.7%;
    }
    .nextPrve .swiper-button-prev {
      left: 47%; 
    }
  }
  @media(max-width:850px){
    /* === home page responsive code here ===  */
    .right__hero{
      text-align: center;
      margin-top:50px;
      margin-bottom: 50px;
    }
    .right__hero img{
      width: 500px !important;
    }
    .middile__image{
      padding-left: 36px;
    }
    .academy__right .green{
      left: -1%;
    }
    .right__education{
      margin-top: 70px;
    }
    .education__position__image.first{
      bottom: -5%;
    }
    .education__position__image.secend{
      left: 1%;
    }
    .education__position__image{
      max-width: 200px;
    }
    /* ==== education__training  ====  */
    .education__training {
      margin-bottom: 50px;
    }
    /* === banner section ===  */
    .banner__24 {
      top: -49%;
      right: 4%;
      width: 220px;
    }
    .home__banner .banner__box h1 { 
      font-size: 36px; 
      line-height: 50px; 
    }
    .banner__btn {
      width: 150px;
      border-radius:7px;
      font-size: 18px;
      font-weight: 600;
      line-height: 41px; 
      height: 57px;
    }
    .btn{
      border-radius: 5px !important;
    }
    .footer .footer__bottom .footer__items .subscribe input{
      border-radius: 5px !important;
      font-size: 14px;
    }
   /* === footer === */
   .footer__items img{
    width: 88px;
   }
   .footer .footer__bottom .footer__items h2{
    font-size: 35px;
   }
   .backgroundIPosition{ 
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top !important;
   }
   .tablet__position{
    left: -1% !important;
    bottom: 15% !important;
    width: 70px !important;
   }
   /* === .mySwiper ===  */
   .mySwiper,.mySwiperOne,.mySwiperTwo{
    padding-bottom: 60px !important;
   }

   /* === training education page responsive code here ===  */
   .bannerss .inner h1{
    font-size: 40px;
    line-height: 60px;
   }
   .program__form{
    padding: 2rem;
   }
   .program__form input{
    border-radius: 5px;
    height: 60px;
   }
   .program__form form input[type="submit"]{
    line-height: 17px;
   }
   .education__select label{
    font-size: 12px;
   }
   .group_50{
    width: 80px;
   }
   .group_29 {
    top: 43%;
    left: 0%;
  }
   select{
    font-size: 15px;
   }

   /* resource page responsive code here ===  */
   .user h6 {
    font-size: 14px;
  }
  .fillter_card_title{
    font-size: 16px;
  }
  .fillter .card form .check__items{
    margin: 10px auto;
  }
  input[type="checkbox"]{
    width: 20px;
    height: 20px;
  }
  input[type="checkbox"]::before {
    width: 10px;
    height: 10px;
  }
  .fillter .card form .check__items label{
    font-size: 14px;
  }

  .tablet__display_block{
    display: block !important;
    width: 45%; 
  }
  .resource__header__item select{
    font-size: 14px;
    height: 46px;
    border-radius: 5px;  
  }
  .tablet__justify__start{
    justify-content: end !important;
    width: 100%; 

  }
  .resource__header__item .grid{
    width:20%;
    height: 45px;
    border-radius: 5px;
    font-size: 14px;
  }
  .resource__search input{
    font-size: 14px;
  }
  .resource__header .list__card h4{
    font-weight: 500;
  }
  .resource__search{
    width: 53%;
    top: 26%;
    right: 2%;
    position: absolute !important;
    border-radius: 5px;
  } 
  .new__search{
    width: 100% !important;
    right: 0;
    top: 0;
  }
  .tablet__justify__start{
    margin-top: 15px;
  }
  .resource__header__item label{
    padding-bottom: 12px;
  }  
  /* ==== resource list page responsive code here ===  */
  .tablet__column{
    flex-direction: column !important;
  }
  .tablet__none{
    display: none !important;
  }
  .tablet__show{
    display: block !important;
    margin:5px 0px;
  }
  .tablet__respon{
    flex-direction: row !important;
  }
  .list__card .card__para {
    margin-bottom: 0px;
    margin-top: 10px;
  }
  .pagenation__ul li a{
    margin-left:5px;
    margin-right: 5px;
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
  .resource__header__item .grid i{
    font-size: 20px;
  }
  .more__details{
    width: 100%;
  }
  .internatinal__btn{
    margin: 15px 0px;
  }
  .tablet__grid{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    margin: 10px auto;
  }
  .bootom__end {
    margin: 15px 0px;;
  }
  .card-head{
    font-size: 16px ;
  }
  .footer__hero .text h2{
    margin-top: 0px !important;
  }
  .desktop__margin,.desktop__margin__lgin{
    margin-bottom: 0px;
  }
  .register__margin_bottom__login{
    margin-bottom: 20px;
  }
  .contact__padding{
    padding-top:0rem;
  }
  .login__section {
    width: 90% !important;
  }
  .nextPrve .swiper-button-prev{
    left: 46.7% ;
  }
  .nextPrve .swiper-button-next{
    right: 44.2% ;
  }
  }
  @media (max-width:768px){
    .fillter .card-head{
      font-size: 16px;
    }
    .production__content{
      margin-top: 20px;
    }
    .card__sub__heading{
      font-size: 12px;
    }
    /* === International Program page responsive code here ===  */
    .banner .inner h1{
      font-size: 35px;
    }
    .international__immage img{
      height: 200px !important;
    }
   
    .international__head .card-head{
      margin-bottom:5px;
    }
    .nav-link{
      font-size: 14px;
    }
    .international__table td.bold{
      font-size: 16px;
    }
    .international__table td{
      font-size: 14px;
    }
    .international__hr{
      margin-top: 10px !important;
      margin-bottom: 10px !important;
    }
    .international__banner__contact__head h1{
      font-size: 30px;
    }
    .international__banner__contact__body{
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .international__banner__contact__body h1{
      font-size: 20px;
    }
    .international__banner__contact__body h2{
      font-size: 14px;
    }
    .international__banner__contact__links_head{
      font-size: 20px;
    }
    .overflow_S{
      overflow-x: auto;
      margin-top: 20px;
    }

    /* === education page responsive cide here ==== */
    .internatinal__body ul li{
      font-size: 14px;
    }
    .internatinal__body ul li span{
      font-size: 14px;
    }
   .nav__links{
    width:50%;
   }
   .register__margin_bottom__login{
    margin-bottom:0px;
  }
  /* === login page responsive code here ===  */
  .footer__form .footer__text{
    font-size: 14px;
  }
  .register__link{
    font-size: 14px;
  }
  .forget__link{
    font-size: 14px;
  }
  .resource__header__item .grid{
    width: 25%;
  }
  .resource__header .list__card .card-title .card-head{
    margin-bottom: 0px !important;
  }
  .je__mobile__center{
    margin-top: 20px;
    margin-bottom:15px;
    justify-content: center !important;
  }
  .education__select{
    width: 100%;
    margin-bottom:30px;
 }
 .tablet__columnss{
  flex-direction: column;
    align-items: start !important;
 }
 .login__form input[type="submit"]{
  margin-top: 30px;
  height: 54px;
  font-weight: var(--fw-normal);
 }
  }
  @media (max-width:648px){
    .nav__links a{
      font-size: 15.4px;
    }
    .nav__links{
      gap:0.7rem
    }
    .nav__links li:last-child{
      margin-top: 25px !important;
    }
    
    .nextPrve .swiper-button-prev {
      left: 44.8%;
      width: 16px;
      height: 16px;
      top: 99.3%;
    }
    .nextPrve .swiper-button-next {
      right: 41%;
      width: 16px;
      height: 16px;
      top: 99.3%;
    }
    .roundedd{
      width: 16px;
      height: 16px;
    }
    /* arrow btn  */
    .arrow-btn{
      right: 15px;
      width: 45px;
      height: 45px;
      line-height: 45px;
    }
    .arrow-btn a i{
      font-size: 20px;
    }
    .nav__links{
      width:55%;
     }
    /* === home page responsive code here ===  */
    .left__hero .box h1{
      font-size: 45px;
      line-height: 55px;
    }
    .btn__see__more{
      margin-top:30px;
    }
    .right__hero{
      text-align: center;
      margin-top:50px;
    }
    .right__hero img{
      width:450px !important;
    }
    .title__head {
      font-size: 30px;
      line-height:45px;
    }
    .groupr__icon{
      width: 100px !important;
      bottom: -11% !important;
    }
    .heading__prara{
      margin-top: 10px;
    }
    .education__training {
      margin-bottom: 40px;
    }
    .mobile__column{
      flex-direction: column;
      align-items: start !important;
    }
    .horzontral{
      margin-top: 15px;
    }
    .horzontral img{
      width: 80px;
    }
    .right__education{
      margin-top:60px;
    }
    .academy__right {
      padding-left: 40px;
    }
    .academy__right .green { 
      left: -0.8%;
    }
    .banner__box {
      width:70% !important;
    }
    .home__banner .banner__box h1 { 
      line-height:40px; 
      font-size: 30px;
      z-index: 999;
    }
    .banner__24 {
      top: -28%;
      right: 8%;
      width: 150px;
    }
    .banner__btn{
      width: 150px;
      border-radius: 5px;
      font-size: 16px;
      font-weight:var(--fw-primary);
    }
    .sub_footer__item.secend { 
      border-left: none;
      border-right: none;
      border-top: 1px solid #777777;
      border-bottom: 1px solid #777777;
    }
    .footer .sub_footer__item .footer__text h1{
      font-size: 15px; 
    }
    .footer__items img{
      width: 70px;
    }
    .nav__logo a img{
      width: 70px;
    }
    .footer .footer__bottom .footer__items h2{
      font-size: 28px;
    }
    .footer .footer__bottom .footer__items .socal__links{
      margin-top:10px;
    }
    .footer .footer__bottom .footer__items .socal__links ul li{
      width: 25px;
      height: 25px; 
    }
    .footer .footer__bottom .footer__items .socal__links ul li a i{
      font-size: 16px;
    }
    /* === international program page responsive code start here ===  */
    .banner .inner h1{
      font-size: 30px;
    }
    .international__immage h4{
      font-size: 14px;
      line-height: 20px;
    }
    .international__immage img{
      height: 150px !important;
    }
    .international__head h3{
      font-size: 18px;
    }
    .list__card .card-head{
      margin-top: 0px !important;
    }
    .card-head { 
      margin-top:10px !important; 
      line-height: 24px;
    }
   .nav-tabs,.tab-content{
    width:700px;
   }
   .like__pro_text {
    margin-left:15px !important;
   }
   /* === taining education page responsive code here ===  */
   .bannerss .inner{
    margin:auto;
   }
   .blog__banner__image img{
    width: 100px;
   }
   .bannerss .inner i{
    margin-top: 0px;
   }
   .program__form{
    padding: 1.5rem;
    padding-bottom: 3rem;
   }
   .bannerss .inner .home{
    font-size: 14px;
   }
   .bannerss .inner h1{
    font-size: 22px;
    line-height: 44px;
   }
   .group_50{
    width: 60px;
   }
   .group_29{
    top: 47%;
   }
   .program__section__card{
    margin-top: 2rem;
   }
   .element__number{
    width: 80px;
    height: 60px;
    margin-bottom: 15px;
   }
   /* === banner section responsive code here ===  */
   .orginal__section .swiper-slide{
    height: 180px;
  }
  .orginal__section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .swiper-button-next,.swiper-button-prev{
    width: 45px;
    height: 45px;
    font-size: 14px;
  }
  /* === footer section respponsive code here ===  */
  .footer .footer__bottom .footer__items p{
    font-size: 14px;
  }
 
  .footer .footer__bottom .footer__items .footer__heading{
    font-size: 16px;
  }
  .footer .footer__bottom .footer__items .links li a{
    font-size: 14px;
  } 
  .footer__start__mobie{
    justify-content: start !important;
  }
  /* === news page responsive code here ===  */
  .new__items  img{
    width: 90px;
    height: 80px;
  }
  .home__banner{
    padding-top:50px;
    padding-bottom:50px;
  }
  .card-head{
    margin-bottom: 15px;
  }
  .middile__image{
    padding-left: 0px !important;
  }
  /* ==== view page responsive coder start here ===  */
  .comment__box .comment__detail .comm__user__name{
    font-size: 16px;
  }
  .production__comment__insert .comment__form input[type="submit"]{
    line-height: 0px;
    width: 130px;
  height: 50px;
  padding: 0px;
  font-size: 14px;
  }
  .production__content .production__content__item h1,.production__content .production__content__item h2{
    font-size: 27px;
    line-height: 36px;
  }
  .production__content .production__content__item p{
    font-size: 14px;
    line-height: 25px;
  }
  .comment__box .comment__detail .comm_text{
    font-size: 12px;
    line-height: 22px;
  }
  .comment__title h1{
    font-size:16px;
  }
  .comm_reply a{
    font-size: 14px;
  }
  .production__tags .keyword label{
    font-size: 14px;
  }
  .production__Share .Share .Share_title{
    font-size: 14px;
  }
  .production__Share .Share ul li a img{
    width: 20px;
    height: 20px;
  }
  .viewss{
    width: 100% !important;
    right: 0 !important;
    top: 0 !important;
  }
  /* ==== contact page responsive code here ===  */
  .moblie__columnss{
    flex-direction: column;
  }
  .moblie__column{
    flex-direction: column;
  }
  .text-start{
    margin-top: 1.5rem !important;
  }
  .right__login__footer .row{
    margin-top: 1.5rem !important;
  }
  .register__heading h1{
    font-size: 25px;
  }
  .login__form input{
    border-radius: 5px;
    font-size: 14px;
    height:50px;
  }
  .login__form textarea{
    border-radius: 5px;
    font-size: 14px;
    height:180px;
  } 
  .btn__submit{
    height: 50px;
    margin-top: 20px;
  }
  .login{
    padding-top: 20px;
  }
  .footer__form{
    margin-bottom: 60px;
  }
  /* === login page responsive code here ===  */
  .login__form{margin-top:40px;}
  .heading{font-size: 25px;}
  .sub__heading{margin-top: 10px;}
  .footer__heading h1{
    line-height: 32px;
  }
  .login__text__margin{
    margin-top: 26px;
  }
  .blog__banner__image{
    text-align: center;
  }
  .blog__banner__text{
    margin-top: 20px;
  }
  .blog__banner__user__name{
    font-size: 18px;
  }
  .registers{
    padding-top:60px !important;
  }
  .program__form  form{
    margin-top:30px;
  } 
  select{
    border-radius: 5px;
  }
  .resource__header .list__card .card-title .card-head{
    font-size: 16px;
  }
  .card__para{
    font-size: 14px;
  }
  .right__login__footer .row{
    height: 100%;
    padding-top:2rem;
    padding-bottom: 2rem;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .moblie__column .col-4{
    width: 100% !important;
    text-align: center;
    margin: auto;
    align-content: center;
    margin-bottom: 15px;
    border-bottom: 0.5px solid #737272bd;
    padding-bottom: 10px;
  }
  .right__login__footer .row .col-4 .icon{
    margin: auto;
  }
  .moblie__column .col-4 h2{
    text-align: center !important;
  }
  .moblie__column .col-4 h6{
    text-align: center !important;
  }
  .login__logo{
    margin-bottom: 15px;
  }
  .login__form{
    margin-top:40px;
  }
  /* === contact page responsive code here ===  */
  .contact__padding{
    padding-top:2rem;
  }
  .backgroundIPosition{
    padding-bottom:1rem !important;
  }
  .keyword .keyword__item{
    padding: 15px 8px;
  } 
  .contact__mobile{
    width: 100% !important;
  }
  .program__form form input[type="submit"]{
    width: 130px;
    padding: 0px;
    height: 54px;
    border-radius: 5px;
    border: none !important;
  }
  .nav__links__btn{
    margin-top:30px !important;
  }
  .group_50{
    bottom: 3%;
    width: 50px;
  }
  .program__form .search__input{
    padding-left: 16px;
    height: 54px;
    border: 1px solid #0096C366;
    border-radius: 5px;
  }
  .program__title h2{
    margin-top: 20px;
    font-size: 20px;
  }
  .molie__group__width{
    width: 70px;
  }
  .banner .inner a{
    font-size: 12px;
  }
  .banner .inner img{
    width: 12px;
  }
  .fillter .user{
    margin-left: 6px !important;
    margin-right: 0px;
  } 
  .mobile_wrap{
    flex-wrap: wrap;
  }
  .fillter .user:first-child{
    margin-left: 0px !important;
  }
  .all__country__list.active{
    height: 200px;
  }
  .sub_footer__item{
    justify-content: start !important;
  }
}
  @media (max-width:475px){
    .nextPrve .swiper-button-next{
      right: 39%;
    }
    .nextPrve .swiper-button-prev{
      left: 43.8%;
    }
    .program__form form input[type="submit"]{
      width:100%;
      height: 53px; 
    }
    .keyword .keyword__item{
      padding: 15px 4px;
    }
    .nav__links{
      width:75%;
     }
    .modlie__between{
      display: flex;
    }
    .academy__right {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    .academy__right .red{
      right: 0%;
    }
    .user img{
      width: 15px;
    }
    .modlie__between .user{
      margin: 0px;
    }
    .modlie__between .user:first-child{
      margin-right: 10px;
    }
    .banner__inner {
      justify-content: end;
    }
    .banner__24{
      right: 0%;
    }
    .banner__box{
      width: 60% !important;
      text-align: center;
    }
    .home__banner .banner__box h1{
      font-size: 20px;
      line-height: normal;
      text-align: center;
      font-weight: var(--fw-normal);
    }
    .moblie__center{
      text-align: center;
    }
    .banner__btn {
      width: 122px;
      font-size: 14px;
      height: 45px;
      line-height: 30px;
    }
    /* === homepage responsive code here ===  */
    .title__head {
      font-size: 20px;
      line-height:34px;
      margin-top: 10px;
    }
    .card__btn{
      font-size: 12px;
    }
    .group__image{
      width: 162px !important;
      top: 45px;
    }
    .academy__right{
      padding-top: 50px;
    }
    .academy__right .green {
      top: 1.8%;
    }
    .middile__image{
      height: 464px !important;
    }
    .academy__right .red{
      bottom: -8.2%;
    }
    .education__position__image.secend {
      bottom: -13%;
      left: -2%;
      z-index: -1;
      width: 100px;
    }
    .groupr__icon{
      left: 1%;
      z-index: -1;
      width: 63px;
      bottom: 2% !important;
    }
    .keyword .keyword__item img{
      width: 13px;
    }
    .keyword .keyword__item h6{
      font-size:9px;
    }
    .right__education p{
      margin-top: 17px;
    }
    .mySwiperTwo,.mySwiperOne,.mySwiper{
      padding-bottom:70px !important;
    }
    .group__image__two{
      bottom: -5% !important;
      left: 1% !important;
      width: 100px !important;
    }
    .sub__head { 
      font-size: 12px; 
      line-height: 20px; 
    }
    .heading__prara { 
      margin: auto;
      font-size: 14px;
      margin-top: 10px;
    }
    .je__mobile__column{
      flex-direction: column !important;
    }
    .je__mobile__center{
      text-align: center;
      justify-content: center !important;
      margin-top: 20px;
      margin-bottom: 15px;
    }
    .select__boxs {
      width:55%;
    }
    .select__boxs .select{
      width:100% !important;
      margin: auto;
      border:1px;
    }
    .resource__header__item select{
      border-radius: 5px;
    }
    .je__mobile__column .see__all {
      margin-top: 30px;
      width: 30%;
      height: 41px;
      font-size: 14px;
      border-radius: 5px;
      line-height: 26.2px;
      margin-top:10px;
    }
    .body__footer .download{
      border-radius: 5px;
    }
    .more__details{
      border-radius: 5px;
      font-size: 12px; 
    }
    /* ==== ============== =========== ==========  */
    .left__hero .box h1 {
      font-size: 30px;
      line-height:44px;
      margin-top: 25px;
    }
    .left__hero .box p{
      line-height: 25px;
      font-size: 14px;
    }
    .mobile__center{
      text-align: center;
    }
    .right__hero img{
      width: 100% !important;
    }
    .btn__see__more {
      margin-top: 25px;
      height: 40px;
      line-height:26px;
      border-radius: 5px;
      font-size: 12px;
      width: 140px;
    }
    .education__training{
      margin-bottom: 30px;
    }
    .academy__head p{
      margin: 0px;
      font-size: 14px;
      margin-top: 10px;
    }
    .academy__head .heading__prara{
      width: 100%;
    }
    .sub_footer__item{
      height: 120px;
    }
    .footer .footer__bottom .footer__items .subscribe input{
      border-radius: 5px;
      font-size: 12px;
    }
    .footer .footer__bottom .footer__items .subscribe input[type="submit"]{
      border-radius: 5px;
    }
    .home__banner{
      padding: 50px 0px;
      padding-bottom: 20px;
    }
    .resource__header__item select{
      font-size: 14px;
    }
    /* ============== ========= = ============= = ===========  */
    .footer__hero .image__box {
      width: 90px;
      height: 43px;
      border-radius: 4px;
      /*padding: 0px;*/
      text-align: center;
      line-height: 40px;
    }
    .footer__hero .image__box img {
      padding: 0px;
      width: 20px;
    }
    .footer__hero .text p{
      margin-top: 5px;
      font-size: 13px;
    }
    /* === footer section ==== */
    .footer .section__container{
      padding-top:1rem;
      padding-bottom:3rem;
    }

    /* === international program page responsive code here ===  */
    .banner{
      height: 200px;
    }
    .banner .inner h2{
      font-size: 14px;
    }
    .banner .inner i{
   margin-top: 1px;
    }
    .banner .inner h1{
      font-size: 22px;
      line-height:35px;
    }
    .internatinal__program__items {
      padding: 1rem !important;
    }
    .internatinal__program__items {
      flex-direction: column;
    }
    .international__head{
      margin-top: 20px;
    }
    .international__head h3{
      font-size: 16px;
    }
    
    .international__immage h4 {
      font-size: 16px;
      line-height: 26px;
    }
    .international__banner__contact__head,.international__banner__contact__body{
      text-align: center;
    }
    .international__banner__contact__body h1{
      font-size: 16px;
    }
    .international__banner__contact__links{
      margin-top: 20px;
    }
    .international__table td.bold{
      font-size: 14px;
    }
    .comment__box{
      height: 100%;
    }
    .comment__user__profile img{
      width:80px;
      height:80px;
    }
    .comment__detail{
      margin-left: 0px;
      margin-top: 15px;
    }
    .comment__box .comment__detail .comm_text{
      margin-top:10px;
    }
    .production__comment__insert .comment__form textarea{
      height: 200px;
      border-radius: 5px;
    }
    .production__comment__insert .comment__form input{
      border-radius: 5px;
    }
    .production__comment__insert .comment__form input:last-child{
      margin-top: 15px;
    }
    .mobile__start{
      justify-content: start !important;
      margin-top: 20px;
    }
    .production__content .production__content__item h1, .production__content .production__content__item h2{
      font-size: 23px;
    }
    .production__content .production__content__item{
      margin-top: 0px ;
    }
    /* === view page responsive code here ===  */
    .moblie__column{
      flex-direction: column;
    }
    /* === contact page responsiv code here ===  */
    .moblie__column{
      justify-content:center;
    }
    
    .moblie__column.minus80{
      margin-top: -80px!important;
    }
    
    .register__heading h1{
      font-size: 20px;
      text-align: center !important;
    }
    .register__heading p{
      font-size: 14px;
      margin-top: 10px;
      text-align: center !important;
    }
    .right__login__footer {
      text-align: center !important; 
    }
    .molie__group__width{
      width: 60px;
    }
    /* === login page rresponsive code here ===  */
    .heading{
      font-size: 20px;
    }
    .sub__heading{
      font-size: 14px;
      margin-top: 5px;
    }
    .right__login__image .right{
      left: 0% !important;
    }
    .right__login__image .top{
      top: -15%;
    }
    .resource__header__item .grid{
      width: 25%;
    }
    .resource__header .list__card .card-title .card-head{
      width: 90%;
    }
    .groupr__icon{
      width: 100px !important;
    }
  }
  
   @media (max-width: 475px) {
    .production__comment__insert .comment__form input:last-child {
        margin-top: -10px !important;
    }
    .mt15px{
        margin-top: 15px !important;
    }
    .section__container.orginal__section.position-relative {
        height: 200px !important;
    }
    
    .d-flex.moblie__column.mtminus100 {
        margin-top: -300px !important;
        margin-bottom: 250px !important;
    }
    .d-flex.moblie__column.mtminus1002 {
        margin-top: -180px !important;
        margin-bottom: 150px !important;
    }
    
    .mob80pc60{
         height: auto; 
         overflow: hidden; 
    }

}

   @media (min-width:1024px){
    .right__login__footer{
      width:90%
    }
   }