/*
==================================
SA PSYCHOLOGY BURSARIES
Created by Mmakgotso Tsolo
===================================*/
/*=================================
             RESET
===================================*/
*{
 margin: 0;
 padding: 0;    
 box-sizing: border-box;
  }

/*==================================
        WEBSITE COLOURS
===================================*/
:root {
    --white: #ffffff;
    --sky-blue: #67d9fb;
    --light-grey: #ececec;
    --dark-text: #333333;
    --blue: #4a90e2;
    --blue-hover: #2f6fb8;
}

/*==================================
             BODY
===================================*/
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--white);
    color: var(--dark-text);
    line-height: 1.7;
}

/*==================================
             CONTAINER
===================================*/
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

/*==================================
             HEADER
===================================*/
header {
    background-color: var(--white);    
    text-align: center;
    padding: 20px;
}

/*==================================
             MAIN
===================================*/
main {
    max-width: 1200px;
    min-height: 70vh;
    margin: 0 auto;
    padding: 60px 20px;
}


/*==================================
             NAVIGATION
===================================*/
nav {
    margin-bottom: 40px;
}
nav a {
    text-decoration: none;
    color: var(--dark-text);
    margin: 0 20px;
    font-weight: 600;
    margin: 0 20px;
    transition: 0.3s ease;
}
nav a:hover {
    color: var(--blue);
}

/*==================================
             HEADING 1
===================================*/
h1 {
    font-size: 3rem;
    color: var(--dark-text);
    margin-bottom: 20px;
}

/*==================================
             HEADING 2
===================================*/
h2 {
    font-size: 2rem;
    color: var(--dark-text);
    font-weight: 500;
    text-align: center;
    margin-bottom: 30px;
}   

/*==================================
             PARAGRAPHS           
===================================*/
p {
    font-size: 1rem;
    color: var(--dark-text);
    line-height: 1.8;
    margin-bottom: 25px;
}

/*==================================
             FUNDING SECTION    
===================================*/
.buttons{
    background-color: var(--dark-text);
    padding: 80px 20px;
    text-align: center;
}

/*==================================
             FUNDING CARDS     
===================================*/
.card {
    background-color: var(--white);
    background-image: url("images/brain.svg");
    background-repeat: no-repeat;
    background-position: top 20px right 20px;
    background-size: 50px;
    max-width: 800px;
    margin: 30px auto;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    transition: 0.3s ease, box-shadow 0.3s ease;
}

/*==================================
             CARD HOVER 
===================================*/
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/*==================================
             BUTTONS        
===================================*/
.btn {
    display: inline-block;
    background-color: var(--blue);
    color: var(--white);
    text-decoration: none;
    padding: 30px 15px;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.3s ease;
}

/*==================================
             BUTTON HOVER    
===================================*/
.btn:hover {
    background-color: var(--blue-hover);
    transform: translateY(-2px);


}

/*==================================
             FOOTER
===================================*/
footer {
    background-color: var(--dark-text);
    color: var(--white);
    text-align: center;
    padding: 30px 20px;
    margin-top: 100px;
}
    footer p{
        color: white !important;
        font-size: 20px !important;
        margin: 12px 0;
        line-height: 1.6;
    }

/*==================================
             FOOTER LINKS
===================================*/
footer a{
    color: var(--white);
    text-decoration: none;
    margin: 0 10px;
    transition: 0.3s ease;
}

footer a:hover{
    color: var(--blue);
}

/*==================================
             RESPONSIVE DESIGN
===================================*/
@media (max-width: 768px) {
    h1{
        
        font-size: 2.2rem;
    }
    h2 {
        font-size: 1.6rem;
    }
    .card {
        width: 100%;
    }

    nav a {
        display: block;
        margin: 15px 0;
    }
}

/*==================================
             FINAL POLISH
===================================*/
html {
    scroll-behavior: smooth;
}
img {
    max-width: 100%;
    height: auto;
}
a {
    transition: 0.3s ease;   
}


/*==================================
            LOGO & TITLE 
===================================*/
.logo-title{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 25px;
}
.logo-title .logo{
      width: 60px !important;
      height: 60px !important;
      object-fit: contain;
      background: transparent;
      flex-shrink: 0;
}

.logo-title h1{
       margin-bottom: 10px;
}
.logo-title .tagline{
      margin-top: 10px;
      font-size: 1.1rem;
      color: var(--dark-text);
      font-weight: 500px;
}
.logo-title p{
       margin: o;
}

/*====================================
          INFORMATION PAGES
====================================*/
.info-page{
      background-color: #f4f4f4;
}
.info-page header{
       background-color: var(--dark-text);
       color: var(--white);
       text-align: center;
       padding: 50px 20px;
}
.info-page header p{
        color: var(--white);
}
info-page nav{
        margin-bottom:30px;
        text-align: center;
        padding: 20px 0;
}
.info-page nav a{
         color: var(--white);
         text-decoration: none;
         font-weight: 600;
         margin: 0 18px;
}
.info-page nav a:hover{
    background-color: var(--blue-hover);
    transform: translateY(-3px);
}
info.page main{
        max-width: 1000px;
        margin: 50px auto;
        padding:0 20px;
}
.info-page card{
        background: var(--white);
        border-radius: 15px;
        padding: 40px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}
.info-page h2{
        color: var(--dark-text);
        margin-top: 30px;
}
.info-page hr{
        margin: 30px 0;
        border: none;
        border-top: 1px solid #ddd;
    }

