/* ========================= Fonts ========================= */ @font-face{ font-family:'HNeue'; src:url('../fonts/HelveticaNeueBold.eot'); src:url('../fonts/HelveticaNeueBold.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeueBold.woff') format('woff'); font-weight:bold;font-style:normal } @font-face{ font-family:'HNeue'; src:url('../fonts/HelveticaNeueLight.eot'); src:url('../fonts/HelveticaNeueLight.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeueLight.woff') format('woff'); font-weight:300;font-style:normal } @font-face{ font-family:'HNeue'; src:url('../fonts/HelveticaNeueRoman.eot'); src:url('../fonts/HelveticaNeueRoman.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeueRoman.woff') format('woff'); font-weight:normal;font-style:normal } /* ========================= Base — guarantee ONE scrollbar (on ) ========================= */ *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} html{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth} body{ overflow:visible; /* no scrolling on body */ font-family:HNeue,Helvetica,Arial,sans-serif; font-size:16px;background:#fff } p{margin:1.5em 0} a,p{transition:color .4s ease} /* Kill nested scrollbars (legacy scripts sometimes add overflow) */ .section,.wrap,.section1,.section2,.section3,.section4, .section *[style*="overflow"], .wrap *[style*="overflow"]{ overflow:visible !important } /* wrappers */ body>.section{overflow-x:hidden} .section{position:relative} .section .wrap{width:940px;max-width:940px;margin:0 auto;position:relative;padding:0 10px} .section .menu{padding-top:1px;height:144px} .section .menu ul{list-style:none;position:absolute;right:0;top:64px} .section .menu ul li{float:left} .section .menu ul li a{ display:block;float:left;background:url('../images/arrow_yellow.png') 9px 50% no-repeat; text-transform:uppercase;font-weight:bold;font-size:13px;padding:10px 20px;text-decoration:none } .section .menu ul li.last a{padding-right:0} .section h2{color:#f9edc6;font-size:40px;font-weight:300;text-transform:uppercase;margin:50px 0 45px} /* ========================= Section 1 - Home ========================= */ body>.section1{background:url('../images/bg1.jpg') 50% 0;color:#fff} body>.section1 .wrap{min-height:701px} .section1 .darkThingie{ width:1800px;height:110px;right:380px;top:0;position:absolute;z-index:1; background:url('../images/bg_header.png') 100% 0 no-repeat } .section1 .menu{height:110px;position:relative;z-index:2} .section1 .menu ul{top:40px} .section1 .menu ul li a{color:#969199;background-image:url('../images/arrow_grey.png')} .section1 .menu ul li a:hover{color:#fff;background-image:url('../images/arrow_lightgrey.png')} .section1 .menu ul li a.active{color:#fff;background-image:url('../images/arrow_yellow.png')} h1.bsdaccullogo{ background:url('../images/bsdaccul-logo.png') no-repeat center/contain; float:left;width:300px;height:125px;margin-top:-10px;text-indent:-31337px } .section1 .languages{position:absolute;top:110px;right:0;z-index:501} .section1 h2.slogan{margin:60px 0 45px;font-size:clamp(28px,4.2vw,56px);line-height:1.1} .section1 .text{width:500px;max-width:100%;line-height:140%} .section1 .buttons{margin-top:25px} .section1 .slogan,.section1 .text,.section1 .buttons{position:relative;z-index:10000} /* art */ .section1 .earth{position:absolute;bottom:0;right:-160px;width:551px;height:589px} div.rotator{position:absolute;bottom:0;height:592px} div.rotator ul{margin:0;padding:0} div.rotator ul li{float:left;position:absolute;list-style:none;opacity:0;transition:opacity .6s ease} div.rotator ul li.show{z-index:500;opacity:1} /* ========================= Section 2 - Services ========================= */ body>.section2{background:url('../images/bg2.png') 50% 0} body>.section2 .wrap{min-height:695px} .section2 .menu ul li a{color:#909090;background-image:url('../images/arrow_lightgrey.png')} .section2 .menu ul li a:hover{color:#181218;background-image:url('../images/arrow_grey.png')} .section2 .menu ul li a.active{color:#181218;background-image:url('../images/arrow_yellow.png')} .section2 h2{color:#362840;position:relative;z-index:2;width:400px;font-size:clamp(28px,4vw,40px)} .section2 .text{position:absolute;top:154px;left:310px;line-height:130%;color:#808080} .section2 p{margin:1.2em 0} .section2 h3{color:#8c728a;font-size:17px;font-weight:bold;text-transform:uppercase} .section2 .marian{width:341px;height:616px;background:url('../images/marian_merged.png');position:absolute;bottom:0;left:-40px} .section2 .buttons{position:absolute;bottom:46px;right:0;overflow:hidden} .section2 .button{float:left;cursor:pointer;background:url('../images/btns_tabs.png') no-repeat;height:34px;text-indent:-31337px} .section2 .button.one{width:123px}.section2 .button.one:hover{background-position:0 -34px}.section2 .button.one.active{background-position:0 -68px} .section2 .button.two{width:145px;background-position:-123px 0}.section2 .button.two:hover{background-position:-123px -34px}.section2 .button.two.active{background-position:-123px -68px} .section2 .button.three{width:146px;background-position:-268px 0}.section2 .button.three:hover{background-position:-268px -34px}.section2 .button.three.active{background-position:-268px -68px} .section2 .servicesall ul, .section2 .servicesloans ul{float:left;width:100%;list-style:none;padding-top:20px} .section2 .servicesall ul li, .section2 .servicesloans ul li{ background:url('../images/arrow_lightyellow_shade.png') 0 4px no-repeat; padding-left:20px;margin:13px 0;font-size:14px;line-height:140%; transition:background-position .3s ease } .section2 .servicesall ul li:hover, .section2 .servicesloans ul li:hover{background:url('../images/arrow_yellow_shade.png') 4px 4px no-repeat} /* ========================= Section 3 - About ========================= */ body>.section3{background:url('../images/bg3.jpg') 50% 0;color:#fff} body>.section3 .wrap{min-height:695px;background:url('../images/about-us-savings.png') 0% 100% no-repeat} .section3 .menu ul li a{color:#969199;background-image:url('../images/arrow_grey.png')} .section3 .menu ul li a:hover{color:#fff;background-image:url('../images/arrow_lightgrey.png')} .section3 .menu ul li a.active{color:#fff;background-image:url('../images/arrow_yellow.png')} .section3 h2{font-size:37px;margin-top:55px} .section3 .text{margin-top:40px;width:810px;max-width:100%} .section3 .services{margin-left:380px} /* ========================= Section 4 - Contact & Map ========================= */ body>.section4{position:relative} .section4,.section4 .wrap,.section4 .mapOverlay,.section4 .mapOverlay .top{overflow:visible!important} .section4 .menuBg{position:absolute;top:0;left:0;width:100%;height:148px;z-index:3;background:url('../images/bg4.png') 50% 0} .section4 #map{position:absolute;top:144px;left:0;width:100%;height:580px;border-bottom:1px solid #cdcac6;background:#ebe6dd;z-index:2} .section4 .menu{height:147px;position:relative;z-index:4;margin-bottom:-4px} .section4 .menu ul li a{color:#909090;background-image:url('../images/arrow_lightgrey.png')} .section4 .menu ul li a:hover{color:#181218;background-image:url('../images/arrow_grey.png')} .section4 .menu ul li a.active{color:#181218;background-image:url('../images/arrow_yellow.png')} .section4 h2{color:#290e2a} .section4 .mapOverlay{width:100%;max-width:900px;height:auto;padding-top:1px;font-size:12px;color:#909090;position:relative;z-index:3} .section4 .mapOverlay h3{font-size:18px;text-transform:uppercase} .section4 .mapOverlay .top{ background:#fff;border-radius:8px 8px 0 0;overflow:hidden; width:100%;padding:40px 24px 14px;margin-top:46px;line-height:140% } .section4 .mapOverlay .top .column1{float:left;margin-right:40px} .section4 .mapOverlay .top .column2{float:left;width:75%} .section4 .mapOverlay .bottom{ background:#f4f4f4;border-bottom:1px solid rgba(0,0,0,.2);color:#181218;font-size:14px; width:100%;padding:6px 24px;border-radius:0 0 8px 8px;display:flex;flex-wrap:wrap;gap:12px } .section4 .mapOverlay .bottom div{height:24px;line-height:24px;padding:8px 0 8px 32px} .section4 .mapOverlay .bottom .email{background:url('../images/icon_email.png') 0% 50% no-repeat} .section4 .mapOverlay .bottom .phone{background:url('../images/icon_phone.png') 0% 50% no-repeat} /* map iframe in card */ .mapouter,.gmap_canvas{width:100%!important;height:300px!important;overflow:hidden!important} #gmap_canvas{width:100%!important;height:300px!important;border:0} /* ========================= CTAs — CSS only ========================= */ .cta-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px} .btn-cta{ --bg1:#eee;--bg2:#ddd;--bd:#ccc;--fg:#222; position:relative;display:inline-flex;align-items:center;gap:10px; height:40px;padding:0 20px 0 38px;font-weight:bold;font-size:14px;text-transform:uppercase; text-decoration:none;color:var(--fg);background:linear-gradient(to bottom,var(--bg1),var(--bg2)); border:1px solid var(--bd);border-radius:6px;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 1px 2px rgba(0,0,0,.25); transition:transform .12s ease,filter .15s ease,box-shadow .12s ease } .btn-cta::before{ content:"";position:absolute;left:14px;top:50%;width:10px;height:10px;border-right:2px solid var(--fg);border-top:2px solid var(--fg); transform:translateY(-50%) rotate(45deg);opacity:.9 } .btn-cta:hover{filter:brightness(1.03);transform:translateY(-1px)} .btn-cta:active{transform:translateY(0);filter:brightness(.98)} .btn-cta:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 3px rgba(255,222,130,.7)} .btn-cta.is-gold{--bg1:#f3dfb0;--bg2:#e6c97e;--bd:#d6b46a;--fg:#3e2f0f} .btn-cta.is-teal{--bg1:#c9efe7;--bg2:#9eddd1;--bd:#7fc8bb;--fg:#113c36} .btn-cta.is-plum{--bg1:#cbb2d2;--bg2:#a787b2;--bd:#8e6a9a;--fg:#2b142e} /* ========================= Footer — ensure visible + links readable ========================= */ .footer{color:#8c728a;font-size:12px;font-weight:bold;margin-top:22px;min-height:110px;padding-bottom:40px} a.backToTop{display:block;width:940px;height:13px;text-indent:-31337px;background:url('../images/btn_backtotop.png');margin-bottom:35px} a.backToTop:hover{background-position:0% 100%} .footer .copy,.footer .links{float:left;line-height:24px;height:24px;margin-right:18px;overflow:visible} .footer .copy a{color:#362840;text-decoration:underline;font-weight:700} /* ========================= Modals — hidden by default ========================= */ .modal{display:none!important;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000} .modal.open{display:block!important} .modal .modal-content{background:#fff;margin:10vh auto;padding:20px;width:min(90%,600px);border-radius:6px;position:relative} .modal .close{position:absolute;right:12px;top:8px;font-size:28px;line-height:1;cursor:pointer;color:#777} .modal .close:hover{color:#000} /* ========================= Responsive ========================= */ @media (max-width:1024px){ .section2 .text{position:static!important;left:auto!important;top:auto!important;width:auto;margin-top:16px} .section2 .buttons{position:static;margin-top:20px} .section2 .marian{display:none} .section3 .services{margin-left:0} } @media (max-width:600px){ h1.bsdaccullogo{width:190px;height:78px;margin-top:0;background-size:contain} .section .menu{height:auto;padding-top:12px} .section .menu ul{position:static;float:none;margin:8px 0 0} .section .menu ul li{float:none;display:inline-block} .section .menu ul li a{font-size:12px;padding:8px 12px 8px 18px} .section .wrap{width:100%;max-width:100%;padding:0 16px} .section1 h2.slogan{font-size:clamp(22px,7vw,32px);margin:28px 0 18px} .section1 .earth{display:none} .cta-group{gap:10px} .btn-cta{width:100%;justify-content:center;height:46px;padding-left:46px} .section2 h2{width:auto;font-size:clamp(22px,6.5vw,30px);margin:26px 0 14px} .section2 p,.section3 p{font-size:16px} body>.section3 .wrap{background:none} .section3 h2{font-size:clamp(22px,6.5vw,30px);margin-top:24px} .section3 .text{width:100%} .section4 .mapOverlay .top .column1, .section4 .mapOverlay .top .column2{float:none;width:100%;margin:0 0 18px} .mapouter,.gmap_canvas,#gmap_canvas{height:320px!important} } @media (max-width:380px){ .section .menu ul li a{font-size:11px;padding:6px 10px 6px 16px} .btn-cta{height:44px} }