修改样式

css/style.css

@@ -593,20 +593,17 @@ body {
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	width: 80%;
-	max-width: 900px;
-	/* background: linear-gradient(135deg, #142c64, #1a3a7d); */
+	width: 74%;
+	min-width: 900px;
 	background-image: url(../img/alert2.png);
 	background-size: 100% 100%;
-	/* background-size: cover; */
-	/* background-position: center; */
-	/* background-repeat: no-repeat; */
 	border-radius: 8px;
 	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 	z-index: 1001;
-	padding: 20px 50px;
+	padding: 20px 4%;
 	color: #fff;
 	height: 82%;
+	font-size: clamp(12px, 1vw, 30px);
 }
 
 .modal-header {
@@ -629,28 +626,13 @@ body {
 	/* color: transparent; */
 }
 
-/* .modal-close {
-	cursor: pointer;
-	font-size: 24px;
-	color: #fff;
-	transition: all 0.3s;
-	position: absolute;
-    right: 39px;
-    top: 33px;
-}
-.modal-close img{
-	width: 30px;
-	height: 30px;
-}
-.modal-close:hover {
-	color: #06f4ff;
-} */
 
 .modal-tabs {
 	display: flex;
 	gap: 10px;
 	margin-bottom: 20px;
 	margin-top: 65px;
+	font-size: clamp(12px, 1vw, 30px);
 }
 
 .modal-tab {
@@ -671,6 +653,8 @@ body {
 	border-radius: 4px;
 	padding: 15px;
 	height: 83%;
+	height: calc(100% - 130px);
+	padding-bottom: 45px;
 }
 
 .table-container {
@@ -708,7 +692,8 @@ body {
 .modal-table {
 	width: 100%;
 	border-collapse: collapse;
-	font-size: 14px;
+	/* font-size: 14px; */
+	font-size: clamp(10px, 1vw, 26px);
 }
 
 .modal-table thead {
@@ -796,6 +781,7 @@ body {
 .ship-details {
 	display: grid;
 	gap: 10px;
+	font-size: clamp(12px, 1vw, 30px);
 }
 
 .detail-item {
@@ -807,12 +793,12 @@ body {
 
 .detail-item .label {
 	color: rgba(255, 255, 255, 0.7);
-	font-size: 14px;
+	/* font-size: 14px; */
 }
 
 .detail-item .value {
 	color: #fff;
-	font-size: 14px;
+	/* font-size: 14px; */
 	font-weight: 500;
 }
 
@@ -1059,8 +1045,8 @@ body {
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	width: 75%;
-	max-width: 850px;
+	width: 65%;
+	max-width: 850px; 
 	background-image: url(../img/alertm.png);
 	background-size: 100% 100%;
 	border-radius: 8px;
@@ -1069,7 +1055,12 @@ body {
 	padding: 20px 50px;
 	color: #fff;
 	height: 58%;
+	font-size: clamp(12px, 1vw, 30px);
     min-height: 510px;
+    max-height: 510px;
+}
+.modal-containercar .modal-content {
+    margin-top: 50px;
 }
  .modal-close{
 	position: relative;
@@ -1081,13 +1072,17 @@ body {
 }
 .modal-close div{
 	background-color: #00a6c9;
-    font-size: 14px;
+    font-size: clamp(12px, 1vw, 30px);
     padding: 8px 30px;
     border-radius: 4px;
 }
 #modalOverlay .modal-close{
-	top: -57px;
-	right: 0px;
+	top: auto;
+	right: auto;
+	position: absolute;
+	bottom: 30px;
+	display: inline-block;
+	left: 45%;
 }
 .modal-content{
 	display: flex;
@@ -1098,6 +1093,7 @@ body {
 .carimg{
 	background-image: url(../img/alertm1.png);
 	background-size: 100% 100%;
+	background-repeat: no-repeat;
 	width: 40%;
 	height: 80%;
 	display: flex;
@@ -1111,7 +1107,7 @@ body {
 }
 .carinfos p{
 	line-height: 30px;
-	font-size: 14px;
+	/* font-size: 14px; */
 }
 .carinfos .cartitlet{
 	font-size: 16px;