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


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

.obs-hero-sec {

    position: relative;

    overflow: hidden;

    padding-top: 65px;
    padding-bottom: 15px;

    background:
    radial-gradient(circle at 75% 50%,
    rgba(0,119,255,.18),
    transparent 35%),

    linear-gradient(
    90deg,
    #010b2b 0%,
    #001448 45%,
    #012a84 100%);
}

/* ==================================
   BREADCRUMB
================================== */

.obs-hero-breadcrumb {

    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 45px;

    font-size: 14px;
}

.obs-hero-breadcrumb a {

    color: #fff;
    text-decoration: none;
}

.obs-hero-breadcrumb span {

    color: rgba(255,255,255,.75);
}

.obs-breadcrumb-arrow {

    font-size: 12px;
}

/* ==================================
   LEFT CONTENT
================================== */

.obs-hero-content {

    position: relative;
    z-index: 2;
}

.obs-hero-subtitle {

    display: block;

    color: #00b7ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 18px;
}

.obs-hero-title {

    color: #fff;

    font-size: 70px;

    line-height: 1.08;

    font-weight: 700;

    margin-bottom: 28px;
}

.obs-hero-title span {

    color: #ff6a00;
}

.obs-hero-desc {

    color: rgba(255,255,255,.85);

    font-size: 17px;

    line-height: 1.9;

    max-width: 560px;

    margin-bottom: 45px;
}

/* ==================================
   FEATURES
================================== */

.obs-hero-features {

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.obs-feature-item {

    display: flex;
    align-items: center;
    gap: 10px;
}

.obs-feature-item img {

    width: 34px;
    height: 34px;
    object-fit: contain;
}

.obs-feature-item span {

    color: #fff;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 500;
}

.obs-feature-divider {

    width: 1px;
    height: 24px;

    background: rgba(255,255,255,.25);
}

/* ==================================
   RIGHT IMAGE
================================== */

.obs-hero-image-wrap {

    text-align: center;
}

.obs-hero-main-image {

    width: 100%;

    max-width: 900px;

    display: block;

    margin-left: auto;
}

/* ==================================
   LARGE DESKTOP
================================== */

@media(min-width:1400px){

    .obs-hero-title{

        font-size:45px;
    }
}

/* ==================================
   TABLET
================================== */

@media(max-width:991px){

    .obs-hero-sec{

        padding-top:40px;
        padding-bottom:70px;
    }

    .obs-hero-content{

        text-align:center;

        margin-bottom:50px;
    }

    .obs-hero-title{

        font-size:54px;
    }

    .obs-hero-desc{

        margin-left:auto;
        margin-right:auto;
    }

    .obs-hero-features{

        justify-content:center;
    }

    .obs-hero-main-image{

        max-width:700px;
        margin:auto;
    }
}

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

@media(max-width:767px){

    .obs-hero-sec{

        padding-top:30px;
        padding-bottom:60px;
    }

    .obs-hero-breadcrumb{

        justify-content:center;

        margin-bottom:35px;
    }

    .obs-hero-title{

        font-size:38px;

        line-height:1.15;
    }

    .obs-hero-desc{

        font-size:21px;
    }

    .obs-hero-features{

        flex-direction:column;

        align-items:center;

        gap:18px;
    }

    .obs-feature-divider{

        display:none;
    }

    .obs-feature-item{

        width:100%;
        justify-content:center;
    }
}

/* ==================================
   SMALL MOBILE
================================== */

@media(max-width:480px){

    .obs-hero-title{

        font-size:32px;
    }

    .obs-hero-subtitle{

        font-size:12px;
    }
}

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

.obs-services-sec{

    padding:60px 0;

    background:#ffffff;
}

.obs-services-heading{

    margin-bottom:55px;
}

.obs-services-subtitle{

    display:block;

    color:#2962ff;

    font-size:15px;

    font-weight:700;

    margin-bottom:12px;
}

.obs-services-heading h2{

    font-size:32px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:15px;
}

.obs-services-heading p{

    color:#64748b;

    max-width:700px;

    margin:auto;

    line-height:1.8;

    font-weight:500;
    font-size: 20px;
}

/* CARD */

.obs-service-card{

    height:100%;

    border:1px solid #e7edf5;

    border-radius:20px;

    background:#fff;

    padding:25px;

    display:flex;

    justify-content:space-between;

    gap:20px;

    transition:.35s;
}

.obs-service-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.obs-service-content{

    flex:1;
}

.obs-service-title{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:18px;
}

.obs-service-title img{

    width:95px;
}

.obs-service-title h3{

    font-size:26px;

    line-height:1.3;

    font-weight:700;

    margin:26px;
    margin-left: -2px;
}

.obs-service-content p{

    font-size:19px;

    line-height:1.9;

    color:#475569;

    margin-bottom:20px;

    font-weight: 600;
}

.obs-service-content ul{

    list-style:none;

    padding:0;
}

.obs-service-content ul li{

    position:relative;

    padding-left:34px;

    margin-bottom:10px;

    font-size:20px;
    font-weight: 700;
}

.obs-service-content ul li::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#2962ff;

    position:absolute;

    left:0;

    top:14px;
}

.obs-service-image{

    display:flex;

    align-items:flex-end;
}

.obs-service-image img{

    width:285px;

    max-width:118%;
}

/* TABLET */

@media(max-width:991px){

    .obs-services-heading h2{

        font-size:38px;
    }

    .obs-service-image img{

        width:180px;
    }
}

/* MOBILE */

@media(max-width:767px){

    .obs-services-sec{

        padding:70px 0;
    }

    .obs-services-heading h2{

        font-size:30px;
    }

    .obs-service-card{

        flex-direction:column;
    }

    .obs-service-image{

        justify-content:center;
    }

    .obs-service-image img{

        width:220px;
    }
}

/* ===================================
   CREATIVE PROCESS
=================================== */

.obs-process-sec{

    padding:12px 0 ;

    background:#ffffff;
}

.obs-process-heading{

    margin-bottom:60px;
}

.obs-process-subtitle{

    display:block;

    color:#2962ff;

    font-size:19px;

    font-weight:700;

    margin-bottom:12px;
}

.obs-process-heading h2{

    font: size 25px;

    font-weight:700;

    color:#0f172a;
}

/* WRAPPER */

.obs-process-wrapper{

    display:flex;

    justify-content:center;

    align-items:flex-start;
}

/* STEP */

.obs-process-item{

    width:170px;

    text-align:center;

    position:relative;
}

/* ICON */

.obs-process-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid;

    margin-bottom:18px;
}

