:root{
  --primary:#069b9b;
  --dark:#000000;
  --white:#ffffff;
  --blue:#1A4D63;
  --orange:#f3b34b;
  --text-dark:#12334a;
}

/* =========================================================
   RESET
========================================================= */

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

html{
  overflow-x:hidden;
  scroll-behavior:smooth;
}

html,
body{
  font-family:'Montserrat',sans-serif;
  background-image:url('../images/bome-bg.png');
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  overflow-x:hidden;
  position:relative;
  color:var(--white);
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
    margin:0;
    padding:0;
}

.container-fluid{
  padding-left:15px;
  padding-right:15px;
}

.main-wrapper{
  width:100%;
  max-width:1366px;
  margin:auto;
  position:relative;
  z-index:2;
  overflow:hidden;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;
}

/* =========================================================
   BACKGROUND CIRCLES
========================================================= */

.bg-circle{
  position:fixed;
  border-radius:50%;
  border:12px solid rgba(255,255,255,0.06);
  z-index:0;
}

.bg-circle::before,
.bg-circle::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:12px solid rgba(255,255,255,0.06);
}

.bg-circle::before{
  inset:30px;
}

.bg-circle::after{
  inset:60px;
}

.bg-circle .dot{
  width:18px;
  height:18px;
  background:rgba(255,255,255,0.06);
  border-radius:50%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.circle-1{
  width:400px;
  height:400px;
  top:20px;
  right:-120px;
}

.circle-2{
  width:220px;
  height:220px;
  top:450px;
  left:250px;
}

.circle-3{
  width:320px;
  height:320px;
  bottom:100px;
  right:-80px;
}

.circle-4{
  width:160px;
  height:160px;
  bottom:350px;
  left:50px;
}

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

.hero-section{
  background:#000;
  padding:45px 0 0;
  margin-top:100px;
  position:relative;
}

.logo{
  width:373px;
  padding-left:10px;
}

.hero-title{
  font-size:65px;
  line-height:100%;
  font-weight:700;
  color:#fff;
}

.hero-subtitle{
  color:#62d2d2;
  font-size:23px;
  font-weight:700;
  line-height:150%;
}

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

.mobile-menu-btn{
  position:absolute;
  top:25px;
  right:20px;
  z-index:999;
}

.navbar-toggler{
  border:none;
  padding:0;
  background:transparent;
  box-shadow:none !important;
}

.navbar-toggler-icon{
  background-image:none;
  width:32px;
  height:24px;
  position:relative;
}

.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  display:block;
  background:#fff;
  height:3px;
  border-radius:3px;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
}

.navbar-toggler-icon::before{
  top:-8px;
}

.navbar-toggler-icon::after{
  top:8px;
}

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

.mobile-menu-wrap{
  background:#000;
  padding:20px;
}

.mobile-menu-list{
  list-style:none;
  padding:0;
  margin:0;
}

.mobile-menu-list li{
  margin-bottom:15px;
}

.mobile-menu-list li:last-child{
  margin-bottom:0;
}

.mobile-menu-list li a{
  color:#fff;
  text-decoration:none;
  font-size:18px;
  font-weight:600;
}

/* =========================================================
   MENU BAR
========================================================= */

.menu-bar{
  background:url('../images/pattern-strip.png') center/cover;
  padding:20px 0;
  margin-top:20px;
  border-top:3px solid #000;
  border-bottom:3px solid #000;
}

.menu-list{
  list-style:none;
  display:flex;
  justify-content:space-around;
  align-items:center;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}

.menu-list li{
  padding-left:20px;
}

.menu-list li a{
  text-decoration:none;
  color:#fff;
  font-size:30px;
  font-weight:700;
  -webkit-text-stroke-width:5px;
  -webkit-text-stroke-color:#000;
  paint-order:stroke fill;
  display:inline-block;
}

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

.intro-section{
  background:url('../images/green-strip.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  padding:40px 80px;
  border-bottom:20px solid #000;
}

.intro-text{
  font-size:20px;
  line-height:160%;
  font-weight:600;
  text-align:justify;
}

.turtle-img{
  width:100%;
  max-width:462px;
}

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

.read-more-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:#f2ab1f;
  color:#fff;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  padding:8px 10px 8px 24px;
  border-radius:60px;
  box-shadow:
  0 6px 0 rgba(0,0,0,0.28),
  inset 0 -3px 0 rgba(0,0,0,0.12);
  transition:.3s ease;
}

.read-more-btn:hover{
  color:#fff;
  transform:translateY(-2px);
}

