/* =====================================================
   ROOT
===================================================== */

:root{

    --bg:#595852;
    --bg-dark:#25251f;

    --cream:#e9e6d7;
    --white:#f7f5ed;

    --gold:#e2d45d;
    --gold-light:#eee38b;

    --black:#171712;
    --gray:#a5a398;

    --serif:"DM Serif Display","Playfair Display",serif;
    --arabic:"Cairo",sans-serif;

}


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


html{
    scroll-behavior:smooth;
}


body{

    background:var(--bg);

    color:var(--cream);

    font-family:var(--arabic);

    overflow-x:hidden;

}


body.no-scroll{
    overflow:hidden;
}


img{
    width:100%;
    display:block;
}


a{
    color:inherit;
    text-decoration:none;
}


button{
    font:inherit;
}


::selection{
    background:var(--gold);
    color:var(--black);
}


::-webkit-scrollbar{
    width:5px;
}


::-webkit-scrollbar-track{
    background:var(--black);
}


::-webkit-scrollbar-thumb{
    background:var(--gold);
}


/* =====================================================
   LOADER
===================================================== */

.loader{

    position:fixed;

    inset:0;

    z-index:99999;

    background:var(--black);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    transition:
        opacity .9s ease,
        visibility .9s ease;

}


.loader.hide{

    opacity:0;

    visibility:hidden;

}


.loader-logo{

    text-align:center;

    margin-bottom:30px;

}


.loader-logo span{

    display:block;

    font-family:var(--serif);

    font-size:55px;

    color:var(--cream);

}


.loader-logo small{

    font-size:8px;

    letter-spacing:5px;

    color:#888;

}


.loader-line{

    width:230px;

    height:1px;

    background:#444;

}


.loader-line span{

    display:block;

    height:100%;

    width:0;

    background:var(--gold);

}


.loader-number{

    margin-top:12px;

    font-size:10px;

    color:#777;

    letter-spacing:3px;

}


/* =====================================================
   CURSOR
===================================================== */

.cursor-dot{

    width:7px;

    height:7px;

    position:fixed;

    top:0;

    left:0;

    background:var(--gold);

    border-radius:50%;

    z-index:99998;

    pointer-events:none;

    transform:translate(-50%,-50%);

}


.cursor-ring{

    width:38px;

    height:38px;

    position:fixed;

    top:0;

    left:0;

    border:1px solid rgba(226,212,93,.7);

    border-radius:50%;

    z-index:99997;

    pointer-events:none;

    transform:translate(-50%,-50%);

    transition:
        width .35s ease,
        height .35s ease,
        background .35s ease;

}


body.cursor-active .cursor-ring{

    width:70px;

    height:70px;

    background:rgba(226,212,93,.08);

}


/* =====================================================
   NAVBAR
===================================================== */

.navbar{

    position:absolute;

    top:0;

    right:0;

    left:0;

    height:90px;

    padding:0 7%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    z-index:1000;

}


.logo{

    font-family:var(--serif);

    font-size:25px;

    letter-spacing:-1px;

}


.navbar nav{

    display:flex;

    gap:42px;

}


.navbar nav a{

    font-family:Arial,sans-serif;

    font-size:9px;

    letter-spacing:1px;

    color:#ddd;

    position:relative;

}


.navbar nav a::after{

    content:"";

    position:absolute;

    right:0;

    bottom:-6px;

    width:0;

    height:1px;

    background:var(--gold);

    transition:.3s;

}


.navbar nav a:hover::after{

    width:100%;

}


.contact-nav{

    width:82px;

    height:32px;

    border:1px solid rgba(20,20,15,.55);

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:Arial,sans-serif;

    font-size:8px;

    transition:.3s ease;

}


.contact-nav:hover{

    background:var(--gold);

    border-color:var(--gold);

    color:var(--black);

}


.menu-toggle{

    display:none;

    border:0;

    background:none;

    width:35px;

    cursor:pointer;

}


.menu-toggle span{

    display:block;

    height:1px;

    background:var(--cream);

    margin:7px 0;

}


