/*-----------------------------------------------------------------------------------

    Theme Name: Reak - Creative Agency & Portfolio HTML Template
    Author: Ordianit
    Support:ordianit@gmail.com
    Description: Reak - Creative Agency & Portfolio HTML Template
    Version: 1.0.1

-----------------------------------------------------------------------------------

/************ ================= ***************

	-----------------
    INDEXING START HERE
	-----------------
	1.1 Theme Css
	1.2 Common Classes
	1.4 BRAND AGENCY CSS START HERE 
	1.5 DESIGN AGENCY CSS START HERE
	1.6 DESIGN STUDIO CSS START HERE
	1.7 DIGITAL AGENCY CSS HERE 
	1.8 SOLO DESIGN AGENCY CSS START HERE



**********************************************/
/*----------------------------------------*/
/*  1.1 Theme Css
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Funnel+Display:wght@300..800&display=swap");
:root {
  /**=========== color ===========*/
  --oit-clr-white: #fff;
  --oit-clr-black: #000;
  --oit-grey-1: #f5f5f5;
  --oit-grey-2: #494949;
  --oit-text-body: #5d5d5d;
  --oit-theme-1: #000;
  --oit-border-1: #EAEBED;
}

:root {
  /**========== font family ==============*/
  --oit-ff-body: "Plus Jakarta Sans", sans-serif;
  --oit-ff-heading: "Funnel Display", sans-serif;
  --oit-ff-funnel: "Funnel Display", sans-serif;
  --oit-ff-p: "Plus Jakarta Sans", sans-serif;
  --oit-ff-fontawesome: "Font Awesome 6 Pro";
}




/* --- Hizmetler Alanı - Sabit 4:5 Dikey Görsel Ayarı --- */

/* Resmi tutan çerçevenin boyutunu ve oranını sabitliyoruz */
.oit-service-thumb {
    width: 400px; /* İstediğin standart genişlik (İhtiyacına göre 300px-500px arası yapabilirsin) */
    flex-shrink: 0; /* Küçülmesini engeller, yanındaki metni sıkıştırır */
    aspect-ratio: 4 / 5; /* Kutuyu kesin olarak 4:5 dikey formatına zorlar */
    border-radius: 10px; /* Sitenin estetiğine uyması için köşeleri hafif yuvarlar */
    overflow: hidden; /* Dışarı taşan resim kısımlarını keser */
    margin-left: 30px; /* Yazı alanı ile arasına biraz nefes boşluğu bırakır */
}

/* Çerçevenin içindeki resmin (2000px de olsa) nasıl davranacağını belirliyoruz */
.oit-service-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi ezmez, sündürmez; çerçevenin içini tam dolduracak şekilde, ortalayarak keser */
    display: block;
}

/* Tablet ve Mobil Uyumluluk (Ekran küçüldüğünde resmin devasa kalmaması için) */
@media screen and (max-width: 992px) {
    .oit-service-item {
        flex-direction: column; /* Mobilde yazıyı üste, resmi alta alır */
    }
    .oit-service-thumb {
        width: 100%; /* Mobilde ekranı tam kaplar */
        max-width: 400px; /* Ama 400px'den büyük olmaz */
        margin-left: 0;
        margin-top: 30px; /* Yazıdan sonra biraz boşluk */
    }
}



/* Mobil Menü Arka Planını Yumuşatma */
.oitoffcanvas {
    background-color: #171518 !important; /* Kapkaranlık siyah yerine, çok sıcak ve zengin bir füme/koyu mürdüm tonu */
    border-left: 2px solid #E1306C !important; /* Menü açıldığında solunda çok şık ince pembe bir çizgi belirir */
}

/* Slogan Tasarımı */
.kugu-mobile-slogan {
    color: #fce4ec !important; /* Uçuk tatlı bir pembe/beyaz */
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0.5px;
    margin-top: 15px;
}

/* Araya Şık Ayırıcı Çizgi */
.kugu-offcanvas-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(225, 48, 108, 0.3), transparent);
    margin: 25px 0;
}

/* "Bize Ulaşın" Başlığı */
.kugu-offcanvas-title {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    margin-bottom: 25px !important;
}

/* Kaba Beyaz Yuvarlakları İptal Edip Zarif İkonlar Yapma */
.kugu-icon-box a {
    background-color: rgba(225, 48, 108, 0.1) !important; /* Saydam pembe arka plan */
    color: #E1306C !important; /* Pembe İkonlar */
    border: 1px solid rgba(225, 48, 108, 0.3) !important; /* İncecik zarif bir çerçeve */
    width: 45px !important;
    height: 45px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    transition: all 0.3s ease !important;
}

/* İkonun üzerine gelince (veya dokununca) hafif parlama */
.kugu-info-item:hover .kugu-icon-box a {
    background-color: #E1306C !important;
    color: #ffffff !important;
    transform: scale(1.05);
}

/* "E-posta", "Telefon" yazan üst başlıklar */
.oitoffcanvas__info-address span {
    color: #a0a0a0 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
    display: block;
}

/* Asıl iletişim yazıları (Numara, adres vb.) */
.oitoffcanvas__info-address a {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* Kapatma (Çarpı) Butonunu da Temaya Uydurma */
.kugu-close-btn {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: background 0.3s ease !important;
}

.kugu-close-btn:hover {
    background-color: #E1306C !important;
}







/* Kuğu Google Maps Butonu - Genel Yapı */
.kugu-google-maps-btn {
    display: inline-flex;
    align-items: center;
    background-color: #ffffff; /* Logoların ve renklerin patlaması için temiz beyaz */
    color: #333333; /* Koyu gri, okunaklı yazı */
    border-radius: 30px; /* Hap şeklinde yuvarlak tasarım */
    padding: 6px 20px 6px 6px; /* Sol taraf ikonu saracak kadar dar, sağ taraf geniş */
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* İkonun Etrafındaki Kırmızı Daire (Google Pin Hissiyatı) */
.gmaps-icon {
    background-color: #EA4335; /* Google Maps Orijinal Kırmızısı */
    color: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-right: 12px;
    transition: all 0.3s ease;
}

/* Üzerine Gelince (Hover) Olacak Eğlenceli Animasyonlar */
.kugu-google-maps-btn:hover {
    transform: translateY(-3px); /* Buton hafifçe havaya kalkar */
    box-shadow: 0 8px 15px rgba(234, 67, 53, 0.25); /* Etrafına kırmızımsı/pembe şık bir gölge yayılır */
    color: #4285F4; /* Üzerine gelince yazı rengi Google Mavisine döner */
}

/* Üzerine gelince ikonun hareketi ve renk değişimi */
.kugu-google-maps-btn:hover .gmaps-icon {
    background-color: #4285F4; /* İkon çemberi Google Kırmızısından Google Mavisine geçer */
    transform: scale(1.1) rotate(10deg); /* Pin ikonu hafifçe büyür ve tatlıca sağa yatar */
}





/* Instagram Vitrini Genel Ayarları */
.kugu-instagram-feed {
    padding: 60px 0;
    font-family: 'Arial', sans-serif;
}

/* Başlık Alanı */
.ig-feed-header {
    text-align: center;
    margin-bottom: 40px;
}

.ig-feed-header h2 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 5px;
}

.ig-handle {
    color: #fcd0d0; /* Instagram pembesi */
    font-size: 18px;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.ig-handle:hover {
    color: #ffffff;
}

/* 4'lü Izgara Düzeni */
.ig-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Masaüstünde 4 fotoğraf yan yana */
    gap: 15px; /* Fotoğraflar arası çok zarif bir boşluk */
    padding: 0 20px;
}

/* Her Bir Fotoğraf Kartı */
.ig-item {
    position: relative;
    display: block;
    border-radius: 10px; /* Çok hafif yuvarlatılmış köşeler */
    overflow: hidden; /* Dışarı taşan büyümüş resmi gizler */
    aspect-ratio: 1 / 1; /* Resmi otomatik olarak kusursuz KARE yapar */
}

/* Görsel Ayarları */
.ig-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kareye ezmeden, sığdırarak oturtur */
    transition: transform 0.5s ease; /* Yumuşak büyüme efekti hızı */
}

/* Üzerine Gelince Çıkan Siyah Saydam Perde ve İkon */
.ig-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(16, 18, 22, 0.6); /* Sitenin temasına uygun şeffaf siyah/füme perde */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Başlangıçta görünmez */
    transition: opacity 0.3s ease;
}

.ig-overlay i {
    color: #ffffff;
    font-size: 40px; /* Ortada beliren ikonun boyutu */
    transform: scale(0.5); /* İkon başta küçüktür */
    transition: transform 0.3s ease; /* İkonun büyüme animasyonu */
}

/* HOVER (Üzerine Gelme) Efektleri */
.ig-item:hover img {
    transform: scale(1.1); /* Resim %10 büyür */
}

.ig-item:hover .ig-overlay {
    opacity: 1; /* Siyah perde görünür olur */
}

.ig-item:hover .ig-overlay i {
    transform: scale(1); /* İkon normal boyutuna gelerek öne çıkar */
}

/* MOBİL UYUMLULUK */

/* Tablet (2'li dizilim) */
@media screen and (max-width: 992px) {
    .ig-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Telefon (Yan yana 2'li kalsın, alta kaymasın ki mobilde şık dursun) */
@media screen and (max-width: 576px) {
    .ig-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 15px;
    }
    .ig-feed-header h2 {
        font-size: 24px;
    }
    .ig-overlay i {
        font-size: 30px;
    }
}






/* Arka Plansız WhatsApp Butonu */
.kugu-wp-header-btn {
    width: 50px; 
    height: 50px;
    background: transparent; /* Arka plan yok */
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    font-size: 32px; /* İkon boyutu (Arka plan olmadığı için bir tık büyük tuttuk) */
    color: #25D366; /* WhatsApp Orijinal Yeşili */
    text-decoration: none;
    transition: all 0.3s ease;
    margin-right: 10px; /* Instagram butonu ile arasına hafif boşluk */
}

/* Üzerine gelince uygulanacak efekt */
.kugu-wp-header-btn:hover {
    color: #128C7E; /* Hover durumunda bir tık koyu yeşil */
    transform: scale(1.15); /* Hafifçe büyür */
    filter: drop-shadow(0px 4px 6px rgba(37, 211, 102, 0.3)); /* Etrafına hafif yeşil bir parlama yayar */
}




/* Footer WhatsApp Butonu Özel Tasarımı */
.footer-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* İkon ve yazı arasındaki boşluk */
    background-color: #25D366; /* WhatsApp Orijinal Yeşili */
    color: #ffffff;
    padding: 14px 35px;
    border-radius: 50px; /* Tam yuvarlak köşeler */
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.25); /* Etrafına hafif yeşil parlama */
}

/* WhatsApp İkonunu biraz büyütelim */
.footer-whatsapp-btn i {
    font-size: 24px;
}

/* Üzerine gelince uygulanacak efekt */
.footer-whatsapp-btn:hover {
    background-color: #128C7E; /* WhatsApp'ın bir tık koyu yeşili (Hover rengi) */
    color: #ffffff;
    transform: translateY(-4px); /* Tıklanma hissi için hafif yukarı kalkar */
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4); /* Parlama artar */
}



/* Kuğu Kompakt Footer Genel Ayarları */
.kugu-compact-footer {
    background-color: #101216; /* Sitenin karanlık teması */
    padding: 10px 0 20px 0; /* Üstten 60px, alttan 20px (Daha az boşluk) */
    font-family: 'Arial', sans-serif;
    color: #a0a0a0;
}




.kugu-compact-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Üst Kısım: CTA (Randevu Çağrısı) */
.footer-cta-section {
    text-align: center;
    margin-bottom: 40px;
}

.footer-cta-section h2 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.footer-cta-section p {
    font-size: 15px;
    margin-bottom: 25px;
}

.footer-cta-btn {
    display: inline-block;
    background-color: #fcd0d0; /* Pembe vurgu rengi */
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    transition: all 0.3s ease;
}

.footer-cta-btn:hover {
    background-color: #ffffff;
    color: #101216;
    transform: translateY(-2px);
}

/* İnce Ayırıcı Çizgiler */
.footer-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.05); /* Çok hafif, şeffaf bir çizgi */
    margin: 30px 0;
}

/* Orta Kısım: Sütun Düzeni */
.footer-middle-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-col {
    flex: 1;
    min-width: 150px;
}

/* Logo Sütunu Özel Ayarı */
.footer-col.logo-col {
    flex: 1.5; /* Logo kısmına biraz daha geniş alan */
}

.footer-col.logo-col img {
    max-width: 160px; /* Logoyu çok büyütmeden kibar tutuyoruz */
}

/* Sütun Başlıkları */
.footer-col h4 {
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 600;
}

/* Link Listeleri */
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-col ul li a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: #fcd0d0;
}

/* Sosyal İkonlar */
.footer-social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
}

.footer-social-icons a:hover {
    background-color: #fcd0d0;
    transform: scale(1.1);
}

/* Alt Kısım: Telif ve Gizlilik */
.footer-bottom-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.policy-links a {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.policy-links a:hover {
    color: #ffffff;
}

/* MOBİL UYUMLULUK */
@media screen and (max-width: 768px) {
    .footer-middle-section {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-bottom-section {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-col.logo-col img {
        margin-bottom: 20px;
    }
}


/* Genel Alan Ayarları */
.kugu-services-section {
    background-color: #121418; 
    padding: 80px 20px;
    font-family: 'Arial', sans-serif;
}

.kugu-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Başlık Ayarları */
.services-header {
    text-align: center;
    margin-bottom: 60px;
}

.services-title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.services-title span {
    color: #fcd0d0;
}

/* Alt başlık genişletildi (600px'den 850px'e çıkarıldı ki uzun yazı güzel dursun) */
.services-subtitle {
    color: #a0a0a0;
    font-size: 16px;
    max-width: 850px; 
    margin: 0 auto;
    line-height: 1.7;
}

/* Grid (Izgara) Sistemi */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
}

/* Kart Tasarımı */
.service-card {
    background-color: #1a1d24; 
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.4s ease; 
    border: 1px solid #2a2d35; 
}

.service-card:hover {
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(225, 48, 108, 0.15); 
    border-color: #fcd0d0;
}

/* İkon Çerçevesi */
.service-icon {
    width: 80px;
    height: 80px;
    background: rgba(225, 48, 108, 0.1); 
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    color: #fcd0d0;
    font-size: 32px;
    transition: all 0.4s ease;
}

.service-card:hover .service-icon {
    background: #fcd0d0;
    color: #ffffff;
    transform: rotateY(180deg); 
}

.service-card h3 {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 600;
}

.service-card p {
    color: #a0a0a0;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* YENİ: Hakkımızda Alanı Tasarımı */
.about-us-mini {
    margin-top: 80px; /* Kartlar ile arasındaki boşluk */
    padding-top: 50px;
    border-top: 1px solid #2a2d35; /* Kartlardan ayırmak için çok hafif ve şık bir üst çizgi */
    text-align: center;
}

.about-us-mini .about-icon {
    color: #fcd0d0;
    font-size: 28px;
    margin-bottom: 15px;
}

.about-us-mini h3 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
}

.about-us-mini p {
    color: #a0a0a0;
    font-size: 16px;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
}

/* MOBİL UYUMLULUK */
@media screen and (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media screen and (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; 
    }
    .kugu-services-section {
        padding: 60px 15px;
    }
    .services-title {
        font-size: 28px;
    }
    .about-us-mini h3 {
        font-size: 22px;
    }
}





/* Instagram Header Butonu - Genel Dairesel Yapı */
.kugu-ig-header-btn {
    width: 50px; 
    height: 50px;
    border-radius: 50%;
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    font-size: 32px; /* İkonu bir tık büyüttüm ki gradient daha güzel dursun */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08); 
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Sadece Instagram İkonuna Orijinal Gradient Rengini Verme */
.kugu-ig-header-btn i {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
}

/* Üzerine gelince uygulanacak efekt */
.kugu-ig-header-btn:hover {
    transform: scale(1.08); /* Hafifçe büyür */
    box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.12); /* Gölgesi belirginleşir */
}

/* Üzerine gelince ikonun hafif parlaması (isteğe bağlı ince bir detay) */
.kugu-ig-header-btn:hover i {
    filter: brightness(1.1);
}




/* Video Alanı Genel Kapsayıcısı - Ekran yüksekliğinin %70'i */
.sd-hero-video {
  width: 100%;
  height: 70vh; 
  position: relative;
  overflow: hidden;
  background-color: #000; /* Video yüklenirken siyah arkaplan görünsün */
}

/* Videoların ortak ayarları: Kapsayıcıyı tam doldur ama ezilme */
.sd-hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Videonun oranını bozmadan 70vh içine oturtur */
}

/* Varsayılan (Masaüstü) Ayarlar */
.desktop-video {
  display: block;
}

.mobile-video {
  display: none;
}

/* Mobil Ekranlar İçin (768px ve altı) */
@media screen and (max-width: 768px) {
  .desktop-video {
    display: none; /* Masaüstü videoyu gizle */
  }

  .mobile-video {
    display: block; /* Mobil videoyu göster */
  }
}




.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  max-width: 1750px;
}

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

html {
  scroll-behavior: smooth;
}

/*---------------------------------
	typography css start 
---------------------------------*/
body {
  font-size: 14px;
  line-height: 26px;
  font-weight: normal;
  color: var(--oit-text-body);
  font-family: var(--oit-ff-body);
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  font-weight: 500;
  line-height: 1.2;
  -webkit-transition: color 0.3s ease-out;
  -moz-transition: color 0.3s ease-out;
  -ms-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-heading);
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

ul {
  margin: 0px;
  padding: 0px;
}

p {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 15px;
  line-height: 26px;
  font-family: var(--oit-ff-p);
  color: var(--oit-text-body);
}

a,
button,
p,
input,
select,
textarea,
li,
.transition-3 {
  transition: 0.3s;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
textarea {
  outline: none;
  height: 56px;
  width: 100%;
  line-height: 56px;
  font-size: 14px;
  padding-left: 26px;
  padding-right: 26px;
  color: var(--oit-clr-white);
  border: 1px solid var(--oit-clr-white);
  background-color: var(--oit-clr-white);
}
input[type=text]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--oit-clr-white);
}
input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder { /* Firefox 19+ */
  color: var(--oit-clr-white);
}
input[type=text]:-moz-placeholder,
input[type=email]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=url]:-moz-placeholder,
textarea:-moz-placeholder { /* Firefox 4-18 */
  color: var(--oit-clr-white);
}
input[type=text]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder { /* IE 10+  Edge*/
  color: var(--oit-clr-white);
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=url]::placeholder,
textarea::placeholder { /* MODERN BROWSER */
  color: var(--oit-clr-white);
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=url]:focus,
textarea:focus {
  border-color: var(--oit-clr-white);
}
input[type=text]:focus::placeholder,
input[type=email]:focus::placeholder,
input[type=tel]:focus::placeholder,
input[type=number]:focus::placeholder,
input[type=password]:focus::placeholder,
input[type=url]:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0;
}

