.elementor-566 .elementor-element.elementor-element-047bf8f{--display:flex;--min-height:500px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.34;}.elementor-566 .elementor-element.elementor-element-047bf8f:not(.elementor-motion-effects-element-type-background), .elementor-566 .elementor-element.elementor-element-047bf8f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://occi.org.pk/wp-content/uploads/2026/07/829c60c9-ab58-4e79-aa74-86e180b53e89.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-566 .elementor-element.elementor-element-047bf8f::before, .elementor-566 .elementor-element.elementor-element-047bf8f > .elementor-background-video-container::before, .elementor-566 .elementor-element.elementor-element-047bf8f > .e-con-inner > .elementor-background-video-container::before, .elementor-566 .elementor-element.elementor-element-047bf8f > .elementor-background-slideshow::before, .elementor-566 .elementor-element.elementor-element-047bf8f > .e-con-inner > .elementor-background-slideshow::before, .elementor-566 .elementor-element.elementor-element-047bf8f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-566 .elementor-element.elementor-element-02bbb07{margin:-40px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-566 .elementor-element.elementor-element-02bbb07 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:40px;font-weight:800;color:#FFFFFF;}.elementor-566 .elementor-element.elementor-element-3012339{--display:flex;}.elementor-566 .elementor-element.elementor-element-3012339.e-con{--align-self:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-566 .elementor-element.elementor-element-daa2d16{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Poppins", Sans-serif;font-weight:400;line-height:19px;color:#FFFFFF;}.elementor-566 .elementor-element.elementor-element-ab5bd36{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:30px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-566 .elementor-element.elementor-element-1d68558{--display:flex;--margin-top:20px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;}.elementor-566 .elementor-element.elementor-element-9302ec2{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-566 .elementor-element.elementor-element-9302ec2 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:40px;font-weight:800;color:#000000;}.elementor-566 .elementor-element.elementor-element-7868825{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;color:#353535;}.elementor-566 .elementor-element.elementor-element-d7bb1ba{margin:-53px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-566 .elementor-element.elementor-element-4ae8a20{--display:flex;--margin-top:20px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;}.elementor-566 .elementor-element.elementor-element-14ee480{margin:-16px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -19px;}body.elementor-page-566:not(.elementor-motion-effects-element-type-background), body.elementor-page-566 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E0CEBF;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-566 .elementor-element.elementor-element-3012339{--width:71%;}}/* Start custom CSS for html, class: .elementor-element-d7bb1ba */@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#F8F4EA;
}

.map-section{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 15px;
}

.map-card{

    width:100%;
    max-width:560px;

    background:#fff;

    padding:38px 28px;

    border-radius:18px;

    text-align:center;

    border:1px solid rgba(15,107,75,.08);

    box-shadow:0 12px 35px rgba(0,0,0,.05);

    position:relative;

    overflow:hidden;

    transition:.35s cubic-bezier(.4,0,.2,1);

}

/* Top Border Animation */

.map-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:#0F6B4B;

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

/* Shine Effect */

.map-card::after{

    content:"";

    position:absolute;

    top:0;
    left:-150%;

    width:45%;
    height:100%;

    background:linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

    transition:.9s;

}

.map-card:hover{

    transform:translateY(-8px);

    border-color:rgba(15,107,75,.18);

    box-shadow:
    0 22px 45px rgba(15,107,75,.12);

}

.map-card:hover::before{

    transform:scaleX(1);

}

.map-card:hover::after{

    left:170%;

}

/* Icon */

.map-icon{

    width:60px;
    height:60px;

    margin:auto;

    border-radius:16px;

    background:#1F1F1F;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#fff;

    font-size:26px;

    transition:.35s;

}

.map-card:hover .map-icon{

    background:#0F6B4B;

    transform:rotate(-8deg) scale(1.08);

    box-shadow:0 12px 28px rgba(15,107,75,.22);

}

/* Heading */

.map-card h3{

    margin-top:18px;

    font-size:22px;

    color:#222;

    font-weight:600;

}

/* Address */

.map-card p{

    margin-top:8px;

    font-size:15px;

    color:#767676;

    line-height:1.7;

}

/* Button */