/* =====================================================
   MOBILE MENU
===================================================== */

.mobile-menu{

    position:fixed;

    inset:0;

    z-index:999;

    background:var(--black);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:25px;

    transform:translateY(-100%);

    transition:.7s cubic-bezier(.77,0,.18,1);

}


.mobile-menu.open{

    transform:translateY(0);

}


.mobile-menu a{

    font-family:var(--serif);

    font-size:45px;

}


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

.hero{

    min-height:900px;

    height:100vh;

    position:relative;

    overflow:hidden;

    background:var(--bg);

}


/* subtle frame */

.hero::before{

    content:"";

    position:absolute;

    inset:38px;

    border:1px solid rgba(0,0,0,.18);

    pointer-events:none;

    z-index:10;

}


.hero-background{

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 50% 48%,
            rgba(255,255,255,.08),
            transparent 35%
        );

}


.grain{

    position:absolute;

    inset:0;

    z-index:8;

    pointer-events:none;

    opacity:.08;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

}


.hero-star{

    position:absolute;

    top:50px;

    left:49%;

    color:var(--gold);

    font-size:23px;

    z-index:20;

    animation:
        starRotate 5s linear infinite;

}


@keyframes starRotate{

    to{
        transform:rotate(360deg);
    }

}


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

.hero-small-image{

    position:absolute;

    top:147px;

    left:11%;

    width:105px;

    z-index:30;

}


.hero-small-image img{

    height:105px;

    object-fit:cover;

    border-radius:50%;

}


.small-image-caption{

    margin-top:10px;

    display:grid;

    grid-template-columns:1fr 1fr;

    font-family:Arial,sans-serif;

    font-size:7px;

    color:#ddd;

}


.small-image-caption button{

    border:0;

    background:none;

    color:var(--cream);

    font-size:8px;

    cursor:pointer;

}


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

.hero-next{

    position:absolute;

    top:150px;

    right:11%;

    width:170px;

    z-index:30;

}


.hero-next small{

    font-family:Arial,sans-serif;

    font-size:8px;

    color:var(--gold);

}


.hero-next p{

    margin-top:8px;

    font-family:var(--serif);

    font-size:17px;

    line-height:1.05;

    color:var(--cream);

}


.hero-next p em{

    color:var(--gold);

}


.hero-next > span{

    display:block;

    color:var(--gold);

    font-size:35px;

    margin-top:10px;

}


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

.hero-oval{

    position:absolute;

    width:270px;

    height:450px;

    left:50%;

    top:50%;

    transform:translate(-50%,-48%);

    z-index:20;

}


.oval-border{

    position:absolute;

    inset:-12px;

    border:1px solid rgba(30,30,25,.6);

    border-radius:50%;

}


.oval-image{

    position:absolute;

    inset:0;

    border-radius:50%;

    overflow:hidden;

    border:1px solid rgba(20,20,15,.5);

    background:#222;

}


.oval-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            120deg,
            transparent 40%,
            rgba(255,255,255,.13),
            transparent 60%
        );

    mix-blend-mode:screen;

}


.oval-image img{

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.08);

}


.oval-text{

    position:absolute;

    right:-62px;

    bottom:80px;

    transform:rotate(-82deg);

    font-family:var(--serif);

    font-size:14px;

    color:var(--gold);

    white-space:nowrap;

}


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

.hero-title{

    position:absolute;

    left:11%;

    top:52%;

    transform:translateY(-50%);

    z-index:40;

}


.hero-title h1{

    font-family:var(--serif);

    font-weight:400;

    font-size:clamp(65px,8vw,120px);

    line-height:.83;

    letter-spacing:-4px;

    color:var(--gold);

}


.hero-title h1 span{

    color:var(--gold-light);

}


.hero-title h1 i{

    display:inline-block;

    width:90px;

    height:1px;

    background:var(--gold);

    vertical-align:middle;

    margin-right:10px;

}


/* =====================================================
   YEAR
===================================================== */

