/*==================================================
=                 style.css (Part 1)               =
==================================================*/

:root {

    --primary: #d62828;
    --secondary: #0f766e;
    --dark: #0f172a;
    --dark-light: #1e293b;
    --white: #ffffff;
    --light: #f8fafc;
    --gray: #64748b;
    --border: rgba(255,255,255,.12);

    --facebook: #1877f2;
    --instagram: #e1306c;
    --linkedin: #0a66c2;
    --youtube: #ff0000;
    --twitter: #000000;
    --tiktok: #111111;

    --radius: 18px;

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

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

    --transition:
        .30s ease;

    --container:
        1180px;

}

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Cairo",sans-serif;
    background:#edf2f7;
    color:var(--dark);
    line-height:1.8;
    overflow-x:hidden;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;

}

button{

    font-family:inherit;

}

.skip-link{

    position:absolute;
    top:-50px;
    left:20px;
    background:#000;
    color:#fff;
    padding:12px 20px;
    z-index:9999;
    border-radius:8px;

}

.skip-link:focus{

    top:20px;

}

.container{

    width:min(
        calc(100% - 40px),
        var(--container)
    );

    margin-inline:auto;

}

.landing{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:

        70px
        0;

    background:

        linear-gradient(
            rgba(8,15,30,.82),
            rgba(8,15,30,.82)
        ),

        url("assets/images/background.jpg")
        center
        center
        /cover
        no-repeat;

}

.landing__overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at top right,
        rgba(214,40,40,.20),
        transparent 40%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(15,118,110,.25),
        transparent 40%
    );

}

.hero{

    position:relative;

    z-index:2;

    text-align:center;

}

.logo-wrapper{

    width:170px;

    height:170px;

    margin-inline:auto;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px;

    box-shadow:var(--shadow-lg);

    margin-bottom:35px;

}

.company-logo{

    width:100%;

    height:auto;

}

.hero-tag{

    display:inline-flex;

    padding:

        8px
        18px;

    border-radius:50px;

    color:#fff;

    background:

        rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    margin-bottom:22px;

    font-size:.92rem;

    letter-spacing:.5px;

}

.hero-title{

    color:#fff;

    font-size:

        clamp(
            2rem,
            5vw,
            4rem
        );

    font-weight:900;

    line-height:1.3;

    margin-bottom:20px;

}

.hero-description{

    color:#e2e8f0;

    max-width:760px;

    margin-inline:auto;

    font-size:

        clamp(
            1rem,
            2vw,
            1.2rem
        );

    margin-bottom:45px;

}

.contact-section{

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:20px;

    margin-bottom:55px;

}

.action-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-height:72px;

    border-radius:var(--radius);

    color:var(--white);

    font-size:1.08rem;

    font-weight:700;

    transition:var(--transition);

    box-shadow:var(--shadow-md);

}

.action-button:hover{

    transform:translateY(-6px);

}

.phone-button{

    background:var(--primary);

}

.phone-button:hover{

    background:#b91c1c;

}

.whatsapp-button{

    background:#16a34a;

}

.whatsapp-button:hover{

    background:#15803d;

}

.button-icon{

    width:26px;

    height:26px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.button-icon svg{

    width:100%;

    height:100%;

}

.about-short,
.social-intro{

    max-width:820px;

    margin-inline:auto;

    text-align:center;

    margin-bottom:40px;

}

.about-short h2,
.social-intro h2{

    color:var(--white);

    font-size:2rem;

    margin-bottom:16px;

}

.about-short p,
.social-intro p{

    color:#d7dde8;

    font-size:1.05rem;

}

.website-section{

    display:flex;

    justify-content:center;

    margin-bottom:55px;

}

.website-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-width:320px;

    min-height:72px;

    padding:0 30px;

    border-radius:var(--radius);

    color:var(--white);

    background:#2563eb;

    font-weight:700;

    transition:var(--transition);

    box-shadow:var(--shadow-md);

}

.website-button:hover{

    transform:translateY(-6px);

    background:#1d4ed8;

}

.social-grid{

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:22px;

    margin-top:35px;

}

.social-button{

    display:flex;

    align-items:center;

    gap:18px;

    min-height:74px;

    padding:18px 24px;

    border-radius:var(--radius);

    color:#fff;

    transition:var(--transition);

    box-shadow:var(--shadow-md);

    backdrop-filter:blur(12px);

}

.social-button:hover{

    transform:translateY(-6px);

}

.social-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.social-icon svg{

    width:24px;

    height:24px;

}

.social-text{

    font-size:1rem;

    font-weight:700;

}

.facebook{

    background:var(--facebook);

}

.instagram{

    background:linear-gradient(
        45deg,
        #f58529,
        #dd2a7b,
        #8134af,
        #515bd4
    );

}

.linkedin{

    background:var(--linkedin);

}

.youtube{

    background:var(--youtube);

}

.twitter{

    background:var(--twitter);

}

.tiktok{

    background:linear-gradient(
        135deg,
        #111111,
        #222222
    );

}

/*==================================================
=             style.css (Part 3 - Final)           =
==================================================*/

.social-button:focus,
.action-button:focus,
.website-button:focus{

    outline:3px solid #ffffff;
    outline-offset:4px;

}

.social-button svg,
.button-icon svg{

    transition:var(--transition);

}

.social-button:hover svg,
.action-button:hover svg,
.website-button:hover svg{

    transform:scale(1.15);

}

::selection{

    background:var(--primary);
    color:var(--white);

}

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#dbe4ee;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);
    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#b91c1c;

}

/*======================
      Responsive
=======================*/

@media (max-width:991px){

    .hero-title{

        font-size:2.8rem;

    }

    .contact-section{

        grid-template-columns:1fr;

    }

    .social-grid{

        grid-template-columns:1fr;

    }

    .website-button{

        width:100%;

        min-width:auto;

    }

}

@media (max-width:768px){

    .landing{

        padding:50px 0;

    }

    .logo-wrapper{

        width:140px;
        height:140px;

    }

    .hero-title{

        font-size:2.3rem;

    }

    .hero-description{

        font-size:1rem;

    }

    .about-short h2,
    .social-intro h2{

        font-size:1.7rem;

    }

}

@media (max-width:576px){

    .container{

        width:calc(100% - 24px);

    }

    .hero-title{

        font-size:2rem;

    }

    .action-button,
    .website-button,
    .social-button{

        min-height:64px;

        font-size:.95rem;

    }

    .social-icon{

        width:42px;
        height:42px;

    }

    .social-icon svg{

        width:20px;
        height:20px;

    }

}

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;

    }

}