body{text-align: center; vertical-align: middle; font-size: 1.5rem; overflow-x: hidden;}
*{font-family: 'Barlow Semi Condensed';}


nav, nav div a{
    font-size: 16.7px;
    font-weight: 500;
text-decoration: none;
color: #2fa9db;
text-align: center;
margin: auto;
white-space: nowrap;
}
.nav1 div .col{padding-left: 20px; padding-right: 19px;}

.nav2{    min-height: 120px;
    margin: 0 170px 0 170px;
    padding: 20px 0 20px 0;}
    .nav2 a{    text-decoration: none;
        font-size: 1.18rem;
        font-weight: 900;
        color: #343a40;
        padding: 20px 0 0 50px;}

    #spIMG{padding:0 90px 0 0;}

    .search__input{
        height: 37px;
        width: 150px;
        padding: 12px 24px;
        border-radius: 50px;
        border: 1px solid rgb(193, 198, 203);
    }





#SB{
    max-width: 50px !important;
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: 10 !important;
    left: 0 !important;
    top: 50%;
    transform: translateY(-50%);
}
#SB img{max-width: 50px; margin-bottom: 3px;
}


.v-align{    top: 50%;
    transform: translateY(-50%);}










#section1{height: 40vw;}
    #section1 img{position: absolute; max-width: 100%;}
#section1 #on{
    background-color: rgba(47,169,219,.75);
    position: relative;
    left: 200px;
    top: 10vw;
    bottom: 60px;
    width: 39vw;
    max-height: 23vw;
    padding: 60px;
    clip-path: polygon(0 0,calc(100% - 50px) 0,100% 50px,100% 100%,50px 100%,0 calc(100% - 50px));
}
#section1 #on p{    
    font-weight: 700!important;
    font-size: 2.12vw;
    color: #fff!important;
}

.text{    text-align: right!important;
}
.text a{    
    background-color: #ffc107!important;
    color: #fff!important;
    text-decoration: none;
    padding: 10px;
    font-size: 1.5vw;

}

.sec3A{position: absolute;}
.onSec3A{position: relative; z-index: 1;}




#section2 .card{max-width: 20vw !important;}
.navbar-toggler, .navbar-toggler-icon{ border-color: transparent !important;  }

#section2{margin-left: 120px !important; margin-right: 20px;}
#section2, #section5{margin-left: 150px; margin-bottom: 40px;}
#section2 h1, #section5 h1, #section8 h1{
    font-weight: 900!important;
    color: #212529!important;
    font-size: 2rem;
    line-height: 80px;
}
#section2 .card-title{    
color: #2fa9db;
font-weight: 700;
margin-bottom: 0;
white-space: nowrap;
}
#section2 .col{padding-right: 3px !important;}
#section2 .col-md-3 img{
    height: 40px;
margin: 15px 10px 10px 10px !important;}

    #section2 .card{
    text-align: left;}
    #section2 .card-body{padding: 1.05rem !important;}

    #section2 .col-md-3{border-right-color:gainsboro; border-right-style: solid; border-right-width: 0.5px;}
    #section2 .row, #section3 .row, #section6 .row{flex-wrap: nowrap !important;}

.nav2 .nav-item{margin-right: 1.8vw;}
.nav1{padding-top: 5px;}




#section3 .sec3A{ left:10vw;}
.sec3A .card{min-width: 540px; min-height: 300px; z-index: 1;}
.img3{max-height: 550px;}
.sec3A h2{color:#212529; font-weight: 900!important;}

#section3 .card-link{background-color: white;      border-color: gainsboro;
    border-style: solid;
    border-width: 0.5px;}

    #section3 button{color: rgb(135, 135, 135);}
    .input-group span, .input-group input{border-style: none !important;}








    
#section4 .col-md-12{top: 15%;}
#section4 h3{   font-family: "Akshar" !important; font-weight: 300;
    line-height: 1.2;
    font-size: 5rem;
margin: 0;}
#section4 .col-md-4{top: 70%;}
    #section4 img{ width: 40px;}
    #section4 .card{flex-direction: row;
    }
    #section4 .card-group{min-height: 210px !important; margin-bottom: 60px;}