.hero-year{

    position:absolute;

    right:22%;

    bottom:27%;

    z-index:30;

}


.hero-year span{

    font-family:var(--serif);

    font-size:75px;

    color:var(--gold);

}


/* =====================================================
   SIGNATURE
===================================================== */

.signature{

    position:absolute;

    right:37%;

    bottom:22%;

    font-family:cursive;

    font-size:50px;

    color:rgba(20,20,15,.7);

    transform:rotate(-9deg);

    z-index:30;

}


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

.hero-bottom{

    position:absolute;

    bottom:55px;

    left:7%;

    right:7%;

    z-index:50;

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-family:Arial,sans-serif;

    font-size:8px;

    letter-spacing:2px;

    color:#ddd;

}


.scroll-line{

    width:110px;

    height:1px;

    background:rgba(0,0,0,.3);

}


.scroll-line i{

    display:block;

    width:30%;

    height:100%;

    background:var(--gold);

    animation:scrollMove 2s infinite;

}


@keyframes scrollMove{

    0%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(230%);
    }

    100%{
        transform:translateX(0);
    }

}


/* =====================================================
   INTRO
===================================================== */

.intro-section{

    background:var(--cream);

    color:var(--black);

    padding:150px 8% 180px;

}


.intro-label{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:80px;

}


.intro-label span{

    font-family:var(--serif);

    font-size:20px;

}


.intro-label i{

    width:65px;

    height:1px;

    background:#aaa;

}


.intro-label small{

    font-family:Arial,sans-serif;

    letter-spacing:3px;

    font-size:8px;

    color:#777;

}


.intro-grid{

    display:grid;

    grid-template-columns:
        1.1fr
        .9fr
        .7fr;

    align-items:center;

    gap:50px;

}


.intro-title h2{

    font-family:var(--serif);

    font-size:clamp(55px,6vw,100px);

    line-height:.9;

    font-weight:400;

}


.intro-title em{

    color:#777;

}


.intro-image{

    height:560px;

    overflow:hidden;

}


.intro-image img{

    height:100%;

    object-fit:cover;

}


.intro-text{

    padding-top:130px;

}


.intro-text p{

    font-size:13px;

    line-height:2;

    color:#555;

    margin-bottom:22px;

}


.intro-text a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    max-width:200px;

    border-bottom:1px solid #999;

    padding-bottom:10px;

    font-family:Arial,sans-serif;

    font-size:8px;

    letter-spacing:1px;

    margin-top:35px;

}


/* =====================================================
   PORTFOLIO
===================================================== */

.portfolio-section{

    background:var(--black);

    padding:160px 8%;

}


.section-head{

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin-bottom:100px;

}


.section-head small{

    font-family:Arial,sans-serif;

    color:#888;

    letter-spacing:3px;

    font-size:8px;

}


.section-head h2{

    font-family:var(--serif);

    font-weight:400;

    font-size:clamp(55px,7vw,110px);

    line-height:.85;

    margin-top:25px;

}


.section-head h2 em{

    color:#777;

}


.section-head p{

    color:#888;

    max-width:250px;

    font-size:12px;

    line-height:2;

}


/* projects */

.portfolio-list{

    max-width:1300px;

    margin:auto;

}


.portfolio-project{

    position:relative;

    min-height:650px;

    margin-bottom:160px;

    display:grid;

    grid-template-columns:70px 1fr 330px;

    align-items:center;

    gap:45px;

}


.portfolio-project.reverse{

    grid-template-columns:330px 1fr 70px;

}


.portfolio-project.reverse .project-number{

    order:3;

}


.portfolio-project.reverse .project-info{

    order:1;

}


.portfolio-project.reverse .project-image{

    order:2;

}


.project-number{

    font-family:var(--serif);

    color:#555;

    font-size:18px;

    align-self:start;

    padding-top:30px;

}


.project-image{

    height:650px;

    overflow:hidden;

    position:relative;

}


