body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.main-container {
    display: flex;
    flex-direction: column;
}

/*@media(max-width: 1024px) {
    .main-container{
        justify-content: center;
    }
}*/

header {
    background: linear-gradient(to right, #06515d, #02182f);
    color: white;
    text-align: center;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .logo {
        height: 6rem;
    }

    h1 {
        font-size: 3.2rem;
        letter-spacing: 2rem;
    }

    nav ul {
        list-style: none;
        padding: 0;
    }

    nav ul li {
        display: inline;
        margin: 0 1rem;
    }

    nav ul li a {
        color: white;
        text-decoration: none;
        line-height: 2rem; /* Adjust the value as needed */
    }

}


@media(max-width: 768px) {

    header {
        display:flex;
        flex-direction: column;
        justify-content:center;

        h1 {
            letter-spacing: 1.6rem;
        }

    }

}


@media(max-width: 480px) {

    header h1 {
        letter-spacing: 1rem;
        font-size: 2.8rem ;
    }

}



.content-container {
    display: flex;
    direction: column;
}

.left-section {
    width: 20%;
    padding: 2rem;
    background: linear-gradient(to right, #06515d, #06515d);
    text-align: center;
    overflow-y: auto;

    .profile-photo {
        width: 70%; /* Ensures the image is responsive */
        height: auto;
        border-radius: 50% / 30%; /* Makes the image oval */
        object-fit: cover; /* Ensures the image covers the container properly */
    }


    .personal-details {
        text-align: left;
    }

    .profile-name {
        margin-top: 1.6rem;
        font-size: 1.6rem;
        font-weight: bold;

    }

    .social-links {
        margin-top: 1.6rem;
        display: flex;
        justify-content: center; /* Center the links horizontally */
        gap: 3.6rem; /* Space between the links */
        flex-wrap: wrap;
    }

    .social-icon {
        width: 3.2rem;
        height: 3.2rem;
        object-fit: contain;
    }

}

@media(max-width: 1024px){
    .left-section{
        display: none;
    }
}


.right-section {
    width:80%;
    padding: 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    .cover-section {
        background-image: url("tech_tree.png");
        background-size: cover;
        background-position: center;
        display: flex-column;
        color: white;
        padding: 4rem;


        .pitch {
            margin-top: 2rem;
            margin-bottom: 2rem;
            display: flex-column;
            justify-content: center;
            align-items: center;


            .pitch-title {
                font-size: 3.2rem;
                font-weight: bold;
                margin-bottom: 0;
            }

             @media(max-width: 1024px){
                .pitch-title{
                    font-size: 2.8rem;
                }
            }

            @media(max-width: 768px){
                .pitch-title{
                    font-size: 2rem;
                }
            }

            @media(max-width: 480px){
                .pitch-title{
                    font-size: 2rem;
                }
            }

            .pitch-subtitle {
                font-size: 1.6rem;
                margin-top: 0.5rem;
            }


            @media(max-width: 768px){
                .pitch-subtitle{
                    font-size: 1.4rem;
                }
            }

            @media(max-width: 480px){
                .pitch-subtitle{
                    font-size: 1rem;
                }
            }

        }

    }

    @media(max-width: 1024px){
        .cover-section{
            padding: 3rem;
        }
    }

    @media(max-width: 768px){
        .cover-section{
            margin-top: 2rem;
            padding: 2rem;
        }
    }

    @media(max-width: 480px){
        .cover-section{
            padding: 1rem;
        }
    }

    .profile-outline-section {
        border: 0.15rem solid #009AF0; 
        background: linear-gradient(to right, #e0f2f1, #80cbc4);
        margin-top: 2rem;
        padding: 2rem;  
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px; 
        display: none;
        transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
        cursor: pointer; /* Change cursor to pointer on hover */

        .section-left{
            width: 25%;
            display: flex-column;
            justify-content: center;
            align-items: center;

            .profile-photo-mobile {
                height: 12rem;
                border-radius: 50% / 30%; /* Makes the image oval */
                object-fit: cover; /* Ensures the image covers the container properly */
            }

            .personal-details {
                text-align: left;
            }

            .profile-name {
                text-align: center;
                margin-top: 1.2rem;
                font-size: 0.8rem;
                font-weight: bold;

            }

            .social-links {
                margin-top: 1.6rem;
                display: flex;
                justify-content: center; /* Center the links horizontally */
                gap: 3.6rem; /* Space between the links */
                flex-wrap: wrap;
            }

            .social-icon {
                width: 3.2rem;
                height: 3.2rem;
                object-fit: contain;
            }
        }

        .personal-details {
            margin-left: 1.6rem;
        }
    }



    @media(max-width: 1024px){
        .profile-outline-section{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 1.2rem;
            margin-top: 2rem;
            margin-right: 1.2rem;
            padding: 1.2rem;  
        }
    }


    .programs-section {
        display:flex-column;


        .our-programs {
            padding: 2rem;
            font-size: 4rem;
            color: #00A75D ;
        }

        @media(max-width: 768px){
            .our-programs{
                font-size: 3.2rem;
                padding: 1.6rem;
            }
        }

        @media(max-width: 480px){
            .our-programs {
                font-size: 2.8rem;
                padding: 1.6rem;
            }
        }

        .program-outline {
            border: 0.15rem solid #009AF0; 
            background: linear-gradient(to right, #e0f2f1, #80cbc4);
/*            background: linear-gradient(to right, #e1bee7, #ce93d8);*/
/*            background: linear-gradient(to right, #ffd1dc, #ff8a80);*/
/*            background: linear-gradient(to right, #e0f7fa, #80deea);*/
/*            background: linear-gradient(to right, #ffe0b2, #ffab91);*/
            padding-left: 2rem;  
            padding-right: 2rem;
            border-radius: 8px; 
            margin-bottom: 2rem;
            transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
            cursor: pointer; /* Change cursor to pointer on hover */
        }

        
        /* Hover effects */
        .program-outline:hover {
            transform: scale(1.05); /* Slightly enlarge the container */
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
        }

        .program-name {
            text-align: center;
            color:#f43151;
            font-size: 2.4rem;
            font-weight: bold;
        }

        .program-title {
            font-weight: bold;
            font-size: 1.6rem;
        }

        .program-description {
            font-size: 1.2rem;
        }


        @media(max-width: 480px){
            .program-name{
                font-size: 2rem;
            }

            .program-title {
                font-size: 1.2rem;
            }

            .program-description {
                font-size: 1rem;
            }
        }


        .program-cta {
            color: #009AF0;
            font-weight: bold;
        }


    } 

    @media(max-width: 768px){
        .programs-section{
            padding: 1.2rem;
        }
    }


    .blogs-section {
        margin-top: 2rem;
        display:flex-column;

        .featured-blogs {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        /* Media query for mobile devices */
        @media (max-width: 1024px) {
            .featured-blogs {
                flex-direction: column; /* Stacks the cards vertically */
            }
        }

        .blogs-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .blog-name{
            line-height: 1.2rem; /* Adjusts the height of each line */
            line-height: 2.4rem; /* This limits the text to two lines (line-height * 2) */
            text-overflow: ellipsis;
            overflow: hidden; /* Hides the overflowed content */
            padding: 0 1rem;
            font-size: 1.2rem;
            display: -webkit-box; 
            -webkit-line-clamp: 2; /* Limits to 2 lines */
            -webkit-box-orient: vertical;
        }

        @media(max-width: 1024px) {
            .blog-name {
                font-size: 1.6rem;
                line-height: 1.6rem;
                text-overflow: ellipsis;
                overflow: hidden; /* Hides the overflowed content */
                display: -webkit-box; 
                -webkit-line-clamp: 1; /* Limits to 2 lines */
                -webkit-box-orient: vertical;
            }
        }

        @media(max-width: 480px) {
            .blog-name {
                font-size: 1.2rem;
                line-height: 1.6rem;
                text-overflow: ellipsis;
                overflow: hidden; /* Hides the overflowed content */
                display: -webkit-box; 
                -webkit-line-clamp: 2; /* Limits to 2 lines */
                -webkit-box-orient: vertical;
            }
        }



        .all-blogs-cta {
            display: none;
            color: #009AF0;
            font-weight: bold;
            font-size: 1.6rem;
            cursor: pointer; /* Change cursor to pointer on hover */
            transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
            border: 0.15rem solid #009AF0; 
            padding-left: 2rem;  
            padding-right: 2rem;
            border-radius: 8px; 
        }

        .all-blogs-cta:hover {
            transform: scale(1.05); /* Slightly enlarge the container */
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
        }

        .blogs-cta {
            line-height: 1.2rem;
            color: #009AF0;
            font-weight: bold;
        }


        .card {
            background: white;
            border-radius: 0.8rem;
            margin-bottom: 1rem;
            box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
            overflow: hidden;
            flex: 1 1 calc(33.333% - 1rem);
            display: flex;
            flex-direction: column;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
            cursor: pointer; /* Change cursor to pointer on hover */
        }

        .card:hover {
            transform: scale(1.05); /* Slightly enlarge the container */
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
        }

        .card img {
            width: 100%;
            height: 60%;
            max-height: 20rem;
            object-fit: cover; /* Ensures the image covers the area while preserving aspect ratio */

        }

    }

    @media(max-width: 768px){
        .blogs-section{
            padding: 1.2rem;
        }
    }

    .why-us-section {
        display:flex-column;

        .why-us{
            padding: 2rem;
            font-size: 4rem;
            color: #00A75D ;
        }

        .why-us-text {
            margin-left: 0.8rem;
            font-size: 1.2rem;
            padding-bottom: 1.2rem;
        }

        @media(max-width: 768px){
            .why-us{
                font-size: 3.2rem;
                padding: 1.6rem;
            }
        }


        @media(max-width: 480px){

            .why-us{
                font-size: 2.8rem;
            }

            .why-us-text{
                font-size: 1rem;
            }
        }


    }

    @media(max-width: 768px){
        .why-us-section{
            padding: 1.2rem;
        }
    }

    .contact-section {
        display:flex-column;

        .contact_us{
            padding: 2rem;
            font-size: 4rem;
            color: #00A75D ;
        }

        @media(max-width: 76.8rem){
            .contact_us{
                font-size: 3.2rem;
                padding: 1.6rem;
            }
        }

        @media(max-width: 48rem){
            .contact_us{
                font-size: 2.6rem;
            }
        }


        .content-contact-us{
            display: flex;
            justify-content: space-around;
        }

        @media(max-width: 102.4rem) {

            .content-contact-us {
                flex-direction: column; /* Stacks the cards vertically */
            }
        }


            .contact-container{

        display: inline-flex; 
        justify-content: center;
        align-items: center;
        cursor: pointer;

        .icon-size {
            font-size: 2rem;
        }

        @media(max-width: 102.4rem) {

            .icon-size {
                font-size: 1.6rem;
            }
        }

        @media(max-width: 76.8rem) {

            .icon-size {
                font-size: 1.4rem;
            }
        }


        .icon-text {
            color: #000000;
            margin-left: 0.8rem;
            font-size: 1.6rem;
        }

        @media(max-width: 76.8rem) {

            .icon-text {
                font-size: 1.2rem;
            }
        }


        @media(max-width: 48rem) {

            .icon-text {
                font-size: 1rem;
            }
        }


    }



    .contact-container:hover {
        text-decoration: underline;
    }



    }

    .join-us-section{
        display: flex;
        margin-top: 2rem;
        justify-content: center;
        text-align: center;
        background:#00A75D;
        color:#ffffff;
        font-size: 2rem;  
        padding: 1.2rem; 
        transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
        cursor: pointer; /* Change cursor to pointer on hover */
    }

        /* Hover effects */
    .join-us-section:hover {
        transform: scale(1.05); /* Slightly enlarge the container */
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
    }


    .tnc-section {
        background: #2A3950;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem;

        .tnc-container {
            width: 70%;
            text-align: center;
            display: inline-flex;
            justify-content: center;
            justify-content: space-around;
        }

        .tnc-text {
            padding: 0.8rem;
            color : #ffffff;
            cursor: pointer; /* Change cursor to pointer on hover */
        }

        .copyright {
            text-align: center;
            color : #ffffff;
            margin-top: 1rem;
        }
    }


    .icon-text-container {
            display: inline-flex; 
            justify-content: center;
            align-items: center;

        .icon-size {
            font-size: 1.6rem;
        }

        .icon-text {
            margin-left: 0.8rem;
            font-size: 1.6rem;
        }
    }


    .line-container {
        display: flex;
        align-items: center;
        justify-content: center;

        .line {
            flex-grow: 1;
            height: 0.5rem;
            background-color: #009AF0; 
        }
    }


}


@media(max-width: 1024px){
    .right-section{
        width: 100%;
    }
}

@media(max-width: 768px){
    .right-section{
        width: 100%;
        padding: 0rem;
    }
}




h1 {
    font-size: 3rem; /* Adjust the size as needed */
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1 rem;
}