.shad{   box-shadow: 0px -25px 20px -20px lightgray, 0px 25px 20px -20px lightgray;}









#s5a{width: 100%; margin-bottom: 10px;}
#section5 h6{    color: #2fa9db!important;}
#section5 div div h1{  color: #6c757d!important; line-height: 1.15 !important;}
#s51 h1{display: inline-block ;}
#s51 img{max-width: 74px; left: 870px; position: relative;}
#section5 h4{color: #6c757d !important; font-size: 22px;}
.rt .row{margin-bottom: 10px !important;}





#section6 .sec3A{right: 40vw;}
#section6 button{background-color: #2890ba;    color: #fff;     border-style:none;
    max-width: 155px;
    margin-left: 1.25rem;
}







.open-button, .chat-popup, .form-container, .animation, .chatbot{box-sizing: border-box;}

.open-button {
    position: fixed;
    bottom: 23px;
    right: 28px;
    display: inline-block;
    border:0;
    cursor: pointer;
    padding: 0;
    border-radius: 40px;
    z-index: 10;
    /*animated button*/
    box-shadow: rgb(255, 198, 0) -2px -2px 0px 2px, #2fa9db 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 0px 2px 7px;
    transition: all 0.2s;
    }
.open-button:hover{
    box-shadow: #2fa9db -2px -2px 0px 2px, rgb(255, 198, 0) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 0px 2px 7px;
}



.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 11;
}



.form-container {
  width: 400px; /*depends on lex ig*/
  padding: 10px;
  background-color: white; /*to hide button img*/
}
/*remove once integrated*/
.chatbot{ 
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  min-height: 275px;
}
.animation{
    width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  min-height: 200px;
}

/* cancel button looks shitty will change */
.form-container .btn {
  background-color: red;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}






#section7 header div, #section8 header div{
    background-image:url(https://www.ajman.ac.ae/themes/au2021/images/index/academics.jpg);
    padding-top: 300px;
    padding-bottom: 300px;
    overflow: hidden;
    position: relative;
    width: 100%;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;

}

#section7 header h1, #section8 header h1{    
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18vh;
    line-height: 9vh;
    color: #fff!important;
    font-weight: 700!important;
    text-align: center!important;
    white-space: nowrap; 
}

#section7 header, #section8 header{position: relative;

    border-bottom: 5px solid #2fa9db;}



   #section7 .card-title{
        font-weight: 700!important;
        font-size: calc(1.3rem + .6vw)    }


        #section7 .card{ padding: 0; min-width: 416px !important; min-height: 206px !important; border-bottom-style: solid; border-bottom-width: 5px;
        }
        #section8 .card img, #section7 .card img{ min-height:209px;  min-width:175px !important;}

#section7 .row, #section8 .row, #section9 .row{ justify-content: center;}

.c1{ border-bottom-color: #1f4c9b !important; color:#1f4c9b ;}
.c2{ border-bottom-color: #9d9fa2 !important; color:#9d9fa2 ;}
.c3{ border-bottom-color: #f2c83d !important; color:#f2c83d ;}
.c4{ border-bottom-color: #669f3f !important; color:#669f3f ;}
.c5{ border-bottom-color: #ff9a2d !important; color:#ff9a2d ;}
.c6{ border-bottom-color: #8c6e4e !important; color:#8c6e4e ;}
.c7{ border-bottom-color: #13657a !important; color:#13657a ;}
.c8{ border-bottom-color: #8c2132 !important; color:#8c2132 ;}
.c9{ border-bottom-color: #00adeb !important; color:#00adeb ;}







#section8 header div{ background-image:url(https://www.ajman.ac.ae/themes/au2021/images/index/student-life-2022.jpg) !important;}
.s8{margin: 40px 152px 0px 152px; padding-bottom: 40px;}
.s8 img{max-width: 255px; margin-right: 10px; border:lightgray 1px solid;}
#section9 .s8 img, #section8 .s8 img{border-style: none !important;}
.s8 h1{left: -10px;}


#section9 h1{font-weight: bolder; font-size: 30px; color: white; margin-bottom: 20px;}
#section9 .s8{margin: 0px 158px 0px 158px; padding-top: 50px;}
#section9 .s8 img{margin-bottom: 20px; max-width: 252px;}