.project-image img{

    height:100%;

    object-fit:cover;

    transition:
        transform 1.2s cubic-bezier(.2,.8,.2,1);

}


.portfolio-project:hover .project-image img{

    transform:scale(1.06);

}


.project-info{

    padding:30px;

}


.project-info > span{

    font-family:Arial,sans-serif;

    color:var(--gold);

    letter-spacing:3px;

    font-size:8px;

}


.project-info h3{

    font-family:var(--serif);

    font-size:45px;

    line-height:1;

    font-weight:400;

    margin:20px 0 30px;

}


.project-info h3 em{

    color:#777;

}


.project-info a{

    font-family:Arial,sans-serif;

    font-size:8px;

    letter-spacing:2px;

    color:#aaa;

}


.portfolio-more{

    border-top:1px solid #333;

    padding-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-family:Arial,sans-serif;

    font-size:8px;

    letter-spacing:2px;

    color:#777;

}


.portfolio-more a{

    color:var(--cream);

}


.portfolio-more a span{

    color:var(--gold);

    font-size:20px;

    margin-right:10px;

}


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

.services-section{

    background:#e8e5d7;

    color:var(--black);

    padding:150px 8%;

}


.services-heading{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    margin-bottom:90px;

}


.services-heading small{

    font-family:Arial,sans-serif;

    font-size:8px;

    letter-spacing:3px;

    color:#777;

}


.services-heading h2{

    font-family:var(--serif);

    font-weight:400;

    font-size:clamp(60px,7vw,110px);

    line-height:.85;

    grid-column:1;

    margin-top:30px;

}


.services-heading h2 em{

    color:#777;

}


.services-heading p{

    align-self:end;

    color:#666;

    font-size:13px;

    line-height:2;

    max-width:350px;

}


.services-list{

    border-top:1px solid #bbb;

}


.service-item{

    min-height:155px;

    display:grid;

    grid-template-columns:70px 1fr 1fr 50px;

    align-items:center;

    gap:30px;

    border-bottom:1px solid #bbb;

    transition:.5s ease;

}


.service-item:hover{

    padding:0 30px;

    background:#dedacb;

}


.service-item > span{

    font-family:var(--serif);

    color:#777;

}


.service-item h3{

    font-family:var(--serif);

    font-size:35px;

    font-weight:400;

}


.service-item small{

    font-family:Arial,sans-serif;

    font-size:7px;

    letter-spacing:2px;

    color:#888;

}


.service-item p{

    color:#666;

    font-size:12px;

    line-height:2;

    max-width:350px;

}


.service-item b{

    width:45px;

    height:45px;

    border:1px solid #aaa;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:400;

    transition:.4s ease;

}


.service-item:hover b{

    background:var(--black);

    color:var(--gold);

    border-color:var(--black);

    transform:rotate(-45deg);

}


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

.about-section{

    background:var(--bg);

    padding:170px 8%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:120px;

    align-items:center;

}


.about-visual{

    position:relative;

    height:650px;

}


.about-circle{

    position:absolute;

    width:450px;

    height:570px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.4);

    padding:12px;

}


.about-circle img{

    height:100%;

    object-fit:cover;

    border-radius:50%;

}


.about-number{

    position:absolute;

    right:5%;

    top:10%;

    font-family:var(--serif);

    color:var(--gold);

    font-size:110px;

}


.about-caption{

    position:absolute;

    left:10%;

    bottom:15%;

    font-family:Arial,sans-serif;

    font-size:8px;

    line-height:1.7;

    letter-spacing:3px;

    color:#bbb;

}


.about-content small{

    font-family:Arial,sans-serif;

    font-size:8px;

    letter-spacing:3px;

    color:#aaa;

}


.about-content h2{

    font-family:var(--serif);

    font-size:clamp(65px,7vw,110px);

    line-height:.82;

    font-weight:400;

    margin:30px 0 45px;

}


.about-content h2 em{

    color:var(--gold);

}


.about-content p{

    max-width:500px;

    font-size:13px;

    line-height:2.1;

    color:#d0cec3;

    margin-bottom:20px;

}


