*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
     --primaryColor:#096B9E;
     --primaryColorHover:#042F5A;
     --secondaryColor:#61AC50;
     --secondaryColorHover:#48803b;
     --textColor:#000000;
     --backgroundColor:#fff;
     --font-size:14px;
     --font-family: "Inter", sans-serif;
     --border-rad:10px;
     --timingfunc:cubic-bezier(.86,.2,.03,.97);
     --border-color:#CFCFCF;
}
@view-transition {
  navigation: auto;
}
html{
     scroll-behavior: smooth;
    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%;
}
pre{
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
}
.center-old{
        top: 50%;
    left: 50%;
    translate: -50% -50%;
}
.overflow-clip{
    overflow: clip;
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid-center{
    display: grid;
    place-items: center;
}
.center{
    text-align: center;
    align-content: center;
}
.sticky-on-pc {
    position: sticky;
    top: 20%;

}

.hide-on-desktop {
    @media (width > 992px) {
        display: none;
    }
}

.hide-on-mobile {
    @media (width < 992px) {
        display: none;
    }
}

.hide-on-sm-mobile {
    @media (width < 376px) {
        display: none;
    }
}

.huge-heading{
    line-height: normal;
    font-family: var(--font-family);
    font-size: 4rem;
    font-weight: bold;
    @media (width < 992px){
        font-size: 3rem;
    }
}
.big-heading{
    font-family: var(--font-family);
    font-size: 3rem;
    font-weight: bold;
    @media (width < 992px){
        font-size: 2rem;
    }
}
.heading{
    
    font-family: var(--font-family);
    font-size: 2rem;
    font-weight: bold;
    @media (width < 992px){
        font-size: 1.5rem;
    }
}
.sub-heading{
    font-family: var(--font-family);
    font-size: 1.5rem;
    font-weight: bold;
    @media (width < 992px){
        font-size: 1.25rem;
    }
}
.style-heading{
    &:first-letter{
        color:var(--primaryColor);
    }
}
.fullvh{
    min-height: 100svh;
}
.vh-30{
min-height: 30svh;
}
.vh-45{
min-height: 45svh;
}
.vh-70{
    min-height: 70svh;
}
.text-theme{
    color: var(--primaryColor);
}
.btn-rounded{
    border-radius: 20px;
    font-size: var(--font-size);
}
.btn-theme{
    font-family: var(--font-family);
        background-color: var(--textColor);
        color: var(--backgroundColor);
    &:hover{
        outline: 1px solid var(--textColor);
        background-color: var(--backgroundColor);
        color: var(--textColor);
        
    }
}
.btn-theme-light{
    font-family: var(--font-family);
        background-color: var(--backgroundColor);
        color: var(--textColor);
    &:hover{
        outline: 1px solid var(--backgroundColor);
        background-color: var(--textColor);
        color: var(--backgroundColor);
    }
}
.nav-bg{
   background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgb(0 0 0 / 48%) 100%);
   backdrop-filter: blur(10px);
}
.bg-theme-primary{
    background-color: var(--primaryColor);
}
.primary-bg{
    background-color: var(--primaryColor);
    color: var(--textColor);
}
.secondary-bg{
    background-color: var(--secondaryColor);
    color: var(--backgroundColor);
}

.secondery-text{
color: var(--secondaryColor);
}
.diffrence{
    mix-blend-mode:difference;
}
.banner-bg{
    background: linear-gradient(45deg, var(--secondaryColor) 52%, var(--primaryColor) 52%, var(--primaryColor) 82%, var(--secondaryColor) 82%);
    animation: banner-bg 10s linear infinite;
    
}
.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:100%;
     border: 0px solid var( --border-color);
    --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;
    transition: all 0.3s ease;
    
    & .small-card-header{
        font-family: var(--font-family);
        width: fit-content;
        background-color: var(--secondaryColor);
        display: grid;
        place-items: center;
        padding: var(--padding);
        text-transform: uppercase;
        color:#fff;
        font-weight: bold;
    }
    & .small-card-content{
        display: grid;
        place-items: center;
    }
    & .small-card-footer{
        font-family: var(--font-family);
        width: 100%;
        background-color: var(--primaryColor);
        margin-left: auto;
        padding: var(--padding);
        color:#fff;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        transition: all 0.3s ease;
    }
    &:hover{
        scale: 1.05;
        outline: 1px solid black;
         & .small-card-footer{
         scale: 1.05;
         box-shadow: 0px -5px 3px #29292988;
    }
    }
}


.big-card{
    width:100%;
    border-radius: 0px;
    box-shadow: 0px 0px 5px #0006;
    --padding:10px;
    --bg-width:-957;
    background: #fff8 url('/assets/img/big-cardbg.png');
    background-size: 100% auto;
    background-repeat: repeat-x;
    background-position-y: bottom;
    background-blend-mode: color-dodge;
    
    animation: footer-anim 20s linear infinite;
    position: relative;
    display: grid;
    & .big-card-header{
        font-family: var(--font-family);
        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{
        font-family: var(--font-family);
        width: fit-content;
        background-color: var(--secondaryColor);
        border-radius: 10px 0px 0px 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;font-family: var(--font-family); }

.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{
        opacity: 1;
    }
    & .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;
    }
}


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

