* {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
strong{font-weight: bold;}
body{
background: #F0F5FC;
}
/*after::before section header*/
.section-header{
padding-bottom: 60px;
text-transform: uppercase;
text-align: center;
}
.section-header p{
position: relative;
}
.section-header p:before{
content:"";
position: absolute;
top:50%;
right:35%;
background-color: seagreen;
width:120px;
height: 3px;
border-top-left-radius: 2px;
border-bottom-left-radius:2px;
-webkit-transform: translateY(-50%);
-moz-transform:    translateY(-50%);
-ms-transform:    translateY(-50%);
-o-transform:     translateY(-50%);
transform:        translateY(-50%);
}
.section-header p:after{
content:"";
position: absolute;
top:50%;
left:35%;
background-color: seagreen;
width:120px;
height: 3px;
border-top-right-radius: 2px;
border-bottom-right-radius:2px;
-webkit-transform: translateY(-50%);
-moz-transform:    translateY(-50%);
-ms-transform:    translateY(-50%);
-o-transform:     translateY(-50%);
transform:        translateY(-50%);
}
/*responsive after::before start*/
@media only screen and (max-width: 1350px) {
.section-header p:after {
left:30%;
}
}
@media only screen and (max-width: 1350px) {
.section-header p:before {
right:30%;
}
}
@media only screen and (max-width: 850px) {
.section-header p:after {
left:25%;
}
}
@media only screen and (max-width: 850px) {
.section-header p:before {
right:25%;
}
}
@media only screen and (max-width: 670px) {
.section-header p:after {
left:20%;
width:100px;
}
}
@media only screen and (max-width: 670px) {
.section-header p:before {
right:20%;
width:100px;
}
}
@media only screen and (max-width: 450px) {
.section-header p:after {
left:13%;
width:100px;
}
}
@media only screen and (max-width: 450px) {
.section-header p:before {
right:13%;
width:100px;
}
}
@media only screen and (max-width: 350px) {
.section-header p:after {
left:7%;
width:80px;
}
}
@media only screen and (max-width: 350px) {
.section-header p:before {
right:7%;
width:80px;
}
}
/*responsive after::before end*/
.section-header1 p:before{
right:39%;
}
.section-header1 p:after{
left:39%;
}
.section-header p img{
}
.section-padding{
padding: 85px 0px;
}
/*mission vision start*/
.mission-vission h6{
font-size: 25px;
text-align: center;
}
.mission-vission{padding-top: 20px;}
.mission{
max-width: 350px;
text-align: center;
padding:50px;
border:5px solid seagreen;
border-top-left-radius: 30% 50%;
border-bottom-left-radius: 30% 55%;
margin: auto;
color:#fff;
background-image: linear-gradient(to bottom right, blue, green);
}
.vision {
max-width: 350px;
text-align: center;
padding:50px;
border:5px solid seagreen;
border-top-right-radius: 30% 50%;
border-bottom-right-radius: 30% 55%;
margin: auto;
color:#fff;
background-image: linear-gradient(to bottom right, blue, green);
}
.mission-vission p::first-letter {
font-size: 30px;
font-weight: bold;
color: seagreen;
}
@media only screen and (min-width: 992px) {
.vision{
margin-top: 25%;
}
}
.mission-vission p{
font-size: 17px;
text-align: justify;
line-height: 35px;
color:#333;
padding-top:15px;
}
.vision{
padding-top: 45px;
}
/*top bg*/
.top-bg{
background-image: linear-gradient(to bottom right, rgb(14, 113, 0), rgb(73, 175, 243));
padding:20px 0;
text-align: center;
color:white;
margin-top: -60px;
}
.top-bg h2{
font-size:35px;
}
/*about us section style start*/
.about-us{
background-color: #EEEEEE;
background-image: url("../image/about.png");
padding:40px 0px;
position: relative;
background-size: cover;
}
.about-us .section-header{padding-bottom:0px;}
.about-us:before {
content: "";
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
background: rgba(230, 223, 223, 0.9);
}
.about_content p::first-letter {
font-size: 30px;
font-weight: bold;
color: seagreen;
}
.about-us .container{margin-bottom: -20px;}
.about-row h3{
font-size: 30px;
line-height: 40px;
}
.about_content p{line-height: 30px;}
@media only screen and (max-width: 600px) {
.globe {
text-align: center;
}
}
@media only screen and (min-width: 601px) {
.globe {
margin-left: -15px;
}
}
/*sticky start*/
.nav-top{
padding:6px 0;
background: seagreen;
border-bottom: 3px solid lightgray;
animation-duration: 1s;
}
.nav-top a{
color:rgb(235, 235, 235);
transition: 1s;
}
.nav-top a:hover{
color:#00b8d4;
}
.sticky-nav{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 997;
}
nav{box-shadow: none;}
.display-flex{
display: flex;
}
.sticky-hotline a{
margin-right: 10px;
}
.top-social-media{
margin-left: auto;
}
.top-social-media a{
margin-right: 10px;
}
@media only screen and (max-width: 992px) {
.nav-top {
display: none; } }
/*sticky nav style end*/
/*nav style start*/
.nav-hover {
transition: 0.5s ease;
text-decoration: none;
padding: 20px 0;
font-size: 18px;
}
.navbar-nav li:hover{
background-color:#f5f5f5;
}
.navbar-nav li:hover .nav-hover{
border-top: 3px solid seagreen;
border-bottom: 3px solid seagreen;
padding: 6px 0;
color: seagreen;
}
.nav-i-hover i{
transition: 0.5s;
}
.navbar-nav li:hover .nav-i-hover i{
padding: 1px 0;
transform: rotate(360deg);
color:seagreen;
}
/*nav style end*/
/*Nav drop*/
.drop-link-color ul li a{color:seagreen; transition: 0.3s; font-size: 17px;}
.drop-link-color ul li a:hover{
margin-left: 10px;
background: seagreen;
color:#fff;
font-size: 16px;
}
.site-md-logo {
width: 5%; }
.section-wrapper {
margin-top: 70px; }
.row {
margin: 0;
padding: 0; }
@media only screen and (max-width: 992px) {
.site-md-logo {
display: none; } }
@media only screen and (min-width: 992px) {
.ITname {
display: none; } }
.each-section {
margin-top: 50px; }
.about-company p {
font-size: 12px;
line-height: 25px;
color: #95abca; }
/*slider start*/
.swiper-slide img{
height: 450px;
width: 100%;
}
@media only screen and (max-width: 600px) {
.swiper-slide img {
height: 250px; } }
/*service section start*/
#service{
background-color: #F0F5FC;
}
.card-image img{
opacity: 0.7;
transition:1s;
}
.card:hover img{
opacity: 1
}
.single_service{
background-color: #F0F5FC;
}
.single_service img{
margin-top: -23px;
width: 100%;
height: 400px;
}
@media only screen and (max-width: 992px) {
.single_service img{
height: 350px;
}
}
@media only screen and (max-width: 600px) {
.single_service img{
height: 250px;
}
}
.single_service h1{
font-size: 35px;
text-align: center;
margin-bottom: 10px;
}
.single_service p{
font-size: 17px;
line-height: 32px;
text-align: justify;
margin-top: 20px;
}
.single_service p::first-letter {
font-size: 22px;
color:seagreen;
font-weight: bold;
}
@media only screen and (min-width: 600px) {
.service-icon-section{
border-right:3px solid seagreen;
}
}
@media only screen and (min-width: 600px) {
.single_service p{
padding-left: 20px;
}
}
.service-icon{
max-width: 350px;
padding: 100px 0;
border-radius: 50%;
background-image: linear-gradient(to bottom right, blue, green);
border:5px solid seagreen;
text-align: center;
margin: auto;
transition: 1s;
}
.service-icon:hover{
max-width: 400px;
}
.service-icon i{
font-size: 40px;
color:#fff;
transition: 0.5s;
}
/*Service Section start*/
.service .card-image{
background-color: seagreen;
padding:0 60px;
}
/*Website Designed & Developed by-
Md. Anowar Hosen
Software Developer of
PowerWeb IT
email:megamindjony@gmail.com
phone: 01685-235328*/
.service .card-image .card-top-icon{
color:#87c402;
font-size: 20px;
padding:40px 40% 90px 40%;
}
.card-top-icon i{
transition: 1s;
}
.service .card:hover .card-image .card-top-icon i{
border:2px solid #fff;
padding: 15px;
border-radius: 50%;
transform: scale(1) rotate(360deg);
color:#fff;
font-size: 25px;
}
.service .card-content p{
line-height: 30px;
}
.service  .service-row .card span h5{
text-align: center;
font-size: 24px;
font-weight: 300;
color:white;
padding-bottom: 40px;
margin-top: -65px;
}
.service_redius{border-top-right-radius: 10px;}
/*Contact Get In Tuch Style*/
.getintuch i{
font-size: 30px;
color:seagreen;
}
.getintuch span{
font-size: 17px;
color:gray;
margin-left: 15px;
}
.getintuch-wrapper{
margin-bottom: 35px;
}
/*course registration*/
.course_reg option{background: seagreen; color:#fff;}
/*footer section stat*/
.footer-top h6 {
font-size: 15px;
color: white;
text-align: center; }
@media only screen and (max-width: 992px) {
.footer-top h6 {
text-align: left; } }
.footer-top h6 i {
color: white;
background: #0d47a1;
margin-right: 6px;
font-size: 25px;
border: 2px solid white;
padding: 10px;
border-radius: 50%;
transition: 1s; }
.footer-top h6 i:hover {
background: #4caf50;
transform: rotate(360deg); }
/*footer body*/
.footer-body {
background: #1d2b34;/* #266643;*/
padding: 40px 0; }
.footer-body h6{
padding-bottom: 8px;
border-bottom: 1px solid #324653;
}
/* footer social icons start*/
.social-network a.icoFacebook:hover {
background-color: #3B5998; }
.social-network a.icoTwitter:hover {
background-color: #28aae1; }
.social-network a.icoLinkedin:hover {
background-color: #007bb7; }
.social-network a.icoInstagram:hover {
background-color: #fc5147; }
.social-network a.icoFacebook:hover i,
.social-network a.icoTwitter:hover i,
.social-network a.icoInstagram:hover i,
.social-network a.icoLinkedin:hover i {
color: #fff; }
.social-network a.socialIcon:hover,
.socialHoverClass {
color: #44BCDD; }
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
font-size: 15px;
float: left;
margin-right: 15px;
margin-top: 5px; }
.social-circle li i {
margin: 0;
line-height: 30px;
text-align: center; }
.social-circle li a:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s; }
.social-circle i {
color: #595959;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s; }
.social-network a {
background-color: #F9F9F9; }
/*bottom hover*/
.custom-btn {
height: 40px;
color: #fff;
border-radius: 5px;
padding: 25px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
}
/* Submit botton style start*/
.submit-button{
border: none;
background: seagreen;
color: #fff;
overflow: hidden;
}
.submit-button:hover {
text-decoration: none;
color: #fff;
}
.submit-button:before {
position: absolute;
content: '';
display: inline-block;
top: -170px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shiny-btn1 3s ease-in-out infinite;
}
.submit-button:hover{
background:#116f3a;
}
.submit-button:active{
box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.2),
inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}
@-webkit-keyframes shiny-btn1 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
/* Submit botton style end*/
/* footer social icons end*/
.footer-div-y-padding{
padding:15px 0;
}
.social p {
color: white;
font-size: 10px; }
.footer a {
text-decoration: none;
color: #d0cccc;
font-size: 13px; }
.footer ul {
list-style: none; }
.footer ul li a {
font-size: 12px;
transition: .3s; }
.footer .fhml ul li a:hover {
color: seagreen;
margin-left: 7px; }
.footer i {
color: seagreen; }
/*footer bottom*/
.footer-bottom {
background: #222831;/* #125730; *//*146236*/
padding: 15px 0;
border-top: 0.5px solid #fff;
}
.footer-bottom p {
color: #d0cccc;
font-size: 13px;}
.footer-bottom p a {
color: #fd4326;
font-size: 13px; }
.footer-bottom ul li {
display: inline;
padding-right: 5px; }
.footer-address p{
color: #d0cccc;
font-size: 11px;
}
.footer-bottom ul li a {
font-size: 10px; }