body 
            {
                margin: 0;
                background-color: #f1f1f1;
            }

        #navbar
            {
                background-color: #29484e;
                position: fixed;
                top: 0;
                width: 100%;
                height: 12%;
                display: block;
                transition: top 0.3s;
            }
            
        .image
        {
            position:absolute;
            height: auto;
            left: 50px;
            top: 9px;
        }

        .navtext
        {
            position:absolute;
            height: auto;
            left: 135px;
            top: 0px;
            font-size: 130%;            
        }

        .button
        {
            position:absolute;
            height: 46px;
            right: 50px;
            top: 20px;
            width: 90px;
            border-radius: 10px;
            font-size: 80%;
            padding-left: 30px;
            background-color: yellow;
            transition-duration: 0.2s;
        }

        .button:hover 
        {
            background-color: #bbb73b; /* Green */
            color: black;
        }

        .square 
        {
            height: 90px;
            width: 140px;                     
            margin-top: 130px;
            margin-left: auto;
            margin-right: auto;        
            width: 30%;
            border-radius: 10px;
            background-color: rgb(233, 125, 143);   
        }

        .squaretext
        {
            height: 90px;            
            background-color: #555;   
            display: flex;
            align-items: center;        
            font-size: 20px;
            padding-left: 15%;            
            width: 100%;
            border-radius: 10px;
            background-color: rgb(233, 125, 143); 
        }

        .squareshirt_1
        {
            height: 17cm;
            width: 9cm;                        
            margin-top: 12px;
            margin-left: 6cm;       
            border-radius: 10px;
            background-color: white;   
        }

        .squareshirt_2
        {
            height: 17cm;
            width: 9cm;                        
            margin-top: 130px;
            margin-left: 16.3cm;                 
            border-radius: 10px;
            background-color: white;  
            position: static;
            margin-top: -17cm; 
        }

        .squareshirt_3
        {
            height: 17cm;
            width: 9cm;                        
            margin-top: 130px;
            margin-left: 26.3cm;                 
            border-radius: 10px;
            background-color: white;   
            position: static;
            margin-top: -17cm; 
        }

        .squareshirt_4
        {
            height: 17cm;
            width: 9cm;                        
            margin-top: 1.2cm;
            margin-left: 6cm;                 
            border-radius: 10px;
            background-color: white;   
            
        }

        .squareshirt_5
        {
            height: 17cm;
            width: 9cm;                        
            margin-top: 1.2cm;
            margin-left: 16.3cm;                 
            border-radius: 10px;
            background-color: white;  
            position: static;
            margin-top: -17cm 
            
        }

        .dot 
        {
            cursor: pointer;
            height: 13px;
            width: 13px;
            margin: 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .slides 
        {
            display: none;
        }

        .active, .dot:hover 
        {
            background-color: #717171;
        }

        .card-title
        {
            padding-left: 0.8cm;
        }

        .card-subtitle
        {
            padding-left: 0.8cm;
            font-size: 20px;
        }

        .card-text
        {
            padding-left: 0.8cm;
            font-size: 20px;
        }

        .button-square
        {
            height: 46px;
            
            position: absolute;
            left: 8.6cm;
            width: 140px;
            border-radius: 10px;
            border: none;
            font-size: 80%;
            padding-left: 1cm;
            background-color: rgb(190, 188, 188);
            transition-duration: 0.2s;
        }

        #no-btn
        {
            cursor: not-allowed;
        }

        footer
        {
            padding-bottom: 30px;
            background-color: #29484e;
            height: 20px;
        }

        .logo
        {
            position: absolute;
            right: 0.5cm;
            bottom: -27.9cm;
        }

        .form-name
        {
            position: absolute;
            height: 1.4cm;
            width: 10cm;
            background-color: rgb(169, 169, 169);
            left: 8cm;
            border-radius: 2px;
        }

        .form-matric
        {
            position: absolute;
            top: 13cm;
            height: 1.4cm;
            width: 10cm;
            background-color: rgb(169, 169, 169);
            left: 8cm;
            border-radius: 2px;
        }

        .form-email
        {
            position: absolute;
            top: 16cm;
            height: 1.4cm;
            width: 10cm;
            background-color: rgb(169, 169, 169);
            left: 8cm;
            border-radius: 2px;
        }

        .form-contact
        {
            position: absolute;
            top: 18cm;
            height: 1.4cm;
            width: 10cm;
            background-color: rgb(169, 169, 169);
            left: 8cm;
            border-radius: 2px;
        }

        .popup {
            display: none;
            height: 8cm;
            width: 11.5cm;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffffff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            z-index: 2;
        }

        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Adjust the opacity here (0.5 for 50% opacity) */
            z-index: 1;
        }