/*
Template Name: melc form
*/
<style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        .container {
            width: 80%;
            margin: 20px auto;
            background: #ffffff;
            
        }

        .header {
            background-color: #00a79d;
            color: white;
            padding: 20px;
            text-align: left;
            position: relative;
        }

        .header img {
            height: 50px;
            vertical-align: middle;
        }

        .header h1 {
            display: inline;
            font-size: 24px;
            margin-left: 15px;
            vertical-align: middle;
        }

        .header p {
            <!--margin: 5px 0 0 75px;-->
            font-size: 14px;
        }

        .info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
        }

        .info .profile {
            display: flex;
            align-items: center;
        }

        .info .profile img {
            height: 80px;
            width: 80px;
            border-radius: 50%;
            margin-right: 20px;
            border: 1px solid #ddd;
        }

        .info .profile div {
            font-size: 14px;
        }

        .info .profile div p {
            margin: 3px 0;
        }

        .score {
            text-align: center;
            background-color: #49c3c3;
            color: white;
            padding: 15px;
            font-size: 24px;
            border-radius: 50%;
            height: 80px;
            width: 80px;
            line-height: 80px;
        }

        .score-label {
            text-align: center;
            font-size: 14px;
            margin-top: 5px;
        }

        .score-section {
            padding: 20px;
            border-top: 2px solid #ddd;
        }

        .score-section h2 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #00a79d;
        }

        .score-section table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        .score-section th, .score-section td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }

        .score-section th {
            background-color: #00a79d;
            color: white;
        }

        .footer {
            text-align: center;
            padding: 10px;
            background-color: #f9f9f9;
            font-size: 12px;
            color: #777;
        }

        .section {
            margin-bottom: 20px;
        }

        .section h2 {
            font-size: 18px;
            color: #444;
            margin-bottom: 10px;
			border-bottom: 2px solid black;
            padding-bottom: 9px;
        }

        .skills-wrapper {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
			 padding-top: 10px;
        }

        .skill {
            text-align: center;
        }

        .skill .circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 10px;
            font-size: 18px;
            font-weight: bold;
            color: #fff;
        }

        .circle.writing {
           border: 4px solid #9e007e;
		color: #9e007e;
        }

        .circle.listening {
		border: 4px solid #004b8d;
		color: #004b8d;
      }

        .circle.reading {
            border: 4px solid #c4d600;
		    color: #c4d600;
        }

        .circle.speaking {
            border: 4px solid #595959;
		    color: #595959;
        }

        .skills-breakdown {
            margin-top: 20px;
        }

        .bar {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .bar span {
            width: 100px;
            font-size: 14px;
            color: #444;
        }

        .progress {
            flex: 1;
            height: 10px;
            background: #ddd;
            border-radius: 5px;
            overflow: hidden;
        }

        .progress div {
            height: 10px;
        }

        .progress.listening div {
            width: 50%;
            background: #1a3d66;
        }

        .progress.reading div {
            width: 46%;
            background: #cddc39;
        }

        .progress.speaking div {
            width: 45%;
            background: #606060;
        }

        .progress.writing div {
            width: 52%;
            background: #9c27b0;
        }

        .candidate-info {
            margin-top: 20px;
        }

        .candidate-info p {
            margin: 5px 0;
            font-size: 14px;
            color: #444;
        }
        
        .containers {
            <!--width: 50%;-->
            margin: 0 auto;
            padding: 20px;
            
        }

        .container h1 {
            font-size: 18px;
            color: #333333;
        }

        .info {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .info span {
            font-weight: bold;
            color: #333333;
        }


        .info div span {
            display: inline-block;
            color: #555555;
        }
		
		.containerss {
           padding: 20px;
		   }
		   
		   
<!--- 3rd section  css--->
 .skills-breakdown, .candidate-info {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 5px;
            width: 45%;
        }
        .skills-breakdown h3, .candidate-info h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .bar-container {
            margin-bottom: 10px;
        }
        .bar-label {
            font-size: 14px;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
        }
        .progress-bar {
            background-color: #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            height: 10px;
        }
        .progress {
            height: 100%;
            border-radius: 5px;
        }
        .progress.listening {
            background-color: #004b8d;
            width: 50%;
        }
        .progress.reading {
            background-color: #c4d600;
            width: 46%;
        }
        .progress.speaking {
            background-color: #595959;
            width: 45%;
        }
        .progress.writing {
            background-color: #9e007e;
            width: 52%;
        }
        .candidate-info p {
            font-size: 14px;
            margin: 5px 0;
        }
		.break-point{
	        margin: 20px;
            display: flex;
            align-items: flex-start;
			margin-top:-50px;
			}
			
			
<!--- overall-css-->
.over .overall-scored {
    width: 70%;
    padding: 6px !important;
    color: #fff !important;
    font-size: 14px !important;
    text-align: center;
    border-radius: 10px 10px 0px 0px !important;
}
.numbers {
    width: 84% !important;
    text-align: center;
    padding: 12px;
    border-radius: 0px 0px 60px 60px;
    height: 57px;
    font-size: 35px;
    color: white;
}
.over {
    width: 10%;
    margin-right: 157px;
}
@media only screen and (max-width: 700px) {
.over .overall-scored {
    width: 130% !important;
    padding: 6px !important;
    color: #fff !important;
    font-size: 14px !important;
    text-align: center;
    border-radius: 10px 10px 0px 0px !important;
}
.numbers {
    width: 115% !important ;
    text-align: center;
    padding: 12px;
    border-radius: 0px 0px 60px 60px;
    height: 57px;
    font-size: 35px;
    color: white;
}
}
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="https://via.placeholder.com/50" alt="Pearson Logo">
            <h1>PTE Academic | Score Report</h1>
            <p>Score Report Code: 14bbc3Z9SP</p>
        </div>

        <div class="info">
            <div class="profile">
                <img src="images/1.webp" alt="Profile Picture">
                <div>
                    <p><b>Attilio Fallanca</b></p>
                    <p>Test Taker ID: PTE001358787</p>
                    <p>Registration ID: 487170805</p>
                </div>
            </div>
            <div class="over">
                <div class="overall-scored" style="background-color:#004b8d; width: 91%; padding: 7px !important; color: #fff !important; font-size: 14px !important; text-align: center; border-radius: 10px 10px 0px 0px !important;">Overall Score</div>
				<div class="numbers" style="background-color:#9e007e;">49</div>
            </div>
        </div>
 <div class="containerss">
        <div class="section">
            <h2>Communicative Skills</h2>
            <div class="skills-wrapper">
                <div class="skill">
                    <div class="circle listening">50</div>
                    <p>Listening</p>
                </div>
                <div class="skill">
                    <div class="circle reading">46</div>
                    <p>Reading</p>
                </div>
                <div class="skill">
                    <div class="circle speaking">45</div>
                    <p>Speaking</p>
                </div>
                <div class="skill">
                    <div class="circle writing">52</div>
                    <p>Writing</p>
                </div>
            </div>
        </div>

        <!--div class="section skills-breakdown">
            <h2>Skills Breakdown</h2>
            <div class="bar">
                <span>Listening</span>
                <div class="progress listening">
                    <div></div>
                </div>
            </div>
            <div class="bar">
                <span>Reading</span>
                <div class="progress reading">
                    <div></div>
                </div>
            </div>
            <div class="bar">
                <span>Speaking</span>
                <div class="progress speaking">
                    <div></div>
                </div>
            </div>
            <div class="bar">
                <span>Writing</span>
                <div class="progress writing">
                    <div></div>
                </div>
            </div>
        </div>

        <div class="section candidate-info">
            <h2>Candidate Information</h2>
            <p><strong>Date of Birth:</strong> 17 Oct 1988</p>
            <p><strong>Gender:</strong> Male</p>
            <p><strong>Country of Citizenship:</strong> Italy</p>
            <p><strong>Country of Residence:</strong> Australia</p>
        </div>-->
    </div>
     
     <!--- 3rd section --- skills breakdoen-->
<div class="break-point">
	 <div class="skills-breakdown" style="width:60%;">
        <h3 style="border-bottom:1px solid black; padding-bottom:10px;">Skills Breakdown</h3>
	<div style="padding: 0px 70px;">
        <div class="bar-container">
            <div class="bar-label">
                <span>Listening</span>
                <span>50</span>
            </div>
            <div class="progress-bar">
                <div class="progress listening"></div>
            </div>
        </div>
        <div class="bar-container">
            <div class="bar-label">
                <span>Reading</span>
                <span>46</span>
            </div>
            <div class="progress-bar">
                <div class="progress reading"></div>
            </div>
        </div>
        <div class="bar-container">
            <div class="bar-label">
                <span>Speaking</span>
                <span>45</span>
            </div>
            <div class="progress-bar">
                <div class="progress speaking"></div>
            </div>
        </div>
        <div class="bar-container">
            <div class="bar-label">
                <span>Writing</span>
                <span>52</span>
            </div>
            <div class="progress-bar">
                <div class="progress writing"></div>
            </div>
        </div>
	</div>
        <p style="padding:20px 0px;"><strong>Overall:</strong> 49</p>
    </div>

    <div class="candidate-info" style="width:40%; padding-left:60px;">
        <h3 style="border-bottom:1px solid black; padding-bottom:10px;">Candidate Information</h3>
        <p><strong>Date of Birth:</strong> 17 Oct 1988</p>
        <p><strong>Gender:</strong> Male</p>
        <p><strong>Country of Citizenship:</strong> Italy</p>
        <p><strong>Country of Residence:</strong> Australia</p>
    </div>
</div>     
  <!--- last section -->
  <div class="containers" style="margin-top:-60px;">
        <h1 style="border-bottom:1px solid black; padding:10px;">Test Centre Information</h1>
        <div class="info">
            <div><span>Test Centre Country:</span> Australia</div>
            <div><span>Test Date:</span> 28 Sep 2024</div>
            <div><span>Test Centre ID:</span> 67712</div>
            <div><span>Valid Until:</span> 28 Sep 2026</div>
            <div><span>Test Centre:</span> Pearson Professional <br>Centers-Melbourne</div>
        </div>
    </div>
	<div style="background-color:#00a79d; height:80px;">
	</div>