:root{
   --pri_color :#1a76d1;
   --sec_color :#e12454;
   --uni_color :#223a66;
}
body{
	font-family :-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.pre_nav{
	background-color:var(--uni_color);
	width : 100%;
	color : #ffffff;
	height : 50px;
	z-index : 100;
}


.first_section{
	width : 100%;
}

.first_section_content{
	z-index : -1;
	
}
.checkout_img{
	margin-top : -20px;
	z-index : -1;
}
.second_section{
    width : 100%;	
}

.second_section_content{
	margin-left : 5%;
	margin-right : 5%;
}

.name_flex{
	display : flex;
}
.form-group{
	margin-top : 15px;
}
.form-group:nth-child(1n){
	margin-right:50px;
}

label{
	font-weight : 500;
	font-size : 1.18rem;
}
.second_section{
	margin-bottom : 50px;
}
.second_section_flex{
	display : flex;
	width : 100%;
	margin-top : 50px;
}

.form_body{
	width : 60%;
}
small{
   color :#de4453;
}


.payment_body{
	width : 35%;
	border: solid 4px var(--pri_color);
	border-radius : 4px;
	padding : 20px;
}
.stock{
	background-color : var(--uni_color);
	color : #ffffff;
	font-weight : 600;
	border-radius : 50px;
	width : 120px;
	padding-left : 5px;
	text-align : center;
}

table{
	margin-bottom : 50px;
}
tr{
	border-bottom :solid 2px var(--uni_color);
	height : 75px;
}

td:first-child{
	/* color : var(--sec_color); */
	font-weight : 600;
	font-size : 1.1rem;
	color : var(--sec_color);
}
.total_flex{
	display :flex;
	width : 100%;
	height : 50px;
	align-items : center;
	justify-content : space-between;
}
.total_label{
	font-weight : 600;
	font-size : 1.75rem;
	
}
.total_input{
	color : var(--sec_color);
	font-weight : 600;
	font-size : 2rem;
	/* display : inline; */
}

.cal_total{
	font-weight : 600;
	color : var(--sec_color);
	width : 150px;
}


.quantity{
	background-color : lavender;
	border-radius : 50px;
	width : 125px;
	height : 45px;
	display : flex;
	align-items : center;
	justify-content :space-between;
	font-size : 1.18rem;
	padding:0 7.5px;
	float : left;
	margin-right : 20px;
}
.quantity_plus, .quantity_minus{
	background : none;
	border:none;
	outline : none;
	cursor : pointer;
}


.bank_transfer_content{
	width : 100%;
	height : 125px;
	background-color : #eef0f3;
	padding : 10px;
}
.triangle_up{
    background-color:#eef0f3;
    height: 10px;
    width: 15px;
    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
	margin-left : 10px;
}


.bank_transfer_content p{
	font-size : 0.9rem;    
}
.card_transfer{
	display : none;
}
.card_transfer_content{
	background-color : #eef0f3;
	padding : 10px;	
	width : 100%;
	height : 75px;	
	
}
.transfer_option, .card_option{
	width : 7.5px;
	height : 7.5px;
    border-radius : 1000px;
	background-color :#007bff;
	outline : 0;
}
.transfer_button, .card_button{
	width : 20px;
	height : 20px;
	border-radius : 100px;
	display : flex;
	justify-content : center;
	align-items : center;
	background-color : #ffffff;
	border : solid 2px #007bff;
	cursor:pointer;
	
}
.transfer_payment,.card_payment{
   display : flex;
   align-items : center;
   height : 25px;
   margin-top : 15px;
	cursor:pointer;
}
.card_option{
	display : none;
}

.privacy_policy{
	margin-top : 25px;
}

.button_text{
	font-size : 0.9rem;
}
input[type = "submit"]{
	width : 225px;
	height : 45px;
	color : #ffffff;
	font-weight : 600;
	background-color :var(--pri_color);
	border : none;
	outline : none;
	border-radius : 50px;
}

input[type = "submit"]:hover{
   box-shadow: 1px 1px 3px 3px #3e3e3e4C;
}
.card_image{
	width : 150px;
	height : 40px;
}


@media(max-width : 975px){
    .pre_nav{
    	background-color:var(--uni_color);
    	width : 100%;
    	color : #ffffff;
    	height : 50px;
    	z-index : 100;
    }
    
    
    .first_section{
    	width : 100%;
    }
    
    .first_section_content{
    	z-index : -1;
    	
    }
    .checkout_img{
    	margin-top : -20px;
    	z-index : -1;
    }
    .second_section{
        width : 100%;	
    }
    
    .second_section_content{
    	margin-left : 5%;
    	margin-right : 5%;
    }
    
    .name_flex{
    	display : block;
    }
    
    .form-group:nth-child(1n){
    	margin-right:50px;
    }
    
    .second_section_flex{
    	display : block;
    	width : 100%;
    	margin-top : 50px;
    }
    
    .form_body{
    	width : 100%;
    }
    
    
    .payment_body{
    	width : 100%;
    	border: solid 4px var(--pri_color);
    	border-radius : 4px;
    	padding : 20px;
    }
	
    
    table{
    	margin-bottom : 50px;
		width : 100%;
    }
    tr{
    	border-bottom :solid 2px var(--uni_color);
    	height : 75px;
    }
    
    td:first-child{
    	/* color : var(--sec_color); */
    	font-weight : 600;
    	font-size : 1.1rem;
    	color : var(--sec_color);
    }
    .quantity{
    	background-color : lavender;
    	border-radius : 50px;
    	width : 125px;
    	height : 45px;
    	display : flex;
    	align-items : center;
    	justify-content :space-between;
    	font-size : 1.18rem;
    	padding:0 7.5px;
    	float : left;
    	margin-right : 20px;
    }
    .quantity_plus, .quantity_minus{
    	background : none;
    	border:none;
    	outline : none;
    	cursor : pointer;
    }
    .total_flex{
    	display :flex;
    	width : 100%;
    	height : 50px;
    	align-items : center;
    	justify-content : space-between;
    }
    .total_label{
    	font-weight : 600;
    	font-size : 1.75rem;
    	
    }
    .total_input{
    	color : var(--sec_color);
    	font-weight : 600;
    	font-size : 2rem;
    	/* display : inline; */
    }
    
    .cal_total{
    	font-weight : 600;
    	color : var(--sec_color);
    	width : 150px;
    }	
	
    
    .bank_transfer_content{
    	width : 100%;
    	height : 125px;
    	background-color : #eef0f3;
    	padding : 10px;
    }
    .triangle_up{
        background-color:#eef0f3;
        height: 10px;
        width: 15px;
        clip-path: polygon(50% 0, 0% 100%, 100% 100%);
    	margin-left : 10px;
    }
    
    
    .bank_transfer_content p{
    	font-size : 0.9rem;    
    }
    .card_transfer{
    	display : none;
    }
    .card_transfer_content{
    	background-color : #eef0f3;
    	padding : 10px;	
    	width : 100%;
    	height : 75px;	
    	
    }
    .transfer_option, .card_option{
    	width : 7.5px;
    	height : 7.5px;
        border-radius : 1000px;
    	background-color :#007bff;
    	outline : 0;
    }
    .transfer_button, .card_button{
    	width : 20px;
    	height : 20px;
    	border-radius : 100px;
    	display : flex;
    	justify-content : center;
    	align-items : center;
    	background-color : #ffffff;
    	border : solid 2px #007bff;
    	
    }
    .transfer_payment,.card_payment{
       display : flex;
       align-items : center;
       height : 25px;
       margin-top : 15px;
	   
    }
    .card_option{
    	display : none;
    }
    
    .privacy_policy{
    	margin-top : 25px;
    }
    
    .button_text{
    	font-size : 0.9rem;
    }
    input[type = "submit"]{
    	width : 225px;
    	height : 45px;
    	color : #ffffff;
    	font-weight : 600;
    	background-color :var(--pri_color);
    	border : none;
    	outline : none;
    	border-radius : 50px;
    }
    
    input[type = "submit"]:hover{
       box-shadow: 1px 1px 3px 3px #3e3e3e4C;
    }
    .card_image{
    	width : 150px;
    	height : 40px;
    }
	.card_button_text{
		font-size : 0.75rem;
	}
	
	
}





@media(max-width : 450px){
    .pre_nav{
    	background-color:var(--uni_color);
    	width : 100%;
    	color : #ffffff;
    	height : 50px;
    	z-index : 100;
    }
    
    
    .first_section{
    	width : 100%;
    }
    
    .first_section_content{
    	z-index : -1;
    	
    }
    .checkout_img{
    	margin-top : -20px;
    	z-index : -1;
    }
    .second_section{
        width : 100%;	
    }
    
    .second_section_content{
    	margin-left : 5%;
    	margin-right : 5%;
    }
    
    .name_flex{
    	display : block;
    }
    
    .form-group:nth-child(1n){
    	margin-right:50px;
    }
    
    .second_section_flex{
    	display : block;
    	width : 100%;
    	margin-top : 50px;
    }
    
    .form_body{
    	width : 100%;
    }
    
    
    .payment_body{
    	width : 100%;
    	border: solid 4px var(--pri_color);
    	border-radius : 4px;
    	padding : 20px;
    }
	
    
    table{
    	margin-bottom : 50px;
		width : 100%;
    }
    tr{
    	border-bottom :solid 2px var(--uni_color);
    	height : 75px;
    }
    
    td:first-child{
    	/* color : var(--sec_color); */
    	font-weight : 600;
    	font-size : 1.1rem;
    	color : var(--sec_color);
    }
    .quantity{
    	background-color : lavender;
    	border-radius : 50px;
    	width : 125px;
    	height : 45px;
    	display : flex;
    	align-items : center;
    	justify-content :space-between;
    	font-size : 1.18rem;
    	padding:0 7.5px;
    	float : left;
    	margin-right : 20px;
    }
    .quantity_plus, .quantity_minus{
    	background : none;
    	border:none;
    	outline : none;
    	cursor : pointer;
    }
    .total_flex{
    	display :flex;
    	width : 100%;
    	height : 50px;
    	align-items : center;
    	justify-content : space-between;
    }
    .total_label{
    	font-weight : 600;
    	font-size : 1.25rem;
    	
    }
    .total_input{
    	color : var(--sec_color);
    	font-weight : 600;
    	font-size : 1.5rem;
    }
    
    .cal_total{
    	font-weight : 600;
    	color : var(--sec_color);
    	width : 150px;
    }	
	
    
    .bank_transfer_content{
    	width : 100%;
    	height : 125px;
    	background-color : #eef0f3;
    	padding : 10px;
    }
    .triangle_up{
        background-color:#eef0f3;
        height: 10px;
        width: 15px;
        clip-path: polygon(50% 0, 0% 100%, 100% 100%);
    	margin-left : 10px;
    }
    
    
    .bank_transfer_content p{
    	font-size : 0.9rem;    
    }
    .card_transfer{
    	display : none;
    }
    .card_transfer_content{
    	background-color : #eef0f3;
    	padding : 10px;	
    	width : 100%;
    	height : 75px;	
    	
    }
    .transfer_option, .card_option{
    	width : 7.5px;
    	height : 7.5px;
        border-radius : 1000px;
    	background-color :#007bff;
    	outline : 0;
    }
    .transfer_button, .card_button{
    	width : 20px;
    	height : 20px;
    	border-radius : 100px;
    	display : flex;
    	justify-content : center;
    	align-items : center;
    	background-color : #ffffff;
    	border : solid 2px #007bff;
    	
    }
    .transfer_payment,.card_payment{
       display : flex;
       align-items : center;
       height : 25px;
       margin-top : 15px;
	   
    }
    .card_option{
    	display : none;
    }
    
    .privacy_policy{
    	margin-top : 25px;
    }
    
    .button_text{
    	font-size : 0.9rem;
    }
    input[type = "submit"]{
    	width : 225px;
    	height : 45px;
    	color : #ffffff;
    	font-weight : 600;
    	background-color :var(--pri_color);
    	border : none;
    	outline : none;
    	border-radius : 50px;
    }
    
    input[type = "submit"]:hover{
       box-shadow: 1px 1px 3px 3px #3e3e3e4C;
    }
    .card_image{
    	width : 150px;
    	height : 40px;
    }
	.card_button_text{
		font-size : 0.75rem;
	}
	
	
}