.about-signature{

    font-family:cursive;

    font-size:45px;

    margin-top:40px;

    color:rgba(226,212,93,.65);

    transform:rotate(-8deg);

}


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

.quote-section{

    background:#24241f;

    padding:170px 8%;

    text-align:center;

}


.quote-decoration{

    color:var(--gold);

    font-size:35px;

}


.quote-section blockquote{

    max-width:1000px;

    margin:45px auto;

    font-family:var(--serif);

    font-size:clamp(38px,5vw,75px);

    line-height:1.05;

    font-weight:400;

}


.quote-section blockquote em{

    color:var(--gold);

}


.quote-section > span{

    font-family:Arial,sans-serif;

    color:#777;

    font-size:8px;

    letter-spacing:3px;

}


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

.contact-section{

    min-height:850px;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

}


.contact-image{

    position:absolute;

    inset:0;

}


.contact-image img{

    height:100%;

    object-fit:cover;

}


.contact-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(15,15,12,.55),
            rgba(15,15,12,.78)
        );

}


.contact-content{

    position:relative;

    z-index:5;

    max-width:950px;

    padding:30px;

}


.contact-content small{

    font-family:Arial,sans-serif;

    font-size:8px;

    letter-spacing:4px;

    color:var(--gold);

}


.contact-content h2{

    font-family:var(--serif);

    font-size:clamp(60px,8vw,125px);

    line-height:.83;

    font-weight:400;

    margin:30px 0;

}


.contact-content h2 em{

    color:var(--gold);

}


.contact-content p{

    color:#ddd;

    font-size:13px;

    margin-bottom:40px;

}


.contact-button{

    display:inline-flex;

    align-items:center;

    gap:25px;

    padding:18px 30px;

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

    border-radius:50px;

    font-family:Arial,sans-serif;

    font-size:9px;

    letter-spacing:2px;

    transition:.4s ease;

}


.contact-button i{

    font-size:20px;

    color:#8de28b;

}


.contact-button:hover{

    background:var(--gold);

    border-color:var(--gold);

    color:var(--black);

    transform:translateY(-5px);

}


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

footer{

    background:var(--black);

    padding:80px 8% 25px;

}


.footer-top{

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    gap:50px;

    padding-bottom:80px;

}


.footer-logo{

    font-family:var(--serif);

    font-size:45px;

}


.footer-top p{

    color:#777;

    font-family:Arial,sans-serif;

    font-size:9px;

    line-height:2;

    margin-top:15px;

}


.footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.footer-links a,
.footer-social a{

    font-family:Arial,sans-serif;

    font-size:9px;

    color:#999;

    text-transform:uppercase;

    letter-spacing:1px;

    transition:.3s;

}


.footer-links a:hover,
.footer-social a:hover{

    color:var(--gold);

}


