/* Fonts  */
@font-face{font-family:montserratmedium;src:url(fonts/Montserrat-Medium.otf);}
@font-face{font-family:montserratlight;src:url(fonts/Montserrat-Light.otf);}
@font-face{font-family:montserratbold;src:url(fonts/Montserrat-Bold.otf);}
@font-face{font-family:opensanslight;src:url(fonts/OpenSans-Light.ttf);}
@font-face{font-family:opensansbold;src:url(fonts/OpenSans-Bold.ttf);}
@font-face{font-family:opensansmedium;src:url(fonts/OpenSans-Medium.ttf);}
@font-face{font-family:robotocondensedlight;src:url(fonts/RobotoCondensed-Light.ttf);}
/* =>( Font close)<= */

:root{
    --accent:#F5773D;
    --dark:#000000;
    --tan:#D4CBC6;
    --container:1200px;
    --side:6vw;
}

*{padding:0;margin:0;box-sizing:border-box;}

html,body{width:100%;overflow-x:hidden;scroll-behavior:smooth;}
body{background-color:#000000;}
body.no-scroll{overflow:hidden;}
img{max-width:100%;height:auto;display:block;}
button{font-family:inherit;}
/* =>( Simple Close)<= */

/* Header  */
header{
    height:90px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 var(--side);
    position:relative;
    z-index:50;
}
.logo{width:70px;max-width:70px;}

/* >ul (off-canvas drawer nav, works the same on every screen size) */
ul{
    list-style:none;
    width:320px;
    max-width:85vw;
    height:100vh;
    background-color:#0B0A0A;
    position:fixed;
    top:0;
    left:0;
    padding:110px 40px 40px;
    display:flex;
    flex-direction:column;
    gap:6px;
    z-index:200;
    transform:translateX(-100%);
    transition:transform .4s ease;
}
ul.nav-open{transform:translateX(0);}

li{
    color:rgb(221,221,221);
    font-size:20px;
    list-style:none;
    padding:10px 0;
    font-family:'opensansmedium';
    cursor:pointer;
    width:auto;
}
li:hover{color:gray;}
.ullispan{margin-left:0;}

.ri-menu-line{
    font-size:30px;
    color:white;
    cursor:pointer;
}
.ri-menu-line:hover{color:var(--accent);}
.ri-menu-line:active{color:#3B68ED;}

.ri-close-large-fill{
    color:white;
    font-size:26px;
    position:absolute;
    top:28px;
    right:28px;
    cursor:pointer;
}
.ri-close-large-fill:hover{color:var(--accent);}
/* =>( Header Close)<= */

/* Main  */
.main{
    background-color:var(--tan);
    padding:120px var(--side) 60px;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
        "tag  img"
        "title img"
        "para img"
        "btn  img"
        "boxes boxes";
    column-gap:40px;
    row-gap:10px;
    align-items:start;
}

.mainh4-Top{grid-area:tag;color:#000000;font-family:'montserratmedium';font-size:clamp(16px,1.6vw,22px);letter-spacing:2.2px;}
.mainh1-heading{grid-area:title;color:#000000;font-size:clamp(30px,4vw,48px);letter-spacing:1px;font-family:'montserratbold';line-height:1.2;margin-top:10px;}
.main-spanh1{color:var(--accent);}
.main-paragraph_withlink{grid-area:para;font-family:'opensansmedium';font-size:17px;color:#000000;margin-top:10px;}
.mainlink{color:#000000;text-decoration:underline #000000;text-underline-offset:6px;}
.mainlink:hover{text-decoration:underline var(--accent);}

.main-btn{
    grid-area:btn;
    padding:22px 44px;
    font-size:18px;
    font-family:'opensansmedium';
    border-radius:10px;
    background-color:#000000;
    color:white;
    border:2px solid #000000;
    letter-spacing:1px;
    cursor:pointer;
    justify-self:start;
    margin-top:20px;
}
.main-btn:hover{background-color:var(--accent);border:2px solid var(--accent);}

.main-pic_rightside{grid-area:img;width:100%;max-width:560px;justify-self:end;align-self:center;}

.main_container{
    grid-area:boxes;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top:50px;
}

.main_container .main_container-box1,
.main_container .main_container-box2,
.main_container .main_container-box3,
.main_container .main_container-box4{
    width:100%;
    height:auto;
    min-height:230px;
    background-color:white;
    border-radius:20px;
    border-top:8px solid var(--accent);
    padding:40px 28px;
}

.main_container .maincontainer-box1_h4,
.main_container .maincontainer-box2_h4,
.main_container .maincontainer-box3_h4,
.main_container .maincontainer-box4_h4{
    font-size:24px;
    font-family:'robotocondensedlight';
    margin-top:14px;
}

.main_container .maincontainer-box1_moremove,
.main_container .maincontainer-box2_moremove,
.main_container .maincontainer-box3_moremove,
.main_container .maincontainer-box4_moremove{margin-top:18px;}

.main_container .maincontainer-box1_more,
.main_container .maincontainer-box2_more,
.main_container .maincontainer-box3_more,
.main_container .maincontainer-box4_more{
    font-family:'opensansmedium';
    font-weight:600;
    font-size:16px;
    text-underline-offset:6px;
    letter-spacing:1px;
    color:#000000;
    text-decoration-thickness:2px;
    text-decoration-color:#C0C0C0;
}
.main_container .maincontainer-box1_more:hover,
.main_container .maincontainer-box2_more:hover,
.main_container .maincontainer-box3_more:hover,
.main_container .maincontainer-box4_more:hover{color:var(--accent);}
/* =>( Main Close)<= */

/* OurWay */
.OurWay{
    padding:80px var(--side);
    text-align:center;
}
.OurWay .ourway-h1_heading{
    font-size:clamp(32px,5vw,55px);
    color:var(--accent);
    font-family:'montserratbold';
}
.OurWay .ourway-paragraph{
    font-size:19px;
    font-family:'opensanslight';
    color:rgb(255,255,255);
    max-width:800px;
    margin:20px auto 0;
    line-height:1.7;
}
.OurWay .ourway-paragraph .ourway-paragraph_span{margin-left:6px;}

.container2{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top:50px;
    text-align:left;
}

.container2-ourway_box1,.container2-ourway_box2,.container2-ourway_box3,.container2-ourway_box4{
    height:auto;
    min-height:420px;
    padding:22px;
}

.container2 [class*="_h1"]{
    font-size:clamp(45px,5vw,65px);
    letter-spacing:1px;
    font-family:'montserratbold';
    color:white;
}
.container2 [class*="_circle"]{
    width:63px;height:63px;border-radius:100%;background-color:var(--accent);margin-top:35px;
}
.container2 p{
    font-size:17px;
    font-family:'opensanslight';
    color:white;
    margin-top:20px;
    line-height:1.7;
}
.container2 p:first-of-type{margin-top:35px;}
.container2 p span{margin-left:5px;}
/* =>( OurWay Close)<= */

/* ourPrinter  */
.ourprinter{
    background-color:var(--tan);
    padding:70px var(--side);
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
        "pic heading"
        "pic para"
        "pic link"
        "pic btn";
    column-gap:50px;
    row-gap:16px;
    align-items:start;
}
.ourprinter-pic{grid-area:pic;width:100%;align-self:center;}
.ourprinter-h1_heading{grid-area:heading;color:#000000;font-size:clamp(28px,3.2vw,40px);font-family:'montserratmedium';max-width:480px;}
.printer-h1_span{color:var(--accent);}
.ourptinter-paragraph{grid-area:para;max-width:480px;font-size:17px;line-height:1.7;font-family:'opensansmedium';}
.ourprinter-link{grid-area:link;font-size:17px;font-family:'opensansmedium';}
.ourprinterlink{color:#000000;text-underline-offset:6px;cursor:pointer;}
.ourprinterlink:hover{text-decoration-color:var(--accent);}
.ourprinter-btn{
    grid-area:btn;
    padding:22px 44px;font-size:18px;font-family:'opensansmedium';border-radius:10px;
    background-color:#000000;color:white;border:2px solid #000000;letter-spacing:1px;cursor:pointer;
    justify-self:start;margin-top:10px;
}
.ourprinter-btn:hover{border:2px solid var(--accent);background-color:var(--accent);}
/* =>( ourPrinter Close)<= */

/* team  */
.team{padding:90px var(--side);text-align:center;}
.team-h1_heading{font-size:clamp(32px,5vw,55px);font-family:'montserratmedium';color:var(--accent);}
.team-link{color:white;font-size:19px;font-family:'opensansmedium';margin-top:16px;}
.teamlink{color:white;text-underline-offset:7px;transition:.1s;}
.teamlink:hover{text-decoration-color:var(--accent);}

.team-container1,.team-container2{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    margin-top:50px;
    text-align:left;
}

.team-container1_box1,.team-container1_box2,.team-container2_box3,.team-container2_box4{
    background-color:white;
    border-radius:20px;
    padding:30px;
    display:grid;
    grid-template-columns:120px 1fr;
    column-gap:20px;
    row-gap:8px;
    align-items:start;
}

.team-container1box1_pic,.team-container1box2_pic{
    grid-column:1;grid-row:1 / span 3;
    width:100px;height:100px;
    border-radius:100%;object-fit:cover;
}

.teamcontainer1-p1,.teamcontainer1b2-p1{grid-column:2;font-family:'opensansmedium';font-size:17px;color:#C0C0C0;align-self:end;}
.teamcontainer1-h4,.teamcontainer1b2-h4{grid-column:2;font-family:'montserratmedium';font-size:26px;color:var(--accent);}
.teamcontainer1-p2,.teamcontainer1b2-p2{grid-column:2;font-size:16px;font-family:'opensanslight';line-height:1.7;}
.teambox1-social_icons,.teambox2-social_icons{
    grid-column:1 / -1;
    display:flex;align-items:center;gap:24px;margin-top:20px;
}
.social-1:hover{cursor:pointer;}
/* =>( Team Close)<= */

/* improve */
.improve{
    background-color:var(--tan);
    padding:80px var(--side);
    margin-top:40px;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
        "heading pic"
        "text pic"
        "link pic"
        "btn pic";
    column-gap:50px;
    row-gap:16px;
    align-items:start;
}
.improve-h1_heading{grid-area:heading;max-width:460px;font-size:clamp(26px,3.2vw,40px);font-family:'montserratmedium';}
.improve-h1_span{color:var(--accent);}
.pre-space{
    grid-area:text;
    font-size:15px;font-family:'opensanslight';max-width:460px;line-height:1.8;
    letter-spacing:.5px;color:#000000;font-weight:600;white-space:pre-wrap;
}
.improve-link{grid-area:link;font-size:17px;font-family:'opensansmedium';}
.improvelink{color:#000000;text-underline-offset:6px;}
.improvelink:hover{text-decoration-color:var(--accent);}
.improve-btn{
    grid-area:btn;
    padding:22px 44px;font-size:18px;font-family:'opensansmedium';border-radius:10px;
    background-color:#000000;color:white;border:2px solid #000000;letter-spacing:1px;cursor:pointer;
    justify-self:start;margin-top:10px;
}
.improve-btn:hover{border:2px solid var(--accent);background-color:var(--accent);}
.improve-pic{grid-area:pic;width:100%;align-self:center;}
/* =>( Improve Close)<= */

/* Testimonials */
.Testimonials{padding:80px var(--side);text-align:center;}
.testimonial-h1_heading{font-size:clamp(32px,5vw,50px);font-family:'montserratbold';color:white;}

/* Group the three row-wrappers visually into one responsive grid without touching HTML */
.Testimonials{
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
}
.Testimonials .testimonial-h1_heading{grid-column:1/-1;}
.container1-testimonials,.container2-testimonials,.container3-testimonials{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:40px;
    margin-top:40px;
    grid-column:1/-1;
    width:100%;
    max-width:var(--container);
}

.testimonial-bo1,.testimonial-bo2,.testimonial-bo3,.testimonial-bo4,.testimonial-bo5,.testimonial-bo6{
    width:100%;
    height:auto;
    padding:10px 20px;
    text-align:left;
}

.container1-testimonial_box1pic{
    border-radius:100%;object-fit:cover;border:10px solid var(--accent);
    width:100px;height:100px;
}
.testimonial-paragraph_box1{font-size:17px;font-family:'opensansmedium';color:white;line-height:1.7;margin-top:20px;}
.testimonial-h1_box1{font-size:19px;color:var(--accent);font-family:'montserratmedium';letter-spacing:2px;margin-top:16px;}
/* =>( Testimonial Close)<= */

/* about */
.about{
    background-color:var(--tan);
    padding:90px var(--side);
    margin-top:60px;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
        "pic heading"
        "pic tagline"
        "pic para"
        "pic link"
        "pic btn"
        "boxes boxes";
    column-gap:50px;
    row-gap:14px;
    align-items:start;
}
.about-pic{grid-area:pic;width:100%;align-self:center;}
.about-h1_heading{grid-area:heading;color:#000000;font-size:clamp(30px,4vw,50px);font-family:'montserratbold';}
.about-h4{grid-area:tagline;font-size:21px;font-weight:600;font-family:'montserratmedium';}
.about-paragraph{grid-area:para;font-size:17px;font-family:'opensanslight';line-height:1.8;letter-spacing:.5px;max-width:520px;font-weight:600;}
.about-link{grid-area:link;font-size:16px;font-family:'opensansmedium';font-style:italic;}
.aboutlink{color:#000000;text-underline-offset:6px;}
.aboutlink:hover{text-decoration-color:transparent;}
.about-btn{
    grid-area:btn;
    padding:22px 44px;font-size:18px;font-family:'opensansmedium';border-radius:10px;
    background-color:#000000;color:white;border:2px solid #000000;letter-spacing:1px;cursor:pointer;
    justify-self:start;margin-top:10px;
}
.about-btn:hover{border:2px solid var(--accent);background-color:var(--accent);}

.bottomcontainer{
    grid-area:boxes;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
    margin-top:50px;
}
.bottombox1,.bottombox2,.bottombox3{
    width:100%;height:auto;min-height:170px;background-color:var(--accent);border-radius:20px;padding:35px 30px;
}
.bottombox1-h4,.bottombox2-h4,.bottombox3-h4{font-size:22px;font-family:'montserratmedium';color:white;letter-spacing:1px;}
.bottombox1-p,.bottombox2-p,.bottombox3-p{font-family:'opensanslight';color:white;font-size:17px;margin-top:18px;line-height:1.7;}
/* =>( About Close)<= */

/* bethefirst */
.Bethefirst{
    background-image:url(../images/rr.jpg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    padding:80px var(--side);
    display:flex;
    flex-direction:column;
    align-items:center;
}
.FORM{
    width:100%;
    max-width:900px;
    background-color:white;
    border-radius:20px;
    padding:50px clamp(24px,6vw,90px);
    display:flex;
    flex-direction:column;
    gap:14px;
}
.form-heading_h1{font-size:clamp(28px,4vw,44px);font-family:'montserratbold';color:#000000;}
.form-paragraph{font-size:19px;line-height:1.7;letter-spacing:.5px;font-family:'opensanslight';}
.form-span{margin-left:6px;}
.name{font-size:18px;font-family:'opensanslight';margin-top:20px;}
.inp-email{
    font-size:17px;padding:12px 10px;border:0;border-bottom:3px solid black;width:100%;
}
.inp-email:focus{outline:0;}
.form-btn{
    align-self:flex-start;
    padding:14px 40px;font-size:18px;border-radius:30px;font-family:'opensansmedium';
    border:1px solid var(--accent);background-color:var(--accent);color:white;cursor:pointer;margin-top:6px;
}
.form-btn:hover{background-color:#f56929;}
.Bethefirst-link{color:white;font-size:18px;font-family:'opensansmedium';margin-top:30px;}
.Bethefirstlink{color:white;text-underline-offset:6px;}
.Bethefirstlink:hover{color:rgba(255,255,255,.89);}

/* Contactus */
.Contactus{
    background-color:var(--tan);
    padding:80px var(--side);
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:50px;
    row-gap:10px;
    align-items:start;
}
.contact-pic{grid-column:1;grid-row:1 / span 10;width:100%;align-self:center;justify-self:center;}
.contact-h1_heading{grid-column:2;font-size:clamp(28px,4vw,50px);font-family:'montserratbold';margin-bottom:10px;}
.contact-p1,.contact-p2,.contact-p3,.contact-p4{
    grid-column:2;
    font-size:19px;font-family:'opensanslight';color:#000;margin-top:6px;max-width:400px;
}
.contact-sp1{color:#f56929;font-family:'montserratmedium';}
.contact-link{grid-column:2;font-size:16px;font-family:'opensanslight';font-weight:600;margin-top:16px;}
.contactlink{color:#000;text-underline-offset:6px;}
.contactlink:hover{text-decoration-color:#f56929;}
.contact-btn{grid-column:2;
    grid-area:btn;
    padding:18px 60px;border-radius:10px;font-size:18px;font-family:'opensansmedium';
    background-color:#000000;color:white;border:1px solid #000000;cursor:pointer;justify-self:start;margin-top:10px;
}
.contact-btn:hover{background-color:#f56929;border:1px solid #f56929;}

/* footer */
.footer{
    background-color:#333333;
    padding:40px var(--side);
    text-align:center;
}
.footer-paragraph{color:white;font-size:16px;font-family:'opensansmedium';}
.footerlink{font-size:14px;font-family:'opensansmedium';color:white;margin-top:16px;}
.nice{color:rgba(130,177,221,.616);}
.nice:hover{color:gray;text-decoration:none;}

/* ===================== Micro-details & animations ===================== */
a{transition:color .25s ease, text-decoration-color .25s ease;}

/* logo */
.logo{transition:transform .3s ease;}
.logo:hover{transform:scale(1.06) rotate(-2deg);}

/* nav items */
li{transition:color .25s ease, transform .25s ease;}
li:hover{transform:translateX(6px);}

.ri-menu-line{transition:transform .3s ease,color .25s ease;}
.ri-menu-line:hover{transform:rotate(90deg);}
.ri-close-large-fill{transition:transform .3s ease,color .25s ease;}
.ri-close-large-fill:hover{transform:rotate(90deg);}

/* dim backdrop behind the open drawer */
body.no-scroll::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:150;
    animation:fadeIn .35s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* hero image gentle entrance */
.main-pic_rightside{animation:heroFloatIn .9s ease both;}
@keyframes heroFloatIn{
    from{opacity:0;transform:translateY(24px) scale(.96);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

/* buttons - tactile hover/press */
.main-btn,.ourprinter-btn,.improve-btn,.about-btn,.contact-btn,.form-btn{
    transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.main-btn:hover,.ourprinter-btn:hover,.improve-btn:hover,.about-btn:hover,.contact-btn:hover,.form-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(0,0,0,.2);
}
.main-btn:active,.ourprinter-btn:active,.improve-btn:active,.about-btn:active,.contact-btn:active,.form-btn:active{
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0,0,0,.15);
}

/* cards - lift on hover */
.main_container-box1,.main_container-box2,.main_container-box3,.main_container-box4,
.container2-ourway_box1,.container2-ourway_box2,.container2-ourway_box3,.container2-ourway_box4,
.team-container1_box1,.team-container1_box2,.team-container2_box3,.team-container2_box4,
.testimonial-bo1,.testimonial-bo2,.testimonial-bo3,.testimonial-bo4,.testimonial-bo5,.testimonial-bo6,
.bottombox1,.bottombox2,.bottombox3{
    transition:transform .35s ease, box-shadow .35s ease;
}
.main_container-box1:hover,.main_container-box2:hover,.main_container-box3:hover,.main_container-box4:hover,
.team-container1_box1:hover,.team-container1_box2:hover,.team-container2_box3:hover,.team-container2_box4:hover,
.bottombox1:hover,.bottombox2:hover,.bottombox3:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.container2-ourway_box1:hover,.container2-ourway_box2:hover,.container2-ourway_box3:hover,.container2-ourway_box4:hover{
    transform:translateY(-6px);
}
.testimonial-bo1:hover,.testimonial-bo2:hover,.testimonial-bo3:hover,.testimonial-bo4:hover,.testimonial-bo5:hover,.testimonial-bo6:hover{
    transform:translateY(-6px);
}

/* circles + "more" links */
.container2 [class*="_circle"]{transition:transform .3s ease;}
.container2-ourway_box1:hover [class*="_circle"],
.container2-ourway_box2:hover [class*="_circle"],
.container2-ourway_box3:hover [class*="_circle"],
.container2-ourway_box4:hover [class*="_circle"]{transform:scale(1.15);}

/* photos - subtle zoom on hover */
.team-container1box1_pic,.team-container1box2_pic,.container1-testimonial_box1pic{
    transition:transform .4s ease;
}
.team-container1box1_pic:hover,.team-container1box2_pic:hover,.container1-testimonial_box1pic:hover{
    transform:scale(1.08);
}

/* social icons */
.social-1{transition:transform .25s ease;}
.social-1:hover{transform:translateY(-4px) scale(1.1);}

/* form input focus glow */
.inp-email{transition:border-color .25s ease;}
.inp-email:focus{border-bottom-color:var(--accent);}

/* ---- scroll reveal (driven by js/script.js) ---- */
.reveal{
    opacity:0;
    transform:translateY(36px);
    transition:opacity .7s ease, transform .7s ease;
    will-change:opacity, transform;
}
.reveal.is-visible{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
    .reveal{opacity:1 !important;transform:none !important;}
}