textarea {
  line-height: 1.4;
  padding-top: 17px;
  padding-bottom: 17px;
}

input[type=color] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  padding: 0;
  border-radius: 50%;
}

*::-moz-selection {
  background: var(--oit-clr-black);
  color: var(--oit-clr-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--oit-clr-black);
  color: var(--oit-clr-white);
  text-shadow: none;
}

::selection {
  background: var(--oit-clr-black);
  color: var(--oit-clr-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--oit-clr-black);
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: var(--oit-clr-black);
  font-size: 14px;
  opacity: 1;
}

/*---------------------------------
    1.2 Common Classes
---------------------------------*/
.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.z-index-1 {
  position: relative;
  z-index: 1;
}

.z-index-2 {
  position: relative;
  z-index: 2;
}

.z-index-3 {
  position: relative;
  z-index: 3;
}

.z-index-4 {
  position: relative;
  z-index: 4;
}

.z-index-5 {
  position: relative;
  z-index: 5;
}

.z-index-6 {
  position: relative;
  z-index: 6;
}

.z-index-7 {
  position: relative;
  z-index: 7;
}

.z-index-8 {
  position: relative;
  z-index: 8;
}

.z-index-9 {
  position: relative;
  z-index: 9;
}

.z-index-10 {
  position: relative;
  z-index: 10;
}

.gx-2 {
  --bs-gutter-x: 2px;
}

.gx-10 {
  --bs-gutter-x: 10px;
}

.gx-20 {
  --bs-gutter-x: 20px;
}

.gx-30 {
  --bs-gutter-x: 30px;
}

.gx-40 {
  --bs-gutter-x: 40px;
}

.gx-45 {
  --bs-gutter-x: 45px;
}

.gx-50 {
  --bs-gutter-x: 50px;
}

.gx-60 {
  --bs-gutter-x: 60px;
}

.gx-70 {
  --bs-gutter-x: 70px;
}

.gx-80 {
  --bs-gutter-x: 80px;
}

.gx-90 {
  --bs-gutter-x: 90px;
}

.gx-100 {
  --bs-gutter-x: 100px;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.include-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.oit-text-white {
  color: var(--oit-clr-white);
}

.oit-text-black {
  color: var(--oit-clr-black);
}

/* dropcap */
.oit-dropcap::first-letter {
  margin-left: 280px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-dropcap::first-letter {
    margin-left: 0;
  }
}

.border-radius-10 {
  border-radius: 10px;
}

.oit-img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 3;
  width: 300px;
  height: 400px;
  overflow: hidden;
  border-radius: 10px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-img-wrap {
    width: 200px;
    height: 250px;
  }
}
.oit-img-wrap .oit-img-inner-wrap {
  display: flex;
  flex-direction: column;
}
.oit-img-wrap img {
  width: 300px;
  height: 400px;
  object-fit: cover;
  object-position: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-img-wrap img {
    width: 200px;
    height: 250px;
  }
}

.image-gsl {
  position: relative;
  display: inline-block;
}
.image-gsl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: inline-block;
}
.image-gsl-canvas {
  position: absolute;
  inset: 0;
  display: inline-block;
  pointer-events: none;
  object-fit: cover;
}

.border-line {
  display: inline;
  background-repeat: no-repeat;
  background-size: 0% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  transition: background-size 0.3s linear;
  background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor);
}
.border-line:hover {
  background-size: 0% 2px, 100% 2px;
}

.grey-bg {
  background-color: var(--oit-grey-1);
}

.white-bg {
  background-color: var(--oit-clr-white);
}

.black-bg {
  background-color: var(--oit-clr-black);
}

