* {
            font-family:Arial, Helvetica, sans-serif;
            margin: 0;
            box-sizing: border-box;
        }


        body {
            background-color: #f0f8ff;;
        }

        :root {
            --accent-clr: rgb(52, 133, 255);
            --accent-clr-2: rgb(19, 50, 90);
            --txt-clr: black;
            --bg-clr: #f0f8ff;
            --accent-clr-3: #0056b3;
            --sizer: 2rem;
            --para-size: 1.5rem;
            --wide-size: 2.5rem;
            --para-size-s: 1rem;
        }


        /*This is the landing page*/
        .section_1 {
            background-image: url(/images/add.webp);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 100vh;
            width: 100%;
            display: flex;
        }

        .div-info {
            display: grid;
            grid-template-rows: 1fr 1fr;
            align-items: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.8);
            height: 100%;
            width: 100%;
            transition:all 0.5s ease;
            padding: 3rem 0;
        }

        .div-info .grid_right {
            order: -1;
        }

        .div-info .grid_right p {
            letter-spacing: 1px;
            font-size: 1rem;
            font-weight: bold;
            margin: 0 0 0 1rem;
            max-width: 25rem;
        }

        .div-info .grid_right h1 {
        font-size: 2rem;
        margin: 0 0 0 1rem;
        }

        .div-info .grid_left {
            padding: 0 0 0 1rem
        }

        .div-info .grid_left p {
            font-size: var(--para-size-s);
            max-width: 30rem;
            line-height: 30px;
            text-decoration: underline;
            font-style: italic;
            margin: 0 0 10px 0;
        }

        .div-info .grid_left h1 {
            font-size: 3rem;
            max-width: 20rem;
        }

        .div-info .grid_left h2 {
            max-width: 20rem;
        }

        .div-info .grid_left h2 span {
            font-size: 2rem;
        }

        .div-info .grid_right .social {
            display: grid;
            grid-template-columns: 0.5fr 2fr;
            align-items: center;
            max-width: 400px
        }


        .div-info .grid_right .social-media a {
            margin-right: 0.65rem;
            border: solid 1px var(--accent-clr);
            width: 2.5rem;
            height: 2.5rem;
            background: transparent;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all .5s ease;
            text-decoration: none;
        }

        .div-info .grid_right .social-media a i {
            color: var(--accent-clr);
            font-size: 1.5rem;
            transition: all .5s ease;
        }

        .div-info .grid_right .social-media a:hover {
            background-color: var(--bg-clr);
            box-shadow: 1px 1px 1rem var(--accent-clr);
        }
        

        .div-info .grid_right .social-media a:hover i {
            color: rgb(52, 133, 255);
        }

        .div-info .grid_right img {
            height: 80px;
        }


        @media (min-width: 1123px) {
            .div-info{
                grid-template-columns: 1fr 2fr;
                padding: 20rem 0 0 10rem;
            }

            .div-info .grid_right {
                border-left: 1px solid var(--bg-clr);
                order: 1;
                padding: 0 0 0 2rem;
            }

            .div-info .grid_right h1 {
                font-size: 4rem;
            }

            .div-info .grid_right p {
                font-size: 1.5rem;
            }

            .div-info .grid_left p {
                padding: 0 2rem 0 0;
                font-size: var(--para-size)
            }


        }


        /*This is the enrolment page*/

        .highlight-section {
            background-color: var(--bg-clr) ;
            padding: 2rem 1rem;
            text-align: center;
            border-radius: 12px;
            margin: 2rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }


        .highlight-section h1 {
            font-size: var(--sizer);
        }

        .highlight-section h1 span {
            color:var(--accent-clr)
        }        

        .enroll-intro {
            font-size:var(--para-size-s);
            margin: 1rem 0;
        }

        .mini-guide {
            list-style: none;
            padding: 0;
            margin: 1rem 0;
        }

        .mini-guide li {
            margin: 0.5rem 0;
            font-size:var(--para-size-s);
            
        }

        .enroll-button {
            display: block;
            width: 50%;
            padding: 0.9rem;
            margin: 1.5rem auto;
            background-color: #007bff;
            color: white;
            font-weight: bold;
            font-size:var(--para-size);
            font-size:var(--para-size-s);
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            text-align:center;
            text-decoration: none;
        }


        .enroll-button:hover {
            background:var(--accent-clr-3)
        }

        @media (min-width: 1024px) {

            .enroll-button{
                font-size:var(--para-size);
            }
            .highlight-section h1 {
                font-size:var(--wide-size);
            }


            .mini-guide li {
                font-size:var(--para-size);
            }

            .enroll-intro {
                font-size:var(--para-size);
                margin: 1rem 0;
            }

            
        }

        /*This is the sylabuls page*/
        .section_3 {
            background: 
            linear-gradient(to bottom,
            rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
            url(/images/academic.webp);
            background-position:center;
            padding: 1rem;
        }

        @media screen and (max-width: 600px) {
            .section_3 {
                background: url(/images/academic-small.webp);
            }
        }
        

        .services {            
            border-radius: 1rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.8);
            
        }

        .services h1 {
            font-size: var(--sizer);
            margin: 2.5rem 0;
            text-align:center;
        }

        .services h1 span {
         color: var(--accent-clr);
        }


        .services .services-box {
            background:var(--accent-clr-2);
            cursor: pointer;
            margin:  3rem auto;
            transition: all 0.3s ease;
            max-width: 60%;
            padding: 1rem 0 0 0;
            border-radius: 1rem;
            box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.05);
        }

        .services .services-box h2 {
            text-align:center;
            color: white;
            margin: 0 0 1rem 0;
            
        }

        .services .services-box ul {
            background: white;
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 1rem;
            
            
        }

        .services .services-box li {
            padding: 0.2rem;
            font-weight: bold;
            color: rgb(82, 82, 82);
            width: 100px;
            margin: auto;
            
        }


        .services .services-box h2 {
            font-size: 1.5rem;
        }

        .services-box h2 {
            cursor: pointer;
            font-size: 1.2rem;
        
        } @media (min-width: 1024px) {
            .services {
                margin: 5rem 15rem;
            }

            .services h1 {

                font-size:var(--wide-size);
            }
            
        }

       
        
        /*This is the calander page*/
        .calander-events {
            background-color:var(--bg-clr);
            display: grid;
            grid-template-rows: 1fr 1fr;
            justify-content:center;
            transition:all 0.5s ease;
            align-items:center;
            padding: 0 3rem;
            margin: 2rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            border-radius: 12px;       
         }


        .calander-events .events h1 {
            font-size: var(--sizer);
            margin: 0 0 1rem 0;
        }

         .calander-events .events h1 span {
            color: var(--accent-clr)
         }

        .calander-events .events {
            order: -1;
        }

        .calander-events .events h2 {
            margin: 0 0 1rem 0;
        }


        .calander-events .event-list .scroll {
            background: var(--accent-clr-2);
            padding: 1rem 1rem 0 1rem;
            overflow-y: auto;
            border: 2px solid var(--accent-clr-2);
            border-radius: 10px;
            cursor: pointer;
            
        }



        .calander-events .event-list .scroll div {
            padding: 1rem;
            background:var(--bg-clr);
            margin: 0 0 1rem 0;
            border: 1px solid var(--accent-clr-2);
            box-shadow:inset 1px 1px 5px rgba(0, 0, 0, 1)
        }

        .calander-events .event-list .scroll h2 {
            color: white;
        }



        @media (min-width: 1123px) {
            .calander-events .events h1 {
                font-size: var(--wide-size);
            }



            .calander-events{
                grid-template-columns: 1fr 1fr;
                justify-content: center;
                height: 70vh;
                padding-top: 3rem;               
            }
        }




        .calendar {
            padding: 20px;
            
        }


        .calendar header {
            display: flex;
            justify-content: space-between;
            margin: 0 0 10px 0;
            align-items: center;
        }


        .calendar header button {
            background: rgb(0, 47, 255);
            border: none;
            padding: 13px;
            border-radius: 50%;
            cursor: pointer;
            color: white;
        }


        .calendar header h2 {
            font-size: 20px;
        }


        .day-names, .days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align:center;
        }

        .day-names div{
            padding: 10px 0;
            font-weight: bold;
            color: #555;
        }

        .days div {
            padding: 15px 0;
            border-radius: 30px;
            margin: 2px;
            cursor: pointer;
            transition: background 0.3s;
        }

        /*.days div:nth-child(8) {
            background: rgb(255, 187, 0);
            color: white;
        }*/


        .days div:hover {
            background: rgb(0, 47, 255);
            color: white;
        }

        .today {
            background: rgba(229, 255, 0, 0.7)
        }


        .empty:hover {
            background: #fff !important;
            color: white;
        }

         @media (min-width: 1123px) {
           .calendar {
                align-self:last baseline;
                margin: 0 4rem 0 3rem;
           }

           .day-names, .days {
            font-size: 1.2rem

           }

           .days div {
            width: 3.5rem
           }
            
         }



        .resources {
            background:var(--bg-clr);
            text-align:center;
            padding: 3rem;
            margin: 2rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            border-radius: 12px;
         }

         .resources div {
            max-width: 900px;
            margin: auto;
            
            
            border-radius: 1rem;
         }

         .resources h1 {
            font-size: var(--sizer);
            margin: 0 0 0.5rem 0;
         }

         .resources h1 span {
            color:var(--accent-clr);
         }

         .resources a {
            font-size: 1.5rem;
         }


          @media (min-width: 1123px) {
            .resources h1 {
                font-size: var(--wide-size);
            }
            .resources a {
                font-size: 2rem;
            }
          }


          footer {
            background: rgb(9, 16, 46);
            
          }

          footer .footer-title {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            align-items:top;
          }

          footer .logo {
            display: flex;
            align-items:center
          }

          footer h2 {
            color:var(--bg-clr);
            margin: 0 0 0.5rem 0;
            font-size: var(--para-size-s)
          }          

          footer .logo img {
            width: 60px;
          }


          

          footer p {
            color: var(--accent-clr);
            letter-spacing: 2px;
            line-height: 20px;
            font-weight: bold;
            font-size: 1rem;
            cursor:pointer;
            margin: 0 0 1rem 0;
          }

          footer .social {
            display: flex;
            flex-direction:column;
            padding: 0.5rem 0 0 0;
          }

          footer .social i {
            font-size: 1.2rem;
            color: var(--accent-clr);
            box-shadow: 0px 0px 5px rgba(97, 108, 255, 0.9);
            border-radius: 15px;
            margin: 0.5rem 5px 0 0;
            padding: 4px;
            transition: all 0.3s ease;
          }

          footer .social i:hover {
            background: var(--bg-clr);
          }


          footer .nav-links {
            display: grid;
            grid-template-columns: 2fr 1fr;
            align-items:top;
            margin: 2rem 0 3.9rem 0;
            padding: 0 0 0 2rem;
          }

          footer .nav-links div {
            display: flex;
            flex-direction:column;
            letter-spacing: 2px;
          }


          footer .nav-links div a {
            color: var(--accent-clr);
            margin: 0 0 1rem 0;
            transition: all 0.3s ease;
          }


          footer .nav-links div a:hover{
            color:var(--bg-clr);
          }
          

          footer .copyright {
            text-align: center;
            padding: 20px;
            background-color: #eaf4f7;
            font-size: 0.9em;
            color: #555;
          }

          @media (min-width: 1123px) {

            footer h2 {
                font-size: var(--sizer)
            }

            footer .footer-title {
                grid-template-columns: 1fr 1fr;               
            }

            footer .nav-links {
                grid-template-columns: 1fr 1fr;
            }

            .footer-links {
               margin-left: 20rem;
            }

            footer .social i {
                font-size: 1.5rem;
            }
          }