:root{
  --font-family: "poppins", sans-serif;
  --font-weight: 400;
  --font-style: normal;
  --box-shadow:5px 5px 10px 5px rgba(0,0,0, .1); 
  --box-shadow-hover: 5px 5px 10px 5px rgba(247, 74, 6, 0.301); 
  --border-radius: 12px;
  --border-color: orangered !important;
  --transform: translateY(-2px);
  --transition:  box-shadow .2s ease, transform .2s ease, border-color .2s ease;
 
}

*{
   font-family: var(--font-family);
   font-weight: var(--font-weight);
}


html{
  scroll-behavior: smooth;
}

body{
  margin:0px ! important;
}

main{
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right); 
}

section{
  margin-top:0px ! important; 
}

.container-fluid h1{
	padding-top: 0px;
}

	
.firstSection{
  padding-top:20px ! important;
  padding-bottom:0px;
   
}


.carousel{
	margin-top: -20px !important;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url("images/teachers-training.jpeg");
  background-color: rgba(0,0,0,0.5);
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px;

}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
		
.conT{
   margin-bottom: 70px;
}
	
.conT h1{
	color:black;
	padding-top: 0px;
}
	
.conT p{
	color:black;
}

h1{
    padding-top:0px;
    color:black;
}

.card{
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.card:hover{
    box-shadow: var(--box-shadow-hover);
    transform: var(--transform);
    border-color: var(--border-color);
}

.courseRow{
  margin: auto !important;
}
	
#result{margin-bottom:0px;}

.card-title{
  margin-top: 0px;
  font-size:2vw  ! important;
}
	

#feaT{
  color: black ! important;
}

#course_name{
	font-size:2.1vw !important; 
	margin-top:0px;
	color: black;
    font-weight: bold !important;
}

.btn-info{
  width:100% ! important;
}

.sUb, .fa-cart-plus{
  font-size:1vw !important;
  text-transform:capitalize ! important;
  font-weight:bold ! important;
}

.sUb:hover{
  background: green !important;
  color: white !important;
  font-weight: bold !important;
}

.pRice{
   font-size:1vw !important;  
   font-weight:bold ! important;
}

#pimg{
  width:100% !important;
  height: auto !important;
  margin-top:0px !important;
  border-radius: 5px;
  margin-bottom: 20px !important;
}
	

.subDiv{
    align-content: center;
    align-items: center;
    margin:0px;
    margin-top:100px;
    background: rgb(6,0,6);
    background: linear-gradient(90deg, rgba(6,0,6,1) 0%, rgba(254,128,254,1) 100%, rgba(252,237,226,1) 100%); 
    height:450px;
}



 /*For Desktop View*/

@media screen and (min-device-width: 1025px){

	
.conT{

  h1{
    padding-left: 50px !important;
  }

  p{
    padding-left: 50px !important;
  }

}
	

.courseRow{
  margin: auto;
}

.card{

    p{
        font-size: 1vw !important;
    }
}

#course_name{
	font-size:1.1vw !important; 
}


}


/* For Tablet Landscape View */
@media only screen and (min-device-width: 641px)
and (max-device-width: 1024px) {

}



/* For Tablet Portrait View */
@media only screen and (min-device-width: 421px)
and (max-device-width: 640px) {
	

#result{margin-bottom:0px;}

.conT{
    margin-top:20px;
}

.conT h1{
   font-size: 2.9vw;
   font-weight: 600;
   padding-left: 30px;
   padding-right: 30px;
}   
	
.conT p{
   font-size: 2vw;
   padding-left: 30px;
   padding-right: 30px;
}    

 
.card-deck{
  border-width:0px;
}


.card{
   p{
    font-size: 1.8vw !important;
   }
}
	
#course_name{
	font-size:2.2vw !important;
	margin-top:0px;
}


#course_name{
	margin-top:0px;
	font-size:2.4vw !important;
}

.sUb, .fa-cart-plus{
  font-size:2vw !important;   
}

.pRice{
   font-size:2.1vw !important;    
}


#pimg{
  width:100% !important;
  height: auto !important;
  max-height:80px;
  margin-top:0px !important;
  border-radius: 5px;
  margin-bottom: 5px !important;
}	


}



@media screen and (max-width:420px){
     
.conT h1{
   padding-top:0px;
   font-size:7vw !important;
   color:black;
}

.conT p{
	color:black;
    font-size:3.8vw;
    
}
	  	
#result{
    margin-top:0px;
    margin-bottom:0px;
    
}
	
	
.card{
   p{
    font-size: 3vw !important;
   }
}
	
#course_name{
	font-size:3.8vw !important;
	margin-top:0px;
}

#pimg{
  width:100% !important;
  height: auto !important;
  max-height:220px !important;
  margin-top:0px !important;
  border-radius: 5px;
  margin-bottom: 20px !important;
}		

.fa-cart-plus{
  font-size:4vw !important;
}

.sUb, .pRice{
    font-size:4vw ! important;
}

}