@media only screen and (max-width: 768px)
    {
    .mob-button{
        display: flex!important;
    }
    }
      /* The Modal (background) */
    .mob-button p {
        color:#fff;
        width: 100%;
    }
    .mob1, .mob2{
        width:50%;
        text-align: center;
    }
    .mob-button{
    width: 100%;
    height: 70px;
    -moz-box-align: center;
    position: sticky;
    bottom: 0;
    border-top: 1px solid #e6e6e6;
    background-color: #000;
    z-index: 2;
    display: none;
    }
    .pop
    {
        position:sticky;
    }
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    
    /* Modal Content/Box */
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto; /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 30%; /* Could be more or less, depending on screen size */
    }
    
    /* The Close Button */
    .close,.close1,.close2,.close3,.close4  {
      color: #000;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    
    .close:hover,.close:focus,.close1:hover,.close1:focus,.close2:hover,.close2:focus,.close3:hover,.close3:focus,.close4:hover,.close4:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
     @media (max-width: 768px) {
    .modal-content {
        margin: 50% auto;
        width: 80%;
    }
    .banner h1 {
  
     margin-top: 210px !important;
    }
    }
    #about .section-title h3:before {
    left: 30px!important;
    }
    #about .section-title h3:after {
    left: 30px!important;
    }
    #about p {
    padding-top:20px!important;
   }
   
 .tag {
	 background-color: #32c348;
	 filter: drop-shadow(0.2em 0.2em 0 #438f7f);
	 font-size:16px;
	 text-align: left;
	 height: 2.5em;
	 line-height: 2.5em;
	 border-top-right-radius: 0.15em;
	 border-bottom-right-radius: 0.15em;
	 display: inline-block;
	 position: relative;
	 margin-top: 10px;
	 margin-bottom: 10px;
	 margin-left:50px;
}
 .tag::before {
	 border-right-color: #32c348;
}
 .tag::after {
	 box-shadow: inset 0.2em 0.2em 0 #32c3a5;
}
 .tag::before, .tag::after {
	 content: "";
	 position: absolute;
}
 .tag::before {
	 width: 1.875em;
	 border-top: 1.25em solid transparent;
	 border-bottom: 1.25em solid transparent;
	 border-right-style: solid;
	 border-right-width: 1.25em;
	 top: 0;
	 left: -1.875em;
}
 .tag::after {
	 background-color: #fff;
	 width: 0.6em;
	 height: 0.6em;
	 border-radius: 50%;
	 top: 50%;
	 left: -0.4166666667em;
	 margin-top: -0.3em;
}
 .tag-label {
	 font-family: Roboto, Helvetica, Arial, sans-serif;
	 font-weight: 500;
	 color: white;
	 padding: 1rem;
}
.tag--pink {
	 background-color: #e91e63;
	 filter: drop-shadow(0.2em 0.2em 0 #cc1452);
}
.tag--pink::before {
	 border-right-color: #e91e63;
}
 .tag--pink::after {
	 box-shadow: inset 0.2em 0.2em 0 #cc1452;
}

/*BANNER*/
.banner{
width:100%;
height:100vh;
display:flex;
position:relative;
background: linear-gradient(rgba(1,1,1,.5), rgba(1,1,1,.5)), url("../images/b1.jpg");
background-attachment:fixed;
background-size:cover;
background-position:right;
}

.banner .content{
/*height:100%;*/
position:relative;
background-color: transparent;
background-image: linear-gradient(260deg, #132c4b8a 44%, #132c4b96 38%);
transform: skew(20deg);
position:absolute;
left:-9%;
width:60%;
display:flex;
align-items:center;
justify-content:left;
}
.banner .content section{
padding:0 10rem;
transform: skew(-20deg);
width:100%;
color:var(--white);
letter-spacing:0.08em;
z-index:11111111;
}
.banner .btn:hover{
    background:#fff;
    color:#132c4b;
}
.banner h3{
    font-size: 25px;
    margin-bottom: 20px;
    font-weight: 600;
    margin-top: 0;
}
.banner h2 {
    font-size: 40px;
    font-weight: 600;
    color:#fff;
}
.banner h1 {
    font-size: 45px;
    font-weight: 600;
}
.banner{
   overflow: hidden; 
}
.banner h1, .banner p{
    color:#ffcc33;
}
.banner h3{
    color:#ffd921;
}
.banner .btn{
    background:#fc3;
    color:#132c4b;
}
.banner-icon {
    display: inline-block;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}

@media (max-width:1120px){
.banner .content section{
padding:0 8rem;
}
}
@media (min-width:920px){
.banner .content section{
padding: 0 1rem 0 7rem;
margin: 0 0 0 10%;
text-align: left;
}

.banner .content section {
    margin-top: 20px;
    margin-bottom: 20px;
}
}

@media (max-width:920px){
 .banner{
 background-attachment:local;
}
.banner .content{
position:static;
left:0%;
width:100%;
background-image:none;
}
.banner .content section{
padding: 0.5rem 2rem;
text-align: center;
}
.banner h3 {
    font-size: 20px;
    line-height: 20px; 
}
}