.obs-process-icon img{

    width:142px;

    height:142px;

    object-fit:contain;
}

/* COLORS */

.pink-border{
    border-color:#ff4f93;
}

.purple-border{
    border-color:#8b5cf6;
}

.blue-border{
    border-color:#2563eb;
}

.orange-border{
    border-color:#f97316;
}

.green-border{
    border-color:#22c55e;
}

.cyan-border{
    border-color:#06b6d4;
}

/* STEP NUMBER */

.obs-step-number{

    display:block;

    font-size:30px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:8px;
}

/* TITLE */

.obs-process-item h3{

    font-size:24px;

    font-weight:700;

    margin-bottom:12px;

    color:#0f172a;
}

/* DESCRIPTION */

.obs-process-item p{

    font-size:19px;

    color:#64748b;

    line-height:1.8;

    margin:0;
    font-weight: 600;
}

/* CONNECTOR */

.obs-process-line{

    width:80px;

    border-top:2px dashed #cbd5e1;

    margin-top:45px;

    flex-shrink:0;
}

/* ========================
   TABLET
======================== */

@media(max-width:991px){

    .obs-process-wrapper{

        display:grid;

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

        gap:75px;
    }

    .obs-process-line{

        display:none;
    }

    .obs-process-item{

        width:100%;
    }

    .obs-process-heading h2{

        font-size:36px;
    }

}

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

@media(max-width:767px){

    .obs-process-sec{

        padding:25px 0;
    }

    .obs-process-wrapper{

        grid-template-columns:1fr;
    }

    .obs-process-heading h2{

        font-size:28px;
    }

    .obs-process-item{

        max-width:320px;

        margin:auto;
    }

    .obs-process-icon{

        width:95px;
        height:95px;
    }

    .obs-process-icon img{

        width:200px;
        height:200px;
    }

}

/* ===================================
   WHY BRANDS CHOOSE OBSQUARE
=================================== */

.obs-brand-choose-sec{

    padding:90px 0 31px;

    background:#ffffff;
}

/* HEADING */

.obs-brand-heading{

    margin-bottom:50px;
}

.obs-brand-heading h2{

    font-size:35px;

    font-weight:700;

    color:#0f172a;

    margin:0;
}