.footer-social{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.footer-bottom{

    border-top:1px solid #333;

    padding-top:25px;

    display:flex;

    justify-content:space-between;

    color:#555;

    font-family:Arial,sans-serif;

    font-size:7px;

    letter-spacing:2px;

}


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

@media(max-width:1000px){

    .navbar nav,
    .contact-nav{

        display:none;

    }


    .menu-toggle{

        display:block;

    }


    .hero{

        min-height:800px;

    }


    .hero-small-image{

        left:7%;

    }


    .hero-next{

        right:7%;

    }


    .hero-oval{

        width:245px;

        height:410px;

    }


    .hero-title{

        left:7%;

    }


    .hero-title h1{

        font-size:70px;

    }


    .hero-year{

        right:14%;

    }


    .intro-grid{

        grid-template-columns:1fr 1fr;

    }


    .intro-text{

        padding-top:0;

    }


    .portfolio-project,
    .portfolio-project.reverse{

        grid-template-columns:50px 1fr;

        gap:20px;

    }


    .project-info{

        grid-column:2;

        grid-row:2;

        padding:20px 0;

    }


    .project-image{

        grid-column:2;

    }


    .project-number{

        grid-column:1;

        grid-row:1;

    }


    .portfolio-project.reverse .project-number{

        order:initial;

    }


    .portfolio-project.reverse .project-info,
    .portfolio-project.reverse .project-image{

        order:initial;

    }


    .about-section{

        grid-template-columns:1fr;

        gap:60px;

    }


    .about-visual{

        max-width:650px;

    }


}


@media(max-width:700px){

    .hero{

        min-height:760px;

        height:100svh;

    }


    .hero::before{

        inset:18px;

    }


    .navbar{

        padding:0 7%;

    }


    .hero-small-image{

        top:130px;

        left:8%;

        width:75px;

    }


    .hero-small-image img{

        height:75px;

    }


    .hero-next{

        top:135px;

        right:8%;

        width:110px;

    }


    .hero-next p{

        font-size:11px;

    }


    .hero-next > span{

        font-size:25px;

    }


    .hero-oval{

        width:190px;

        height:310px;

        top:48%;

    }


    .oval-text{

        right:-65px;

        font-size:10px;

    }


    .hero-title{

        left:7%;

        top:61%;

    }


    .hero-title h1{

        font-size:48px;

        line-height:.87;

        letter-spacing:-2px;

    }


    .hero-title h1 i{

        width:45px;

    }


    .hero-year{

        right:10%;

        bottom:19%;

    }


    .hero-year span{

        font-size:50px;

    }


    .signature{

        right:35%;

        bottom:16%;

        font-size:30px;

    }


    .hero-bottom{

        bottom:30px;

        left:8%;

        right:8%;

    }


    .scroll-line{

        width:50px;

    }


    .intro-section,
    .portfolio-section,
    .services-section,
    .about-section{

        padding:100px 7%;

    }


    .intro-grid{

        grid-template-columns:1fr;

        gap:45px;

    }


    .intro-title h2{

        font-size:55px;

    }


    .intro-image{

        height:430px;

    }


    .intro-text{

        max-width:350px;

    }


    .section-head{

        display:block;

        margin-bottom:60px;

    }


    .section-head h2{

        font-size:58px;

    }


    .section-head p{

        margin-top:25px;

    }


    .portfolio-project,
    .portfolio-project.reverse{

        display:grid;

        grid-template-columns:40px 1fr;

        min-height:auto;

        margin-bottom:90px;

    }


    .project-image{

        height:480px;

    }


    .project-info h3{

        font-size:34px;

    }


    .services-heading{

        grid-template-columns:1fr;

        gap:30px;

        margin-bottom:60px;

    }


    .services-heading h2{

        font-size:60px;

    }


    .service-item{

        min-height:130px;

        grid-template-columns:35px 1fr 40px;

        gap:12px;

    }


    .service-item p{

        display:none;

    }


    .service-item h3{

        font-size:25px;

    }


    .about-section{

        padding:100px 7%;

    }


    .about-visual{

        height:500px;

    }


    .about-circle{

        width:290px;

        height:400px;

    }


    .about-number{

        font-size:75px;

    }


    .about-content h2{

        font-size:65px;

    }


    .quote-section{

        padding:100px 7%;

    }


    .quote-section blockquote{

        font-size:40px;

    }


    .contact-section{

        min-height:720px;

    }


    .contact-content{

        padding:20px;

    }


    .contact-content h2{

        font-size:57px;

    }


    footer{

        padding:65px 7% 25px;

    }


    .footer-top{

        grid-template-columns:1fr;

        gap:40px;

        padding-bottom:55px;

    }


    .footer-bottom{

        flex-direction:column;

        gap:12px;

    }


    .cursor-dot,
    .cursor-ring{

        display:none;

    }

}


@media(max-width:400px){

    .hero-title h1{

        font-size:41px;

    }


    .hero-oval{

        width:170px;

        height:285px;

    }


    .intro-title h2,
    .section-head h2,
    .services-heading h2{

        font-size:48px;

    }


    .contact-content h2{

        font-size:47px;

    }

}