1#@!#!123s

https 1#@!#!123s
: / home / u565127238 / domains / stjamesion.edu.pk / public_html / css /
Filename : style.css
back
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.3;
    font-weight: 400;
}
:root{
    --primary-blue:#0071AD;
    --bg-grey:#F3F3F3;
    --bg-orange:#f5d42f;
}
/* Global stylings */
.primary-text-color{color:var(--primary-blue) ;}
.primary-bg-color{color:var(--primary-blue);}

.fs-1{font-size: 1px;}
.fs-2{font-size: 1px;}
.fs-3{font-size: 1px;}
.fs-3{font-size: 1px;}

.heading-1{
    font-size: 30px;
    color: var(--primary-blue);
    font-weight: 700;
}
.home-heading{
    font-size: 25px;
    color: var(--primary-blue);
    font-weight: 700;
    border-bottom: 4px solid var(--bg-orange);
}
.home-heading-2{
    font-size: 35px;
    color: var(--primary-blue);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--bg-orange);
    line-height: 1;
}
.btn-1{
    background-color: var(--primary-blue);
    color: white;
    font-weight: bold;
    font-size: 14px;
    border: none;

}
.blue-btn{
    background-color: var(--primary-blue);
    color: white;
    padding: 8px 12px;
    font-size: 14px;
}
.yellow-btn{
    background-color: var(--bg-orange);
    color: black;
    padding: 8px 12px;
    font-size: 14px;
}
.yellow-btn:hover{
    columns: var(--primary-blue);
    text-decoration: none;
}
.blue-btn:hover{
    text-decoration: none;
    color: var(--bg-orange);
}

@media (min-width:1200px){
    .max-width{
        max-width: 1200px;
        margin: auto;
    }
}

@media (max-width:700px){
    .home-heading-2{
        font-size: 30px;
    }
}

/* -------------- */

/* header styling here */
header{
    width: 100%;
}
.header-top{
    background-color: var(--primary-blue);
    color: white;
    padding: 20px;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
}
.header-logo{
    text-align: center;
    margin: 10px 0 ;
}
.header-logo img{
    width: 400px;
}
.navbar{
    background-color: var(--primary-blue);
}
.nav-item .nav-link{
    color: white !important;
    font-weight: 700;
    text-transform: uppercase;
}
.nav-link:hover{
    color: var(--bg-orange) !important;
}
.dropdown-toggle::after{
    display: none;
}


@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .dropdown-menu{ display: block;  animation: animatedrop .5s; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
    .navbar-collapse{display: flex;justify-content: center;}
}