/* CARD */

.obs-brand-card{

    background:#ffffff;

    border:1px solid #e7edf5;

    border-radius:20px;

    padding:30px 24px;

    text-align:center;

    height:100%;

    transition:.35s ease;
}

.obs-brand-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);
}

/* ICON */

.obs-brand-icon{

    margin-bottom:20px;
}

.obs-brand-icon img{

    width:120px;

    height:120px;

    object-fit:contain;
}

/* TITLE */

.obs-brand-card h3{

    font-size:22px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:12px;
}

/* DESCRIPTION */

.obs-brand-card p{

    color:#64748b;

    font-size:18px;

    line-height:1.8;

    margin:0;
}

/* ======================
   LARGE DESKTOP
====================== */

@media(min-width:1400px){

    .obs-brand-card{

        padding:35px 25px;
    }
}

/* ======================
   TABLET
====================== */

@media(max-width:991px){

    .obs-brand-heading h2{

        font-size:36px;
    }

    .obs-brand-icon img{

        width:65px;
        height:65px;
    }

    .obs-brand-card h3{

        font-size:20px;
    }
}

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

@media(max-width:767px){

    .obs-brand-choose-sec{

        padding:70px 0;
    }

    .obs-brand-heading{

        margin-bottom:35px;
    }

    .obs-brand-heading h2{

        font-size:30px;

        line-height:1.3;
    }

    .obs-brand-card{

        padding:25px 20px;
    }

    .obs-brand-icon img{

        width:150px;
        height:150px;
    }

    .obs-brand-card h3{

        font-size:28px;
    }

    .obs-brand-card p{

        font-size:25px;
    }
}

/* ===================================
   CTA SECTION
=================================== */

.obs-cta-sec{

    padding:40px 0 90px;

    background:#ffffff;
}

/* CTA WRAPPER */

.obs-cta-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    padding:0px 109px 4px;

    background:

    radial-gradient(
    circle at 75% 50%,
    rgba(63,81,255,.25),
    transparent 40%
    ),

    linear-gradient(
    90deg,
    #000d49 0%,
    #00156c 50%,
    #0030b7 100%
    );
}

/* LEFT CONTENT */

.obs-cta-content{

    position:relative;

    z-index:2;
}

.obs-cta-content h2{

    color:#ffffff;

    font-size:54px;

    line-height:1.1;

    font-weight:700;

    margin-bottom:20px;
}

.obs-cta-content p{

    color:rgba(255,255,255,.80);

    font-size:16px;

    line-height:1.8;

    margin-bottom:30px;
}

/* BUTTON */

.obs-cta-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    background:#ff6a00;

    color:#ffffff;

    padding:15px 28px;

    border-radius:12px;

    font-size:16px;

    font-weight:600;

    transition:.3s ease;
}

.obs-cta-btn:hover{

    background:#ff7a1a;

    color:#fff;

    transform:translateY(-2px);
}

.obs-cta-btn span{

    font-size:18px;
}

/* RIGHT IMAGE */

.obs-cta-image{

    text-align:right;
}

.obs-cta-image img{

    width:100%;

    max-width:760px;

    height:auto;

    display:block;

    margin-left:auto;
}

/* ===================================
   LARGE DESKTOP
=================================== */

@media(min-width:1400px){

    .obs-cta-content h2{

        font-size:34px;
    }
}

/* ===================================
   TABLET
=================================== */

@media(max-width:991px){

    .obs-cta-wrapper{

        padding:40px;
    }

    .obs-cta-content{

        text-align:center;

        margin-bottom:35px;
    }

    .obs-cta-content h2{

        font-size:42px;
    }

    .obs-cta-image{

        text-align:center;
    }

    .obs-cta-image img{

        margin:auto;

        max-width:600px;
    }
}

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

@media(max-width:767px){

    .obs-cta-sec{

        padding:20px 0 70px;
    }

    .obs-cta-wrapper{

        padding:30px 20px;

        border-radius:18px;
    }

    .obs-cta-content h2{

        font-size:30px;

        line-height:1.25;
    }

    .obs-cta-content p{

        font-size:25px;
    }

    .obs-cta-btn{

        width:100%;

        justify-content:center;
    }

    .obs-cta-image{

        margin-top:25px;
    }
}

/* ===================================
   SMALL MOBILE
=================================== */

@media(max-width:480px){

    .obs-cta-content h2{

        font-size:28px;
    }
}