/*==================================================
            HYPERCUT INDUSTRIAL WEBSITE
==================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    direction:rtl;

    font-family:"Tahoma",sans-serif;

    background:#ffffff;

    color:#333;

    line-height:1.8;

    overflow-x:hidden;

}

/*=========================
      VARIABLES
=========================*/

:root{

--main:#ff6a00;

--dark:#111827;

--dark2:#1f2937;

--light:#ffffff;

--gray:#666;

--border:#e5e7eb;

--shadow:0 10px 30px rgba(0,0,0,.10);

}

/*=========================
      CONTAINER
=========================*/

.container{

width:90%;

max-width:1300px;

margin:auto;

}

/*=========================
        LINKS
=========================*/

a{

text-decoration:none;

transition:.35s;

}

img{

max-width:100%;

display:block;

}

/*=========================
      HEADER
=========================*/

.header{

position:fixed;

top:0;

right:0;

left:0;

height:90px;

background:#111827;

z-index:9999;

box-shadow:0 5px 20px rgba(0,0,0,.15);

}

.header .container{

display:flex;

align-items:center;

justify-content:space-between;

height:100%;

}

/*=========================
        LOGO
=========================*/

.logo img{

height:108px;

}

/*=========================
      NAVIGATION
=========================*/

.navigation ul{

display:flex;

list-style:none;

gap:35px;

}

.navigation a{

color:#fff;

font-size:16px;

font-weight:600;

position:relative;

}

.navigation a::after{

content:"";

position:absolute;

bottom:-8px;

right:0;

width:0;

height:2px;

background:var(--main);

transition:.35s;

}

.navigation a:hover{

color:var(--main);

}

.navigation a:hover::after{

width:100%;

}

/*=========================
      QUOTE BUTTON
=========================*/

.quote-btn{

background:var(--main);

padding:14px 30px;

border-radius:8px;

color:#fff;

font-weight:bold;

}

.quote-btn:hover{

background:#ff7f24;

transform:translateY(-3px);

}

/*=========================
          HERO
=========================*/

.hero{

background:linear-gradient(rgba(17,24,39,.90),rgba(17,24,39,.90)),
url("assets/images/hero-bg.jpg");

background-size:cover;

background-position:center;

min-height:100vh;

display:flex;

align-items:center;

padding-top:100px;

position:relative;

}

.hero-content{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}

.hero-text h1{

font-size:56px;

color:#fff;

margin-bottom:25px;

line-height:1.3;

}

.hero-text p{

color:#ddd;

font-size:20px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

/*=========================
      BUTTONS
=========================*/

.btn-primary{

background:var(--main);

padding:16px 36px;

border-radius:8px;

color:#fff;

font-weight:bold;

display:inline-block;

}

.btn-primary:hover{

background:#ff7d1a;

transform:translateY(-3px);

}

.btn-secondary{

border:2px solid #fff;

padding:15px 36px;

border-radius:8px;

color:#fff;

display:inline-block;

}

.btn-secondary:hover{

background:#fff;

color:#111827;

}

/*=========================
      HERO IMAGE
=========================*/

.hero-image img{

width:100%;

animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{transform:translateY(0);}

50%{transform:translateY(-15px);}

100%{transform:translateY(0);}

}

/*=========================
     SECTION TITLE
=========================*/

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:40px;

color:#111827;

margin-bottom:15px;

}

.section-title p{

color:#777;

font-size:18px;

}
/*==================================================
                ABOUT SECTION
==================================================*/

.about{

padding:120px 0;

background:#ffffff;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.about-image img{

border-radius:20px;

box-shadow:var(--shadow);

transition:.4s;

}

.about-image img:hover{

transform:scale(1.03);

}

.about-content h3{

font-size:36px;

color:var(--dark);

margin-bottom:25px;

}

.about-content p{

font-size:17px;

color:var(--gray);

margin-bottom:20px;

text-align:justify;

line-height:2;

}

/*=========================
      ABOUT STATISTICS
=========================*/

.about-stat{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-top:40px;

}

.stat-box{

background:#fff;

padding:30px;

border-radius:15px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

border-top:4px solid var(--main);

}

.stat-box:hover{

transform:translateY(-10px);

}

.stat-box h2{

font-size:42px;

color:var(--main);

margin-bottom:10px;

}

.stat-box span{

color:var(--gray);

font-size:15px;

}

/*==================================================
                SERVICES
==================================================*/

.services{

padding:120px 0;

background:#f7f8fa;

}

.service-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.service-card{

background:#fff;

padding:35px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

transition:.4s;

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:var(--main);

}

.service-card:hover{

transform:translateY(-12px);

}

.service-card img{

width:90px;

margin:auto;

margin-bottom:25px;

}

.service-card h3{

font-size:24px;

color:var(--dark);

margin-bottom:18px;

}

.service-card p{

font-size:16px;

line-height:1.9;

color:var(--gray);

}

/*==================================================
           SERVICE HOVER EFFECT
==================================================*/

.service-card:hover h3{

color:var(--main);

}

.service-card:hover img{

transform:rotate(5deg) scale(1.08);

transition:.4s;

}

/*==================================================
           SECTION SPACING
==================================================*/

.about,

