html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Ubuntu', sans-serif !important;
}

nav {
  -webkit-box-shadow: 0 8px 6px -6px #333;
   -moz-box-shadow: 0 8px 6px -6px #333;
        box-shadow: 0 8px 6px -6px #555;
}

.navbar{
  padding: 0.1rem 1rem;
}

.nav-link{
  color:#314F6D !important;
  margin-left: 20px;
  margin-right: 10px;
  transition: 2s;
}

.nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background:#314F6D;
  padding-top: 2px;
  margin: auto;
  transition: width .5s ease, background-color .5s ease
}

.nav-link:hover::after {
  width: 100%;
}

.light1{
  background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
}

.light{
  background: #ebeeee;
  /* background: #F9F9FF; */
}

section{
  padding-top: 100px;
}

#s1{
  padding-top: 100px;
  padding-bottom: 150px;
}

#s1 .head{
  background: white;
  border-radius: 20px;
}

#s1 .box{
  padding: 25px;
  overflow: hidden;
}

#s1 .box img{
  border-radius: 10px;
  width: 100%;
  height: auto;
  transition: 3s all;
}

#s1 .boxh{
  overflow: hidden;
  border-radius: 10px;
}

#s1 .box img:hover{
  transform: scale(1.2);
}

#s1 .box2{
  padding-top: 80px;
  padding-left: 40px;
  padding-bottom: 30px;
}

#s1 .box2 .first{
  font-size: 20px;
  color: #222222;
  letter-spacing: 1.2px;
}

#s1 .box2 .name {
  font-size: 3vw;
  font-weight: bold;
  line-height: 50px;
  margin-top: 15px;
  letter-spacing: 1px;
  overflow: hidden;
}

#s1 .box2 .about{
  color: #777777;
  font-size: 18px;
}


#s1 .box2 .about2{
  color: #777777;
  font-size: 20px;
  line-height: 40px;
}

#s1 .about2 i{
  padding-right: 18px;
  color: #8880FF;

}

#s1 .contact i{
  padding:4px;
  color: #D4DADE;
  width: 50px;

}

#s1 .contact i:hover{
  color: blue;

}

#s1 .downloadcv a{
  border: 1px solid #D4DADE;
  color: grey;
}

#s1 .downloadcv a:hover{
  background-color: blue;
  color: white;
}


@media (max-width: 768px) {

  #s1{
    padding-top: 70px;
    padding-bottom: 20px;
  }

  #s1 .head{
    border-radius: 0px;
  }

  #s1 .box2 .name {
    font-size: 10vw;
  }

  #s1 .about2 i{
    padding-right: 10px;
  }

  #s1 .box2{
    padding-left: 10px;
  }


}

#s2{
  padding: 50px;
  padding-top: 100px;
  padding-bottom: 150px;

}


#s2 h3{
  font-size: 20px;
  font-weight: normal;
}

#s2 .row{
  padding-top: 30px;
}

#s2 .progress-wrap{
  padding: 10px;
  padding-bottom: 10px;

}

#s3{
  padding-bottom: 100px;
}

#s3 .heading-section{
  padding-top: 50px;
  padding-bottom: 50px;
  color: white;
}

#s3 .tab-pane .list:before {
  content: "";
  height: 100%;
  width: 5px;
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  left: 46%;
  transform: translateX(-50%);
  top: -5px;
}

#s3 .tab-pane .list {
  max-width: 460px;
  margin: auto;
  position: relative;
  padding-top: 40px;
  padding-bottom: 60px;
}

#s3 .tab-pane .list:before {
  content: "";
  height: 100%;
  width: 5px;
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  left: 51%;
  transform: translateX(-50%);
  top: -5px;
}

#s3 .tab-pane .list li {
  margin-bottom: 60px;
  position: relative;
  list-style-type: none;
}

#s3 .tab-pane .list li span {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: block;
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  left: 46%;
  top: 30px;
  transform: translateX(-50%);
}

#s3 .tab-pane .list li span:before {
  content: '';
  height: 7px;
  width: 7px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 52%;
  top: 4px;
  transform: translateX(-50%);
}

