/*=====================================================
        IIT HYDERABAD RESEARCH WEBSITE
            responsive.css
                PART - 1

        Breakpoints
        --------------------------
        1400px
        1200px
        992px
======================================================*/


/*=====================================================
            EXTRA LARGE DESKTOPS
            (1400px and below)
======================================================*/

@media (max-width:1400px){

.container{

    width:94%;

}

.hero-content h1{

    font-size:3.5rem;

}

.page-banner h1{

    font-size:3rem;

}

.dean-wrapper{

    grid-template-columns:380px 1fr;

    gap:50px;

}

}


/*=====================================================
                DESKTOPS
            (1200px and below)
======================================================*/

@media (max-width:1200px){

.header-title h1{

    font-size:1.7rem;

}

.header-title h3{

    font-size:.95rem;

}

.navbar ul li a{

    padding:16px 18px;

    font-size:14px;

}

.hero{

    height:80vh;

}

.hero-content{

    width:92%;

}

.hero-content h1{

    font-size:3rem;

}

.hero-content p{

    font-size:1.05rem;

}

.research-wrapper{

    gap:40px;

}

.research-gallery img{

    height:190px;

}

.feature-image img{

    height:280px;

}

.dean-wrapper{

    grid-template-columns:340px 1fr;

}

.metrics-grid{

    grid-template-columns:repeat(3,1fr);

}

.summary-cards{

    grid-template-columns:repeat(2,1fr);

}

.team-grid{

    grid-template-columns:repeat(3,1fr);

}

.stats-grid{

    grid-template-columns:repeat(2,1fr);

}

.card-grid{

    grid-template-columns:repeat(3,1fr);

}

}


/*=====================================================
                LAPTOPS
            (992px and below)
======================================================*/

@media (max-width:992px){

section{

    padding:60px 0;

}

/* Header */

.header .container{

    flex-wrap:wrap;

    gap:20px;

}

.header-left{

    width:100%;

    justify-content:center;

    text-align:center;

}

.header-right{

    width:100%;

    text-align:center;

}

/* Navbar */

.navbar ul{

    flex-wrap:wrap;

    justify-content:center;

}

.navbar ul li a{

    padding:15px 14px;

    font-size:14px;

}

/* Hero */

.hero{

    height:72vh;

}

.hero-content{

    text-align:center;

}

.hero-content h1{

    font-size:2.7rem;

}

.hero-content p{

    margin:auto;

    margin-bottom:30px;

}

.hero-buttons{

    justify-content:center;

}

/* Research Section */

.research-wrapper{

    grid-template-columns:1fr;

}

.research-content{

    order:2;

}

.research-gallery{

    order:1;

}

.research-gallery img{

    height:220px;

}

.feature-image img{

    height:320px;

}

/* Dean */

.dean-wrapper{

    grid-template-columns:1fr;

}

.dean-image{

    max-width:450px;

    margin:auto;

}

.dean-content{

    margin-top:20px;

}

/* Metrics */

.metrics-grid{

    grid-template-columns:repeat(2,1fr);

}

.dashboard-row{

    grid-template-columns:1fr;

}

/* Summary */

.summary-cards{

    grid-template-columns:repeat(2,1fr);

}

.team-grid{

    grid-template-columns:repeat(2,1fr);

}

.stats-grid{

    grid-template-columns:repeat(2,1fr);

}

.highlight-box{

    grid-template-columns:1fr;

}

.quick-facts{

    flex-direction:column;

}

.fact{

    width:100%;

}

.card-grid{

    grid-template-columns:repeat(2,1fr);

}

}


/*=====================================================
        TABLET LANDSCAPE
            (900px and below)
======================================================*/

@media (max-width:900px){

.hero-content h1{

    font-size:2.5rem;

}

.page-banner{

    padding:80px 20px;

}

.page-banner h1{

    font-size:2.5rem;

}

.hero-arrow{

    width:48px;

    height:48px;

}

.hero-prev{

    left:15px;

}

.hero-next{

    right:15px;

}

.metric-number{

    font-size:2.4rem;

}

.summary-card h2{

    font-size:2.4rem;

}

}