@media(max-width:450px){
    .header-logo img{width: 250px;}
}
@keyframes animatedrop{
    0%{
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
   
    100%{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

    }
}	
/* ----------- */

/* home carousel css */
.carousel-item {
    width: 100%;
    height: 500px;
}
@media(max-width:732px){
    .carousel-item{
        height: unset;
    }
}

/* home welcome section styling  */
.home-welcome-p{
    font-size: 14px;
    font-weight: bold;
    width: 60%;
    text-align: center;
    font-weight: 400;
}
@media(max-width:500px){
    .home-welcome-p{
        width: 100%;
    }
}
aside{
    display: flex;
    flex-direction: column;
}
/* events and news section  */
.home-news-events{
    background-color:var(--bg-grey);
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
}
.event-cards {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
}
.event-cards div p{
    font-size: 10px;
    line-height:1.1 !important;
    margin: 0;
}

.event-cards div p a{
    background-color: var(--bg-grey);
    color: grey;
}
.event-cards .event-card-head{
    font-size: 14px;
    color: var(--primary-blue);
    font-weight: 700;
    line-height:1.1 !important;
}

.event-cards {
    font-size: 12px;
    font-weight: bold;
}
.event-cards img{
    width: 50%;
}

@media(max-width:1206px){
    .home-heading{
        font-size: 20px;
    }
}
@media(max-width:990px){
    .home-heading{
        font-size: 25px;
    }
    .event-cards .event-card-head{
        font-size: 25px;
    }
    .event-cards div p{
        font-size: 18px;
    }
}
@media(max-width:470px){
    .home-heading{
        font-size: 25px;
    }
    .event-cards .event-card-head{
        font-size: 4vw;
    }
    .event-cards div p{
        font-size: 3vw;
    }
}
/* folow section */
.follow-section{
    background-color: var(--bg-grey);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* flex-grow: 1; */
    
}

.follow-section button{
   width: 100%;
   padding: 10px 0;
}
.follow-section p{
    font-size: 14px;
    color: grey;
}
.follow-section input{
    width: 100%;
    color: rgb(230, 230, 230);
    font-weight: 500;
    background-color: transparent;
    border: 1px solid rgb(223, 223, 223);
    padding: 10px;
    margin-bottom: 10px;
}
.follow-section input::placeholder{
    color: rgb(175, 175, 175);
}
.home-foolow-section{
    flex-grow: 1;
}
@media(max-width:990px){
    .follow-section{
        min-height: 300px;
    }
}
/* home mid section */
.responsive-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.home-mid-bottom{
    background-color: var(--bg-grey);
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.home-mid-bottom h2{
    width: 100%;
}
.home-mid-bottom div{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.home-mid-bottom a {
    padding: 10px;
    text-align: center;
}
.home-mid-bottom a img{
    width: 100%;
}
.home-mid-bottom a p{
    text-align: center;
    color: var(--primary-blue);
    font-weight: 700;
    padding: 0 2px;
    margin: 0;
    font-size: 15px;
    padding-top: 10px;
}
.home-mid-bottom a small {
    color: rgb(41, 41, 41);
    font-weight: 700;
}
.home-mid-bottom a:hover {
    text-decoration: none;
}
    
/* home ads section  */
.home-ads-section img{
    width: 100%;
    height: 100%;
}
.home-ads-section{
    height: 600px;
}

.home-ads-section-2{
    height: 70%;
}

/* orgnization section */
.home-orgnizaion-sec{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home-org-wrapper{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.home-org-wrapper div {
    text-align: center;
    padding: 20px;
}
.home-org-wrapper div img{
    width: 100px;
    min-height: 100px;
}
.home-org-wrapper div p{
    color: #069A66;
    text-align: center;
    padding-top: 5px;
}
/* ---------------- */

/* footer styling */
.footer-parent{
    background-color: var(--primary-blue);
    color: white;
}
.footer-top{
    padding: 40px 0px;
}
.footer-top div h2{
    border-bottom: 4px solid var(--bg-orange);
    width: 100px;
}
.footer-top div p{
 text-align: justify;
 font-size: 13.5px;
 line-height: 1.2;
}
.footer-p{
    line-height: 1.9 !important;
}
.footer-bootom{
    text-align: center;
    border-top:4px solid var(--bg-orange) ;
    padding: 15px;
    font-size: 14.4px;
}

/* academics css */
.margin-p{
    margin-left: -10px;
}

/* admission css */
.admission-table-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    background-color: var(--primary-blue);
    font-size: 19px;
    padding: 7px 10px;
    margin-top: 10px;
}
.admission-table-bottom-parent{
    background-color:rgb(235, 235, 235);
}
.admission-table-bottom-item{
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
    margin: 20px 0;
}
.admission-blue-text{
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 17px;
}


@media (max-width:767px){
    .admission-table-bottom-item{
        flex-direction: column;
    }
    .admission-table-bottom-item div{
        display: flex;
        margin-top: 10px;
    }
}
@media(max-width:352px){
    .admission-table-top{
        font-size: 16px;
    }
}
/* --------- */
 /**section about**/


/**** section massage 1  ****/

.massage-1-image {
    width: 200px;
    height: 200px;
}

@media(max-width:767px) {
    .massage-sec {
        display: flex;
        flex-direction: column;
    }
    .massage-1-image {
        width: 100%;
        height: 200px;
    }
}


/**** section massage 2  ****/

.home-ads-section-massage-2 img {
    width: 100%;
    height: 100%;
}

.home-ads-section-massage-2 {
    height: 930px;
}

.main-heading {
    font-size: 25px;
    color: var(--primary-blue);
    font-weight: 600;
    text-transform: uppercase;
}


/**** section recognization  ****/

.council-main-heading {
    font-size: 40px;
    width: 42%;
    text-transform: uppercase;
    color: var(--primary-blue);
    font-weight: 700;
    border-bottom: 4px solid var(--bg-orange);
}

.heading-council {
    font-size: 22px;
    color: var(--primary-blue);
    font-weight: 600;
    padding-top: 10px;
}

.council-images {
    width: 130px;
}

@media(max-width: 527px) {
    .council-head {
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
}

.g-nav {
    border: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
}

.g-nav li {
    display: flex;
}

.g-tabs {
    font-weight: 500;
    border: 1.9px solid var(--primary-blue);
    padding: 6px 14px;
    margin-right: 6px;
    color: var(--primary-blue) !important;
    margin-top: 5px;
    cursor:pointer ;
}

.g-tabs.active {
    background-color: var(--primary-blue) !important;
    color: white !important;
}

.g-tabs:hover {
    font-weight: 500;
    border: 1.9px solid var(--primary-blue);
    padding: 6px 14px;
    color: white;
    text-decoration: none;
}