/*----------------------------------------*/
/*  2.3 Buttons
/*----------------------------------------*/
.oit-btn-border {
  font-size: 16px;
  font-weight: 500;
  padding: 8px 22px;
  padding-right: 8px;
  border-radius: 30px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--oit-clr-white);
  border: 1px solid var(--oit-clr-white);
  gap: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-btn-border {
    font-size: 14px;
    padding: 5px 22px;
    padding-right: 8px;
  }
}
.oit-btn-border.btn-blur-bg {
  backdrop-filter: blur(40px);
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.oit-btn-border.btn-black-bg {
  color: var(--oit-clr-white);
  border-color: var(--oit-clr-black);
  background-color: var(--oit-clr-black);
}
.oit-btn-border.btn-black-bg i {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.oit-btn-border.btn-white-bg {
  padding: 10px 26px;
  padding-right: 8px;
  color: var(--oit-clr-black);
  border-color: var(--oit-clr-white);
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-btn-border.btn-white-bg {
    padding: 5px 26px;
    padding-right: 8px;
  }
}
.oit-btn-border.btn-white-bg i {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}
.oit-btn-border.btn-white-bg:hover {
  color: var(--oit-clr-black);
}
.oit-btn-border.btn-large {
  padding: 17px 26px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-btn-border.btn-large {
    padding: 12px 26px;
  }
}
.oit-btn-border.btn-small {
  padding-top: 4px;
  padding-bottom: 4px;
  border: none;
  color: var(--oit-grey-2);
  background-color: var(--oit-grey-1);
}
.oit-btn-border.btn-small:hover {
  background-color: var(--oit-clr-black);
}
.oit-btn-border span {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.oit-btn-border span span.text-1 {
  position: relative;
  display: block;
  transition: 0.3s;
  transform: translateY(-1px);
}
.oit-btn-border span span.text-2 {
  position: absolute;
  top: 100%;
  display: block;
  transition: 0.3s;
  transform: translateY(-1px);
}
.oit-btn-border i {
  height: 38px;
  width: 38px;
  line-height: 38px;
  border-radius: 50%;
  margin-left: 2px;
  text-align: center;
  display: inline-block;
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.oit-btn-border i span {
  position: relative;
  overflow: hidden;
  width: 14px;
  height: 14px;
  display: inline-flex;
}
.oit-btn-border i svg {
  transform: translateY(-2px);
  position: absolute;
  bottom: -1px;
  left: 1px;
  transition: all 0.2s ease-out;
}
.oit-btn-border i svg:last-child {
  left: -12px;
  bottom: -12px;
  transform: translate(0, 0);
  opacity: 0;
}
.oit-btn-border:hover {
  color: var(--oit-clr-white);
}
.oit-btn-border:hover span span.text-1 {
  -webkit-transform: translateY(-150%);
  transform: translateY(-150%);
}
.oit-btn-border:hover span span.text-2 {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.oit-btn-border:hover i svg:first-child {
  transform: translate(16px, -16px);
}
.oit-btn-border:hover i svg:last-child {
  opacity: 1;
  visibility: visible;
  transform: translate(13px, -13px);
}
.oit-btn-line {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: var(--oit-clr-black);
}
.oit-btn-line.fsz-30 {
  font-size: 30px;
}
.oit-btn-line.fsz-30 span {
  padding-bottom: 5px;
}
.oit-btn-line.fsz-30 i {
  width: 24px;
  height: 24px;
  padding-bottom: 5px;
}
.oit-btn-line.fsz-30:hover i svg:first-child {
  transform: translate(24px, -24px);
}
.oit-btn-line i {
  position: relative;
  overflow: hidden;
  width: 14px;
  height: 14px;
  display: inline-flex;
  margin-left: 7px;
}
.oit-btn-line i svg {
  transform: translateY(-2px);
  position: absolute;
  bottom: -1px;
  left: 1px;
  transition: all 0.2s ease-out;
}
.oit-btn-line i svg:last-child {
  left: -12px;
  bottom: -12px;
  transform: translate(0, 0);
  opacity: 0;
}
.oit-btn-line:hover {
  color: var(--oit-clr-black);
}
.oit-btn-line:hover i svg:first-child {
  transform: translate(16px, -16px);
}
.oit-btn-line:hover i svg:last-child {
  opacity: 1;
  visibility: visible;
  transform: translate(13px, -13px);
}
.oit-btn-line:hover span::after {
  transform: translate(1rem);
}
.oit-btn-line:hover span::before {
  transform: translate(calc(100% + 1rem));
}
.oit-btn-line span {
  position: relative;
  overflow: hidden;
}
.oit-btn-line span::before, .oit-btn-line span::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.5s cubic-bezier(0.59, 0.23, 0.22, 0.96);
}
.oit-btn-line span::before {
  left: 0;
}
.oit-btn-line span::after {
  left: -1rem;
  transform: translate(-100%);
}

/*----------------------------------------*/
/*  2.4 Animations
/*----------------------------------------*/
@keyframes animate-pulse-white {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  40% {
    box-shadow: 0 0 0 50px rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  80% {
    box-shadow: 0 0 0 50px rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 255, 255, 0);
  }
}
.pulse-white {
  animation: animate-pulse-white 3s linear infinite;
}

/*----------------------------------------*/
/*  2.5 Preloader
/*----------------------------------------*/
/* ===== Preloader Wrapper ===== */
#preloader {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(40px);
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.is-loading {
  opacity: 1;
  visibility: visible;
}

#preloader.is-loaded {
  pointer-events: none;
}

/* ===== Loader Animation ===== */
.preloader {
  width: 100px;
  height: 100px;
  position: relative;
}

.preloader span {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: #fff;
  animation: preloader 1.3s linear infinite;
}

.preloader span:last-child {
  animation-delay: -0.9s;
}

/* ===== Keyframes ===== */
@keyframes preloader {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
/*--- end of preloader ---*/
.scroll-top {
  width: 40px;
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: -10%;
  right: 50px;
  font-size: 16px;
  z-index: 9;
  text-align: center;
  border-radius: 50%;
  color: var(--oit-common-white);
  cursor: pointer;
  background: var(--oit-theme-1);
  transition: 1s ease;
  border: none;
}

.scroll-top.open {
  bottom: 80px;
}

/*----------------------------------------*/
/*  2.15 Section Title
/*----------------------------------------*/
.oit-section-subtitle {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  display: inline-block;
  text-transform: uppercase;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-section-subtitle-box {
    margin-bottom: 20px;
  }
}
.oit-section-title {
  font-weight: 700;
  font-size: 144px;
  line-height: 1.06;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-section-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-section-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-section-title {
    font-size: 80px;
  }
  .oit-section-title span {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-section-title {
    font-size: 70px;
  }
  .oit-section-title span {
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  .oit-section-title {
    font-size: 40px;
  }
  .oit-section-title br {
    display: none;
  }
  .oit-section-title span {
    padding-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .oit-section-title {
    font-size: 50px;
  }
  .oit-section-title span {
    padding-left: 0;
  }
}
.oit-section-title.fsz-60 {
  font-size: 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-section-title.fsz-60 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-section-title.fsz-60 {
    font-size: 44px;
  }
}
@media (max-width: 767px) {
  .oit-section-title.fsz-60 {
    font-size: 35px;
  }
}
.oit-section-title.fsz-120 {
  font-size: 120px;
  font-weight: 500;
  line-height: 0.9;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-section-title.fsz-120 {
    font-size: 90px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-section-title.fsz-120 {
    font-size: 80px;
  }
}
@media (max-width: 767px) {
  .oit-section-title.fsz-120 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-section-title-box {
    padding-left: 0;
    margin-bottom: 40px;
  }
}

/*----------------------------------------*/
/*  2.10 Offcanvas
/*----------------------------------------*/
.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(24, 24, 24, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: 0.45s ease-in-out;
}
.body-overlay.apply {
  opacity: 1;
  visibility: visible;
}
.body-overlay:hover {
  cursor: url(../img/cross-out.png), pointer;
}

.oit-instagram img {
  width: 100%;
}

.oitoffcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -100%;
  width: 450px;
  z-index: 9999;
  padding: 50px;
  opacity: 0;
  z-index: 1000;
  visibility: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  transition: 0.3s linear;
  overscroll-behavior-y: contain;
  background: var(--oit-clr-white) none repeat scroll 0 0;
}
.oitoffcanvas.opened {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 767px) {
  .oitoffcanvas {
    width: 90%;
    padding: 40px 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .oitoffcanvas {
    width: 75%;
    padding: 40px;
  }
}
.oitoffcanvas.opened {
  right: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.6s;
}
.oitoffcanvas__logo {
  margin-bottom: 60px;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oitoffcanvas__logo {
    padding-top: 0;
  }
}
.oitoffcanvas__logo img {
  width: 100px;
  height: 100%;
}
.oitoffcanvas__close-btn button {
  font-size: 35px;
  position: absolute;
  right: 50px;
  top: 42px;
  transition: 1s;
  font-weight: 300;
  opacity: 0.6;
  color: var(--oit-clr-black);
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oitoffcanvas__close-btn button {
    font-size: 28px;
    right: 48px;
    top: 52px;
  }
}
@media (max-width: 767px) {
  .oitoffcanvas__close-btn button {
    font-size: 28px;
    right: 39px;
    top: 38px;
  }
}
.oitoffcanvas__close-btn button:hover {
  opacity: 1;
  color: var(--oit-clr-black);
}
.oitoffcanvas__content {
  margin-bottom: 30px;
}
.oitoffcanvas__content p {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 25px;
}
.oitoffcanvas__content span {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
  display: inline-block;
}
.oitoffcanvas__content a {
  font-size: 30px;
  line-height: 51px;
  font-weight: 700;
  color: var(--oit-clr-white);
  display: inline-block;
}
@media (max-width: 767px) {
  .oitoffcanvas__content a {
    font-size: 27px;
  }
}
.oitoffcanvas__social {
  margin-top: 50px;
}
.oitoffcanvas__social .social-icon a {
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  background-color: var(--oit-theme-1);
  color: var(--oit-clr-white);
  margin-right: 15px;
  transition: 0.3s;
  display: inline-block;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .oitoffcanvas__social .social-icon a {
    margin-right: 3px;
  }
}
.oitoffcanvas__social .social-icon a:hover {
  background-color: var(--oit-theme-1);
  color: var(--oit-clr-white);
}
.oitoffcanvas__text {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oitoffcanvas__text {
    display: none;
  }
}
.oitoffcanvas__text p {
  font-size: 16px;
  color: #414144;
}
.oitoffcanvas__info {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 30px;
  margin-bottom: 20px;
}
.oitoffcanvas__info .offcanva-title {
  color: var(--oit-clr-black);
  margin: 30px 0 40px 0;
  font-size: 20px;
  font-weight: 600;
}
.oitoffcanvas__info-icon a {
  height: 50px;
  width: 50px;
  background-color: var(--oit-theme-1);
  color: var(--oit-clr-white);
  display: inline-block;
  text-align: center;
  line-height: 50px;
  border-radius: 50px;
  font-weight: 400;
  font-size: 21px;
  margin-right: 20px;
}
.oitoffcanvas__info-address span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}
.oitoffcanvas__info-address a {
  display: block;
  color: var(--oit-clr-black);
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .oitoffcanvas__info-address a {
    font-size: 16px;
  }
}
.oitoffcanvas__info-address a:hover {
  color: var(--oit-theme-1);
}
.oitoffcanvas .oit-homemenu-wrapper {
  padding: 0;
}
.oitoffcanvas .home-img-thumb {
  padding: 0px;
  height: 135px;
}
.oitoffcanvas .oit-menu-mobile .home-img-title, .oitoffcanvas .oit-category-mobile-menu .home-img-title {
  font-weight: 400;
}
.oitoffcanvas .oit-megamenu-thumb {
  display: none;
}
.oitoffcanvas .oit-megamenu-text {
  display: none;
}
.oitoffcanvas .oit-megamenu-list li a::before {
  display: none;
}
.oitoffcanvas .oit-megamenu-list li:hover > a {
  padding-left: 0px;
  font-weight: 400;
}
.oitoffcanvas .oit-megamenu-list li:not(:last-child) {
  margin-bottom: 0;
}
.oitoffcanvas .oit-menu-mobile ul li > a, .oitoffcanvas .oit-category-mobile-menu ul li > a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.oitoffcanvas .oit-megamenu-title {
  font-size: 16px;
  margin-bottom: 15px;
  padding-bottom: 14px;
  margin-right: 65px;
  margin-top: 30px;
  font-weight: 500;
  color: var(--oit-clr-black);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.oitoffcanvas .home-img:hover .home-img-title a {
  color: var(--oit-clr-white);
}
.oitoffcanvas .home-img:hover .home-img-title {
  background-size: 0% 1px, 100% 1px;
}

/* HEADER CSS */
/*----------------------------------------*/
/*  3.1 Header Style 1
/*----------------------------------------*/
.oit-header-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-header-logo {
    padding: 15px 0;
  }
}
.oit-header-bar {
  height: 56px;
  width: 56px;
  line-height: 56px;
  border-radius: 50%;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-header-bar {
    height: 50px;
    width: 50px;
  }
}
.oit-header-bar span {
  height: 2px;
  width: 28px;
  display: block;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: var(--oit-clr-black);
}
.oit-header-bar span:first-child {
  transform-origin: right center;
  transform: scaleX(0.5);
}
.oit-header-bar span:last-child {
  transform-origin: left center;
  transform: scaleX(0.5);
}
.oit-header-bar:hover span:first-child {
  transform: scaleX(1);
}
.oit-header-bar:hover span:last-child {
  transform: scaleX(1);
}
.oit-header-menu nav > ul > li {
  display: inline-block;
  margin: 0 20px;
}
.oit-header-menu nav > ul > li > a {
  padding: 35px 0;
  font-weight: 600;
  font-size: 16px;
  display: inline-block;
  color: var(--oit-clr-black);
}
.oit-header-menu-2 > nav > ul > li {
  margin: 0 30px;
}
.oit-header-menu-2 > nav > ul > li > a {
  text-transform: uppercase;
  color: var(--oit-clr-white);
}
.oit-header-bdr {
  border-bottom: 1px dashed var(--oit-clr-black);
}

/*----------------------------------------*/
/*  4.1 Main menu css
/*----------------------------------------*/
.oit-header-menu nav ul li {
  position: relative;
}
.oit-header-menu nav ul li .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 230px;
  text-align: left;
  padding: 30px 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  border-radius: 5px;
  transition-duration: 0.1s;
  transform-origin: top;
  -webkit-transform: perspective(300px) rotateX(-18deg);
  -moz-transform: perspective(300px) rotateX(-18deg);
  -ms-transform: perspective(300px) rotateX(-18deg);
  -o-transform: perspective(300px) rotateX(-18deg);
  transform: perspective(300px) rotateX(-18deg);
  background-color: var(--oit-clr-white);
  border: 1px solid rgba(48, 48, 47, 0.1);
  box-shadow: 0px 1px 2px 1px rgba(3, 11, 30, 0.06), 0px 1px 1px 0px rgba(3, 11, 30, 0.1);
  z-index: 9999;
}
.oit-header-menu nav ul li .submenu.index-submenu {
  width: 270px;
}
.oit-header-menu nav ul li .submenu li {
  list-style: none;
  display: block;
  padding: 0 30px;
}
.oit-header-menu nav ul li .submenu li:not(:last-child) {
  margin-bottom: 5px;
}
.oit-header-menu nav ul li .submenu li a {
  font-weight: 600;
  font-size: 14px;
  position: relative;
  display: inline-block;
  letter-spacing: 0.2px;
  text-transform: capitalize;
  color: var(--oit-clr-black);
}
.oit-header-menu nav ul li .submenu li a::before {
  position: absolute;
  top: 13px;
  left: 0;
  content: "";
  height: 2px;
  width: 0px;
  opacity: 0;
  visibility: hidden;
  display: inline-block;
  transition: all 0.3s ease-out 0s;
  background-color: var(--oit-clr-black);
}
.oit-header-menu nav ul li .submenu li:hover > a {
  padding-left: 20px;
  color: var(--oit-clr-black);
}
.oit-header-menu nav ul li .submenu li:hover > a::before {
  width: 15px;
  visibility: visible;
  opacity: 1;
}
.oit-header-menu nav ul li .submenu .submenu {
  left: 100%;
  top: 0;
}
.oit-header-menu nav ul li:hover.has-dropdown a::after {
  color: var(--oit-clr-black);
  transform: rotate(-180deg);
}
.oit-header-menu nav ul li:hover > .submenu {
  visibility: visible;
  opacity: 1;
  transition-duration: 0.2s;
  transform: perspective(300px) rotateX(0deg);
}

.oit-menu-mobile .oit-menu-content,
.oit-category-mobile-menu .oit-menu-content {
  margin-bottom: 70px;
}
.oit-menu-mobile ul,
.oit-category-mobile-menu ul {
  position: static;
  display: block;
  box-shadow: none;
}
.oit-menu-mobile ul li,
.oit-category-mobile-menu ul li {
  list-style: none;
  position: relative;
  width: 100%;
  padding: 0;
}
.oit-menu-mobile ul li:not(:last-child) > a,
.oit-category-mobile-menu ul li:not(:last-child) > a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn,
.oit-category-mobile-menu ul li.has-dropdown > a .dropdown-toggle-btn {
  position: absolute;
  right: 0;
  top: 25%;
  transform: translateY(-2px);
  font-size: 18px;
  color: var(--oit-clr-black);
  font-family: "Font Awesome 5 Pro";
  transition: all 0.3s ease-in-out;
  z-index: 1;
  width: 25px;
  height: 25px;
  line-height: 21px;
  text-align: center;
  border: 1px solid rgba(176, 162, 162, 0.35);
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn i,
.oit-category-mobile-menu ul li.has-dropdown > a .dropdown-toggle-btn i {
  transition: all 0.3s ease-in-out;
  margin-left: 2px;
}
.oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn.dropdown-opened i,
.oit-category-mobile-menu ul li.has-dropdown > a .dropdown-toggle-btn.dropdown-opened i {
  transform: rotate(90deg);
}
.oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover,
.oit-category-mobile-menu ul li.has-dropdown > a .dropdown-toggle-btn:hover {
  background-color: var(--oit-theme-1);
  border-color: var(--oit-theme-1);
  color: var(--oit-clr-white);
}
.oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover i,
.oit-category-mobile-menu ul li.has-dropdown > a .dropdown-toggle-btn:hover i {
  color: var(--oit-clr-white);
}
.oit-menu-mobile ul li.has-dropdown > a.expanded,
.oit-category-mobile-menu ul li.has-dropdown > a.expanded {
  color: var(--oit-theme-1);
}
.oit-menu-mobile ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened,
.oit-category-mobile-menu ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened {
  background-color: var(--oit-theme-1);
  border-color: var(--oit-theme-1);
  color: var(--oit-clr-white);
}
.oit-menu-mobile ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened i,
.oit-category-mobile-menu ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened i {
  color: var(--oit-clr-white);
}
.oit-menu-mobile ul li.has-dropdown:hover > a::after,
.oit-category-mobile-menu ul li.has-dropdown:hover > a::after {
  color: var(--oit-theme-1);
}
.oit-menu-mobile ul li:last-child a span,
.oit-category-mobile-menu ul li:last-child a span {
  border-bottom: 0;
}
.oit-menu-mobile ul li > a,
.oit-category-mobile-menu ul li > a {
  display: block;
  font-size: 16px;
  position: relative;
  padding: 10px 0;
  font-weight: 500;
  padding-right: 20px;
  text-transform: capitalize;
  color: var(--oit-clr-black);
}
.oit-menu-mobile ul li > a:hover,
.oit-category-mobile-menu ul li > a:hover {
  color: var(--oit-theme-1);
}
.oit-menu-mobile ul li > a svg,
.oit-category-mobile-menu ul li > a svg {
  transform: translateY(-2px);
}
.oit-menu-mobile ul li > a > i,
.oit-category-mobile-menu ul li > a > i {
  display: inline-block;
  width: 11%;
  margin-right: 13px;
  transform: translateY(4px);
  font-size: 21px;
  line-height: 1;
}
.oit-menu-mobile ul li > a .menu-text,
.oit-category-mobile-menu ul li > a .menu-text {
  font-size: 16px;
  line-height: 11px;
  border-bottom: 1px solid #EAEBED;
  width: 82%;
  display: inline-block;
  padding: 19px 0 17px;
}
.oit-menu-mobile ul li img,
.oit-category-mobile-menu ul li img {
  width: 100%;
  height: 100%;
}
.oit-menu-mobile ul li ul,
.oit-category-mobile-menu ul li ul {
  padding: 0;
}
.oit-menu-mobile ul li ul li,
.oit-category-mobile-menu ul li ul li {
  padding: 0;
}
.oit-menu-mobile ul li ul li a,
.oit-category-mobile-menu ul li ul li a {
  margin-left: auto;
  width: 93%;
  padding: 10px 5%;
  text-shadow: none !important;
  visibility: visible;
  padding-left: 0;
  padding-right: 20px;
}
.oit-menu-mobile ul li ul li li a,
.oit-category-mobile-menu ul li ul li li a {
  width: 88%;
  padding: 10px 7%;
  padding-left: 0;
  padding-right: 20px;
}
.oit-menu-mobile ul li ul li li li a,
.oit-category-mobile-menu ul li ul li li li a {
  width: 83%;
  padding: 10px 9%;
  padding-left: 0;
  padding-right: 20px;
}
.oit-menu-mobile ul li ul li li li li a,
.oit-category-mobile-menu ul li ul li li li li a {
  width: 68%;
  padding: 10px 11%;
  padding-left: 0;
  padding-right: 20px;
}
.oit-menu-mobile ul li:hover > a::after,
.oit-category-mobile-menu ul li:hover > a::after {
  color: var(--oit-theme-1);
}
.oit-menu-mobile ul li:hover > a .dropdown-toggle-btn i,
.oit-category-mobile-menu ul li:hover > a .dropdown-toggle-btn i {
  color: var(--oit-theme-1);
}
.oit-menu-mobile ul li:hover .mega-menu,
.oit-category-mobile-menu ul li:hover .mega-menu {
  visibility: visible;
  opacity: 1;
  top: 0;
}
.oit-menu-mobile ul li .mega-menu, .oit-menu-mobile ul li .submenu,
.oit-category-mobile-menu ul li .mega-menu,
.oit-category-mobile-menu ul li .submenu {
  position: static;
  min-width: 100%;
  padding: 0;
  box-shadow: none;
  visibility: visible;
  opacity: 1;
  display: none;
}
.oit-menu-mobile ul li .mega-menu li, .oit-menu-mobile ul li .submenu li,
.oit-category-mobile-menu ul li .mega-menu li,
.oit-category-mobile-menu ul li .submenu li {
  float: none;
  display: block;
  width: 100%;
  padding: 0;
}
.oit-menu-mobile ul li .mega-menu li:hover a .dropdown-toggle-btn, .oit-menu-mobile ul li .submenu li:hover a .dropdown-toggle-btn,
.oit-category-mobile-menu ul li .mega-menu li:hover a .dropdown-toggle-btn,
.oit-category-mobile-menu ul li .submenu li:hover a .dropdown-toggle-btn {
  color: var(--oit-theme-1);
}
.oit-menu-mobile .oit-menu-content ul li:not(:last-child) .home-img-title a,
.oit-category-mobile-menu .oit-menu-content ul li:not(:last-child) .home-img-title a {
  border-bottom: none;
}
.oit-menu-mobile * ul, .oit-menu-mobile * li,
.oit-category-mobile-menu * ul,
.oit-category-mobile-menu * li {
  transition: none !important;
}

/*----------------------------------------*/
/*  5.1 Postbox css
/*----------------------------------------*/
.postbox-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.22;
  margin-bottom: 25px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .postbox-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox-title {
    font-size: 35px;
  }
}
@media (max-width: 767px) {
  .postbox-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox-title {
    font-size: 28px;
  }
}
.postbox-left {
  margin-right: 80px;
  padding: 40px 50px;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox-left {
    margin-right: 0;
    padding: 30px 40px;
  }
}
@media (max-width: 767px) {
  .postbox-left {
    margin-right: 0;
    padding: 30px 20px;
  }
}
.postbox-left.left-style {
  margin-right: 0;
  margin-left: 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox-left.left-style {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .postbox-left.left-style {
    margin-left: 0;
  }
}
.postbox-content .postbox-form-input-box input {
  background-color: var(--oit-clr-white);
}
.postbox-content .postbox-form-textarea-box textarea {
  background-color: var(--oit-clr-white);
}
.postbox-content .postbox-banner-wrap .postbox-dsc {
  padding-left: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox-content .postbox-banner-wrap .postbox-dsc {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-content .postbox-banner-wrap .postbox-dsc {
    padding-left: 0;
  }
}
.postbox-content .postbox-dsc p {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox-content .postbox-dsc p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .postbox-content .postbox-dsc p {
    font-size: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox-content .postbox-dsc p {
    font-size: 16px;
  }
}
.postbox-dsc p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.67;
  letter-spacing: -0.04em;
  color: var(--oit-grey-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox-dsc p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .postbox-dsc p {
    font-size: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox-dsc p {
    font-size: 16px;
  }
}
.postbox-banner img {
  max-width: inherit;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.postbox-banner-wrap .postbox-banner {
  height: 100%;
}
@media (max-width: 767px) {
  .postbox-banner-wrap .postbox-banner {
    height: auto;
    margin-bottom: 30px;
  }
}
.postbox-banner-wrap .postbox-dsc {
  padding-left: 80px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .postbox-banner-wrap .postbox-dsc {
    padding-left: 95px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-banner-wrap .postbox-dsc {
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-tag {
    margin-bottom: 20px;
  }
}
.postbox-tag-title {
  margin: 0;
  margin-right: 18px;
  font-weight: 600;
  font-size: 20px;
  color: var(--oit-clr-black);
}
@media (max-width: 767px) {
  .postbox-tag-title {
    font-size: 16px;
  }
}
.postbox-tag-content a {
  padding: 0 22px;
  height: 32px;
  line-height: 29px;
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  transition: 0.3s;
  font-weight: 500;
  font-size: 16px;
  border-radius: 1000px;
  letter-spacing: -0.02em;
  border: 1px solid rgba(93, 93, 93, 0.3);
  color: var(--oit-clr-black);
}
@media (max-width: 767px) {
  .postbox-tag-content a {
    padding: 0 15px;
    height: 25px;
    line-height: 22px;
    font-size: 14px;
    margin-bottom: 5px;
  }
}
.postbox-tag-content a:not(:last-child) {
  margin-right: 7px;
}
.postbox-tag-content a:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-theme-1);
}
.postbox-share-content a {
  font-size: 16px;
  display: inline-block;
  transition: 0.3s;
  height: 50px;
  width: 50px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  color: var(--oit-clr-black);
  border: 1px solid rgba(13, 13, 13, 0.2);
  background-color: rgba(13, 13, 13, 0.08);
}
@media (max-width: 767px) {
  .postbox-share-content a {
    height: 35px;
    width: 35px;
    line-height: 28px;
  }
}
@media (max-width: 767px) {
  .postbox-share-content a svg {
    width: 12px;
  }
}
.postbox-share-content a:not(:last-child) {
  margin-right: 8px;
}
.postbox-share-content a:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-theme-1);
}
.postbox-user-thumb {
  flex: 0 0 auto;
}
.postbox-user-thumb img {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  margin-right: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-user-thumb img {
    height: 110px;
    width: 110px;
  }
}
@media (max-width: 767px) {
  .postbox-user-thumb img {
    margin-bottom: 30px;
  }
}
.postbox-user-info p {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
  color: var(--oit-grey-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-user-info p {
    font-size: 16px;
  }
}
.postbox-user-info .user-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.33;
  margin-bottom: 12px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-user-info .user-title {
    font-size: 20px;
  }
}
.postbox-comment ul li {
  border-radius: 20px;
  padding: 50px;
  list-style-type: none;
  backdrop-filter: blur(40px);
  background: linear-gradient(209deg, rgba(13, 13, 13, 0.1) 0%, rgba(13, 13, 13, 0.2) 100%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-comment ul li {
    padding: 40px;
  }
}
.postbox-form-input-box input {
  height: 70px;
  font-size: 16px;
  font-weight: 500;
  line-height: 70px;
  border-radius: 10px;
  letter-spacing: -0.02em;
  color: var(--oit-clr-black);
  background-color: transparent;
  border: 1px solid rgba(73, 73, 73, 0.2);
}
@media (max-width: 767px) {
  .postbox-form-input-box input {
    height: 50px;
    line-height: 50px;
  }
}
.postbox-form-input-box input::placeholder {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--oit-grey-2);
}
@media (max-width: 767px) {
  .postbox-form-input-box input::placeholder {
    font-size: 14px;
  }
}
.postbox-form-input-box input:focus {
  border: 1px solid rgb(73, 73, 73);
}
.postbox-form-textarea-box textarea {
  height: 260px;
  resize: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 50px;
  border-radius: 10px;
  letter-spacing: -0.02em;
  color: var(--oit-clr-black);
  background-color: transparent;
  border: 1px solid rgba(73, 73, 73, 0.2);
}
@media (max-width: 767px) {
  .postbox-form-textarea-box textarea {
    height: 150px;
    line-height: 35px;
    font-size: 14px;
  }
}
.postbox-form-textarea-box textarea::placeholder {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--oit-grey-2);
}
@media (max-width: 767px) {
  .postbox-form-textarea-box textarea::placeholder {
    font-size: 14px;
  }
}
.postbox-form-textarea-box textarea:focus {
  border: 1px solid rgb(73, 73, 73);
}
.postbox-sidebar.right-sidebar {
  margin-left: -23px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox-sidebar.right-sidebar {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-sidebar.right-sidebar {
    margin-left: 0;
    margin-top: 70px;
  }
}
.postbox-sidebar.left-style {
  margin-left: 0;
  margin-right: -23px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox-sidebar.left-style {
    margin-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-sidebar.left-style {
    margin-right: 0;
    margin-bottom: 50px;
  }
}
.postbox-area.blog-standard-style .postbox-left {
  padding: 40px;
}
.postbox-area.blog-standard-style .postbox-content {
  padding: 0 40px 30px 40px;
}
.postbox-area.blog-standard-style .postbox-title {
  margin-bottom: 0;
}
.postbox-area.blog-standard-style .blog-details-breadcrumb-badges .badge {
  background-color: var(--oit-clr-white);
}
.postbox-area.blog-standard-style .blog-details-breadcrumb-badges .badge:first-child {
  margin-left: 0;
}
.postbox-video-btn {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  display: inline-block;
  height: 120px;
  width: 120px;
  line-height: 120px;
  text-align: center;
  border-radius: 50%;
  font-size: 26px;
  background-color: var(--oit-clr-white);
}
.postbox-video-btn svg {
  color: var(--oit-clr-black);
}
.postbox-slider-arrow-wrap .postbox-arrow-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  z-index: 9;
}
.postbox-slider-arrow-wrap .postbox-arrow-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  z-index: 9;
}
.postbox-slider-arrow-wrap button {
  padding: 0;
  height: 60px;
  width: 60px;
  line-height: 63px;
  text-align: center;
  font-size: 18px;
  border-radius: 50%;
  transition: 0.3s;
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .postbox-slider-arrow-wrap button {
    font-size: 14px;
    height: 40px;
    width: 40px;
    line-height: 40px;
  }
}
.postbox-slider-arrow-wrap button:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-theme-1);
}

.oit-pagination ul li {
  display: inline-block;
  list-style-type: none;
  margin: 0 4px;
}
.oit-pagination ul li a {
  width: 60px;
  height: 60px;
  line-height: 61px;
  font-weight: 400;
  font-size: 18px;
  transition: 0.3s;
  display: inline-block;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(121, 121, 121, 0.2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-pagination ul li a {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }
}
@media (max-width: 767px) {
  .oit-pagination ul li a {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}
.oit-pagination ul li a i {
  font-size: 20px;
}
.oit-pagination ul li.current a {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
  border: 1px solid var(--oit-clr-black);
}
.oit-pagination ul li:hover a {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
  border: 1px solid var(--oit-clr-black);
}

/*----------------------------------------*/
/*  5.3 Sidebar css
/*----------------------------------------*/
.sidebar-search-box input {
  width: 100%;
  height: 45px;
  line-height: 45px;
  padding-left: 25px;
  padding-right: 60px;
  text-transform: capitalize;
  color: var(--oit-clr-black);
  background: rgba(73, 73, 73, 0.1);
  border: 1px solid transparent;
}
.sidebar-search-box input::placeholder {
  font-weight: 400;
  font-size: 16px;
  color: var(--oit-grey-2);
}
.sidebar-search-box input:focus {
  border: 1px solid var(--oit-clr-black);
}
.sidebar-search-button button {
  position: absolute;
  top: 50%;
  right: 0;
  height: 100%;
  padding: 0 20px;
  transform: translateY(-50%);
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}
.sidebar-widget {
  padding: 20px 30px 30px 30px;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .sidebar-widget {
    padding: 45px 25px;
  }
}
.sidebar-widget-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.33;
  padding-bottom: 7px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(73, 73, 73, 0.3);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar-widget-title {
    font-size: 24px;
  }
}
.sidebar-widget-list-wrap a {
  display: block;
}
.sidebar-widget-list-wrap a:not(:last-child) {
  margin-bottom: 15px;
}
.sidebar-widget-list {
  width: 100%;
  display: flex;
  font-weight: 500;
  font-size: 18px;
  transition: 0.3s;
  text-transform: capitalize;
  justify-content: space-between;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar-widget-list {
    font-size: 16px;
  }
}
.sidebar-widget-list span {
  transition: 0.3s;
}
.sidebar-widget-list.active {
  color: var(--oit-clr-black);
}
.sidebar-widget-list.active span {
  color: var(--oit-clr-black);
}
.sidebar-widget-list:hover {
  color: var(--oit-clr-black);
}
.sidebar-widget-list:hover span {
  color: var(--oit-clr-black);
}
.sidebar-widget-post ul li {
  list-style-type: none;
}
.sidebar-widget-post ul li:not(:last-child) {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(121, 121, 121, 0.2);
}
.sidebar-widget-post .rc-post-thumb {
  margin-bottom: 15px;
}
.sidebar-widget-post .rc-post-thumb img {
  height: 160px;
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.sidebar-widget-post .rc-post-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sidebar-widget-post .rc-post-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar-widget-post .rc-post-title {
    font-size: 16px;
  }
}
.sidebar-widget-post .rc-post-title a {
  transition: 0.3s;
}
.sidebar-widget-post .rc-post-title a:hover {
  color: var(--it-theme-1);
}
.sidebar-widget-post .rc-meta span {
  display: flex;
  align-items: center;
}
.sidebar-widget-post .rc-meta span i, .sidebar-widget-post .rc-meta span svg {
  margin-right: 7px;
}

/*----------------------------------------*/
/*  5.4 Blog css
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-blog-area {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
.oit-blog-content span {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  margin-bottom: 15px;
  display: inline-block;
  letter-spacing: -0.02em;
}
.oit-blog-content span svg {
  margin-right: 8px;
  display: inline-block;
  transform: translateY(-2px);
}
.oit-blog-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-blog-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-blog-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-blog-title {
    font-size: 25px;
  }
}
.oit-blog-thumb {
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 30px;
}
.oit-blog-thumb img {
  width: 100%;
  transition: 0.9s;
}
.oit-blog-item:hover .oit-blog-thumb img {
  transform: scale(1.1);
}

/*----------------------------------------*/
/*  5.4 Blog details css
/*----------------------------------------*/
.blog-details-breadcrumb-area {
  padding-top: 245px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-details-breadcrumb-area {
    padding-top: 200px;
  }
}
@media (max-width: 767px) {
  .blog-details-breadcrumb-area {
    padding-top: 150px;
  }
}
.blog-details-breadcrumb-area.breadcrumb-style-2 {
  padding-top: 195px;
}
@media (max-width: 767px) {
  .blog-details-breadcrumb-area.breadcrumb-style-2 {
    padding-top: 150px;
  }
}
.blog-details-breadcrumb-area.breadcrumb-style-2 .shape {
  position: absolute;
  top: 15%;
  right: 8%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-details-breadcrumb-area.breadcrumb-style-2 .shape {
    transform: scale(0.7);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-breadcrumb-area.breadcrumb-style-2 .shape {
    display: none;
  }
}
.blog-details-breadcrumb-area.breadcrumb-style-2 .shape-2 {
  position: absolute;
  right: 8%;
  top: 40%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-breadcrumb-area.breadcrumb-style-2 .shape-2 {
    display: none;
  }
}
.blog-details-breadcrumb-area.career-style .shape {
  top: 40%;
}
.blog-details-breadcrumb-badges .badge {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 100px;
  margin: 0 10px;
  color: var(--oit-grey-2);
  background-color: var(--oit-grey-1);
  border: 1px solid rgba(13, 13, 13, 0.05);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-breadcrumb-badges .badge {
    margin-bottom: 10px;
  }
}
.blog-details-breadcrumb-badges .badge svg {
  display: inline-block;
  margin-right: 6px;
}
.blog-details-breadcrumb-badges.badges-style-2 {
  padding-bottom: 100px;
  margin-bottom: 55px;
  border-bottom: 1px solid #d9d9d9;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-breadcrumb-badges.badges-style-2 {
    padding-bottom: 30px;
    margin-bottom: 40px;
  }
}
.blog-details-breadcrumb-badges.badges-style-2 > div {
  padding: 6px 20px;
  border-radius: 100px;
  display: inline-block;
  background-color: var(--oit-grey-1);
  border: 1px solid rgba(13, 13, 13, 0.05);
}
.blog-details-breadcrumb-badges.badges-style-2 > div > .badge {
  border: none;
  padding: 0;
  background-color: transparent;
}
.blog-details-breadcrumb-title {
  font-weight: 500;
  font-size: 80px;
  line-height: 1.13;
  margin-bottom: 35px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .blog-details-breadcrumb-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-details-breadcrumb-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-breadcrumb-title {
    font-size: 56px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-details-breadcrumb-title {
    font-size: 45px;
  }
}
@media (max-width: 767px) {
  .blog-details-breadcrumb-title {
    font-size: 35px;
  }
  .blog-details-breadcrumb-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-details-breadcrumb-title {
    font-size: 58px;
  }
}
.blog-details-breadcrumb-author-wrap {
  margin-bottom: 140px;
  border-radius: 1000px;
  padding: 20px 30px 20px 20px;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-breadcrumb-author-wrap {
    margin-bottom: 100px;
  }
}
.blog-details-breadcrumb-author-wrap img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
  border-radius: 1000px;
}
.blog-details-breadcrumb-author-wrap.author-style-2 {
  padding: 0;
  margin-bottom: 0;
  border-radius: 0;
  background-color: transparent;
}
.blog-details-breadcrumb-author-wrap.author-style-2 img {
  border-radius: 10px;
}
.blog-details-breadcrumb-author-info .title-sm {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 0;
}
.blog-details-breadcrumb-author-info span {
  font-size: 14px;
}
.blog-details-breadcrumb-big-title {
  font-weight: 600;
  font-size: 144px;
  line-height: 1.07;
  margin-bottom: 80px;
}
.blog-details-breadcrumb-big-title.title-mb {
  margin-bottom: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-details-breadcrumb-big-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-breadcrumb-big-title {
    font-size: 85px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-details-breadcrumb-big-title {
    font-size: 65px;
  }
}
@media (max-width: 767px) {
  .blog-details-breadcrumb-big-title {
    font-size: 31px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-details-breadcrumb-big-title {
    font-size: 50px;
  }
}
.blog-details-date-box span {
  font-size: 30px;
  font-weight: 500;
  display: inline-block;
  margin-right: 5px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-date-box span {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-date-box span {
    font-size: 15px;
  }
}
.blog-details-date-box strong {
  font-weight: 500;
  font-size: 30px;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-date-box strong {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-date-box strong {
    font-size: 15px;
  }
}

/*----------------------------------------*/
/*  6.1 Footer Style 1
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-footer-area {
    padding-top: 70px;
    padding-bottom: 0px;
  }
}
.oit-footer-widget {
  padding: 50px;
  min-height: 560px;
  border-radius: 30px;
  background-color: #101216;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-footer-widget {
    padding: 30px;
  }
}
.oit-footer-widget-menu ul li {
  list-style-type: none;
}
.oit-footer-widget-menu ul li:not(:last-child) {
  margin-bottom: 22px;
}
.oit-footer-widget-menu ul li a {
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--oit-clr-white);
  font-family: var(--oit-ff-funnel);
}
.oit-footer-widget-menu ul li a svg {
  margin-right: 5px;
  display: inline-block;
  transform: translateY(-3px);
}
.oit-footer-widget-menu ul li a:hover svg {
  transform: translateY(-3px);
  animation: shape-rotate 5s linear infinite;
}
.oit-footer-widget-rules a {
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  color: var(--oit-clr-white);
}
.oit-footer-widget-info {
  flex: 1;
}
.oit-footer-widget-info a {
  display: block;
  text-align: center;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  padding: 70px 10px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
  font-family: var(--oit-ff-funnel);
  padding: 70px 10px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-footer-widget-info a {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 767px) {
  .oit-footer-widget-info a {
    font-size: 24px;
  }
}
.oit-footer-widget-info a:first-child {
  padding-top: 0;
}
.oit-footer-widget-info a:last-child {
  padding-bottom: 0;
}
.oit-footer-widget-info a:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.oit-footer-widget-social a {
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--oit-clr-white);
  font-family: var(--oit-ff-funnel);
  padding: 25px 0;
}
.oit-footer-widget-social a:first-child {
  padding-top: 0;
}
.oit-footer-widget-social a:last-child {
  padding-bottom: 0;
}
.oit-footer-widget-social a:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.oit-footer-widget-social a:not(:last-child):hover {
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
}
.oit-footer-widget-copyright p {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 0;
  color: var(--oit-clr-white);
}
.oit-footer-2-widget-title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 25px;
  color: var(--oit-clr-white);
}
.oit-footer-2-widget p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-footer-2-widget p br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-footer-2-widget p {
    font-size: 18px;
  }
  .oit-footer-2-widget p br {
    display: none;
  }
}
.oit-footer-2-widget-menu ul li {
  list-style: none;
  display: inline-block;
  margin-bottom: 8px;
}
.oit-footer-2-widget-menu ul li:not(:last-child) {
  margin-right: 5px;
}
.oit-footer-2-widget-menu ul li a {
  padding: 12px 30px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  border-radius: 100px;
  display: inline-block;
  letter-spacing: -0.02em;
  background: #202020;
  color: var(--oit-clr-white);
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-footer-2-widget-menu ul li a {
    padding: 12px 19px;
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-footer-2-widget-menu ul li a {
    padding: 9px 15px;
    font-size: 14px;
  }
}
.oit-footer-2-widget-menu ul li a:hover {
  color: var(--oit-clr-black);
  border-color: var(--oit-clr-white);
  background-color: var(--oit-clr-white);
}
.oit-footer-2-widget-social a {
  height: 50px;
  width: 50px;
  line-height: 44px;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  background: #202020;
  color: var(--oit-clr-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.oit-footer-2-widget-social a:not(:last-child) {
  margin-right: 5px;
}
.oit-footer-2-widget-social a:hover {
  color: var(--oit-clr-black);
  border-color: var(--oit-clr-white);
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-footer-2-area {
    padding-top: 70px;
  }
}
.oit-footer-2-shape {
  position: absolute;
  bottom: 0%;
  left: 28%;
  z-index: -1;
  animation: shape-rotate 40s linear infinite;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-footer-2-shape {
    bottom: 10%;
  }
}

@media (max-width: 767px) {
  .footer-widget-2-1 {
    padding-bottom: 0;
    margin-bottom: 60px;
  }
}
.footer-widget-2-2, .footer-widget-2-4 {
  padding-left: 115px;
}
@media (max-width: 767px) {
  .footer-widget-2-2, .footer-widget-2-4 {
    padding-left: 0;
  }
}

.oit-copyright-2-style {
  padding-top: 20px;
  padding-bottom: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.oit-copyright-2-style .oit-copyright-left p {
  color: var(--oit-clr-white);
}
.oit-copyright-2-style .oit-copyright-right a, .oit-copyright-2-style .oit-copyright-right span {
  color: var(--oit-clr-white);
}

/*----------------------------------------*/
/*                                         \
\   1.5 DESIGN AGENCY CSS START HERE       \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.oit-hero-ptb {
  padding-top: 160px;
  padding-bottom: 50px;
}
.oit-hero-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.oit-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .oit-hero-content {
    margin-bottom: 40px;
  }
}
.oit-hero-content p {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 35px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-hero-content p {
    font-size: 16px;
  }
  .oit-hero-content p br {
    display: none;
  }
}
.oit-hero-category {
  padding: 30px;
  padding-top: 20px;
  min-width: 350px;
  border-radius: 10px;
  display: inline-block;
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
}
.oit-hero-category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
}
.oit-hero-category-item a {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  padding: 20px 0;
  display: block;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.oit-hero-category-item a:hover {
  color: var(--oit-clr-white);
}
.oit-hero-category-item.active a {
  color: var(--oit-clr-white);
}
.oit-hero-bigtext {
  line-height: 0.8;
  font-size: 245px;
  font-weight: 700;
  margin-bottom: 0;
  letter-spacing: -7px;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-hero-bigtext {
    font-size: 220px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-hero-bigtext {
    font-size: 195px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-hero-bigtext {
    font-size: 165px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-hero-bigtext {
    font-size: 135px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-hero-bigtext {
    font-size: 110px;
  }
}
@media (max-width: 767px) {
  .oit-hero-bigtext {
    font-size: 80px;
    letter-spacing: 0.7px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .oit-hero-bigtext {
    font-size: 70px;
    letter-spacing: 0.7px;
  }
}
.oit-hero-shape-1 {
  margin-bottom: 160px;
  display: inline-block;
  color: var(--oit-clr-white);
  animation: shape-rotate 2s linear infinite;
}
@media (max-width: 767px) {
  .oit-hero-shape-1 {
    margin-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .oit-hero-text-wrap {
    margin-top: 40px;
  }
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-about-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-about-area {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-about-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .oit-about-text {
    margin-bottom: 30px;
  }
}
.oit-about-text p {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-funnel);
}
.oit-about-text p span {
  color: rgba(0, 0, 0, 0.4);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-about-text p {
    font-size: 40px;
  }
  .oit-about-text p br {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-about-text p {
    font-size: 35px;
  }
  .oit-about-text p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .oit-about-text p {
    font-size: 30px;
  }
  .oit-about-text p br {
    display: none;
  }
}
.oit-about-thumb {
  flex: 0 0 auto;
  margin-right: 35px;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .oit-about-thumb {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
}
.oit-about-thumb img {
  width: 100%;
  border-radius: 20px;
}
.oit-about-content {
  height: 100%;
  padding-right: 80px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-about-content {
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  .oit-about-content {
    flex-wrap: wrap;
  }
}
.oit-about-content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 130px;
  letter-spacing: -0.04em;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-about-content p br {
    display: none;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-about-content p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-about-content p {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .oit-about-content p {
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .oit-about-content-wrap {
    flex-wrap: wrap;
  }
}
.oit-about-shape {
  position: absolute;
  top: 14%;
  left: 12%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-about-shape {
    top: 1%;
    left: auto;
    right: 5%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-about-btn {
    padding-bottom: 65px;
  }
}
@media (max-width: 767px) {
  .oit-about-btn {
    padding-bottom: 40px;
  }
}

/*----------------------------------------*/
/* project css start here
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-project-area {
    padding-top: 70px;
  }
}
.oit-project-area.dg-project-style .oit-project-content {
  padding-left: 0;
  padding-right: 0;
}
.oit-project-area.dg-project-style span:first-child::after {
  display: none;
}
.oit-project-area.project-style-2 .project-item-1 {
  margin-top: 285px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-project-area.project-style-2 .project-item-1 {
    margin-top: 60px;
  }
}
@media (max-width: 767px) {
  .oit-project-area.project-style-2 .project-item-1 {
    margin-top: 0;
  }
}
.oit-project-area.project-style-2 .project-item-3 {
  margin-top: 55px;
  margin-bottom: 95px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-project-area.project-style-2 .project-item-3 {
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .oit-project-area.project-style-2 .project-item-3 {
    margin-bottom: 40px;
    margin-top: 0px;
  }
}
.oit-project-area.project-style-2 .project-item-5 {
  margin-top: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-project-area.project-style-2 .project-item-5 {
    margin-top: 20px;
  }
}
.oit-project-area.project-style-2 .oit-project-thumb {
  border-radius: 0;
}
.oit-project-area.project-style-2 .oit-project-thumb img {
  border-radius: 0;
}
.oit-project-area.project-style-2 .oit-project-item {
  border-radius: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-project-area.project-style-2 .oit-project-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-project-area.project-style-2 .oit-project-title {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .oit-project-area.project-style-2 .oit-project-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-project-area.project-style-2 .oit-project-category span {
    font-size: 16px;
  }
}
.oit-project-shape {
  position: absolute;
  top: 95px;
  right: 2%;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-project-shape {
    right: -3%;
    transform: scale(0.6);
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-project-shape {
    top: 0;
    right: -4%;
    transform: scale(0.6);
  }
}
.oit-project-thumb {
  width: 100%;
}
.oit-project-thumb img {
  border-radius: 10px;
}
.oit-project-content {
  padding: 30px;
  padding-bottom: 15px;
  padding-top: 25px;
  background-color: var(--oit-grey-1);
}
@media (max-width: 767px) {
  .oit-project-content {
    flex-wrap: wrap;
  }
}
.oit-project-title {
  font-weight: 500;
  font-size: 45px;
  line-height: 1;
  margin-bottom: 0;
  padding-bottom: 15px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-project-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-project-title {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .oit-project-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .oit-project-title {
    font-size: 30px;
  }
}
.oit-project-category {
  padding-bottom: 15px;
}
.oit-project-category span {
  position: relative;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: #494949;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .oit-project-category span {
    font-size: 18px;
  }
}
.oit-project-category span:first-child {
  padding-right: 20px;
  margin-right: 20px;
}
.oit-project-category span:first-child::after {
  position: absolute;
  top: 9px;
  right: -5px;
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #494949;
}
.oit-project-item {
  border-radius: 10px;
  overflow: hidden;
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-service-area {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-service-area .oit-project-shape {
    top: 2%;
    right: 4%;
  }
}
.oit-service-item {
  padding: 50px;
  border-radius: 24px;
  margin: 0 125px;
  margin-bottom: 50px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-service-item {
    margin: 0;
    margin-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .oit-service-item {
    margin: 0;
    padding: 30px;
    margin-bottom: 30px;
  }
}
.oit-service-thumb {
  flex: 0 0 auto;
  overflow: hidden;
  margin-right: 35px;
  border-radius: 14px;
  border: 2px solid var(--oit-clr-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-service-thumb {
    margin-right: 0;
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .oit-service-thumb {
    margin-right: 0;
    margin-bottom: 30px;
    flex: auto;
  }
}
.oit-service-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
  margin-bottom: 40px;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-service-title {
    margin-bottom: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-service-title {
    font-size: 35px;
    margin-bottom: 25px;
  }
}
@media (max-width: 767px) {
  .oit-service-title {
    font-size: 30px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-service-content-wrap {
    flex-wrap: wrap;
  }
}
.oit-service-content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
  letter-spacing: -0.04em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-service-content p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .oit-service-content p {
    font-size: 17px;
  }
  .oit-service-content p br {
    display: none;
  }
}
.oit-service-category {
  margin-bottom: 15px;
}
.oit-service-category span {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  color: #494949;
  letter-spacing: -0.04em;
}
@media (max-width: 767px) {
  .oit-service-category span {
    font-size: 16px;
  }
}
.oit-service-category span svg {
  margin-right: 10px;
  transform: translateY(2px);
}

/*----------------------------------------*/
/* funfact css start here
/*----------------------------------------*/
.oit-funfact-title {
  font-weight: 400;
  font-size: 100px;
  line-height: 0.8;
  margin-bottom: 35px;
  text-transform: uppercase;
  color: var(--oit-clr-black);
}
.oit-funfact-title i {
  font-style: normal;
}
.oit-funfact-area .row > [class^=col]:not(:last-child) .oit-funfact-item {
  border-inline-end: 1px solid rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-funfact-area .row > [class^=col]:not(:last-child) .oit-funfact-item {
    border-inline-end: 0;
  }
}
.oit-funfact-item {
  padding: 65px 30px;
  height: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-funfact-item {
    padding: 40px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-funfact-item {
    padding: 30px 0;
    border-right: 0;
  }
}
.oit-funfact-item span {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-funfact-item span {
    font-size: 14px;
  }
}
.oit-funfact-bdr {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.oit-funfact-area .row [class*=col-]:last-child .oit-funfact-item {
  border-right: 0;
}

/*----------------------------------------*/
/* award css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-award-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
.oit-award-title-box p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.04em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-award-title-box p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .oit-award-title-box p {
    font-size: 16px;
  }
  .oit-award-title-box p br {
    display: none;
  }
}
.oit-award-icon {
  transition: all 0.3s ease-in-out;
}
@media (max-width: 767px) {
  .oit-award-icon {
    text-align: center;
  }
}
@media (max-width: 767px) {
  .oit-award-content {
    flex-direction: column;
  }
}
.oit-award-content p, .oit-award-content span {
  font-weight: 500;
  font-size: 30px;
  line-height: 0.87;
  margin-bottom: 0;
  transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-award-content p, .oit-award-content span {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-award-content p, .oit-award-content span {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .oit-award-content p, .oit-award-content span {
    flex-wrap: wrap;
    font-size: 18px;
    text-align: center;
  }
}
.oit-award-content p {
  padding-left: 20px;
}
@media (max-width: 767px) {
  .oit-award-content p {
    padding-left: 0;
    padding: 20px 0;
  }
}
.oit-award-content span {
  color: var(--oit-clr-black);
}
.oit-award-item {
  padding: 35px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.oit-award-item:hover .oit-award-icon {
  transform: translateX(20px);
}
@media (max-width: 767px) {
  .oit-award-item:hover .oit-award-icon {
    transform: translateX(0px);
  }
}
@media (max-width: 767px) {
  .oit-award-item:hover .oit-award-content span {
    transform: translateX(0px);
  }
}
.oit-award-item-wrap {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/*----------------------------------------*/
/* team css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-team-area {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}
.oit-team-item {
  padding: 55px 50px;
  border-radius: 10px;
  background-color: #F5F5F5;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-team-item {
    padding: 30px 30px;
  }
}
.oit-team-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-team-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-team-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-team-title {
    font-size: 25px;
  }
}
@media (max-width: 767px) {
  .oit-team-title {
    font-size: 25px;
  }
}
.oit-team-content span {
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  color: rgba(13, 13, 13, 0.6);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-team-content span {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .oit-team-content span {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
.oit-team-social span {
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-team-social span {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .oit-team-social span {
    font-size: 16px;
  }
}
.oit-team-social span:not(:first-child) {
  margin-left: 30px;
}
@media (max-width: 767px) {
  .oit-team-social span:not(:first-child) {
    margin-left: 15px;
  }
}

/*----------------------------------------*/
/* price css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-price-area {
    padding-top: 80px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-price-area .oit-section-title-box {
    padding-left: 0;
    margin-bottom: 50px;
  }
}
.oit-price-item {
  padding: 45px 50px;
  border-radius: 30px;
  min-height: 585px;
  background-color: #101216;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-price-item {
    min-height: auto;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-price-item {
    padding: 35px 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-price-item {
    padding: 30px;
  }
}
.oit-price-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-price-title {
    font-size: 25px;
  }
}
@media (max-width: 767px) {
  .oit-price-title {
    font-size: 20px;
  }
}
.oit-price-head {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-price-head {
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-price-head-content {
    margin-right: 20px;
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .oit-price-head-content {
    margin-right: 0;
    margin-bottom: 30px;
  }
}
.oit-price-head-content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-price-head-content p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .oit-price-head-content p {
    font-size: 16px;
  }
  .oit-price-head-content p br {
    display: none;
  }
}
.oit-price-head-btn .nav {
  padding: 6px;
  border-radius: 1000px;
  background-color: #0D0D0D;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.oit-price-head-btn .nav button {
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  border-radius: 1000px;
  padding: 18px 19px;
  display: inline-block;
  color: var(--oit-clr-white);
  background-color: transparent;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-price-head-btn .nav button {
    font-size: 16px;
    padding: 10px 19px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-price-head-btn .nav button {
    padding: 11px 20px;
  }
}
.oit-price-head-btn .nav button.active {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.oit-price-list-item {
  display: flex;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 15px;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-price-list-item {
    font-size: 14px;
  }
}
.oit-price-list-item i {
  margin-right: 8px;
  transform: translateY(-1px);
}
.oit-price-list-label {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--oit-clr-white);
}
.oit-price-btn-box {
  padding: 20px 40px;
  padding-right: 20px;
  border-radius: 10px;
  background-color: #0D0D0D;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 767px) {
  .oit-price-btn-box {
    flex-wrap: wrap;
    padding: 20px;
  }
}
.oit-price-range {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .oit-price-range {
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
.oit-price-range i {
  font-style: normal;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 767px) {
  .oit-price-avater-box {
    flex-wrap: wrap;
  }
  .oit-price-avater-box img {
    margin-bottom: 10px;
  }
}
.oit-price-avater-box span {
  position: relative;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.7);
}
.oit-price-avater-box span::before {
  content: "";
  height: 15px;
  width: 15px;
  margin-right: 7px;
  border-radius: 50%;
  display: inline-block;
  background-color: #15DB46;
}
.oit-price-info {
  padding: 40px 40px;
  border-radius: 10px;
  background-color: #0D0D0D;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-price-info {
    padding: 40px 30px;
  }
}
@media (max-width: 767px) {
  .oit-price-info {
    padding: 10px;
  }
}
.oit-price-info-icon {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  display: inline-block;
  line-height: 58px;
  text-align: center;
  font-size: 24px;
  margin-right: 15px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.8);
  background-color: #101216;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.oit-price-info-desc span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.oit-price-info-desc a {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .oit-price-info-desc a {
    font-size: 16px;
  }
}

/*----------------------------------------*/
/* faq css start here
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-faq-area {
    padding-top: 70px;
    padding-bottom: 50px;
  }
}
.oit-faq-style .oit-price-item {
  padding: 45px 50px;
  min-height: auto;
  display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-faq-style .oit-price-item {
    padding: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-faq-style .oit-price-item {
    padding: 30px;
    width: 100%;
  }
}
.oit-faq-accordion-wrap .accordion-item {
  position: relative;
  margin-bottom: 25px;
  padding: 30px 40px;
  border-radius: 10px;
  background-color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .oit-faq-accordion-wrap .accordion-item {
    padding: 30px;
  }
}
.oit-faq-accordion-wrap .accordion-button {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  padding-right: 40px;
  font-family: var(--oit-ff-funnel);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-faq-accordion-wrap .accordion-button {
    font-size: 20px;
  }
}
.oit-faq-accordion-wrap .accordion-button:not(.collapsed) .accordion-icon svg {
  transform: rotate(135deg);
}
.oit-faq-accordion-wrap .accordion-body {
  padding-right: 50px;
}
@media (max-width: 767px) {
  .oit-faq-accordion-wrap .accordion-body {
    padding-right: 0;
  }
}
.oit-faq-accordion-wrap .accordion-body p {
  padding-top: 10px;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.04em;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-faq-accordion-wrap .accordion-body p {
    font-size: 15px;
  }
}
.oit-faq-accordion-wrap .accordion-icon {
  position: absolute;
  top: -3px;
  right: 0;
}
.oit-faq-accordion-wrap .accordion-icon svg {
  transition: 0.3s;
}

/*----------------------------------------*/
/* text-slider css start here
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-text-slider-area {
    padding-top: 70px;
    padding-bottom: 60px;
  }
}
.oit-text-slider-item {
  gap: 40px;
  -webkit-animation: text-slide-animation 30s linear infinite;
  animation: text-slide-animation 30s linear infinite;
  transition: animation-duration 300ms;
}
.oit-text-slider-item.slide-ltr {
  -webkit-animation: text-slide-animation-2 30s linear infinite;
  animation: text-slide-animation-2 30s linear infinite;
  transition: animation-duration 300ms;
}
.oit-text-slider-item span {
  font-weight: 800;
  font-size: 100px;
  line-height: 1;
  color: #494949;
  white-space: nowrap;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .oit-text-slider-item span {
    font-size: 60px;
  }
}
.oit-text-slider-item span svg {
  margin-top: -10px;
  display: inline-block;
  animation: shape-rotate 10s linear infinite;
}
.oit-text-slider-item img {
  margin: 0 -20px;
}
.oit-text-slider-btn {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0 auto;
  text-align: center;
  transform: translateY(-50%);
}

/*----------------------------------------*/
/*                                         \
\   1.7 DIGITAL AGENCY CSS HERE            \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.dg-hero-bdr {
  padding-left: 110px;
  border-left: 1px dashed var(--oit-clr-black);
  border-right: 1px dashed var(--oit-clr-black);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-hero-bdr {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .dg-hero-bdr {
    padding-left: 20px;
    padding-top: 120px;
    padding-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .dg-hero-bdr {
    padding-left: 20px;
    padding-top: 120px;
    padding-right: 20px;
    padding-bottom: 60px;
  }
}
.dg-hero-title {
  font-weight: 800;
  font-size: 200px;
  line-height: 0.95;
  text-transform: uppercase;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .dg-hero-title {
    font-size: 145px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .dg-hero-title {
    font-size: 140px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-hero-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dg-hero-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dg-hero-title {
    font-size: 60px;
  }
}
@media (max-width: 767px) {
  .dg-hero-title {
    font-size: 35px;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-hero-title-box {
    margin-bottom: 20px;
  }
}
.dg-hero-title img {
  transform: translateY(-16px);
  border-radius: 1000px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {
  .dg-hero-title img {
    transform: translateY(0);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-hero-title img {
    display: none;
  }
}
.dg-hero-content p {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
  letter-spacing: -0.01em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-hero-content p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .dg-hero-content p {
    font-size: 16px;
  }
}
.dg-hero-img {
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-hero-img {
    max-width: 40%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-hero-img {
    border-radius: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-hero-img {
    position: static;
    max-width: 40%;
    border-radius: 10px;
    margin-bottom: 20px;
  }
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-about-style {
    padding-top: 70px;
  }
}
@media (max-width: 767px) {
  .dg-about-style.oit-about-area {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-about-style .oit-about-text {
    margin-bottom: 40px;
  }
}
.dg-about-style .oit-about-thumb {
  margin-right: 0;
  height: auto;
}
.dg-about-style .oit-about-content {
  height: auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-about-style .oit-about-content {
    margin-bottom: 40px;
  }
}
.dg-about-style .oit-about-content p {
  margin-bottom: 40px;
  padding-right: 120px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-about-style .oit-about-content p {
    padding-right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-about-style .oit-about-content p {
    padding-right: 0;
    font-size: 16px;
  }
}
.dg-about-style .oit-funfact-item {
  padding: 0;
  border-right: 0;
}
@media (max-width: 767px) {
  .dg-about-style .oit-funfact-item {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .dg-about-style .oit-funfact-item span {
    font-size: 14px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dg-about-style .oit-funfact-title {
    font-size: 80px;
    margin-bottom: 12px;
  }
}
.dg-about-shape {
  position: absolute;
  top: 8%;
  right: 10%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-about-shape {
    right: 3%;
  }
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
.dg-service-style .oit-service-item {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-service-style .oit-service-item {
    flex-wrap: wrap;
  }
}
.dg-service-style .oit-service-title {
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .dg-service-style .oit-service-content {
    padding-bottom: 30px;
  }
}
.dg-service-style .oit-service-content p {
  padding-bottom: 30px;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dg-service-style .oit-service-content-wrap {
  padding: 20px 30px;
  padding-right: 62px;
}
@media (max-width: 767px) {
  .dg-service-style .oit-service-content-wrap {
    padding: 0;
  }
}
.dg-service-style .oit-service-category span {
  color: rgba(255, 255, 255, 0.7);
}
.dg-service-style .oit-service-thumb {
  margin-right: 0;
  border: 2px solid var(--oit-clr-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-service-style .oit-service-thumb {
    margin-bottom: 0;
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-service-style .oit-service-thumb img {
    width: 100%;
  }
}

/*----------------------------------------*/
/* project css start here
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-project-style {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.dg-project-style .oit-project-content {
  background-color: transparent;
}
.dg-project-style .oit-project-thumb {
  border-radius: 14px;
  overflow: hidden;
}
.dg-project-style .oit-project-shape {
  top: -3%;
  right: -6%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-project-style .oit-project-shape {
    right: -7%;
    transform: scale(0.4);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-project-style .oit-section-title-box {
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-project-style .oit-project-btn {
    margin-top: 0px;
  }
}

/*----------------------------------------*/
/* funfact css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-funfact-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.dg-funfact-style .oit-award-title-box p {
  padding-right: 110px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-funfact-style .oit-award-title-box p {
    padding-right: 0;
  }
}
.dg-funfact-item {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.dg-funfact-item p {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 0;
  text-align: end;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-funfact-item p {
    font-size: 16px;
  }
}
.dg-funfact-title {
  font-weight: 500;
  font-size: 120px;
  line-height: 0.67;
  text-transform: uppercase;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .dg-funfact-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .dg-funfact-title {
    font-size: 80px;
  }
}
@media (max-width: 767px) {
  .dg-funfact-title {
    font-size: 60px;
  }
}
.dg-funfact-title span {
  font-size: 45px;
}
.dg-funfact-title i {
  font-style: normal;
}

/*----------------------------------------*/
/* bin-to-card css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-bin-to-card-area {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
.oit-bin-to-card-item {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 10px;
  padding: 30px 30px 40px 30px;
}
.oit-bin-to-card-item.card-1 {
  min-height: 425px;
}
.oit-bin-to-card-item.card-3 {
  min-height: 300px;
}
.oit-bin-to-card-item p {
  font-weight: 600;
  font-size: 20px;
  color: var(--oit-clr-white);
}
.oit-bin-to-card-item > span {
  font-weight: 500;
  font-size: 18px;
  color: var(--oit-grey-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-bin-to-card-item > span {
    font-size: 14px;
  }
}
.oit-bin-to-card-item > span i {
  font-weight: 700;
  font-size: 16px;
  font-style: normal;
  letter-spacing: -0.02em;
  color: var(--oit-clr-black);
}
.oit-bin-to-card-item > span.style-2 {
  font-size: 16px;
}
.oit-bin-to-card-item > img {
  border-radius: 20px;
}
.oit-bin-to-card-item .ratting-text > span {
  font-size: 20px;
  line-height: 1.5;
}
.oit-bin-to-card-item .ratting-text > span:first-child {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-funnel);
}
.oit-bin-to-card-item.item-style-2 {
  padding-bottom: 0;
}
.oit-bin-to-card-item.item-style-3 {
  padding: 30px 45px 35px 50px;
}
.oit-bin-to-card-item.item-overlay {
  height: 100%;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}
.oit-bin-to-card-item.item-overlay::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: rgba(0, 0, 0, 0.7);
}
.oit-bin-to-card-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.33;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-bin-to-card-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-bin-to-card-title {
    font-size: 20px;
  }
}
.oit-bin-to-card-big-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-bin-to-card-big-title {
    font-size: 35px;
  }
}
.oit-bin-to-card-list ul li {
  list-style-type: none;
}
.oit-bin-to-card-list ul li:not(:last-child) {
  margin-bottom: 15px;
}
.oit-bin-to-card-list ul li span {
  position: relative;
  padding-left: 30px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.oit-bin-to-card-list ul li span svg {
  position: absolute;
  top: 2px;
  left: 0;
}
.oit-bin-to-card-shape-1 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.oit-bin-to-card-shape-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  z-index: -1;
}
.oit-bin-to-card-shape-3 {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

/*----------------------------------------*/
/* team css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-team-area {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}
.dg-team-author-wrap {
  padding: 8px 20px;
  border-radius: 10px;
  background-color: var(--oit-clr-white);
}
.dg-team-author-info span {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(13, 13, 13, 0.6);
}
.dg-team-title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 5px;
}
.dg-team-social a {
  height: 38px;
  width: 38px;
  line-height: 34px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  transition: 0.4s;
  color: var(--oit-clr-black);
  background-color: var(--oit-grey-1);
  outline: 1px solid rgba(13, 13, 13, 0.08);
}
.dg-team-social a:not(:last-child) {
  margin-right: 10px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .dg-team-social a:not(:last-child) {
    margin-right: 2px;
  }
}
.dg-team-social a:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}
.dg-team-thumb {
  overflow: hidden;
}
.dg-team-thumb img {
  transition: 1.3s all ease;
}
.dg-team-shape {
  position: absolute;
  right: 7%;
  top: -16%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-team-shape {
    transform: scale(0.6);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-team-btn {
    padding-top: 0;
  }
}

/*----------------------------------------*/
/* step css start here
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-step-area {
    padding-top: 60px;
    padding-bottom: 40px;
  }
}
.dg-step-area.about-style .dg-step-item {
  background-color: var(--oit-grey-1);
}
.dg-step-item {
  border-radius: 10px;
  padding: 25px 30px 30px;
  background-color: var(--oit-clr-white);
}
.dg-step-item span {
  font-weight: 500;
  font-size: 14px;
  display: block;
  margin-bottom: 125px;
  text-transform: uppercase;
}
.dg-step-item p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -0.8px;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-step-item p {
    font-size: 16px;
  }
}
.dg-step-big-text {
  position: absolute;
  top: 1%;
  right: 6%;
  font-size: 150px;
  color: transparent;
  margin-bottom: 0;
  line-height: 1;
  letter-spacing: -0.01em;
  font-family: var(--oit-ff-funnel);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.4);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .dg-step-big-text {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-step-big-text {
    font-size: 60px;
  }
}
.dg-step-title {
  font-size: 30px;
  margin-bottom: 25px;
  letter-spacing: -0.01em;
}

/*----------------------------------------*/
/* testimonial css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-testimonial-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.dg-testimonial-item {
  padding: 40px;
  min-height: 550px;
  border-radius: 10px;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-testimonial-item {
    min-height: 500px;
  }
}
.dg-testimonial-item p.text-large {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  margin-right: 45px;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .dg-testimonial-item p.text-large {
    font-size: 27px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .dg-testimonial-item p.text-large {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .dg-testimonial-item p.text-large {
    font-size: 20px;
    margin-right: 0;
  }
}
.dg-testimonial-item p.text-large.large-style-2 {
  margin-right: 0;
  margin-top: 35px;
}
.dg-testimonial-item p.text-small {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.65;
}
@media (max-width: 767px) {
  .dg-testimonial-item p.text-small {
    font-size: 15px;
  }
}
.dg-testimonial-item p.text-small span {
  color: var(--oit-text-body);
}
.dg-testimonial-authour-title {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 3px;
}
.dg-testimonial-authour-info {
  font-weight: 400;
  font-size: 14px;
}
.dg-testimonial-shape {
  position: absolute;
  top: 7%;
  right: 6.5%;
  z-index: -1;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .dg-testimonial-shape {
    right: -3%;
    transform: scale(0.5);
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .dg-testimonial-shape {
    right: -3%;
    transform: scale(0.5);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dg-testimonial-shape {
    top: 0;
    right: -3%;
    transform: scale(0.5);
  }
}
.dg-testimonial-active {
  margin-right: -555px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-testimonial-active {
    margin-right: 0;
  }
}

/*----------------------------------------*/
/* contact css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-contact-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-contact-area.faq-style .dg-contact-info-wrap {
    padding-bottom: 40px;
  }
}
.dg-contact-info span {
  font-weight: 600;
  font-size: 18px;
  display: block;
  margin-bottom: 7px;
  color: var(--oit-clr-white);
  text-transform: uppercase;
}
.dg-contact-info a {
  line-height: 1.63;
  color: rgba(255, 255, 255, 0.7);
}
.dg-contact-info-wrap {
  max-width: 590px;
}
@media (max-width: 767px) {
  .dg-contact-info-wrap {
    max-width: 100%;
    flex-wrap: wrap;
  }
}
.dg-contact-social a {
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--oit-clr-white);
  display: inline-block;
}
.dg-contact-social a:not(:last-child) {
  margin-right: 40px;
}
@media (max-width: 767px) {
  .dg-contact-social a:not(:last-child) {
    margin-right: 20px;
  }
}
.dg-contact-social a svg {
  height: 10px;
  width: 10px;
  margin-left: 3px;
  display: inline-block;
}
.dg-contact-form-box {
  padding: 50px;
  border-radius: 20px;
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
  .dg-contact-form-box {
    padding: 30px;
  }
}
.dg-contact-form-box label {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.44;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: var(--oit-clr-white);
}
.dg-contact-input-box input {
  border: none;
  padding: 0;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: var(--oit-clr-white);
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dg-contact-input-box input::placeholder {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.dg-contact-input-box input:focus {
  border-color: var(--oit-clr-white);
}
.dg-contact-textarea-box label {
  margin-bottom: 20px;
}
.dg-contact-textarea-box textarea {
  padding: 0;
  height: 130px;
  resize: none;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dg-contact-textarea-box textarea::placeholder {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.dg-contact-textarea-box textarea:focus {
  border-color: var(--oit-clr-white);
}
.dg-contact-textarea-box textarea:focus::placeholder {
  opacity: 0;
}
.dg-contact-select {
  height: 50px;
  line-height: 50px;
}
.dg-contact-select .nice-select {
  border: none;
  padding: 0;
  width: 100%;
  font-size: 14px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-radius: 0;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dg-contact-select .nice-select span.current {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.dg-contact-shape-1 {
  position: absolute;
  bottom: 0;
  left: 16%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .dg-contact-shape-1 {
    left: 0;
  }
}
.dg-contact-shape-1 img {
  opacity: 0.3;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-contact-left {
    padding-top: 0;
  }
}

/*----------------------------------------*/
/*                                         \
|   1.6 DESIGN STUDIO CSS START HERE       \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.st-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.st-hero-bg img {
  width: 100%;
  height: 100%;
}
.st-hero-title {
  font-weight: 700;
  font-size: 250px;
  line-height: 1;
  text-transform: uppercase;
  padding-bottom: 250px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .st-hero-title {
    font-size: 225px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .st-hero-title {
    font-size: 195px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .st-hero-title {
    font-size: 170px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .st-hero-title {
    font-size: 130px;
    padding-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .st-hero-title {
    font-size: 90px;
    padding-bottom: 50px;
  }
}
.st-hero-title span {
  display: inline-block;
}
.st-hero-title span:first-child {
  background: url("../../assets/img/hero/hero-text-1.jpg");
  background-size: cover;
  color: var(--oit-clr-white);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.st-hero-title span:last-child {
  background: url("../../assets/img/hero/hero-text-2.jpg");
  background-size: cover;
  color: var(--oit-clr-white);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  transform: translateY(220px);
  margin-left: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-hero-title span:last-child {
    transform: translateY(0);
    margin-left: 0px;
  }
}
.st-hero-content p {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
  padding-right: 60px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-hero-content p {
    padding-right: 0;
    font-size: 16px;
  }
}
.st-hero-text-circle {
  position: absolute;
  cursor: pointer;
  bottom: 10%;
  right: 20%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .st-hero-text-circle {
    bottom: 2%;
    right: 5%;
    transform: scale(0.7);
  }
}
@media (max-width: 767px) {
  .st-hero-text-circle {
    bottom: 1%;
    right: 1%;
    transform: scale(0.6);
  }
}
.st-hero-text-circle img {
  animation: shape-rotate 20s linear infinite;
}
.st-hero-text-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*----------------------------------------*/
/* text slider css start here
/*----------------------------------------*/
.st-text-slider-stye .oit-text-slider-item span {
  color: var(--oit-clr-white);
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-service-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.st-service-style .oit-project-shape {
  right: 11%;
}
.st-service-style .oit-service-item {
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  padding-bottom: 50px;
  background-color: var(--oit-clr-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-service-style .oit-service-item {
    flex-wrap: wrap;
    padding-bottom: 45px;
  }
}
.st-service-style .oit-service-thumb {
  margin-right: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-service-style .oit-service-thumb {
    width: 100%;
    height: 400px;
    overflow: hidden;
  }
  .st-service-style .oit-service-thumb img {
    width: 100%;
    object-fit: cover;
  }
}
.st-service-style .oit-service-content p {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 50px;
  padding-right: 100px;
  color: var(--oit-grey-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .st-service-style .oit-service-content p {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .st-service-style .oit-service-content p {
    font-size: 20px;
  }
  .st-service-style .oit-service-content p br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .st-service-style .oit-service-content p {
    font-size: 20px;
    padding-right: 0;
  }
  .st-service-style .oit-service-content p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .st-service-style .oit-service-content p {
    font-size: 16px;
    padding-right: 0;
  }
  .st-service-style .oit-service-content p br {
    display: none;
  }
}
.st-service-style .oit-service-title {
  font-size: 144px;
  margin-bottom: 60px;
  display: flex;
  line-height: 1.1;
}
.st-service-style .oit-service-title span {
  font-weight: 400;
  font-size: 20px;
  margin-right: 30px;
  margin-top: 35px;
  display: inline-block;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .st-service-style .oit-service-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .st-service-style .oit-service-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .st-service-style .oit-service-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .st-service-style .oit-service-title {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .st-service-style .oit-service-title {
    font-size: 40px;
  }
}
.st-service-cat span {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  border-radius: 100px;
  padding: 5px 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  display: inline-block;
  border: 1px solid rgba(93, 93, 93, 0.3);
}
@media (max-width: 767px) {
  .st-service-cat span {
    font-size: 14px;
  }
}

/*----------------------------------------*/
/* project css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-project-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.st-project-content span {
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .st-project-content span {
    font-size: 14px;
  }
}
.st-project-content-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px;
  pointer-events: none;
}
@media (max-width: 767px) {
  .st-project-content-wrap {
    padding: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-project-subtitle-box {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-project-subtitle-box {
    margin-bottom: 15px;
  }
}
.st-project-title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .st-project-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-project-title-box {
    margin-bottom: 60px;
    padding-left: 0;
  }
}
.st-project-category a {
  font-weight: 400;
  font-size: 16px;
  border-radius: 20px;
  padding: 3px 22px;
  display: inline-block;
  letter-spacing: -0.02em;
  backdrop-filter: blur(40px);
  color: var(--oit-clr-white);
  background-color: rgba(0, 0, 0, 0.4);
}
.st-project-category a:hover {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.st-project-item {
  overflow: hidden;
  border-radius: 15px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-project-btn {
    margin-top: 30px;
  }
}

/*----------------------------------------*/
/* team css start here
/*----------------------------------------*/
.st-team-style .dg-team-item {
  overflow: hidden;
  border-radius: 10px;
}
.st-team-style .dg-team-author-wrap {
  border-radius: 0;
  padding: 17px 25px;
  background-color: var(--oit-grey-1);
}

/*----------------------------------------*/
/* price css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-price-area {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
.st-price-item {
  padding: 10px;
  border-radius: 20px;
  background-color: var(--oit-grey-1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.st-price-item.active .st-price-btn .oit-btn-border {
  color: var(--oit-clr-white);
  border: 1px solid var(--oit-clr-black);
  background-color: var(--oit-clr-black);
}
.st-price-head {
  padding: 30px;
  border-radius: 20px;
  background-color: var(--oit-clr-white);
}
.st-price-head p {
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-price-head p br {
    display: none;
  }
}
.st-price-body {
  padding: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-price-body {
    padding: 20px;
  }
}
.st-price-badge {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
}
.st-price-badge-wrap {
  line-height: 1;
  margin-bottom: 20px;
}
.st-price-value {
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 22px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-black);
}
.st-price-value span {
  margin-left: 7px;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
}
.st-price-list {
  margin-bottom: 40px;
}
.st-price-list-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 35px;
  display: inline-block;
  text-transform: uppercase;
}
.st-price-list ul li {
  list-style-type: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--oit-clr-black);
}
.st-price-list ul li::before {
  content: "";
  height: 8px;
  width: 8px;
  margin-right: 7px;
  border-radius: 50%;
  display: inline-block;
  background-color: #FF5E00;
  transform: translateY(-2px);
}
.st-price-list ul li:not(:last-child) {
  margin-bottom: 25px;
}
.st-price-btn .oit-btn-border {
  padding: 13px 22px;
  border-radius: 10px;
  color: var(--oit-clr-black);
  border: 1px solid var(--oit-clr-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-price-tab-btn {
    margin-top: 0px;
  }
}

/*----------------------------------------*/
/* testimonial css start here
/*----------------------------------------*/
.st-testimonial-style .dg-testimonial-item p.text-large {
  margin-right: 0;
}
.st-testimonial-style .dg-testimonial-item {
  border-radius: 0;
}
.st-testimonial-active {
  margin-right: -300px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-testimonial-active {
    margin-right: 0;
  }
}
.st-testimonial-info {
  height: 100%;
  padding: 30px;
  border-radius: 20px 0 0 20px;
  background-color: var(--oit-clr-white);
}
.st-testimonial-info span {
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  display: block;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
}
.st-testimonial-info p {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.05em;
}
.st-testimonial-info img {
  margin-bottom: 20px;
}
.st-testimonial-ratting {
  font-weight: 700;
  font-size: 144px;
  line-height: 1;
  margin-bottom: 18px;
  color: var(--oit-clr-black);
}
.st-testimonial-ratting-icon {
  margin-bottom: 35px;
}
.st-testimonial-ratting-icon i {
  color: #FF5E00;
  margin: 0 2px;
  display: inline-block;
}

/*----------------------------------------*/
/*                                         \
\   1.8 SOLO DESIGN AGENCY CSS START HERE  \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.sd-hero-bg {
  overflow: hidden;
  padding-top: 300px;
  padding-bottom: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .sd-hero-bg {
    padding-top: 230px;
  }
}
@media (max-width: 767px) {
  .sd-hero-bg {
    padding-top: 180px;
  }
}
.sd-hero-bg::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.sd-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.sd-hero-video video {
  object-fit: cover;
  background-size: covar;
}
.sd-hero-title {
  font-size: 320px;
  line-height: 0.8;
  margin-bottom: 220px;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sd-hero-title {
    font-size: 200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sd-hero-title {
    font-size: 180px;
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sd-hero-title {
    font-size: 150px;
    margin-bottom: 100px;
  }
}
@media (max-width: 767px) {
  .sd-hero-title {
    font-size: 70px;
    margin-bottom: 100px;
  }
}
.sd-hero-info span, .sd-hero-info a {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.05em;
  color: var(--oit-clr-white);
}
.sd-hero-info img {
  flex: 0 0 auto;
  margin-right: 20px;
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
.sd-about-mission-wrap {
  padding: 35px 30px;
  min-width: 900px;
  border-radius: 10px;
  display: inline-block;
  background: var(--oit-clr-white);
  box-shadow: 0 4px 50px 0 rgba(13, 13, 13, 0.05);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-about-mission-wrap {
    min-width: auto;
  }
}
.sd-about-mission-wrap .nav-tab {
  padding-bottom: 20px;
}
.sd-about-mission-wrap .nav-tab li button {
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(73, 73, 73, 0.8);
}
.sd-about-mission-wrap .nav-tab li button.active {
  color: var(--oit-clr-black);
}
.sd-about-mission-wrap .nav-tab li:not(:last-child) {
  margin-right: 50px;
}
@media (max-width: 767px) {
  .sd-about-mission-wrap .nav-tab li:not(:last-child) {
    margin-right: 20px;
  }
}
.sd-about-mission-wrap .tab-content p {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.02em;
  color: rgba(73, 73, 73, 0.8);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-about-mission-wrap .tab-content p br {
    display: none;
  }
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-service-style.oit-service-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-service-style .oit-section-title-box {
    margin-bottom: 40px;
  }
}
.sd-service-style .oit-service-thumb {
  margin-right: 0;
  border: none;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .sd-service-style .oit-service-thumb img {
    width: 100%;
  }
}
.sd-service-style .oit-service-content-wrap {
  padding-right: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-service-style .oit-service-content-wrap {
    padding-right: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sd-service-style .oit-service-item {
    padding: 30px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-service-style .oit-service-item {
    flex-wrap: wrap;
    padding: 30px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-service-style .oit-service-content {
    margin-bottom: 30px;
  }
}
.sd-service-style .oit-service-content p {
  margin-bottom: 50px;
}
.sd-service-style .oit-service-category span {
  color: var(--oit-clr-black);
}

/*----------------------------------------*/
/* project css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-project-area {
    padding-top: 70px;
  }
}

/*----------------------------------------*/
/* funfact css start here
/*----------------------------------------*/
.sd-funfact-title {
  font-weight: 400;
  font-size: 60px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--oit-clr-black);
}
.sd-funfact-title i {
  font-style: normal;
}
.sd-funfact-card {
  position: relative;
  padding: 40px;
  z-index: 1;
  border-radius: 10px;
}
.sd-funfact-card.card-1 {
  min-height: 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-funfact-card.card-1 {
    min-height: 300px;
  }
}
.sd-funfact-card.card-2 {
  min-height: 540px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .sd-funfact-card.card-2 {
    min-height: 450px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sd-funfact-card.card-2 {
    min-height: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-funfact-card.card-2 {
    min-height: 300px;
  }
}
.sd-funfact-card.card-3 {
  min-height: 260px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-funfact-card.card-3 {
    min-height: 300px;
  }
}
.sd-funfact-card.card-4 {
  min-height: 400px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-funfact-card.card-4 {
    min-height: 300px;
  }
}
.sd-funfact-card span {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  text-align: end;
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-funfact-card span {
    font-size: 16px;
  }
}
.sd-funfact-card.sd-content-white span {
  color: var(--oit-clr-white);
}
.sd-funfact-card.sd-content-white .sd-funfact-title {
  color: var(--oit-clr-white);
}
.sd-funfact-shape-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.sd-funfact-shape-1 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.sd-funfact-shape-3 {
  position: absolute;
  top: 0%;
  right: 14%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .sd-funfact-shape-3 {
    transform: scale(0.7);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sd-funfact-shape-3 {
    top: -5%;
    transform: scale(0.5);
  }
}

/*----------------------------------------*/
/* choose css start here
/*----------------------------------------*/
.sd-choose-top-content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}
.sd-choose-card {
  border-radius: 10px;
  padding: 10px;
  background-color: var(--oit-clr-white);
}
.sd-choose-card-icon {
  margin-right: 10px;
  color: var(--oit-clr-black);
}
.sd-choose-card-title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 0;
  letter-spacing: -0.01em;
  color: var(--oit-clr-black);
}
.sd-choose-card-inner {
  border-radius: 10px;
  border: 1px solid var(--oit-clr-black);
}
.sd-choose-card-head {
  padding: 40px;
  border-bottom: 1px solid var(--oit-clr-black);
}
.sd-choose-card-body {
  padding: 50px 40px 35px 40px;
}
.sd-choose-card-body p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
  letter-spacing: -0.04em;
}

/*----------------------------------------*/
/* team css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-team-area .oit-section-title-box {
    margin-bottom: 40px;
  }
}
.sd-team-area .shape-1 {
  position: absolute;
  top: 6%;
  right: 13%;
}
.sd-team-row-wrap {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.sd-team-row-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.sd-team-row-item .row [class*=col]:not(:last-child) .sd-team-item {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.sd-team-thumb {
  overflow: hidden;
  flex: 0 0 auto;
  margin-right: 25px;
}
.sd-team-thumb img {
  border-radius: 10px;
}
.sd-team-content span {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}
.sd-team-title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  color: var(--oit-clr-black);
}
.sd-team-item {
  height: 100%;
  padding: 30px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-team-item {
    padding: 15px 0;
  }
}
.sd-team-social a {
  height: 50px;
  width: 50px;
  line-height: 46px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  color: var(--oit-clr-black);
  background-color: rgba(13, 13, 13, 0.08);
}
.sd-team-social a:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}

/*----------------------------------------*/
/*                                         \
\   1.4 BRAND AGENCY CSS START HERE        \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.oit-hero-5-bg {
  padding-top: 260px;
  padding-bottom: 110px;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-hero-5-bg {
    padding-top: 200px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-hero-5-bg {
    padding-top: 160px;
    padding-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .oit-hero-5-bg {
    padding-top: 120px;
    padding-bottom: 30px;
  }
}
.oit-hero-5-title {
  font-size: 195px;
  line-height: 1;
  letter-spacing: -3px;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-hero-5-title {
    font-size: 175px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-hero-5-title {
    font-size: 155px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-hero-5-title {
    font-size: 135px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-hero-5-title {
    font-size: 110px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-hero-5-title {
    font-size: 100px;
  }
}
@media (max-width: 767px) {
  .oit-hero-5-title {
    font-size: 70px;
  }
}
.oit-hero-5-title.stroke-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--oit-clr-white);
}
.oit-hero-5-glob {
  margin-top: -240px;
  display: inline-block;
  height: 720px;
  width: 720px;
  border-radius: 50%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-hero-5-glob {
    height: 500px;
    width: 500px;
    margin-top: -150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-hero-5-glob {
    height: 400px;
    width: 400px;
    margin-top: -100px;
  }
}
@media (max-width: 767px) {
  .oit-hero-5-glob {
    height: 360px;
    width: 360px;
    margin-top: -100px;
  }
}
.oit-hero-5-glob::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0) 75%);
}
.oit-hero-5-glob img {
  animation: shape-rotate 60s linear infinite;
}
.oit-hero-5-bottom {
  margin-top: -300px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-hero-5-bottom {
    margin-top: -100px;
  }
}
@media (max-width: 767px) {
  .oit-hero-5-bottom {
    margin-top: 0px;
  }
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
.oit-about-text.fs-120 p {
  font-weight: 500;
  font-size: 120px;
  line-height: 1;
  color: var(--oit-clr-black);
}

/*----------------------------------------*/
/* about vision css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ba-about-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ba-about-area {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .ba-about-area .oit-section-title {
    font-size: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ba-about-area .oit-section-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ba-about-area .oit-section-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ba-about-area .dg-about-content-wrap {
    padding-left: 0;
  }
}
.ba-about-vision-wrap .row [class*=col-]:not(:last-child) .ba-about-vision-item {
  border-right: 1px solid #d9d9d9;
}
.ba-about-vision-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 30px;
  color: var(--oit-clr-black);
}
.ba-about-vision-inner {
  padding-left: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .ba-about-vision-inner {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ba-about-vision-inner {
    padding-left: 0;
  }
}
.ba-about-vision-item {
  height: 100%;
}
.ba-about-vision-item p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  padding-right: 85px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ba-about-vision-item p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ba-about-vision-item p {
    font-size: 16px;
    padding-right: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ba-about-vision-item p {
    font-size: 16px;
    padding-right: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ba-about-vision-item p {
    padding-right: 0;
  }
}
.ba-about-vision-item p span {
  color: var(--oit-clr-black);
}
.ba-about-vision-item ul li {
  list-style-type: none;
  margin-bottom: 15px;
}
.ba-about-vision-item ul li span {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.1;
  color: #494949;
  letter-spacing: -0.02em;
}
.ba-about-vision-item ul li span::before {
  content: "";
  height: 7px;
  width: 7px;
  margin-right: 7px;
  border-radius: 50%;
  display: inline-block;
  transform: translateY(-2px);
  background-color: var(--oit-clr-black);
}

/*----------------------------------------*/
/* funfact css start here
/*----------------------------------------*/
.ba-funfact-style .sd-funfact-card {
  padding: 30px;
  min-height: 300px;
}
.ba-funfact-style .sd-funfact-shape-3 {
  top: -25%;
  right: 16%;
}
.ba-funfact-style .sd-funfact-title {
  margin-bottom: 0;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 767px) {
  .ba-funfact-style .sd-funfact-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ba-funfact-style .sd-funfact-title {
    font-size: 55px;
  }
}
.ba-funfact-style .sd-funfact-card.sd-content-white p {
  color: var(--oit-clr-white);
}
.ba-funfact-content p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  color: #5d5d5d;
  margin-bottom: 0;
  flex: 0 0 auto;
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
.ba-service-style .oit-service-content-wrap {
  padding: 20px 30px;
  padding-right: 45px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ba-service-style .oit-service-content-wrap {
    padding: 5px 8px;
    padding-right: 20px;
  }
}
@media (max-width: 767px) {
  .ba-service-style .oit-service-content-wrap {
    padding: 0;
  }
}
.ba-service-style .oit-service-item {
  margin: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ba-service-style .oit-project-shape {
    top: 34px;
  }
}
.ba-service-tab-btn {
  margin-right: 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ba-service-tab-btn {
    margin-right: 0;
  }
}
.ba-service-tab-btn ul {
  flex-direction: column;
}
.ba-service-tab-btn ul li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 45px;
  width: 100%;
  line-height: 1;
  padding: 35px 10px;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ba-service-tab-btn ul li button {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .ba-service-tab-btn ul li button {
    font-size: 30px;
  }
}
.ba-service-tab-btn ul li button.active {
  color: var(--oit-clr-white);
}

/*----------------------------------------*/
/* career css start here
/*----------------------------------------*/
.career-details-meta span {
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .career-details-meta span {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .career-details-meta span {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .career-details-meta span {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-details-meta span {
    font-size: 15px;
  }
}
.career-details-meta strong {
  font-weight: 500;
  font-size: 30px;
  margin-left: 20px;
  line-height: 1.5;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .career-details-meta strong {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .career-details-meta strong {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .career-details-meta strong {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-details-meta strong {
    font-size: 15px;
  }
}
.career-details-meta:not(:last-child) {
  padding-right: 40px;
  margin-right: 40px;
  line-height: 1;
  border-right: 1px solid rgba(73, 73, 73, 0.5);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .career-details-meta:not(:last-child) {
    margin-bottom: 15px;
  }
}
@media (max-width: 767px) {
  .career-details-meta:not(:last-child) {
    margin-bottom: 15px;
    border: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-details-meta-box {
    flex-wrap: wrap;
    align-items: start !important;
    justify-content: start !important;
    margin-bottom: 50px;
  }
}
.career-details-list li {
  list-style-type: none;
  padding-left: 30px;
  position: relative;
}
.career-details-list li:not(:last-child) {
  margin-bottom: 25px;
}
.career-details-list li span {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .career-details-list li span {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-details-list li span {
    font-size: 16px;
  }
}
.career-details-list li span svg, .career-details-list li span i {
  position: absolute;
  top: 0;
  left: 0;
}
.career-details-deadline span {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.33;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-details-deadline span {
    font-size: 18px;
  }
}
.career-details-deadline strong {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.33;
  margin-right: 15px;
  display: inline-block;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-details-deadline strong {
    font-size: 18px;
  }
}
.career-details-area .postbox-dsc p {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-details-area .postbox-dsc p {
    font-size: 16px;
  }
}

.career-item {
  padding: 20px 30px 30px 30px;
  border-radius: 10px;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-item {
    padding: 25px 20px;
  }
}
@media (max-width: 767px) {
  .career-item {
    padding: 25px 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .career-item {
    padding: 40px;
  }
}
.career-item p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.71;
  margin-bottom: 35px;
  margin-right: 40px;
  letter-spacing: -0.06em;
}
.career-item .title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.47;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-item .title {
    font-size: 25px;
  }
}
.career-price {
  font-size: 14px;
  border-radius: 5px;
  padding: 11px 20px;
  display: inline-block;
  line-height: 1;
  color: var(--it-common-white);
  background-color: var(--it-text-body);
  border: 1px solid rgba(26, 182, 157, 0.3);
}
@media (max-width: 767px) {
  .career-price {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .career-price {
    margin-bottom: 0;
  }
}
.career-meta {
  margin-bottom: 25px;
}
.career-meta span {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  text-transform: uppercase;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-meta span {
    font-size: 12px;
  }
}
.career-meta span svg {
  display: inline-block;
  margin-right: 5px;
}
.career-meta span:not(:last-child) {
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid #D9D9D9;
}
.career-area .shape-1 {
  position: absolute;
  top: 5%;
  right: 20%;
}

.dg-step-area.career-style .shape {
  position: absolute;
  top: -10%;
  right: -8%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-step-area.career-style .shape {
    display: none;
  }
}
.dg-step-area.career-style .dg-step-item {
  padding: 35px 40px 38px 40px;
}
.dg-step-area.career-style .dg-step-item > span {
  margin-bottom: 25px;
}
.dg-step-area.career-style .dg-step-item p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: -0.06em;
}
.dg-step-area.career-style .dg-step-item .dg-step-title {
  font-weight: 500;
  line-height: 1.47;
  margin-bottom: 23px;
  letter-spacing: -0.01em;
}

.dg-contact-area.faq-style .dg-contact-info span {
  color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-info a {
  color: rgba(13, 13, 13, 0.7);
}
@media (max-width: 767px) {
  .dg-contact-area.faq-style .dg-contact-info a br {
    display: none;
  }
}
.dg-contact-area.faq-style .dg-contact-social a {
  color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-form-box {
  border: none;
  box-shadow: none;
  backdrop-filter: blur(10px);
  background: rgba(237, 237, 237, 0.7);
}
.dg-contact-area.faq-style .dg-contact-form-box label {
  color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-input-box input {
  color: var(--oit-clr-black);
  background-color: transparent;
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.dg-contact-area.faq-style .dg-contact-input-box input::placeholder {
  color: rgba(13, 13, 13, 0.8);
}
.dg-contact-area.faq-style .dg-contact-input-box input:focus {
  border-color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-textarea-box textarea {
  background-color: transparent;
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.dg-contact-area.faq-style .dg-contact-textarea-box textarea::placeholder {
  color: rgba(13, 13, 13, 0.8);
}
.dg-contact-area.faq-style .dg-contact-textarea-box textarea:focus {
  border-color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-select .nice-select {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.dg-contact-area.faq-style .dg-contact-select .nice-select span.current {
  color: rgba(13, 13, 13, 0.8);
}
.dg-contact-area.faq-style .dg-contact-select .nice-select::after {
  border-bottom: 2px solid var(--oit-clr-black);
  border-right: 2px solid var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-shape-1 {
  position: absolute;
  bottom: auto;
  top: -9%;
  left: auto;
  right: -7%;
  opacity: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-contact-area.faq-style .dg-contact-shape-1 {
    display: none;
  }
}
.dg-contact-area.faq-style .dg-contact-shape-1 img {
  opacity: 1;
}

/*----------------------------------------*/
/*  7.7 error agency css here
/*----------------------------------------*/
.error-ptb {
  padding-top: 170px;
  padding-bottom: 120px;
}
.error-title {
  font-weight: 700;
  font-size: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .error-title {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .error-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .error-title {
    font-size: 55px;
  }
}

/*----------------------------------------*/
/*  5.4 project details css
/*----------------------------------------*/
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-details-area {
    padding: 70px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-details-area .project-details-thumb-box.mb-110 {
    margin-bottom: 50px !important;
  }
}
.project-details-area .postbox-dsc p {
  font-size: 30px;
  line-height: 1.33;
  letter-spacing: 0;
  margin-right: 70px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .project-details-area .postbox-dsc p {
    margin-right: 0;
    font-size: 25px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .project-details-area .postbox-dsc p {
    margin-right: 0;
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .project-details-area .postbox-dsc p {
    margin-right: 0;
    font-size: 16px;
  }
}
.project-details-area .career-details-list li {
  padding-left: 35px;
}
.project-details-area .career-details-list li:not(:last-child) {
  margin-bottom: 17px;
}
.project-details-area .career-details-list li span {
  font-weight: 600;
  font-size: 30px;
  display: inline-block;
  margin-bottom: 5px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-details-area .career-details-list li span {
    font-size: 16px;
  }
}
.project-details-area .career-details-list li span svg, .project-details-area .career-details-list li span i {
  top: 8px;
}
.project-details-area .career-details-list li p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-details-area .career-details-list li p {
    font-size: 15px;
  }
}
.project-details-area.style-2 .career-details-list li span {
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-details-area.style-2 .career-details-list li span {
    font-size: 15px;
  }
}
.project-details-area.style-2 .career-details-list li span svg, .project-details-area.style-2 .career-details-list li span i {
  top: 0;
}
.project-details-area.style-2 .sd-funfact-card {
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-details-area.style-2 .sd-funfact-card.card-1 {
    min-height: 200px;
  }
}
.project-details-area.style-2 .sd-funfact-card span {
  text-align: start;
}
.project-details-thumb img {
  border-radius: 10px;
}
.project-details-subtitle {
  display: block;
  margin-bottom: 55px;
}
.project-details-author-list ul li {
  display: flex;
  padding: 26px 0;
  align-items: center;
  list-style-type: none;
  justify-content: space-between;
  border-bottom: 1px solid var(--oit-grey-2);
}
.project-details-author-list ul li:first-child {
  border-top: 1px solid var(--oit-grey-2);
}
.project-details-author-list ul li span {
  font-weight: 500;
  font-size: 30px;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .project-details-author-list ul li span {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .project-details-author-list ul li span {
    font-size: 15px;
  }
}

.project-slide-active {
  margin: 0 -480px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-slide-active {
    margin: 0;
  }
}
.project-slide-style .oit-project-title {
  font-weight: 600;
  font-size: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-slide-style .oit-project-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-slide-style .oit-project-category span {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-slide-style .oit-project-category span:first-child::after {
    top: 7px;
    height: 5px;
    width: 5px;
  }
}
.project-slide-style .oit-project-content {
  background-color: var(--oit-clr-white);
}
.project-slide-style .oit-project-item {
  background-color: var(--oit-clr-white);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-project-area.p-relative.mt-50.pt-150.pb-150 {
    padding: 70px 0 !important;
  }
}

/*----------------------------------------*/
/*  5.4 service details css
/*----------------------------------------*/
.service-details-area .career-details-list li span {
  font-weight: 500;
  color: var(--oit-text-body);
}
.service-details-area .dg-step-item p {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -0.06em;
}
.service-details-area .dg-step-title {
  margin-bottom: 15px;
}

.oit-service-1 .oit-service-item {
  margin: 0;
  margin-bottom: 50px;
}

/*----------------------------------------*/
/*  5.4 contact details css
/*----------------------------------------*/
.contact-details-big-title {
  font-weight: 500;
  font-size: 120px;
  line-height: 1.08;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .contact-details-big-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact-details-big-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-details-big-title {
    font-size: 60px;
  }
  .contact-details-big-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .contact-details-big-title {
    font-size: 28px;
    margin-bottom: 40px !important;
  }
  .contact-details-big-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .contact-details-big-title {
    font-size: 45px;
    margin-bottom: 60px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-thumb {
    padding-bottom: 60px !important;
  }
}
.contact-details-thumb img {
  border-radius: 20px;
}
.contact-details-time span {
  display: block;
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-time span svg {
    height: 50px;
    width: 50px;
  }
}
.contact-details-time strong {
  font-weight: 600;
  font-size: 45px;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-heading);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-time strong {
    font-size: 18px;
  }
}
.contact-details-info-wrap {
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: 1px solid #D9D9D9;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-info-wrap {
    fpb: 30px;
  }
}
.contact-details-info-wrap .oit-btn-border {
  padding: 15px 24px;
}
@media (max-width: 767px) {
  .contact-details-info-wrap .contact-btn {
    margin-top: 30px;
  }
}
@media (max-width: 767px) {
  .contact-details-info-wrap .oit-btn-border {
    padding: 4px 24px;
    font-size: 12px;
  }
}
.contact-details-info-top span {
  font-weight: 600;
  font-size: 30px;
  display: block;
  margin-bottom: 20px;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-info-top span {
    font-size: 18px;
  }
}
.contact-details-info-top a {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  display: block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-info-top a {
    font-size: 15px;
  }
}
.contact-details-info-top-box {
  padding-bottom: 35px;
  margin-bottom: 30px;
  border-bottom: 1px solid #D9D9D9;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-info-top-box {
    flex-wrap: wrap;
  }
}
.contact-details-info-bottom span {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  display: block;
}
.contact-details-info-bottom a {
  font-weight: 400;
  font-size: 30px;
  display: block;
  margin-bottom: 30px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-info-bottom a {
    font-size: 18px;
    margin-bottom: 15px;
  }
}
.contact-style .oit-price-item {
  border: none;
  width: 555px;
  min-height: auto;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact-style .oit-price-item {
    width: auto;
  }
}
@media (max-width: 767px) {
  .contact-style .oit-price-item {
    width: auto;
  }
}
.contact-style .oit-price-title {
  color: var(--oit-clr-black);
}
.contact-style .oit-price-avater-box img {
  height: 50px;
}
.contact-style .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
}
.contact-style .shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
}
.contact-style .dg-contact-info a {
  font-weight: 400;
  font-size: 30px;
  display: block;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-style .dg-contact-info a {
    font-size: 18px;
  }
}

.map-area {
  line-height: 0;
}
.map-area iframe {
  width: 100%;
  height: 665px;
  border: 0;
  line-height: 0;
  filter: grayscale(100%) brightness(65%) contrast(120%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .map-area iframe {
    height: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .map-area iframe {
    height: 350px;
  }
}
@media (max-width: 767px) {
  .map-area iframe {
    height: 350px;
  }
}

/*----------------------------------------*/
/* brand details css
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .brand-area {
    padding-bottom: 0;
  }
}
.brand-area.brand-style-2 .brand-item {
  background-color: #101216;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.brand-item {
  height: 125px;
  line-height: 125px;
  padding: 10px 49px;
  border-radius: 10px;
  margin-bottom: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .brand-item {
    height: 90px;
    padding: 10px 15px;
  }
}
.brand-item img {
  height: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .brand-item img {
    width: 120px;
    height: 30px;
  }
}

/*----------------------------------------*/
/*  5.4 team-details details css
/*----------------------------------------*/
.team-details-area .row ~ .col {
  height: 100%;
}

.profile-card {
  border-radius: 30px;
}
.profile-thumb {
  margin-right: 35px;
  height: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .profile-thumb {
    margin-right: 0;
  }
}
.profile-thumb img {
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}
.profile-content {
  padding: 30px 70px 30px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .profile-content {
    padding: 30px;
  }
}
.profile-content .title {
  font-weight: 600;
  font-size: 45px;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .profile-content .title {
    font-size: 30px;
  }
}
.profile-content > span {
  font-weight: 600;
  font-size: 20px;
  display: block;
  margin-bottom: 45px;
  color: rgba(13, 13, 13, 0.6);
}
.profile-content > p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.67;
}
@media (max-width: 767px) {
  .profile-content > p {
    font-size: 16px;
  }
}
.profile-content .contact-info {
  position: relative;
  padding-left: 40px;
  padding-bottom: 15px;
  margin-bottom: 55px;
  border-bottom: 1px solid #D9D9D9;
}
.profile-content .contact-info > a {
  font-weight: 600;
  font-size: 20px;
  color: var(--oit-clr-black);
}
.profile-content .contact-info span {
  display: block;
  font-size: 14px;
  margin-top: 3px;
}
.profile-content .contact-info svg {
  position: absolute;
  top: 10px;
  left: 0;
}
.profile-content .contact-social {
  padding-bottom: 32px;
  margin-bottom: 55px;
  border-bottom: 1px solid #D9D9D9;
}
.profile-content .contact-social a {
  height: 40px;
  width: 40px;
  line-height: 36px;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  transition: 0.3s;
  color: var(--oit-grey-2);
  background: rgba(13, 13, 13, 0.08);
}
.profile-content .contact-social a:not(:last-child) {
  margin-right: 10px;
}
.profile-content .contact-social a:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}

/*----------------------------------------*/
/*  5.4 testimonial details css
/*----------------------------------------*/
.dg-testimonial-area.service-style .dg-testimonial-item {
  min-height: auto;
  transition: 0.3s;
}
.dg-testimonial-area.service-style .dg-testimonial-item:hover {
  background-color: #EEEEEE;
}
.dg-testimonial-area.service-style .text-large {
  margin-top: 110px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-testimonial-area.service-style .text-large {
    margin-top: 20px;
  }
}

/*----------------------------------------*/
/*  5.4 reak-dark css start here
/*----------------------------------------*/
.reak-dark .oit-about-content p {
  color: #999999;
}
.reak-dark .oit-award-area p {
  color: #999999;
}
.reak-dark .oit-project-content {
  background-color: #101216;
}
.reak-dark .oit-team-item {
  background-color: #101216;
}
.reak-dark .oit-btn-line {
  color: var(--oit-clr-white);
}
.reak-dark .oit-project-category span:first-child::after {
  background-color: #999999;
}
.reak-dark .oit-about-text p {
  color: var(--oit-clr-white);
}
.reak-dark .oit-about-text span {
  color: var(--oit-clr-white);
}
.reak-dark .oit-team-title {
  color: var(--oit-clr-white);
}
.reak-dark .oit-team-content span {
  color: var(--oit-clr-white);
}
.reak-dark .oit-team-social span {
  color: var(--oit-clr-white);
}
.reak-dark .oit-faq-accordion-wrap .accordion-body p {
  color: #999999;
}
.reak-dark .oit-section-subtitle {
  color: #999999;
}
.reak-dark .oit-section-title {
  color: var(--oit-clr-white);
}
.reak-dark .oit-funfact-title {
  color: var(--oit-clr-white);
}
.reak-dark .oit-funfact-item span {
  color: #999999;
}
.reak-dark .oit-funfact-area .row > [class^=col]:not(:last-child) .oit-funfact-item {
  border-inline-end: 1px solid #303030;
}
.reak-dark .oit-funfact-bdr {
  border-top: 1px solid #303030;
  border-bottom: 1px solid #303030;
}
.reak-dark .oit-award-content p, .reak-dark .oit-award-content span {
  color: var(--oit-clr-white);
}
.reak-dark .oit-award-icon img {
  opacity: 0.7;
}
.reak-dark .oit-blog-content span {
  color: #999999;
}
.reak-dark .oit-blog-title {
  color: var(--oit-clr-white);
}
.reak-dark .dg-step-item {
  background-color: #101216 !important;
}
.reak-dark .dg-step-item span {
  color: #999999;
}
.reak-dark .dg-step-item p {
  color: #999999;
}
.reak-dark .dg-step-title {
  color: var(--oit-clr-white);
}
.reak-dark .dg-step-big-text {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.05);
}
.reak-dark .oit-project-title {
  color: var(--oit-clr-white);
}
.reak-dark .oit-project-category span {
  color: #999999;
}
.reak-dark .dg-team-title {
  color: var(--oit-clr-white);
}
.reak-dark .dg-team-author-info span {
  color: rgba(255, 255, 255, 0.6);
}
.reak-dark .dg-team-author-wrap {
  background-color: #101216;
}
.reak-dark .oit-text-slider-item span {
  color: var(--oit-clr-white);
}
.reak-dark .oit-bin-to-card-area .shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.reak-dark .oit-bin-to-card-item .ratting-text > span:first-child {
  color: var(--oit-clr-white);
}
.reak-dark .dg-funfact-title {
  color: var(--oit-clr-white);
}
.reak-dark .dg-funfact-item p {
  color: #999999;
}
.reak-dark .oit-section-title-box p {
  color: #999999;
}
.reak-dark .dg-testimonial-item {
  background-color: #101216;
}
.reak-dark .dg-testimonial-item p.text-large {
  color: var(--oit-clr-white);
}
.reak-dark .dg-testimonial-item p.text-small {
  color: #999999;
}
.reak-dark .dg-testimonial-item p span {
  color: var(--oit-clr-white);
}
.reak-dark .dg-testimonial-item .quote svg {
  color: var(--oit-clr-white);
}
.reak-dark .dg-testimonial-authour-title {
  color: var(--oit-clr-white);
}
.reak-dark .dg-testimonial-authour-info span {
  color: #999999;
}
.reak-dark .oit-faq-accordion-wrap .accordion-item {
  background-color: var(--oit-clr-black);
}
.reak-dark .accordion-header {
  color: var(--oit-clr-white);
}
.reak-dark .oit-footer-widget {
  background-color: #0D0D0D;
}
.reak-dark .sd-about-mission-wrap {
  background: #101216;
}
.reak-dark .sd-about-mission-wrap .nav-tab li button.active {
  color: var(--oit-clr-white);
}
.reak-dark .sd-about-mission-wrap .nav-tab li button {
  color: rgba(255, 255, 255, 0.5);
}
.reak-dark .sd-about-mission-wrap .tab-content p {
  color: rgba(255, 255, 255, 0.5);
}
.reak-dark .st-service-style .oit-service-item {
  background-color: #0D0D0D;
}
.reak-dark .st-service-style .oit-service-title {
  color: var(--oit-clr-white);
}
.reak-dark .dg-service-style .oit-service-title {
  color: var(--oit-clr-white);
}
.reak-dark .st-service-style .oit-service-content p {
  color: #999999;
}
.reak-dark .st-service-cat span {
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.reak-dark .dg-team-social a {
  background-color: #0D0D0D;
  color: var(--oit-clr-white);
}
.reak-dark .dg-team-social a:hover {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.reak-dark .st-testimonial-info {
  background-color: #101216;
}
.reak-dark .st-testimonial-ratting {
  color: var(--oit-clr-white);
}
.reak-dark .reak-dark p {
  color: var(--oit-clr-white);
}
.reak-dark .dg-contact-form-box {
  background: #0D0D0D;
}
.reak-dark .st-price-value {
  color: var(--oit-clr-white);
}
.reak-dark .st-price-list ul li {
  color: var(--oit-clr-white);
}
.reak-dark .st-price-item {
  background-color: #0D0D0D;
}
.reak-dark .st-price-btn .oit-btn-border {
  color: var(--oit-clr-white);
  border: 1px solid #999999;
}
.reak-dark .st-price-head {
  background-color: #101216;
}
.reak-dark .st-price-item.active .st-price-btn .oit-btn-border {
  color: var(--oit-clr-black);
  border: 1px solid var(--oit-clr-white);
  background-color: var(--oit-clr-white);
}
.reak-dark .sd-service-style .oit-service-title {
  color: var(--oit-clr-black);
}
.reak-dark .sd-service-style .oit-service-content p {
  color: var(--oit-clr-black);
}
.reak-dark .sd-funfact-card span {
  color: #999999;
}
.reak-dark .sd-funfact-card.card-1 {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.reak-dark .sd-funfact-card.card-3 {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.reak-dark .sd-funfact-card.card-2 {
  background-color: #101216 !important;
}
.reak-dark .sd-funfact-card.card-4 {
  background-color: #101216 !important;
}
.reak-dark .sd-funfact-title {
  color: var(--oit-clr-white);
}
.reak-dark .sd-choose-card-title {
  color: var(--oit-clr-white);
}
.reak-dark .sd-choose-card {
  background-color: #0D0D0D;
}
.reak-dark .sd-choose-card-inner {
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.reak-dark .sd-choose-card-icon svg {
  color: var(--oit-clr-white);
}
.reak-dark .sd-choose-card-body p {
  color: #999999;
}
.reak-dark .sd-team-title {
  color: var(--oit-clr-white);
}
.reak-dark .sd-team-content span {
  color: #999999;
}
.reak-dark .reak-dark .sd-team-social a {
  background-color: rgba(255, 255, 255, 0.4);
}
.reak-dark .reak-dark .sd-team-social a:hover {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.reak-dark .sd-team-row-item .row [class*=col]:not(:last-child) .sd-team-item {
  border-right: 1px solid #D9D9D9;
}
.reak-dark .sd-team-row-item {
  border-bottom: 1px solid #D9D9D9;
}
.reak-dark .oit-bin-to-card-item.grey-bg.card-1 {
  background-color: #101216 !important;
}
.reak-dark .oit-bin-to-card-item.grey-bg.card-3 {
  background-color: #101216 !important;
}
.reak-dark .oit-bin-to-card-title {
  color: var(--oit-clr-white);
}
.reak-dark .oit-bin-to-card-item span {
  color: #999999;
}
.reak-dark .st-testimonial-info p {
  color: var(--oit-clr-white);
}
.reak-dark .st-testimonial-info span {
  color: var(--oit-clr-white);
}
.reak-dark .sd-team-social a {
  background-color: var(--oit-clr-white);
}
.reak-dark .sd-team-social a:hover {
  background-color: #101216;
}
.reak-dark .ba-about-vision-title {
  color: var(--oit-clr-white);
}
.reak-dark .ba-about-vision-item p {
  color: #999999;
}
.reak-dark .ba-about-vision-item p span {
  color: var(--oit-clr-white);
}
.reak-dark .ba-about-vision-item ul li span {
  color: #999999;
}
.reak-dark .ba-about-vision-item ul li span::before {
  background-color: var(--oit-clr-white);
}
.reak-dark .dg-contact-area.faq-style .dg-contact-info span {
  color: var(--oit-clr-white);
}
.reak-dark .dg-contact-area.faq-style .dg-contact-info a {
  color: rgba(255, 255, 255, 0.7) !important;
}
.reak-dark .dg-contact-area.faq-style .dg-contact-social a {
  color: var(--oit-clr-white);
}
.reak-dark .dg-contact-area.faq-style .dg-contact-form-box {
  background: rgba(0, 0, 0, 0.8);
}
.reak-dark .dg-contact-area.faq-style .dg-contact-form-box label {
  color: var(--oit-clr-white);
}
.reak-dark .dg-contact-area.faq-style .dg-contact-input-box input {
  color: var(--oit-clr-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.reak-dark .dg-contact-area.faq-style .dg-contact-input-box input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}
.reak-dark .dg-contact-area.faq-style .dg-contact-select .nice-select {
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.reak-dark .dg-contact-area.faq-style .dg-contact-textarea-box textarea {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.reak-dark .dg-contact-area.faq-style .dg-contact-select .nice-select span.current {
  color: rgba(255, 255, 255, 0.8);
}
.reak-dark .blog-details-breadcrumb-big-title {
  color: var(--oit-clr-white);
}
.reak-dark .dg-contact-area.faq-style .dg-contact-select .nice-select::after {
  border-bottom: 2px solid var(--oit-clr-white);
  border-right: 2px solid var(--oit-clr-white);
}
.reak-dark .career-item {
  background-color: #101216;
}
.reak-dark .career-item p {
  color: #999999;
}
.reak-dark .career-item .title {
  color: var(--oit-clr-white);
}
.reak-dark .career-meta span {
  color: #999999;
}
.reak-dark .career-meta span:not(:last-child) {
  border-right: 1px solid #999999;
}
.reak-dark .oit-btn-border.btn-small:hover {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.reak-dark .blog-details-breadcrumb-title {
  color: var(--oit-clr-white);
}
.reak-dark .blog-details-breadcrumb-badges.badges-style-2 {
  border-bottom: 1px solid #999999;
}
.reak-dark .sidebar-widget-title {
  color: var(--oit-clr-white);
  border-bottom: 1px solid rgba(73, 73, 73, 0.6);
}
.reak-dark .sidebar-search-box input {
  color: var(--oit-clr-white);
  background: #0D0D0D;
}
.reak-dark .sidebar-search-button button {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.reak-dark .sidebar-widget {
  background-color: #101216;
}
.reak-dark .sidebar-widget-list span {
  color: #999999;
}
.reak-dark .sidebar-widget-list:hover {
  color: var(--oit-clr-white);
}
.reak-dark .sidebar-widget-post .rc-post-title {
  color: var(--oit-clr-white);
}
.reak-dark .sidebar-widget-post .rc-meta span {
  color: #999999;
}
.reak-dark .sidebar-widget-list {
  color: #999999;
}
.reak-dark .sidebar-widget-list.active {
  color: #999999;
}
.reak-dark .sidebar-widget-list:hover svg {
  color: var(--oit-clr-white);
}
.reak-dark .postbox-title {
  color: var(--oit-clr-white);
}
.reak-dark .postbox-dsc p {
  color: #999999;
}
.reak-dark .postbox-left {
  background-color: #101216;
}
.reak-dark .postbox-tag-title {
  color: var(--oit-clr-white);
}
.reak-dark .postbox-tag-content a {
  color: var(--oit-clr-white);
  border: 1px solid rgba(93, 93, 93, 0.7);
}
.reak-dark .postbox-share-content a {
  color: var(--oit-clr-white);
  border: 1px solid rgba(93, 93, 93, 0.7);
  background-color: rgba(13, 13, 13, 0.08);
}
.reak-dark .postbox-share-content a:hover {
  color: var(--oit-clr-white);
  background-color: #000;
}
.reak-dark .postbox-share-content a svg {
  color: var(--oit-clr-white);
}
.reak-dark .postbox-user-info .user-title {
  color: var(--oit-clr-white);
}
.reak-dark .postbox-user-info p {
  color: #999999;
}
.reak-dark .postbox-form-input-box input {
  color: var(--oit-clr-white);
  border: 1px solid rgba(73, 73, 73, 0.8);
}
.reak-dark .postbox-form-input-box input::placeholder {
  color: var(--oit-clr-white);
}
.reak-dark .postbox-form-textarea-box textarea {
  color: var(--oit-clr-white);
  border: 1px solid rgba(73, 73, 73, 0.8);
}
.reak-dark .postbox-form-textarea-box textarea::placeholder {
  color: var(--oit-clr-white);
}
.reak-dark .blog-details-breadcrumb-author-info .title-sm {
  color: var(--oit-clr-white);
}
.reak-dark .blog-details-breadcrumb-author-info span {
  color: #999999;
}
.reak-dark .blog-details-date-box span {
  color: #999999;
}
.reak-dark .blog-details-date-box strong {
  color: var(--oit-clr-white);
}
.reak-dark .postbox-comment ul li {
  background: linear-gradient(209deg, oklab(18.184% -0.00087 -0.00879/0.9) 0%, rgba(16, 18, 22, 0.9) 100%);
}
.reak-dark .postbox-content .postbox-form-input-box input {
  background-color: #101216;
}
.reak-dark .postbox-content .postbox-form-textarea-box textarea {
  background-color: #101216;
}
.reak-dark .postbox-form-input-box input:focus {
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.reak-dark .postbox-form-textarea-box textarea:focus {
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.reak-dark .postbox-area.blog-standard-style .blog-details-breadcrumb-badges .badge {
  background-color: #434343;
  color: #999999;
}
.reak-dark .blog-details-breadcrumb-badges.badges-style-2 > div {
  background-color: #434343;
}
.reak-dark .blog-details-breadcrumb-badges .badge {
  color: #999999;
}
.reak-dark .oit-btn-border.btn-small {
  color: #999999;
  background-color: #434343;
}
.reak-dark .oit-btn-border.btn-black-bg:hover i {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}
.reak-dark .career-details-meta strong {
  color: var(--oit-clr-white);
}
.reak-dark .career-details-meta span {
  color: #999999;
}
.reak-dark .career-details-list li span {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  color: var(--oit-clr-white);
}
.reak-dark .career-details-list li span svg, .reak-dark .career-details-list li span i {
  color: var(--oit-clr-white);
}
.reak-dark .career-details-deadline strong {
  color: var(--oit-clr-white);
}
.reak-dark .career-details-deadline span {
  color: #999999;
}
.reak-dark .contact-style .oit-price-item {
  border: none;
  width: 555px;
  min-height: auto;
  background-color: var(--oit-clr-black);
}
.reak-dark .contact-style .oit-price-title {
  color: var(--oit-clr-white);
}
.reak-dark .contact-details-big-title {
  color: var(--oit-clr-white);
}
.reak-dark .contact-details-info-wrap {
  border-top: 1px solid #434343;
}
.reak-dark .contact-details-info-top-box {
  border-bottom: 1px solid #434343;
}
.reak-dark .contact-details-info-top span {
  color: var(--oit-clr-white);
}
.reak-dark .contact-details-info-top a {
  color: #999999;
}
.reak-dark .contact-details-info-bottom a {
  color: #999999;
}
.reak-dark .contact-details-time strong {
  color: var(--oit-clr-white);
}
.reak-dark .contact-details-time svg {
  color: var(--oit-clr-white);
}
.reak-dark .contact-details-info-wrap .oit-btn-border {
  border-color: #101216;
  background-color: #101216;
}
.reak-dark .project-slide-style .oit-project-item {
  background-color: var(--oit-clr-black);
}
.reak-dark .project-details-author-list ul li span {
  color: var(--oit-clr-white);
}
.reak-dark .project-details-subtitle {
  color: #999999;
}
.reak-dark .profile-content .title {
  color: var(--oit-clr-white);
}
.reak-dark .profile-content > span {
  font-weight: 600;
  font-size: 20px;
  display: block;
  margin-bottom: 45px;
  color: rgba(255, 255, 255, 0.6);
}
.reak-dark .profile-content > p {
  color: #999999;
}
.reak-dark .profile-content .contact-info > a {
  font-weight: 600;
  font-size: 20px;
  color: var(--oit-clr-white);
}
.reak-dark .profile-content .contact-info span {
  color: #999999;
}
.reak-dark .profile-content .contact-social a {
  color: #999999;
  background: #0D0D0D;
}
.reak-dark .profile-content .contact-social a:hover {
  color: var(--oit-clr-white);
}
.reak-dark .error-title {
  color: var(--oit-clr-white);
}
.reak-dark .error-thumb img {
  filter: invert(1);
}
.reak-dark .header-dark .oit-header-logo img {
  filter: invert(1);
}
.reak-dark .header-dark.oit-header-bdr {
  border-bottom: 1px dashed var(--oit-clr-white);
}
.reak-dark .header-dark .oit-header-menu nav > ul > li > a {
  color: var(--oit-clr-white);
}
.reak-dark .oit-award-icon img {
  opacity: 0.7;
  filter: invert(1);
}
.reak-dark .blog-details-breadcrumb-badges .badge {
  background-color: #434343;
}
.reak-dark .blog-details-breadcrumb-area .blog-details-breadcrumb-author-wrap {
  background-color: #434343;
}
.reak-dark .dg-testimonial-area.service-style .dg-testimonial-item:hover {
  background-color: #0D0D0D;
}
.reak-dark .oitoffcanvas__logo img {
  filter: invert(1);
}
.reak-dark .oitoffcanvas__text p {
  color: rgba(153, 153, 153, 0.6);
}
.reak-dark .oit-menu-mobile ul li:not(:last-child) > a, .reak-dark .oit-category-mobile-menu ul li:not(:last-child) > a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.reak-dark .oit-menu-mobile ul li > a, .reak-dark .oit-category-mobile-menu ul li > a {
  color: var(--oit-clr-white);
}
.reak-dark .oitoffcanvas__info .offcanva-title {
  color: var(--oit-clr-white);
}
.reak-dark .oitoffcanvas__info-icon a {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.reak-dark .oitoffcanvas__info-address a {
  color: var(--oit-clr-white);
}
.reak-dark .oitoffcanvas__info-address span {
  color: rgba(153, 153, 153, 0.6);
}
.reak-dark .oitoffcanvas {
  background: var(--oit-clr-black) none repeat scroll 0 0;
}
.reak-dark .oitoffcanvas__text {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.reak-dark .oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn {
  color: var(--oit-clr-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.reak-dark .oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover {
  background-color: var(--oit-clr-white);
}
.reak-dark .oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover i {
  color: var(--oit-clr-black);
}
.reak-dark .oit-menu-mobile ul li:hover > a .dropdown-toggle-btn i, .reak-dark .oit-category-mobile-menu ul li:hover > a .dropdown-toggle-btn i {
  color: var(--oit-clr-white);
}
.reak-dark .oitoffcanvas__close-btn button {
  color: var(--oit-clr-white);
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.5);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.5);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.5);
}

/*# sourceMappingURL=reak.css.map */