#mapBtn{

    margin-top:28px;

    padding:13px 28px;

    border:none;

    border-radius:10px;

    background:#D49C1D;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 10px 22px rgba(212,156,29,.25);

}

#mapBtn i{

    margin-right:8px;

}

#mapBtn:hover{

    background:#0F6B4B;

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(15,107,75,.22);

}

/* Responsive */

@media(max-width:768px){

.map-card{

    padding:30px 20px;

}

.map-icon{

    width:54px;
    height:54px;

    font-size:22px;

}

.map-card h3{

    font-size:19px;

}

.map-card p{

    font-size:14px;

}

#mapBtn{

    width:100%;

    padding:14px;

    font-size:15px;

}

}

@media(max-width:480px){

.map-card{

    padding:26px 18px;

    border-radius:16px;

}

.map-icon{

    width:48px;
    height:48px;

    font-size:20px;

}

.map-card h3{

    font-size:17px;

}

.map-card p{

    font-size:13px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-14ee480 *//*==============================
   GOOGLE FONT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#F8F4EA;
}

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

.contact-section{
    width:100%;
    max-width:840px;
    margin:auto;
    padding:30px 15px;
}

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

.contact-card{

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

    background:#fff;

    padding:16px 20px;

    margin-bottom:18px;

    border-radius:16px;

    border:1px solid rgba(15,107,75,.08);

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

    position:relative;

    overflow:hidden;

    transition:
        transform .35s cubic-bezier(.4,0,.2,1),
        box-shadow .35s,
        border-color .35s,
        background .35s;

}

/*==============================
    LEFT GREEN BORDER
==============================*/

.contact-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:4px;
    height:100%;

    background:#0F6B4B;

    transform:scaleY(0);

    transform-origin:bottom;

    transition:.35s ease;

}

/*==============================
      SHINE EFFECT
==============================*/

.contact-card::after{

    content:"";

    position:absolute;

    top:0;
    left:-160%;

    width:40%;
    height:100%;

    background:linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transform:skewX(-25deg);

    transition:.9s;

}

/*==============================
      CARD HOVER
==============================*/

.contact-card:hover{

    transform:translateY(-8px);

    border-color:rgba(15,107,75,.20);

    background:#FCFFFD;

    box-shadow:
        0 18px 45px rgba(15,107,75,.14),
        0 8px 20px rgba(0,0,0,.06);

}

.contact-card:hover::before{

    transform:scaleY(1);

}

.contact-card:hover::after{

    left:170%;

}

/*==============================
          ICON
==============================*/

.contact-icon{

    width:52px;
    height:52px;

    min-width:52px;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#1E1E1E;

    color:#ffffff;

    font-size:19px;

    transition:all .35s ease;

}

.contact-card:hover .contact-icon{

    background:#0F6B4B;

    transform:
        rotate(-8deg)
        scale(1.08);

    box-shadow:
        0 12px 30px rgba(15,107,75,.25);

}

/*==============================
          TEXT
==============================*/

.contact-info{

    flex:1;

}

.contact-info span{

    display:block;

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#9098A1;

    margin-bottom:4px;

    transition:.3s;

}

.contact-info h3{

    font-size:17px;

    font-weight:600;

    line-height:1.45;

    color:#232323;

    transition:.3s;

}

.contact-card:hover .contact-info span{

    color:#0F6B4B;

}

.contact-card:hover .contact-info h3{

    color:#0F6B4B;

}

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

@media(max-width:768px){

.contact-section{

    padding:25px 12px;

}

.contact-card{

    padding:15px 16px;

    gap:14px;

    margin-bottom:16px;

}

.contact-icon{

    width:46px;
    height:46px;
    min-width:46px;

    font-size:17px;

}

.contact-info span{

    font-size:9px;

    letter-spacing:1.5px;

}

.contact-info h3{

    font-size:15px;

}

}

@media(max-width:480px){

.contact-card{

    padding:14px;

    gap:12px;

    border-radius:14px;

}

.contact-icon{

    width:42px;
    height:42px;
    min-width:42px;

    border-radius:12px;

    font-size:16px;

}

.contact-info span{

    font-size:8px;

}

.contact-info h3{

    font-size:14px;

    line-height:1.4;

}

}/* End custom CSS */