nav a{
        text-decoration: none;
        font-weight: 600;
        margin: 0 8px;
        display: inline-block;
        background-color: var(--blue);
        color: var(--white);
        padding: 12px 22px;
        border-radius: 80px;
        transition: all 0.3s ease;
}

/*==================================
       MOBILE RESPONSIVE FIX
==================================*/
*{
 box-sizing:border-box;
}
html,
body{
    max-width: 100%;
    overflow-x: hidden;
}
body{
    margin:0
}
img{
    max-width: 100%;
    height: auto;
}

/*=====================================
      MOBILE-GENERAL PAGE FIX
======================================*/
@media (max-width:768px) {

    /*Stop desktop spacing from making the page wider*/
     section,
     .card,
     .funding-table{
        max-width: 100%;
     }

     .card{
        margin: 20px 15px;
        padding:25px 20px;
     }
     
     /*Make headings fit the phone*/
     h1{
        font-size: 32px;
        line-height: 1.2;
        word-wrap:break-word
     }
     h2{
        font-size: 28px;
        line-height: 1.25;
     }
     h3{
        font-size: 22px;
        line-height: 1.3;
     }
     p{
        font-size:18px;
        line-height:1.6;
        word-wrap:break-word;
     }

     /*============================
             BRAIN LOGO FIX
     ==============================*/
     .card{
        background-position: center top;
        background-size: 70px;
     }
}

/*================================
    MOBILE RESPONSIVE DESIGN
=================================*/
@media (max-width:768px){
    
/*
---------------------------------------------
STOP THE ENTIRE WEBSITE FROM GOING SIDEWAYS
--------------------------------------------*/
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}
*{
    box-sizing:border-box;
}


/*
-------------------------------------------------
         MOBILE BRAIN/BACKGROUND IMAGE
-----------------------------------------------*/
.card{
    background-size: 25px;
    background-position: right 10px top 10px;
}
}

/*==================================================
                FUNDING SEARCH
==================================================*/

.funding-search {
width: 100%;
max-width: 700px;
margin: 0 auto 35px;
}

.funding-search input {
display: block;
width: 100%;
height: 52px;

padding: o 20px;

box-sizing: border-box;

border: 1px solid #d6d6d6;
border-radius: 12px;

background-color: var(--white);
color: var(--dark-text);

font-family: inherit;
font-size: 16px;

outline: none;

box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.06);

transition: border-color 0.2s ease,
box-shadow 0.2s ease;
}

.funding-search input:focus {
border-color: var(--blue);

box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.12);

}

.funding-search input::placeholder {
color: #888;
}


/*==================================================
             MOBILE FUNDING SEARCH BAR
==================================================*/

@media (max-width: 768px) {

.funding-search {
    width:100%;
    max-width: none;
    margin-bottom: 25px;
}

.funding-search input {
height: 52px;
padding: 0 18px;
font-size: 16px;
}

}

/*==================================================
            PROVIDER FUNDING SECTIONS
==================================================*/

.provider-funding-section {
width: 100%;
max-width: 1100px;
margin: 50px auto;
padding: 0 25px;
}

.provider-funding-section h2 {
text-align: center;
margin-bottom: 20px;
}

.funding-intro {
max-width: 850px;
margin: 0 auto 35px;
text-align: center;
line-height: 1.7;
}


/*==================================================
                 FUNDING CARDS
==================================================*/

.funding-cards {
display: grid;
grid-template-columns: 1fr;
gap: 25px;
}


/*==================================================
              INDIVIDUAL FUNDING CARD
==================================================*/

.funding-card {
background-color: var(--white);

background-image: url("images/brain.svg");
background-repeat: no-repeat;
background-position: right 20px top 20px;
background-size: 70px;

padding: 30px;
border-radius: 15px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

min-width: 0;

transition: transform 0.2s ease,
box-shadow 0.2s ease;
}

.funding-card:hover {
transform: translateY(-3px);

box-shadow: 0 7px 20px rgba(0, 0, 0, 0.12);
}


/*==================================================
                 CARD TEXT
==================================================*/

.funding-card h3 {
margin-top: 0;
margin-right: 80px;
margin-bottom: 10px;

line-height: 1.3;
}

.funding-type {
font-weight: bold;
margin-bottom: 15px;
}

.funding-card p {
line-height: 1.6;
}


/*==================================================
               FUNDING DETAILS
==================================================*/

.funding-details {
margin: 20px 0;
}

.funding-details p {
margin: 6px 0;
}


/*==================================================
               FUNDING BUTTON
==================================================*/

.funding-button {
display: inline-block;

padding: 11px 18px;

border-radius: 8px;

text-decoration: none;

background-color: var(--blue);
color: var(--white);

font-weight: bold;

transition: background-color 0.2s ease;
}

.funding-button:hover {
background-color: var(--blue-hover);
}


/*==================================================
            MOBILE FUNDING CARDS
==================================================*/

@media (max-width: 768px) {

.provider-funding-section {
width: 100%;
padding: 0 15px;
margin: 35px auto;
}

.provider-funding-section h2 {
font-size: 28px;
line-height: 1.3;
}

.funding-intro {
font-size: 16px;
line-height: 1.6;
}

.funding-cards {
grid-template-columns: 1fr;
gap: 20px;
}

.funding-card {
padding: 25px 20px;
background-size: 45px;
background-position: right 12px top 12px;
}

.funding-card h3 {
margin-right: 55px;
font-size: 20px;
}

.funding-card p {
font-size: 16px;
}

.funding-button {
width: 100%;
text-align: center;
}

}