@font-face {
  font-family: 'Droid Serif';
  src:  url('/assets/font/DroidSerif-Regular.woff') format('woff');
    font-weight: normal;
}
@font-face {
  font-family: 'Droid Serif';
  src:  url('/assets/font/DroidSerif-Bold.woff') format('woff');
    font-weight: bold;
}
@font-face {
  font-family: 'Droid Serif';
  src:  url('/assets/DroidSerif-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
@font-face {
  font-family: 'Droid Serif';
  src:  url('/assets/DroidSerif-Italic.woff') format('woff');
   font-weight: normal;
    font-style: italic;
}



:root{
     --primaryColor:#FF9B26;
     --primaryColorHover:#CE8023;
     --secondaryColor:#101828;
     --textColor:#000000;
     --backgroundColor:#fff;
     --font-size:14px;
     --font-family: "Inter", sans-serif;
}
html{
    overflow-x: hidden;
}

body{
    font-size: var(--font-size);
    overflow-x: hidden;
    font-family: var(--font-family);
    background-image: url('/assets/img/bg-image.png');
    background-size: 100%;
}



.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid-center{
    display: grid;
    place-items: center;
}
.center{
    text-align: center;
    align-content: center;
}
.big-heading{
    font-size: 3rem;
    font-weight: bold;
}
.heading{
    font-size: 2rem;
    font-weight: bold;
}
.sub-heading{
    font-size: 1.5rem;
    font-weight: bold;
}

.fullvh{
    min-height: 100svh;
}
.text-theme{
    color: var(--primaryColor);
}
.btn-theme{
        background-color: var(--primaryColor);
        color: var(--backgroundColor);
    &:hover{
        background-color: var(--primaryColorHover);
        color: var(--backgroundColor);
    }
}
.secondary-bg{
    background-color: var(--backgroundColor);
    color: var(--backgroundColor);
    
}
.primary-bg{
    background-color: var(--primaryColor);
}
.image-bg{
    background-image: linear-gradient(#00000000,var(--textColor)),var(--url,none);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
}
/*---------- cards ---------------*/

.small-card{
    width:var(--width,100%);
    border-radius: 10px;
    box-shadow: 0px 0px 50px #0006;
    --padding:10px;
    background: #fff8 url('/assets/img/small-card-bg.jpg');
    background-size: cover;
    background-repeat: repeat-x;
    background-blend-mode: color-dodge;
    position: relative;
    background-position: 0 45px;
    
    display: grid;
    & .small-card-header{
        width: fit-content;
        background-color: var(--primaryColor);
        border-radius: 10px 0px 10px 0px;
        display: grid;
        place-items: center;
        padding: var(--padding);
        text-transform: uppercase;
        color:#fff;
        font-weight: bold;
    }
    & .small-card-content{
        display: grid;
        place-items: center;
        padding:10px;
    }
    & .small-card-footer{
        width: fit-content;
        background-color: var(--primaryColor);
        border-radius: 10px 0px 10px 0px;
        margin-left: auto;
        padding: var(--padding);
        color:#fff;
        font-weight: bold;
        text-decoration: none;
    }
}


.big-card{
    width:100%;
    border-radius: 10px;
    box-shadow: 0px 0px 50px #0006;
    --padding:10px;

    background-color: white;
    position: relative;
    display: grid;
    & .big-card-header{
        width: fit-content;
        background-color: var(--primaryColor);
        border-radius: 10px 0px 10px 0px;
        display: grid;
        place-items: center;
        padding: var(--padding);
        color:#fff;
        font-weight: bold;
    }
    & .big-card-content{
        display: grid;
        place-items: center;
        padding-inline: 20px;
    }
    & .big-card-footer{
        width: fit-content;
        background-color: var(--secondaryColor);
        border-radius: 10px 0px 10px 0px;
        margin-left: auto;
        padding: var(--padding);
        color:#fff;
        font-weight: bold;
        text-decoration: none;
    }
}


.icon-card {  display: grid;
  grid-template-columns: 0.2fr 1.8fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "icon-card-image icon-card-title"
    "icon-card-image icon-card-title"
    "icon-card-image icon-card-desc"
    "icon-card-image icon-card-desc"
    "icon-card-image icon-card-desc";
}

.icon-card-image { 
    display: grid;
        place-items: center;
    grid-area: icon-card-image; }

.icon-card-title { grid-area: icon-card-title; }

.icon-card-desc { grid-area: icon-card-desc; }


.college-card{
    width:100%;
    border: 1px solid var( --border-color);
    border-radius: 10px;
    --padding:10px;
    background: #fff8 url('/assets/img/small-card-bg.jpg');
    background-size: cover;
    background-blend-mode: color-dodge;
    background-position: 0 -0px;
    position: relative;
    display: grid;
    overflow: clip;
    & .college-card-header{
        position: absolute;
        font-family: var(--font-family);
        width: fit-content;
        background-color: var(--secondaryColor);
        border-radius: 10px 0px 10px 0px;
        display: grid;
        place-items: center;
        padding: var(--padding);
        text-transform: uppercase;
        color:#fff;
        font-weight: bold;
    }
    & .college-card-image{
        font-family: var(--font-family);
        width: 100%;
        height: 150px;
        overflow: clip;
        & img{
            width: inherit;
            height: 100%;
            object-fit: cover;

        }
    }
    & .college-card-content{

    }
    & .college-card-footer{
        font-family: var(--font-family);
        width: fit-content;
        background-color: var(--secondaryColor);
        border-radius: 10px 0px 10px 0px;
        margin-left: auto;
        padding: var(--padding);
        color:#fff;
        font-weight: bold;
        text-decoration: none;
    }
}


/*------------------------*/
.hero-grid {  
    display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
}

.content { 
    grid-area: 1 / 1 / 2 / 2; 
    display: grid;
        place-items: center;
    color:var(--backgroundColor);
}

.bg-video { 
    z-index: -1;
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    overflow: hidden;
    & video{
        width:100%;
        filter: brightness(.4);
        @media (width < 992px) {
            width:auto;
            height:100%;
        }
    }
 }

/*--------------- custom class-------------------*/
.grid-container-about {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  @media (width < 992px) {
    display: flex;
    flex-direction: column;
  }
}
.image-section { 
    border:1px solid var(--primaryColor);
    border-radius: 10px;
    grid-area: 1 / 1 / 5 / 5; 
overflow: clip;}

.desc { 
    padding: 1rem;
     border:1px solid var(--primaryColor);
    border-radius: 10px;
    background-color: var(--backgroundColor);
    grid-area: 3 / 4 / 6 / 6; }




.whatsapp-icon{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: forestgreen;
    color: var(--backgroundColor);
    font-size: 2rem;
    display: grid;
    place-content: center;
    & a{
        color: var(--backgroundColor);
        text-decoration: none;
    }
}

.mouseMoveOrbit{
  transform: rotatex(calc(var(--x) * 0.05deg)) rotatey(calc(var(--y) * -0.05deg));
}
@keyframes scale-down {
    0%{
        scale:1;
    }
    100%{
        scale:0.1;
    }
}