﻿/*=========================================================
        Windsor Education Responsive Layer v2.0
        This file overrides style.css only.
==========================================================*/


/*==============================
        GLOBAL
===============================*/

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
    overflow-x:hidden;

}

body{
    padding-top: 80px !important;
    /*overflow-x:hidden;*/
    /*width:100%;*

}

img{

    max-width:100%;
    height:auto;
    display:block;

}

.container{

    width:100%;
    max-width:1320px;

}


/*=====================================
        FIXED HEADER
======================================*/

.smart-header{

    min-height:70px !important;
    padding:8px 20px !important;

    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    flex-wrap:nowrap !important;

}


/* Logo */

.smart-header .logo{

    flex-shrink:0;

}

.smart-header .logo img{

    width:auto !important;
    height:60px !important;
    object-fit:contain !important;

}


/*=====================================
        NAVIGATION
======================================*/

.main-nav{

    flex:1;
    display:flex;
    justify-content:flex-end;

}

.main-nav .nav-list{

    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;

}

.main-nav .nav-list li{

    white-space:nowrap;

}


/*=====================================
        DROPDOWN
======================================*/

.dropdown-menu{

    min-width:240px;
    border-radius:12px;

}

.dropdown-menu li{

    width:100%;

}


/*=====================================
        BUTTONS
======================================*/

.btn{

    transition:.35s;

}

.btn:hover{

    transform:translateY(-3px);

}


/*=====================================
        HERO
======================================*/

.hero-section,
.my-hero{

    /*min-height:650px;*/
    /*height:auto;*/

    padding-top:200px !important;
    /*padding-bottom:70px;*/

}

.hero-content{

    transform:none !important;
    margin:auto;

}


/*=====================================
        UNIVERSAL GRID
======================================*/

.facts-grid,
.programme-grid,
.benefit-grid,
.requirement-grid,
.scholarship-grid,
.university-grid{

    display:grid;

    gap:30px;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

}


/*=====================================
        CARD
======================================*/

.fact-card,
.programme-card,
.benefit-card,
.requirement-card,
.scholarship-card{

    height:100%;

}


/*=====================================
        TABLES
======================================*/

table{

    display:block;
    overflow-x:auto;
    width:100%;

}


/*=====================================
        LONG TEXT
======================================*/

p{

    word-break:normal;
    overflow-wrap:break-word;

}

h1,h2,h3,h4{

    overflow-wrap:break-word;

}
/*======================================================
                TABLET
=======================================================*/

@media (max-width:992px){

.smart-header{

    padding:10px 20px;

}

.smart-header .logo img{

    height:70px;

}

/*.main-nav{display:none !important;}*/
/*.mobile-menu-toggle{display:flex !important;
                    align-items:center;
                    justify-content:center;
                    width:40px;
                    height:40 px;
                    font-size: 40 px;
                    color: #fff;
                    cursor: pointer;}*/
.main-nav .nav-list{
    
    gap:0px;

}

.main-nav .nav-list>li>a{

    font-size:.95rem;

}

.hero-section,
.my-hero{

    min-height:auto;
    padding:90px 0;

}

.hero-content h1{

    font-size:3rem;

}

.hero-content h2{

    font-size:2.6rem;

}

.hero-content h3{

    font-size:1.6rem;

}

.hero-content p{

    font-size:1.05rem;

}

}