/* Tablet styles (landscape and portrait) */

@media (min-width: 768px) and (max-width: 1023px) {

    .container {
        grid-template-areas:
            "header header"
            "navbar navbar"
            "content1 content2"
            "content7 content7"
            "sidebar sidebar"
            "content3 content4"
            "content5 content5"
            "info-content info-content"
            "content6 content6"
            "footer footer"
            "copywrite copywrite";
        grid-template-columns: 2fr 2fr;
        grid-template-rows: auto;
        gap: 5px;
    }

    .header {
        grid-area: header;
    }

    .navbar {
        grid-area: navbar;
    }

    .sidebar {
        grid-area: sidebar;
    }

    .content1 {
        grid-area: content1;
    }

    .content2 {
        grid-area: content2;
    }

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

    .content3 {
        grid-area: content3;
    }

    .content4 {
        grid-area: content4;
    }

    .content5 {
        grid-area: content5;
    }

    .content6 {
        grid-area: content6;
    }

    .content7 {
        grid-area: content7;

    }

    .footer {
        grid-area: footer;
    }

    .copywrite {
        grid-area: copywrite;
    }

    .content2 .gallery {
        margin-left: 50px;
    }

    .content2 .gallery img {
        width: 80%;
    }

    /* Header */

    /* Toggle icon */
    .toggle-bar {
        display: flex;
        justify-content: flex-end;
    }

    .toggle-bar .icon {
        background: none;
        border: none;
        font-size: 50px;
        cursor: pointer;
        color: #1fb7ff;
    }

    .toggle-bar .icon:focus {
        outline: none;
    }

    /* Menu when toggled */
    .navbar #myLinks {
        display: none;
        position: absolute;
        top: 10px;
        /* Adjust as necessary */
        right: 20px;
        background-color: #f7f7f7;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        width: 200px;
        /* Adjust width as necessary */
    }

    .navbar #myLinks a {
        display: block;
        padding: 10px 20px;
        text-decoration: none;
        color: #1fb7ff;
    }

    .navbar #myLinks a:hover {
        background-color: #ff671f;
        color: #f7f7f7;
    }

    /* Active state */
    .navbar .active {
        background-color: #ff671f;
        color: #f7f7f7;
    }

    .navbar a.icon {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
        background-color: #f7f7f7;
        padding: 10px;
        z-index: 2;
    }

    .navbar a.icon:hover {
        background-color: #f7f7f7;
        color: #1fb7ff;
    }



    /*  */




    .content5 ul {
        grid-template-columns: repeat(2, 1fr);

    }

    .content6 {
        grid-template-areas:
            "vihead vihead"
            "Video1 Video2"
            "Video3 Video4";
        grid-template-columns: repeat(2, 1fr);
        /* Three columns for tablet view */
    }

    .whatsapp-chat img {
        width: 50px;
        height: 50px;
    }

    #whatsapp-message {
        width: 200px; /* Adjust width */
        font-size: 14px; /* Adjust font size */
    }

    #send-button {
        padding: 8px 12px; /* Adjust padding */
    }



    .footer-1 {

        grid-template-columns: repeat(2, 1fr);
        /* Adjusting to two columns on tablets */
    }

    .footer-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .navlink-list {
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: none;
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .address {
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .social-footer {
        justify-content: center;
        /* Centering social icons on tablets */
    }

    .social-footer i {
        font-size: 30px;
        /* Adjusting size of social icons on tablets */
    }

    .info-content {
        flex-direction: column;
        align-items: center;
    }

    .info-content .latest-news {
        width: 90%;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "infohead infohead"
            "incon1 incon2"
            "incon3 incon4";
    }




    /* about us */

    .about-container {
        grid-template-areas:
            "abheader abheader abheader"
            "abnavbar abnavbar abnavbar"
            "aboutimage aboutimage aboutimage"
            "aboutus aboutus aboutus"
            "ourteam ourteam ourteam"
            "visionmissionvalues visionmissionvalues visionmissionvalues"
            "abfooter abfooter abfooter"
            "abcopywrite abcopywrite abcopywrite";
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        gap: 5px;
    }

    .about-header {
        grid-area: abheader;
    }

    .about-navbar {
        grid-area: abnavbar;
    }

    .about-image {
        grid-area: aboutimage;
    }

    .about-content {
        grid-area: aboutus;
    }

    .our-team {
        grid-area: ourteam;
    }

    .about-v-m-v {
        grid-area: visionmissionvalues;
    }

    .about-footer {
        grid-area: abfooter;
    }

    .about-copywrite {
        grid-area: abcopywrite;
    }

    /* Header */

    /* Toggle icon */
    .toggle-bar {
        display: flex;
        justify-content: flex-end;
    }

    .toggle-bar .icon {
        background: none;
        border: none;
        font-size: 50px;
        cursor: pointer;
        color: #1fb7ff;
    }

    .toggle-bar .icon:focus {
        outline: none;
    }

    /* Menu when toggled */
    .about-navbar #myLinks {
        display: none;
        position: absolute;
        top: 10px;
        /* Adjust as necessary */
        right: 20px;
        background-color: #f7f7f7;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        width: 200px;
        /* Adjust width as necessary */
    }

    .about-navbar #myLinks a {
        display: block;
        padding: 10px 20px;
        text-decoration: none;
        color: #1fb7ff;
    }

    .about-navbar #myLinks a:hover {
        background-color: #ff671f;
        color: #f7f7f7;
    }

    /* Active state */
    .about-navbar .active {
        background-color: #ff671f;
        color: #f7f7f7;
    }

    .about-navbar a.icon {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
        background-color: #f7f7f7;
        padding: 10px;
        z-index: 2;
    }

    .about-navbar a.icon:hover {
        background-color: #f7f7f7;
        color: #1fb7ff;
    }




    .our-team {
        grid-template-columns: repeat(3, 1fr);
        /* Two columns */
        grid-template-areas:
            "team team"
            "para para"
            "raj laks"
            "nave ram"
            "vig sri";
        padding: 20px;
        /* Adjust padding */
    }

    .our-team h2,
    .our-team .para {
        grid-column: 1 / -1;
        /* Span across all columns */
        text-align: center;
    }

    .profile-card {
        margin-bottom: 20px;
        /* Space between profile cards */
    }


    .about-v-m-v .card-container {
        flex-wrap: wrap;
        gap: 40px;
    }

    .about-v-m-v .card {
        width: calc(50% - 20px);
        /* Two cards per row with gap */
    }


    .about-footer .footer-1 {

        grid-template-columns: repeat(2, 1fr);
        /* Adjusting to two columns on tablets */
    }

    .about-footer .footer-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .about-footer .navlink-list {
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: none;
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .about-footer .address {
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .about-footer .social-footer {
        justify-content: center;
        /* Centering social icons on tablets */
    }

    .about-footer .social-footer i {
        font-size: 30px;
        /* Adjusting size of social icons on tablets */
    }



    /* Acheivements */

    .acheive-container {
        grid-template-areas:
            "acheader"
            "acnavbar"
            "acheive"
            "acfooter"
            "accopywrite";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 5px;
    }

    .acheive-header {
        grid-area: acheader;
    }

    .acheive-navbar {
        grid-area: acnavbar;
    }

    .acheivements {
        grid-area: acheive;
    }

    .acheive-footer {
        grid-area: acfooter;
    }

    .acheive-copywrite {
        grid-area: accopywrite;
    }

    /* Header */

    /* Toggle icon */
    .toggle-bar {
        display: flex;
        justify-content: flex-end;
    }

    .toggle-bar .icon {
        background: none;
        border: none;
        font-size: 50px;
        cursor: pointer;
        color: #1fb7ff;
    }

    .toggle-bar .icon:focus {
        outline: none;
    }

    /* Menu when toggled */
    .acheive-navbar #myLinks {
        display: none;
        position: absolute;
        top: 10px;
        /* Adjust as necessary */
        right: 20px;
        background-color: #f7f7f7;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        width: 200px;
        /* Adjust width as necessary */
    }

    .acheive-navbar #myLinks a {
        display: block;
        padding: 10px 20px;
        text-decoration: none;
        color: #1fb7ff;
    }

    .acheive-navbar #myLinks a:hover {
        background-color: #ff671f;
        color: #f7f7f7;
    }

    /* Active state */
    .acheive-navbar .active {
        background-color: #ff671f;
        color: #f7f7f7;
    }

    .acheive-navbar a.icon {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
        background-color: #f7f7f7;
        padding: 10px;
        z-index: 2;
    }

    .acheive-navbar a.icon:hover {
        background-color: #f7f7f7;
        color: #1fb7ff;
    }

    .acheive-footer .footer-1 {

        grid-template-columns: repeat(2, 1fr);
        /* Adjusting to two columns on tablets */
    }

    .acheive-footer .footer-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .acheive-footer .navlink-list {
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: none;
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .acheive-footer .address {
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .acheive-footer .social-footer {
        justify-content: center;
        /* Centering social icons on tablets */
    }

    .acheive-footer .social-footer i {
        font-size: 30px;
        /* Adjusting size of social icons on tablets */
    }




    /* Events */

    .events-container {
        grid-template-areas:
            "evheader"
            "evnavbar"
            "evheive"
            "evfooter"
            "evcopywrite";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 5px;
    }

    .events-header {
        grid-area: evheader;
    }

    .events-navbar {
        grid-area: evnavbar;
    }

    .events-main {
        grid-area: evheive;
    }

    .events-footer {
        grid-area: evfooter;
    }

    .events-copywrite {
        grid-area: evcopywrite;
    }

    /* Header */

    /* Toggle icon */
    .toggle-bar {
        display: flex;
        justify-content: flex-end;
    }

    .toggle-bar .icon {
        background: none;
        border: none;
        font-size: 50px;
        cursor: pointer;
        color: #1fb7ff;
    }

    .toggle-bar .icon:focus {
        outline: none;
    }

    /* Menu when toggled */
    .events-navbar #myLinks {
        display: none;
        position: absolute;
        top: 10px;
        /* Adjust as necessary */
        right: 20px;
        background-color: #f7f7f7;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        width: 200px;
        /* Adjust width as necessary */
    }

    .events-navbar #myLinks a {
        display: block;
        padding: 10px 20px;
        text-decoration: none;
        color: #1fb7ff;
    }

    .events-navbar #myLinks a:hover {
        background-color: #ff671f;
        color: #f7f7f7;
    }

    /* Active state */
    .events-navbar .active {
        background-color: #ff671f;
        color: #f7f7f7;
    }

    .events-navbar a.icon {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
        background-color: #f7f7f7;
        padding: 10px;
        z-index: 2;
    }

    .events-navbar a.icon:hover {
        background-color: #f7f7f7;
        color: #1fb7ff;
    }

    .events-footer .footer-1 {

        grid-template-columns: repeat(2, 1fr);
        /* Adjusting to two columns on tablets */
    }

    .events-footer .footer-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .events-footer .navlink-list {
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: none;
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .events-footer .address {
        /* Removing border-right for better alignment on tablets */
        padding-bottom: 10px;
        /* Adding padding for spacing */
    }

    .events-footer .social-footer {
        justify-content: center;
        /* Centering social icons on tablets */
    }

    .events-footer .social-footer i {
        font-size: 30px;
        /* Adjusting size of social icons on tablets */
    }



    /* Events Main */

    .events-main {
        display: grid;
        grid-template-areas: "his his" "e1 e2";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 15px;
        text-align: center;
    }

    .header-image-slide {
        grid-area: his;
    }

    #main-donate {
        background-color: #671fff;

    }


}