.bg-video { 
    z-index: -1;
    width: 100%;
    height: auto;
    @media (width < 992px) {
    width: auto;
    height: 100%;
    filter: brightness(0.5);
  }
 }

 .hero-bg-theme-primary{
    background-color: var(--primaryColor);
    @media (width < 992px) {
    background-color: transparent;
  }
 }

/*--------------- 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;
    }
}

.flex-wrapper{
    display: flex;
    gap:var(--border-rad);
    min-height: 40vh;
    height: auto;
    @media (width < 992px){
        flex-direction: column;
    }
    & .flex-item{
        padding: var(--border-rad);
        transition: all .3s var(--timingfunc);
       background:linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--primaryColor) 65%) , var(--url,'#000');
        background-repeat: no-repeat;
        background-size: 100% 100%, cover;  
        background-position: 0 40px, center;        
        background-blend-mode: normal;
        flex-grow: 1;
        color:var(--backgroundColor);
        display: flex;
        flex-direction: column;
        justify-content: end;
        text-decoration: none;
        @media (width<992px) {
             
                     
            background-position: 0 00px, center;
                
            min-height: 250px;
        }
         & p{
             font-size: 1rem;
                top:90%;left:5%;
                transition: all .2s var(--timingfunc);
                margin: 0;
                @media (width < 992px){
                font-size: 1rem;
                }
            }
        & .flex-item-btn{
                scale: 0;
                height: 0;
                opacity: 0;
                transition: all .2s var(--timingfunc);
            }
         & .flex-item-desc{
            font-size: 0rem;
            height: 0;
                opacity: 0;
                transition: all .2s var(--timingfunc);
            }
           
        &:hover{
            background-size: 100% 120%, cover;
            background-position: 0 -0px, center;
             @media (width < 992px){
                     background-size: 100% 100%, cover;
            background-position: 0 -0px, center;
                }
            flex-grow: 5;
            
            & p{
                font-size: 2rem;

                @media (width < 992px){
                     font-size: 1rem;
                }
            }
            & .flex-item-btn{
                scale: 1;
                height: auto;
                opacity: 1;
            }
            & .flex-item-desc{
                font-size: 1rem;
                  height: auto;
                opacity: 1;
            }
        }
    }
}


.footer-bg{
    
    color: var(--backgroundColor);
    background:url('/assets/img/footerbg.svg');
    background-repeat:repeat-x; 
    @media (width < 992px) {
        background:url('/assets/img/footerbg.svg');
        background-repeat:repeat-x; 
        background-size: cover;
    }
    animation: footer-anim 5s linear infinite;
    & a{
        color: var(--backgroundColor);
        text-decoration: none;
    }
}





.package-detail-container {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: var(--padding);
  grid-auto-flow: row;
  grid-template-areas:
    "main-content Sidebar"
    "main-content Sidebar"
    "main-content Sidebar"
    "main-content Sidebar"
    "main-content Sidebar"
    "main-content Sidebar"
    "main-content Sidebar"
    "main-content Sidebar";

  @media (width < 992px) {
    display: flex;
    flex-direction: column;
  }
}

.sidebar {
  grid-area: Sidebar;
}

.main-content {
  grid-area: main-content;
}

.sticky-on-pc {
  @media (width > 992px) {
    position: sticky;
    top: 20%;
  }
}
.client-card{
    width: 275px;
    height: 275px;
    box-shadow: 0px -10px 0px var(--primaryColor), 0px 10px 0px var(--secondaryColor);
    overflow: clip;
    & img{
        width: inherit;
        height: inherit;
    }
}
.box-with-arrow{
 margin-block: 10px;
 padding: 10px;
 color: var(--backgroundColor);
  min-width: 159px;
  width:auto;
  height:auto;
  aspect-ratio:1/1;
  background-color:color-mix(in srgb, #2C73C0 var(--color-mix-perc,100%), #61AC50);
  position:relative;
  transition: all 0.3s ease;
  &:hover{
    font-size: 1.25rem;
  }
  @media (width < 992px){
       width: 50%;
      }
  &:not(:last-child){
    &:after{
        color: var(--textColor);
    display:block;
    position:absolute;
    align-content:center;
    right:-30px;
    top:-10px;
    z-index:-1;
    height:100%;
    font-size:4rem;
    content:'\2192';
      @media (width < 992px){
        display:none;
      }
    }
  }
}





::backdrop {
    backdrop-filter: blur(50px);
}
.mouseMoveOrbit{
  transform: rotatex(calc(var(--x) * 0.05deg)) rotatey(calc(var(--y) * -0.05deg));
}
@keyframes scale-down {
    0%{
        scale:1;
    }
    100%{
        scale:0.1;
    }
}
@keyframes banner-bg {
    0%{
        background-position-x: 0px;
    }
    100%{
         background-position-x: 100vw;
    }
}