nav.crumb { background-color: #002449; color: #ffffff; }
nav.crumb ul li { color: #ffffff; }
nav.crumb ul li a { color: #ffffff; }
nav.crumb ul li:after { color: #ffffff; }


.b-angle { position: absolute; top: 96px; left: 0; height: 255px; width: auto; opacity: 1; }
.b-angle.b-right { left: auto; right: -50px; }
.b-angle.b-right svg { height: 100%; fill: none; stroke: #009DDB; stroke-width: 1px; }
.banner p { max-width: unset; color: #004677; }
.banner h1 { color: #004677; }
.banner .wrapper {background: linear-gradient(90deg, rgba(242, 245, 248, 0) 0%, rgba(242, 245, 248, 0) 45%, rgba(215, 245, 246, 0.7) 60%, #a6e6ee 78%, #7bcbf5 100%
  ); } 



.sample-section { background: linear-gradient( #002449 19%, #003560 59%, #004677 100%); padding: 64px 16px 96px 16px; width: 100%;}
.sample-section .container:first-child { max-width: 1000px; margin: 0 auto; position: relative; }
.sample-section .container:nth-child(2) { max-width: 860px; margin: 0 auto; position: relative; }
#content .intro-heading { color: #ffffff; margin-bottom: 48px; text-align: center; }
#content .intro-heading span { font-weight:500;}

.sample-cards-list { display: flex; flex-direction: column; gap: 24px; width: 100%; }
#content a.sample-card, .sample-card { display: flex; flex-direction: row; float: none; clear: both; width: 100%; background-color: transparent; border: 2px solid #ffffff; text-decoration: none; color: #ffffff; min-height: 180px; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; position: relative;}
#content .sample-card .card-right h3 {display: none;}

.sample-card:hover { border-color: #969696; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); transform: translateY(-2px); }

#content a.sample-card .card-left { width: 32% ; min-width: 220px; float: none; background-color: transparent; border-right: 1px solid #ffffff; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; position: relative; overflow: hidden; transition: border-color 0.3s ease;}
.card-title { font-size: 1.125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; line-height: 1.25; color: #ffffff; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 2; opacity: 1; visibility: visible;}
#content .card-hover-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.4s ease; z-index: 1; transform: scale(1.05); }
 

.sample-card:hover .card-title { opacity: 0; visibility: hidden; }
#content .sample-card:hover .card-hover-img { opacity: 1; visibility: visible; transform: scale(1); height: 100%;}

 

#content a.sample-card .card-right { width: 69%; float: none; padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; background-color: #ffffff; }
#content a.sample-card .card-description { font-weight: 300; color: #002449; }


#content p.arrow { display: inline-block; font-family: Montserrat; text-decoration: none; font-weight: 600; font-size: 1.175rem; letter-spacing: 1px; text-transform: uppercase; position: relative; line-height: 1.5; color: #004677; margin-bottom: 0; width: fit-content; }
#content p.arrow:after { content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path style="fill:%23004677;" d="M7.3,14.9c-0.1,0-0.3-0.1-0.4-0.2l-0.8-0.8C6,13.8,6,13.7,6,13.5s0.1-0.3,0.2-0.4L10,9.3H2.5C2.2,9.3,2,9,2,8.7V7.6c0-0.3,0.2-0.5,0.5-0.5H10L6.1,3.2C6,3.1,6,2.9,6,2.8S6,2.5,6.1,2.4l0.8-0.8C7,1.5,7.2,1.5,7.3,1.5s0.3,0.1,0.4,0.2l6.2,6.2C13.9,7.9,14,8,14,8.2s-0.1,0.3-0.2,0.4l-6.2,6.2C7.6,14.8,7.4,14.9,7.3,14.9z"/></svg>'); height: 16px; width: 16px; display: inline-block; margin-left: 10px; position: relative; top: 2px; transition: transform .25s ease-in-out; }
#content p.arrow:before { content: ''; display: block; width: 0%; left: 50%; background-color: #009DDB; transition: all .25s ease-in-out; position: absolute; bottom: -0.25rem; height: 2px; }
.sample-card:hover .arrow:before { width: 100%; left: 0px; }
.sample-card:hover .arrow:after { transform: translateX(3px); }


section.ctafooter { overflow: hidden; background-color: #004677;}
section.ctafooter .angle { position: absolute; top: 0; left: 0; height: 100%; width: auto; opacity: 1; }
section.ctafooter .angle svg { height: 100%; fill: none; stroke: #009DDB; stroke-linecap: square; stroke-miterlimit: 10; stroke-width: 1px; }
section.ctafooter .angle svg .stroke-dash { stroke-dasharray: 8,8; }
section.ctafooter .angle.right { left: auto; right: 0; }
section.ctafooter, #contactform { position: relative; overflow: hidden; }


section.ctafooter.angle-bg-left, #contactform {
    --angle-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 222 378' preserveAspectRatio='none'%3E%3Cstyle%3E line, path %7B stroke: %23009DDB; stroke-width: 3px; stroke-linecap: square; stroke-miterlimit: 10; fill: none; %7D .stroke-dash %7B stroke-dasharray: 8,8; %7D %3C/style%3E%3Cline x1='220.5' y1='188.7' x2='0.5' y2='0.1'/%3E%3Cline x1='220.5' y1='189.3' x2='0.5' y2='377.9'/%3E%3Cline x1='1' y1='188.9' x2='221' y2='188.9'/%3E%3Cpath class='stroke-dash' d='M221,0v378'/%3E%3C/svg%3E");
    background-image: var(--angle-svg), var(--angle-svg), var(--angle-svg);
    background-repeat: no-repeat;
    background-position: left top, left center, left bottom;
    background-size: 160px 33.333333%;
    border-top: 1px solid #009DDB;
}


@media (max-width: 1685px) { 
   section.ctafooter.angle-bg-left .container{padding-left:96px;}
}

@media (max-width: 1485px) { 
   section.ctafooter.angle-bg-left .container{padding-left:160px;}
}


@media (max-width: 1400px) { 
   section.ctafooter.angle-bg-left .container{padding-left:224px;}
}



@media (max-width: 1060px) { 
   section.ctafooter.angle-bg-left .container{padding-left:32px;}
   section.ctafooter.angle-bg-left, #contactform {background-image:none;}
}




section.ctafooter .container { position: relative; z-index: 2; }
#content .ctafooter h2, #content .ctafooter p {color:#ffffff;} 



@media (max-width: 1450px) { 
    .b-angle.b-right {
        right: -100px;
    }

}



@media (max-width: 1350px) { 
    .b-angle.b-right {
        right: -130px;
    }

}

@media (max-width: 1300px) { 
    .b-angle.b-right {
        right: -190px;
    }
}


@media (max-width: 1250px) { 
    .b-angle.b-right {
        right: -230px;
    }

}

@media (max-width: 1200px) { 
    .b-angle.b-right {
        display: none;
    }

}

@media (max-width: 1024px) { 
  .banner.l3 .bg {padding-top: 0;}
}

@media (max-width: 768px) { 
.intro-heading { font-size: 1.375rem; margin-bottom: 32px; } 
#content a.sample-card, .sample-card { flex-direction: column; min-height: auto; } 
#content a.sample-card .card-left { width: 100%; min-height: 330px; border-right: none; border-bottom: 1px solid #ffffff; } 
#content a.sample-card .card-right { width: 100%; } .card-title { opacity: 0 ; visibility: hidden;} 
#content .card-hover-img { opacity: 1 ; visibility: visible; transform: scale(1); height: 100%;} 

#content .sample-card .card-right h3 {display: block;}
}