@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
}

html{
    scroll-behavior: smooth;
}

:root{
    --primary-color: #0A1C47;
    --secondary-color: #69BFFF;
}

img { width: 100%; display: block; }
.content_image {
    clip-path: polygon(10% 0%, 90% 0%, 102% 20%, 100% 80%, 100% 100%, 0 100%, 0% 100%, 0% 16%);
}
.container { width: 100%; max-width: 1380px; margin: 0 auto; }
.row { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
.w-100 { width: 100%; height: 100%; }

.product_section .row { gap: 30px; }
.product_section { padding: 60px 20px; position: relative; }
.product_section::after { position: absolute; content: ""; background: url('images/section_bg.png'); background-size: cover; background-position: center center; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; }
.logo_wrapper { padding-bottom: 40px; }
.logo_wrapper img { max-width: 183px; }
.main_box { width: 100%; max-width: 100%; background-color: var(--primary-color); grid-column: span 1 / span 1; clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);  position: relative; }
.main_box .w-100 { padding: 2px; max-width: 100%; }
.main_box h4 { margin: 0; font-size: 24px; font-weight: 600; color: var(--primary-color); line-height: 30px; text-transform: capitalize; text-align: center; }

.main_box .product_btn { margin: 0; padding: 5px 30px; text-decoration: none; font-size: 18px; font-weight: 500; color: var(--primary-color); line-height: 27px; text-transform: capitalize; transition: all 0.3s ease; 
    background-image: url(images/btn_bg.png); background-size: contain; background-repeat: no-repeat; }
    



.main_box .product_btn:hover { color: #fff; }
.content_wrapper { width: 100%; padding: 30px 30px 40px 30px ; display: flex; flex-direction: column; gap: 15px; justify-content: center; align-items: center; }

.shape_box { position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: white;
    clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%); z-index: -1; }

.bg_blue.product_section { background-color: var(--primary-color); }
.bg_blue.product_section::after { display: none; }
.bg_blue .logo_wrapper img { filter: brightness(0) invert(1); }
.bg_blue.product_section .main_box { background-color: #fff; }

.team_section .heading_wrapper { margin-bottom: 50px; }
.team_section .heading_wrapper h3 { font-size: 28px; line-height: 30px; font-weight: 500; text-transform: capitalize; margin: 0; }
.team_section { background-color: var(--secondary-color); }
.team_section.product_section::after { display: none; }
.team_section img.member_img { max-width: 200px; border-radius: 100%; height: 200px; margin: 0 auto; }
.team_section .shape_box , .team_section .main_box { clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); }
.team_section .main_box .w-100 { padding: 30px; }
.team_section .icon_box { display: flex; gap: 10px; align-items: center; justify-content: center; }
.team_section .icon_box img { height: 21px; object-fit: cover; }
.team_section img.mail_icon { width: 21px; height: auto; }
.team_section .main_box h4 { font-size: 18px; font-weight: 600; line-height: 26px; } 
.team_section .content_wrapper { padding: 15px 15px 20px 15px; gap: 20px; }
.team_section .main_box .product_btn { font-size: 20px; line-height: 23px; }

@media (max-width:1199px) {

    .content_wrapper { padding: 20px 20px 30px 20px; }
    .main_box .product_btn { font-size: 16px; line-height: 25px; }
    .main_box h4 { font-size: 22px; line-height: 26px; }
    .shape_box, .main_box { clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%); }
    .team_section img.member_img { padding: 25px 25px 25px 25px; }
    .team_section .main_box .w-100 { padding: 0; }
    .team_section .content_wrapper { padding: 0px 15px 40px 15px; }
    .team_section .main_box .product_btn { font-size: 18px; line-height: 21px; }
    
}

@media (max-width:1024px) {

    .main_box { grid-column: span 2 / span 2; }
    .team_section img.member_img { padding: 0; }
    .team_section .content_wrapper { padding: 15px 15px 40px 15px; }
    .team_section .main_box .w-100 { padding-top: 30px; }
    
}

@media (max-width:575px) {

    .product_section { padding: 50px 20px; }
    .main_box { grid-column: span 4 / span 4; }

}