.services{

scroll-margin-top:100px;

}
/*==================================================
                PRODUCTS SECTION
==================================================*/

.products{

padding:120px 0;

background:#ffffff;

}

.product-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:35px;

}


.product-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

border:1px solid #eee;

}


.product-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 45px rgba(0,0,0,.18);

}


.product-card img{

width:100%;

height:230px;

object-fit:cover;

}


.product-content{

padding:30px;

}


.product-content h3{

font-size:25px;

color:var(--dark);

margin-bottom:15px;

}


.product-content p{

color:var(--gray);

margin-bottom:20px;

}


.product-content ul{

list-style:none;

margin-bottom:25px;

}


.product-content ul li{

padding:8px 0;

border-bottom:1px solid var(--border);

color:#555;

}


.product-content ul li::before{

content:"✓";

color:var(--main);

font-weight:bold;

margin-left:10px;

}


.btn-product{

display:inline-block;

background:var(--dark);

color:#fff;

padding:12px 25px;

border-radius:7px;

transition:.3s;

}


.btn-product:hover{

background:var(--main);

}


/*==================================================
              LASER POWER SERIES
==================================================*/

.power-series{

padding:100px 0;

background:#111827;

}


.power-series .section-title h2{

color:#fff;

}


.power-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:25px;

}


.power-box{

background:#1f2937;

border:1px solid rgba(255,255,255,.1);

padding:35px 20px;

text-align:center;

border-radius:15px;

transition:.35s;

}


.power-box:hover{

background:var(--main);

transform:translateY(-10px);

}


.power-box h3{

font-size:45px;

color:#fff;

margin-bottom:10px;

}


.power-box p{

color:#ddd;

font-size:16px;

}


/*==================================================
             BRANDS SECTION
==================================================*/

.brands{

padding:100px 0;

background:#f7f8fa;

}


.brand-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

gap:25px;

}


.brand-item{

height:100px;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:bold;

color:var(--dark);

border-radius:12px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.3s;

}


.brand-item:hover{

color:var(--main);

transform:scale(1.05);

}
/*==================================================
              ADVANTAGES SECTION
==================================================*/

.advantages{

padding:110px 0;

background:#ffffff;

}


.adv-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}


.adv-box{

background:#f7f8fa;

padding:35px;

border-radius:15px;

text-align:center;

transition:.35s;

border-bottom:4px solid transparent;

}


.adv-box:hover{

transform:translateY(-10px);

border-bottom-color:var(--main);

box-shadow:var(--shadow);

}


.adv-box h3{

font-size:24px;

color:var(--dark);

margin-bottom:15px;

}


.adv-box p{

color:var(--gray);

}


/*==================================================
              CONTACT SECTION
==================================================*/

.contact{

padding:120px 0;

background:#111827;

color:#fff;

}


.contact .section-title h2{

color:#fff;

}


.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}


/* FORM */

.contact-form form{

display:flex;

flex-direction:column;

gap:18px;

}


.contact-form input,
.contact-form textarea{

width:100%;

padding:16px;

border-radius:8px;

border:none;

font-family:inherit;

font-size:16px;

outline:none;

}


.contact-form textarea{

height:150px;

resize:none;

}


.contact-form input:focus,
.contact-form textarea:focus{

box-shadow:0 0 0 3px rgba(255,106,0,.4);

}


.contact-form button{

border:none;

cursor:pointer;

font-family:inherit;

}


/* CONTACT INFO */

.contact-info{

background:#1f2937;

padding:35px;

border-radius:15px;

}


.contact-info h3{

font-size:28px;

color:var(--main);

margin-bottom:25px;

}


.contact-info p{

color:#ddd;

margin-bottom:12px;

}


/*==================================================
                 FOOTER
==================================================*/

.footer{

background:#080b12;

padding:40px 0;

color:#fff;

text-align:center;

}


.footer-logo{

font-size:35px;

font-weight:bold;

color:var(--main);

margin-bottom:15px;

}


/*==================================================
              RESPONSIVE DESIGN
==================================================*/


@media(max-width:992px){


.header{

height:auto;

padding:20px 0;

}


.header .container{

flex-direction:column;

gap:20px;

}


.navigation ul{

flex-wrap:wrap;

justify-content:center;

gap:20px;

}


.hero-content{

grid-template-columns:1fr;

text-align:center;

}


.hero-buttons{

justify-content:center;

}


.hero-text h1{

font-size:40px;

}


.about-grid{

grid-template-columns:1fr;

}


.contact-grid{

grid-template-columns:1fr;

}


}



@media(max-width:600px){


.container{

width:92%;

}


.hero-text h1{

font-size:30px;

}


.hero-text p{

font-size:16px;

}


.section-title h2{

font-size:30px;

}


.about-stat{

grid-template-columns:1fr;

}


.navigation ul{

flex-direction:column;

text-align:center;

}


.quote-btn{

padding:12px 20px;

}


.power-box h3{

font-size:35px;

}


.product-card img{

height:190px;

}


}
/*=========================
   JS ANIMATION CLASSES
=========================*/

.hidden{

opacity:0;

transform:translateY(40px);

transition:.7s;

}


.show{

opacity:1;

transform:translateY(0);

}