/*=====================================================
            TABLET
        (768px and below)
======================================================*/

@media (max-width:768px){

.top-bar .container{

    flex-direction:column;

    gap:10px;

    text-align:center;

}

.header-left{

    flex-direction:column;

}

.header-left img{

    width:70px;

}

.header-title h1{

    font-size:1.5rem;

}

.header-title h3{

    font-size:.9rem;

}

.hero{

    height:65vh;

}

.hero-content h1{

    font-size:2.2rem;

}

.hero-content p{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-buttons .btn{

    width:240px;

}

.research-gallery{

    grid-template-columns:1fr;

}

.feature-image{

    grid-column:span 1;

}

.feature-image img{

    height:240px;

}

.research-gallery img{

    height:220px;

}

.metrics-grid{

    grid-template-columns:1fr;

}

.summary-cards{

    grid-template-columns:1fr;

}

.stats-grid{

    grid-template-columns:1fr;

}

.team-grid{

    grid-template-columns:1fr;

}

.card-grid{

    grid-template-columns:1fr;

}

.dashboard-row{

    grid-template-columns:1fr;

}

.project-table-container{

    overflow-x:auto;

}

.table-container{

    overflow-x:auto;

}

}
/*=====================================================
        IIT HYDERABAD RESEARCH WEBSITE
            responsive.css
                PART - 2

        Mobile Layout
======================================================*/


/*=====================================================
            MOBILE (767px and below)
======================================================*/

@media screen and (max-width:767px){

/*-----------------------------
    GENERAL
------------------------------*/

body{

    font-size:15px;

}

section{

    padding:50px 0;

}

.container{

    width:94%;

}

/*-----------------------------
    NAVBAR
------------------------------*/

.navbar{

    position:sticky;
    top:0;

}

.navbar ul{

    flex-direction:column;

    width:100%;

    align-items:flex-start;

}

.navbar ul li{

    width:100%;

}

.navbar ul li a{

    width:100%;

    padding:14px 20px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.navbar ul li ul{

    position:static;

    width:100%;

    display:none;

    box-shadow:none;

}

.navbar ul li:hover ul{

    display:block;

}

/*-----------------------------
    HERO
------------------------------*/

.hero{

    height:auto;

    min-height:550px;

}

.hero-content{

    position:relative;

    transform:none;

    left:auto;

    top:auto;

    padding:80px 20px;

    text-align:center;

}

.hero-content h1{

    font-size:2rem;

}

.hero-content p{

    font-size:15px;

}

.hero-arrow{

    display:none;

}

/*-----------------------------
    RESEARCH SECTION
------------------------------*/

.research-wrapper{

    display:block;

}

.research-gallery{

    margin-top:30px;

}

.research-gallery img{

    height:220px;

}

/*-----------------------------
    DEAN
------------------------------*/

.dean-wrapper{

    display:block;

}

.dean-image{

    margin-bottom:30px;

}

.dean-content{

    padding:25px;

}

/*-----------------------------
    METRICS
------------------------------*/

.metrics-grid{

    grid-template-columns:1fr;

}

.metric-card{

    padding:25px;

}

.metric-number{

    font-size:2.2rem;

}

/*-----------------------------
    PROJECT SUMMARY
------------------------------*/

.summary-cards{

    grid-template-columns:1fr;

}

.summary-card{

    padding:25px;

}

.summary-card h2{

    font-size:2.3rem;

}

/*-----------------------------
    TABLES
------------------------------*/

.table-container{

    overflow-x:auto;

}

.data-table{

    min-width:900px;

}

.project-table{

    min-width:900px;

}

/*-----------------------------
    SEARCH PANEL
------------------------------*/

.search-grid{

    grid-template-columns:1fr;

}

.search-actions{

    flex-direction:column;

}

.search-actions .btn{

    width:100%;

}

/*-----------------------------
    TOOLBAR
------------------------------*/

.table-toolbar{

    flex-direction:column;

    align-items:stretch;

}

.table-toolbar input{

    width:100%;

}

/*-----------------------------
    FACULTY
------------------------------*/

.faculty-card{

    width:100%;

}

.faculty-image{

    height:250px;

}

/*-----------------------------
    TEAM
------------------------------*/

.team-grid{

    grid-template-columns:1fr;

}

.team-image{

    height:200px;

}

/*-----------------------------
    EQUIPMENT
------------------------------*/

.equipment-card{

    flex-direction:column;

}

.equipment-image{

    width:100%;

    height:230px;

}

/*-----------------------------
    HIGHLIGHT
------------------------------*/

.highlight-card{

    flex-direction:column;

}

.highlight-image{

    width:100%;

    height:230px;

}

/*-----------------------------
    THRUST AREA
------------------------------*/

.thrust-grid{

    grid-template-columns:1fr;

}

/*-----------------------------
    DOCUMENTS
------------------------------*/

.document-grid{

    grid-template-columns:1fr;

}

/*-----------------------------
    DASHBOARD
------------------------------*/

.dashboard-row{

    grid-template-columns:1fr;

}

.dashboard-box{

    padding:25px;

}

/*-----------------------------
    STATS
------------------------------*/

.stats-grid{

    grid-template-columns:1fr;

}

/*-----------------------------
    CTA
------------------------------*/

.cta-buttons{

    flex-direction:column;

}

.cta-buttons .btn{

    width:240px;

}

/*-----------------------------
    FOOTER
------------------------------*/

.footer{

    text-align:center;

}

.footer .container{

    display:block;

}

.footer-widget{

    margin-bottom:35px;

}

.footer-widget ul{

    padding:0;

}

/*-----------------------------
    PAGINATION
------------------------------*/

.pagination{

    gap:6px;

}

.pagination button{

    width:38px;

    height:38px;

}

/*-----------------------------
    PROFILE
------------------------------*/

.profile-card{

    padding:25px;

}

.profile-card img{

    width:120px;

    height:120px;

}

/*-----------------------------
    MODAL
------------------------------*/

.modal-content{

    width:95%;

    padding:25px;

}

/*-----------------------------
    FORM
------------------------------*/

.form-row{

    grid-template-columns:1fr;

}

.form-container{

    padding:25px;

}

}


/*=====================================================
            SMALL MOBILE
        (480px and below)
======================================================*/

@media screen and (max-width:480px){

h1{

    font-size:1.7rem;

}

h2{

    font-size:1.5rem;

}

h3{

    font-size:1.15rem;

}

p{

    font-size:14px;

}

.hero{

    min-height:500px;

}

.hero-content{

    padding:60px 15px;

}

.hero-content h1{

    font-size:1.7rem;

}

.hero-content p{

    font-size:14px;

}

.header-left img{

    width:60px;

}

.header-title h1{

    font-size:1.25rem;

}

.header-title h3{

    font-size:.85rem;

}

.btn{

    width:100%;

}

.metric-number{

    font-size:2rem;

}

.summary-card h2{

    font-size:2rem;

}

.stat h2{

    font-size:2.3rem;

}

.team-image{

    height:230px;

}

.faculty-image{

    height:220px;

}

.equipment-image{

    height:200px;

}

.highlight-image{

    height:200px;

}

.document-card{

    padding:20px;

}

.timeline-item{

    padding-left:50px;

}

.timeline::before{

    left:18px;

}

.timeline-item::before{

    left:8px;

}

}


/*=====================================================
        PRINT SUPPORT
======================================================*/

@media print{

.navbar,
.top-bar,
.hero,
.footer,
.hero-buttons,
.hero-arrow{

    display:none !important;

}

body{

    background:#fff;

}

section{

    padding:10px 0;

}

.card,
.metric-card,
.summary-card{

    box-shadow:none;

    border:1px solid #ccc;

}

}