#s3 .tab-pane .list li:last-child {
  margin-bottom: 0px;
}

#s3 .tab-pane .list li .media .d-flex {
  width: 57%;
  padding-right: 10%;

}

#s3 .tab-pane .list li .media .media-body h4{
  font-size: 19px !important;
}

#s3 .tab-pane .list li .media .d-flex p {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0px;
  padding-top: 20px;
}

#s3 .tab-pane .list li .media .media-body h4 {
  color: #fff;
  font-size: 21px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

#s3 .tab-pane .list li .media .media-body p {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0px;
}

@media (max-width: 450px){
  #s3 .tab-pane .list:before {
    left:53%;
  }

}

#s3 .outer{
  padding: 20px;
}


#s3 .outer .ach{
  background: white;
  color: black;
  padding: 10px 30px 10px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  cursor: pointer;
}


#s3 .ach .icon{
  display: flex;
  align-items: center;
  justify-content: center;

}

#s3 .hide{
  display: none;
}

#s3 .hidden{
  padding-top: 15px;
  color:#6c757d;
  font-size: 17px;
}

#s3 .btn{
  margin-top: 8px;
  margin-bottom: 8px;
}

#s3 .hide{
  display: none;
}

@media (max-width:326px){
  #s3 .fas{
    display: none;
    width: 0;
    height: 0;
  }
}

.clear{
  clear: both;
}

#s4{
  padding-top: 100px;
  padding-bottom: 100px;
}

#s4 .outerbox{
  padding: 20px;
}

#s4 .outerbox .item{
  width: 100%;
  box-sizing:border-box;
  height: 420px;
}

#s4 .outerbox .item .image{
  width: 100%;
  height: 350px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid black;
}

#s4 .image .icontainer {
  position: relative;
  width: 100%;
}

#s4 .image .img {
  display: block;
  width: 100%;
  height: 350px;
}

#s4 .image .overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: #797EFF;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

#s4 .image .icontainer:hover .overlay {
  bottom: 0;
  height: 100%;
}

#s4 .image .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
}

#s4 .image .bottom{
  bottom: 0;
}

#s4 .item .text2{
  padding-top: 15px;
  text-align: center;
}

#s4 .hide{
  display: none;
}


@media (max-width: 576px){
  #s4 .outerbox{
    padding: 40px;
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media (max-width: 400px){
  #s4 .outerbox{
    padding: 5px;
    padding-left: 30px;
    padding-right: 30px;
  }
}

#s5{
  padding-top: 75px;
  padding-bottom: 100px;
  color: white;
}

#s5 .outer{
  padding: 20px;
}


#s5 .outer .ach{
  background: white;
  color: black;
  padding: 10px 30px 10px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  cursor: pointer;
}


#s5 .ach .icon{
  display: flex;
  align-items: center;
  justify-content: center;

}

#s5 .hide{
  display: none;
}

#s5 .hidden{
  padding-top: 15px;
  color:#6c757d;
  font-size: 17px;
}

#s5 .btn{
  margin-top: 8px;
  margin-bottom: 8px;
}

#s5 .hide{
  display: none;
}

@media (max-width:326px){
  #s5 .fas{
    display: none;
    width: 0;
    height: 0;
  }
}

.clear{
  clear: both;
}

#s6{
  padding-top: 75px;
  padding-bottom: 100px;
}



#s6 .contact{
  display: flex;
  align-items: center;
}

#s6 .col-md-4{
  padding-top: 10px;
  padding-bottom: 10px;
}

#s6 img{
  width: 35px;
  height: 40px;
  margin-right: 15px;
}

#s6 h2{
  text-align: center;+
}

#s6 i {
  margin-right: 15px;
  font-size: 40px;
}

#s6 a:hover{
  cursor: pointer;
  color: blue;
}

@media(max-width:720px){
  #s6 .container2{
    padding-left: 20%;
  }
}

#s7{
  padding-top: 5px;
  padding-bottom: 10px;
  color: white;
  text-align: center;
}