.icon-circle,
.icon-circles{
  width:32px;
  height:32px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.icon-circle i{
  color:#d18d08;
  font-size:15px;
}

.icon-circles i{
  color:var(--blue);
  font-size:15px;
}

.btn-custom{
  background:var(--blue);
  color:#fff;
  border-radius:40px;
  padding:14px 30px;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:25px;
}

.btn-custom:hover{
  background:#12384b;
  color:#fff;
}

/* =========================================================
   CONTENT SECTION
========================================================= */

.content-section{
  padding:120px 40px;
}

.section-title{
  color:var(--blue);
  text-align:right;
  font-size:50px;
  font-weight:700;
  line-height:110%;
}

.content-box{
  max-width:750px;
}

.content-box ul{
  list-style:none;
  padding-left:0;
}

.content-box li{
  position:relative;
  padding-left:40px;
  margin-bottom:18px;
  color:#fff;
  font-size:20px;
  font-weight:600;
  line-height:150%;
}

.content-box li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:18px;
  height:18px;
  background-image:url('../images/Dot_point.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.content-box p{
  color:#fff;
  font-size:20px;
  font-weight:600;
  line-height:160%;
}

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

.cta-section{
  margin-top:40px;
}

.cta-pattern{
  width:100%;
  height:229px;
  background:url('../images/artwork_banner.png') center/cover;
}

.cta-content{
  background:url('../images/HP_green_box_top_section_1.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  text-align:center;
  padding:100px 30px;
}

.cta-content h2{
  font-size:45px;
  margin-bottom:25px;
}

.cta-content p{
  width:100%;
  max-width:450px;
  margin:auto;
  font-size:20px;
  font-weight:600;
  line-height:160%;
}

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

.custom-footer{
  background:#000;
  padding:50px 45px;
  position:relative;
}

.footer-main-logo{
  width:100%;
  padding-bottom:40px;
}

.partner-logos{
  display:flex;
  align-items:center;
  gap:35px;
  flex-wrap:wrap;
}

.partner-logos img{
  max-height:80px;
  width:auto;
}

.footer-content h3{
  color:#5ecfd1;
  font-size:20px;
  font-weight:700;
  line-height:150%;
}

.footer-content p{
  color:#fff;
  font-size:16px;
  line-height:160%;
  font-weight:600;
  margin-bottom:35px;
}

.footer-strip{
  margin-bottom:35px;
}

.footer-strip img{
  width:100%;
}

.footer-contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:30px;
}

.footer-contact a,
.footer-contact span{
  color:#fff;
  text-decoration:none;
  font-size:20px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-contact i{
  color:#5ecfd1;
  font-size:28px;
}

.footer-menu-wrapper{
  border-left:5px solid #00d9df;
  padding-left:35px;
  height:100%;
}

.footer-menu{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-menu li{
  margin-bottom:26px;
}

.footer-menu li a{
  color:#fff;
  text-decoration:underline;
  font-size:16px;
  font-weight:500;
  transition:.3s ease;
}

.footer-menu li a:hover{
  color:#5ecfd1;
}

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

@media(min-width:769px) and (max-width:1024px){

  .hero-title{
    font-size:48px;
  }

  .hero-subtitle{
    font-size:18px;
  }

  .logo{
    width:260px;
  }

  .section-title{
    font-size:42px;
  }

  .content-box li,
  .content-box p{
    font-size:18px;
  }

}

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

@media(max-width:768px){

  body{
    background-size:cover;
    background-position:center top;
  }

  .main-wrapper{
    width:100%;
    padding:0;
  }

  /* HERO */

  .hero-section{
    margin-top:0;
    padding:25px 0 0;
  }

  .hero-section .row{
    flex-direction:column;
    align-items:flex-start !important;
    padding:0 20px;
  }

  .hero-section .col-lg-3,
  .hero-section .col-lg-9{
    width:100%;
  }

  .logo{
    width:180px;
    padding-left:0;
  }

  .hero-title{
    font-size:28px;
    line-height:115%;
    margin-top:25px;
    max-width:320px;
  }

  .hero-subtitle{
    font-size:14px;
    line-height:150%;
    margin-top:15px !important;
  }

  /* MENU */

  .menu-list{
    display:none !important;
  }

  .menu-bar{
    padding:10px 0;
    margin-top:18px;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .menu-bar::-webkit-scrollbar{
    display:none;
  }

  /* INTRO */

  .intro-section{
    padding:35px 20px;
    border-bottom:10px solid #000;
  }

  .intro-text{
    font-size:14px;
    line-height:180%;
    text-align:left;
  }

  .turtle-img{
    max-width:220px;
    margin-top:30px;
    margin: auto;
  }

  /* BUTTONS */

  .btn-custom,
  .read-more-btn{
    font-size:14px;
    padding:10px 16px;
    gap:8px;
  }

  .icon-circle,
  .icon-circles{
    width:28px;
    height:28px;
  }

  /* CONTENT */

  .content-section{
    padding:40px 20px;
  }

  .content-section .row{
    gap:30px;
  }

  .section-title{
    font-size:28px;
    text-align:left;
    margin-bottom:20px;
  }

  .content-box{
    width:100%;
  }

  .content-box li{
    font-size:15px;
    line-height:170%;
    padding-left:30px;
    margin-bottom:12px;
  }

  .content-box li::before{
    width:14px;
    height:14px;
    top:6px;
  }

  .content-box p{
    font-size:15px;
    line-height:180%;
  }

  /* CTA */

  .cta-pattern{
    height:85px;
  }

  .cta-content{
    padding:50px 20px;
  }

  .cta-content h2{
    font-size:34px;
    line-height:120%;
  }

  .cta-content p{
    font-size:15px;
    line-height:170%;
  }

  /* FOOTER */

  .custom-footer{
    padding:35px 20px;
  }

  .footer-left{
    text-align:center;
  }

  .footer-main-logo{
    width:170px;
    margin:0 auto 25px;
  }

  .partner-logos{
    gap:15px;
    justify-content:center;
    margin-bottom:25px;
  }

  .partner-logos img{
    max-height:45px;
  }

  .footer-content{
    text-align:center;
  }

  .footer-content h3{
    font-size:16px;
    margin-bottom:15px;
  }

  .footer-content p{
    font-size:13px;
    line-height:180%;
    margin-bottom:20px;
  }

  .footer-strip{
    margin-bottom:20px;
  }

  .footer-contact{
    flex-direction:column;
    align-items:center;
    gap:15px;
  }

  .footer-contact a,
  .footer-contact span{
    font-size:14px;
    gap:10px;
  }

  .footer-contact i{
    font-size:16px;
  }

  .footer-menu-wrapper{
    border-left:none;
    border-top:3px solid #00d9df;
    padding-left:0;
    padding-top:20px;
    margin-top:20px;
  }

  .footer-menu{
    text-align:center;
  }

  .footer-menu li{
    margin-bottom:12px;
  }

  .footer-menu li a{
    font-size:14px;
  }

  /* BACKGROUND CIRCLES */

  .bg-circle{
    opacity:0.25;
    transform:scale(.55);
  }

  .circle-1{
    right:-180px;
  }

  .circle-3{
    right:-160px;
  }

}

/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media(max-width:480px){

  .hero-title{
    font-size:20px;
  }

  .hero-subtitle{
    font-size:12px;
  }

  .section-title{
    font-size:24px;
  }

  .cta-content h2{
    font-size:28px;
  }

  .content-box li,
  .content-box p{
    font-size:14px;
  }

}

/* =========================================================
   DESKTOP SHOW/HIDE
========================================================= */

@media(min-width:769px){

  .mobile-menu-btn,
  .mobile-menu-wrap{
    display:none !important;
  }

}


/*About Us Page*/


body.about{
    font-family:'Montserrat',sans-serif;
    background-image:url('../images/about_bg.png');
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    background-attachment:fixed;
    color:var(--white);
    overflow-x:hidden;
    position:relative;
}

.about-hero-box{
    background:url('../images/about-yellow-bg.png') center/cover;
    padding:90px 40px;
}

.about-overlay-box{
    background:rgba(255,255,255,0.14);
    max-width:900px;
    margin:auto;
    padding:50px;
    text-align:center;
}

.about-overlay-box h2{
    color:#fff;
    font-size:50px;
    font-weight:800;
    margin-bottom:30px;
    font-family:'Bricolage Grotesque',sans-serif;
}

.about-overlay-box p{
    color:#fff;
    font-size:20px;
    line-height:150%;
    margin-bottom:25px;
    font-weight:500;
}

/* =========================================================
   STORY WRAPPER
========================================================= */

.jarara-story-wrapper{
    background-image:url('../images/blue-section-bg.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

.story-heading-bar{
    background:rgba(64,202,202,0.22);
    padding:22px 40px;
    position:relative;
    top:80px;
    margin-bottom:50px;
}

.story-heading-bar h2{
    color:#fff;
    text-align:center;
    font-size:50px;
    font-weight:800;
    font-family:'Bricolage Grotesque',sans-serif;
}

.story-person-image img{
    width:100%;
}

.story-text-content{
    padding-top:50px;
}

.story-text-content p{
    color:#fff;
    font-size:20px;
    line-height:150%;
    margin-bottom:24px;
    text-align:justify;
    font-weight:500;
}

/* =========================================================
   PURPOSE
========================================================= */

.jarara-purpose-section{
    padding-bottom:80px;
}

.purpose-title-bar{
    background:rgba(64,202,202,0.22);
    padding:22px 30px;
}

.purpose-title-bar h2{
    color:#fff;
    font-size:50px;
    font-weight:800;
    font-family:'Bricolage Grotesque',sans-serif;
}

.purpose-content-box{
    padding:50px 30px 0;
}

.purpose-content-box.box-right{
    margin-top:55px;
}

.purpose-small-title{
    font-size:28px;
    margin-bottom:30px;
    font-weight:600;
}

.purpose-list-items li{
    position:relative;
    padding-left:30px;
    font-size:20px;
    line-height:180%;
    margin-bottom:18px;
    font-weight:500;
}

.purpose-list-items li::before{
    content:"";
    width:12px;
    height:12px;
    border-radius:50%;
    background:#fff;
    position:absolute;
    left:0;
    top:12px;
    box-shadow:
    0 0 0 4px rgba(255,255,255,0.15),
    0 0 12px rgba(255,255,255,0.6);
}

.purpose-content-box p{
    font-size:20px;
    line-height:170%;
    margin-bottom:45px;
}

/* =========================================================
   VALUES
========================================================= */

.jarara-values-section{
    padding:80px 0;
}

.values-title-bar{
    background:url('../images/green-strip.png') center/cover;
    text-align:center;
    padding:25px;
    margin-bottom:60px;
}

.values-title-bar h2{
    color:#fff;
    font-size:50px;
    font-weight:800;
    font-family:'Bricolage Grotesque',sans-serif;
}

.jarara-value-card{
    background:#efa61f;
    min-height:439px;
    position:relative;
    overflow:visible;
}

.jarara-value-title{
    padding-top:110px;
    text-align:center;
}

.jarara-value-title h3{
    color:#fff;
    font-size:35px;
    font-weight:700;
    font-family:'Bricolage Grotesque',sans-serif;
}

.jarara-value-overlay{
    position:absolute;
    left:-24px;
    right:-24px;
    top:58%;
    transform:translateY(-50%);
    background:rgba(98,210,210,0.55);
    padding:30px;
    backdrop-filter:blur(2px);
}

.jarara-value-overlay p{
    color:#fff;
    text-align:center;
    font-size:20px;
    line-height:160%;
    font-weight:600;
}

/* =========================================================
   PATTERN STRIP
========================================================= */

.team-pattern-strip,
.team-pattern-strip-bottom{
    width:100%;
    height:180px;
    background-image:url('../images/pattern-strip.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

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

.leadership-hero-section{
    background-image:url('../images/light-bg-pattern.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    position:relative;
    height:660px;
    margin-bottom:190px;
}

.leadership-title-box{
    width:65%;
    background:#6dc7c7;
    padding:34px 60px;
    position:absolute;
    top:140px;
}

.leadership-title-box h2{
    color:#fff;
    font-size:50px;
    font-weight:800;
    font-family:'Bricolage Grotesque',sans-serif;
}

.leadership-person-image{
    position:absolute;
    left:100px;
    bottom:-196px;
    z-index:3;
}

.leadership-brand-logo{
    position:absolute;
    right:40px;
    bottom:-142px;
}

/* =========================================================
   DIRECTORS SHOWCASE
========================================================= */

.directors-showcase-section{
    background-image:url('../images/Leader_background_2.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    position:relative;
    height:463px;
    margin-bottom:180px;
}

.directors-top-area{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:100px 40px 175px;
}

.directors-left-title{
    width:42%;
    text-align:center;
}

.directors-left-title h2{
    color:#0d5a78;
    font-size:42px;
    font-weight:800;
    line-height:140%;
    font-family:'Bricolage Grotesque',sans-serif;
}

.directors-right-description{
    width:50%;
}

.directors-right-description p{
    color:#0d5a78;
    font-size:20px;
    line-height:170%;
    font-weight:600;
}

.directors-bottom-area{
    background:#000;
    min-height:230px;
    position:relative;
}

.directors-brand-logos{
    width:35%;
    position:absolute;
    top:40px;
    left:30px;
}

.directors-team-image{
    position:absolute;
    top:-180px;
    right:0;
    width:100%;
    display:flex;
    justify-content:flex-end;
}

.directors-team-image img{
    width:650px;
}

/* =========================================================
   DIRECTORS INFO
========================================================= */

.directors-info-section{
    background-image:url('../images/Leader_background_3.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    height:463px;
    padding:150px 10px 120px;
}

.directors-info-left p{
    color:#0d5673;
    font-size:20px;
    line-height:170%;
    font-weight:600;
    text-align:justify;
}

.directors-info-right{
    text-align:center;
}

.directors-info-right h2{
    color:#0d5673;
    font-size:40px;
    line-height:140%;
    font-weight:800;
    font-family:'Bricolage Grotesque',sans-serif;
}

/* =========================================================
   ARTWORK
========================================================= */

.jarara-artwork-section{
    background-image:url('../images/Green-big-Box.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    padding:60px 0 0;
    height:1200px;
}

.artwork-main-title{
    text-align:center;
    margin-bottom:40px;
    margin-left:350px;
}

.artwork-main-title h2{
    color:#83c9a9;
    font-size:50px;
    font-weight:800;
    font-family:'Bricolage Grotesque',sans-serif;
}

.artwork-content-wrapper{
    background:rgba(133,214,211,0.78);
    height:615px;
    padding:50px 0 0;
}

.artwork-turtle-image{
    margin-top:-130px;
    text-align:center;
    padding: 0 0 0 80px;
}

.artwork-turtle-image img{
    height:800px;
    width:auto;
}

.artwork-text-content{
    padding:20px 80px 0 20px;
}

.artwork-text-content p{
    color:#000;
    font-size:20px;
    line-height:170%;
    margin-bottom:35px;
    font-weight:600;
    text-align:justify;
}

.artist-image-box{
    margin-top:100px;
    text-align:center;
    /*position: absolute;*/
}

.artist-image-box img{
    height:398px;
    width:auto;
    display: inline-block;
}

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

.about-cta-box{
    background:#f0a91d;
    text-align:center;
    padding:100px 30px;
}

.about-cta-box h2{
    color:#fff;
    font-size:50px;
    font-weight:800;
    margin-bottom:25px;
    font-family:'Bricolage Grotesque',sans-serif;
}

.about-cta-box p{
    color:#fff;
    font-size:20px;
    line-height:170%;
    max-width:500px;
    margin:0 auto 35px;
}

.about-contact-btn{
    display:inline-flex;
    align-items:center;
    gap:14px;
    background:#0a4b68;
    color:#fff;
    padding:8px 18px;
    border-radius:60px;
    font-size:18px;
    font-weight:700;
    font-family:'Bricolage Grotesque',sans-serif;
    box-shadow:0 6px 0 rgba(0,0,0,0.28);
    transition:0.3s ease;
}

.about-contact-btn:hover{
    color:#fff;
    transform:translateY(-3px);
}


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

@media(max-width:1400px){

    .artwork-main-title{
        margin-left:0;
    }

}

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

@media(max-width:992px){

    .about-hero-box{
        padding:50px 20px;
    }

    .about-overlay-box{
        padding:30px 20px;
    }

    .about-overlay-box h2{
        font-size:34px;
    }

    .about-overlay-box p{
        font-size:16px;
    }

    .story-heading-bar{
        top:0;
        margin-bottom:30px;
    }

    .story-heading-bar h2{
        font-size:34px;
    }

    .story-text-content{
        padding-top:0;
    }

    .story-text-content p{
        font-size:16px;
    }

    .purpose-title-bar h2{
        font-size:34px;
    }

    .purpose-content-box{
        padding:30px 20px;
    }

    .purpose-content-box.box-right{
        margin-top:0;
    }

    .purpose-list-items li,
    .purpose-content-box p{
        font-size:16px;
    }

    .jarara-values-section{
        padding:50px 20px;
    }

    .values-title-bar h2{
        font-size:34px;
    }

    .jarara-value-card{
        min-height:300px;
    }

    .jarara-value-title{
        padding-top:60px;
    }

    .jarara-value-title h3{
        font-size:28px;
    }

    .jarara-value-overlay{
        left:0;
        right:0;
        padding:20px;
    }

    .jarara-value-overlay p{
        font-size:16px;
    }

    .team-pattern-strip,
    .team-pattern-strip-bottom{
        height:90px;
    }

    .leadership-hero-section{
        height:auto;
        margin-bottom:0;
        padding-bottom:100px;
    }

    .leadership-title-box{
        width:100%;
        top:0;
        padding:20px;
    }

    .leadership-title-box h2{
        font-size:32px;
    }

    .leadership-person-image{
        position:relative;
        left:0;
        bottom:0;
        top: 70px;
        text-align:center;
        margin-top:30px;
    }

    .leadership-person-image img{
        width:280px;
        margin:auto;
    }

    .leadership-brand-logo{
        position:relative;
        right:0;
        bottom:0;
        top: 70px;
        text-align:center;
        margin-top:20px;
    }

    .leadership-brand-logo img{
        width:260px;
        margin:auto;
    }

    .directors-showcase-section{
        height:auto;
        margin-bottom:60px;
    }

    .directors-top-area{
        flex-direction:column;
        padding:40px 20px;
        gap:25px;
    }

    .directors-left-title,
    .directors-right-description{
        width:100%;
        text-align:center;
    }

    .directors-left-title h2{
        font-size:28px;
    }

    .directors-right-description p{
        font-size:16px;
    }

    .directors-bottom-area{
        min-height:auto;
        padding:30px 20px 0;
    }

    .directors-brand-logos{
        position:relative;
        width:100%;
        left:0;
        top:0;
        text-align:center;
        margin-bottom:30px;
    }

    .directors-team-image{
        position:relative;
        top:0;
        justify-content:center;
    }

    .directors-team-image img{
        width:100%;
        max-width:450px;
    }

    .directors-info-section{
        height:auto;
        padding:50px 20px;
    }

    .directors-info-left p{
        font-size:16px;
    }

    .directors-info-right h2{
        font-size:30px;
        margin-top:30px;
    }

    .jarara-artwork-section{
        height:auto;
        padding:50px 20px;
    }

    .artwork-main-title{
        margin-bottom:20px;
    }

    .artwork-main-title h2{
        font-size:34px;
    }

    .artwork-content-wrapper{
        height:auto;
        padding:40px 20px;
    }

    .artwork-turtle-image{
        margin:0 0 30px;
        padding: 0;
    }

    .artwork-turtle-image img{
        height:auto;
        max-width:300px;
    }

    .artwork-text-content{
        padding:0;
    }

    .artwork-text-content p{
        font-size:16px;
    }

    .artist-image-box{
        margin-top:30px;
        position: relative;
    }

    .artist-image-box img{
        height:auto;
        max-width:320px;
        width:100%;
    }

    .about-cta-box{
        padding:60px 20px;
    }

    .about-cta-box h2{
        font-size:34px;
    }

    .about-cta-box p{
        font-size:16px;
    }

    .custom-footer{
        padding:40px 20px;
    }

    .footer-menu-wrapper{
        border-left:none;
        padding-left:0;
        margin-top:20px;
    }

}

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

@media(max-width:576px){

    .story-heading-bar h2,
    .purpose-title-bar h2,
    .values-title-bar h2,
    .leadership-title-box h2,
    .artwork-main-title h2,
    .about-overlay-box h2,
    .about-cta-box h2{
        font-size:28px;
    }

    .jarara-value-overlay p{
        font-size:14px;
    }

    .leadership-person-image img{
        width:220px;
    }

    .leadership-brand-logo img{
        width:220px;
    }

    .directors-left-title h2{
        font-size:24px;
    }

    .directors-right-description p,
    .directors-info-left p{
        font-size:14px;
    }

    .directors-info-right h2{
        font-size:24px;
    }

    .artwork-main-title h2{
        font-size:28px;
    }

    .artwork-turtle-image img{
        max-width:220px;
        margin: auto;
    }

    .artwork-text-content p{
        font-size:14px;
    }

}



/*Page Services*/

body.services{
         font-family: 'Montserrat', sans-serif;
         background-image: url('../images/services_bg.png');
         background-repeat: no-repeat;
         background-position: center top;
         background-size: cover;
         background-attachment: fixed;
         overflow-x: hidden;
         position: relative;
         color: var(--white);
         }
        .service-hero-box {
            background: url(../images/hero_bg.png) center / cover;
            padding: 80px 50px;
        }
        section.service-hero-box h2 {
            margin: auto;
            text-align: center;
        }

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

.jarara-services-section{

  background-image: url('../images/service_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 3px solid #3b5d88;
  border-bottom: 3px solid #3b5d88;
  margin: 50px 0;
}

/* =========================================
   SERVICE ROW
========================================= */

.service-row-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 10px;
  border-bottom: 3px solid #5b6f90;
}

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

.service-left-content{
  width: 36%;
  text-align: center;
}

.service-left-content h2 {
    color: #3b6888;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 35px;
    font-weight: 700;
    line-height: 120%;
    margin-bottom: 18px;
    text-align: right;
}

.service-left-content p{
  color: #4b4b4b;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  text-align: right;
  font-weight: 500;
  line-height: 165%;
  margin: 0;
}

/* =========================================
   CENTER ARROW
========================================= */

.service-arrow-box{
  width: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-arrow-box i{
  color: #2f4f7f;
  font-size: 48px;
}

.service-arrow-img{
  width: 70px;
  height: auto;
  display: block;
}

/* =========================================
   RIGHT CONTENT
========================================= */

.service-right-content{
  width: 48%;
}

.service-right-content ul{
  margin: 0;
  padding-left: 25px;
}

.service-right-content li{

  color: #222222;

  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 180%;
  margin-bottom: 6px;
}

/* ===================================
   CUSTOM LIST ICON
=================================== */

.custom-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-list li{
  position: relative;
  padding-left: 38px;
  margin-bottom: 14px;
  font-size: 18px;
  line-height: 170%;
}

/* CUSTOM ROUND ICON */

.custom-list li::before{

  content: "";

  position: absolute;
  left: 0;
  top: 9px;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: #dff3fb;

  border: 3px solid #dff3fb;

  box-shadow:
    inset 0 0 0 4px #2d7da0,
    0 0 8px rgba(45,125,160,0.45);
}

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

@media(max-width:992px){

  .service-row-box{
    flex-direction: column;
    padding: 30px 20px;
    text-align: center;
  }

  .service-left-content,
  .service-arrow-box,
  .service-right-content{
    width: 100%;
  }

  .service-left-content{
    margin-bottom: 20px;
  }

  .service-arrow-box{
    margin-bottom: 20px;
  }

  .service-left-content h2{
    font-size: 28px;
  }

  .service-left-content p{
    font-size: 15px;
  }

  .service-arrow-box i{
    font-size: 28px;
  }

  .service-right-content{
    text-align: left;
  }

  .service-right-content li{
    font-size: 15px;
    line-height: 170%;
  }
}

@media(max-width:576px){

  .service-left-content h2{
    font-size: 24px;
  }

}


/*Page Partnership*/

body.page-template-page-partnerships{
	font-family: 'Montserrat', sans-serif;
    background-image: url(../images/partnerships_bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden;
    position: relative;
    color: var(--white);
     }


 /* =========================================
   PARTNERSHIP MODEL SECTION
========================================= */

.partnership-model-section{
  background-image: url('../images/Partnership_yellowbox_top_section.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 760px;
  position: relative;
  padding: 90px 0;
}

/* =========================================
   RIGHT ARTWORK
========================================= */

.partnership-side-art{
  position: absolute;
  top: 0;
  right: 0;
  width: 230px;
  height: 100%;
  z-index: 2;
}

.partnership-side-art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.partnership-title-box{
  padding-left: 70px;
  margin-bottom: 90px;
  position: relative;
  z-index: 5;
}

.partnership-title-box h2{
  color: #000000;
  /*font-family: 'Bricolage Grotesque', sans-serif;*/
  font-size: 50px;
  font-weight: 700;
  line-height: 110%;
  position: relative;
  top: 90px;
  margin: 0;
}

/* =========================================
   CONTENT BAR
========================================= */

.partnership-content-bar{
  background: rgba(240, 174, 34, 0.42);
  padding: 50px 70px;
  position: relative;
  top: 90px;
  z-index: 5;
}

.partnership-content-bar p{
  color: #111111;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 175%;
  max-width: 800px;
  margin: 0;
}

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

@media(max-width:1400px){

  .partnership-title-box h2{
    font-size: 56px;
  }

  .partnership-content-bar p{
    font-size: 22px;
  }
}

@media(max-width:992px){

  .partnership-model-section{
    min-height: auto;
    padding: 50px 0;
  }

  .partnership-side-art{
    width: 120px;
    opacity: 0.6;
  }

  .partnership-title-box{
    padding-left: 20px;
    margin-bottom: 40px;
  }

  .partnership-title-box h2{
    font-size: 34px;
  }

  .partnership-content-bar{
    padding: 30px 20px;
    top: 50px;
  }

  .partnership-content-bar p{
    font-size: 16px;
    line-height: 180%;
    padding-right: 70px;
  }
}

@media(max-width:576px){
  .partnership-title-box h2{
    font-size: 28px;
  }

}


/* =========================================
   PARTNERS SECTION
========================================= */

.jarara-partners-section{
  background: #000000;
  padding: 100px 70px 120px;
  position: relative;
  overflow: hidden;
}

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

.partners-main-title{
  text-align: center;
  margin-bottom: 90px;
}

.partners-main-title h2{
  color: #ffffff;
  font-size: 50px;
  font-weight: 700;
  line-height: 110%;
  margin: 0;
}

/* =========================================
   PARTNER ROW
========================================= */

.partner-item-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 30px;
  /*border-bottom: 3px solid rgba(198, 160, 22, 0.45);*/
  position: relative;
}


/* ===================================
   IMAGE DIVIDER
=================================== */

.partner-divider{
  width: 100%;
  text-align: center;
 /* margin: 10px 0 40px;*/
}

.partner-divider img{
  width: 92%;
  display: block;
  margin: auto;
}

/* OPTIONAL */

.partner-divider.reverse img{
  transform: scaleX(-1);
}



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

.partner-logo-box{
  width: 30%;
}

.partner-logo-box img{
  max-width: 100%;
  display: block;
}

/* =========================================
   RIGHT CONTENT
========================================= */

.partner-content-box{
  width: 58%;
}

.partner-content-box h3{

  color: #ffffff;

  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 35px;
  font-weight: 700;
  line-height: 120%;

  margin-bottom: 30px;
}

.partner-content-box p{

  color: #ffffff;

  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 175%;

  margin: 0;

  max-width: 1000px;
}

/* REMOVE LAST GLOW */

.partner-item-row.border-0::after{
  display: none;
}

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

@media(max-width:1400px){

  .partners-main-title h2{
    font-size: 56px;
  }

  .partner-content-box h3{
    font-size: 40px;
  }

  .partner-content-box p{
    font-size: 22px;
  }
}

@media(max-width:992px){

  .jarara-partners-section{
    padding: 50px 20px 70px;
  }

  .partners-main-title{
    margin-bottom: 40px;
  }

  .partners-main-title h2{
    font-size: 36px;
  }

  .partner-item-row{
    flex-direction: column;
    text-align: center;

    padding: 40px 0;
  }

  .partner-logo-box,
  .partner-content-box{
    width: 100%;
  }

  .partner-logo-box{
    margin-bottom: 30px;
  }

  .partner-logo-box img{
    max-width: 220px;
    margin: auto;
  }

  .partner-content-box h3{
    font-size: 28px;
    margin-bottom: 20px;
  }

  .partner-content-box p{
    font-size: 16px;
    line-height: 180%;
  }
}

@media(max-width:576px){

  .partners-main-title h2{
    font-size: 30px;
  }

  .partner-content-box h3{
    font-size: 24px;
  }

}


/* =========================================
   INTEGRATED DELIVERY SECTION
========================================= */

.integrated-delivery-section{

  background-image: url('../images/background_integrated_delivery.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  /*padding: 0 0 120px;
  overflow: hidden;*/
}

/* =========================================
   TOP/BOTTOM BORDER
========================================= */

.delivery-top-border,
.delivery-bottom-border{
  width: 100%;
  height: 92px;
  background-image: url('../images/multicolour_divider_top_section.png');
  background-repeat: repeat-x;
  background-position: center;
  background-size: contain;
}

.delivery-top-border{
  margin-bottom: 90px;
}

.delivery-bottom-border{
  margin-top: 90px;
}

/* =========================================
   HEADING
========================================= */

.delivery-heading-box{
  text-align: center;
  margin-bottom: 90px;
}

.delivery-heading-box h2{
  color: #000000;
  font-size: 50px;
  font-weight: 700;
  line-height: 110%;

  margin-bottom: 25px;
}

.delivery-heading-box h3{
  color: #0f9b9d;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 35px;
  font-weight: 700;
  line-height: 120%;

  margin: 0;
}

/* =========================================
   BENEFITS GRID
========================================= */

.delivery-benefits-grid{
  margin-bottom: 90px;
}

/* ITEM */

.delivery-benefit-item{
  text-align: center;
}

/* TOP ORANGE LINE */

.delivery-line{

  width: 100%;
  height: 19px;
  background-image: url('../images/orange_line_top_boarder.png');
  background-repeat: repeat-x;
  background-size: contain;
  margin: 25px 0;
}

/* TEXT */

.delivery-benefit-item h4{
  color: #111111;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  margin: 25px 0;
}

/* =========================================
   CENTER DIAGRAM
========================================= */

.delivery-diagram-box{
  text-align: center;
  margin-bottom: 100px;
}

.delivery-diagram-box img{
  width: 100%;
  max-width: 1700px;
  /*box-shadow: 0 10px 40px rgba(0,0,0,0.10);*/
  display: inline-block;
}

/* =========================================
   WHY IT MATTERS
========================================= */

.why-matters-box{

  border-top: 8px dotted #e49d2f;
  border-bottom: 8px dotted #e49d2f;

  padding: 45px 40px;
}

/* LEFT */

.why-title-box h2{
  color: #000000;
  font-size: 50px;
  font-weight: 700;
  line-height: 150%;
  margin: 0;
}

/* RIGHT */
.why-content-box {
    width: 90%;
    text-align: justify;
}

.why-content-box p{
  color: #111111;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
  margin: 0;
}

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

@media(max-width:1400px){

  .delivery-heading-box h2{
    font-size: 58px;
  }

  .delivery-heading-box h3{
    font-size: 38px;
  }

  .delivery-benefit-item h4{
    font-size: 22px;
  }

  .why-title-box h2{
    font-size: 52px;
  }

  .why-content-box p{
    font-size: 24px;
  }
}

@media(max-width:992px){

  .integrated-delivery-section{
    padding-bottom: 60px;
  }

  .delivery-top-border{
    margin-bottom: 40px;
  }

  .delivery-heading-box{
    margin-bottom: 50px;
  }

  .delivery-heading-box h2{
    font-size: 36px;
    margin-bottom: 15px;
  }

  .delivery-heading-box h3{
    font-size: 24px;
  }

  .delivery-benefits-grid{
    margin-bottom: 50px;
  }

  .delivery-benefit-item h4{
    font-size: 16px;
    line-height: 170%;
  }

  .delivery-diagram-box{
    margin-bottom: 50px;
  }

  .why-matters-box{
    padding: 30px 20px;
  }

  .why-title-box{
    margin-bottom: 20px;
  }

  .why-title-box h2{
    font-size: 32px;
  }

  .why-content-box p{
    font-size: 16px;
    line-height: 180%;
  }

  .delivery-bottom-border{
    margin-top: 50px;
  }
}

@media(max-width:576px){

  .delivery-heading-box h2{
    font-size: 30px;
  }

  .delivery-heading-box h3{
    font-size: 20px;
  }

  .why-title-box h2{
    font-size: 28px;
  }

}


/*Work with us*/

body.services{
         font-family: 'Montserrat', sans-serif;
         background-image: url('../images/work_with_us_bg.png');
         background-repeat: no-repeat;
         background-position: center top;
         background-size: cover;
         background-attachment: fixed;
         overflow-x: hidden;
         position: relative;
         color: var(--white);
         }


/* =========================================
   WORK WITH US SECTION
========================================= */

.work-with-us-section{
  background-image: url('../images/work_with_us_top_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 70px 40px;
  position: relative;
  overflow: hidden;
}

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

.work-content-box{
  max-width: 900px;
}

/* TITLE */

.work-content-box h2{
  color: #000000;
  font-size: 50px;
  font-weight: 700;
  line-height: 110%;
  margin-bottom: 35px;
}

/* TEXT */

.work-content-box p{
  color: #111111;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 150%;
  margin-bottom: 40px;
  max-width: 760px;
}

/* =========================================
   DOWNLOAD BUTTON
========================================= */

.capability-download-btn{

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

  background: #000000;

  color: #ffffff;
  text-decoration: none;

  padding: 10px 18px 10px 22px;

  border-radius: 50px;

  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;

  transition: 0.3s ease;
}

.capability-download-btn:hover{
  color: #ffffff;
  transform: translateY(-2px);
}

/* ICON */

.download-icon-box{
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-icon-box i{
  color: #ffffff;
  font-size: 22px;
}

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

.capability-image-box{
  text-align: center;
}

.capability-image-box img{

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

  display: inline-block;
}

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

@media(max-width:992px){

  .work-with-us-section{
    padding: 40px 20px;
  }

  .work-content-box{
    margin-bottom: 35px;
  }

  .work-content-box h2{
    font-size: 34px;
    margin-bottom: 20px;
  }

  .work-content-box p{
    font-size: 15px;
    line-height: 180%;
    margin-bottom: 25px;
  }

  .capability-image-box img{
    max-width: 180px;
  }
}

@media(max-width:576px){

  .work-content-box h2{
    font-size: 28px;
  }

}


/* =========================================
   DELIVERY PARTNERS SECTION
========================================= */

.delivery-partners-section{

  background-image: url('../images/why_work_with_us_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  padding: 70px 40px;

  position: relative;
  overflow: hidden;
}

/* =========================================
   TOP BLACK LINE
========================================= */

.delivery-partners-section::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: #000000;
}

/* =========================================
   HEADING
========================================= */

.delivery-partners-heading{
  text-align: center;
  margin-bottom: 60px;
}

.delivery-partners-heading h2{
  color: #111111;
  font-size: 50px;
  font-weight: 700;
  margin-top: 100px;
  margin-bottom: 20px;
}

.delivery-partners-heading p{
    color: #222222;
    font-family: 'Montserrat', sans-serif;
    text-align: justify;
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
    max-width: 750px;
    margin: auto;
}

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

.partner-service-card{

  background: #000000;

  padding: 35px 30px 30px;

  min-height: 709px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* LOGO */

.partner-card-logo{
  text-align: center;
  margin-bottom: 30px;
}

.partner-card-logo img{
  max-width: 260px;
}

/* TEXT */

.partner-card-content p{
  color: #ffffff;
  font-size: 20px;
  text-align: justify;
  font-weight: 500;
  line-height: 150%;
}

/* BUTTON */

.partner-btn-box{
  text-align: center;
  margin-top: 30px;
}

.partner-visit-btn{

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

  background: #f0b11f;

  color: #ffffff;
  text-decoration: none;

  padding: 10px 18px;

  border-radius: 50px;

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

.partner-visit-btn span{
  display: flex;
  align-items: center;
}

.partner-visit-btn i{
  font-size: 18px;
}

@media (max-width: 992px) {
    .partner-card-content p {
    font-size: 18px;
}
}

/* =========================================
   WHY WORK
========================================= */

.why-work-section{
  margin-top: 80px;
}

.why-work-section h2{
  color: #111111;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 20px;
}

.why-work-section > p{
  color: #222222;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  margin-bottom: 40px;
}


/* =========================================
   FEATURE HIGHLIGHT SECTION
========================================= */

.feature-highlight-section{
  background: #156885;
  padding: 70px 110px;
  border: 2px solid rgba(173, 225, 234, 0.55);
  margin-left: -3.5rem;
  margin-right: -3.5rem;
  position: relative;
  overflow: hidden;
}

/* =========================================
   LIST
========================================= */

.feature-highlight-list{

  list-style: none;

  padding: 0;
  margin: 0;
}

/* =========================================
   ITEM
========================================= */

.feature-highlight-list li{
  position: relative;
  padding-left: 50px;
  margin-bottom: 50px;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
}

/* REMOVE LAST SPACE */

.feature-highlight-list li:last-child{
  margin-bottom: 0;
}

/* =========================================
   CUSTOM ROUND ICON
========================================= */

.feature-highlight-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #6ca7bb 0%,
    #d4edf4 45%,
    #ffffff 100%
  );

  box-shadow:
    0 0 0 3px rgba(206, 239, 245, 0.35),
    0 0 12px rgba(255,255,255,0.25);
}

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

@media(max-width:1400px){

  .feature-highlight-list li{
    font-size: 26px;
  }
}

@media(max-width:992px){

  .feature-highlight-section{

    padding: 40px 25px;
  }

  .feature-highlight-list li{

    font-size: 18px;
    line-height: 170%;

    padding-left: 36px;

    margin-bottom: 30px;
  }

  .feature-highlight-list li::before{

    width: 14px;
    height: 14px;

    top: 8px;
  }
}

/* =========================================
   FOOTNOTE
========================================= */

.work-note-text{
  margin-top: 40px;
}

.work-note-text p {
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
    margin: 0;
}

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

@media(max-width:992px){

  .delivery-partners-section{
    padding: 50px 20px;
  }

  .delivery-partners-heading h2{
    font-size: 34px;
  }

  .delivery-partners-heading p{
    font-size: 15px;
  }

  .partner-service-card{
    min-height: auto;
  }

  .partner-card-logo img{
    max-width: 180px;
  }

  .why-work-section{
    margin-top: 50px;
  }

  .why-work-section h2{
    font-size: 30px;
  }

  .why-work-section > p{
    font-size: 15px;
  }

  .feature-item{
    font-size: 14px;
  }
}



/* =========================================
   PATTERN DIVIDER SECTION
========================================= */

.jarara-pattern-divider{

  background: #78b7c8;

  position: relative;

  overflow: hidden;
}

/* =========================================
   TOP BLACK BAR
========================================= */

.pattern-top-black-bar{
  width: 100%;
  height: 64px;
  background: #000000;
}

/* =========================================
   PATTERN IMAGE
========================================= */

.pattern-image-wrapper{

  width: 100%;

  position: relative;
}

.pattern-image-wrapper img{

  width: 100%;

  display: block;

  margin-top: 100px;
}

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

@media(max-width:992px){

  .pattern-top-black-bar{
    height: 40px;
  }

  .pattern-image-wrapper img{
    margin-top: 80px;
  }
}


/*Page Contact Us*/

body.contact{
         font-family: 'Montserrat', sans-serif;
         background-image: url('../images/contact_bg.png');
         background-repeat: no-repeat;
         background-position: center top;
         background-size: cover;
         background-attachment: fixed;
         overflow-x: hidden;
         position: relative;
         color: var(--white);
         }

/* =========================================
   LET'S WORK SECTION
========================================= */

.lets-work-section{

  background: #efefef;

  position: relative;
  overflow: hidden;
}

/* =========================================
   MAIN WRAPPER
========================================= */

.lets-work-content-wrapper{

  background-image: url('../images/top_contact_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 570px;
  padding: 70px 70px 50px;
}

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

.lets-work-content{
  max-width: 620px;
}

/* TITLE */

.lets-work-content h2{
  color: #000000;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 30px;
}

/* TEXT */

.lets-work-content p{
  color: #111111;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  text-align: justify;
  font-weight: 600;
  line-height: 150%;
  margin: 0;
  max-width: 450px;
}

/* =========================================
   TURTLE IMAGE
========================================= */

.lets-work-turtle{
  text-align: right;
}

.lets-work-turtle img{
  height: 455px;
  width: auto;
  display: inline-block;
}

/* =========================================
   BOTTOM PATTERN
========================================= */

.lets-work-pattern{
  width: 100%;
}

.lets-work-pattern img {
    width: auto;
    height: 98px;
    display: block;
}

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

@media(max-width:992px){

  .lets-work-content-wrapper{
    padding: 40px 25px 30px;
  }

  .lets-work-content{
    margin-bottom: 30px;
  }

  .lets-work-content h2{

    font-size: 36px;

    margin-bottom: 20px;
  }

  .lets-work-content p{

    font-size: 16px;
    line-height: 170%;
  }

  .lets-work-turtle{
    text-align: center;
  }

  .lets-work-turtle img{
    height: 350px;
    width: auto;
  }
}

@media(max-width:576px){

  .lets-work-content h2{
    font-size: 30px;
  }
} 



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

.jarara-contact-section{
  /*background: #000000;*/
  position: relative;
  overflow: hidden;
  padding: 90px 70px 0;
}

/* =========================================
   BACKGROUND SHAPES
========================================= */

.contact-bg-shape{

  position: absolute;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  border: 22px solid rgba(0, 169, 186, 0.15);

  z-index: 1;
}

.contact-bg-shape::before{

  content: "";

  position: absolute;
  inset: 35px;

  border-radius: 50%;
  border: 18px solid rgba(0, 169, 186, 0.15);
}

.contact-bg-shape::after{

  content: "";

  position: absolute;
  inset: 85px;

  border-radius: 50%;
  border: 14px solid rgba(0, 169, 186, 0.15);
}

/* LEFT */

.shape-left{
  left: -140px;
  bottom: 120px;
}

/* RIGHT */

.shape-right{
  right: -140px;
  top: -80px;
}

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

.contact-info-wrapper{
  position: relative;
  z-index: 5;
}

/* ITEM */

.contact-info-item{

  display: flex;
  align-items: center;

  gap: 18px;

  margin-bottom: 90px;
}

/* ICON */

.contact-icon{

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

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

.contact-icon i{

  color: #86d6e3;
  font-size: 22px;
}

/* TEXT */

.contact-text{

  color: #ffffff;

  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 600;
}

/* =========================================
   FORM BOX
========================================= */

.message-form-box{

  background: #89d9e7;

  max-width: 700px;

  margin-left: auto;

  padding: 45px 45px 50px;

  position: relative;
  z-index: 5;
}

/* TITLE */

.message-form-box h2{
  color: #1d2a2e;
  font-size: 50px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}

/* FORM GROUP */

.form-group{
  margin-bottom: 20px;
}

.form-group label{

  display: block;

  color: #2d2d2d;

  font-size: 15px;
  font-weight: 600;

  margin-bottom: 8px;
}

/* INPUT */

.form-group input,
.form-group textarea{

  width: 100%;

  border: 2px solid #7a7a7a;

  background: #ffffff;

  height: 46px;

  padding: 12px 15px;

  font-size: 14px;

  outline: none;
}

/* TEXTAREA */

.form-group textarea{

  height: 130px;
  resize: none;
}

/* =========================================
   CHECKBOX
========================================= */

.privacy-check{

  display: flex;
  align-items: center;

  gap: 10px;

  margin: 15px 0 25px;
}

.privacy-check input{
  margin-top: 2px;
}

.privacy-check label{

  color: #3d3d3d;

  font-size: 14px;
  font-weight: 600;
}

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

.contact-submit-btn{

  width: 100%;

  border: 2px solid #67b8c4;

  background: transparent;

  color: #fff;

  height: 48px;

  font-size: 15px;
  font-weight: 600;

  transition: 0.3s ease;
}

.contact-submit-btn:hover{

  background: #000000;
  color: #ffffff;
}

/* =========================================
   BOTTOM PATTERN
========================================= */

.contact-bottom-pattern{
  margin-top: 80px;
}

.contact-bottom-pattern img{
  width: 100%;
  display: block;
}

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

@media(max-width:992px){

  .jarara-contact-section{
    padding: 50px 20px 0;
  }

  .contact-info-wrapper{
    margin-bottom: 40px;
  }

  .contact-info-item{
    margin-bottom: 35px;
  }

  .contact-text{
    font-size: 18px;
  }

  .message-form-box{
    padding: 30px 20px;
  }

  .message-form-box h2{
    font-size: 34px;
    margin-bottom: 25px;
  }

  .contact-bottom-pattern{
    margin-top: 40px;
  }
}

/* =========================================================
   JARARA WORDPRESS — PAGE-SPECIFIC BODY CLASSES
   Overrides the duplicate body.services rules above
========================================================= */

body.home {
  font-family: 'Montserrat', sans-serif;
  background-image: url('../images/bome-bg.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  overflow-x: hidden;
  position: relative;
  color: var(--white);
}

body.about {
  font-family: 'Montserrat', sans-serif;
  background-image: url('../images/about_bg.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  overflow-x: hidden;
  position: relative;
  color: var(--white);
}

body.services {
  font-family: 'Montserrat', sans-serif;
  background-image: url('../images/services_bg.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  overflow-x: hidden;
  position: relative;
  color: var(--white);
}

body.partnerships {
  font-family: 'Montserrat', sans-serif;
  background-image: url('../images/partnerships_bg.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  overflow-x: hidden;
  position: relative;
  color: var(--white);
}

body.work-with-us {
  font-family: 'Montserrat', sans-serif;
  background-image: url('../images/work_with_us_bg.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  overflow-x: hidden;
  position: relative;
  color: var(--white);
}

body.contact {
  font-family: 'Montserrat', sans-serif;
  background-image: url('../images/contact_bg.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  overflow-x: hidden;
  position: relative;
  color: var(--white);
}